/* ==========================================================================
   Coala · roteiro · bera.ia.br/coala/ · v1.2.1 (12/09/2026, à noite; v1.2 à tarde; v1.1 em 11/09; v1 em 11/09 à tarde)
   Estrutura da bera◆ v2.3 (Atelier Técnico): raio 0, sem sombra, Versos com ss01
   e JetBrains Mono, réguas de 1px. Cor, faixa e gesto do Coala Festival 2026:
   creme e preto, a faixa verde da Vila atrás do destaque, o fader da arte
   oficial como régua real do show, chevrons no estado. Um momento de cor por
   tela: a cor do estado vive só no destaque (marcador, cursor do fader, tags
   situacionais). Tokens e contrastes: ~/Workspaces/design-schemas/coala-2026.md.
   Uso previsto: celular, em pé, no sol das 16h e à noite. Nada abaixo de 12px
   a 375px, alvo de toque de 44px, estado sempre com texto e forma.
   ========================================================================== */

@font-face {
  font-family: 'Versos';
  src: url('/fonts/VersosVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* --- Tokens: tema escuro (padrão fora do sol) ---------------------------- */
:root {
  color-scheme: dark;

  --preto: #000000;
  --creme: #FFFBF5;

  --fundo: var(--preto);
  --superficie: #121212;
  --superficie-alt: #1A1A1A;
  --linha: #232323;
  --linha-forte: #3A3A3A;
  --linha-ui: #8B8B85;      /* 3:1 sobre o fundo, limite de componente (1.4.11) */
  --texto: var(--creme);
  --texto-2: #A8A49B;       /* 8,45:1 sobre preto, 4,97:1 sobre a faixa */
  --texto-3: #A8A49B;

  --acento-bera: #E5B748;   /* só o diamante da assinatura */
  --faixa: #2D3822;         /* área verde da Vila a 28% sobre o preto */
  --marcado: #8CD64A;       /* 6,96:1 sobre a faixa */
  --marcado-fundo: #161C11;  /* faixa da Vila a 50% sobre o preto; creme dá 16,43:1 e o secundário 6,82:1 */
  --credito: #808079;        /* silencio_2 da marca: 5,28:1 sobre o preto, um degrau abaixo do secundário (8,45:1) */
  --agora: #F58A6E;         /* 5,14:1 sobre a faixa; o pino cru #EA5436 daria 3,42:1 */
  --neutro: var(--texto-2);

  --u: 8px;
  --goteira-x: 16px;
  --raio: 0;
  --borda: 1px;
  --alvo: 44px;
  --inset-topo: env(safe-area-inset-top, 0px);
  --inset-base: env(safe-area-inset-bottom, 0px);
  /* No atalho da tela de início o iOS desenha a barra de status por cima da página (a meta
     apple-mobile-web-app-status-bar-style é black-translucent). O inset do sistema já reserva a
     altura dela, mas o conteúdo encosta na barra, ainda mais quando o aparelho mostra a pílula de
     voltar ao app anterior. Estes 10px de respiro entram só nesse modo (pedido do Bera em
     11/09/2026, com captura do iPhone dele). No navegador comum valem 0. */
  --respiro-topo: 0px;
  --fixo: calc(99px + var(--respiro-topo));   /* barra fixa total: linha do destaque 44px + faixa de palcos 55px */

  --display: 'Versos', -apple-system, system-ui, sans-serif;
  --corpo: 'Versos', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --feat: 'ss01' 1;
}

/* --- Tema claro: papel creme do Coala, sol das 16h ----------------------- */
:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: var(--creme);
  --superficie: #F7F2EA;
  --superficie-alt: #FFFFFF;
  --linha: #E4DED4;
  --linha-forte: #C9C3B8;
  --linha-ui: #5F5F5A;
  --texto: var(--preto);
  --texto-2: #5F5F5A;       /* 6,23:1 sobre o creme, 5,50:1 sobre a faixa */
  --texto-3: #5F5F5A;

  --acento-bera: #B4441F;
  --faixa: #EAF0DA;         /* área verde da Vila a 22% sobre o creme */
  --marcado: #2E6B00;       /* 5,58:1 sobre a faixa */
  --marcado-fundo: #F4F6E8;  /* faixa da Vila a 50% sobre o creme; tinta dá 19,3:1 e o secundário 5,9:1 */
  --credito: #6E6E68;        /* 4,98:1 sobre o creme; os cinzas do escuro reprovam aqui (silencio_2 dá 3,86:1) */
  --agora: #B8341A;         /* 5,07:1 sobre a faixa */
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  :root { --respiro-topo: 10px; }
}
/* Quando a linha fixa do destaque está na tela, a faixa de palcos gruda logo abaixo dela */
:root.linha-visivel { --linha-fixa: calc(44px + var(--respiro-topo)); }

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--fixo) + 12px + var(--inset-topo)); }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: var(--feat);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--u) * 6 + var(--inset-base));
}
/* Faixa da barra de status no modo app do iOS: sempre preta, o iOS escreve a barra em branco. */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--inset-topo); background: var(--preto); z-index: 40; pointer-events: none; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; font-feature-settings: var(--feat); margin: 0; }
a { color: var(--texto); text-underline-offset: 3px; }
button { font: inherit; font-feature-settings: var(--feat); color: inherit; background: none; border: var(--borda) solid var(--linha-ui); border-radius: var(--raio); cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
button, a, summary, textarea, [tabindex] { scroll-margin-top: calc(var(--fixo) + 12px + var(--inset-topo)); }
[hidden] { display: none !important; }

.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2); font-feature-settings: var(--feat); }
.dado { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: var(--feat); }
.envelope { max-width: 940px; margin: 0 auto; padding: 0 var(--goteira-x); }
.icone { width: 24px; height: 24px; fill: currentColor; flex: none; display: inline-block; vertical-align: middle; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--alvo); padding: 0 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto); }
.btn .icone { width: 16px; height: 16px; }
.btn[aria-pressed="true"] { background: var(--superficie-alt); border: 2px solid var(--texto); padding: 0 11px; }

