/* web/css/do-app.css — GERADO. NÃO EDITE.
 *
 * Isto é CSS do aplicativo Temporama, copiado palavra por palavra dos arquivos em
 * css/ por scripts/extrair-do-app.js. O site mostra o app; então as peças do app que
 * aparecem no site são as peças do app, não uma reconstituição delas.
 *
 * Pra mudar qualquer coisa daqui: mude no app (css/*.css) e rode o deploy do site.
 * Pra o site divergir do app de propósito: escreva em web/css/site.css, que vem
 * depois na cascata.
 *
 * Gerado em 2026-08-30.
 */

/* ═══════════════════════════════════════════════════════════════════════
   Tokens e temas — o significado de cada cor (TEMPORAL, seção 4)
   Extraído de css/variables.css
   ═══════════════════════════════════════════════════════════════════════ */

/* css/variables.css — temas, cores, fontes, variáveis root */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800;900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --system-blue: #0A84FF; --system-green: #30D158; --system-yellow: #FFD60A;
    --system-orange: #FF9F0A; --system-red: #FF453A; --system-gray: #8E8E93;
    /* Roxo reservado só pro Evento (Calendário → Ev) — única cor de sistema ainda livre;
       núcleo já é laranja (filtro do Calendário), hoje/navegação é azul, concluído é verde. */
    --system-purple: #BF5AF2;

    --bg-page: #000000; --bg-panel: rgba(28, 28, 30, 0.75); --bg-panel-hover: rgba(44, 44, 46, 0.9);
    --text-main: #FFFFFF; --text-sec: #EBEBF599; --border-color: rgba(255, 255, 255, 0.12);
    --shadow-glow: rgba(255, 255, 255, 0.7);
    --glass-blur: blur(25px);

    --font-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    --font-mono: 'JetBrains Mono', "SF Mono", monospace;
    --font-title: 'Barlow Condensed', sans-serif;
    
    --script-font-main: var(--font-mono);
    --script-size-main: 2.2rem; 
    --script-align-main: left;
    --script-weight-main: 400;
    --main-line-pos: 120px;

    --script-font-tp: var(--font-ui);
    --script-size-tp: 6vw; 
    --script-align-tp: center;
    --script-color-tp: #FFFFFF;
    --script-weight-tp: 600;
    
    --analog-size: 500px; --grid-split: 1fr 1.5fr;
    --semaforo-yellow: #FF9F0A; --semaforo-green: #30D158; --semaforo-red: #FF453A;
    --tp-active-line-color: #FF453A;
    --tp-line-weight: 4px;
}

