:root {
            --primary: #003366; --secondary: #d4af37; --bg: #f0f2f5;
            --enviada: #17a2b8; --pendente: #dc3545; --revisao: #ffc107; --impressao: #28a745; --arquivada: #6c757d;
            --danger: #dc3545; /* intenção (alerta/gabarito) — 7 usos já referenciavam a var sem ela existir e caíam na cor herdada */
            --sidebar-w: 260px;
            /* Altura da faixa de ambiente de ensaio. Em produção a faixa não acende e a var não é
               usada por ninguém — mas a sidebar e o conteúdo do clone dependem dela para não ficar
               debaixo da faixa, então ela mora aqui e não solta em três lugares. */
            --altura-faixa-ensaio: 33px;
            /* Escala de empilhamento (z-index) — fonte única. Bandas com folga p/ inserir camadas
               sem renumerar. loader/banner/toast ficam ACIMA de todos os modais (feedback nunca some);
               banner acima do loader p/ o aviso de offline continuar visível durante um save. */
            --z-sticky: 10; --z-sidebar: 1000; --z-login: 1500;
            --z-modal: 2000; --z-modal-formula: 2050; --z-teclado-formula: 2060; --z-modal-confirm: 2100; --z-modal-sessao: 2200;
            --z-loader: 4000; --z-banner: 4500; --z-toast: 5000;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, sans-serif; }
        body { background: var(--bg); min-height: 100vh; overflow-x: hidden; }

        /* --- SISTEMA DE TOASTS (Notificações) --- */
        #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
        .toast { min-width: 250px; padding: 15px 20px; border-radius: 6px; color: white; font-weight: 500; font-size: 0.9rem; box-shadow: 0 4px 15px rgba(0,0,0,0.2); opacity: 0; transform: translateX(100%); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); display: flex; align-items: center; pointer-events: auto; }
        .toast.show { opacity: 1; transform: translateX(0); }
        .toast-success { background-color: var(--impressao); }
        .toast-error { background-color: var(--pendente); }
        .toast-info { background-color: var(--enviada); }
        .toast-warning { background-color: #856404; }
        .toast-acao { margin-left: 12px; padding: 5px 12px; border: none; border-radius: 4px; background: rgba(255,255,255,0.95); color: #222; font-weight: 600; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
        .toast-acao:hover { background: #fff; }
        .toast-fechar { margin-left: 8px; padding: 0 4px; border: none; background: transparent; color: rgba(255,255,255,0.85); font-size: 1.2rem; line-height: 1; cursor: pointer; }
        .toast-fechar:hover { color: #fff; }

        /* Banner de offline — acima dos modais (aviso visível durante um save), abaixo do toast */
        #banner-offline { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-banner); background: var(--pendente); color: #fff; text-align: center; padding: 8px 16px; font-weight: 600; font-size: 0.9rem; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
        #banner-offline i { margin-right: 8px; }
        /* Compensa a faixa fixa (top:0) para não cobrir o topo do conteúdo. A classe é alternada por
           atualizarBannerOffline. Folga generosa no mobile porque o texto quebra em 2 linhas. */
        body.com-banner-offline main.content { padding-top: 60px; }

        /* Faixa de AMBIENTE DE ENSAIO — o clone da VPS serve o MESMO html e aceita as MESMAS contas de
           admin da produção. Durante o Ensaio 1 alguém excluiu uma questão no clone achando que era
           outro lugar (runbook §2). Diferente do banner de offline, esta faixa é PERMANENTE: por isso
           ela empurra a sidebar para baixo em vez de cobri-la — sidebar é fixed e o cabeçalho dela
           ficaria escondido o tempo todo. As listras existem para não parecer erro de layout. */
        /* min-height (e não height) casa a faixa com a var que empurra a sidebar: sem ela a faixa
           mede o natural do texto (31px) contra os 33 da var e sobra uma fresta do fundo da página
           acima da sidebar. Com min-height ela ocupa exatamente o que foi reservado, e ainda cresce
           se o texto precisar. */
        #faixa-ensaio { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-banner); color: #fff;
            background: repeating-linear-gradient(45deg, #7a1fa2, #7a1fa2 14px, #5c1780 14px, #5c1780 28px);
            text-align: center; padding: 7px 16px; min-height: var(--altura-faixa-ensaio);
            font-weight: 600; font-size: 0.85rem; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
        #faixa-ensaio i { margin-right: 8px; }
        #faixa-ensaio a { color: #fff; text-decoration: underline; margin-left: 10px; }
        body.com-faixa-ensaio nav.sidebar { top: var(--altura-faixa-ensaio); height: calc(100vh - var(--altura-faixa-ensaio)); }
        body.com-faixa-ensaio main.content { padding-top: calc(20px + var(--altura-faixa-ensaio)); }
        /* Se cair a rede NO CLONE, os dois aparecem: o de offline desce para não cobrir o de ensaio. */
        body.com-faixa-ensaio #banner-offline { top: var(--altura-faixa-ensaio); }
        body.com-faixa-ensaio.com-banner-offline main.content { padding-top: calc(60px + var(--altura-faixa-ensaio)); }
        /* A prova impressa não leva faixa nenhuma. (A janela de impressão é escrita à parte e nem
           carrega este css — isto é cinto e suspensório para quem imprimir a página direto.) */
        @media print { #faixa-ensaio { display: none !important; } }

        /* --- PAGINAÇÃO --- */
        .pagination-container { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
        .pagination-container button { padding: 6px 12px; border: 1px solid var(--primary); background: white; color: var(--primary); border-radius: 4px; cursor: pointer; transition: 0.2s; font-weight: bold; }
        .pagination-container button:hover:not(:disabled) { background: var(--bg); }
        .pagination-container button:disabled { opacity: 0.4; cursor: not-allowed; border-color: #ccc; color: #888; }
        .pagination-container button.active { background: var(--primary); color: white; }
        .pagination-container span { color: #767676; font-weight: bold; }

        /* --- RESPONSIVIDADE DAS TABELAS --- */
        .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 4px; }
        /* Safari: sticky no <th> em vez de <thead> — contorna bug em containers com overflow */
        .table-responsive th { position: -webkit-sticky; position: sticky; top: 0; background: #fff; z-index: var(--z-sticky); }
        
        /* --- GRÁFICOS (RELATÓRIOS) --- */
        .charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
        .chart-box { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: center; width: 100%; }
        .chart-box h3 { font-size: 1rem; color: var(--primary); margin-bottom: 15px; text-align: center; }
        .chart-box-wide { grid-column: 1 / -1; }
        .chart-wrapper { position: relative; height: 250px; width: 100%; }
        .chart-wrapper-wide { height: 300px; }

        /* --- IA TOOLS --- */
        .ia-tools { background:#f0f8ff; border-left:4px solid #17a2b8; padding:10px; margin-bottom:10px; border-radius:4px; display:flex; gap:10px; align-items:center; flex-wrap: wrap; }

        /* --- TELA DIVIDIDA (SPLIT-SCREEN) PARA REVISÃO IA --- */
        .modal-split-container { display: flex; width: 95%; max-width: 1400px; height: 90vh; background: transparent; gap: 20px; padding: 0; box-shadow: none; pointer-events: none; }
        .split-left { flex: 6; background: white; border-radius: 8px; padding: 20px; overflow-y: auto; box-shadow: 0 5px 25px rgba(0,0,0,0.3); pointer-events: auto; display: flex; flex-direction: column; }
        .split-right { flex: 4; background: #f8f9fa; border-radius: 8px; padding: 20px; overflow-y: auto; border-left: 5px solid #17a2b8; box-shadow: 0 5px 25px rgba(0,0,0,0.3); pointer-events: auto; display: flex; flex-direction: column; }

        /* --- LOGIN SCREEN --- */
        #login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); display: flex; justify-content: center; align-items: center; z-index: var(--z-login); }
        .login-box { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: 90%; max-width: 400px; text-align: center; }
        .login-box img { max-width: 80px; height: auto; margin-bottom: 15px; }
        .login-box h2 { color: var(--primary); margin-bottom: 20px; font-size: 1.4rem; }
        .login-group { text-align: left; margin-bottom: 15px; }
        .login-group label { display: block; font-size: 0.8rem; font-weight: bold; color: #555; margin-bottom: 5px; }
        .login-group input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; outline: none; }
        .login-group input:focus { border-color: var(--secondary); }
        .btn-login { width: 100%; padding: 12px; background: var(--secondary); color: var(--primary); font-weight: bold; font-size: 1.1rem; border: none; border-radius: 5px; cursor: pointer; transition: 0.3s; margin-top: 10px; }
        .btn-login:hover { background: #b8972e; color: white; }

        /* --- APP STRUCTURE --- */
        #app-screen { display: none; width: 100%; height: 100vh; }
        
        /* --- MENU LATERAL --- */
        nav.sidebar { width: var(--sidebar-w); height: 100vh; background: var(--primary); color: white; position: fixed; display: flex; flex-direction: column; box-shadow: 2px 0 10px rgba(0,0,0,0.3); z-index: var(--z-sidebar); }
        .sidebar-header { padding: 20px 15px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .logo-container { width: 70px; height: 70px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
        .logo-container img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .sidebar-header h2 { font-size: 0.8rem; color: var(--secondary); text-transform: uppercase; letter-spacing: 1px; }

        .user-info-sidebar { padding: 15px; background: rgba(0,0,0,0.2); text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .user-info-sidebar p { font-size: 0.85rem; font-weight: bold; color: white; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .user-info-sidebar span { font-size: 0.7rem; color: var(--secondary); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* Utilitário reusável p/ nomes longos que estouram layout de largura fixa (opt-in no HTML). */
        .text-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* Linha de ações alinhada à direita (rodapés de modal/form). */
        .row-end { display: flex; justify-content: flex-end; gap: 10px; }

        .menu-items { list-style: none; margin-top: 10px; flex: 1; overflow-y: auto; }
        .menu-items li { padding: 12px 25px; cursor: pointer; display: flex; align-items: center; font-size: 0.8rem; transition: 0.2s; border-left: 4px solid transparent; }
        .menu-items li:hover, .menu-items li.active { background: rgba(255,255,255,0.1); color: var(--secondary); border-left: 4px solid var(--secondary); }
        .menu-items li:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; background: rgba(255,255,255,0.1); }
        .menu-items li i { margin-right: 12px; width: 18px; text-align: center; }
        .btn-logout { padding: 15px; text-align: center; background: #dc3545; color: white; cursor: pointer; font-size: 0.85rem; font-weight: bold; transition: 0.3s; }
        .btn-logout:hover { background: #b02a37; }
        .btn-logout:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

        /* --- CONTEÚDO --- */
        main.content { margin-left: var(--sidebar-w); width: calc(100% - var(--sidebar-w)); padding: 20px; }
        .page-section { display: none; }
        .page-section h1 { color: var(--primary); font-size: 1.4rem; } /* título padrão de página (antes inline, com 3 variantes) */
        /* Dentro de <header> o título herda a cor do próprio header (fundo primário ⇒ texto branco),
           senão ficaria azul-escuro sobre azul-escuro. */
        .page-section header h1 { color: inherit; }
        .page-section.active { display: block; animation: fadeIn 0.3s; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        .card-box { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 15px; }
        /* Reserva o espaço dos botões editar/excluir (position:absolute no canto sup. direito) para a
           linha de metadados quebrar antes de passar por baixo deles quando a Fonte é longa. */
        .card-banco .card-banco-meta { padding-right: 115px; }
        .btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; }
        .btn:hover { opacity: 0.8; transform: translateY(-1px); }
        .btn-primary { background: var(--primary); color: white; }
        .btn-danger { background: var(--pendente); color: white; }
        .btn-success { background: var(--impressao); color: white; }
        .btn-warning { background: var(--revisao); color: #333; }
        .btn-info { background: var(--enviada); color: white; }
        .btn-purple { background: #6f42c1; color: white; }
        .btn-dark { background: #343a40; color: white; }
        .btn-secondary { background: #6c757d; color: white; } /* neutro (CANCELAR/LIMPAR); unifica os antigos #666/#6c757d inline */
        
        .btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
        .btn-outline.active { background: var(--primary); color: white; }

        /* --- DASHBOARD --- */
        .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
        .stat-card { background: white; padding: 20px; border-radius: 8px; display: flex; align-items: center; border-bottom: 5px solid #ccc; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: 0.2s; }
        .stat-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .stat-card i { font-size: 2rem; margin-right: 15px; opacity: 0.7; }
        .stat-info p { font-size: 1.5rem; font-weight: bold; color: #333; }
        .c-enviadas { border-color: var(--enviada); color: var(--enviada); }
        .c-pendentes { border-color: var(--pendente); color: var(--pendente); }
        .c-revisao { border-color: var(--revisao); color: var(--revisao); }
        .c-impressao { border-color: var(--impressao); color: var(--impressao); }

        /* --- FILTROS E FORMULÁRIOS --- */
        .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
        .filter-group { display: flex; flex-direction: column; gap: 3px; }
        .filter-group label { font-size: 0.65rem; font-weight: bold; color: var(--primary); text-transform: uppercase; }
        .filter-group select, .filter-group input, .filter-group textarea { padding: 8px; border-radius: 4px; border: 1px solid #ddd; outline: none; font-size: 0.8rem; }

        /* --- QUESTÕES --- */
        .question-form { border-left: 4px solid var(--primary); padding: 15px; border-radius: 8px; margin-bottom: 15px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .alternatives-grid { display: grid; gap: 2px; margin-top: 5px; }
        .alternative-input { display: flex; align-items: flex-start; gap: 6px; }
        .alternative-input span { font-weight: bold; font-size: 0.8rem; padding-top: 8px; }
        .alt-editor { flex: 1; background: white; }
        .alt-editor .ql-toolbar { padding: 2px 4px; }
        .alt-editor .ql-container { min-height: 44px; }
        .alt-editor .ql-editor { min-height: 44px; max-height: 140px; overflow-y: auto; font-size: 0.9rem; padding: 4px 8px; line-height: 1.3; }
        .alt-editor .ql-editor p { margin: 0; }
        .img-preview { max-height: 200px; max-width: 100%; object-fit: contain; margin-top: 10px; border-radius: 4px; display: none; border: 1px solid #ccc; }
        .resumo-questao { background: white; border: 1px solid #ddd; border-left: 4px solid var(--secondary); padding: 12px 15px; margin-bottom: 8px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }

        .ql-toolbar { background: #fafafa; border-radius: 4px 4px 0 0; }
        .ql-container { border-radius: 0 0 4px 4px; font-size: 0.9rem; font-family: inherit; }
        .ql-editor { text-align: justify; }

        /* Visualização Real da Prova: força letra e texto da ALTERNATIVA na mesma linha.
           Escopo em span.ql-editor de propósito — a regra valia para todo .ql-editor e
           colapsava também o ENUNCIADO (div.ql-editor), fazendo o texto do professor sair
           todo colado numa linha só na tela de Visualizar. */
        #previewConteudo span.ql-editor,
        #previewConteudo span.ql-editor p,
        #previewConteudo span.ql-editor div,
        #previewConteudo span.ql-editor ol,
        #previewConteudo span.ql-editor ul,
        #previewConteudo span.ql-editor li {
            display: inline;
            margin: 0;
            padding: 0;
        }
        /* Enunciado no preview: parágrafos de verdade (espelha a impressão e o Word) */
        #previewConteudo div.ql-editor p { margin: 0 0 5px; }
        #previewConteudo div.ql-editor p:last-child { margin-bottom: 0; }

        .badge-count { background: var(--pendente); color: white; font-size: 0.7rem; font-weight: bold; padding: 2px 8px; border-radius: 10px; min-width: 22px; text-align: center; line-height: 1.4; }

        /* --- ABAS (Configurações) --- */
        .tabs-header { display: flex; background: #eee; border-radius: 4px 4px 0 0; flex-wrap: wrap; }
        .tab-btn { padding: 10px 15px; border: none; background: none; cursor: pointer; font-size: 0.75rem; font-weight: bold; color: #666; }
        .tab-btn.active { background: white; border-bottom: 2px solid var(--secondary); color: var(--primary); }
        .sub-tab-content { display: none; padding: 15px; border: 1px solid #eee; border-top: none; background: white; }
        .sub-tab-content.active { display: block; }

        /* --- TABELAS --- */
        table { width: 100%; border-collapse: collapse; min-width: 600px; }
        th { text-align: left; padding: 8px; border-bottom: 2px solid #eee; font-size: 0.7rem; color: #767676; text-transform: uppercase; }
        td { padding: 8px; border-bottom: 1px solid #eee; font-size: 0.8rem; }
        
        .status-tag { padding: 4px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
        .st-pendente { background: #ffebee; color: #b71c1c; }
        .st-revisao { background: #fffde7; color: #f57f17; }
        .st-impressao { background: #e8f5e9; color: #1b5e20; }
        .st-arquivada { background: #e2e3e5; color: #383d41; }
        .st-devolvida { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

        .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); gap: 5px; background: #f9f9f9; padding: 10px; border-radius: 4px; border: 1px solid #ddd; max-height: 150px; overflow-y: auto; }
        .checkbox-item { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: #333; cursor: pointer; }
        .checkbox-item input { width: 14px; height: 14px; cursor: pointer; }
        
        /* --- MODAIS E LOADERS --- */
        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: none; justify-content: center; align-items: center; z-index: var(--z-modal); padding: 10px; }
        /* Seletor de ID vence .modal-overlay por especificidade (sem !important). Substituem os
           z-index inline mágicos (99999/999999) removidos do index.html. sessão > confirm > comuns. */
        #modalConfirm { z-index: var(--z-modal-confirm); }
        #modalSessaoExpirada { z-index: var(--z-modal-sessao); }
        .modal-box { background: white; padding: 25px; border-radius: 8px; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: 0 5px 25px rgba(0,0,0,0.3); }
        .modal-box-large { max-width: 800px; }

        /* --- Editor de fórmula (MathLive, leva Fórmulas B3) --- */
        /* --altura-teclado é escrita por ligarAlturaDoTeclado (app.js) a cada
           `geometrychange` do teclado virtual. Com o box-sizing:border-box global, o
           padding-bottom encolhe a área de centralização do overlay: a caixa sobe e
           encolhe junto, e CANCELAR/INSERIR param de ficar atrás do teclado. */
        #modalFormula .modal-box { max-width: 620px; max-height: calc(90vh - var(--altura-teclado, 0px)); }
        /* O modal fica acima dos demais (é aberto DE DENTRO do modal de edição da
           coordenação) e o teclado virtual, que o MathLive prende no <body>, acima dele. */
        #modalFormula { z-index: var(--z-modal-formula); padding-bottom: calc(10px + var(--altura-teclado, 0px)); }
        math-field { display: block; width: 100%; font-size: 1.6rem; padding: 12px; border: 1.5px solid var(--primary); border-radius: 6px; background: #fbfcfe;
                     --caret-color: var(--primary); --selection-background-color: rgba(212,175,55,0.4); --smart-fence-color: var(--primary); }
        math-field:focus-within { outline: 2px solid rgba(0,51,102,0.25); }
        .dica-formula { color: #555; font-size: 0.82rem; margin: 10px 0 0; }
        .dica-formula b { color: var(--primary); }
        .erro-formula { color: var(--danger); font-size: 0.85rem; margin: 8px 0 0; min-height: 1.1em; }
        /* O teclado virtual é filho do <body>: precisa vencer o overlay do modal. */
        body > .ML__keyboard { z-index: var(--z-teclado-formula) !important; }
        .modal-header { font-size: 1.2rem; font-weight: bold; color: var(--primary); margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }

        .loader-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.9); display:none; justify-content:center; align-items:center; flex-direction:column; z-index: var(--z-loader); }
        .spinner { border: 8px solid #f3f3f3; border-top: 8px solid var(--primary); border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* Safari iOS: inputs com font-size < 16px causam zoom automático */
        @media screen and (max-width: 768px) {
            input, select, textarea { font-size: 16px !important; }
        }

        /* Fallback de gap em flex para Safari < 14.1 (não suporta gap em flexbox) */
        @supports not (gap: 10px) {
            #toast-container > * + * { margin-top: 10px; }
            .pagination-container > * + * { margin-left: 8px; }
            .ia-tools > * + * { margin-left: 10px; }
            .alternative-input > * + * { margin-left: 8px; }
            .checkbox-item > * + * { margin-left: 5px; }
            .btn > * + * { margin-left: 8px; }
        }

        @media (max-width: 768px) {
            nav.sidebar { width: 60px; }
            .sidebar-header h2, .user-info-sidebar, .menu-items span { display: none; }
            .menu-items li { justify-content: center; padding: 15px; }
            .menu-items li i { margin: 0; font-size: 1.2rem; }
            .btn-logout { font-size: 0; padding: 15px 0; }
            .btn-logout i { font-size: 1.2rem; }
            main.content { margin-left: 60px; width: calc(100% - 60px); padding: 10px; }
            body.com-banner-offline main.content { padding-top: 78px; } /* 2 linhas de banner no mobile */
            /* A faixa de ensaio também quebra em 2 linhas na largura de celular. */
            :root { --altura-faixa-ensaio: 52px; }
            body.com-faixa-ensaio main.content { padding-top: calc(10px + var(--altura-faixa-ensaio)); }
            body.com-faixa-ensaio.com-banner-offline main.content { padding-top: calc(78px + var(--altura-faixa-ensaio)); }

            /* Sino de notificações no rail de 60px: centra o ícone, esconde o rótulo e mantém o badge;
               o dropdown vira flyout ancorado ao lado do rail (ancorado no #notif-container relativo). */
            #notif-container { padding: 12px 0 !important; text-align: center; }
            #notif-container .notif-label { display: none; }
            #notif-badge { left: auto !important; right: 12px !important; }
            #notif-dropdown { position: absolute; left: 100%; top: 0; width: 240px; margin: 0 0 0 6px; z-index: 1; text-align: left; }

            .modal-split-container { flex-direction: column; pointer-events: auto; }
            .split-left, .split-right { flex: none; height: 50%; pointer-events: auto; }
        }