/* --- Cabeçalho ---------------------------------------------------------- */
.topo { border-bottom: var(--borda) solid var(--linha); padding-top: calc(var(--inset-topo) + var(--respiro-topo)); }
.topo-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--u); min-height: 56px; padding: 6px 0; }
.marca { display: flex; align-items: center; min-height: var(--alvo); color: var(--texto); text-decoration: none; }
/* Título da página (v1.1), centrado nos dois eixos entre o lockup e os controles; a 320px quebra em duas linhas, nunca some */
.topo-titulo { margin: 0; min-width: 0; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); line-height: 1.3; text-wrap: balance; }
/* Lockup canônico bera◆ (assets/logo): mínimo de 96px de largura; o diamante é o único elemento com cor */
.lockup { width: 96px; height: auto; display: block; flex: none; }
.lockup .letra { fill: currentColor; }
.lockup .lockup-diamante { fill: var(--acento-bera); }
.topo-dir { display: flex; align-items: center; gap: 10px; }
/* Marca do Coala como assinatura: quadrado na cor do texto com o coala na cor do fundo.
   No claro é a forma canônica (coala claro sobre quadrado preto); no escuro, a inversa. */
.coala-selo { width: 28px; height: 28px; background: var(--texto); color: var(--fundo); display: block; flex: none; }
.coala-selo .icone { width: 28px; height: 28px; display: block; }
/* Tema (v1.1): só ícone, 44×44; sol no tema claro, lua no escuro; o aria-label diz o estado e a ação */
.botao-tema { display: grid; place-items: center; width: var(--alvo); height: var(--alvo); padding: 0; color: var(--texto); }
/* Botão sem moldura: alvo de 44px, presença de ícone. Usado no compartilhar, que é oferta, não
   comando, e por isso fica um degrau abaixo do tema na hierarquia do cabeçalho. */
.botao-nu { display: grid; place-items: center; width: var(--alvo); height: var(--alvo); padding: 0; border: 0; color: var(--texto-2); }
.botao-nu .icone { width: 20px; height: 20px; }
.botao-nu:hover, .botao-nu:focus-visible { color: var(--texto); }
.botao-tema .icone { width: 24px; height: 24px; }
:root[data-tema="claro"] .botao-tema .i-lua, :root[data-tema="escuro"] .botao-tema .i-sol { display: none; }

