/* =============================================================
   CAMADA DE RESPONSIVIDADE MOBILE EXECUTIVA
   CAPACITAR · Presidência CODEMAR · Versão 1.0 · 08/10/2026
   =============================================================
   REGRAS GERAIS:
   1. TUDO neste arquivo é prefixado com :root.is-mobile OU .is-mobile
   2. NADA afeta o Desktop (sem a classe is-mobile em <html>)
   3. Rollback instantâneo: renomeie para _DISABLED_mobile_safe.css
   ============================================================= */

/* =============================================================
   SEÇÃO 1 — CAMADA BASE: Fonte Responsiva e Altura Dinâmica 100dvh
   ============================================================= */
:root.is-mobile {
    --fs-base: clamp(14px, 3.2vw, 16px);
    --fs-h1: clamp(1.5rem, 5.5vw, 2.2rem);
    --fs-h2: clamp(1.2rem, 4.5vw, 1.8rem);
    --fs-h3: clamp(1rem, 3.8vw, 1.35rem);
    --fs-p: clamp(0.85rem, 3.0vw, 1rem);
    --nav-h: calc(58px + env(safe-area-inset-top, 0px));
    --bn-h: calc(68px + env(safe-area-inset-bottom, 0px));
}

:root.is-mobile body {
    font-size: var(--fs-base);
    line-height: 1.45;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root.is-mobile h1, :root.is-mobile h1.form-title, :root.is-mobile .hero-title {
    font-size: var(--fs-h1) !important;
    line-height: 1.2;
}
:root.is-mobile h2, :root.is-mobile .section-title, :root.is-mobile .gamification-card-title {
    font-size: var(--fs-h2) !important;
    line-height: 1.25;
}
:root.is-mobile h3 { font-size: var(--fs-h3) !important; line-height: 1.3; }
:root.is-mobile p, :root.is-mobile span, :root.is-mobile a, :root.is-mobile label,
:root.is-mobile li, :root.is-mobile td, :root.is-mobile th, :root.is-mobile small,
:root.is-mobile .card-body, :root.is-mobile .tc2-card-body, :root.is-mobile .vs-card-text,
:root.is-mobile .gw-tier-name, :root.is-mobile .gw-xp-labels, :root.is-mobile .mission-item span,
:root.is-mobile .gamification-card-action, :root.is-mobile .premium-toggles {
    font-size: var(--fs-p) !important;
}

/* =============================================================
   SEÇÃO 2 — SAFE AREAS: Notch, Ilhas Dinâmicas e Barra Gestual
   ============================================================= */
@supports (padding: max(0px)) {
    :root.is-mobile body {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    :root.is-mobile .navbar,
    :root.is-mobile nav.navbar {
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-left: calc(10px + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(10px + env(safe-area-inset-right, 0px)) !important;
        height: var(--nav-h) !important;
        min-height: var(--nav-h) !important;
    }
    :root.is-mobile .navbar-brand img,
    :root.is-mobile .navbar-brand svg,
    :root.is-mobile .brand-small {
        max-height: 34px !important;
        height: 34px !important;
    }
}

/* Fallback para navegadores sem @supports */
:root.is-mobile .navbar, :root.is-mobile nav.navbar {
    height: var(--nav-h) !important;
    min-height: var(--nav-h) !important;
}

/* =============================================================
   SEÇÃO 3 — CONTAINER PRINCIPAL: 100% Largura (sem desktop margins)
   ============================================================= */
:root.is-mobile .app-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 12px 10px !important;
    margin: 0 !important;
}
:root.is-mobile .dashboard {
    padding: 12px 10px !important;
    max-width: 100% !important;
}
:root.is-mobile .navbar {
    margin-bottom: 1rem !important;
    border-radius: 14px !important;
    padding: 0 12px 0 12px !important;
    height: var(--nav-h) !important;
}
:root.is-mobile .main-content { padding: 0 !important; }
:root.is-mobile .container, :root.is-mobile .container-fluid { padding: 0 8px; }

/* =============================================================
   SEÇÃO 4 — LOGIN PAGE FULLSCREEN MOBILE
   ============================================================= */
:root.is-mobile .login-page-container {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100% !important;
    max-width: 100% !important;
}
:root.is-mobile .login-card-premium {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column !important;
    box-shadow: none !important;
    overflow: visible !important;
}
:root.is-mobile .login-side-brand {
    display: none !important;
    width: 0 !important;
    flex: 0 !important;
}
:root.is-mobile .login-side-form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 4.5rem 1.25rem 1.5rem !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    justify-content: flex-start !important;
    min-height: 100dvh !important;
    flex: 1 !important;
}
:root.is-mobile .form-title {
    font-size: 1.6rem !important;
}
:root.is-mobile .premium-toggles {
    top: 12px !important;
    right: 12px !important;
    gap: 6px !important;
}
:root.is-mobile .btn-toggle-circle {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.75rem !important;
}
:root.is-mobile .login-logo {
    max-height: 44px !important;
    height: 44px !important;
    margin-bottom: 0.25rem !important;
}
:root.is-mobile .login-brand-text h1 {
    font-size: 1.25rem !important;
}
:root.is-mobile .input-premium {
    min-height: 48px !important;
}
:root.is-mobile .btn-primary-login {
    min-height: 48px !important;
    border-radius: 12px !important;
}

/* Breakpoint extra: telas minúsculas < 400px */
@media (max-width: 400px) {
    :root.is-mobile .login-side-form { padding: 4rem 1rem 1rem !important; }
    :root.is-mobile .form-title { font-size: 1.45rem !important; }
    :root.is-mobile .btn-toggle-circle { width: 32px !important; height: 32px !important; }
}

/* =============================================================
   SEÇÃO 5 — HOME / HERO SECTION / SLIDES
   ============================================================= */
:root.is-mobile .hero-section {
    border-radius: 18px !important;
    padding: 0 !important;
    overflow: hidden !important;
}
:root.is-mobile .hero-slide,
:root.is-mobile .hero-slide.item {
    grid-template-columns: 1fr !important;
    grid-template-areas: "content" !important;
    min-height: auto !important;
    padding: 1.5rem 1rem !important;
    gap: 0 !important;
}
:root.is-mobile .hero-content {
    grid-area: content;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
:root.is-mobile .hero-slide .hero-panel {
    display: none !important;
}
:root.is-mobile .hero-eyebrow {
    display: inline-flex !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.6rem !important;
    margin-bottom: 0.5rem !important;
}
:root.is-mobile .hero-content h2 { margin-bottom: 0.5rem !important; }
:root.is-mobile .hero-content > p { margin-bottom: 1rem !important; }
:root.is-mobile .hero-content > div[style*="display:flex"],
:root.is-mobile .hero-content div:has(.btn-hero) {
    flex-direction: column !important;
    gap: 0.5rem !important;
}
:root.is-mobile .btn-hero,
:root.is-mobile .hero-content .btn-hero {
    width: 100% !important;
    justify-content: center !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    padding: 0 1rem !important;
    font-size: 0.95rem !important;
}
:root.is-mobile .owl-dots {
    margin-top: 0.5rem !important;
    padding: 0 0 0.25rem 0 !important;
}

/* Trilha / Progress Bar topo */
:root.is-mobile .trilha-progress-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.8rem 1rem !important;
    border-radius: 14px !important;
}
:root.is-mobile .trilha-progress-banner > div:first-child { width: 100% !important; }
:root.is-mobile .trilha-progress-banner .btn:has(.btn-cta) {
    width: 100% !important;
    justify-content: center !important;
    min-width: unset !important;
    max-width: 100% !important;
}

/* =============================================================
   SEÇÃO 6 — GRID DE CARDS: Trilha CODEMAR, Trending e Widgets
   ============================================================= */
:root.is-mobile #trilha-oficial-codemar {
    padding: 1.2rem 0.9rem !important;
    border-radius: 18px !important;
}
:root.is-mobile #trilha-oficial-codemar .section-header-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
}
:root.is-mobile .tc2-pill-row {
    gap: 0.4rem !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
    scroll-snap-type: x mandatory !important;
}
:root.is-mobile .tc2-pill {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
}
:root.is-mobile #trilha-oficial-codemar [class*="grid"],
:root.is-mobile #trilha-oficial-codemar .courses-grid,
:root.is-mobile #trilha-oficial-codemar > .grid,
:root.is-mobile #trilha-oficial-codemar > div:has(.tc2-card) {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
}
@media (min-width: 580px) and (max-width: 768px) {
    :root.is-mobile #trilha-oficial-codemar [class*="grid"],
    :root.is-mobile #trilha-oficial-codemar .courses-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
:root.is-mobile .tc2-card {
    min-height: auto !important;
    border-radius: 14px !important;
}
:root.is-mobile .tc2-card-top { padding: 0.9rem 0.9rem 0.5rem 0.9rem !important; }
:root.is-mobile .tc2-card-body { padding: 0 0.9rem 0.9rem 0.9rem !important; }
:root.is-mobile .tc2-card-title { font-size: 1rem !important; }
:root.is-mobile .tc2-prog-wrap { padding: 0.5rem 0.9rem 0.9rem !important; }

:root.is-mobile .trending-carousel {
    padding: 0 !important;
}
:root.is-mobile .trending-card {
    min-width: 82vw !important;
    border-radius: 16px !important;
}

/* Gamification Widget */
:root.is-mobile .gamification-widget {
    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}
:root.is-mobile .gamification-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
}
:root.is-mobile .gamification-card {
    border-radius: 14px !important;
    padding: 1rem !important;
}
:root.is-mobile .mission-item {
    padding: 0.55rem 0 !important;
    min-height: 44px !important;
}
:root.is-mobile .vs-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
}
:root.is-mobile .vs-card {
    border-radius: 14px !important;
    padding: 1rem !important;
}
:root.is-mobile .hall-grid,
:root.is-mobile .trilhas-row-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
}
:root.is-mobile .trilha-card,
:root.is-mobile .hall-card {
    border-radius: 14px !important;
    aspect-ratio: 16 / 10 !important;
}