body.apple-light { --bg-page: #F2F2F7; --bg-panel: rgba(255, 255, 255, 0.8); --text-main: #000000; --text-sec: #3C3C4399; --border-color: rgba(0, 0, 0, 0.1); --system-blue: #007AFF; --system-green: #34C759; --system-yellow: #FFCC00; --system-red: #FF3B30; --shadow-glow: rgba(0, 0, 0, 0.15); }

/* ===== CLÁSSICO (achado ao vivo 2026-08-25: "o fundo está em preto parece, precisa
   ficar mais próximo do cinema, mas mais escuro") — Clássico usa colorClass
   'apple-dark' (só o mostrador do relógio muda, .clock-classic em module-timer.css),
   então herdava o preto liso do :root sem textura nenhuma. Ganha a MESMA técnica de
   grão do Cinema (feTurbulence + saturate=0) — não pelo colorClass, que também é o
   Escuro puro (esse continua liso de propósito), mas por .clock-classic, que é o que
   distingue os dois. --bg-page mais escuro que o do Cinema (#0b0c0e) de propósito. */
body.clock-classic {
    --bg-page: #050505;
    background-color: var(--bg-page);
    background-image:
        url("data:image/svg+xml,%3Csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='gc'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23gc)' opacity='0.09'/%3E%3C/svg%3E"),
        radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    background-size: 64px 64px, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
}

body.theme-cyberpunk { --bg-page: #050510; --bg-panel: rgba(10, 10, 30, 0.85); --text-main: #00F0FF; --text-sec: #FF4D74; --border-color: rgba(0, 240, 255, 0.26); --system-blue: #00F0FF; --system-green: #39FF14; --system-yellow: #FCEE0A; --system-red: #FF003C; text-shadow: 0 0 6px rgba(0, 240, 255, 0.22); background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(0, 240, 255, 0.03)' stroke-width='1'/%3E%3C/svg%3E"); }

body.theme-minimal-red { --bg-page: #030303; --bg-panel: #0A0A0A; --bg-panel-hover: #111111; --text-main: #FFFFFF; --text-sec: #666666; --border-color: rgba(255, 0, 0, 0.15); --system-blue: #FF3B30; --system-green: #FFFFFF; --system-yellow: #FF9500; --system-red: #FF0000; --shadow-glow: rgba(255, 0, 0, 0.4); }

/* ===== CINEMA: corpo de câmera ARRI — grafite texturizado e o backlight do painel lateral =====
   A textura anterior era um turbulence colorido esticado num viewBox de 200: borrava e
   "engrossava". Agora o azulejo tem tamanho real (56px), grão dessaturado e uma oitava só —
   fica fino e definido, como a superfície da câmera. */
body.theme-cinema {
    --bg-page: #0b0c0e; --bg-panel: rgba(23, 25, 28, 0.6); --bg-panel-hover: rgba(34, 37, 41, 0.7);
    --text-main: #F1F4F7; --text-sec: #8d949c; --border-color: rgba(255, 255, 255, 0.09);
    /* O azul do painel lateral: claro, quase branco, luminoso */
    --arri-backlight: #cfe4f9;
    --system-blue: #bcd8f2; --system-green: #2ECC71; --system-yellow: #F1C40F; --system-red: #E74C3C;
    --shadow-glow: rgba(207, 228, 249, 0.45);
    --glass-blur: blur(22px);
    background-color: var(--bg-page);
    background-image:
        url("data:image/svg+xml,%3Csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23g)' opacity='0.11'/%3E%3C/svg%3E"),
        radial-gradient(120% 70% at 50% -10%, rgba(207, 228, 249, 0.08) 0%, transparent 60%);
    background-size: 64px 64px, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
}

/* Painéis deixam de ser cartão opaco recortado e passam a ser vidro fosco: --bg-panel
   perde alpha (0.92→0.6) e o backdrop-filter (glass-blur) passa a revelar a MESMA
   textura de grão da câmera que corre atrás do header — o Tt (.script-panel, 100%
   transparente) já fazia essa ligação com o header; agora modal/setting/history-box
   fazem a versão "vidro" da mesma ideia, em vez de ficarem desconectados dela. */
body.theme-cinema .modal-box,
body.theme-cinema .setting-group-box, body.theme-cinema .history-container-box {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 30px rgba(0, 0, 0, 0.55);
}

/* .setting-group-box não usa --bg-panel (fundo preto fixo em layout.css) — sem isto
   ficaria opaco mesmo com o resto do tema já respirando a textura. */
body.theme-cinema .setting-group-box { background: rgba(255, 255, 255, 0.03); }

/* Botões da tabela periódica como teclas anodizadas do corpo da câmera */
body.theme-cinema .ptile {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, transparent 45%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body.theme-cinema .ptile.on, body.theme-cinema .scene-tile.on {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 14px rgba(207, 228, 249, 0.22);
}

/* Rótulos e leituras no backlight do painel: é a luz que se lê no set */
body.theme-cinema .form-group > label, body.theme-cinema .slate-field label,
body.theme-cinema .boost-title, body.theme-cinema .section-title {
    color: var(--arri-backlight); text-shadow: 0 0 10px rgba(207, 228, 249, 0.18);
}

body.theme-cinema .mod-mark .ptile-symbol { color: var(--arri-backlight); }

/* Registros (Tt): extras só do Cinema por cima do cartão-base (.history-container-box,
   layout.css) — tom de fundo mais escuro e sombra funda, como as tampas do corpo da
   câmera. padding/borda/raio saíram daqui em 2026-08-25 (viraram a base, todo tema). */
body.theme-cinema .history-container-box {
    background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 26px rgba(0,0,0,0.45);
}

body.theme-cinema .history-container-box .log-header { margin-bottom: 10px; letter-spacing: 1.4px; color: var(--arri-backlight); }

body.theme-cinema .history-item-wrapper { border-radius: 10px; }

/* A lista termina em fade, sem corte seco na borda do painel */
body.theme-cinema .history-list-short { padding-right: 4px; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }

/* Campo em foco acende como o painel lateral quando se navega nele */
body.theme-cinema input:focus, body.theme-cinema textarea:focus, body.theme-cinema select:focus {
    border-color: var(--arri-backlight); box-shadow: 0 0 0 1px rgba(207, 228, 249, 0.18), 0 0 16px rgba(207, 228, 249, 0.12);
}

/* Calendário — achado do usuário (2026-08-08): os chips de diária (.elem-diaria) usam
   --system-blue como FUNDO SÓLIDO com texto branco por cima; nos outros temas isso
   funciona porque lá --system-blue é escuro/saturado o bastante, mas aqui ele É o
   backlight do painel (#bcd8f2, claro, quase branco, pensado pra TEXTO/brilho — ver
   --arri-backlight logo acima) — texto branco em cima virava ilegível. Em vez de só
   trocar a cor, os chips ganham o MESMO acabamento anodizado das teclas (.ptile logo
   acima): grafite escuro com o fio de luz no topo, e o backlight entra como leitura
   (texto com glow), igual todo resto do tema já faz — não como fundo. */
body.theme-cinema .elem-diaria, body.theme-cinema .elem-diaria-ano {
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 45%), #1c2024;
    color: var(--arri-backlight);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    text-shadow: 0 0 6px rgba(207, 228, 249, 0.28);
}

body.theme-cinema .elem-diaria.elem-diaria-ativo, body.theme-cinema .elem-diaria.elem-diaria-solo {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 14px rgba(207, 228, 249, 0.28);
}

body.theme-cinema .elem-diaria-ano-mais { color: var(--arri-backlight); }

/* Mesmo problema do .elem-diaria acima, achado pelo usuário no botão "Atualizar agora"
   da trava de versão desatualizada (2026-08-08): --system-blue vira fundo sólido com
   texto branco por cima, mas aqui ele É o backlight (claro, pensado pra texto/brilho) —
   ilegível. Mesmo acabamento anodizado + leitura em backlight, não fundo. */
body.theme-cinema .app-travado-btn {
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 45%), #1c2024;
    border-color: rgba(207, 228, 249, 0.35);
    color: var(--arri-backlight);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 14px rgba(207, 228, 249, 0.16);
    text-shadow: 0 0 6px rgba(207, 228, 249, 0.28);
}

/* Mesma família de bug, achada em varredura por outros lugares que fazem fundo sólido
   --system-blue + texto branco fixo (#fff): o dia selecionado no mini-calendário de
   Diárias (Dr → escolher data). */
body.theme-cinema .di-mini-cal-dia.sel {
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 45%), #1c2024;
    color: var(--arri-backlight);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 10px rgba(207, 228, 249, 0.2);
    text-shadow: 0 0 6px rgba(207, 228, 249, 0.28);
}

body.theme-cinema .di-mini-cal-dia.sel.tem-diaria::after { background: var(--arri-backlight); }

/* "Hoje" nas 3 grades (Mês/Semana/Ano) é só contorno + leve tingido (sem texto branco
   por cima), então o backlight funciona direto aqui — só acende mais o brilho, sem
   trocar a estrutura. */
body.theme-cinema .cal-dia.hoje, body.theme-cinema .cal-dia-semana.hoje, body.theme-cinema .cal-mes-card.hoje {
    border-color: var(--arri-backlight); box-shadow: inset 0 0 0 1px var(--arri-backlight);
    background: rgba(207, 228, 249, 0.06);
}

body.theme-cinema .cal-dia.hoje .cal-dia-num,
body.theme-cinema .cal-dia-semana.hoje .cal-dia-semana-cabecalho b,
body.theme-cinema .cal-mes-card.hoje .cal-mes-card-titulo {
    color: var(--arri-backlight); text-shadow: 0 0 8px rgba(207, 228, 249, 0.3);
}

body.theme-titanium { --bg-page: #15171a; --bg-panel: rgba(30, 33, 38, 0.85); --bg-panel-hover: rgba(45, 49, 56, 0.95); --text-main: #e8ecef; --text-sec: #80868f; --border-color: rgba(255, 255, 255, 0.08); --system-blue: #5ba3ff; --system-green: #34d058; --system-yellow: #ffd60a; --system-red: #ff453a; --shadow-glow: rgba(91, 163, 255, 0.35); }

body.theme-atlantic { --bg-page: #0a110a; --bg-panel: rgba(18, 30, 20, 0.85); --bg-panel-hover: rgba(25, 40, 28, 0.95); --text-main: #e8f5e9; --text-sec: #81c784; --border-color: rgba(129, 199, 132, 0.2); --system-blue: #00e5ff; --system-green: #69f0ae; --system-yellow: #ffea00; --system-red: #ff5252; --shadow-glow: rgba(105, 240, 174, 0.3); }

body.theme-ocean { --bg-page: #000b18; --bg-panel: rgba(10, 25, 45, 0.85); --bg-panel-hover: rgba(15, 35, 60, 0.95); --text-main: #e0f7fa; --text-sec: #80deea; --border-color: rgba(128, 222, 234, 0.2); --system-blue: #00b4d8; --system-green: #00e676; --system-yellow: #ffe57f; --system-red: #ff5252; --shadow-glow: rgba(0, 180, 216, 0.4); }

body.theme-summer-light { --bg-page: #1a0b2e; --bg-panel: rgba(43, 15, 66, 0.85); --bg-panel-hover: rgba(60, 20, 90, 0.95); --text-main: #ffeecc; --text-sec: #ff8c66; --border-color: rgba(255, 140, 102, 0.25); --system-blue: #ff5e7e; --system-green: #00e676; --system-yellow: #ffb74d; --system-red: #ff3d00; --shadow-glow: rgba(255, 94, 126, 0.4); }

body.theme-estrela { --bg-page: #050000; --bg-panel: linear-gradient(145deg, rgba(30,10,10,0.95), rgba(10,0,0,0.95)); --text-main: #FFFFFF; --text-sec: #FFD60A; --border-color: rgba(255, 214, 10, 0.3); --system-blue: #FFD60A; --system-green: #FFFFFF; --system-yellow: #FFD60A; --system-red: #FF0000; --shadow-glow: rgba(255, 214, 10, 0.5); }

body.theme-brasil { --bg-page: #081C10; --bg-panel: transparent; --bg-panel-hover: rgba(255, 255, 255, 0.05); --text-main: #E8F5E9; --text-sec: #81C784; --border-color: rgba(255, 255, 255, 0.08); --system-blue: #FFD60A; --system-green: #FFF59D; --system-yellow: #FFC107; --system-orange: #FFB300; --system-red: #FF5252; --shadow-glow: rgba(255, 214, 10, 0.2); --tp-active-line-color: #FFD60A;}

/* ===== TAPETE VERMELHO: substitui o tema China apagado em 2026-08-12 (pedido: "apague
   esse tema china e comece um novo... igore tudo que fez para o led pq buggou"). Dessa
   vez como tema de verdade — entra aqui, no if/else de applyAllStyles (settings.js) via
   colorClass 'theme-tapete-vermelho', não como classe solta por fora do sistema; era
   exatamente essa arquitetura em paralelo que causava a dessincronia entre sessões do
   mesmo operador que o usuário percebeu ("os temas são por usuários... muda numa sessão
   muda em todas") — ver feedback temporama-tema-precisa-entrar-no-applyallstyles.
   Pedido (2026-08-12): "brilhante, tecnológico, neon, leds coloridos e muito, muito
   elegante. um tapete vermelho no fundo, a força da estrela amarela, a tecnologia de
   ponta, sutilmente implementadas, e claro, com a bandeira." Duas rodadas de revisão
   ao vivo depois: 1) "quero uma textura mais acentuada... um vermelho mais vivo" — só
   que aquela tentativa (tecido cruzado + ruído) passou do ponto: "passou da cota, tava
   melhor no começo... a textura de tapete não é essa, é quase um noise qualificado,
   como temos no cinema" — a referência certa é body.theme-cinema logo acima (mesmo
   arquivo): feTurbulence + feColorMatrix saturate=0 (grão em luminância, sem linha de
   tecido nenhuma), background-attachment:fixed. Aqui vai a MESMA técnica, só que mais
   densa (baseFrequency maior) pra ler como fibra de veludo, não grão de filme — e
   opacidade um pouco mais alta, porque "sentir a textura" era o pedido original.
   Vermelho "um pouco mais escuro" que a tentativa anterior (#4a0712 → mais perto de
   #38050f). Dourado: --text-sec/--border-color continuam ricos (pedido "vamos ver
   dourado também"), mas SEM moldura quadrada de destaque no relógio (ver clock-
   tapete-vermelho em module-timer.css — "nada dessa moldura quadrada... pelamor").
   "Leds coloridos" continuam vindo dos --system-* (ciano, esmeralda, dourado,
   carmesim) — mesmas variáveis do botão/badge/LED do resto do app. LED do header:
   ver .header-led-track em css/layout.css — "está maravilhoso, quero mais
   luminoso" (glow mais forte) + variação de cor animada por segmento (não gradiente
   de texto, era isso que quebrou o China antigo — ver comentário lá). Bandeira: ver
   header-led-flag em css/layout.css (entra em TEMAS_COM_BANDEIRA). */
body.theme-tapete-vermelho {
    --bg-page: #38050f;
    --bg-panel: rgba(38, 7, 14, 0.88);
    --bg-panel-hover: rgba(52, 10, 20, 0.94);
    --text-main: #F7ECD9;
    --text-sec: #E8BD54;
    --border-color: rgba(255, 199, 74, 0.28);
    --system-blue: #33E6FF;
    --system-green: #3CFF9E;
    --system-yellow: #FFD23F;
    --system-orange: #FFC94A;
    --system-red: #FF3B57;
    --shadow-glow: rgba(255, 209, 66, 0.42);
    text-shadow: 0 0 6px rgba(255, 205, 66, 0.14);
    background-color: var(--bg-page);
    background-image:
        url("data:image/svg+xml,%3Csvg width='72' height='72' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='veludo'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='72' height='72' filter='url(%23veludo)' opacity='0.16'/%3E%3C/svg%3E"),
        radial-gradient(circle at 18% -8%, rgba(255, 205, 66, 0.13), transparent 42%),
        radial-gradient(circle at 88% 105%, rgba(51, 230, 255, 0.07), transparent 40%);
    background-size: 72px 72px, 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat;
    background-attachment: fixed, fixed, fixed;
}

/* Calendário (2026-08-16, tema renomeado pra China — mesmo bug já achado no tema Cinema,
   ver comentário lá em cima): os chips de diária (.elem-diaria) usam --system-blue como
   FUNDO SÓLIDO com texto branco por cima — aqui esse --system-blue é o ciano-néon do "LED
   colorido" do tema (#33E6FF), claro demais pra isso: "azul claro com texto branco, não
   dá leitura". Mesma solução de lá: em vez de trocar a cor, os chips ganham o acabamento
   de acento deste tema — base escura (a mesma do --bg-panel-hover) com o ciano entrando
   como BRILHO no texto, igual todo LED colorido do resto do tema já faz, nunca como fundo. */
body.theme-tapete-vermelho .elem-diaria, body.theme-tapete-vermelho .elem-diaria-ano {
    background: var(--bg-panel-hover);
    color: var(--system-blue);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(51,230,255,0.25);
    text-shadow: 0 0 6px rgba(51,230,255,0.45);
}

body.theme-tapete-vermelho .elem-diaria.elem-diaria-ativo, body.theme-tapete-vermelho .elem-diaria.elem-diaria-solo {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 14px rgba(51,230,255,0.35);
}

body.theme-tapete-vermelho .elem-diaria-ano-mais { color: var(--system-blue); }

/* ===== CATARINA: preto, verde, vermelho e branco — noite fechada com um brilho fósforo
   verde no centro (visor de instrumento) e o vermelho como único pulso de destaque. O
   branco entra dosado (numerais, contra-peso do ponteiro), nunca como fundo — pedido do
   usuário: "adoro preto verde e vermelho, lembrando que a bandeira é branca também". */
body.theme-catarina {
    --glass-blur: blur(16px);
    --bg-page: #060807; --bg-panel: rgba(10, 18, 13, 0.86); --bg-panel-hover: rgba(16, 28, 20, 0.94);
    --text-main: #F5F7F3; --text-sec: #6FCB8E; --border-color: rgba(53, 208, 127, 0.16);
    --system-blue: #1E9E56; --system-green: #35D07F; --system-yellow: #F5F7F3;
    --system-orange: #C23616; --system-red: #E4162A;
    --shadow-glow: rgba(53, 208, 127, 0.4);
    --tp-active-line-color: #E4162A;
    background-color: var(--bg-page);
    background-image:
        radial-gradient(120% 70% at 50% -10%, rgba(53, 208, 127, 0.07) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6 L6 0' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 100% 100%, 6px 6px;
    background-repeat: no-repeat, repeat;
    background-attachment: fixed, fixed;
}

body.theme-catarina .modal-box, body.theme-catarina .setting-group-box, body.theme-catarina .history-container-box {
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 30px rgba(0, 0, 0, 0.6);
}

body.theme-catarina .ptile.on, body.theme-catarina .scene-tile.on {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 14px rgba(53, 208, 127, 0.35);
}

body.theme-catarina input:focus, body.theme-catarina textarea:focus, body.theme-catarina select:focus {
    border-color: var(--system-green); box-shadow: 0 0 0 1px rgba(53, 208, 127, 0.25), 0 0 16px rgba(53, 208, 127, 0.18);
}

/* ===== TEMAS PERSAS: areia, vermelho, ventos e montanhas — tempo contado em ampulheta ===== */
body.theme-tapete-persa {
    /* Painéis quase opacos: o desfoque de vidro de 25px custava caro e mal aparecia.
       Com 6px o material continua o mesmo e o render fica leve. */
    --glass-blur: blur(6px);
    --bg-page: #2a1108; --bg-panel: rgba(58, 26, 12, 0.9); --bg-panel-hover: rgba(74, 34, 16, 0.95);
    --text-main: #f3e2c2; --text-sec: #c9a36e; --border-color: rgba(201, 163, 110, 0.28);
    --system-blue: #e0533d; --system-green: #7fae6a; --system-yellow: #e8b64c; --system-red: #c92f1d;
    --shadow-glow: rgba(232, 182, 76, 0.55);
    --font-ui: 'Amiri', Georgia, serif; --font-title: 'Amiri', serif;
    background-image:
        url("data:image/svg+xml,%3Csvg width='120' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 45 Q 30 25 60 45 T 120 45' fill='none' stroke='rgba(232,182,76,0.05)' stroke-width='2'/%3E%3Cpath d='M0 55 Q 30 38 60 55 T 120 55' fill='none' stroke='rgba(201,90,61,0.06)' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Leitura agradável no deserto: o texto-guia também recebe a tipografia persa */
body.theme-tapete-persa .script-preview-content { font-family: 'Amiri', Georgia, serif; }

body.theme-tapete-persa .digital-display, body.theme-tapete-persa .lap-digital { font-family: var(--font-mono); }

body.theme-tapete-persa .script-char.current { text-shadow: 0 0 18px rgba(232, 182, 76, 0.65) !important; }

/* PALESTINA: preto, branco, verde e vermelho da bandeira — vermelho fica no papel
   semântico que já era dele (erro/apagar). Ampulheta (clock-palestina) some do
   relógio — ver module-timer.css. Revisão de cores 2026-08-08: --system-blue e
   --system-green eram o MESMO verde — "hoje" (azul) e "dia resolvido" (verde, ver
   .tem-evento-realizado no Calendário) ficavam idênticos e indistinguíveis quando
   coincidiam no mesmo dia. --system-blue passa a ser o branco da bandeira — cor
   real do símbolo, e agora visualmente distinto do verde. */
body.theme-palestina { --bg-page: #060606; --bg-panel: rgba(18, 18, 18, 0.85); --bg-panel-hover: rgba(30, 30, 30, 0.92); --text-main: #FFFFFF; --text-sec: rgba(255, 255, 255, 0.6); --border-color: rgba(255, 255, 255, 0.14); --system-blue: #F2F2F2; --system-green: #149954; --system-yellow: #FFD60A; --system-red: #CE1126; --shadow-glow: rgba(20, 153, 84, 0.4); --tp-active-line-color: #CE1126;
    /* Textura keffiyeh nos fundos: uma malha em losango (o motivo central do tecido),
       linhas claras finas sobre o preto — mesma família de tratamento do grão do
       Cinema acima (SVG tileado, opacity baixa), trocando ruído por um padrão com
       identidade. Tile de 44px: 4 arcos que se fecham na borda de cada quadro,
       formando a malha contínua quando repetido (sem costura visível). Opacidade
       revisada 2026-08-08 (pedido "melhore a leitura"): 0.16 → 0.055 — um padrão
       geométrico repetido "bate" mais contra letras do que ruído aleatório (como o
       grão do Cinema) na MESMA opacidade; o Tt (.script-panel) é 100% transparente
       (ver logo abaixo), então o texto do roteiro fica direto sobre esse fundo. */
    background-color: var(--bg-page);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.055'%3E%3Cpath d='M0,0 C11,11 33,11 44,0'/%3E%3Cpath d='M0,44 C11,33 33,33 44,44'/%3E%3Cpath d='M0,0 C11,11 11,33 0,44'/%3E%3Cpath d='M44,0 C33,11 33,33 44,44'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(120% 70% at 50% -10%, rgba(20, 153, 84, 0.05) 0%, transparent 60%);
    background-size: 44px 44px, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
}

/* Roteiro (Tt) é 100% transparente (ver .script-panel em layout.css) — o texto fica
   direto sobre a malha do fundo. Um véu escuro suave por trás só ali, igual um
   "papel" sobre a mesa, sem esconder a textura por completo nem virar um painel
   opaco novo — só dá folga pro texto respirar. */
body.theme-palestina .script-panel { background: rgba(0, 0, 0, 0.28); }

/* Mesmo bug de contraste já corrigido no Cinema (ver acima): --system-blue virou
   branco puro pra distinguir de --system-green, mas os lugares que usam
   --system-blue como FUNDO SÓLIDO com texto branco fixo (#fff) por cima ficariam
   brancos-no-branco. Ganham a mesma leitura em "malha" — fundo escuro, texto/traço
   na cor, sem inverter. */
body.theme-palestina .app-travado-btn {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 45%), #161616;
    border-color: rgba(255, 255, 255, 0.35); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

body.theme-palestina .elem-diaria, body.theme-palestina .elem-diaria-ano {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 45%), #161616;
    color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

body.theme-palestina .di-mini-cal-dia.sel {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 45%), #161616;
    color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

body.theme-palestina .di-mini-cal-dia.sel.tem-diaria::after { background: #fff; }

/* Bandeirinha da Palestina no LED do header: ÚNICA exceção às cores do tema — passa
   nas cores reais da bandeira, não nos tokens --system-*. Rara de propósito (ver
   .header-led-flag em index.html/layout.css), só existe quando o tema está ativo. */
body.theme-palestina .header-led-flag { display: block; }

/* ===== ACESSIBILIDADE (pedido do usuário 2026-08-08): "bonito, mas com letras maiores
   onde couber" — não é só um tema de cor, tem uma parte estrutural (tamanho de fonte)
   que os outros temas não mexem. Cream quente (não branco puro — mais gentil pros
   olhos que fica lendo por muito tempo) + texto quase preto: contraste bem acima dos
   outros temas de propósito. --text-sec sobe de ~0.6 (padrão) pra 0.82 de opacidade —
   secundário costuma ser o primeiro a ficar ilegível quando a vista cansa. Cores de
   sistema saturadas e ESCURAS o bastante pra funcionarem como TEXTO sobre um fundo
   claro (os outros temas assumem fundo escuro) — sem isso o verde/vermelho/azul de
   sempre desapareceriam aqui. Sem textura de propósito: é o único tema onde legibilidade
   vem antes de personalidade visual. */
body.theme-acessibilidade {
    --bg-page: #FAF6EC; --bg-panel: rgba(255, 255, 255, 0.92); --bg-panel-hover: rgba(255, 255, 255, 1);
    --text-main: #1B1811; --text-sec: rgba(27, 24, 17, 0.82); --border-color: rgba(27, 24, 17, 0.26);
    --system-blue: #0B4FDE; --system-green: #146C36; --system-yellow: #8A5A00; --system-orange: #B34700; --system-red: #B0102B;
    --shadow-glow: rgba(11, 79, 222, 0.25); --tp-active-line-color: #B0102B;
}

/* Letras maiores "onde couber": bump global — todo font-size do app é rem (relativo ao
   <html>), então sobe tudo de uma vez sem precisar tocar em cada regra. Moderado (114%,
   ~18px de base) de propósito: um bump agressivo estoura os MUITOS chips/botões de
   largura fixa em px espalhados pelo app (não crescem junto do texto). :has() no <html>
   porque o tema é uma classe no <body> — não dá pra herdar font-size de filho pra pai. */
html:has(body.theme-acessibilidade) { font-size: 114%; }

/* Topo escuro-esverdeado (pedido do usuário 2026-08-08: "faça o topo escuro pra melhor
   leitura das notificações") — só o TOPO, não a página inteira (que continua clara de
   propósito, ver comentário acima). .header-backdrop usa var(--bg-page) por padrão
   (compartilhado com a página toda), então aqui ele ganha uma cor PRÓPRIA, fora do token
   global. Texto/bordas do header redefinem os mesmos tokens (--text-main/--text-sec/
   --border-color/--system-*) só DENTRO do escopo do <header> — as cores deste tema pra
   esses tokens (ex. --system-blue: #0B4FDE) foram pensadas pra funcionar como texto
   ESCURO sobre fundo claro (ver comentário acima); sobre um fundo escuro novo elas
   ficariam ilegíveis de novo — reaproveita os valores do tema padrão (:root, já pensados
   pra fundo escuro) só aqui dentro, sem tocar no resto da página. */
body.theme-acessibilidade .header-backdrop { background: #1B241D; }

body.theme-acessibilidade header, body.theme-acessibilidade .header-led-layer {
    --text-main: #FFFFFF; --text-sec: #EBEBF599; --border-color: rgba(255, 255, 255, 0.14);
    --system-blue: #0A84FF; --system-green: #30D158; --system-yellow: #FFD60A;
    --system-orange: #FF9F0A; --system-red: #FF453A;
}

/* "Principalmente no evento (calendário)" (pedido explícito do usuário): ali, além do
   bump global, os textos que mais importam pra leitura rápida (nome do evento, faixa de
   dia/horário, diretrizes) ganham um segundo bump direto, sem depender só do global. */
body.theme-acessibilidade .ev-name { font-size: 1.2rem; }

body.theme-acessibilidade .ev-span .d { font-size: 1.3rem; }

body.theme-acessibilidade .ev-span .m, body.theme-acessibilidade .ev-span .ev-horario { font-size: 0.72rem; }

body.theme-acessibilidade .ev-sub { font-size: 0.88rem; }

body.theme-acessibilidade .ev-foot p { font-size: 1rem; line-height: 1.55; }

body.theme-acessibilidade .ev-foot-label { font-size: 0.74rem; }

/* Cards uniformes (ver .compacto em module-calendario.css) têm altura FIXA — o bump de
   fonte acima pediria mais espaço; sem isso o texto maior cortaria mais cedo que as 3
   linhas pretendidas. */
body.theme-acessibilidade .cal-evento-lista.compacto .ev-card { height: 246px; }

/* ===== PAPELÃO (pedido do usuário 2026-08-25; revisado no mesmo dia depois de ver ao
   vivo: "não gostei da textura do fundo... vamos para um pólen e deixamos o terracota
   como fundo... um amarelo clarinho, pouco saturado, uma textura mais minimalista...
   tipografia originária do Temporama, sem fontes personalizadas, sem fonte serifa...
   o topo deve ser mais escuro... escuro no fundo e claro na frente"). Arquitetura
   final: --bg-page É o terracota (o "fundo", atrás de tudo, inclusive atrás do
   Roteiro transparente); --bg-panel é papel PÓLEN — amarelo bem claro, pouco
   saturado — pra todo box/painel/campo/guia de texto, sempre mais claro que o
   terracota de trás ("claro na frente"). O header (.header-backdrop) fica AINDA
   mais escuro que o terracota da página — "o topo mais escuro" — com seus próprios
   tokens de texto claros, mesmo princípio do Acessibilidade logo acima. Nenhuma
   fonte própria: --font-title NÃO é redefinido aqui, herda o padrão do :root
   (Barlow Condensed) — pedido explícito contra fonte serifa/personalizada.

   --shadow-glow continua a mesma solução da v1: alpha bem mais baixo (0.16 contra
   os 0.4~0.7 de praxe) e tom terroso escuro em vez de cor clara — sombra curta,
   não halo luminoso ("letras pétreas, sem luminosidade" — isso não mudou no pedido
   de revisão).

   DUAS SUPERFÍCIES, DOIS TEXTOS (achado ao vivo 2026-08-25: "os títulos sob fundo
   terracota escritos claro ou branco"): o Temporama inteiro usa --text-main/--text-sec
   como UM par só, porque em todo outro tema --bg-page e --bg-panel têm quase a mesma
   luminosidade — aqui não, terracota é escuro/saturado e pólen é claro, então um par
   só nunca serviria os dois ao mesmo tempo. --text-main/--text-sec DA RAIZ do tema
   ficam CLAROS (pensados pra escrever direto sobre o terracota: títulos de módulo,
   labels soltos, tiles da tabela periódica sem caixa própria). Cada superfície de
   PAPEL de verdade (modal, cartão de Ajustes, Registros, mostrador do relógio, tile,
   campo de formulário, véu do Roteiro) redefine os dois tokens de volta pro escuro,
   igual o header faz pro claro — mesmo mecanismo, direção oposta. */
body.theme-papelao {
    /* Papel não é vidro: opacidade bem alta no painel, blur curto só pra suavizar a borda. */
    --glass-blur: blur(4px);
    /* Terracota revisado (achado ao vivo 2026-08-25: "a escolha das cores principais
       não está concordando") — o tom anterior (#a24a2c) puxava pro vermelho/rosado,
       destoando do amarelo do pólen; este é mais pardo/argila, mesma família de
       barro do pólen, só mais escura — os dois lêem como "o mesmo papel", não como
       duas cores concorrendo. */
    /* Mais claro (achado ao vivo 2026-08-25: "em geral mais claro o fundo um pouco") */
    --bg-page: #a15c38; --bg-panel: rgba(250, 242, 210, 0.97); --bg-panel-hover: rgba(244, 233, 190, 0.99);
    /* Terceiro tom — o "miolo" (achado ao vivo 2026-08-25: "texto sobre fundo escuro...
       confuso de ler... um fundo claro pra todo miolo... menos claro que os botões").
       Mais claro que o terracota, mais escuro/opaco que o pólen dos campos — dá pro
       conteúdo do módulo (título, EV, Cena, campos) uma folha PRÓPRIA pra descansar,
       em vez de escrever direto sobre o terracota. Ver .module-form-wrapper,
       module-departments.css — a regra é global com fallback transparent; só o
       Papelão (e futuros temas claros) definem isto de verdade. */
    --bg-content: #e0cdaa;
    --text-main: #f7ecc9; --text-sec: rgba(247, 236, 201, 0.78); --border-color: rgba(101, 74, 48, 0.28);
    --system-blue: #3d5566; --system-green: #5e6b3f; --system-yellow: #c1932c;
    --system-orange: #c1622d; --system-red: #a63f26; --system-purple: #7a5273;
    --shadow-glow: rgba(45, 28, 14, 0.16);
    background-color: var(--bg-page);
    /* Rebalanceado (achado ao vivo 2026-08-25: "mais textura e menos linha, a gente
       praticamente não vê as linhas mas sente uma textura de papel") — a listra vira
       quase subliminar (só pra não ficar 100% chapado) e o grão de fibra sobe, é ele
       quem carrega a sensação de papel agora, não a linha. */
    background-image:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, rgba(0,0,0,0.025) 1px, rgba(0,0,0,0.025) 2px, transparent 2px, transparent 20px),
        url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='papel'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='48' height='48' filter='url(%23papel)' opacity='0.16'/%3E%3C/svg%3E");
    background-size: 100% 100%, 48px 48px;
    background-repeat: no-repeat, repeat;
    background-attachment: fixed, fixed;
}

/* Roteiro (Tt) é 100% transparente por padrão (ver .script-panel em layout.css) — sem
   isto, o texto ficaria direto sobre o terracota granulado da página. Aqui ganha o
   MESMO véu claro dos painéis (papel pólen), pra entrar na lista de "todo box, guia
   de texto, campo" com fundo claro — quase opaco, porque aqui o texto é o protagonista.
   O texto do roteiro (.script-preview-content) herda cor de --text-main por cascata
   (--script-color-main nunca é definida em lugar nenhum, cai pro herdado) — por isso
   também precisa da volta pro escuro aqui, senão ficaria claro sobre claro. */
body.theme-papelao .script-panel { background: rgba(250, 242, 210, 0.92); --text-main: #2e2620; --text-sec: #6e5c46; --shadow-glow: transparent; color: var(--text-main); }

/* "O topo deve ser mais escuro" — header ganha tom PRÓPRIO, mais escuro que o
   terracota da página (não o token --bg-page/--bg-panel, que são pro resto do app).
   Como a raiz do tema já É clara agora (ver comentário acima), o header NÃO precisa
   mais redefinir --text-main/--text-sec — só as cores de sistema, que na raiz são
   tons terrosos escuros (pensados pra aparecer sobre pólen) e ficariam apagados
   demais sobre o marrom escuro do header; aqui reaproveitam os padrão do :root,
   pensados pra fundo escuro (mesmo mecanismo do Acessibilidade, comentário acima). */
body.theme-papelao .header-backdrop { background: #33190f; }

body.theme-papelao header, body.theme-papelao .header-led-layer {
    --system-blue: #0A84FF; --system-green: #30D158; --system-yellow: #FFD60A;
    --system-orange: #FF9F0A; --system-red: #FF453A;
}

/* Superfícies de papel de verdade: cada uma volta --text-main/--text-sec pro escuro
   (a raiz do tema é clara, pensada pro terracota) e ganha fundo pólen sólido onde
   ainda não tinha nenhum — .ptile normalmente só é um verniz translúcido por cima do
   fundo do PAI (layout.css), e .form-group input/textarea/select tinha só 3% de branco
   por cima de QUALQUER coisa atrás; nos dois casos isso deixava o terracota granulado
   vazar direto por baixo dos campos ("precisamos dos campos com fundo claro"). */
body.theme-papelao .modal-box,
body.theme-papelao .setting-group-box,
body.theme-papelao .history-container-box,
body.theme-papelao .analog-wrapper,
body.theme-papelao .ptile,
body.theme-papelao .clapper-slate,
body.theme-papelao .module-form-wrapper,
body.theme-papelao .scene-context,
body.theme-papelao #uiTooltip,
/* Sete popovers/cards que faltavam na lista (achado ao vivo 2026-08-26, revisão pedida
   pelo usuário: "acabou se tornando um tema claro predominantemente, podem ter outros
   lugares inconsistentes" — a sugestão de locação da Claquete foi o exemplo real que
   disparou a checagem). Mesmo bug de sempre: cada um usa --bg-panel/--bg-panel-hover
   (claro aqui) mas nunca redeclara --text-main/--text-sec, então herdava o claro da
   raiz por cima do próprio fundo claro — texto invisível, só o item com fundo PRÓPRIO
   (selecionado/hover) lia por acidente. Todo popover novo com fundo --bg-panel precisa
   entrar aqui — não existe regra geral que cubra isso sozinha (ver comentário abaixo). */
body.theme-papelao .loc-sugestoes,
body.theme-papelao .ev-card,
body.theme-papelao .ev-pilha,
body.theme-papelao .ev-grupo,
body.theme-papelao .aviso-popover,
body.theme-papelao .historico-popover,
body.theme-papelao .cal-filtro-pop,
body.theme-papelao .od-add-popup,
body.theme-papelao .op-suggestions {
    /* --text-main/--text-sec sozinhos não bastam aqui: nenhum destes seletores
       define `color` explicitamente (só background/borda), então SEM redeclarar
       `color` a herança de verdade vem de --color computado lá em cima no <body>
       (claro, pensado pro terracota) e desce assim mesmo pros filhos — .setting-item
       label, por exemplo, herdava o claro-sobre-claro e ficava ilegível. Redeclarar
       `color` aqui força reavaliar a variável NESTE escopo antes de descer.
       .clapper-slate é exceção só de nome: ELE MESMO já escreve `color: var(--text-main)`
       na própria regra base (module-clapper.css) — mas só redeclarar a CUSTOM PROPERTY
       aqui, sem repetir `color`, já bastava pra esse caso (achado ao vivo 2026-08-25:
       "tem uma cor que não aparece nada, é a cor dos textos da claquete" — os campos
       tipo Produção/Dir/Foto usam `.slate-input { color: var(--text-main) }`, que
       antes desta linha herdava o claro da raiz sobre o pólen do próprio painel).
       --shadow-glow também zera aqui (achado ao vivo 2026-08-25: "vamos tirar a
       sombra de trás dos textos quando sob fundo claro") — o tom baixo-contraste
       da raiz (pensado pra um brilho quase imperceptível atrás de texto CLARO sobre
       terracota) virava uma mancha escura visível atrás de texto ESCURO sobre papel
       claro; texto sobre papel aqui é só tinta, sem halo nenhum. */
    --text-main: #2e2620; --text-sec: #6e5c46; --shadow-glow: transparent; color: var(--text-main);
}

/* "Ainda precisa tirar sombras dos textos... vamos ter apenas a diferenciação sutil
   da cor para tal, sem sombra" (achado ao vivo 2026-08-25) — zerar --shadow-glow
   (acima) só cobre quem usa a VARIÁVEL; o app tem dezenas de text-shadow em rgba()
   FIXO espalhados (badges, checks, ptile.on, inputs em foco...) que não respondem a
   ela. Em vez de caçar um por um, corta de vez: nenhum texto dentro de uma superfície
   de papel do Papelão leva sombra — diferença de estado vira só cor (já é assim,
   ver --system-* em cada caso), nunca halo. !important de propósito: são dezenas de
   regras de origem com especificidade variada, a única forma de garantir "sem
   sombra, sempre" aqui é vencer todas de uma vez. */
body.theme-papelao .modal-box *,
body.theme-papelao .setting-group-box *,
body.theme-papelao .history-container-box *,
body.theme-papelao .analog-wrapper *,
body.theme-papelao .ptile,
body.theme-papelao .ptile *,
body.theme-papelao .clapper-slate *,
body.theme-papelao .module-form-wrapper *,
body.theme-papelao .scene-context *,
body.theme-papelao .script-panel *,
body.theme-papelao .loc-sugestoes *,
body.theme-papelao .ev-card *,
body.theme-papelao .ev-pilha *,
body.theme-papelao .ev-grupo *,
body.theme-papelao .aviso-popover *,
body.theme-papelao .historico-popover *,
body.theme-papelao .cal-filtro-pop *,
body.theme-papelao .od-add-popup *,
body.theme-papelao .op-suggestions * {
    text-shadow: none !important;
}

body.theme-papelao .ptile { background-color: var(--bg-panel); }

/* Volume discreto no cartão do miolo, mesma régua de sombra quente dos outros
   painéis do tema — a folha "descansa" sobre o terracota em vez de só mudar de cor.
   Canto de cima QUADRADO (achado ao vivo 2026-08-25: "vamos tirar o canto arredondado
   desse topo") — a folha nasce reto embaixo do header, só a base arredonda (ver
   border-radius em .module-form-wrapper, module-departments.css). Textura própria
   aqui dentro também (mesmo pedido: "a textura horizontal interna pode ficar um
   pouco mais evidente... temos que dar a conotação de papel") — mesma técnica da
   página (listra + grão), mas alpha mais alto: --bg-content é bem mais claro que o
   terracota, então precisa de mais contraste pra ler igual. */
body.theme-papelao .module-form-wrapper {
    /* Sombra recalibrada (achado ao vivo 2026-08-25: "essa sombra que o header faz não
       está adequada... menos saturada, que dê mais sentido") — a versão anterior tinha
       blur alto o bastante (50px) pra alcançar bem acima da própria borda de cima do
       cartão, bem onde o topo já esmaece sob o header (mask-image de 28px em
       .app-module.active) — as duas coisas juntas liam como uma mancha alaranjada, mais
       forte nos CANTOS de cima (onde o blur horizontal do canto soma com o vertical) do
       que no meio, virando um "brilho" em vez de sombra. Blur mais curto (30px) já não
       alcança tanto acima da borda; cor bem mais escura e quase sem matiz (poucochíssimo
       aquecida) em vez do marrom-avermelhado de antes — lê como sombra de verdade, não
       como cor vazando. */
    box-shadow: 0 14px 30px rgba(20, 12, 6, 0.28), inset 0 1px 0 rgba(255,255,255,0.35);
    /* Rebalanceado de novo, mesmo pedido da página de trás — "mais textura e menos
       linha... praticamente não vê as linhas mas sente uma textura de papel". */
    background-image:
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, rgba(60,38,18,0.02) 1px, rgba(60,38,18,0.02) 2px, transparent 2px, transparent 20px),
        url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='papel'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='48' height='48' filter='url(%23papel)' opacity='0.13'/%3E%3C/svg%3E");
    background-size: 100% 100%, 48px 48px;
    background-repeat: no-repeat, repeat;
}

body.theme-papelao .form-group input,
body.theme-papelao .form-group textarea,
body.theme-papelao .form-group select {
    background-color: var(--bg-panel); --text-main: #2e2620; --text-sec: #6e5c46;
}

/* Banner de Evento (EV): pedido explícito 2026-08-25 pra ESTE cartão específico —
   "volta a ser fundo escuro sob letras claras ali naquela parte apenas, válido pra
   eventos" — ao contrário de todo o resto do miolo (que virou claro), o aviso de
   Evento continua/volta a ser um cartão ESCURO com texto claro por cima, tipo um
   card de alerta — não herda a folha clara do .module-form-wrapper em volta. */
body.theme-papelao .ev-dept-banner {
    background: rgba(45, 28, 20, 0.88);
    box-shadow: inset 0 0 0 1px rgba(191,90,242,0.35);
    --text-main: #f7ecc9; --text-sec: rgba(247, 236, 201, 0.72);
}

/* Check ✓/✗ da barra de Cena: glow FIXO em rgba (não usa --shadow-glow, então o zero
   geral do tema não alcançava) — achado ao vivo 2026-08-25, mesmo pedido de "tirar
   essas sombras desse tipo de texto" já aplicado no resto via --shadow-glow. */
body.theme-papelao .ct-rot.concluida .ct-check,
body.theme-papelao .cena-tempo-bar .ct-nao-rolou:hover .ct-check-x,
body.theme-papelao .cena-tempo-bar .ct-nao-rolou.reativar:hover .ct-check-x {
    text-shadow: none;
}

/* Painéis/modais/registros já herdam --bg-panel (papel pólen) certo por padrão — só
   o cartão de Ajustes (.setting-group-box) tem fundo ESCURO fixo em layout.css
   (pensado pro resto dos temas, que são escuros); aqui vira um recorte mais claro
   ainda, com uma borda de luz por cima e sombra curta por baixo — o mesmo princípio
   "cravado" de baixo relevo, sem brilho nenhum. */
body.theme-papelao .setting-group-box {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 2px rgba(60,35,20,0.16);
}

body.theme-papelao .history-container-box {
    box-shadow: 0 10px 24px rgba(60, 35, 20, 0.18), inset 0 1px 0 rgba(255,255,255,0.4);
}

body.theme-papelao .modal-box { box-shadow: 0 30px 70px rgba(50, 30, 15, 0.35), inset 0 1px 0 rgba(255,255,255,0.3); }

/* .ptile.on tem um azul e um brilho (text-shadow 0 0 10px) FIXOS em layout.css, fora
   do sistema de tokens — todo tema com personalidade própria sobrescreve (ver Cinema/
   Catarina acima). Aqui a tecla "ligada" ganha a cor terracota do tema e, no lugar do
   brilho, uma sombra INTERNA (prensada pra dentro do papel) — sem `text-shadow`
   nenhum no símbolo, exatamente o "sem luminosidade" pedido. */
body.theme-papelao .ptile.on {
    border-color: var(--system-orange);
    /* background-image (não o shorthand `background`) preserva o background-color
       pólen sólido que .ptile já ganhou acima — senão o shorthand zeraria pra
       transparent e o terracota da página voltaria a vazar por baixo do tile aceso. */
    background-image: linear-gradient(160deg, rgba(193, 98, 45, 0.16) 0%, rgba(193, 98, 45, 0.03) 100%);
    box-shadow: inset 0 1px 2px rgba(60, 35, 20, 0.35), inset 0 -1px 0 rgba(255,255,255,0.35);
}

body.theme-papelao .ptile.on .ptile-symbol { color: var(--system-orange); text-shadow: none; }

body.theme-papelao input:focus, body.theme-papelao textarea:focus, body.theme-papelao select:focus {
    border-color: var(--system-orange); box-shadow: 0 0 0 1px rgba(193, 98, 45, 0.22);
}

/* Botões de transporte (REC/Lap/Iniciar): achado ao vivo 2026-08-25 — dois problemas
   juntos. 1) "os botões... precisam de um fundo que dê sentido aos botões por sua
   natureza luminescente": .control-btn é `background: transparent` por padrão (pensado
   pra ficar sobre um fundo ESCURO já apropriado) — aqui, sentado direto no terracota,
   perdia a leitura de "lâmpada apagada". Ganha um fundo pólen sólido (a mesma pastilha
   clara dos outros controles do tema), lendo como um botão retroiluminado de painel,
   não como texto solto. 2) "textos do hover estão sem visibilidade": o hover padrão
   soma um verniz translúcido (branco ou vermelho) por cima do que already lá —
   como a base aqui não é mais transparente, esse verniz não apaga o pólen, mas nos
   variantes com fundo translúcido (.btn-rec) ele ainda usava alpha baixo o bastante
   pra deixar o terracota vazar de novo por baixo do texto escuro. Hover vira um tom
   pólen mais escuro SÓLIDO (--bg-panel-hover), nunca translúcido, em qualquer variante. */
body.theme-papelao .control-btn {
    /* --text-main aqui, não `color` direto: .control-btn (module-timer.css) já escreve
       `color: var(--text-main)` na própria regra base — só redefinir a variável já
       basta, e assim os botões com cor PRÓPRIA (.btn-start usa var(--system-green),
       .btn-rec usa var(--system-red)) continuam com a cor deles, intocados; só os
       botões "neutros" (Lap, Registros) que dependiam do --text-main herdado mudam. */
    background: var(--bg-panel); --text-main: #2e2620;
    box-shadow: 0 6px 16px rgba(50,25,10,0.22), inset 0 1px 0 rgba(255,255,255,0.45);
}

body.theme-papelao .control-btn:hover,
body.theme-papelao .btn-rec:hover {
    background: var(--bg-panel-hover);
}

/* Preview do TP nos Ajustes e superfícies de controle não herdam a tipografia persa do texto */
body.theme-tapete-persa #settingsTpPreview .tp-mini-text-box { font-family: var(--font-ui); }

/* ═══════════════════════════════════════════════════════════════════════
   A tabela periódica e os estados de luz
   Extraído de css/layout.css
   ═══════════════════════════════════════════════════════════════════════ */

/* Status minimalista no canto superior esquerdo: verde internet · laranja offline · azul rede local */
.net-status { position: fixed; top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; z-index: 400; background: var(--text-sec); transition: background 0.3s, box-shadow 0.3s; }

.net-status.online { background: var(--system-green); box-shadow: 0 0 6px var(--system-green); }

.net-status.offline { background: var(--system-orange); box-shadow: 0 0 6px var(--system-orange); }

.net-status.lan { background: var(--system-blue); box-shadow: 0 0 6px var(--system-blue); }

/* Modo curioso (pedido do usuário 2026-08-08: "ver tudo e não editar nada", renomeado
   2026-08-09 de "somente leitura" — "pode ver mas não pode editar") — aviso discreto e
   permanente, não some sozinho (diferente do offline de 10s): quem está nesse modo
   precisa lembrar disso o tempo todo, não só na hora que entrou. O bloqueio de verdade
   é sempre no servidor (ver EXTRAS_SOMENTE_LEITURA em server.js) — isto aqui é só o
   aviso, não uma trava de clique nenhuma. Reposicionado 2026-08-09 (era um selo fixo no
   canto): agora mora na coluna do relógio, junto de "editando" (#curiosoNotice, mesma
   classe .modo-editor-notice — já laranja por padrão — ver aplicarNoticeCurioso em
   app.js). Nunca aparecem juntos na prática (modo curioso não tem Me disponível). */
.net-status.rec.offline, .net-status.rec.online { animation: netRecPulse 1s infinite alternate; }

@keyframes netRecPulse { from { opacity: 0.5; } to { opacity: 1; } }

/* Expoente de conexão junto do T: "i" = internet (verde), "l" = rede local (azul).
   Pisca 3x ao conectar (chama atenção uma vez só) e depois fica fixo e discreto. */
.conexao-badge {
    position: absolute; top: -2px; right: -2px; width: 15px; height: 15px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; line-height: 1;
    background: var(--bg-page); border: 1px solid currentColor;
}

.conexao-badge.internet { color: var(--system-green); text-shadow: 0 0 5px rgba(48,209,88,0.7); }

.conexao-badge.lan { color: var(--system-blue); text-shadow: 0 0 5px rgba(10,132,255,0.7); }

.conexao-badge.piscando { animation: conexaoPisca 0.5s ease-in-out 3; }

@keyframes conexaoPisca { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }

.areas-conexao .conexao-badge { position: static; width: 16px; height: 16px; }

/* ===== PADRÃO "TABELA PERIÓDICA": tiles tipográficos das áreas ===== */
.ptile {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 58px; aspect-ratio: 1; border-radius: 10px; gap: 2px; flex-shrink: 0;
    background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 60%, rgba(0,0,0,0.12) 100%);
    border: 1px solid var(--border-color); position: relative; overflow: hidden;
    color: var(--text-main); cursor: default; transition: 0.2s; user-select: none;
}

.ptile::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 15%, var(--shadow-glow) 0%, transparent 55%); opacity: 0.07; pointer-events: none; }

.ptile-symbol { font-family: var(--font-title); font-weight: 700; font-size: 1.35rem; line-height: 1; letter-spacing: 0.5px; text-shadow: 0 0 10px var(--shadow-glow); }

/* Nome do tile: 1 linha só, colado à base com margem mínima; símbolo segue centralizado */
.ptile-name { position: absolute; left: 0; right: 0; bottom: 4px; font-size: 0.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-sec); line-height: 1; text-align: center; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ptile-num { position: absolute; top: 3px; left: 5px; font-family: var(--font-mono); font-size: 0.5rem; color: var(--text-sec); opacity: 0.7; }

/* Topo do tile da cena: HORÁRIO previsto à esquerda, INT/EXT à direita */
.ptile-topo { left: 5px; right: 5px; display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }

.ptile-topo b { font-weight: 600; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ptile-topo .ptile-ie { opacity: 0.75; }

/* "✓" de rodada: sempre no canto superior direito do quadro — espaço reservado (não
   pisca ao marcar), apagado até marcar, verde (cor semafórica) quando concluída.
   Nas cenas fica abaixo do INT/EXT quando ele existe (.sem-ie sobe pro lugar dele). */
.ptile-check { position: absolute; top: 13px; right: 5px; font-size: 0.5rem; font-weight: 700; color: var(--text-sec); opacity: 0.3; line-height: 1; pointer-events: none; transition: 0.15s; }

.ptile-check.sem-ie, .prod-tile .ptile-check { top: 3px; }

.ptile-check.feito { color: var(--system-green); opacity: 1; text-shadow: 0 0 6px rgba(48,209,88,0.5); }

/* "Não rolou" (ver toggle_cena_cancelada) — a cena continua no tile, só apagada, com o
   ✕ sempre aceso (é marca permanente, não estado transitório como o ✓). */
.ptile-check.nao-rolou { color: var(--system-red); opacity: 1; text-shadow: 0 0 6px rgba(255,69,58,0.4); }

.scene-tile.cancelada { opacity: 0.4; filter: grayscale(0.6); }

.scene-tile.cancelada .ptile-name, .scene-tile.cancelada .ptile-hora, .scene-tile.cancelada .ptile-ie { text-decoration: line-through; text-decoration-color: var(--system-red); }

/* Tiles interativos (seleção de áreas do projeto) */
button.ptile { cursor: pointer; }

@media (hover: hover) {
    button.ptile:hover { border-color: var(--system-blue); }

}

.ptile.on { border-color: var(--system-blue); background: linear-gradient(160deg, rgba(10,132,255,0.18) 0%, rgba(10,132,255,0.04) 100%); }

.ptile.on .ptile-symbol { color: var(--system-blue); text-shadow: 0 0 10px rgba(10,132,255,0.5); }

.ptile.locked { opacity: 0.55; cursor: default; }

@media (hover: hover) {
    .ptile.locked:hover { border-color: var(--border-color); }

}

.ptile-grid { display: flex; flex-wrap: wrap; gap: 10px; }

/* Toque de brilho + estado de toque (versão 2.0, "era da luz" — pedido do usuário
   2026-08-20: "um toque de brilho e estado de toque nos botões como uma nova etapa do
   design"). Reflexo fino no topo do tile (luz pegando na borda, mesma linguagem de
   --shadow-glow já usada no resto do app) + resposta tátil sutil ao pressionar. Vale
   pra .area-card também (mesma família de tile, ver seção "Modal Elementos" abaixo).
   .ptile-expandable fica de fora — já tem a própria animação de expandir/colapsar. */
.ptile:not(.ptile-expandable)::before, .area-card::before {
    content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--shadow-glow), transparent);
    opacity: 0.55; pointer-events: none;
}

.ptile:not(.ptile-expandable):active, .area-card:active { transform: scale(0.95); box-shadow: 0 0 12px var(--shadow-glow); }

@media (prefers-reduced-motion: reduce) {
    .ptile:active, .area-card:active { transform: none; }

}

/* Ptile expansível: a base costuma truncar nomes compridos (ex.: nome de projeto numa
   presença) — clique amplia pra ler inteiro, sem empurrar o resto do layout.
   O BOTÃO em si NUNCA sai do fluxo (fica sempre position:relative, sempre no tamanho
   normal) — quem cresce é um overlay interno (.ptile-body), ancorado nele. Assim o botão
   nunca some do flex do card (.usuario-acoes), e os vizinhos não "pulam" ao abrir/fechar.
   X ou clicar fora fecha; só um ampliado por vez (ver o listener em app.js). */
/* .ptile base tem overflow:hidden (pro brilho decorativo ::after não vazar do quadrado) —
   mas isso também clipava o overlay ampliado (.ptile-body), que é maior que o botão. Essa
   era a causa real do "botão preto": o conteúdo existia, só ficava cortado fora da vista. */
.ptile-expandable { position: relative; overflow: visible; }

.ptile-expandable .ptile-close { display: none; }

/* Colapsado: .ptile-body preenche o botão exatamente (inset:0) — visual idêntico ao de
   antes, só que um nível mais fundo no DOM. Nunca usa display:contents (esse é o bug: em
   alguns navegadores, alternar display:contents ↔ position:absolute na mesma troca de
   classe deixa o elemento com um retângulo "fantasma" — getBoundingClientRect existe,
   mas nada é pintado ali). Aqui .ptile-body É SEMPRE um flex/absolute de verdade; só o
   tamanho/posição mudam ao expandir — sem re-tipar o display no meio do caminho. */
.ptile-expandable .ptile-body {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: 0.15s;
}

.ptile-expandable.expanded .ptile-body {
    inset: auto; top: 50%; right: 0; width: 150px; height: 150px; transform: translateY(-50%);
    z-index: 60; border: 1px solid var(--system-blue); border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,0.55);
    background: var(--bg-panel);
}

.ptile-expandable.expanded .ptile-body .ptile-symbol { font-size: 2.2rem; }

.ptile-expandable.expanded .ptile-body .ptile-name {
    position: static; margin-top: 6px; font-size: 0.72rem; white-space: normal;
    line-height: 1.25; padding: 0 10px; overflow: visible; text-overflow: unset;
}

.ptile-expandable.expanded .ptile-body .ptile-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--bg-panel); border: 1px solid var(--border-color); color: var(--text-sec);
    font-size: 0.6rem; cursor: pointer;
}

@media (hover: hover) {
    .ptile-expandable.expanded .ptile-body .ptile-close:hover { background: var(--system-red); color: #fff; border-color: var(--system-red); }

}

.mod-mark .ptile-symbol { font-size: 1rem; }

.mod-mark-cat .ptile-symbol { color: var(--text-main); text-transform: none; }

@keyframes areas-grid-sair { to { opacity: 0; transform: scale(0.97); } }

@keyframes areas-grid-entrar { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

/* Vazio (2026-08-19, pedido do usuário no reordenar do menu Sistema: "sendo Xx nada,
   apenas o espaço, sem botão") — ocupa a célula do grid sem ser clicável nem parecer um
   tile de verdade (sem borda, sem conteúdo). */
.area-card-vazio { width: var(--area-tile); aspect-ratio: 1; }

/* Quadrados idênticos (largura = altura); símbolo dimensionado pela palavra mais larga;
   nome em até 2 linhas, alinhado pela base com respiro interno do design */
.areas-grid .area-card, .areas-grid .area-card.principal {
    width: var(--area-tile); aspect-ratio: 1;
    border: 1px solid var(--border-color);
    background: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 60%, rgba(0,0,0,0.10) 100%);
    justify-content: flex-end; gap: 0; padding: 10px 8px 10px;
}

@media (hover: hover) {
    .areas-grid .area-card:hover { border-color: var(--system-blue); }

}

.areas-grid .area-card.active { border-color: var(--system-blue); }

.areas-grid .area-card { justify-content: flex-end; position: relative; }

.area-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: 14px;
    padding: 18px 10px 14px; cursor: pointer; transition: 0.2s; color: var(--text-sec); font-family: var(--font-ui);
}

.mini-seletor-item .ptile-symbol { font-family: var(--font-title); font-size: 1rem; font-weight: 700; color: var(--system-blue); min-width: 1.4em; text-align: center; }

body.apple-light .area-card, body.theme-summer-light .area-card { background: rgba(0,0,0,0.03); }

@media (hover: hover) {
    .area-card:hover { border-color: var(--system-blue); color: var(--text-main); background: rgba(255,255,255,0.06); }

}

.area-card.active { border-color: var(--system-blue); color: var(--system-blue); background: rgba(10, 132, 255, 0.08); }

.area-card.active .area-mark { color: var(--system-blue); text-shadow: 0 0 10px rgba(10, 132, 255, 0.5); }

/* Dr/Ft/Ar/Pr no seletor de Elementos: texto mais vivo/aceso que o padrão (pedido do
   usuário 2026-08-20 — "textos pequenos, que não fique pesado, mas bonito e mais vivo
   que quando editar", comparando à luminosidade das claquete .clapper-meta preenchidas).
   Mesmo idioma de --shadow-glow, só um pouco mais forte que o glow padrão do .area-mark
   — continua sutil, some assim que entra na tela de edição (que segue clara e flat). */
.areas-grid .area-card:has(.cat-equipe) .area-mark { text-shadow: 0 0 13px var(--shadow-glow); }

.areas-grid .area-card:has(.cat-equipe) .area-name { color: var(--text-main); text-shadow: 0 0 9px var(--shadow-glow); opacity: 0.9; }

.head-tile .ptile-symbol { font-size: 1.05rem; }

.head-tile .ptile-name { font-size: 0.4rem; }

.head-tile.on .ptile-symbol { color: var(--system-blue); }

.head-tile.tp-open .ptile-symbol { color: var(--system-red); }

/* Status Global (Luz REC) no Header */
.global-status-circle {
    width: 20px; height: 20px; border-radius: 50%; margin-right: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); transition: background-color 0.3s, box-shadow 0.3s;
    border: 2px solid rgba(255,255,255,0.2);
}

.global-status-circle.pending { background-color: var(--semaforo-yellow); box-shadow: 0 0 15px rgba(255, 159, 10, 0.6); }

.global-status-circle.ready { background-color: var(--semaforo-green); box-shadow: 0 0 15px rgba(48, 209, 88, 0.6); }

.global-status-circle.recording { background-color: var(--semaforo-red); box-shadow: 0 0 20px rgba(255, 69, 58, 0.9); animation: pulseGlobalRec 1s infinite alternate; }

@keyframes pulseGlobalRec {
    0% { transform: scale(1); box-shadow: 0 0 15px rgba(255, 69, 58, 0.6); }
    100% { transform: scale(1.1); box-shadow: 0 0 25px rgba(255, 69, 58, 1); }
}

/* .app-module.active (ver mais abaixo) roda um fadeIn com transform — nenhum problema
   normalmente, mas AQUI dentro .block-watch vira "display:contents" e o relógio/base do
   timer são position:fixed: enquanto o pai tem qualquer transform (mesmo indo só até
   translateY(0)), o navegador passa a tratá-lo como o novo "container" desses elementos
   fixed, e eles nascem deslocados pro canto do módulo em vez do canto da tela — só
   "encaixando" no lugar certo quando a animação termina e o transform some. Era esse o
   "os elementos parecem se posicionar sozinhos" ao abrir o HUD. Sem transform aqui
   (só opacity), o relógio e a base já nascem no canto certo da tela desde o 1º frame —
   quem entra deslizando são eles mesmos, ver hudSlideIn abaixo. */
@keyframes fadeInFlat { from { opacity: 0; } to { opacity: 1; } }

@keyframes hudSlideIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }

.script-cena-mark .scene-tile { width: 50px; pointer-events: none; }

/* META desligada: só o rótulo riscado, sem controles (minimalista) */
/* S, M e FALA: mesmo padrão de botão-pílula. S/M leem o estado aceso/apagado (verde);
   FALA mantém leitura de cor própria (azul), distinta do verde. */
.sync-btn, .meta-toggle, .fala-btn {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; padding: 3px 9px; height: 24px; min-width: 24px;
    border: 1px solid var(--border-color); border-radius: 999px; background: transparent; color: var(--text-sec);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: 0.15s; font-family: var(--font-ui);
}

/* === S (Sync do Texto Guia) — TRÊS estados, e a COR é a informação ===
   (2026-08-28, pedido do usuário; ver tpSyncModo em js/store.js.)
     laranja  acompanha quem opera — rolar aqui não muda nada pra ninguém;
     vermelho VOCÊ está operando   — rolar aqui move o texto de todo mundo;
     verde    leitura livre        — role à vontade, o Tt de quem opera não se mexe.
   O vermelho é o único que sai desta tela e alcança a equipe, e por isso é o único
   que pulsa: um estado que afeta os outros não pode passar despercebido. Mesmo
   vocabulário do REC da claquete, onde vermelho também significa "está no ar". */
.sync-btn.sync-segue { border-color: var(--system-orange); color: var(--system-orange); background: rgba(255,159,10,0.10); }

.sync-btn.sync-opera { border-color: var(--system-red); color: var(--system-red); background: rgba(255,69,58,0.14); animation: syncOperaPulso 1.6s ease-in-out infinite; }

.sync-btn.sync-livre { border-color: var(--system-green); color: var(--system-green); background: rgba(48,209,88,0.10); }

@keyframes syncOperaPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,69,58,0); } 50% { box-shadow: 0 0 0 3px rgba(255,69,58,0.22); } }