/* --- Barra fixa: a linha do destaque quando a página rola (v1.1) ---------- */
.linha-fixa {
  position: fixed; top: var(--inset-topo); left: 0; right: 0; z-index: 30;
  --estado-cor: var(--neutro);
  /* o respiro entra como padding, e não como deslocamento, para não abrir um vão por onde a
     grade apareceria rolando entre a barra de status e a linha */
  height: calc(44px + var(--respiro-topo)); padding: calc(3px + var(--respiro-topo)) var(--goteira-x) 0; text-align: left;
  background: var(--fundo); color: var(--texto);
  border: 0; border-bottom: var(--borda) solid var(--linha); border-radius: 0;
}
.linha-fixa[data-origem="marcado"] { --estado-cor: var(--marcado); }
.linha-fixa[data-origem="prioridade"] { --estado-cor: var(--agora); }
.linha-fixa[data-estado="proximo"], .linha-fixa[data-estado="encerrado"], .linha-fixa[data-estado="lendo"] { --estado-cor: var(--texto-2); }
.lf-env { display: block; max-width: 940px; margin: 0 auto; }
.lf-l1 { display: flex; align-items: baseline; gap: 10px; }
.lf-nome { flex: 1 1 auto; min-width: 0; font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-hora { flex: none; font-size: 18px; line-height: 1.2; }
.lf-l2 { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.lf-est { flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); white-space: nowrap; }
.lf-dir { flex: none; font-size: 12px; color: var(--texto-2); white-space: nowrap; }
/* régua: o fader do herói em miniatura, com o cursor na cor do estado */
.lf-regua { position: relative; flex: 1 1 auto; min-width: 40px; height: 8px; border: var(--borda) solid var(--texto); }
.lf-regua i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: repeating-linear-gradient(90deg, var(--texto) 0 2px, transparent 2px 5px); }
.lf-regua b { position: absolute; left: calc(var(--p, 0%) - 4px); top: -3px; width: 8px; height: 12px; background: var(--estado-cor); border: 1px solid var(--fundo); }

/* --- Destaque: o show em andamento ou prestes a começar ------------------ */
.destaque {
  --estado-cor: var(--neutro);
  margin: var(--u) calc(var(--goteira-x) * -1) 0;
  padding: 10px var(--goteira-x);
  background: var(--faixa);
  border-top: var(--borda) solid var(--texto);
  border-bottom: var(--borda) solid var(--texto);
}
.destaque[data-origem="marcado"] { --estado-cor: var(--marcado); }
.destaque[data-origem="prioridade"] { --estado-cor: var(--agora); }
.destaque[data-estado="proximo"], .destaque[data-estado="encerrado"], .destaque[data-estado="lendo"] { --estado-cor: var(--texto-2); }
.destaque .estado { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--estado-cor); min-height: 18px; }
/* Hora atual como elemento do destaque (v1.1): mono tabular, à direita do estado, atualizada a cada 15 s */
.destaque-hora { margin-left: auto; font-size: 22px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--texto); }
/* marcador de forma: losango cheio = marcado, quadrado cheio = palco mais importante, quadrado vazado = próximo */
.destaque .marc { width: 16px; height: 16px; background: var(--estado-cor); flex: none; }
.destaque[data-origem="marcado"] .marc { transform: rotate(45deg); width: 14px; height: 14px; margin: 0 1px; }
.destaque[data-estado="proximo"] .marc, .destaque[data-estado="encerrado"] .marc, .destaque[data-estado="lendo"] .marc { background: none; border: 2px solid var(--estado-cor); }
.destaque-nome { font-size: 34px; font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; margin-top: 8px; text-wrap: balance; }
.destaque-meta { margin: 6px 0 0; font-size: 13px; color: var(--texto-2); }
.fader { position: relative; margin-top: 10px; height: 14px; border: var(--borda) solid var(--texto); }
.fader-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: repeating-linear-gradient(90deg, var(--texto) 0 2px, transparent 2px 5px); }
.fader-cursor { position: absolute; top: -5px; left: calc(var(--p, 0%) - 7px); width: 14px; height: 22px; background: var(--estado-cor); border: 1px solid var(--faixa); }
.fader[data-sem-fim="1"] .fader-fill { width: 100%; background: repeating-linear-gradient(90deg, var(--linha-forte) 0 2px, transparent 2px 5px); }
.fader-l { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--texto-2); }
.fader-l b { font-weight: 400; color: var(--texto); }
.tira { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border-top: var(--borda) solid var(--linha-forte); padding-top: 6px; }
.tira > div + div { border-left: var(--borda) solid var(--linha-forte); padding-left: 12px; }
.tira .eyebrow { display: block; }
.tira b { display: block; font-family: var(--mono); font-weight: 400; font-size: 22px; font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1.2; }
.motivo { margin: 8px 0 0; font-size: 15px; line-height: 1.4; max-width: 44ch; text-wrap: pretty; }
.flag { margin-top: 8px; width: 100%; justify-content: space-between; }
.flag .aberto, .flag[aria-expanded="true"] .fechado { display: none; }
.flag[aria-expanded="true"] .aberto { display: inline-block; }
.concorrentes { margin-top: 8px; border: var(--borda) solid var(--linha-forte); }
.concorrente { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 8px 10px; border-bottom: var(--borda) solid var(--linha); min-height: 44px; align-items: center; }
.concorrente:last-child { border-bottom: 0; }
.concorrente .h { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.concorrente .h small { display: block; font-size: 12px; color: var(--texto-2); }
.concorrente .n { font-weight: 600; font-size: 16px; line-height: 1.2; }
.concorrente .p { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); margin-top: 2px; }