/* =============================================================
   SEÇÃO 7 — BOTTOM NAV BAR (Fixa e Inviolável)
   ============================================================= */
:root.is-mobile .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    height: 68px !important;
    padding: 0 0.25rem 0 0.25rem !important;
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08) !important;
}
:root.is-mobile .mbn-item {
    flex: 1 1 0% !important;
    min-height: 48px !important;
    padding: 6px 2px !important;
    gap: 2px !important;
}
:root.is-mobile .mbn-item svg,
:root.is-mobile .mbn-item i {
    font-size: 1.15rem !important;
}
:root.is-mobile .mbn-item-label {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
}
:root.is-mobile .mbn-center-pill {
    width: 56px !important;
    height: 56px !important;
    margin-top: -10px !important;
}
:root.is-mobile body.has-bottom-nav {
    padding-bottom: var(--bn-h) !important;
}
:root.is-mobile body.has-bottom-nav .app-container,
:root.is-mobile body.has-bottom-nav .dashboard,
:root.is-mobile body.has-bottom-nav .footer,
:root.is-mobile body.has-bottom-nav .gamification-widget,
:root.is-mobile body.has-bottom-nav > .main-content {
    padding-bottom: var(--bn-h) !important;
}

/* Duplicata inline do cat-selector-wrapper (oculta em mobile pois Bottom Nav cumpre papel) */
:root.is-mobile .cat-selector-wrapper {
    display: none !important;
}