@media (prefers-reduced-motion: reduce) {
    .sync-btn.sync-opera { animation: none; }

}

@media (hover: hover) {
    .sync-btn:hover, .meta-toggle:hover { color: var(--text-main); }

    .sync-btn.sync-segue:hover { color: var(--system-orange); }

    .sync-btn.sync-opera:hover { color: var(--system-red); }

    .sync-btn.sync-livre:hover { color: var(--system-green); }

}

@keyframes recTextBlink { from { opacity: 0.55; } to { opacity: 1; } }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.sw-tile .ptile-symbol { font-size: 1.15rem; }

/* ===== ELEMENTOS: quadrados de tabela periódica — número pequeno acima à direita, nome mínimo abaixo ===== */
.area-card { aspect-ratio: 1; padding: 8px 6px; border-radius: 12px; justify-content: center; gap: 5px; }

.re-led-hq > .ptile, .re-led-cores-linha > .ptile, .re-led-modo > .ptile,
.re-led-cenas > .ptile, .re-led-icones > .ptile, .re-led-imagens > .ptile {
    width: 100%;
}

.re-img-slot .ptile-name { font-size: 0.9rem; opacity: 0.5; }

.re-img-slot:not(.slot-cheio) .ptile-name { color: var(--system-blue); opacity: 0.7; }