/* --- Próximo marcado ------------------------------------------------------ */
.proximo { margin-top: 10px; border-bottom: var(--borda) solid var(--linha); padding-bottom: 10px; }
.proximo-nome { font-size: 22px; font-weight: 600; margin-top: 4px; letter-spacing: -0.02em; text-wrap: balance; }
.proximo-meta { margin: 4px 0 0; font-size: 13px; color: var(--texto-2); }
.fonte-tempo { margin: 6px 0 0; font-size: 13px; color: var(--texto-2); max-width: 48ch; }
.acoes { display: flex; gap: 8px; margin-top: 6px; }
.acoes .btn { flex: 1 1 0; min-width: 0; text-align: center; }
.acoes .btn span { white-space: normal; line-height: 1.2; }
.nota { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--texto); border: var(--borda) solid var(--linha-forte); padding: 8px 10px; }
/* Aviso que pode custar o show: um degrau acima de qualquer outra coisa da página. Filete de 2px na
   cor do texto, superfície própria, ícone de alerta e o rótulo invertido. Sem cor nova e sem bloco
   cheio claro no tema escuro, que o critério de conforto proíbe; o peso vem da moldura e do rótulo. */
.nota[data-nivel="obrigatorio"] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; border: 2px solid var(--texto); background: var(--superficie-alt); padding: 12px; margin-top: 10px; }
.nota[data-nivel="obrigatorio"] > .icone { width: 24px; height: 24px; color: var(--texto); margin-top: 1px; }
.nota[data-nivel="obrigatorio"] p { margin: 6px 0 0; font-size: 15px; line-height: 1.4; }
.nota-rotulo { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--texto); color: var(--fundo); padding: 2px 7px; line-height: 1.3; }
/* Dicas situacionais urgentes (conflito, chuva, pulseira, portões) como linhas curtas dentro do bloco do próximo (v1.1) */
.urgentes { list-style: none; margin: 6px 0 0; padding: 0; }
.urgente { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 0; border-top: var(--borda) solid var(--linha); font-size: 14px; line-height: 1.35; }
.urgente .tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto); border: var(--borda) solid var(--texto); padding: 1px 5px; line-height: 1.3; white-space: nowrap; }
/* Um degrau acima das outras urgentes: a pulseira do Allianz é condição de entrada, e sem ela o
   show é perdido. Ganha filete de 2px em volta, tag preenchida e o texto na cor cheia; nada disso
   depende de cor, o rótulo já diz "obrigatório". */
/* Mesmo peso da nota: é o único aviso da página que pode custar o show */
.urgente[data-nivel="obrigatorio"] { border: 2px solid var(--texto); background: var(--superficie-alt); padding: 12px; margin-top: 10px; gap: 10px; align-items: start; }
.urgente[data-nivel="obrigatorio"] .icone { width: 24px; height: 24px; color: var(--texto); margin-top: 1px; }
.urgente[data-nivel="obrigatorio"] .tag { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.urgente[data-nivel="obrigatorio"] p { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--texto); }
.dica[data-nivel="obrigatorio"] .tag { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.vazio { color: var(--texto-2); padding: 12px 0 0; font-size: 15px; margin: 0; max-width: 40ch; }

/* --- Seções e dicas (as dicas vivem no rodapé desde a v1.1, recolhidas) ------- */
.secao { margin-top: calc(var(--u) * 1.5); }
.secao-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--u); border-bottom: var(--borda) solid var(--linha); padding-bottom: 6px; flex-wrap: wrap; }
.secao-cab h2 { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); line-height: 1.4; }
.dica { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: var(--borda) solid var(--linha); font-size: 15px; line-height: 1.4; }
.dica .tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); border: var(--borda) solid var(--linha-forte); padding: 2px 6px; align-self: start; margin-top: 2px; white-space: nowrap; line-height: 1.3; }
.dica[data-origem="agora"] .tag { color: var(--texto); border-color: var(--texto); }
.dica p { margin: 0; }
/* Endereço copiável: parece link, porque é o gesto que a pessoa já conhece, mas é botão, porque não
   navega. Sublinhado na cor cheia do texto, com o ícone de copiar antes; ao copiar, o ícone vira
   check e a palavra "copiado" entra ao lado por 2,6 s, anunciada por role="status". Fica inline no
   parágrafo, então cai na exceção de alvo da 2.5.8, mas leva 6px de folga vertical mesmo assim. */