/* Tema escuro Bottom Nav */
:root.is-mobile.dark-mode .mobile-bottom-nav,
:root.is-mobile body.dark-mode .mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.97) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* =============================================================
   SEÇÃO 8 — INPUTS SEM ZOOM iOS + Área Toque WCAG 44px
   ============================================================= */
:root.is-mobile input,
:root.is-mobile select,
:root.is-mobile select option,
:root.is-mobile textarea,
:root.is-mobile button {
    font-size: 16px !important;
}
:root.is-mobile input,
:root.is-mobile select,
:root.is-mobile textarea {
    min-height: 44px !important;
    padding: 0 0.85rem !important;
    border-radius: 10px !important;
}
:root.is-mobile textarea {
    min-height: 96px !important;
    padding: 0.7rem 0.85rem !important;
    line-height: 1.5 !important;
}
:root.is-mobile button,
:root.is-mobile .btn,
:root.is-mobile .btn-primary,
:root.is-mobile .btn-hero,
:root.is-mobile .cat-item,
:root.is-mobile .chip,
:root.is-mobile .tc2-pill,
:root.is-mobile .mbn-item,
:root.is-mobile [role="button"] {
    min-height: 44px !important;
    -webkit-tap-highlight-color: transparent !important;
}
:root.is-mobile .search-box,
:root.is-mobile .search-input {
    min-height: 44px !important;
}