.re-img-slot.slot-cheio .ptile-name { display: none; }

.re-video-slot.slot-cheio .ptile-name { display: none; }

.re-video-slot:not(.slot-cheio) .ptile-name { color: var(--system-purple); opacity: 0.7; }

.re-audio-slot:not(.slot-cheio) .ptile-name { color: var(--system-green); opacity: 0.7; }

.re-audio-slot.slot-cheio .ptile-name { display: none; }

/* Deck de toca-fita da Fila (pedido do usuário 2026-08-16: "botões de um deck de toca
   fita, com textura, volume e luminosidade, como nossos elementos, as cenas, com verde
   luminoso para o play") — os 5 botões (Add/Tocar/Pular/Ciclo/Limpar) agora são .ptile de
   verdade (ver index.html), a MESMA textura/relevo/tamanho de qualquer Elemento do app —
   nada aqui redefine tamanho ou fundo, só os estados PRÓPRIOS deste deck por cima do que
   .ptile já dá de graça. */
.re-deck-btn .ptile-symbol { font-size: 1.15rem; }

.re-deck-btn.ativo .ptile-symbol { color: var(--system-blue); text-shadow: 0 0 10px rgba(10,132,255,0.5); }

.re-led-hq-aq.ativo .ptile-symbol { color: var(--system-purple); text-shadow: 0 0 10px rgba(191,90,242,0.6); }

.re-deck-play.tocando .ptile-symbol { color: var(--system-green); text-shadow: 0 0 12px rgba(48,209,88,0.85); }

.re-deck-play.tocando.gatilho .ptile-symbol { color: var(--system-yellow); text-shadow: 0 0 12px rgba(255,214,10,0.85); }

@media (hover: hover) {
    .re-deck-danger:hover .ptile-symbol { color: var(--system-red); }

}

.re-cores-topo-linha .ptile { width: 58px; }

.re-audio-slots-compactos > .ptile { width: 58px; }

.re-imagem-video-slots-compactos .ptile { width: 58px; }

/* Tile padrão de cena (tileDoDia) dentro da linha — mesmo .scene-tile de Od/Dr/Ft/Ar/Pr,
   só um pouco menor pra não dominar a linha (ela é sobre o TEXTO, o tile é só contexto). */
.fala-row .scene-tile { width: 50px; pointer-events: none; }

.stop-tipo-btn { background: var(--system-blue); color: var(--bg-page); border: none; border-radius: 5px; font-family: var(--font-mono); font-weight: 700; font-size: 0.68rem; padding: 2px 7px; cursor: pointer; margin-left: 4px; }

/* ============================================================
   LOTE 4 — claquete, elementos, meta, Mt, boost, diárias, correções
   ============================================================ */

/* --- Símbolo dos títulos de Elemento levemente maior (leitura da caixa-baixa) --- */
.mod-mark .ptile-symbol { font-size: 1.15rem; }

/* Todos os cards do menu com a MESMA moldura 1px nos 4 lados (o .nav-btn zerava/engordava lados) */
#areasModal .areas-grid .area-card { border: 1px solid var(--border-color) !important; box-sizing: border-box; }

#areasModal .areas-grid .area-card.active { border-color: var(--system-blue) !important; }

@media (hover: hover) {
    #areasModal .areas-grid .area-card:hover { border-color: var(--system-blue) !important; }

}

.areas-grid .area-card.active { border-color: var(--system-blue) !important; }

.diaria-ptile.on .ptile-symbol { color: var(--system-blue); }

.diaria-ptile .ptile-symbol { font-size: 1.5rem; }

.diaria-ptile .ptile-name { font-size: 0.5rem; }

.diaria-add .ptile-symbol { font-size: 2rem; color: var(--system-green); }

.diaria-del .ptile-symbol { font-size: 2rem; color: var(--system-red); }

.diaria-di .ptile-symbol { color: var(--system-blue); }

.diaria-ordenar .ptile-symbol { color: var(--system-blue); }

.diaria-livre .ptile-symbol { color: var(--text-sec); }

.diaria-livre .ptile-name { color: var(--text-sec); }

@media (max-width: 600px) {
    #areasModal .areas-grid .area-card { justify-content: space-between; padding: 10px 8px; }

}

/* ═══════════════════════════════════════════════════════════════════════
   A claquete, na íntegra — medida em cqw sobre caixa travada (TEMPORAL, 7)
   Extraído de css/module-clapper.css
   ═══════════════════════════════════════════════════════════════════════ */

.clapperboard-wrapper .clapper-slate { cursor: default; }

/* Barra superior da claquete: dica discreta + badge REC */
.clapper-topbar {
    position: absolute; top: 15px; left: 0; width: 100%; padding: 0 15px; z-index: 20;
    display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}

.clapper-topbar > * { pointer-events: auto; }

.clapper-hint { font-size: 0.72rem; color: var(--text-sec); opacity: 0.55; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500; pointer-events: none; }

/* Container Mestre da Claquete */
.clapper-slate-container {
    /* A LOUSA é o que precisa caber; as bandas inclinadas ficam acima dela e podem
       SANGRAR pelo topo da tela (não são cortadas na linha do menu). */
    /* Recalibrado de verdade (2026-08-22) — medido ao vivo via devtools (não só no olho):
       pra um container de 690px de largura, o conteúdo real (bandas + lousa) mede 774px
       de altura — proporção altura/largura de 1.12, bem mais "em pé" do que a fórmula
       supunha (a leva de "-5%" do dia anterior, 1.08→1.026, ainda presumia o conteúdo
       mais deitado que largo: altura ≈ largura×0.97). Daí o corte: o multiplicador
       antigo pedia uma largura maior do que cabia, sobrando pra cima e furando o topo da
       janela. Recalculado pra caber de verdade dentro da altura reservada (9rem) com uma
       folga extra: 1.026 → 0.82. */
    /* Maior + mais perto da base (2026-08-23, pedido do usuário junto com a folga do
       rodapé abaixo: "alinhar mais à base permitindo vermos a claquete maior um pouco")
       — só a reserva vertical cai (9rem → 8rem, acompanhando o corte de 1rem no padding
       inferior do wrapper, ver body[data-mod="module-claquete"] .clapperboard-wrapper
       acima); o multiplicador (0.82) fica como estava — mexer nos dois ao mesmo tempo
       (testado ao vivo) estourava o topo da lousa pra fora da tela em telas mais baixas.
       Cortado de novo pra 7rem (2026-08-26, "alinhar mais à base ainda"), mesmo pareamento
       com o padding-bottom do wrapper acima (2rem → 1rem). */
    width: min(100%, calc((100vh - 7rem) * 0.82));
    width: min(100%, calc((100dvh - 7rem) * 0.82));
    /* TETO ABSOLUTO (2026-08-28, achado ao vivo do usuário: "a claquete vertical está
       extrapolando a margem da direita"). A largura de verdade é medida em JS e escrita
       como estilo INLINE (ajustarLarguraDaLousa, js/clapper.js) — e estilo inline vence
       qualquer largura declarada aqui. Basta a medida ter sido feita numa tela mais larga
       pra sobrar um px grande demais depois: girar o aparelho de deitado pra em pé é
       exatamente isso — o valor calculado na horizontal continua aplicado até a próxima
       medida, e nesse intervalo a lousa é mais larga que a tela. Com align-items:center no
       wrapper, o que sobra vaza pro lado direito (o esquerdo fica fora do alcance da
       rolagem). max-width é a única declaração que um inline NÃO atropela: a medida pode
       errar pra mais, mas a lousa nunca passa da caixa dela. */
    max-width: 100%;
    display: flex; flex-direction: column; align-items: center;
    container-type: inline-size; cursor: default; position: relative;
}

/* Dica de cancelar o PREPARA (pedido do usuário 2026-08-23: "indicação sutil no canto
   inferior esquerdo... tocar para cancelar o preparo, assim evita erro acidentais") —
   só existe enquanto armado (ver .armado, ligada por atualizarEstadoArmado em
   clapper.js); pseudo-elemento em vez de nó HTML próprio porque é puramente
   decorativo/informativo, sem necessidade de estado ou clique nele mesmo (o clique de
   verdade é no timecode, ver #clapTimecode em clapper.js). */
.clapper-slate-container.armado::after {
    content: 'Toque no timecode para cancelar'; position: absolute; left: 4px; bottom: -1.4rem;
    font-size: 0.68rem; letter-spacing: 0.3px; color: var(--system-orange); opacity: 0.55;
    pointer-events: none; white-space: nowrap; animation: prepHintIn 0.25s ease-out;
}

@keyframes prepHintIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 0.55; transform: translateY(0); } }

/* O Bastão (Sticks) — chevrons com leve textura e profundidade. As cores da faixa
   (.chevron-strip, logo abaixo) são a paleta de referência REAL de uma claquete de
   set — preto, verde, amarelo, azul, vermelho, branco, cinzas — e por isso são
   ABSOLUTAS, em hex fixo, iguais em todo tema (pedido do usuário 2026-08-25: "termos
   as cores conforme a claquete, não conforme o tema, cores absolutas de referência de
   cor"). Antes usava só --bg-page/--text-main do tema (2 cores, mudava a cada tema —
   "válido para todas as claquetes esses ajustes", ou seja o oposto: nenhuma variação
   por tema daqui pra frente). */
.clapper-sticks {
    width: 100%; height: 9cqw; position: relative; margin-bottom: 0.6cqw; z-index: 10; cursor: pointer; transition: filter 0.2s;
}

/* A área de clique real do bastão sem isso era só o desenho fino e rotacionado dos
   dois taços — o resto do "leque" que ele abre por cima do header (a sangria, ver
   layout.css) e o respiro entre o header e a lousa caíam por baixo, no LED de
   Notificações ou em nada, dependendo de exatamente onde o dedo tocava. Este
   ::before preenche TODO o topo — do próprio bastão até acima da linha do menu —
   com a MESMA largura do container (nunca mais que isso), então o LED continua
   recebendo clique normalmente na faixa que sobra à direita, fora da lousa. Fica
   atrás dos taços de verdade (z-index 0 < 1/2 deles) e sob os controles reais do
   header (esse é 250, bem acima do container da lousa em 150) — só herda o clique
   quando não há nada mais específico por cima. */
.clapper-sticks::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: -100vh; z-index: 0;
}

@media (hover: hover) {
    .clapper-sticks:hover { filter: brightness(1.15); }

    .clapper-sticks:hover .top-stick { transform: rotate(-13deg); }

}

.stick {
    position: absolute; left: 0; width: 100%; height: 42%;
    border-radius: 1cqw; overflow: hidden;
    background: #0d0d0d;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.35);
}

/* Volta pro preto e branco (achado ao vivo 2026-08-25: "a claquete volte a forma
   anterior dela, preta e branca") — a paleta de referência de cor (verde/amarelo/
   azul/vermelho) não vingou; fica só o clássico bastão preto/branco, mesma técnica
   de sempre (repeating-linear-gradient, -45deg), só que agora em hex fixo (não
   var(--bg-page)/var(--text-main) do tema — essa parte do pedido anterior, "cores
   absolutas, iguais em todo tema", continua valendo). */
.chevron-strip {
    width: 200%; height: 100%;
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.22) 0%, transparent 35%, transparent 70%, rgba(0,0,0,0.28) 100%),
        repeating-linear-gradient(-45deg, #0d0d0d, #0d0d0d 4cqw, #f2f0ec 4cqw, #f2f0ec 8cqw);
}

/* Mesma espessura nos dois taços (achado ao vivo 2026-08-25: "as duas partes
   precisam ter a mesma espessura" — a versão anterior engrossava só o de cima e
   ficou desequilibrado); os 42% de .stick já valem pros dois por herança, não
   precisa de nada extra aqui. */
/* Repouso quase batido (achado ao vivo 2026-08-25: "a claquete deve estar com o
   topo quase batido, quando preparamos ela levanta") — -10deg lia como já
   meio aberta; -4deg é só a fresta que diz "ainda não bateu" sem já
   antecipar o gesto de preparar, que agora é quem faz o levante de verdade
   (ver .armado .top-stick, mais abaixo, e triggerClapAction/atualizarEstadoArmado
   em js/clapper.js — o "armar" já existia na lógica, só faltava o corpo levantar
   junto). */
.top-stick { top: 0; transform-origin: 1.5% 85%; transition: transform 0.14s cubic-bezier(0.34, 1.3, 0.5, 1); transform: rotate(-4deg); z-index: 2; }

.bottom-stick { bottom: 0; z-index: 1; }

/* Preparada: MESMO ângulo do hover (achado ao vivo 2026-08-25: "o levantar ficou
   muito alto, o estágio de preparo pode ser o mesmo estágio de passar o mouse
   sobre") — -26deg era exagerado; agora repete os -13deg do tease, só que
   sustentado (não passageiro) enquanto armado, mesmo sem o mouse em cima. */
.clapper-slate-container.armado .top-stick { transform: rotate(-13deg); }

.hinge {
    position: absolute; left: 0.8%; top: 50%; transform: translateY(-50%); width: 2.6cqw; height: 2.6cqw;
    background: radial-gradient(circle at 32% 30%, var(--text-main) 0%, var(--text-sec) 45%, var(--bg-page) 100%);
    border-radius: 50%; border: 0.35cqw solid var(--text-main); z-index: 3;
    box-shadow: 0 3px 8px rgba(0,0,0,0.6);
}

.clapper-slate-container.clapped .top-stick { transform: rotate(0deg); transition-duration: 0.07s; }

/* Lousa (Integração Visual Mono) */
.clapper-slate {
    width: 100%; flex: 1; background: var(--bg-panel); color: var(--text-main); 
    border: 4px solid var(--text-main); border-radius: 8px;
    display: flex; flex-direction: column; font-family: var(--font-mono);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); backdrop-filter: var(--glass-blur);
}

/* Onde cai a linha vertical da lousa — topo e faixa central usam a MESMA medida.
   Reduzido de 52.5% (pedido do usuário 2026-08-23: "o quadrante de rolo pode ser
   menor" — Rolo/Cena/Take precisam de bem menos espaço que Produção/Dir/Foto). */
.clapper-slate { --slate-split: 42%; }

@media (min-width: 851px) {
    .clapper-slate { --slate-split: 38%; }

}

@media (min-width: 701px) {
    .slate-header .slate-field,
        .clapper-slate .slate-session-full-field,
        .slate-mid .slate-crew-field { justify-content: flex-start; }

    /* Rolo é um código que se lê de longe no set — ganha corpo próprio, maior que o
           .slate-input-big genérico (pedido do usuário: "o campo preenchido de ROLO pode
           estar maior"). O da Sessão continua no tamanho de antes. */
        .slate-rolo .slate-input-big { font-size: 5.4cqw; }

}

.slate-header { border-bottom: 2px solid var(--border-color); display: flex; }

.slate-header .slate-rolo { flex: 0 0 var(--slate-split); }

.slate-header .slate-prod { flex: 1 1 auto; min-width: 0; }

.slate-grid { display: flex; flex: 1; border-bottom: 2px solid var(--border-color); }

.slate-footer { display: flex; border-bottom: 2px solid var(--border-color); text-align: left; }

.slate-field {
    padding: 2.5cqw 3.5cqw; border-right: 2px solid var(--border-color); display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start; flex: 1; text-align: left;
}

.slate-field.no-border { border-right: none; }

/* Sessão em linha cheia (2026-08-20, pedido do usuário: "quando há sessão preenchida,
   Sessão vai no lugar de produção... no topo ROLO e P ESTUDIO e SESSÃO, abaixo o
   completo") — ocupa a largura toda da lousa, abaixo do cabeçalho Rolo/Produção; a
   fonte encolhe sozinha (fitClapNum, js/clapper.js) em vez de cortar o texto. */
.slate-session-full-field { flex: 0 0 auto; border-right: none; border-bottom: 2px solid var(--border-color); }

/* Textarea, não input (ver o comentário no index.html e ajustarAlturaSessao em
   js/clapper.js). resize:none + overflow:hidden porque quem manda na altura é o JS, que
   a iguala ao conteúdo — barra de rolagem ou alça de arraste aqui seriam duas mãos
   diferentes no mesmo volante. */
.slate-session-full {
    font-size: 4.2cqw; white-space: pre-wrap; word-break: break-word;
    resize: none; overflow: hidden; line-height: 1.15; min-height: 0;
    font-family: var(--font-mono); display: block;
}

/* DIR e FOTO lado a lado, cada um em metade do espaço no horizontal (economiza altura da lousa) */
.slate-crew-field { flex: 1 1 50%; }

.slate-crew-field label { display: flex; align-items: center; gap: 3cqw; width: 100%; margin-bottom: 0; }

/* Rótulo curto na mesma linha do valor (formato em pé, lousa estreita) — o por extenso
   só existe na versão deitada, ver o bloco da lousa deitada no fim do arquivo. */
.crew-rot-longo { display: none; }

.slate-crew-field .slate-input { flex: 1; min-width: 0; }

.slate-field.full-width { border-right: none; width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; gap: 4cqw; }

.slate-field.full-width label { margin-bottom: 0; }

.slate-field label { font-size: 2cqw; font-weight: 600; text-transform: uppercase; color: var(--system-blue); margin-bottom: 1cqw; letter-spacing: 1px; }

.editable-val { font-size: 8cqw; font-weight: 700; line-height: 1; color: var(--text-main); font-family: var(--font-mono); }

/* DIR / CAM: sem pontilhado, nome preenchido em destaque */
.slate-input {
    width: 100%; background: transparent; border: none;
    font-size: 4.2cqw; font-weight: 700; font-family: var(--font-mono); outline: none;
    color: var(--text-main); text-align: left; padding-bottom: 2px; letter-spacing: 0.5px;
    transition: color 0.2s;
}

.slate-input::placeholder { font-weight: 400; opacity: 0.35; font-size: 0.75em; letter-spacing: 0; }

.slate-input:focus { color: var(--system-blue); }

/* Números grandes editáveis da lousa (Scene / Take / Prod), como no Timer */
.slate-num-input {
    width: 100%; background: transparent; border: none; outline: none;
    font-size: 8cqw; font-weight: 700; line-height: 1; color: var(--text-main); font-family: var(--font-mono);
    padding: 0; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s;
    appearance: textfield; -moz-appearance: textfield;
}

.slate-num-input::-webkit-outer-spin-button, .slate-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (hover: hover) {
    .slate-num-input:hover { border-bottom-color: var(--border-color); }

}

.slate-num-input:focus { border-bottom-color: var(--system-blue); color: var(--system-blue); }

.slate-prod-input { font-size: 5.5cqw; text-transform: uppercase; letter-spacing: 1px; }

.slate-toggles { gap: 2cqw; }

.toggle-group { display: flex; align-items: baseline; gap: 8px; font-size: 3.5cqw; font-weight: 700; font-family: var(--font-mono); }

.toggle-group span { opacity: 0.3; transition: 0.2s; cursor: pointer; }

.toggle-group span.active { opacity: 1; text-decoration: underline; color: var(--system-blue); }

.claquete-travada .toggle-group.travado { pointer-events: none; opacity: 0.5; }