.copiavel { display: inline; border: 0; padding: 2px 0; margin: 0; background: none; font: inherit; color: var(--texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.copiavel { padding: 5px 0; }   /* a caixa clicável passa de 24px para ~28px de altura, com folga sobre o mínimo de 24 da 2.5.8 */
.copiavel .icone { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.copiavel .ic-check, .copiavel[data-copiado] .ic-copiar { display: none; }
.copiavel[data-copiado] .ic-check { display: inline-block; }
.copiavel[data-copiado] { text-decoration: none; }
.copiavel-estado:not(:empty) { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); margin-left: 7px; text-decoration: none; display: inline-block; }
.copiavel:hover .copiavel-texto, .copiavel:focus-visible .copiavel-texto { text-decoration: none; }
.dica small { display: block; color: var(--texto-2); font-size: 13px; margin-top: 2px; }

/* --- Clima da próxima hora ----------------------------------------------- */
.frescor { display: inline-flex; align-items: center; gap: 7px; margin: 0; min-height: 18px; }
.frescor-marca { width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); flex: none; }
.frescor[data-frescor="guardado"] .frescor-marca { background: none; border: 1.5px solid currentColor; }
.frescor[data-frescor="velha"] .frescor-marca, .frescor[data-frescor="sem"] .frescor-marca { display: none; }
.frescor[data-frescor="guardado"], .frescor[data-frescor="velha"], .frescor[data-frescor="sem"] { color: var(--texto); }
/* Clima compacto (v1.1): uma linha com temperatura, estado e até quando, mais as 4 fatias e a miniatura das 3 horas */
.clima-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; padding-top: 6px; }
.clima-linha .temp { font-family: var(--mono); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: var(--feat); }
.clima-estado { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); }
.clima-ate { font-size: 14px; color: var(--texto-2); }
/* A caixa tinha 24px fixos e o conteúdo da fatia mede 34px (13px do número mais até 20px da
   haste), então a haste transbordava 9px para baixo e caía em cima dos rótulos de hora, que
   ficavam cinza sobre barra cheia e sumiam. Medido em 12/09/2026 com chuva forte: base da
   barra em 544 e rótulo de 535 a 553. Altura automática com piso de 24px resolve, e resolve
   também quando a pessoa aumenta o tamanho do texto, que é quando o conteúdo cresce mais. */
.fatias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; align-items: end; min-height: 24px; margin-top: 2px; }
/* A margem caiu de 6px para 2px para devolver parte dos 10px que a altura automática custou:
   com 13 notas a página ia de 2.392px para 2.402px, dois acima do teto de 2.400 que o Bera
   fixou por clique. Assim fica em ~2.398px, com 2px de folga entre a barra e o rótulo.
   Medido: sem a margem trocada, 1.836px; com ela, 1.832px. */
