/*
 * app-academia.css — SHIAI SISTEM (Portal Academia)
 * Extraído de base_academia.html — não editar inline no template.
 *
 * Carregamento: Bootstrap → tokens.css → app-academia.css
 */

/* ================================================================
   BLOCO 1 — VARIÁVEIS E ESTILOS PRINCIPAIS
   ================================================================ */
:root {

            /* Design System Colors - IDéNTICO AO OPERACIONAL */

            --color-primary: var(--shiai-blue, #1E3A8A);

            --color-primary-hover: var(--shiai-blue-dark, #0D1B3D);

            --color-primary-light: rgba(30, 58, 138, 0.12);

            --color-secondary: var(--shiai-red, #D32F2F);

            --color-secondary-hover: var(--shiai-red-dark, #B71C1C);

            --color-secondary-light: rgba(211, 47, 47, 0.12);

            --color-dark: var(--shiai-blue-dark, #0D1B3D);

            --color-dark-light: #1E3A8A;

            --color-gray-50: #F9FAFB;

            --color-gray-100: #F3F4F6;

            --color-gray-200: #E5E7EB;

            --color-gray-300: #D1D5DB;

            --color-gray-400: #9CA3AF;

            --color-gray-500: #6B7280;

            --color-gray-600: #4B5563;

            --color-gray-700: #374151;

            --color-gray-800: #1F2937;

            --color-gray-900: #111827;

            --color-success: #10B981;

            --color-success-light: #D1FAE5;

            --color-danger: var(--shiai-red, #D32F2F);

            --color-danger-light: rgba(211, 47, 47, 0.12);

            --color-warning: #F59E0B;

            --color-warning-light: #FEF3C7;

            --color-info: #0EA5E9;

            --color-info-light: #E0F2FE;

            --color-white: #FFFFFF;



            /* Spacing (8-grid system) - RESPONSIVO */

            --spacing-1: 0.25rem;

            /* 4px */

            --spacing-2: 0.5rem;

            /* 8px */

            --spacing-3: 0.75rem;

            /* 12px */

            --spacing-4: 1rem;

            /* 16px - Mobile */

            --spacing-5: 1.25rem;

            /* 20px */

            --spacing-6: 1.5rem;

            /* 24px - Tablet */

            --spacing-8: 2rem;

            /* 32px - Desktop */

            --spacing-10: 2.5rem;

            /* 40px */

            --spacing-12: 3rem;

            /* 48px */

            --spacing-16: 4rem;

            /* 64px */



            /* Typography */

            --font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

            --font-size-xs: 0.75rem;

            /* 12px */

            --font-size-sm: 0.875rem;

            /* 14px */

            --font-size-base: 1rem;

            /* 16px */

            --font-size-lg: 1.125rem;

            /* 18px */

            --font-size-xl: 1.25rem;

            /* 20px */

            --font-size-2xl: 1.5rem;

            /* 24px */

            --font-size-3xl: 1.875rem;

            /* 30px */

            --font-size-4xl: 2.25rem;

            /* 36px */



            /* Layout */

            --navbar-height: 56px;

            --border-radius-sm: 4px;

            --border-radius-md: 6px;

            --border-radius-lg: 8px;

            --border-radius-xl: 8px;



            /* Shadows */

            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);



            /* Transitions */

            --transition-fast: 150ms ease;

            --transition-base: 200ms ease;

            --transition-slow: 300ms ease;

        }



        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        body {

            font-family: var(--font-family);

            font-size: var(--font-size-base);

            line-height: 1.5;

            color: var(--color-gray-900);

            background: var(--color-gray-50);

            -webkit-font-smoothing: antialiased;

            -moz-osx-font-smoothing: grayscale;

        }



        /* Navbar academia: versao compacta */

        .navbar-shiai .navbar-container {

            min-height: 56px;

            padding-top: var(--spacing-2);

            padding-bottom: var(--spacing-2);

            gap: var(--spacing-2);

        }



        .navbar-shiai .navbar-logo {

            height: 24px;

            width: auto;

        }



        .navbar-shiai .navbar-hamburger {

            width: 34px;

            height: 34px;

        }



        .navbar-shiai .navbar-user-trigger {

            gap: var(--spacing-2);

        }



        .navbar-shiai .navbar-user-trigger svg {

            width: 16px;

            height: 16px;

        }



        .navbar-shiai .navbar-avatar {

            width: 30px;

            height: 30px;

            font-size: var(--font-size-xs);

        }



        /* Container Responsivo */

        .container {

            width: 100%;

            max-width: 100%;

            margin: 0 auto;

            padding: var(--spacing-4);

            /* Mobile: 16px */

        }



        @media (min-width: 768px) {

            .container {

                padding: var(--spacing-6);

                /* Tablet: 24px */

                max-width: 1200px;

            }

        }



        @media (min-width: 1024px) {

            .container {

                padding: var(--spacing-8);

                /* Desktop: 32px */

                max-width: 1400px;

            }

        }



        /* Cards - PADRÃO SHIAI */

        .card {

            background: var(--color-white);

            border-radius: var(--border-radius-lg);

            border: 1px solid var(--color-gray-200);

            box-shadow: var(--shadow-sm);

            transition: all var(--transition-base);

            overflow: hidden;

        }



        .card:hover {

            box-shadow: var(--shadow-md);

        }



        .card-header {

            padding: var(--spacing-4);

            border-bottom: 1px solid var(--color-gray-200);

        }



        @media (min-width: 768px) {

            .card-header {

                padding: var(--spacing-6);

            }

        }



        .card-title {

            font-size: var(--font-size-lg);

            font-weight: 600;

            color: var(--color-gray-900);

            margin: 0;

        }



        .card-body {

            padding: var(--spacing-4);

        }



        @media (min-width: 768px) {

            .card-body {

                padding: var(--spacing-6);

            }

        }



        .card-footer {

            padding: var(--spacing-4);

            border-top: 1px solid var(--color-gray-200);

            background: var(--color-gray-50);

        }



        @media (min-width: 768px) {

            .card-footer {

                padding: var(--spacing-6);

            }

        }



        /* Botões - PADRÃO SHIAI */

        .btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: var(--spacing-2);

            padding: var(--spacing-3) var(--spacing-4);

            font-size: var(--font-size-sm);

            font-weight: 500;

            border-radius: var(--border-radius-md);

            border: none;

            cursor: pointer;

            text-decoration: none;

            transition: all var(--transition-base);

            white-space: nowrap;

            min-height: 40px;

            width: auto;

        }



        @media (min-width: 768px) {

            .btn {

                min-height: 40px;

                width: auto;

                padding: var(--spacing-3) var(--spacing-6);

            }

        }



        .btn-primary {

            background: var(--color-primary);

            color: var(--color-white);

        }



        .btn-primary:hover {

            background: var(--color-primary-hover);

            transform: translateY(-1px);

            box-shadow: var(--shadow-md);

        }



        .btn-secondary {

            background: var(--color-gray-100);

            color: var(--color-gray-700);

            border: 1px solid var(--color-gray-300);

        }



        .btn-secondary:hover {

            background: var(--color-gray-200);

        }



        .btn-danger {

            background: var(--color-danger);

            color: var(--color-white);

        }



        .btn-danger:hover {

            background: #DC2626;

        }



        .btn-ghost {

            background: transparent;

            color: var(--color-gray-700);

        }



        .btn-ghost:hover {

            background: var(--color-gray-100);

        }



        .btn-outline {

            background: transparent;

            color: var(--color-primary);

            border: 1px solid var(--color-primary);

        }



        .btn-outline:hover {

            background: var(--color-primary);

            color: var(--color-white);

        }



        .btn-sm {

            padding: var(--spacing-2) var(--spacing-3);

            font-size: var(--font-size-xs);

            min-height: 36px;

            width: auto;

        }



        /* Formulários - PADRÃO SHIAI */

        .form-group {

            margin-bottom: var(--spacing-6);

        }



        .form-label {

            display: block;

            font-size: var(--font-size-sm);

            font-weight: 500;

            color: var(--color-gray-700);

            margin-bottom: var(--spacing-2);

        }



        .form-input,

        .form-select,

        .form-textarea {

            width: 100%;

            padding: var(--spacing-3) var(--spacing-4);

            font-size: var(--font-size-base);

            color: var(--color-gray-900);

            background: var(--color-white);

            border: 1px solid var(--color-gray-300);

            border-radius: var(--border-radius-md);

            transition: all var(--transition-base);

            font-family: var(--font-family);

            min-height: 48px;

            /* Altura mínima 48px */

        }



        .form-control {

            width: 100%;

            padding: var(--spacing-3) var(--spacing-4);

            font-size: var(--font-size-base);

            color: var(--color-gray-900);

            background: var(--color-white);

            border: 1px solid var(--color-gray-300);

            border-radius: var(--border-radius-md);

            transition: all var(--transition-base);

            font-family: var(--font-family);

            min-height: 48px;

        }



        .form-textarea {

            min-height: 120px;

            resize: vertical;

        }



        .form-input:focus,

        .form-select:focus,

        .form-textarea:focus {

            outline: none;

            border-color: var(--color-primary);

            box-shadow: 0 0 0 3px var(--color-primary-light);

        }



        .form-input:disabled,

        .form-select:disabled {

            background: var(--color-gray-100);

            cursor: not-allowed;

        }



        .form-error {

            color: var(--color-danger);

            font-size: var(--font-size-xs);

            margin-top: var(--spacing-1);

        }



        /* Grid Responsivo */

        .grid {

            display: grid;

            gap: var(--spacing-4);

        }



        .grid-cols-1 {

            grid-template-columns: repeat(1, minmax(0, 1fr));

        }



        @media (min-width: 768px) {

            .grid-cols-2 {

                grid-template-columns: repeat(2, minmax(0, 1fr));

            }

        }



        @media (min-width: 1024px) {

            .grid-cols-3 {

                grid-template-columns: repeat(3, minmax(0, 1fr));

            }



            .grid-cols-4 {

                grid-template-columns: repeat(4, minmax(0, 1fr));

            }

        }



        .grid-auto-fit {

            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

        }



        /* Badges */

        .badge {

            display: inline-flex;

            align-items: center;

            padding: var(--spacing-1) var(--spacing-2);

            font-size: var(--font-size-xs);

            font-weight: 500;

            border-radius: var(--border-radius-sm);

        }



        .badge-success {

            background: var(--color-success-light);

            color: #065F46;

        }



        .badge-danger {

            background: var(--color-danger-light);

            color: #991B1B;

        }



        .badge-warning {

            background: var(--color-warning-light);

            color: #92400E;

        }



        .badge-info {

            background: var(--color-primary-light);

            color: #1E40AF;

        }



        /* Alerts */

        .alert {

            padding: var(--spacing-4);

            border-radius: var(--border-radius-md);

            margin-bottom: var(--spacing-4);

            border: 1px solid;

            position: relative;

        }



        .alert-success {

            background: var(--color-success-light);

            border-color: var(--color-success);

            color: #065F46;

        }



        .alert-danger {

            background: var(--color-danger-light);

            border-color: var(--color-danger);

            color: #991B1B;

        }



        .alert-warning {

            background: var(--color-warning-light);

            border-color: var(--color-warning);

            color: #92400E;

        }



        .alert-info {

            background: var(--color-info-light);

            border-color: var(--color-info);

            color: #075985;

        }



        /* Typography */

        h1 {

            font-size: var(--font-size-2xl);

            font-weight: 700;

            color: var(--color-gray-900);

            margin-bottom: var(--spacing-4);

            line-height: 1.2;

        }



        @media (min-width: 768px) {

            h1 {

                font-size: var(--font-size-3xl);

            }

        }



        h2 {

            font-size: var(--font-size-xl);

            font-weight: 600;

            color: var(--color-gray-900);

            margin-bottom: var(--spacing-4);

        }



        @media (min-width: 768px) {

            h2 {

                font-size: var(--font-size-2xl);

            }

        }



        h3 {

            font-size: var(--font-size-lg);

            font-weight: 600;

            color: var(--color-gray-900);

            margin-bottom: var(--spacing-3);

        }



        /* Utilities */

        .text-center {

            text-align: center;

        }



        .text-left {

            text-align: left;

        }



        .text-right {

            text-align: right;

        }



        .text-gray-500 {

            color: var(--color-gray-500);

        }



        .text-gray-600 {

            color: var(--color-gray-600);

        }



        .text-gray-700 {

            color: var(--color-gray-700);

        }



        .text-gray-900 {

            color: var(--color-gray-900);

        }



        .text-primary {

            color: var(--color-primary);

        }



        .text-success {

            color: var(--color-success);

        }



        .text-danger {

            color: var(--color-danger);

        }



        .mb-2 {

            margin-bottom: var(--spacing-2);

        }



        .mb-4 {

            margin-bottom: var(--spacing-4);

        }



        .mb-6 {

            margin-bottom: var(--spacing-6);

        }



        .mb-8 {

            margin-bottom: var(--spacing-8);

        }



        .mb-0 {

            margin-bottom: 0;

        }



        .mt-2 {

            margin-top: var(--spacing-2);

        }



        .mt-4 {

            margin-top: var(--spacing-4);

        }



        .mt-6 {

            margin-top: var(--spacing-6);

        }



        .mt-8 {

            margin-top: var(--spacing-8);

        }



        .flex {

            display: flex;

        }



        .flex-col {

            flex-direction: column;

        }



        .items-center {

            align-items: center;

        }



        .justify-between {

            justify-content: space-between;

        }



        .justify-center {

            justify-content: center;

        }



        .gap-2 {

            gap: var(--spacing-2);

        }



        .gap-3 {

            gap: var(--spacing-3);

        }



        .gap-4 {

            gap: var(--spacing-4);

        }



        .gap-6 {

            gap: var(--spacing-6);

        }



        .w-full {

            width: 100%;

        }



        .w-auto {

            width: auto;

        }



        .text-muted {

            color: var(--color-gray-500);

        }



        .table-responsive {

            width: 100%;

            overflow-x: auto;

        }



        .btn-xs {

            width: auto;

            min-height: 32px;

            padding: var(--spacing-2) var(--spacing-3);

            font-size: var(--font-size-xs);

        }



        .action-row {

            display: flex;

            flex-wrap: wrap;

            gap: var(--spacing-3);

            justify-content: flex-end;

        }



        /* Page Header */

        .page-header {

            margin-bottom: var(--spacing-6);

        }



        @media (min-width: 768px) {

            .page-header {

                margin-bottom: var(--spacing-8);

            }

        }



        .page-title {

            font-size: var(--font-size-2xl);

            font-weight: 700;

            color: var(--color-gray-900);

            margin-bottom: var(--spacing-2);

        }



        @media (min-width: 768px) {

            .page-title {

                font-size: var(--font-size-3xl);

            }

        }



        .page-description {

            font-size: var(--font-size-sm);

            color: var(--color-gray-600);

        }



        .sticky-page-toolbar {

            position: sticky;

            top: var(--navbar-height);

            z-index: 1020;

            background: var(--color-gray-50);

            padding: var(--spacing-4) 0 var(--spacing-3);

            margin: calc(var(--spacing-4) * -1) 0 var(--spacing-6);

            border-bottom: 1px solid rgba(17, 24, 39, 0.08);

            box-shadow: 0 12px 24px rgba(17, 24, 39, 0.06);

        }



        .sticky-page-toolbar .page-header {

            margin-bottom: var(--spacing-4);

        }



        .sticky-page-toolbar .card {

            margin-bottom: 0 !important;

        }



        @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {

            .sticky-page-toolbar {

                background: rgba(249, 250, 251, 0.94);

                -webkit-backdrop-filter: blur(12px);

                backdrop-filter: blur(12px);

            }

            html[data-theme="dark"] .sticky-page-toolbar {

                background: rgba(10, 15, 30, 0.96);

            }

        }

        html[data-theme="dark"] .sticky-page-toolbar {

            background: var(--t-bg);

            border-bottom-color: var(--t-border);

            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

        }



        @media (min-width: 768px) {

            .page-description {

                font-size: var(--font-size-base);

            }

        }



        /* Empty State */

        .empty-state {

            text-align: center;

            padding: var(--spacing-8) var(--spacing-4);

            color: var(--color-gray-500);

        }



        .empty-state-icon,

        .empty-state .empty-state-icon,

        .empty-state svg.empty-state-icon {

            width: 64px !important;

            height: 64px !important;

            min-width: 64px;

            min-height: 64px;

            max-width: 64px;

            max-height: 64px;

            margin: 0 auto var(--spacing-4);

            color: var(--color-gray-400);

            display: block;

            flex-shrink: 0;

        }



        .empty-state-title {

            font-size: var(--font-size-lg);

            font-weight: 600;

            color: var(--color-gray-900);

            margin-bottom: var(--spacing-2);

        }



        .empty-state-description {

            max-width: 520px;

            margin: 0 auto var(--spacing-4);

            font-size: var(--font-size-sm);

            line-height: 1.6;

            color: var(--color-gray-600);

        }



        /* Login Screen - Centralizado Desktop */

        .login-container {

            min-height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: var(--spacing-4);

        }



        @media (min-width: 768px) {

            .login-container {

                padding: var(--spacing-8);

            }

        }



        .login-card {

            width: 100%;

            max-width: 400px;

            margin: 0 auto;

        }



        @media (min-width: 768px) {

            .login-card {

                max-width: 450px;

            }

        }



        /* ============================================

           NAVBAR RESPONSIVA COM SIDEBAR MOBILE

           ============================================ */



        /* Navbar Principal - Estilo Escuro SHIAI */

        .navbar-shiai {

            background: var(--color-dark) !important;

            border-bottom: 1px solid var(--color-gray-800);

            padding: var(--spacing-3) var(--spacing-4);

            box-shadow: var(--shadow-md);

            position: sticky;

            top: 0;

            z-index: 1030;

        }



        .navbar-shiai .navbar-brand {

            color: var(--color-white) !important;

            font-weight: 600;

            font-size: var(--font-size-lg);

            display: flex;

            align-items: center;

            gap: var(--spacing-2);

            text-decoration: none;

        }



        .navbar-shiai .navbar-brand:hover {

            color: var(--color-white) !important;

        }



        .navbar-shiai .navbar-brand img {

            width: 32px;

            height: 32px;

            object-fit: contain;

        }



        /* Botão Hambúrguer - Visével apenas em mobile */

        .navbar-toggler-shiai {

            display: none;

            background: transparent;

            border: 1px solid var(--color-gray-700);

            border-radius: var(--border-radius-sm);

            padding: var(--spacing-2);

            color: var(--color-white);

            cursor: pointer;

            transition: all var(--transition-base);

        }



        .navbar-toggler-shiai:hover {

            background: var(--color-gray-800);

            border-color: var(--color-gray-600);

        }



        .navbar-toggler-shiai:focus {

            outline: none;

            box-shadow: 0 0 0 2px var(--color-primary);

        }



        .navbar-toggler-shiai svg {

            width: 24px;

            height: 24px;

        }



        @media (max-width: 991.98px) {

            .navbar-toggler-shiai {

                display: flex;

                align-items: center;

                justify-content: center;

            }

        }



        /* Navbar Links Desktop - Ocultos em mobile */

        .navbar-nav-desktop {

            display: flex;

            align-items: center;

            gap: var(--spacing-4);

            list-style: none;

            margin: 0;

            padding: 0;

        }



        .navbar-nav-desktop .nav-link {

            color: var(--color-gray-300) !important;

            text-decoration: none;

            font-size: var(--font-size-sm);

            font-weight: 500;

            padding: var(--spacing-2) var(--spacing-3);

            border-radius: var(--border-radius-sm);

            transition: all var(--transition-base);

        }



        .navbar-nav-desktop .nav-link:hover {

            color: var(--color-white) !important;

            background: var(--color-gray-800);

        }



        @media (max-width: 991.98px) {

            .navbar-nav-desktop {

                display: none;

            }

        }



        /* Sidebar - Menu Off-Canvas */

        .sidebar {

            position: fixed;

            top: 0;

            left: -260px;

            width: 260px;

            height: 100vh;

            background: var(--color-dark);

            border-right: 1px solid var(--color-gray-800);

            z-index: 1040;

            transition: left 0.3s ease;

            overflow-y: auto;

            box-shadow: var(--shadow-xl);

        }



        .sidebar.open {

            left: 0;

        }



        /* Sidebar Header */

        .sidebar-header {

            padding: var(--spacing-4);

            border-bottom: 1px solid var(--color-gray-800);

            display: flex;

            align-items: center;

            justify-content: space-between;

        }



        .sidebar-header .sidebar-brand {

            color: var(--color-white);

            font-weight: 600;

            font-size: var(--font-size-lg);

            display: flex;

            align-items: center;

            gap: var(--spacing-2);

        }



        .sidebar-header .sidebar-brand img {

            width: 28px;

            height: 28px;

            object-fit: contain;

        }



        .sidebar-close {

            background: transparent;

            border: none;

            color: var(--color-gray-400);

            cursor: pointer;

            padding: var(--spacing-1);

            border-radius: var(--border-radius-sm);

            transition: all var(--transition-base);

            display: flex;

            align-items: center;

            justify-content: center;

        }



        .sidebar-close:hover {

            color: var(--color-white);

            background: var(--color-gray-800);

        }



        .sidebar-close svg {

            width: 20px;

            height: 20px;

        }



        /* Sidebar Navigation */

        .sidebar-nav {

            list-style: none;

            margin: 0;

            padding: var(--spacing-2) 0;

        }



        .sidebar-nav .nav-item {

            margin: 0;

        }



        .sidebar-nav .nav-link {

            display: flex;

            align-items: center;

            gap: var(--spacing-3);

            padding: var(--spacing-3) var(--spacing-4);

            color: var(--color-gray-300);

            text-decoration: none;

            font-size: var(--font-size-base);

            font-weight: 500;

            transition: all var(--transition-base);

            border-left: 3px solid transparent;

        }



        .sidebar-nav .nav-link:hover {

            background: var(--color-gray-800);

            color: var(--color-white);

            border-left-color: var(--color-primary);

        }



        .sidebar-nav .nav-link svg {

            width: 20px;

            height: 20px;

            flex-shrink: 0;

        }



        .sidebar-nav .nav-link.active {

            background: var(--color-gray-800);

            color: var(--color-white);

            border-left-color: var(--color-primary);

        }



        .sidebar-section-label {

            padding: var(--spacing-4) var(--spacing-4) var(--spacing-1);

            font-size: var(--font-size-xs);

            font-weight: 600;

            text-transform: uppercase;

            letter-spacing: 0.08em;

            color: var(--color-gray-500);

            border-top: 1px solid var(--color-gray-700);

            margin-top: var(--spacing-2);

        }



        /* Dark Overlay */

        .sidebar-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.5);

            z-index: 1035;

            opacity: 0;

            visibility: hidden;

            transition: opacity 0.3s ease, visibility 0.3s ease;

        }



        .sidebar-overlay.active {

            opacity: 1;

            visibility: visible;

        }



        /* Ajustar conteúdo quando sidebar está aberta em mobile */

        @media (max-width: 991.98px) {

            body.sidebar-open {

                overflow: hidden;

            }

        }



        /* Desktop: Sidebar não deve aparecer */

        @media (min-width: 992px) {

            .sidebar {

                display: none;

            }



            .sidebar-overlay {

                display: none;

            }

        }

/* ================================================================
   BLOCO 2 — NAVBAR E COMPONENTES CONTEXTUAIS
   ================================================================ */
/* Dark mode overrides para cores hardcoded nas telas da academia */
    html[data-theme="dark"] {
        /* Banners de aviso (fundo amarelo claro → escuro) */
        --_warn-bg: #2a1f00;
        --_warn-border: #92400e;
        --_warn-text: #fcd34d;

        /* Banners de sucesso */
        --_success-bg: #052e1c;
        --_success-text: #6ee7b7;

        /* Banners de info */
        --_info-bg: #1e1b4b;
        --_info-text: #a5b4fc;
    }

    html[data-theme="dark"] [style*="background:#fef3c7"],
    html[data-theme="dark"] [style*="background: #fef3c7"],
    html[data-theme="dark"] [style*="background:#fffbeb"],
    html[data-theme="dark"] [style*="background: #fffbeb"] {
        background: #2a1f00 !important;
        border-color: #92400e !important;
        color: #fcd34d !important;
    }

    html[data-theme="dark"] [style*="background:#ecfdf5"],
    html[data-theme="dark"] [style*="background: #ecfdf5"] {
        background: #052e1c !important;
        border-color: #065f46 !important;
        color: #6ee7b7 !important;
    }

    html[data-theme="dark"] [style*="background:#eef2ff"],
    html[data-theme="dark"] [style*="background: #eef2ff"] {
        background: #1e1b4b !important;
        border-color: #4338ca !important;
        color: #a5b4fc !important;
    }

    html[data-theme="dark"] [style*="background:#fff;"],
    html[data-theme="dark"] [style*="background: #fff;"],
    html[data-theme="dark"] [style*="background:#ffffff"],
    html[data-theme="dark"] [style*="background: #ffffff"] {
        background: var(--surface-card, #0d1526) !important;
    }

    html[data-theme="dark"] [style*="color: #334155"],
    html[data-theme="dark"] [style*="color:#334155"],
    html[data-theme="dark"] [style*="color: #1e293b"],
    html[data-theme="dark"] [style*="color:#1e293b"],
    html[data-theme="dark"] [style*="color: #0f172a"],
    html[data-theme="dark"] [style*="color:#0f172a"] {
        color: var(--text-soft, #cbd5e1) !important;
    }

    html[data-theme="dark"] [style*="color: #92400e"],
    html[data-theme="dark"] [style*="color:#92400e"],
    html[data-theme="dark"] [style*="color: #78350F"],
    html[data-theme="dark"] [style*="color:#78350F"] {
        color: #fcd34d !important;
    }

    html[data-theme="dark"] [style*="color: #065f46"],
    html[data-theme="dark"] [style*="color:#065f46"],
    html[data-theme="dark"] [style*="color: #065F46"],
    html[data-theme="dark"] [style*="color:#065F46"] {
        color: #6ee7b7 !important;
    }

    html[data-theme="dark"] [style*="color: #991b1b"],
    html[data-theme="dark"] [style*="color:#991b1b"],
    html[data-theme="dark"] [style*="color: #991B1B"],
    html[data-theme="dark"] [style*="color:#991B1B"] {
        color: #fca5a5 !important;
    }

    html[data-theme="dark"] [style*="color: #475569"],
    html[data-theme="dark"] [style*="color:#475569"] {
        color: #94a3b8 !important;
    }

    html[data-theme="dark"] .card,
    html[data-theme="dark"] .event-card {
        background: var(--surface-card, #0d1526) !important;
        border-color: var(--border-subtle, rgba(148,163,184,0.09)) !important;
        color: var(--text-main, #f0f4fc) !important;
    }

/* ================================================================
   BLOCO 3 — ESTILOS ADICIONAIS
   ================================================================ */
/*  Container bottom padding for tab bar  */

        .container {

            padding-bottom: calc(68px + env(safe-area-inset-bottom, 8px));

        }



        /*

           MOBILE TAB BAR é iOS-style

         */

        .mobile-app-bar {

            position: fixed;

            left: 0;

            right: 0;

            bottom: 0;

            z-index: 1200;

            background: rgba(255, 255, 255, 0.94);

            -webkit-backdrop-filter: saturate(200%) blur(20px);

            backdrop-filter: saturate(200%) blur(20px);

            border-top: 1px solid rgba(0, 0, 0, 0.07);

            box-shadow: 0 -1px 0 rgba(0,0,0,0.04), 0 -4px 24px rgba(0, 0, 0, 0.07);

            display: grid;

            grid-template-columns: repeat(6, 1fr);

            /* Safe area for notched phones */

            padding-bottom: env(safe-area-inset-bottom, 0px);

        }



        .mobile-app-bar .app-link {

            text-decoration: none;

            color: #94a3b8;

            font-size: 10px;

            font-weight: 600;

            letter-spacing: 0.01em;

            padding: 10px 2px 12px;

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 4px;

            transition: color 160ms ease;

            position: relative;

            -webkit-tap-highlight-color: transparent;

            -webkit-user-select: none;

            user-select: none;

        }



        .mobile-app-bar .app-link svg {

            width: 23px;

            height: 23px;

            transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);

        }



        /* Active: icon springs up slightly */

        .mobile-app-bar .app-link.active {

            color: #3b82f6;

        }



        .mobile-app-bar .app-link.active svg {

            transform: scale(1.14) translateY(-1px);

        }



        /* Indicator bar at top of active item */

        .mobile-app-bar .app-link::before {

            content: '';

            position: absolute;

            top: 0;

            left: 50%;

            transform: translateX(-50%) scaleX(0);

            width: 28px;

            height: 3px;

            border-radius: 0 0 3px 3px;

            background: #3b82f6;

            transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);

        }



        .mobile-app-bar .app-link.active::before {

            transform: translateX(-50%) scaleX(1);

        }



        /* Press feedback */

        .mobile-app-bar .app-link:active {

            color: #2563eb;

            opacity: 0.7;

        }



        @media (min-width: 992px) {

            .container {

                padding-bottom: var(--spacing-8);

            }

            .mobile-app-bar {

                display: none;

            }

        }

        html[data-theme="dark"] .mobile-app-bar {

            background: rgba(10, 15, 30, 0.96);

            border-top: 1px solid rgba(255, 255, 255, 0.08);

            box-shadow: 0 -1px 0 rgba(255,255,255,0.04), 0 -4px 24px rgba(0, 0, 0, 0.5);

        }

/* ── Event Hero — estilos compartilhados para todas as telas do professor ── */

/* Wrapper sticky: usado em evento.html e inscrever_atletas.html */
.evento-hero-sticky,
.inscricao-hero-sticky {
    position: sticky;
    top: 52px;
    z-index: 200;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
    margin-bottom: var(--spacing-4);
}

.evento-hero-sticky.is-hidden,
.inscricao-hero-sticky.is-hidden {
    transform: translateY(calc(-100% - 4px));
    opacity: 0;
    pointer-events: none;
}

/* Hero compacto (luz) */
.evento-hero,
.inscricao-hero {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 55%, #93c5fd 100%);
    border: 1px solid #93c5fd;
    border-radius: var(--border-radius-xl);
    padding: 10px 16px 12px;
}

html[data-theme="dark"] .evento-hero,
html[data-theme="dark"] .inscricao-hero {
    background: linear-gradient(135deg, rgba(30,58,138,.55) 0%, rgba(15,30,80,.75) 100%);
    border-color: rgba(59,130,246,.3);
}

/* Hero top row */
.evento-hero-top,
.inscricao-hero-top {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    margin-top: 0;
}

/* Logo compacta */
.evento-logo,
.inscricao-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-md);
    object-fit: contain;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 4px;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

html[data-theme="dark"] .evento-logo,
html[data-theme="dark"] .inscricao-logo {
    background: rgba(20,28,46,.8);
    border-color: rgba(255,255,255,.12);
}

/* Copy / texto do hero */
.evento-hero-copy,
.inscricao-hero-copy {
    flex: 1;
    min-width: 180px;
}

.evento-hero-copy .page-title,
.inscricao-hero-copy .page-title {
    font-size: 1rem;
    margin: 0;
    line-height: 1.2;
}

/* Date pill */
.evento-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
    color: var(--color-gray-700);
    font-size: 12px;
    font-weight: 600;
}

html[data-theme="dark"] .evento-date-pill {
    background: rgba(255,255,255,.08);
    color: var(--t-text-muted, #94a3b8);
}

/* Botão Voltar — dark mode global para todas as telas */
html[data-theme="dark"] .btn-back {
    color: #60A5FA;
}

html[data-theme="dark"] .btn-back:hover {
    color: #93C5FD;
    opacity: 1;
}