/* Tudo aceso na claquete, mesmo travada (pedido do usuário 2026-08-20: "faça tudo ficar
   aceso na claquete, mesmo que valores de cascata ancestral, ficam como cena e take,
   branco luminosos") — generaliza o que antes valia só pra Scene/Take (pedido de
   2026-08-14, "fora do modo de edição é fundamental que os números da claquete sejam bem
   contrastados... lido de longe, muitas vezes sob sol direto") pro resto da lousa (rolo,
   locação, câmera/lente/stop/shutter/filtros): nenhum campo apaga quando travada, nem o
   valor digitado nem o herdado da cascata ancestral (mostrado como placeholder — não pode
   parecer diferente de um valor digitado de verdade, mesmo espírito do pedido original de
   2026-08-11 sobre ancestral). currentColor devolve o controle todo pra cor de cada tema:
   nos temas claros o texto já é escuro, então o glow sai escuro-sobre-escuro sozinho —
   "dispensa a sombra" sem precisar de regra própria por tema. Intensidade revista no
   mesmo dia (pedido do usuário: "deixar a luminância mais sutil na claquete") — 10px
   estava forte demais, caiu pra 6px, mesmo valor usado em Dr/Ft/Ar/Pr agora (ver
   .elemento-somente-leitura em module-departments.css). */
.claquete-travada .slate-input:disabled,
.claquete-travada .slate-num-input:disabled,
.claquete-travada .slate-session-sub:disabled {
    opacity: 1; cursor: not-allowed; -webkit-text-fill-color: currentColor;
    text-shadow: 0 0 6px currentColor;
}

.claquete-travada .slate-input.campo-ancestral:disabled::placeholder,
.claquete-travada .slate-num-input.campo-ancestral:disabled::placeholder {
    color: var(--text-main); opacity: 1; text-shadow: 0 0 6px currentColor;
}

/* D# (diária ativa): mesma tipografia do INT/EXT · DAY/NITE · DATE, mas informativo (não clicável) */
.slate-diaria { font-size: 3.5cqw; font-weight: 700; font-family: var(--font-mono); opacity: 0.75; cursor: default; white-space: nowrap; }

.timecode-display {
    background: #000; color: var(--system-red); font-family: var(--font-mono); font-size: 11cqw;
    text-align: center; padding: 1cqw 0; border-radius: 0 0 4px 4px; font-weight: 700; text-shadow: 0 0 15px rgba(255, 69, 58, 0.4); letter-spacing: -2px;
    transition: color 0.2s, background 0.2s, text-shadow 0.2s; cursor: default;
}

/* Verde parado · laranja em PREPARA · vermelho gravando (pedido do usuário 2026-08-23:
   fluxo de dois toques — ver `armado` em clapper.js). A cor-base acima (vermelho) some
   na prática: clapperLoop sempre aplica uma destas três a cada frame, então fica só
   como fallback antes do primeiro frame rodar. */
.timecode-display.tc-idle { color: var(--system-green); text-shadow: 0 0 15px rgba(48, 209, 88, 0.4); cursor: default; }

.timecode-display.tc-armado { color: var(--system-orange); text-shadow: 0 0 15px rgba(255, 149, 0, 0.45); cursor: pointer; }

.timecode-display.tc-rec { color: var(--system-red); text-shadow: 0 0 15px rgba(255, 69, 58, 0.4); cursor: default; }

/* Área de toque pra cancelar o preparo é o BLOCO inteiro, não só o timecode em si (ver
   clapper.js — o listener de clique já mudou de alvo; isto só faz o cursor acompanhar,
   pra quem usa mouse ver que ali também cancela). */
.clapper-slate-container.armado .timecode-block { cursor: pointer; }

/* Congelamento pós-batida: destaca o timecode exato do CLAP pelo tempo configurado no Projeto */
.timecode-display.frozen {
    background: var(--system-red); color: #FFFFFF;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    animation: tcFreezeIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1), tcFreezePulse 0.8s 0.35s infinite alternate;
}

@keyframes tcFreezeIn { 0% { transform: scale(1.08); } 100% { transform: scale(1); } }

@keyframes tcFreezePulse {
    from { box-shadow: 0 0 15px rgba(255, 69, 58, 0.5); }
    to   { box-shadow: 0 0 40px rgba(255, 69, 58, 1); }
}

/* Badge REC — Sessão de Gravação ativa (clicar = CORTA) */
.rec-badge {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-weight: 700; letter-spacing: 2px; font-size: 0.85rem;
    color: var(--text-sec); border: 1px solid var(--border-color);
    background: transparent; padding: 6px 16px; border-radius: 999px;
    opacity: 0.45; cursor: default; transition: 0.25s; user-select: none;
}

.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-sec); transition: 0.25s; }

.rec-badge.on {
    opacity: 1; cursor: pointer; color: var(--system-red); border-color: var(--system-red);
    animation: recBlink 1s infinite alternate;
}

.rec-badge.on .rec-dot { background: var(--system-red); box-shadow: 0 0 8px rgba(255, 69, 58, 0.9); }

@media (hover: hover) {
    .rec-badge.on:hover { background: var(--system-red); color: #FFF; }

    .rec-badge.on:hover .rec-dot { background: #FFF; }

}

@keyframes recBlink {
    from { box-shadow: 0 0 8px rgba(255, 69, 58, 0.4); }
    to   { box-shadow: 0 0 25px rgba(255, 69, 58, 0.95); }
}

/* fps do projeto no topo da lousa, ao lado do Arquivo */
/* Terceira linha do Rolo (2026-08-28) — irmã do valor, não mais um pedaço do rótulo.
   Copia o desenho de .slate-loc-sub (a Locação embaixo da Produção): mesma família mono,
   mesmo peso, mesma discrição. Duas células, mesma anatomia — rótulo, valor, complemento. */
.slate-fps {
    display: block; width: 100%; margin-top: 1cqw; margin-left: 0;
    color: var(--text-sec); opacity: 0.85; font-family: var(--font-mono); font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase; font-size: 2.3cqw;
}

/* Célula de informações: DATE + INT/EXT + DAY/NITE + CAM/LENS (espelham a Fotografia) */
.slate-info-cell { display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; }

/* Colunas invisíveis: os itens (INT/EXT · DAY/NITE · DATE / CAM · LENS · FILT / STOP · SHUT) alinham em 3 colunas.
   A 3ª coluna (DATE) ganha mais espaço que as outras duas — sobrava vazio à direita. */
.slate-info-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); align-items: center; gap: 1.4cqw 3cqw; }

/* 5ª coluna estreita pro E (Modo Editor) — sempre o último elemento da linha, mesma
   regra de posição do resto do app (ver #clapMeToggle). */
.slate-info-top { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.5fr); }

.slate-mini-label { font-size: 1.8cqw !important; margin-bottom: 0 !important; display: flex; align-items: center; gap: 1cqw; min-width: 0; }

.slate-mini-label .slate-input-sm { flex: 1; min-width: 0; width: auto; }

.slate-lens-label .slate-lens-input { flex: 0 0 auto; width: 5.5cqw; }

/* DATE ocupa a coluna toda e se encosta na borda direita, usando o espaço que sobrava */
.slate-date-inline { justify-content: flex-end; }

.slate-date { font-weight: 700; font-size: 3.5cqw; font-family: var(--font-mono); display: flex; align-items: baseline; }

.slate-input-sm { font-size: 2.6cqw; width: 9cqw; padding-bottom: 0; }

.slate-cam-row { gap: 4cqw; }

/* STOP/SHUT ganham mais espaço, HFR reduz (pedido do usuário 2026-08-20: "aumentar o
   espaço do campo do F/T STOP, hfr pode reduzir, aumentar o shutter também") — mesma
   linha de CAM/LENS/FILT em cima continua com a proporção padrão do .slate-info-row
   (1fr/1fr/1.6fr); só esta (o HFR, terceira coluna, era quem ficava com a fatia maior). */
.slate-stop-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.7fr); }

@media (max-width: 700px) {
    .clapper-slate-container { width: 100%; }

    .clapper-sticks { height: 12cqw; }

    .slate-header, .slate-grid, .slate-footer { flex-direction: column; }

    .slate-field { border-right: none; border-bottom: 2px solid var(--border-color); padding: 3cqw 4cqw; width: 100%; }

    /* Empilhado, cada célula tem a altura do SEU conteúdo. Com flex:1 todas ficavam
           do mesmo tamanho e o que sobrava (locação, nome da sessão) vazava para a linha
           de baixo, caindo em cima de SCENE/TAKE. */
        .slate-header .slate-field, .slate-header .slate-rolo, .slate-header .slate-prod { flex: 0 0 auto; }

    .slate-grid .slate-field:last-child, .slate-header .slate-field:last-child, .slate-footer .slate-field:last-child { border-bottom: none; }

    /* Vertical: DIR e FOTO empilhados na mesma coluna */
        .slate-crew-field { flex: 1 1 100%; }

    .slate-grid { flex-direction: row; flex-wrap: wrap; }

    .slate-grid .slate-field { flex: 1 1 40%; border-bottom: none; }

    .slate-grid .slate-info-cell { flex: 1 1 100%; border-top: 2px solid var(--border-color); }

    .slate-num-input { font-size: 12cqw; }

    /* Textos menores no layout pequeno para caber mais caracteres; inputs preenchem a coluna */
        .slate-input-sm { font-size: 3.3cqw; width: auto; }

    .slate-mini-label { font-size: 2.6cqw !important; gap: 1.4cqw; }

    .slate-info-row { gap: 2.4cqw 3cqw; }

    .slate-lens-label .slate-lens-input { width: 9cqw; }

    .slate-date { font-size: 2.8cqw; }

    .slate-fps { font-size: 2.8cqw; }

    .slate-field label { font-size: 3cqw; }

    .slate-input { font-size: 5.5cqw; }

    .slate-loc-sub { font-size: 3.2cqw; }

    .slate-diaria { font-size: 4.4cqw; }

    /* Linha do dia (pedido do usuário 2026-08-20: "aproximar um pouco INT/EXT, espaçar
           DAY/NITE, espaçar da data, diminuir a fonte de INT/EXT DAY/NITE do tamanho do
           dia") — INT/EXT e DAY/NITE tinham fonte MAIOR que a data (4.4cqw vs 2.8cqw), o
           oposto do pedido; caem pro mesmo 2.8cqw da data. Gap interno menor (INT mais perto
           de EXT) + margem entre os dois toggles e entre eles e a data, no lugar do gap
           uniforme do grid (.slate-info-top), que não dá pra variar por par de coluna. */
        .toggle-group { font-size: 2.8cqw; gap: 5px; }

    .slate-date-inline { margin-left: 2cqw; }

    .timecode-display { font-size: 12cqw; }

    .rec-elapsed { font-size: 4.4cqw; }

    /* Sessão mais larga no vertical (pedido do usuário 2026-08-20: "aumentar, no iphone a
           largura da Sessão, pode estar logo após o rolo") — continua do lado do Rolo (mesma
           .slate-rolo-sessao-row de sempre, ver 2026-08-16 acima), só que o Rolo (valor curto
           na prática, tipo "A001_C001") deixa de disputar espaço igual com flex:auto — trava
           num terço da linha, o resto (~2/3) vai todo pra Sessão. */
        .slate-rolo-sessao-row #clapCamFile { flex: 0 1 34%; }

    .slate-rolo-sessao-row .slate-session-sub { flex: 1 1 auto; }

}

/* === Faixa central: CENA/TAKE à ESQUERDA, DIR/FOTO à DIREITA (mantém lado a lado no vertical) === */
/* A linha vertical que separa as duas colunas é a MESMA do topo (ROLO | PRODUÇÃO):
   mesma proporção e a borda sempre do lado esquerdo, para as duas coincidirem no pixel. */
.slate-mid { display: flex; border-bottom: 2px solid var(--border-color); }

.slate-scene-take { display: flex; flex: 0 0 var(--slate-split); border-right: 2px solid var(--border-color); }

.slate-scene-take .slate-field { border-right: 2px solid var(--border-color); border-bottom: none; }

.slate-scene-take .slate-field.no-border { border-right: none; }