.fatia { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.fatia .mm { font-family: var(--mono); font-size: 12px; color: var(--texto-2); text-align: center; line-height: 1.2; min-height: 13px; font-variant-numeric: tabular-nums; }
.fatia .haste { height: var(--h, 3px); min-height: 3px; background: var(--linha-forte); }
/* níveis por padrão, não por cor: garoa hachurada, forte cheia */
.fatia[data-n="1"] .haste { background: repeating-linear-gradient(-45deg, var(--texto) 0 3px, transparent 3px 6px); border: 1px solid var(--texto); }
.fatia[data-n="2"] .haste { background: var(--texto); }
.fatias-h { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; font-size: 12px; color: var(--texto-3); text-align: center; margin-top: 2px; }
.fatias-h span:first-child { color: var(--texto); }
.mini { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; font-size: 12px; color: var(--texto-2); line-height: 1.3; }
.mini b { font-weight: 400; color: var(--texto); margin-right: 4px; }
.aviso { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; border: var(--borda) solid var(--linha-forte); padding: 10px 12px; font-size: 14px; color: var(--texto); }
.aviso .icone { color: var(--texto-2); }

/* --- Dias: 2 fichas ------------------------------------------------------- */
.dias-secao { margin-top: calc(var(--u) * 2.5); }
.dias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.dia { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 0; color: var(--texto-2); font-family: var(--mono); border-color: var(--linha-ui); }
.dia .num { font-size: 17px; color: var(--texto); font-variant-numeric: tabular-nums; line-height: 1; }
.dia .sub { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.dia--passado .num { text-decoration: line-through; color: var(--texto-3); }
.dia--hoje .sub { color: var(--texto); }
.dia[aria-pressed="true"] { background: var(--superficie-alt); border: 2px solid var(--texto); color: var(--texto); }
.dia[aria-pressed="true"] .num { text-decoration: none; }

/* --- Palcos: faixa fixa ------------------------------------------------------ */
.palcos-fixo { position: sticky; top: calc(var(--inset-topo) + var(--linha-fixa, 0px)); z-index: 20; background: var(--fundo); margin: calc(var(--u) * 2) calc(var(--goteira-x) * -1) 0; padding: 5px var(--goteira-x); border-bottom: var(--borda) solid var(--linha); }
.palcos-linha { display: flex; gap: 6px; align-items: stretch; }
.palcos { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
.palcos::-webkit-scrollbar { display: none; }
/* pista de overflow: só a borda que ainda esconde conteúdo esmaece */
.palcos[data-mais="fim"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.palcos[data-mais="inicio"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.palcos[data-mais="ambos"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.ficha { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: var(--alvo); padding: 0 12px; scroll-snap-align: start; color: var(--texto-2); font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; border-color: var(--linha-ui); }
.ficha .icone { width: 14px; height: 14px; }
.ficha[aria-pressed="true"] { background: var(--superficie-alt); border: 2px solid var(--texto); color: var(--texto); padding: 0 11px; }
.ficha--dia { color: var(--texto); border-color: var(--linha-forte); gap: 7px; }
.ficha--dia .icone { width: 16px; height: 16px; color: var(--texto-2); }

/* --- Grade em blocos -------------------------------------------------------- */
.grade-secao { margin-top: calc(var(--u) * 2); }
.grade-secao .secao-cab { border-bottom: 0; padding-bottom: 0; }
.bloco { margin-top: calc(var(--u) * 1.5); }
.bloco-cab { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); padding: 8px 0; border-bottom: var(--borda) solid var(--linha-forte); line-height: 1.3; }
.bloco-cab .icone { width: 18px; height: 18px; color: var(--texto-2); }
.bloco-cab .cont { margin-left: auto; color: var(--texto-2); white-space: nowrap; }
.bloco--agora .bloco-cab { border-bottom-color: var(--texto); }
details.bloco > summary { list-style: none; cursor: pointer; min-height: var(--alvo); }
details.bloco > summary::-webkit-details-marker { display: none; }
details.bloco > summary .fechado, details.bloco[open] > summary .aberto { display: inline-block; }
details.bloco > summary .aberto, details.bloco[open] > summary .fechado { display: none; }
.shows { list-style: none; margin: 0; padding: 0; }
.show { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: var(--borda) solid var(--linha); min-height: 58px; }
.show-hora { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px; line-height: 1.2; align-self: start; padding-top: 3px; }
.show-hora .fim { display: block; font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.show-hora.incerta { font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-2); }
.show-nome { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: pretty; }
.show-linha2 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; }
.grade[data-um-palco] .tag-palco { display: none; }
.tag-palco, .tag-tipo { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); border: var(--borda) solid var(--linha-forte); padding: 2px 6px; line-height: 1.3; }
/* Previsão da janela do show, na coluna do horário: mesma gramática das fatias de chuva, sem cor de
   estado (a cor vive só no destaque). Seco é uma barra vazia, garoa é hachurada, chuva forte é
   cheia, e a palavra ao lado diz o mesmo, então nada aqui é comunicado só pela forma. Sem moldura,
   para caber nos 56px da coluna a 320px. */
.show-clima { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--texto-2); line-height: 1.3; white-space: nowrap; padding: 2px 0; }
.show-clima .icone { width: 16px; height: 16px; }
.show-clima[data-agora] { color: var(--texto); }
.show--agora .show-hora { color: var(--texto); font-weight: 400; }
.show--agora .show-hora::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--texto); margin-right: 6px; vertical-align: 1px; }
.show--passou .show-hora, .show--passou .show-nome { color: var(--texto-2); font-weight: 500; }
.show--passou .tag-palco, .show--passou .tag-tipo, .show--passou .show-fav { color: var(--texto-3); }
.show-fav { width: var(--alvo); height: var(--alvo); display: grid; place-items: center; border-color: var(--linha-ui); color: var(--texto-2); justify-self: end; }
.show-fav .icone { width: 16px; height: 16px; }
/* Show marcado (pedido do Bera em 11/09/2026): o diamante recebe o verde da Vila e a linha inteira
   ganha o mesmo verde diluído ao fundo, bem mais sutil. É um desvio deliberado do guardrail "uma cor
   de estado por tela" do schema coala-2026: aqui a cor não diz estado do momento, diz que a escolha
   é sua, e o marcador continua tendo forma (losango cheio contra vazado) e rótulo. */