/* Tema escuro */
:root.is-mobile.dark-mode input,
:root.is-mobile.dark-mode select,
:root.is-mobile.dark-mode textarea,
:root.is-mobile.dark-mode button,
:root.is-mobile body.dark-mode input,
:root.is-mobile body.dark-mode select,
:root.is-mobile body.dark-mode textarea,
:root.is-mobile body.dark-mode button {
    font-size: 16px !important;
}

/* =============================================================
   SEÇÃO 9 — ELEMENTOS FLUTUANTES: Back-to-top / FAB / PWA Banner
   ============================================================= */
:root.is-mobile .back-to-top-wrapper {
    bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(14px + env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
}
:root.is-mobile .back-to-top-btn {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
}
:root.is-mobile #novidades-fab,
:root.is-mobile .novidades-fab,
:root.is-mobile .floating-chat-btn {
    right: calc(16px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--bn-h) + 14px) !important;
}
:root.is-mobile #novidades-fab {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
}
:root.is-mobile #install-banner-pwa,
:root.is-mobile .pwa-install-banner {
    bottom: calc(var(--bn-h) + 8px) !important;
    left: calc(8px + env(safe-area-inset-left, 0px)) !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
    border-radius: 14px !important;
}

/* =============================================================
   SEÇÃO 10 — BREAKPOINT FINAL: Telas minúsculas < 360px
   ============================================================= */
@media (max-width: 360px) {
    :root.is-mobile {
        --fs-base: clamp(13px, 3.6vw, 15px);
    }
    :root.is-mobile .navbar { padding: 0 8px !important; }
    :root.is-mobile .app-container,
    :root.is-mobile .dashboard {
        padding: 10px 6px !important;
    }
    :root.is-mobile .tc2-card-body,
    :root.is-mobile .tc2-card-top,
    :root.is-mobile .gamification-card,
    :root.is-mobile .vs-card {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    :root.is-mobile .mbn-item { padding: 4px 0 !important; }
    :root.is-mobile .mbn-item-label { font-size: 0.62rem !important; }
    :root.is-mobile .mbn-center-pill {
        width: 52px !important;
        height: 52px !important;
    }
}

/* =============================================================
   SEÇÃO 11 — DIVERSOS: Footer, Scroll, Cards Genéricos
   ============================================================= */
:root.is-mobile .footer {
    padding: 2rem 1rem calc(1.5rem + var(--bn-h)) !important;
    border-radius: 0 !important;
}
:root.is-mobile .footer-grid,
:root.is-mobile .footer-links-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
}
:root.is-mobile .card,
:root.is-mobile .course-card,
:root.is-mobile .section-card,
:root.is-mobile .stats-card {
    border-radius: 14px !important;
}
:root.is-mobile .breadcrumb {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    padding-bottom: 4px !important;
}
:root.is-mobile .badge {
    padding: 0.18rem 0.45rem !important;
    font-size: 0.7rem !important;
}

/* =============================================================
   SEÇÃO 12 — PLAYER LMS E CURSOS (Responsividade Extra)
   ============================================================= */
:root.is-mobile .lms-layout {
    grid-template-columns: 1fr !important;
}
:root.is-mobile .lms-sidebar {
    max-height: 45vh !important;
    width: 100% !important;
}
:root.is-mobile .lms-main-player {
    padding: 1rem 0.5rem !important;
}
:root.is-mobile .quiz-question-card,
:root.is-mobile .quiz-option {
    border-radius: 14px !important;
    padding: 1rem !important;
    min-height: 48px !important;
}
:root.is-mobile .video-embed,
:root.is-mobile .video-player-wrap {
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}
:root.is-mobile .video-player-wrap iframe,
:root.is-mobile .video-player-wrap video {
    width: 100% !important;
    height: 100% !important;
}

/* =============================================================
   FIM DO ARQUIVO · mobile_safe.css
   Rollback: renomeie para _DISABLED_mobile_safe.css
   ============================================================= */