.slate-mid .slate-crew { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.slate-mid .slate-crew-field { flex: 1 1 auto; border-right: none; border-bottom: 2px solid var(--border-color); padding: 2cqw 3.5cqw; }

.slate-mid .slate-crew-field.no-border { border-bottom: none; }

/* HFR no topo, ao lado do fps (mesmo padrão do fps) */
.slate-rolo > label { display: flex; align-items: center; flex-wrap: wrap; width: 100%; }

/* HFR na linha de foto: apagado quando desativado (vazio) — acende ao preencher; travado pelo Projeto fica fixo */
.slate-hfr-label { transition: opacity 0.2s; }

.slate-hfr-label:has(#clapHfr:placeholder-shown) { opacity: 0.35; }

/* PRODUÇÃO: título do projeto + SESSÃO (preenchida no Timer) como subtítulo menor */
.slate-prod { justify-content: center; }

/* Rolo + "S" + Sessão numa linha só (pedido do usuário 2026-08-16) — Sessão reusa as
   MESMAS classes de corpo do Rolo (.slate-input/.slate-input-big, ver mais abaixo), só o
   flex:1/min-width:0 aqui é próprio dela (o Rolo é um código curto, a Sessão pode ser um
   nome mais comprido e ganha o espaço que sobrar). */
/* align-items:center (não mais baseline/flex-end, ver comentário embaixo) */
.slate-rolo-sessao-row { display: flex; align-items: center; gap: 1.5cqw; width: 100%; }

.slate-rolo-sessao-row #clapCamFile { flex: 0 1 auto; min-width: 0; }

.slate-rolo-sessao-row .slate-session-sub { flex: 1 1 auto; min-width: 0; }

/* O "S" que existia aqui (aceno de que existe uma Sessão) nunca alinhava direito com o
   Rolo em nenhum tamanho de tela testado, mesmo depois de duas tentativas de conserto
   (2026-08-23/24) — removido de vez (pedido do usuário 2026-08-24: "não precisa desse
   'S' que está no rolo"). O elemento (.slate-rolo-sep) saiu do HTML também. */
/* Corpo da Sessão: era um subtítulo pequeno/apagado (.slate-session-sub sozinha); agora
   herda o mesmo peso/tamanho do Rolo via .slate-input.slate-input-big no HTML — aqui só
   sobra o comportamento PRÓPRIO dela (o sublinhado que acende no hover/foco). */
.slate-session-sub { border-bottom: 1px solid transparent; }

@media (hover: hover) {
    .slate-session-sub:hover { border-bottom-color: var(--border-color); }

}

.slate-session-sub:focus { border-bottom-color: var(--system-blue); }

/* LOCAÇÃO abaixo do ROLO — mesmo padrão do nome da sessão, e editável na própria lousa */
.slate-loc-sub { display: block; width: 100%; background: transparent; border: none; border-bottom: 1px solid transparent; outline: none; padding: 0;
    font-size: 2.3cqw; color: var(--text-sec); letter-spacing: 0.5px; margin-top: 1cqw; font-family: var(--font-mono); font-weight: 600; opacity: 0.85; text-transform: uppercase; transition: border-color 0.2s, color 0.2s; }

.slate-loc-sub:focus { border-bottom-color: var(--system-blue); color: var(--text-main); }

.slate-loc-sub::placeholder { color: var(--system-red); opacity: 0.8; }

/* mm colado ao número da lente */
.slate-lens-label { gap: 0.4cqw; }

.slate-lens-input { width: 6.5cqw; }

.slate-lens-label .slate-unit { margin-left: 0.2cqw; }

.slate-info-full { width: 100%; }

.slate-date-inline { gap: 1.5cqw; }

/* Campo Arquivo da Câmera na lousa */
/* Iluminados (pedido do usuário 2026-08-16: "vamos iluminar rolo e sessão") — mesmo
   glow por tema já usado em campos de destaque no resto do app (--shadow-glow, ver
   .session-title-input em layout.css), aqui nos dois juntos por dividirem esta classe. */
.slate-input-big { font-size: 4.5cqw; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 0 10px var(--shadow-glow); }

/* ===== CAIXA ALTA NA LOUSA (2026-08-28, pedido do usuário: "caixa alta para os campos
   preenchidos de diretor e fotógrafo na Claquete, bem como sessão, locação, rolo,
   produção, apenas na claquete") =====
   Rolo, Produção e Locação já eram (cada um pelo próprio estilo, acima); faltavam
   Diretor, Fotógrafo e Sessão. Reunidos aqui num lugar só pra a regra ficar explícita e
   não voltar a se perder um campo de cada vez.
   É só APRESENTAÇÃO: text-transform não toca no valor gravado — o nome continua "Vitor
   Roque" no projeto, na Ordem do Dia, no PDF e no Histórico. E o escopo é .clapper-slate,
   ou seja, vale dentro da lousa e em lugar nenhum mais do app ("apenas na claquete").
   O placeholder fica de fora de propósito: ele é instrução ("Diretor", "—"), não dado —
   mantendo a caixa natural, dá pra ver de relance o que está preenchido e o que não. */
.clapper-slate #clapDirector,
.clapper-slate #clapCam,
.clapper-slate #clapSessionSub,
.clapper-slate #clapCamFile,
.clapper-slate #clapSession,
.clapper-slate #clapLocacao { text-transform: uppercase; }

.clapper-slate #clapDirector::placeholder,
.clapper-slate #clapCam::placeholder,
.clapper-slate #clapSessionSub::placeholder,
.clapper-slate #clapCamFile::placeholder,
.clapper-slate #clapLocacao::placeholder { text-transform: none; }

/* --- Lote 4: unidade mm, linha timecode+REC, sem topbar --- */
.slate-unit { font-size: 2cqw; opacity: 0.6; margin-left: 0.5cqw; font-family: var(--font-mono); }

.timecode-row { display: flex; align-items: stretch; gap: 0; }

.timecode-row .timecode-block { flex: 1; display: flex; flex-direction: column; background: #000; border-radius: 0 0 0 4px; overflow: hidden; }

.timecode-row .timecode-block .timecode-display { border-radius: 0; padding-bottom: 0; }

/* Tempo RODANDO (desde a batida): menor, na cor base — o vermelho é do timecode do set */
.rec-elapsed { font-family: var(--font-mono); font-size: 3.4cqw; font-weight: 700; letter-spacing: 1px; text-align: center; color: var(--text-sec); padding: 0.2cqw 0 1.2cqw; opacity: 0.55; transition: color 0.25s, opacity 0.25s; }

.rec-elapsed.on { color: var(--text-main); opacity: 1; }

/* Proporção do HFR ao lado do número (2× quando gravando a 48 numa base de 24) */
.rec-elapsed[data-hfr]:not([data-hfr=""])::after { content: ' ' attr(data-hfr); font-size: 0.72em; opacity: 0.7; letter-spacing: 0; }

/* A batida acende o bloco inteiro: os dois timecodes no mesmo vermelho */
.timecode-block.frozen { background: var(--system-red); }

.timecode-block.frozen .rec-elapsed { color: #FFFFFF; opacity: 1; }

.rec-badge-tc {
    position: static; opacity: 1; border-radius: 0 0 4px 0; border: none; border-left: 2px solid var(--border-color);
    background: #000; color: var(--system-red); padding: 0 4cqw; font-size: 3.4cqw; display: flex; align-items: center; gap: 2cqw;
    cursor: pointer;
}

.rec-badge-tc .rec-dot { width: 2.4cqw; height: 2.4cqw; }

.rec-badge-tc.on { background: var(--system-red); color: #fff; animation: recBlink 1s infinite alternate; }

.rec-badge-tc.on .rec-dot { background: #fff; }

@media (min-width: 640px) and (min-aspect-ratio: 5/4) {
    /* 24 colunas, não 12 (2026-08-28, pedido do usuário: "o ROLO pode ocupar uma área
           menor" + "o campo da SESSÃO precisa ser maior"). Com 12 só dava pra dividir a lousa
           em terços; com 24 o cabeçalho vira 6/8/10 — o Rolo cai de 33% pra 25%, a Produção
           fica com 33% e a Sessão sobe pra 42%, que é onde mora o nome comprido. A faixa
           central usa os MESMOS cortes (3+3 | 8 | 10), então as duas linhas verticais seguem
           coincidindo no pixel, em 6/24 e 14/24 — mesmo princípio do --slate-split. */
        .clapper-slate {
            display: grid;
            grid-template-columns: repeat(24, minmax(0, 1fr));
            align-content: stretch;
        }

    /* Deixam de ser caixa: os filhos viram células da grade da lousa */
        .slate-header, .slate-mid, .slate-scene-take, .slate-mid .slate-crew { display: contents; }

    /* Linha 1 — ROLO | PRODUÇÃO | SESSÃO */
        .slate-header .slate-rolo { grid-column: span 6; }

    .slate-header .slate-prod { grid-column: span 8; }

    .slate-session-full-field { grid-column: span 10; }

    /* Linha 2 — CENA | TAKE | DIRETOR | FOTÓGRAFO (cortes iguais aos de cima) */
        .slate-scene-take > .slate-field { grid-column: span 3; padding-left: 2cqw; padding-right: 2cqw; }

    .slate-mid .slate-crew-field { grid-column: span 8; }

    .slate-mid .slate-crew-field.no-border { grid-column: span 10; }

    /* Linhas cheias */
        .slate-grid, .timecode-row { grid-column: 1 / -1; }

    /* Bordas: cada célula fecha por baixo; a linha vertical some só na última coluna
           de cada linha (as classes .no-border do HTML valem pro formato em pé, onde a
           ordem das células é outra — aqui quem é "último" mudou). */
        .slate-header .slate-rolo, .slate-header .slate-prod, .slate-session-full-field,
        .slate-scene-take > .slate-field, .slate-mid .slate-crew-field {
            border-bottom: 2px solid var(--border-color);
            border-right: 2px solid var(--border-color);
        }

    .slate-session-full-field, .slate-mid .slate-crew-field.no-border { border-right: none; }

    /* O fio entre TAKE e DIRETOR (2026-08-28, achado do usuário: "falta uma linha
           dividindo take e diretor"). O TAKE carrega .no-border porque no formato EM PÉ ele é
           a última célula do par Cena|Take; deitado ele passou a ter o Diretor à direita — e
           `.slate-scene-take .slate-field.no-border` (três classes, no bloco em pé) vencia por
           especificidade a regra de borda logo acima, que tem duas. Esta empata em peso e vem
           depois no arquivo: é o fio que fecha a coluna, igual aos outros dois. */
        .slate-scene-take > .slate-field.no-border { border-right: 2px solid var(--border-color); }

    /* FOTO é a última célula da linha 2: no formato em pé ela é a de BAIXO (e por isso
           .slate-mid .slate-crew-field.no-border tira a borda inferior lá em cima, regra mais
           específica que a desta linha) — deitada ela é a da DIREITA, e o fio de baixo dela é
           o que fecha a linha inteira. */
        .slate-mid .slate-crew-field.no-border { border-bottom: 2px solid var(--border-color); }

    /* A SESSÃO em linha cheia era uma faixa baixa; no cabeçalho ela é uma célula igual
           às outras duas, com o mesmo respiro interno. */
        .slate-session-full-field { padding: 2.5cqw 3.5cqw; }

    .slate-mid .slate-crew-field { padding: 2.5cqw 3.5cqw; }

    /* DIRETOR e FOTÓGRAFO com o rótulo EM CIMA e o nome embaixo (pedido do usuário
           2026-08-28) — deitada sobra largura, então o campo passa a ler como os outros da
           lousa (ROLO, PRODUÇÃO, SESSÃO, CENA, TAKE: rótulo pequeno em cima, valor grande
           embaixo) em vez de ser o único com rótulo colado ao lado. O rótulo também deixa de
           ser abreviação: no espaço que existe aqui, "DIRETOR" cabe por extenso. */
        .slate-mid .slate-crew-field label { flex-direction: column; align-items: flex-start; gap: 0.7cqw; }

    .slate-mid .slate-crew-field .crew-rot-curto { display: none; }

    .slate-mid .slate-crew-field .crew-rot-longo { display: block; }

    /* Mesma tipografia dos outros rótulos da lousa (.slate-field label) — é o mesmo nível
           de informação, então tem que ser a mesma voz. */
        .slate-mid .slate-crew-field .crew-rot {
            font-size: 1.5cqw; font-weight: 600; text-transform: uppercase;
            color: var(--system-blue); letter-spacing: 1px;
        }

    /* Linha de câmera: os seis campos numa fileira só. As proporções são as mesmas que
           as duas linhas já tinham (ver .slate-info-row/.slate-stop-row acima): STOP e SHUT
           largos, HFR estreito — pedido do usuário 2026-08-20, continua valendo. */
        .slate-info-cell {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
            align-content: center; gap: 2cqw 3cqw;
        }

    .slate-info-cell .slate-info-top { grid-column: 1 / -1; }

    .slate-info-cell .slate-cam-row { display: contents; }

    /* Deitada a lousa é bem mais larga, então cada cqw vale mais pixel: os corpos que
           eram calibrados pro formato em pé ficariam gigantes. Só a ESCALA muda aqui — a
           hierarquia tipográfica (o que é grande, o que é pequeno) segue idêntica. */
        .slate-num-input { font-size: 6.5cqw; }

    .slate-prod-input { font-size: 4.2cqw; }

    .slate-input-big { font-size: 3.4cqw; }

    /* Deitada a lousa é bem mais larga: o mesmo cqw vale mais pixel, então o Rolo cresce
           menos que no formato em pé — continua o maior dos três, sem estourar a coluna. */
        .slate-rolo .slate-input-big { font-size: 4.3cqw; }

    .slate-input { font-size: 3.2cqw; }

    /* A Sessão é o nome pelo qual a cena é chamada no set: ganhou a coluna mais larga
           (10/24) e ganha também o maior corpo depois dos números — cresce e QUEBRA em vez de
           encolher (pedido do usuário 2026-08-28, ver ajustarAlturaSessao em js/clapper.js).
           DEPOIS de .slate-input de propósito: as duas regras têm uma classe cada, então quem
           vem por último é quem vale — declarada antes, a Sessão perdia pro 3.2cqw genérico. */
        .slate-session-full { font-size: 4cqw; }

    .slate-field label { font-size: 1.5cqw; margin-bottom: 0.7cqw; }

    .slate-mini-label { font-size: 1.5cqw !important; }

    .slate-input-sm { font-size: 2.1cqw; }

    .slate-lens-label .slate-lens-input { width: 4.5cqw; }

    .slate-loc-sub, .slate-fps { font-size: 1.8cqw; }

    .toggle-group, .slate-date, .slate-diaria { font-size: 2.6cqw; }

    .timecode-display { font-size: 8.5cqw; }

    .rec-elapsed { font-size: 2.6cqw; }

    .rec-badge-tc { font-size: 2.6cqw; }

    .rec-badge-tc .rec-dot { width: 1.8cqw; height: 1.8cqw; }

    .clapper-sticks { height: 7cqw; }

}

@media (max-height: 500px) and (min-aspect-ratio: 3/2) {
    /* O bastão é o alvo de toque de bater — continua generoso, mas proporcionalmente mais
           fino: numa tela baixa ele competia com a lousa pelo mesmo espaço vertical. */
        .clapper-sticks { height: 5.5cqw; margin-bottom: 0.5cqw; }

    /* Miolo um pouco mais apertado: com a lousa maior, o mesmo cqw rende mais pixel, e o
           que faltava era ar entre as linhas, não corpo de letra. */
        .slate-field { padding-top: 1.8cqw; padding-bottom: 1.8cqw; }

    .slate-mid .slate-crew-field, .slate-session-full-field { padding-top: 1.8cqw; padding-bottom: 1.8cqw; }

    .slate-info-cell { gap: 1.4cqw; }

    /* O timecode é o que se lê de longe numa claquete — ganha o resto do espaço. */
        .timecode-display { font-size: 9.5cqw; }

}

/* ═══════════════════════════════════════════════════════════════════════
   Tt — mostrador analógico, clusters digitais e controles do cronômetro
   Extraído de css/module-timer.css
   ═══════════════════════════════════════════════════════════════════════ */

/* css/module-timer.css — mostrador analógico, clusters digitais, controles do cronômetro */

/* ===== ANALÓGICO E CLUSTERS ===== */
.analog-wrapper { position: relative; width: 100%; max-width: min(var(--analog-size), 55vh); aspect-ratio: 1/1; margin-bottom: 1.5rem; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.2) 100%); background-color: var(--bg-panel); backdrop-filter: var(--glass-blur); box-shadow: 0 30px 60px rgba(0,0,0,0.2), inset 0 0 0 1px var(--border-color), inset 0 0 20px rgba(0,0,0,0.5); touch-action: none; transition: max-width 0.3s ease; container-type: inline-size; }

body.apple-light .analog-wrapper { box-shadow: 0 30px 60px rgba(0,0,0,0.1), inset 0 0 0 1px var(--border-color); background: #ffffff; }

/* O inset escuro padrão (0 0 20px rgba(0,0,0,0.5) acima) supõe um mostrador ESCURO —
   aqui ele viraria uma mancha escura dentro do disco de papel. Troca por uma sombra
   quente por fora (o disco descansando sobre a mesa) e um fio de luz por dentro (a
   borda do papel pegando luz) — volume, não breu. */
body.theme-papelao .analog-wrapper { box-shadow: 0 20px 44px rgba(60,35,20,0.22), inset 0 0 0 1px var(--border-color), inset 0 1px 0 rgba(255,255,255,0.35); }

.clock-modern .analog-wrapper { font-family: var(--font-ui); }

.clock-papelao .analog-wrapper { font-family: var(--font-ui); }

.clock-classic .analog-wrapper { font-family: 'Lora', serif; background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.4) 100%), var(--bg-panel); }

.clock-cyberpunk .analog-wrapper { font-family: var(--font-mono); border: 2px solid rgba(0, 240, 255, 0.75); box-shadow: 0 0 34px rgba(0, 240, 255, 0.22), inset 0 0 26px rgba(255, 0, 60, 0.16); background-color: #050510; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 20 0 L 0 0 0 20' fill='none' stroke='rgba(0, 240, 255, 0.08)' stroke-width='1'/%3E%3C/svg%3E"); }

.clock-cyberpunk .hand-sec { background: #FF003C; box-shadow: 0 0 12px #FF003C; }

.clock-cyberpunk .center-axis { background: #00F0FF; border: 2px solid #FF003C; box-shadow: 0 0 15px #00F0FF; }

.clock-cinema .analog-wrapper { font-family: var(--font-mono); border: 2px solid rgba(255,255,255,0.2); }

/* No HUD (layout vertical) o relógio recebia uma sombra escura genérica que apagava o
   brilho do tema e ficava marcada na borda do painel — parecia cortada. Os relógios com
   luz própria mantêm a SUA aqui também. */
body.clock-cyberpunk .main-wrapper.layout-vertical .analog-wrapper {
    border: 2px solid rgba(0, 240, 255, 0.75);
    box-shadow: 0 0 26px rgba(0, 240, 255, 0.4), inset 0 0 20px rgba(255, 0, 60, 0.16);
}

body.clock-cinema .main-wrapper.layout-vertical .analog-wrapper {
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 22px rgba(207, 228, 249, 0.22), inset 0 0 18px rgba(0,0,0,0.5);
}

.clock-titanium .analog-wrapper { background: linear-gradient(135deg, #7b828b 0%, #30343a 100%); background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-1,1 l2,-2 M0,8 l8,-8 M7,9 l2,-2' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E"), linear-gradient(135deg, #7b828b 0%, #30343a 100%); border: 4px solid #2a2d32; box-shadow: inset 0 0 3px rgba(255,255,255,0.5), 0 20px 40px rgba(0,0,0,0.6); font-family: var(--font-ui); }

.clock-titanium .analog-face::before { content: ''; position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; border-radius: 50%; background: radial-gradient(circle at center, #354458 0%, #171b22 100%); box-shadow: inset 0 0 15px rgba(0,0,0,0.9), 0 0 0 2px rgba(255,255,255,0.1); z-index: 1; pointer-events: none; }

.clock-titanium .analog-face::after { content: ''; position: absolute; top: 1%; left: 10%; width: 80%; height: 45%; border-radius: 50% 50% 20% 20% / 100% 100% 30% 30%; background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, transparent 100%); z-index: 20; pointer-events: none; }

.clock-titanium .numeral { color: #c4cbd4 !important; text-shadow: 0px 1px 2px #000, 0px -1px 1px rgba(255,255,255,0.3); font-weight: 300; }

.clock-titanium .numeral.quarter { font-size: 7.5cqw; font-weight: 400; }

.clock-titanium .hand-sec { background: linear-gradient(to right, #8a929e 0%, #ffffff 50%, #5c626b 100%); width: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.8), inset 0 0 2px rgba(255,255,255,0.9); border-radius: 4px;}

.clock-titanium .hand-sec::after { background: linear-gradient(to right, #5c626b 0%, #ffffff 50%, #8a929e 100%); box-shadow: inset 0 0 2px rgba(255,255,255,0.4); }

.clock-titanium .center-axis { background: radial-gradient(circle at 30% 30%, #ffffff 0%, #aab2bd 40%, #1e2024 100%); border: 1px solid #5c626b; box-shadow: 0 4px 8px rgba(0,0,0,0.8); width: 16px; height: 16px; }

.clock-atlantic .analog-wrapper { background: linear-gradient(135deg, #1b2e20 0%, #0a110a 100%); border: 4px solid #2e4a34; box-shadow: inset 0 0 10px rgba(105, 240, 174, 0.2), 0 20px 40px rgba(0,0,0,0.8); font-family: 'Inter', sans-serif; }

.clock-atlantic .analog-face::before { content: ''; position: absolute; top: 4%; left: 4%; width: 92%; height: 92%; border-radius: 50%; background: radial-gradient(circle at center, #233c28 0%, #0d170f 100%); box-shadow: inset 0 0 15px rgba(0,0,0,0.9), 0 0 0 1px rgba(105,240,174,0.15); z-index: 1; pointer-events: none; }

.clock-atlantic .analog-face::after { content: ''; position: absolute; top: 2%; left: 15%; width: 70%; height: 40%; border-radius: 50% 50% 20% 20% / 100% 100% 30% 30%; background: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 100%); z-index: 20; pointer-events: none; }

.clock-atlantic .numeral { color: #c8e6c9 !important; font-weight: 500; text-shadow: 0px 2px 4px rgba(0,0,0,0.8); }

.clock-atlantic .numeral.quarter { font-size: 8cqw; font-weight: 600; color: #69f0ae !important;}

.clock-atlantic .hand-sec { background: linear-gradient(to right, #ff5252 0%, #ff8a80 50%, #ff5252 100%); width: 3px; box-shadow: 0 4px 8px rgba(0,0,0,0.6); }

.clock-atlantic .hand-sec::after { background: #ff5252; }

.clock-atlantic .center-axis { background: #ff5252; border: 2px solid #ffea00; width: 12px; height: 12px; box-shadow: 0 0 10px rgba(255,234,0,0.4); }

.clock-ocean .analog-wrapper { background: linear-gradient(135deg, #023e8a 0%, #001233 100%); border: 4px solid #002855; box-shadow: inset 0 0 20px rgba(0, 180, 216, 0.2), 0 20px 40px rgba(0,0,0,0.8); font-family: var(--font-ui); }

.clock-ocean .analog-face::before { content: ''; position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; border-radius: 50%; background: radial-gradient(circle at center, #0077b6 0%, #03045e 100%); box-shadow: inset 0 0 15px rgba(0,0,0,0.9), 0 0 0 2px rgba(0,180,216,0.1); z-index: 1; pointer-events: none; }

.clock-ocean .analog-face::after { content: ''; position: absolute; top: 2%; left: 15%; width: 70%; height: 40%; border-radius: 50% 50% 20% 20% / 100% 100% 30% 30%; background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, transparent 100%); z-index: 20; pointer-events: none; }

.clock-ocean .numeral { color: #caf0f8 !important; text-shadow: 0px 2px 4px rgba(0,0,0,0.8); font-weight: 500;}

.clock-ocean .numeral.quarter { font-size: 8cqw; font-weight: 700; color: #00b4d8 !important;}

.clock-ocean .hand-sec { background: linear-gradient(to right, #00b4d8 0%, #90e0ef 50%, #00b4d8 100%); width: 3px; box-shadow: 0 4px 8px rgba(0,0,0,0.6); }

.clock-ocean .hand-sec::after { background: #00b4d8; }

.clock-ocean .center-axis { background: #00b4d8; border: 2px solid #caf0f8; width: 12px; height: 12px; box-shadow: 0 0 10px rgba(0,180,216,0.5); }

.clock-ocean .tick::after { background-color: rgba(144,224,239,0.3); }

.clock-ocean .tick.major::after { background-color: rgba(144,224,239,0.7); }

.clock-ocean .tick.quarter::after { background-color: #00b4d8; box-shadow: 0 0 4px rgba(0,180,216,0.6); }

.clock-summer .analog-wrapper { background: radial-gradient(circle at 50% 110%, #ffdf80 0%, #ff8c66 40%, #c42d5f 70%, #2b0a3d 100%); border: 4px solid #ff5e7e; box-shadow: inset 0 0 30px rgba(255,223,128,0.3), 0 20px 40px rgba(0,0,0,0.6); font-family: var(--font-ui); }

.clock-summer .analog-face::before { content:''; position:absolute; top:4%; left:4%; width:92%; height:92%; border-radius:50%; background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 100%); box-shadow: inset 0 0 20px rgba(255, 140, 102, 0.4); z-index:1; pointer-events: none;}

.clock-summer .analog-face::after { content: ''; position: absolute; top: 1%; left: 10%; width: 80%; height: 45%; border-radius: 50% 50% 20% 20% / 100% 100% 30% 30%; background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, transparent 100%); z-index: 20; pointer-events: none; }

.clock-summer .numeral { color: #ffeecc !important; font-weight: 500; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

.clock-summer .numeral.quarter { font-size: 8.5cqw; color: #ffdf80 !important; font-weight: 700; text-shadow: 0 0 10px rgba(255, 140, 102, 0.6); }

.clock-summer .hand-sec { background: linear-gradient(to bottom, #ffdf80, #ff8c66); width: 3px; box-shadow: 0 4px 8px rgba(0,0,0,0.5); z-index: 10;}

.clock-summer .hand-sec::after { background: #ff8c66; }

.clock-summer .center-axis { background: #ffdf80; border: 2px solid #ff5e7e; box-shadow: 0 2px 8px rgba(0,0,0,0.6); width: 14px; height: 14px; z-index: 11;}

.clock-summer .tick::after { background-color: rgba(255, 238, 204, 0.3); }

.clock-summer .tick.major::after { background-color: rgba(255, 238, 204, 0.7); box-shadow: 0 1px 2px rgba(0,0,0,0.5); }

.clock-summer .tick.quarter::after { background-color: #ffdf80; box-shadow: 0 0 5px rgba(255, 223, 128, 0.6);}

.clock-estrela .analog-wrapper { background-color: #E50000; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"), radial-gradient(circle at 40% 40%, #FF3333 0%, #A00000 60%, #300000 100%); border: 3px solid #0a0a0a; font-family: var(--font-ui); box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 0 40px rgba(0,0,0,0.8); }

.clock-estrela .analog-face::before { content: '★'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.15); font-size: 22cqw; z-index: 1; line-height: 1; text-shadow: none; background: none; pointer-events: none;}

.clock-estrela .numeral { color: rgba(255,255,255,0.85) !important; font-weight: 500; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }

.clock-estrela .numeral.quarter { font-size: 8.5cqw; color: #FFD60A !important; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,0.8);}

.clock-estrela .hand-sec { background: linear-gradient(to top, #FFFFFF, #FFD60A); width: 3px; box-shadow: 0 4px 10px rgba(0,0,0,0.7); z-index: 10;}

.clock-estrela .hand-sec::after { background: #FFFFFF; }

.clock-estrela .center-axis { background: #FFD60A; border: 2px solid #000000; width: 14px; height: 14px; z-index: 11; box-shadow: 0 2px 8px rgba(0,0,0,0.6);}

.clock-estrela .tick::after { background-color: rgba(255,255,255,0.3); }

.clock-estrela .tick.major::after { background-color: rgba(255,255,255,0.7); }

.clock-estrela .tick.quarter::after { background-color: #FFD60A; box-shadow: 0 0 6px rgba(255, 214, 10, 0.4);}

.clock-brasil .analog-wrapper { background: linear-gradient(135deg, #002266 0%, #000B22 100%); border: 2px solid rgba(255,255,255,0.05); font-family: var(--font-ui); box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 40px rgba(0,0,0,0.8); }

.clock-brasil .analog-face::before { content: ''; position: absolute; top: 2%; left: 15%; width: 70%; height: 40%; border-radius: 50% 50% 20% 20% / 100% 100% 30% 30%; background: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 100%); z-index: 20; pointer-events: none; }

.clock-brasil .numeral { color: rgba(255,255,255,0.6) !important; font-weight: 400; text-shadow: none; }

.clock-brasil .numeral.quarter { color: #FFD60A !important; font-weight: 600; font-size: 8.5cqw; }

.clock-brasil .hand-sec { background: linear-gradient(to top, #FFD60A, #FFF59D); width: 2px; box-shadow: 0 4px 8px rgba(0,0,0,0.5); z-index: 10; }

.clock-brasil .hand-sec::after { background: #FFD60A; }

.clock-brasil .center-axis { background: #002266; border: 2px solid #FFD60A; box-shadow: 0 2px 5px rgba(0,0,0,0.6); width: 12px; height: 12px; z-index: 11; }

.clock-brasil .tick::after { background-color: rgba(255,255,255,0.15); }

.clock-brasil .tick.major::after { background-color: rgba(255,255,255,0.4); }

.clock-brasil .tick.quarter::after { background-color: #FFD60A; box-shadow: 0 0 6px rgba(255, 214, 10, 0.3); }

.clock-brasil .digital-cluster-inside:not(.timer-yellow):not(.timer-green):not(.timer-red) .digital-display { color: #FFFFFF !important; }

.clock-brasil .digital-cluster-inside .lap-digital { color: rgba(255,255,255,0.5) !important; }

/* Tapete Vermelho: veludo vinho no visor (o mesmo tom do fundo do tema, mais profundo
   no centro), ponteiro dos segundos em ciano-neon (o contraste "led colorido" contra o
   dourado do resto) — ver body.theme-tapete-vermelho em variables.css pro raciocínio
   completo da paleta. SEM moldura de destaque no .analog-wrapper (quadrado por baixo
   do disco redondo, como em todo tema) — a primeira tentativa usou um border-image
   dourado brilhante ali e o usuário cortou na hora: "nada dessa moldura quadrada no
   relógio analógico, pelamor". Border escuro/baixo-contraste (funde no fundo, mesmo
   espírito do Catarina) — o dourado "com mais corpo" pedido mora nos numerais/ticks
   abaixo, não numa moldura em volta do quadrado. */
.clock-tapete-vermelho .analog-wrapper { background: radial-gradient(circle at 35% 28%, #3a0a14 0%, #1a0308 62%, #0c0206 100%); border: 3px solid rgba(0,0,0,0.5); box-shadow: 0 0 26px rgba(255, 209, 66, 0.14), 0 20px 40px rgba(0,0,0,0.7), inset 0 0 24px rgba(0,0,0,0.6); font-family: var(--font-ui); }

.clock-tapete-vermelho .analog-face::before { content: ''; position: absolute; top: 4%; left: 4%; width: 92%; height: 92%; border-radius: 50%; background: radial-gradient(circle at center, rgba(255,209,66,0.05) 0%, transparent 70%); box-shadow: inset 0 0 0 1px rgba(255,209,66,0.12); z-index: 1; pointer-events: none; }

.clock-tapete-vermelho .analog-face::after { content: ''; position: absolute; top: 1%; left: 14%; width: 72%; height: 40%; border-radius: 50% 50% 20% 20% / 100% 100% 30% 30%; background: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 100%); z-index: 20; pointer-events: none; }

.clock-tapete-vermelho .numeral { color: rgba(247, 236, 217, 0.78) !important; font-weight: 500; text-shadow: 0 0 5px rgba(0,0,0,0.6); }

.clock-tapete-vermelho .numeral.quarter { color: #FFD23F !important; font-weight: 700; font-size: 8.5cqw; text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 10px rgba(255,210,63,0.4); }

.clock-tapete-vermelho .hand-sec { background: linear-gradient(to top, #33E6FF, #B6FBFF); width: 3px; box-shadow: 0 4px 10px rgba(0,0,0,0.6), 0 0 8px rgba(51,230,255,0.5); z-index: 10; }

.clock-tapete-vermelho .hand-sec::after { background: #33E6FF; }

.clock-tapete-vermelho .center-axis { background: #FFD23F; border: 2px solid #7a1220; width: 14px; height: 14px; z-index: 11; box-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 10px rgba(255,210,63,0.5); }

.clock-tapete-vermelho .tick::after { background-color: rgba(255, 209, 66, 0.28); }

.clock-tapete-vermelho .tick.major::after { background-color: rgba(255, 209, 66, 0.6); }

.clock-tapete-vermelho .tick.quarter::after { background-color: #33E6FF; box-shadow: 0 0 6px rgba(51,230,255,0.5); }

.clock-tapete-vermelho .digital-cluster-inside:not(.timer-yellow):not(.timer-green):not(.timer-red) .digital-display { color: #F7ECD9 !important; }

.clock-tapete-vermelho .digital-cluster-inside .lap-digital { color: rgba(247,236,217,0.5) !important; }

/* Visor fósforo: verde suave irradiando do centro, vermelho só no ponteiro dos
   segundos (único pulso de destaque), branco nos numerais de quarto e contra-peso —
   mesma paleta preto/verde/vermelho/branco do tema, sem virar fundo verde chapado
   como o Atlântico (aquele é a floresta; este é o instrumento à noite). */
.clock-catarina .analog-wrapper { background: radial-gradient(circle at 50% 35%, #0d2013 0%, #050705 70%), linear-gradient(160deg, #0a140c 0%, #030403 100%); border: 3px solid #101d13; box-shadow: inset 0 0 26px rgba(53, 208, 127, 0.18), 0 20px 40px rgba(0,0,0,0.7); font-family: var(--font-ui); }

.clock-catarina .analog-face::before { content: ''; position: absolute; top: 3%; left: 3%; width: 94%; height: 94%; border-radius: 50%; background: radial-gradient(circle at center, rgba(53, 208, 127, 0.06) 0%, transparent 70%); box-shadow: inset 0 0 0 1px rgba(245, 247, 243, 0.06); z-index: 1; pointer-events: none; }

.clock-catarina .analog-face::after { content: ''; position: absolute; top: 1%; left: 12%; width: 76%; height: 42%; border-radius: 50% 50% 20% 20% / 100% 100% 30% 30%; background: linear-gradient(to bottom, rgba(255,255,255,0.06) 0%, transparent 100%); z-index: 20; pointer-events: none; }

.clock-catarina .numeral { color: rgba(245, 247, 243, 0.72) !important; font-weight: 500; text-shadow: 0 0 6px rgba(53, 208, 127, 0.15); }

.clock-catarina .numeral.quarter { color: #E4162A !important; font-weight: 700; font-size: 8.5cqw; text-shadow: 0 2px 6px rgba(0,0,0,0.7); }

.clock-catarina .hand-sec { background: linear-gradient(to top, #E4162A, #FF5A4D); width: 3px; box-shadow: 0 4px 10px rgba(0,0,0,0.6), 0 0 8px rgba(228, 22, 42, 0.4); z-index: 10; }

.clock-catarina .hand-sec::after { background: #F5F7F3; }

.clock-catarina .center-axis { background: #F5F7F3; border: 2px solid #E4162A; width: 14px; height: 14px; z-index: 11; box-shadow: 0 2px 8px rgba(0,0,0,0.6); }

.clock-catarina .tick::after { background-color: rgba(53, 208, 127, 0.3); }

.clock-catarina .tick.major::after { background-color: rgba(53, 208, 127, 0.65); }

.clock-catarina .tick.quarter::after { background-color: #F5F7F3; box-shadow: 0 0 6px rgba(245, 247, 243, 0.5); }

.clock-catarina .digital-cluster-inside:not(.timer-yellow):not(.timer-green):not(.timer-red) .digital-display { color: #F5F7F3 !important; }

.clock-catarina .digital-cluster-inside .lap-digital { color: rgba(245, 247, 243, 0.5) !important; }

.clock-titanium .marks-layer, .clock-atlantic .marks-layer, .clock-ocean .marks-layer, .clock-summer .marks-layer, .clock-estrela .marks-layer, .clock-brasil .marks-layer, .clock-catarina .marks-layer, .clock-tapete-vermelho .marks-layer { z-index: 5; }

.clock-titanium .digital-cluster-inside, .clock-atlantic .digital-cluster-inside, .clock-ocean .digital-cluster-inside, .clock-summer .digital-cluster-inside, .clock-estrela .digital-cluster-inside, .clock-brasil .digital-cluster-inside, .clock-catarina .digital-cluster-inside, .clock-tapete-vermelho .digital-cluster-inside { z-index: 21; }

.analog-face { width: 92%; height: 92%; border-radius: 50%; position: relative; }

.marks-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.tick { position: absolute; bottom: 50%; left: 50%; width: 2px; height: 50%; transform-origin: bottom center; }

.tick::after { content: ''; position: absolute; top: 1%; left: -0.5px; width: 1.5px; height: 3.5%; background-color: var(--text-sec); opacity: 0.3; border-radius: 2px; }

.tick.major::after { width: 2px; left: -1px; height: 5%; opacity: 0.6; background-color: var(--text-sec); }

.tick.quarter::after { width: 2.5px; left: -1.25px; height: 6.5%; opacity: 0.9; background-color: var(--text-main); }

.tick.target-yellow::after { background-color: var(--semaforo-yellow) !important; opacity: 1; }

.tick.target-green::after { background-color: var(--semaforo-green) !important; opacity: 1; }

.tick.target-red::after { background-color: var(--semaforo-red) !important; opacity: 1; }

.marks-layer.marks-fives .tick:not(.major):not(.quarter) { display: none !important; }

.marks-layer.marks-quarters .tick:not(.quarter) { display: none !important; }

.marks-layer.marks-quarters .numeral:not(.quarter) { display: none !important; }

.marks-layer.marks-none .tick { display: none !important; }

.marks-layer.marks-none .numeral { display: none !important; }

.num-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

.numeral { position: absolute; top: 5.5%; left: 50%; text-align: center; transform-origin: center; line-height: 1; }

.numeral.small { display: none; }

.numeral.medium { font-size: 4.5cqw; font-weight: 400; color: var(--text-sec); opacity: 0.9; }

.numeral.quarter { font-size: 8cqw; font-weight: 500; color: var(--text-main); }

.numeral.target-yellow { color: var(--semaforo-yellow) !important; font-weight: 500; }

.numeral.target-green { color: var(--semaforo-green) !important; font-weight: 500; }

.numeral.target-red { color: var(--semaforo-red) !important; font-weight: 500; }

.hand-hour, .hand-minute, .hand-sec { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; border-radius: 6px; display: none; }

.hand-hour { width: 5px; height: 26%; background-color: var(--text-main); z-index: 6; }

.hand-minute { width: 3.5px; height: 42%; background-color: var(--text-sec); z-index: 7; }

.hand-sec { width: 2px; height: 50%; background-color: var(--system-red); z-index: 10; border-radius: 4px; }

.hand-sec::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 30px; background-color: var(--system-red); border-radius: 0 0 4px 4px; }

.center-axis { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: var(--bg-page); border: 2px solid var(--system-red); border-radius: 50%; transform: translate(-50%, -50%); z-index: 11; }

.show-pointers-sec .hand-sec { display: block; }

.show-pointers-min .hand-sec, .show-pointers-min .hand-minute { display: block; }

.show-pointers-all .hand-sec, .show-pointers-all .hand-minute, .show-pointers-all .hand-hour { display: block; }

.target-indicator { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: 0.3s; z-index: 25; cursor: grab; }

.target-indicator:active { cursor: grabbing; }

.target-pin { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid var(--system-blue); transition: 0.2s; }

.target-indicator:active .target-pin { transform: translateX(-50%) scale(1.2); }

.digital-cluster-inside, .digital-cluster-outside { display: flex; flex-direction: column; align-items: center; transition: color 0.2s ease; width: 100%; }

.digital-cluster-inside { position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%); z-index: 5; width: 80%; gap: 2px; }

.digital-cluster-outside { display: none; margin-bottom: 0.5rem;}

.digital-display { font-family: var(--font-mono); font-weight: 300; font-size: 9.2cqw; letter-spacing: -1px; color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1; transition: color 0.2s;}

.lap-digital { font-family: var(--font-mono); font-size: 3.5cqw; font-weight: 400; color: var(--text-sec); font-variant-numeric: tabular-nums; opacity: 0.6; }

.digital-cluster-inside.timer-yellow .digital-display, .digital-cluster-outside.timer-yellow .digital-display { color: var(--semaforo-yellow) !important; }

.digital-cluster-inside.timer-green .digital-display, .digital-cluster-outside.timer-green .digital-display { color: var(--semaforo-green) !important; }

.digital-cluster-inside.timer-red .digital-display, .digital-cluster-outside.timer-red .digital-display { color: var(--semaforo-red) !important; }

.hud-progress-bar-container { display: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: rgba(0,0,0,0.4); overflow: hidden; }

.main-wrapper.layout-vertical .hud-progress-bar-container { display: block; }

.hud-progress-bar { height: 100%; width: 0%; background-color: var(--system-blue); transition: background-color 0.3s ease, width 0.1s linear; }

.hud-progress-bar.timer-yellow { background-color: var(--semaforo-yellow); box-shadow: 0 0 10px rgba(255, 159, 10, 0.4); }

.hud-progress-bar.timer-green { background-color: var(--semaforo-green); box-shadow: 0 0 10px rgba(48, 209, 88, 0.4); }

.hud-progress-bar.timer-red { background-color: var(--semaforo-red); box-shadow: 0 0 10px rgba(255, 69, 58, 0.4); }

.controls-bar { display: flex; gap: 30px; width: 100%; max-width: 320px; justify-content: center; align-items: center; background: transparent; border: none; padding: 10px; border-radius: 24px; flex-wrap: wrap; flex-shrink: 0; }

.btn-group { display: flex; gap: 25px; }

.control-btn { width: 65px; height: 65px; border-radius: 50%; border: 1px solid var(--border-color); font-size: 0.9rem; cursor: pointer; transition: 0.2s; font-weight: 500; background: transparent; color: var(--text-main); }

@media (hover: hover) {
    .control-btn:hover { background: rgba(255,255,255,0.05); }

}

.btn-start { border-color: var(--system-green); color: var(--system-green); }

.btn-start.stop-state { border-color: var(--system-red); color: var(--system-red); }

/* Sem drop-shadow aqui: a areia muda de altura a cada quadro e o filtro obrigava o
   navegador a re-rasterizar a ampulheta inteira junto. A profundidade vem das
   travessas de madeira e da sombra no chão, que são estáticas. */
:is(.clock-persa, .clock-palestina) .hourglass {
    display: flex; flex-direction: column; align-items: center;
    position: absolute; top: 5%; left: 50%; transform: translateX(-50%);
    width: 52%; height: 88%; z-index: 4;
    transition: transform 0.6s cubic-bezier(0.35, 0, 0.25, 1);
}

:is(.clock-persa, .clock-palestina) .hourglass.hg-flip { transform: translateX(-50%) rotate(180deg); }

:is(.clock-persa, .clock-palestina) .marks-layer, :is(.clock-persa, .clock-palestina) .hand-sec, :is(.clock-persa, .clock-palestina) .hand-minute, :is(.clock-persa, .clock-palestina) .hand-hour,
:is(.clock-persa, .clock-palestina) .center-axis, :is(.clock-persa, .clock-palestina) .target-indicator { display: none !important; }

/* A moldura quadrada some: a ampulheta flutua sobre o tema */
:is(.clock-persa, .clock-palestina) .analog-wrapper {
    border-radius: 0; aspect-ratio: 0.82; max-width: min(calc(var(--analog-size) * 0.8), 48vh);
    background: transparent; background-color: transparent;
    border: none; box-shadow: none; backdrop-filter: none;
}

/* Sombra elíptica no "chão" reforça o flutuar */
:is(.clock-persa, .clock-palestina) .analog-face::before {
    content: ''; position: absolute; bottom: -1%; left: 18%; width: 64%; height: 4%;
    border-radius: 50%;
    /* o próprio degradê já esfuma: dispensa o blur() e a camada extra que ele cria */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0,0,0,0.22) 45%, transparent 78%);
    z-index: 1; pointer-events: none;
}

/* Travessas de madeira no topo e na base */
:is(.clock-persa, .clock-palestina) .hourglass::before, :is(.clock-persa, .clock-palestina) .hourglass::after {
    content: ''; position: absolute; left: -5%; width: 110%; height: 3.4%; border-radius: 8px; z-index: 5;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 7px, transparent 7px 15px),
        linear-gradient(180deg, #9a6534 0%, #6e4520 55%, #4c2e13 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

:is(.clock-persa, .clock-palestina) .hourglass::before { top: -1.6%; }

:is(.clock-persa, .clock-palestina) .hourglass::after { bottom: -1.6%; }

/* Cronômetro digital mono fica FORA da ampulheta */
:is(.clock-persa, .clock-palestina) .digital-cluster-inside { display: none; }

body:is(.clock-persa, .clock-palestina) .digital-cluster-outside { display: flex; margin-top: 0.5rem; }

/* Cronômetro persa: arejado e perto da ampulheta, mas legível de longe no set */
body:is(.clock-persa, .clock-palestina) .digital-cluster-outside { margin-top: 0.1rem; gap: 4px; align-items: center; }

body:is(.clock-persa, .clock-palestina) .digital-cluster-outside .digital-display { font-size: 2rem; font-weight: 300; letter-spacing: 6px; }

body:is(.clock-persa, .clock-palestina) .digital-cluster-outside .lap-digital { font-size: 0.95rem; letter-spacing: 3px; opacity: 0.55; }

body:is(.clock-persa, .clock-palestina) .main-wrapper.layout-vertical .digital-display { font-size: 2.3rem; letter-spacing: 5px; }

body:is(.clock-persa, .clock-palestina) .main-wrapper.layout-vertical .lap-digital { font-size: 1rem; }

:is(.clock-persa, .clock-palestina) .analog-wrapper { margin-bottom: 0.35rem; }

/* Ampulheta sempre flutuando — sem caixa também no HUD e no horizontal mobile */
body:is(.clock-persa, .clock-palestina) .main-wrapper .analog-wrapper,
body:is(.clock-persa, .clock-palestina) .main-wrapper.layout-vertical .analog-wrapper {
    background: transparent !important; background-color: transparent !important;
    border: none !important; box-shadow: none !important; backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Tp — a marca por caractere do teleprompter (done / current / future)
   Extraído de css/module-tp.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ==== SCRIPT PREVIEW ==== */
.script-preview-wrapper { flex: 1; width: 100%; border-radius: 12px; background: rgba(255,255,255,.02); border: 1px solid rgba(0,0,0,0.1); position: relative; overflow: hidden; display: flex; flex-direction: column; }

body.apple-light .script-preview-wrapper, body.theme-summer-light .script-preview-wrapper { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,0.05); }

/* S em laranja: a guia acompanha o operador e não se rola à mão (ver updateSyncUI em
   js/settings.js). overflow:hidden barra roda/dedo/barra de rolagem sem impedir o
   scrollTop por código, que é como a guia acompanha. */
.script-preview.rolagem-travada { overflow-y: hidden; }

.script-preview { flex: 1; overflow-y: auto; scroll-behavior: auto; width: 100%; scrollbar-gutter: stable; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 20px, black 80px); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 20px, black 80px); }

.script-preview-content { padding: var(--main-line-pos) 18px 50vh 35px; line-height: 1.6; white-space: pre-wrap; font-family: var(--script-font-main); font-weight: var(--script-weight-main); font-size: var(--script-size-main); text-align: var(--script-align-main); color: var(--script-color-main); }

.tp-active-line-main { position: absolute; left: 0; width: 100%; height: var(--tp-line-weight); background: linear-gradient(90deg, var(--tp-active-line-color) 0%, transparent 60%); top: var(--main-line-pos); transform: translateY(-50%); z-index: 5; pointer-events: none; opacity: 0.6; transition: background 0.3s, height 0.3s; }

.tp-active-marker-main { position: absolute; left: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--tp-active-line-color); top: var(--main-line-pos); transform: translateY(-50%); z-index: 6; transition: border-left-color 0.3s; }

.script-preview-area { flex: 1; overflow: hidden; display: flex; gap: 15px; }

/* Piso mínimo no Hud (achado do usuário 2026-08-14, iPad: "(e) em Tt abre rolagem
   vertical... deveria comprimir") — combinado com os tiles menores das barras de cima
   (ver .main-wrapper.layout-vertical .od-diaria-bar .scene-tile, module-departments.css),
   garante que a área de leitura nunca fica pequena demais a ponto de virar só uma
   fresta rolável — encolhe até aqui, não menos. */
.main-wrapper.layout-vertical .script-preview-area { min-height: 120px; }

.script-char { transition: color 0.2s ease, opacity 0.2s ease, text-shadow 0.2s ease; }

body.main-color .script-preview-content .script-char.done { color: var(--system-green); opacity: 0.9; }

body.main-color .script-preview-content .script-char.current { color: var(--system-orange); opacity: 1; text-shadow: 0 0 12px rgba(255,159,10,0.4); }

body.main-color .script-preview-content .script-char.future { opacity: 0.6; color: inherit;}

body.main-no-color .script-preview-content .script-char.done { opacity: 0.6; color: inherit; }

body.main-no-color .script-preview-content .script-char.current { opacity: 1; color: inherit; text-shadow: 0 0 12px var(--shadow-glow); }

body.main-no-color .script-preview-content .script-char.future { opacity: 0.4; color: inherit; }

body.theme-summer-light.main-color .script-preview-content .script-char.future { opacity: 0.85; color: inherit; }

body.theme-summer-light.main-no-color .script-preview-content .script-char.future { opacity: 0.8; color: inherit; }

/* 16:9 é a única proporção que interessa — é o que sai no TP real. Diferente daqui, a
   margem/fonte/quantidade de palavras que o Monitor mostra vira "prévia mentirosa". */
.tp-mini-preview { --tp-line: 50%; --tp-margin: 10%; --tp-font: 10px; --mX: 1; --mY: 1; --tp-align: center; --script-font-tp: sans-serif; --script-weight-tp: 600; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; border: 1px solid var(--border-color); position: relative; overflow: hidden; }

.tp-mini-line { position: absolute; left: 0; width: 100%; height: var(--tp-line-weight); background: var(--tp-active-line-color); top: var(--tp-line); transform: translateY(-50%); z-index: 10; transition: background 0.3s, height 0.3s, top 0.3s;}

.tp-mini-marker-l { position: absolute; left: 0; top: var(--tp-line); transform: translateY(-50%); border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--tp-active-line-color); z-index: 11; transition: border-left-color 0.3s, top 0.3s;}

.tp-mini-marker-r { position: absolute; right: 0; top: var(--tp-line); transform: translateY(-50%); border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 6px solid var(--tp-active-line-color); z-index: 11; transition: border-right-color 0.3s, top 0.3s;}

.tp-mini-scroller { position: absolute; top:0; left:0; width: 100%; height: 100%; overflow: hidden; container-type: size; }

.tp-mini-text-box { width: 100%; color: var(--script-color-tp); font-family: var(--script-font-tp); font-size: var(--tp-font); padding: var(--tp-pad-top, 50cqh) var(--tp-margin) var(--tp-pad-bot, 80cqh) var(--tp-margin); transform: scaleX(var(--mX)) scaleY(var(--mY)); text-align: var(--script-align-tp); font-weight: var(--script-weight-tp); white-space: pre-wrap; line-height: 1.5; }

.tp-mini-preview.tp-full {
    width: 100%;
    height: 100%;
    border: none; border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Rt — a hierarquia dos campos longos e a sugestão ancestral diagramada
   Extraído de css/module-richtext.css
   ═══════════════════════════════════════════════════════════════════════ */

/* css/module-richtext.css — Rt: rich text dos campos longos (ver js/richText.js)
   ============================================================================
   Pedido do usuário 2026-08-28: "botões de edição para h1 h2 h3 com tipografias do nosso
   Temporal para que tenhamos relevâncias distintas e melhor organização... vamos sempre
   nos voltar ao Temporal para criarmos com consistência".

   A HIERARQUIA usa as fontes que o manual já define (variables.css), sem inventar
   nenhuma nova — o que muda entre os três níveis é FONTE + CAIXA + PESO + espaçamento,
   não só tamanho, pra a diferença ser legível de relance mesmo num campo estreito de
   celular:
     H1  --font-title (Barlow Condensed 700), caixa alta, tracking do manual (0.5px) —
         é a mesma voz do "TEMPORAMA" do carregador e do T do círculo: a divisão maior.
     H2  --font-title 600, caixa alta menor, com fio embaixo — divisão dentro do título.
     H3  --font-ui 700, corpo pequeno em caixa alta bem espaçada — é um RÓTULO, a mesma
         linguagem tipográfica de .form-group label e .section-title, que já são os
         rótulos do app inteiro.
   O corpo continua --font-ui, igual ao textarea de sempre: ligar o Rt num campo não
   pode mudar a cara do que já estava escrito ali. */

/* O textarea nunca sai do DOM (ele é o dono do dado, ver js/richText.js) — só some de
   vista enquanto o Rt está ligado. */
.rt-oculto { display: none !important; }

.rt-toggle {
    width: 30px; height: 24px; aspect-ratio: auto; border-radius: 6px; margin-left: auto;
    cursor: pointer; padding: 0; flex-shrink: 0;
}

.rt-toggle .ptile-symbol { font-size: 0.78rem; text-shadow: none; }

.rt-toggle.on { border-color: var(--system-blue); }

.rt-toggle.on .ptile-symbol { color: var(--system-blue); }

@media (hover: hover) {
    .rt-toggle:hover { border-color: var(--text-sec); }

}

.rt-toggle:disabled { opacity: 0.35; cursor: not-allowed; }

/* ===== BARRAS DE FERRAMENTAS ===== */
.rt-barra, .rt-barra-tabela {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 8px 8px 0 0;
    border-bottom: none; background: rgba(255,255,255,0.04);
}

body.apple-light .rt-barra, body.apple-light .rt-barra-tabela,
body.theme-summer-light .rt-barra, body.theme-summer-light .rt-barra-tabela { background: rgba(0,0,0,0.04); }

/* A segunda barra (tabela) só aparece com o cursor DENTRO de uma tabela — quando as duas
   estão na tela elas se encaixam como um bloco só, sem cantos no meio. */
/* BARRA E CAIXA SÃO UMA PEÇA SÓ (2026-08-28, pedido do usuário: "a linha do Rt, de
   acabamento, encoste na linha da caixa de texto"). O .form-group é um flex column com
   `gap: 8px` (module-departments.css) — esse vão, pensado pra separar rótulo de campo,
   também se metia ENTRE a barra e o editor, e a borda de baixo da barra ficava boiando
   8px acima da borda de cima da caixa, como se fossem dois objetos. A margem negativa
   cancela exatamente esse gap: as duas bordas se encostam e viram uma linha só, e os
   cantos arredondados (8px em cima na barra, 8px embaixo no editor) fecham o contorno
   de um bloco único. */
/* A margem é do PALCO, não do editor. Com ela no editor, ele saía 8px pra fora do palco
   e a sugestão ancestral — posicionada pelo palco — nascia 8px abaixo do texto de
   verdade: o desencaixe sutil que o usuário viu em 2026-08-29. Quem encosta na barra é
   o bloco inteiro, sugestão junto. */
.rt-barra-tabela, .rt-superficie { margin-top: -8px; }

.rt-barra + .rt-barra-tabela:not([hidden]) { border-radius: 0; border-top: 1px dashed var(--border-color); }

.rt-barra:has(+ .rt-barra-tabela:not([hidden])) { border-radius: 8px 8px 0 0; }

/* Sem a barra na frente (Rt desligado o editor nem aparece; mas a alça e o textarea
   continuam no fluxo), o editor não deve puxar nada pra cima. */
/* `~ .rt-editor` deixou de casar quando o editor passou a morar dentro do palco (o
   irmão da barra agora é o palco) — sem esta correção o campo ficava puxado 8px pra cima
   PARA SEMPRE, com ou sem barra. */
.rt-barra[hidden] + .rt-barra-tabela, .rt-barra[hidden] ~ .rt-superficie { margin-top: 0; }

/* Sem a barra em cima, o campo é uma caixa inteira — arredonda nos quatro cantos, igual
   a qualquer outro campo do formulário. Com a barra, os dois se encaixam num bloco só
   (8px em cima na barra, 8px embaixo no editor, ver acima). */
.rt-barra[hidden] ~ .rt-superficie > .rt-editor { border-radius: 8px; }

.rt-bt {
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    color: var(--text-sec); font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600;
    min-width: 28px; height: 26px; padding: 0 7px; cursor: pointer; transition: 0.15s;
    display: inline-flex; align-items: center; justify-content: center;
}

@media (hover: hover) {
    .rt-bt:hover:not(:disabled) { color: var(--text-main); border-color: var(--border-color); }

}

.rt-bt.on { color: var(--system-blue); border-color: var(--system-blue); }

.rt-bt:disabled { opacity: 0.28; cursor: not-allowed; }

/* Cada botão de título FALA na tipografia que ele aplica — não precisa de legenda */
.rt-bt-h1, .rt-bt-h2, .rt-bt-h3 { font-family: var(--font-title); font-weight: 700; letter-spacing: 0.5px; }

.rt-bt-h1 { font-size: 0.98rem; }

.rt-bt-h2 { font-size: 0.86rem; }

.rt-bt-h3 { font-size: 0.74rem; }

.rt-bt-bold { font-weight: 800; }

.rt-bt-italic { font-style: italic; font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; }

.rt-bt-tabela { font-size: 0.95rem; }

.rt-barra-rot { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-sec); opacity: 0.7; margin-right: 2px; }

.rt-barra-sep { width: 1px; height: 16px; background: var(--border-color); margin: 0 4px; }

/* A dica some no estreito: o espaço ali é do que se clica */
.rt-barra-dica { margin-left: auto; font-size: 0.62rem; color: var(--text-sec); opacity: 0.6; }

@media (max-width: 850px) {
    .rt-barra-dica { display: none; }

}

/* ===== SUPERFÍCIE DE EDIÇÃO =====
   Mesma caixa do <textarea> que ela substitui (ver .form-group textarea em
   module-departments.css) — quem liga o Rt não vê o campo "pular" de tamanho nem de cor.
   white-space: pre-wrap é o que faz o Tab (indentação, pedido do usuário) e os espaços
   do começo da linha valerem de verdade. */
.rt-editor {
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
    padding: 12px; border-radius: 0 0 8px 8px; color: var(--text-main);
    font-family: var(--font-ui); font-size: 1rem; line-height: 1.45;
    outline: none; min-height: 100px; overflow: auto; resize: vertical;
    white-space: pre-wrap; word-break: break-word; transition: border-color 0.2s;
    -webkit-user-modify: read-write-plaintext-only;  /* iOS: colar/ditado não injetam estilo */
    -webkit-user-select: text; user-select: text;
}

/* read-write-plaintext-only impediria negrito/itálico no WebKit — só vale enquanto o
   campo está TRAVADO; editando de verdade precisa ser rich. */
.rt-editor[contenteditable="true"] { -webkit-user-modify: read-write; }

body.apple-light .rt-editor, body.theme-summer-light .rt-editor { background: rgba(0,0,0,0.03); }

.rt-editor:focus { border-color: var(--system-blue); }

.rt-editor.rt-travado { opacity: 0.55; cursor: not-allowed; }

/* Campo vazio: mostra o placeholder do <textarea> dono do dado — que é onde a
   ancestralidade escreve a sugestão da cena anterior (ver refletirAncestral em
   js/richText.js). Absoluto de propósito: o texto sugerido não pode empurrar o
   conteúdo nem atrapalhar o cursor de quem começa a escrever por cima dele. */
.rt-editor { position: relative; }

.rt-editor.rt-vazio::before {
    content: attr(data-placeholder);
    position: absolute; inset: 12px 12px auto 12px;
    color: var(--text-sec); opacity: 0.55;
    pointer-events: none; white-space: pre-wrap;
}

/* Com a sugestão ancestral desenhada por baixo, o "Ex: ..." do HTML sai de cena — duas
   coisas cinzas no mesmo lugar dizendo coisas diferentes. */
.rt-editor.rt-com-fantasma::before { content: none; }

/* === A SUGESTÃO ANCESTRAL, DIAGRAMADA ===
   2026-08-29, pedido do usuário: "cascata ancestral deve carregar e mostrar com Rt,
   diagramado lindo mesmo, não apenas o texto". A sugestão passa pelo MESMO
   marcasParaHtml do editor, então título, tabela e negrito aparecem já formatados —
   o que se vê é exatamente o que se ganha ao adotar.
   O palco existe só pra empilhar os dois no mesmo lugar; o fantasma nunca entra no
   contenteditable (lá o cursor entraria nele e ele viraria dado sozinho). */
/* O palco é SÓ palco: nenhum fundo, nenhuma borda, nenhum raio próprio. A primeira
   versão movia o fundo do editor pra cá e deixava o editor transparente — o resultado
   foi um desencaixe sutil de um pixel no campo inteiro (achado do usuário 2026-08-29:
   "já esteve perfeito"). O editor não pode perder NADA do desenho dele por causa da
   sugestão; quem se encaixa em volta é o fantasma. */
.rt-superficie { position: relative; }

/* O fantasma vai POR CIMA, não por baixo: ele só existe com o campo vazio, então não há
   o que ele possa tapar — e por cima ele não depende do fundo do editor ser translúcido.
   A borda transparente reproduz a do editor pra que o texto comece exatamente na mesma
   linha (box-sizing: border-box, ver variables.css). */
.rt-fantasma {
    position: absolute; inset: 0; z-index: 2;
    padding: 12px; border: 1px solid transparent;
    overflow: hidden; pointer-events: none;
    font-family: var(--font-ui); font-size: 1rem; line-height: 1.45;
    /* Esmaecido, não apagado: legível o bastante pra ler a tabela inteira, e claro o
       bastante pra ninguém confundir com o que já foi escrito NESTA cena. */
    color: var(--text-sec); opacity: 0.5;
}

.rt-fantasma > *:first-child { margin-top: 0; }

/* Tracejado: a MESMA marca de "isto vem de antes, não foi digitado aqui" que qualquer
   outro campo ancestral usa (ver .campo-ancestral em css/module-departments.css) — o
   estado visual é do manual TEMPORAL, não uma invenção local do Rt. */
.rt-editor.campo-ancestral { border-style: dashed; }

.rt-editor.rt-vazio.campo-ancestral::before { opacity: 0.85; }

.rt-render > *:first-child { margin-top: 0; }

.rt-render > *:last-child { margin-bottom: 0; }

/* ===== A HIERARQUIA (o coração do pedido) ===== */
/* ISOLAMENTO PRIMEIRO. O <h2> do app não é um título qualquer: dentro de
   .module-form-wrapper ele é o CABEÇALHO GRUDENTO da área (position: sticky, ::before e
   ::after de 100vw desenhando a vidraça de fundo de ponta a ponta da tela — ver
   .module-form-wrapper h2 em module-departments.css e layout.css). Um <h2> nascido aqui
   dentro do editor herdava tudo isso: virava flex, ficava sticky e esticava 100vw de
   largura dentro de um campo de 810px — o efeito visível era uma barra de rolagem
   horizontal permanente por baixo do campo, sem nada pra rolar. Estes títulos são
   CONTEÚDO, não cromo do app; então voltam a ser bloco de texto e nada mais. */
.rt-render h1, .rt-render h2, .rt-render h3 {
    display: block; position: static; top: auto; z-index: auto;
    padding: 0; background: none; box-shadow: none; text-shadow: none;
    margin: 0.85em 0 0.3em;
}

.rt-render h1::before, .rt-render h1::after,
.rt-render h2::before, .rt-render h2::after,
.rt-render h3::before, .rt-render h3::after { content: none; display: none; }

.rt-render h1 {
    font-family: var(--font-title); font-weight: 700; font-size: 1.5rem; line-height: 1.05;
    letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-main);
}

.rt-render h2 {
    font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; line-height: 1.1;
    letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-main);
    border-bottom: 1px solid var(--border-color); padding-bottom: 3px;
}

.rt-render h3 {
    font-family: var(--font-ui); font-weight: 700; font-size: 0.78rem; line-height: 1.2;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sec);
}

.rt-render strong, .rt-render b { font-weight: 700; color: var(--text-main); }

.rt-render em, .rt-render i { font-style: italic; }

/* ===== TABELAS =====
   Quatro estilos (ver ESTILOS_TABELA em js/richText.js). O que muda entre eles é
   tipografia + quanto fio aparece — nunca a estrutura, então trocar de estilo nunca
   mexe no dado, só em como ele se lê. */
.rt-tabela {
    width: 100%; border-collapse: collapse; margin: 0.7em 0; font-size: 0.9rem;
    table-layout: fixed;
}

.rt-tabela th, .rt-tabela td { padding: 6px 8px; text-align: left; vertical-align: top; word-break: break-word; }

.rt-tabela th { font-weight: 700; color: var(--text-main); }

/* Célula com o cursor dentro: marca discreta pra não se perder numa tabela grande */
.rt-tabela th:focus, .rt-tabela td:focus { outline: none; }

/* Grade — o padrão: tudo fechado, boa pra dado curto */
.rt-tab-grade th, .rt-tab-grade td { border: 1px solid var(--border-color); }

.rt-tab-grade thead th { background: rgba(255,255,255,0.05); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; }

body.apple-light .rt-tab-grade thead th, body.theme-summer-light .rt-tab-grade thead th { background: rgba(0,0,0,0.05); }

/* Ficha — monoespaçada, como a folha de câmera: números alinham coluna a coluna */
.rt-tab-ficha { font-family: var(--font-mono); font-size: 0.8rem; }

.rt-tab-ficha th, .rt-tab-ficha td { border-bottom: 1px solid var(--border-color); padding: 5px 8px 5px 0; }

.rt-tab-ficha thead th { border-bottom: 1px solid var(--text-sec); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-sec); }

/* Faixas — sem grade vertical, linhas alternadas: lista longa sem cansar */
.rt-tab-faixas th, .rt-tab-faixas td { border: none; }

.rt-tab-faixas thead th { border-bottom: 1px solid var(--border-color); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-sec); }

.rt-tab-faixas tbody tr:nth-child(odd) { background: rgba(255,255,255,0.035); }

body.apple-light .rt-tab-faixas tbody tr:nth-child(odd), body.theme-summer-light .rt-tab-faixas tbody tr:nth-child(odd) { background: rgba(0,0,0,0.035); }

/* Limpa — só respiro: uma tabela que não interrompe o texto em volta */
.rt-tab-limpa th, .rt-tab-limpa td { border: none; padding: 3px 12px 3px 0; }

.rt-tab-limpa thead th { color: var(--text-sec); font-weight: 600; }

/* ===== ALÇA DE ALTURA =====
   Mesma peça da Guia de Texto do Tt (.input-resize-handle, css/layout.css) — aqui só
   ganha o respiro certo dentro do .form-group, que tem `gap: 8px` entre rótulo e campo:
   sem o -6px a alça herdaria esse mesmo vão e ficaria boiando longe da borda de baixo do
   campo, parecendo um elemento solto em vez da beirada dele. */
.rt-alca { margin: -6px 0 0; opacity: 0.55; transition: opacity 0.2s; }

@media (hover: hover) {
    .form-group:hover > .rt-alca { opacity: 1; }

}

.rt-alca.rh-dragging { opacity: 1; }

/* A alça continua valendo em campo TRAVADO de propósito: esticar o campo é leitura, não
   edição — quem não pode escrever ainda precisa poder abrir o campo pra ler tudo (mesmo
   princípio de "ver os campos travados, mas com acesso à informação", 2026-08-25). */

/* Campo com Rt ligado dentro da Ficha da cena (#odEditModal): os campos ali são mais
   baixos por padrão (.od-edit-grid textarea { min-height: 70px }) — o editor acompanha */
.od-edit-grid .rt-editor { min-height: 70px; }

.dir-ad-fields .rt-editor { min-height: 70px; }

@media (max-width: 850px) {
    .rt-editor { padding: 9px; font-size: 0.92rem; }

    .rt-barra, .rt-barra-tabela { padding: 5px 6px; gap: 3px; }

    .rt-bt { min-width: 26px; height: 24px; padding: 0 5px; }

    .rt-tabela { font-size: 0.82rem; }

    .rt-tabela th, .rt-tabela td { padding: 5px 6px; }

}

/* Somente leitura / sem permissão: mesma linguagem que já existe pros campos travados
   (ver .elemento-somente-leitura em module-departments.css) — o conteúdo continua
   LEGÍVEL, só não editável (pedido do usuário 2026-08-25: "ver os campos travados, de
   alguma forma, mas com acesso a informação"). */
.elemento-sem-permissao .rt-editor, .rt-editor.rt-travado { cursor: not-allowed; }

/* Dentro do fantasma nada tem cor própria: um <strong>, um título ou um cabeçalho de
   tabela colorido voltaria a parecer conteúdo de verdade desta cena. Especificidade
   maior que a de .rt-render (duas classes contra uma) — sem !important. */
.rt-superficie .rt-fantasma * { color: inherit; }

/* ═══════════════════════════════════════════════════════════════════════
   Campos, semáforo do rótulo e o tracejado da ancestralidade
   Extraído de css/module-departments.css
   ═══════════════════════════════════════════════════════════════════════ */

.foto-grid > .form-group { grid-column: span 4; }

.foto-grid > .form-group.full { grid-column: 1 / -1; }

.od-add-grid .form-group { gap: 4px; }

.foto-grid .form-group { min-width: 0; }

.form-group { display: flex; flex-direction: column; gap: 8px; position: relative; }

/* Semáforo de campos: ponto de status + nome colorido. Verde preenchido, laranja a revisar, vermelho fundamental em branco. */
/* Ponto do semáforo: visual pequeno (10px) mas área de toque grande (24px) via padding transparente */
.field-flag { width: 10px; height: 10px; padding: 7px; box-sizing: content-box; background-clip: content-box; margin: -7px 3px -7px -7px; border-radius: 50%; display: inline-block; vertical-align: middle; background-color: var(--border-color); cursor: pointer; flex-shrink: 0; user-select: none; transition: background-color 0.15s; }

@media (hover: hover) {
    .field-flag:hover { background-color: var(--text-sec); }

}

.fg-ok .field-flag { background-color: var(--system-green); }

.fg-warn .field-flag { background-color: var(--system-orange); }

.fg-miss .field-flag { background-color: var(--system-red); }

/* Texto dos campos selecionável (copiar rótulos/valores); só o ponto não seleciona */
/* (o rótulo não seleciona mais: arrastar pela tela não deve pintar texto — só os
   campos editáveis e o que estiver marcado como .selecionavel permitem seleção) */
/* Rótulo clicável: o nome do campo também alterna o semáforo (bom alvo no touch) */
.form-group > label.flag-clickable { cursor: pointer; }

.form-group.fg-ok > label { color: var(--system-green); }

.form-group.fg-warn > label { color: var(--system-orange); }

.form-group.fg-miss > label { color: var(--system-red); }

.form-group.full { grid-column: 1 / -1; }

.form-group label { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; color: var(--text-sec); }

.form-group input, .form-group textarea { background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); padding: 12px; border-radius: 8px; color: var(--text-main); font-family: var(--font-ui); font-size: 1rem; outline: none; transition: border-color 0.2s; }

.form-group input:focus, .form-group textarea:focus { border-color: var(--system-blue); }

.form-group textarea { resize: vertical; min-height: 100px; }

body.apple-light .form-group input, body.apple-light .form-group textarea { background: rgba(0,0,0,0.03); }

/* Campo vazio com ancestralidade da cena anterior (Locação/Câmera/Lente/Figurino/Arte/
   Produção/HFR/Sessão — ver CAMPOS_ANCESTRAIS em js/departments.js): mesma linguagem do
   .ct-sugerido — borda tracejada, placeholder discreto — não é pendência, é a sugestão que
   já vale como dado em ARMADA/PDF/Boost até a pessoa digitar algo diferente por cima. */
.form-group input.campo-ancestral, .form-group textarea.campo-ancestral { border-style: dashed; }

.form-group input.campo-ancestral::placeholder, .form-group textarea.campo-ancestral::placeholder { color: var(--text-sec); opacity: 0.85; }

/* Mesma sugestão ancestral, agora também nos campos espelho da claquete (pedido do
   usuário 2026-08-11) — .slate-input não vive dentro de .form-group, precisa da própria
   regra. Sem borda tracejada aqui (a lousa já é discreta/mono, ficaria poluído) — só o
   placeholder mais claro, pra ler como "sugestão", não "vazio". */
.slate-input.campo-ancestral::placeholder { color: var(--text-sec); opacity: 0.95; }

/* Tabela Ordem do Dia: Cena/Horário/Locação/Ação são fixas, o resto é escolha do usuário
   (seletor "Colunas") — largura em % definida inline por coluna, table-layout:fixed +
   ellipsis garantem que cabe na tela sem rolar não importa quantas estejam ligadas.
   Estilo enxuto de propósito: com o seletor liberando muitas colunas, o peso visual
   por célula precisa ficar baixo — sem fundo no cabeçalho, borda mais fraca, texto menor. */
#odPreviewTable { table-layout: fixed; font-size: 0.8rem; }

#odPreviewTable th, #odPreviewTable td { padding: 7px 10px; border-bottom: 1px solid var(--border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#odPreviewTable td { color: var(--text-sec); }

#odPreviewTable th { color: var(--text-sec); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; border-bottom-color: var(--text-sec); opacity: 0.85; }

#odPreviewTable td:first-child { color: var(--system-blue); font-family: var(--font-mono); font-weight: 700; }

.od-row { cursor: pointer; transition: background 0.15s; }

@media (hover: hover) {
    .od-row:hover { background: rgba(255,255,255,0.05); }

    body.apple-light .od-row:hover, body.theme-summer-light .od-row:hover { background: rgba(0,0,0,0.04); }

}

/* Selects seguem o mesmo padrão visual dos inputs dos formulários */
.form-group select {
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); padding: 12px; border-radius: 8px;
    color: var(--text-main); font-family: var(--font-ui); font-size: 1rem; outline: none; transition: border-color 0.2s; cursor: pointer;
}

.form-group select:focus { border-color: var(--system-blue); }

/* Select e input lado a lado com a MESMA altura (ex.: FPS Base e HFR na Fotografia) —
   min-height sozinho não bastava pro select (o "chrome" nativo do <select> tem uma
   métrica de altura própria, ligeiramente diferente da de um <input> mesmo com o mesmo
   padding — achado do usuário 2026-08-07): select leva height FIXO, não só mínimo. */
.form-group select, .form-group input[type="text"], .form-group input[type="number"] { min-height: 47px; }

.form-group select { height: 47px; }

body.apple-light .form-group select { background: rgba(0,0,0,0.03); }

.od-row.dragging { opacity: 0.35; }

.an-controles .form-group { min-width: 0; }

.pid-hfr-par .form-group { flex: 1 1 0; min-width: 0; }

/* Campos lado a lado começam na MESMA altura, tenha o rótulo um botão (T/F),
   uma conversão ao lado ou nada: a linha do rótulo tem altura fixa. */
.foto-grid .form-group > label, .foto-grid .fg-label-row { min-height: 26px; display: flex; align-items: center; }

@media (max-width: 850px) {
    .form-group.full { grid-column: 1; }

    .foto-grid > .form-group { grid-column: span 2; }

    .foto-grid .form-group.full { grid-column: 1 / -1; }

    .foto-grid > .form-group > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

}

@media (max-width: 480px) {
    .form-group { gap: 5px; }

    .form-group label { font-size: 0.78rem; }

    .form-group input, .form-group textarea, .form-group select { padding: 9px; font-size: 0.92rem; }

}