.show-fav[aria-pressed="true"] { border-color: var(--marcado); color: var(--marcado); border-width: 2px; }
.show--marcado { background: var(--marcado-fundo); box-shadow: calc(var(--goteira-x) * -1) 0 0 var(--marcado-fundo), var(--goteira-x) 0 0 var(--marcado-fundo); }
/* Ações da linha (v1.2, 12/09/2026): o botão de nota à esquerda do diamante, os dois com alvo de 44px,
   numa célula só com 4px entre eles, para custar 92px à linha e não 100. */
.show-acoes { display: flex; align-items: center; gap: 4px; justify-self: end; }
/* Botão de nota: sem moldura, um degrau abaixo do diamante na hierarquia. A folha vazia convida a
   escrever; a folha escrita e a cor de escolha (a mesma do marcado: diz que a nota é sua, não estado do
   momento) dizem que há nota salva. A forma muda junto com a cor, nunca só a cor. */
.show-diario { width: var(--alvo); height: var(--alvo); display: grid; place-items: center; border: 0; color: var(--texto-2); }
.show-diario .icone { width: 18px; height: 18px; }
.show-diario:hover, .show-diario:focus-visible, .show-diario[aria-expanded="true"] { color: var(--texto); }
.show-diario[data-tem] { color: var(--marcado); }
.show--passou .show-diario:not([data-tem]) { color: var(--texto-3); }
/* Painel da nota: inline, dentro da própria linha, ocupando as três colunas. Sem modal: a grade
   continua visível e o foco volta ao botão ao fechar. O textarea tem 16px para o iOS não dar zoom. */
.diario { grid-column: 1 / -1; margin: 2px 0 4px; padding: 10px 12px 12px; border: var(--borda) solid var(--linha-forte); background: var(--superficie); color: var(--texto); }
.diario-rotulo { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); line-height: 1.3; }
.diario-texto { display: block; width: 100%; min-height: 96px; margin-top: 8px; padding: 8px 10px; font: inherit; font-size: 16px; line-height: 1.45; color: var(--texto); background: var(--fundo); border: var(--borda) solid var(--linha-ui); border-radius: var(--raio); resize: vertical; }
.diario-texto::placeholder { color: var(--texto-2); opacity: 1; }
.diario-texto:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.diario-pe { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.diario-estado { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--texto-2); line-height: 1.3; }
.diario-pe .btn { color: var(--texto-2); border-color: var(--linha-ui); }
.diario-pe .btn[data-confirma] { color: var(--texto); border-color: var(--texto); }
.nota-dia { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; border: var(--borda) solid var(--linha-forte); padding: 10px 12px; font-size: 14px; color: var(--texto); }
/* Linha "agora" na grade do dia corrente (v1.1), como agenda de calendário: hora em texto e régua na cor
   do texto (sem cor de estado, que é só do destaque), entre o último show começado e o próximo */
.agora-linha { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.agora-linha .hora { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1; color: var(--texto); }
.agora-linha .hora::before { content: ""; width: 8px; height: 8px; background: var(--texto); transform: rotate(45deg); flex: none; }
.agora-linha .regua { flex: 1 1 auto; height: 2px; background: var(--texto); }
.agora-linha .rotulo { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2); }

/* --- Rodapé ----------------------------------------------------------------- */
.rodape { margin-top: calc(var(--u) * 2.5); padding-top: var(--u); border-top: var(--borda) solid var(--linha); color: var(--texto-2); font-size: 13px; }
.rodape summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: var(--alvo); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); }
.rodape summary::-webkit-details-marker { display: none; }
.rodape summary .icone { width: 18px; height: 18px; color: var(--texto-2); }
.rodape details .fechado, .rodape details[open] .aberto { display: inline-block; }
.rodape details .aberto, .rodape details[open] .fechado { display: none; }
.rodape p { margin: 8px 0 0; max-width: 66ch; }
.rodape .rodape-linha { margin-top: 12px; }
/* Dica de instalação: a primeira da área de dicas e a única sempre aberta. Fica em superfície com
   filete, para se distinguir do resto do rodapé sem virar propaganda. */
.instalar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; border: var(--borda) solid var(--linha-forte); padding: 10px 12px; margin-bottom: 10px; color: var(--texto); }
.instalar > .icone { width: 22px; height: 22px; color: var(--texto-2); margin-top: 1px; }
.instalar p { margin: 0; max-width: 52ch; }
.instalar-titulo { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
.instalar-texto { margin-top: 4px !important; font-size: 14px; line-height: 1.4; text-wrap: pretty; }
.instalar .btn { margin-top: 8px; }
.instalar .btn .icone { width: 16px; height: 16px; }
.instalar b { font-weight: 600; }

.rodape .dicas { border-bottom: var(--borda) solid var(--linha); padding-bottom: 8px; margin-bottom: 8px; }
.rodape .dica p { color: var(--texto); }
/* Linha de licença no padrão da home (mono 11px, caixa alta, tracking .1em): a única fonte abaixo de 12px, por decisão do Bera */
.licenca { margin: 24px 0 0; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); }
/* Crédito de teste: mesma tipografia da licença, um degrau mais apagado e 10% menor (10px contra
   11px), por decisão do Bera em 11/09/2026. É o menor texto da página, abaixo do piso de 12px do
   schema e da exceção de 11px da licença. O que não cede é o contraste: mesmo aqui fica acima de
   4,5:1 nos dois temas. */
.credito { margin: 4px 0 0; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--credito); }

/* Diário do festival (v1.2): bloco discreto no fim da página, antes da linha de licença. Os botões
   ganham a cor cheia quando há nota; sem nota ficam com aria-disabled e o texto diz onde a nota nasce. */
.diario-bloco { margin-top: 10px; padding-top: 8px; border-top: var(--borda) solid var(--linha); }
.diario-titulo { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); line-height: 1.4; }
.diario-resumo { font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.diario-acoes { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.diario-acoes .btn { color: var(--texto); border-color: var(--linha-ui); }
.diario-acoes .btn[aria-disabled="true"] { color: var(--texto-2); border-color: var(--linha-forte); }
.diario-retorno:not(:empty) { margin-top: 8px; font-size: 14px; color: var(--texto); }

/* --- Responsivo: cabe em 320px ----------------------------------------------- */
@media (max-width: 560px) { :root { --goteira-x: 12px; } }
@media (max-width: 359px) {
  .topo-dir { gap: 4px; }
  .topo-linha { gap: 6px; }
  .destaque-nome { font-size: 28px; }
  .destaque-hora { font-size: 17px; }
  .lf-nome { font-size: 15px; }
  .lf-hora { font-size: 16px; }
  .proximo-nome { font-size: 20px; }
  .tira b { font-size: 19px; }
  .clima-linha .temp { font-size: 24px; }
  .show { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; }
  .show-hora { font-size: 16px; }
  .lockup { width: 86px; }
  .acoes { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* --- Alto contraste do sistema (achado 3.1 do cão-guia, 11/09/2026) ------------
   No modo forçado o sistema troca as cores da página pelas dele, e o que era desenhado com
   background some ou vira tudo igual. As formas desta página carregam estado (losango cheio =
   marcado, quadrado cheio = palco mais importante, quadrado vazado = próximo; cursor do fader;
   régua da linha "agora"; hastes de chuva), então elas mantêm o preenchimento na cor de texto do
   sistema e as bordas de componente continuam visíveis. O texto de cada estado já está na tela e
   não depende disto: isto devolve a leitura rápida por forma. */
@media (forced-colors: active) {
  .destaque .marc, .fader-cursor, .lf-regua b, .frescor-marca,
  .agora-linha .regua, .agora-linha .hora::before, .show--agora .show-hora::before,
  .fatia[data-n="2"] .haste { forced-color-adjust: none; background: CanvasText; }
  .destaque[data-estado="proximo"] .marc, .destaque[data-estado="encerrado"] .marc,
  .destaque[data-estado="lendo"] .marc, .frescor[data-frescor="guardado"] .frescor-marca,
  .fader, .lf-regua, .btn, .ficha, .dia, .show-fav, .fatia[data-n="1"] .haste { border-color: CanvasText; }
  /* o realce do show marcado é fundo e cor, que o modo forçado substitui; a forma do marcador
     (losango cheio contra vazado) e a borda de 2px continuam distinguindo */
  .show-fav[aria-pressed="true"] { border-color: Highlight; color: Highlight; }
  .copiavel { color: LinkText; }
  .show-diario[data-tem] { color: Highlight; }
  .diario, .diario-texto { border-color: CanvasText; }
  .urgente[data-nivel="obrigatorio"] { border-color: CanvasText; }
  .urgente[data-nivel="obrigatorio"] .tag, .dica[data-nivel="obrigatorio"] .tag,
  .nota-rotulo { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .nota[data-nivel="obrigatorio"] { border-color: CanvasText; }
  .coala-selo { forced-color-adjust: none; background: CanvasText; color: Canvas; }
}