/* Painel do canal Torresminho Caseiro. 19/10/2026: cores da marca em tokens; sem fonte nem script de fora (CSP 'self'). */
:root {
  --verde: #2d5a3a;
  --verde-escuro: #1f4029;
  --dourado: #c8963e;
  --creme: #f6f4ef;
  --branco: #ffffff;
  --texto: #222a24;
  --texto-leve: #5b6359;
  --borda: #ddd8cc;
  --para-aprovar: #d9a400;
  --aprovado: #1d6b33;
  --no-ar: #2b4a8a;
  --reprovado: #9b2222;
  --em-revisao: #8a8a8a;
  /* 19/10/2026 (cronograma): fundo e texto dos selos de cada status, papel dos cartões e serifa dos títulos */
  --para-aprovar-tinta: #fff1cc;
  --para-aprovar-texto: #6f4f00;
  --aprovado-tinta: #dff3e3;
  --aprovado-texto: #1d6b33;
  --no-ar-tinta: #e3e9f7;
  --no-ar-texto: #2b4a8a;
  --reprovado-tinta: #fbe0e0;
  --reprovado-texto: #9b2222;
  --em-revisao-tinta: #ececea;
  --em-revisao-texto: #555a55;
  --dourado-escuro: #8f6420;
  --papel: #fffdf8;
  --creme-escuro: #ece7dc;
  --palco: #15110c;
  --serifa: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sombra-cartao: 0 1px 0 rgba(31, 64, 41, 0.06), 0 8px 20px -14px rgba(31, 64, 41, 0.45);
  --sombra-alta: 0 18px 40px -22px rgba(21, 17, 12, 0.55);
  --transicao: 160ms ease-out;
  --raio: 10px;
  --sombra: 0 2px 10px rgba(31, 64, 41, 0.12);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.45;
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--verde);
  color: var(--creme);
  border-bottom: 3px solid var(--dourado);
}

.marca { color: var(--creme); font-weight: 700; text-decoration: none; }
.marca span { color: var(--dourado); font-weight: 600; }

.sair { display: flex; align-items: center; gap: 10px; margin: 0; }
.quem { font-size: 14px; opacity: 0.85; }

.conteudo { max-width: 1200px; margin: 0 auto; padding: 16px; }

/* Abas (19/10/2026): Cronograma · Pedidos (com os abertos) · Regras aprendidas */
.abas { display: flex; gap: 4px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; background: var(--papel); border-bottom: 1px solid var(--borda); }
.aba { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 11px 12px 8px; border-bottom: 3px solid transparent; color: var(--texto-leve); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.aba:hover { color: var(--verde); }
.aba.ligada { border-bottom-color: var(--verde); color: var(--verde); }
.aba-conta { padding: 0 7px; border-radius: 999px; background: var(--para-aprovar-tinta); color: var(--para-aprovar-texto); font-size: 12px; line-height: 1.6; }
/* 20/10/2026: com a 4ª aba (Conversa), as quatro e o número de Pedidos cabem em 375 px sem rolar de lado */
@media (max-width: 479px) {
  .so-largo { display: none; }
  .abas { gap: 0; padding: 0 6px; }
  .aba { gap: 4px; padding-inline: 8px; font-size: 14px; }
}
@media (min-width: 900px) { .abas { padding: 0 24px; } }

.dica { color: var(--texto-leve); }

/* Entrada e definir senha */
.tela-entrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }

.cartao-entrada {
  width: 100%;
  max-width: 380px;
  background: var(--branco);
  border-radius: var(--raio);
  border-top: 6px solid var(--verde);
  box-shadow: var(--sombra);
  padding: 24px 20px;
}

.marca-grande { margin: 0 0 20px; font-size: 22px; color: var(--verde); line-height: 1.2; }
.marca-grande span { color: var(--dourado); }

.formulario { display: flex; flex-direction: column; gap: 6px; }
.formulario label { font-weight: 600; font-size: 14px; margin-top: 8px; }
.formulario input {
  width: 100%;
  font: inherit;
  padding: 11px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--branco);
  color: var(--texto);
}
.formulario input:focus { outline: 3px solid rgba(200, 150, 62, 0.45); border-color: var(--dourado); }

.erro {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8e6e6;
  color: var(--reprovado);
  font-size: 14px;
}

.botao {
  margin-top: 16px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--verde);
  color: var(--creme);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.botao:hover, .botao:focus-visible { background: var(--verde-escuro); }

.botao-leve {
  padding: 6px 12px;
  border: 1px solid var(--dourado);
  border-radius: 8px;
  background: transparent;
  color: var(--creme);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.botao-leve:hover, .botao-leve:focus-visible { background: var(--dourado); color: var(--verde-escuro); }

.aviso-detalhe { margin: 16px; padding: 12px 14px; border-radius: 10px; background: var(--reprovado-tinta); color: var(--reprovado-texto); }

/* ===================================================================================================
   Cronograma (19/10/2026): barra fixa com modo e filtros, Lista por dia, Semana em grade, detalhe.
   Até 900 px o detalhe abre em tela cheia; dali para cima fica à direita. A grade da Semana e as colunas
   da Lista dependem da largura do miolo (container query), não da janela: o detalhe ocupa espaço.
   =================================================================================================== */

:focus-visible { outline: 3px solid rgba(200, 150, 62, 0.7); outline-offset: 2px; }

.cronograma { max-width: 1480px; margin: 0 auto; padding: 0 16px 56px; }
.miolo { min-width: 0; }

/* Status: cada elemento com status-X / selo-X / chip-X ganha as três cores dele */
.status-para_aprovar, .selo-para_aprovar, .chip-para_aprovar {
  --cor-status: var(--para-aprovar); --tinta-status: var(--para-aprovar-tinta); --texto-status: var(--para-aprovar-texto);
}
.status-aprovado, .selo-aprovado, .chip-aprovado {
  --cor-status: var(--aprovado); --tinta-status: var(--aprovado-tinta); --texto-status: var(--aprovado-texto);
}
.status-no_ar, .selo-no_ar, .chip-no_ar {
  --cor-status: var(--no-ar); --tinta-status: var(--no-ar-tinta); --texto-status: var(--no-ar-texto);
}
.status-reprovado, .selo-reprovado, .chip-reprovado {
  --cor-status: var(--reprovado); --tinta-status: var(--reprovado-tinta); --texto-status: var(--reprovado-texto);
}
.status-em_revisao, .selo-em_revisao, .chip-em_revisao {
  --cor-status: var(--em-revisao); --tinta-status: var(--em-revisao-tinta); --texto-status: var(--em-revisao-texto);
}

.selo {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--tinta-status, var(--creme-escuro));
  color: var(--texto-status, var(--texto));
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.selo-ajuste { background: #f4ead6; color: var(--dourado-escuro); }

/* --- barra ---------------------------------------------------------------------------------------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 -16px;
  padding: 10px 16px 8px;
  background: rgba(246, 244, 239, 0.94);
  border-bottom: 1px solid var(--borda);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.barra-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.total { margin-left: auto; font-size: 13px; color: var(--texto-leve); font-variant-numeric: tabular-nums; }

.modos {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--verde);
  border-radius: 11px;
  background: var(--papel);
}
.modo {
  padding: 6px 16px;
  border-radius: 8px;
  color: var(--verde);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}
.modo:hover { background: rgba(45, 90, 58, 0.08); }
.modo.ligado { background: var(--verde); color: var(--creme); }

.semana-nav { display: inline-flex; align-items: center; gap: 4px; }
.semana-nav .seta {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--verde);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
}
.semana-nav .seta:hover { background: rgba(45, 90, 58, 0.1); }
.periodo { min-width: 74px; font-family: var(--serifa); font-size: 17px; font-weight: 700; color: var(--verde-escuro); text-align: center; }
.volta-hoje { margin-left: 4px; font-size: 13px; font-weight: 700; color: var(--dourado-escuro); }

.chips {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chips-sep { flex: none; width: 1px; margin: 4px 2px; background: var(--borda); }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--papel);
  color: var(--texto);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.chip:hover { border-color: var(--cor-status, var(--verde)); }
.chip .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--cor-status); }
.chip .conta {
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--creme-escuro);
  color: var(--texto-leve);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.chip-status.ligado {
  background: var(--tinta-status);
  border-color: var(--cor-status);
  color: var(--texto-status);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--cor-status);
}
.chip-status.ligado .conta { background: var(--cor-status); color: var(--branco); }
.chip-tipo.ligado { background: var(--verde); border-color: var(--verde); color: var(--creme); font-weight: 700; }
.chip-tipo.ligado .conta { background: rgba(246, 244, 239, 0.22); color: var(--creme); }
.chip-limpar { border-style: dashed; color: var(--texto-leve); }

.vista { container-type: inline-size; padding-top: 4px; transition: opacity var(--transicao); }
.carregando .vista { opacity: 0.55; }

/* --- Lista ---------------------------------------------------------------------------------------- */
.anteriores { margin: 14px 0 0; font-size: 14px; }
.anteriores a, .lista-vazia a { color: var(--dourado-escuro); font-weight: 700; }

.dia-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 12px;
  font-family: var(--serifa);
  font-size: 21px;
  font-weight: 700;
  color: var(--verde);
  letter-spacing: 0.01em;
}
.dia-titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--dourado), rgba(200, 150, 62, 0)); }
.dia-hoje .dia-titulo { font-size: 27px; color: var(--verde-escuro); }
.dia-passado { opacity: 0.8; }
.dia-vazio, .lista-vazia { margin: 0; color: var(--texto-leve); font-style: italic; }
.lista-vazia { margin-top: 24px; }

.cartoes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@container (min-width: 700px) {
  .cartoes { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

.cartao {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 10px 12px 10px 10px;
  border-radius: 14px;
  background: var(--papel);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--sombra-cartao), inset 4px 0 0 var(--cor-status);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(31, 64, 41, 0.6), inset 4px 0 0 var(--cor-status); }
.cartao:active { transform: translateY(0); }
.cartao.escolhido { box-shadow: 0 0 0 2px var(--verde), 0 14px 28px -18px rgba(31, 64, 41, 0.6), inset 4px 0 0 var(--cor-status); }

.miniatura {
  position: relative;
  flex: none;
  width: 78px;
  margin-left: 4px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(160deg, #3a2a1a, #a86a2a);
}
.miniatura.f-9x16 { aspect-ratio: 9 / 16; }
.miniatura.f-4x5, .miniatura.f-texto { aspect-ratio: 4 / 5; }
.miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
@container (min-width: 520px) { .miniatura { width: 92px; } }

.play {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15, 12, 9, 0.6);
}
.play::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--creme);
}

.midia-ausente, .midia-texto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 6px;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
}
.midia-ausente { background: repeating-linear-gradient(135deg, #f3e3e3 0 8px, #fbefef 8px 16px); color: var(--reprovado); font-weight: 700; }
.midia-texto {
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  background: #fbf3e2;
  color: #4a3a22;
  font-family: var(--serifa);
  text-align: left;
}
.falhou img { display: none; }
.falhou::after {
  content: "sem miniatura";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(246, 244, 239, 0.85);
  font-size: 11px;
}

.corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.linha-hora { display: flex; align-items: baseline; gap: 10px; }
.hora {
  font-family: var(--serifa);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  color: var(--verde-escuro);
  font-variant-numeric: lining-nums tabular-nums;
}
.tipo { font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dourado-escuro); }
.titulo {
  display: -webkit-box;
  overflow: hidden;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.selos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nota { font-size: 13px; color: var(--texto-leve); }
.codigo { margin-top: auto; font-size: 12px; color: var(--texto-leve); letter-spacing: 0.02em; }

/* --- Semana: com pouco espaço um dia por linha (manhã · tarde · noite); com espaço, 7 colunas ---------- */
.semana { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.semana-rotulos, .dia-col { display: grid; grid-template-columns: 52px repeat(3, minmax(0, 1fr)); gap: 6px; }
.semana-rotulos span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-leve);
  text-align: center;
}
.dia-col { padding: 6px; border-radius: 12px; background: rgba(255, 253, 248, 0.6); }
.dia-col.dia-hoje { background: rgba(200, 150, 62, 0.13); box-shadow: inset 0 0 0 1px rgba(200, 150, 62, 0.45); }
.coluna-titulo {
  align-self: center;
  margin: 0;
  font-family: var(--serifa);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--verde);
}
.dia-hoje .coluna-titulo { color: var(--dourado-escuro); }
.faixa {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  min-height: 44px;
  padding: 3px;
  border-radius: 9px;
  background: rgba(236, 231, 220, 0.55);
}

.cartao.mini { display: block; padding: 0; overflow: hidden; border-radius: 8px; box-shadow: var(--sombra-cartao); }
.cartao.mini:hover { box-shadow: 0 10px 20px -14px rgba(31, 64, 41, 0.7); }
.cartao.mini.escolhido { box-shadow: 0 0 0 2px var(--verde); }
.mini-midia { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #3a2a1a, #a86a2a); }
.mini-midia img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini-midia .midia-texto, .mini-midia .midia-ausente { font-size: 10px; }
.mini-rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 4px;
  padding: 3px 5px;
  border-top: 3px solid var(--cor-status);
  background: var(--papel);
}
.mini-rotulo .hora { font-size: 14px; }
.mini-rotulo .selo { padding: 0 6px; font-size: 10px; }

@container (min-width: 640px) {
  .semana {
    display: grid;
    grid-template-columns: 30px repeat(7, minmax(0, 1fr));
    grid-template-rows: auto repeat(3, minmax(92px, auto));
    gap: 6px;
  }
  .semana-rotulos, .dia-col { display: contents; }
  .semana-rotulos span { grid-column: 1; align-self: center; justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }
  .semana-rotulos .r0 { grid-row: 1; }
  .semana-rotulos .r1 { grid-row: 2; }
  .semana-rotulos .r2 { grid-row: 3; }
  .semana-rotulos .r3 { grid-row: 4; }
  .d1 > * { grid-column: 2; }
  .d2 > * { grid-column: 3; }
  .d3 > * { grid-column: 4; }
  .d4 > * { grid-column: 5; }
  .d5 > * { grid-column: 6; }
  .d6 > * { grid-column: 7; }
  .d7 > * { grid-column: 8; }
  .coluna-titulo { grid-row: 1; padding: 6px 0; border-bottom: 2px solid transparent; font-size: 14px; text-align: center; }
  .dia-hoje .coluna-titulo { border-bottom-color: var(--dourado); }
  .faixa-manha { grid-row: 2; }
  .faixa-tarde { grid-row: 3; }
  .faixa-noite { grid-row: 4; }
  .dia-hoje .faixa { background: rgba(200, 150, 62, 0.14); }
}

/* --- detalhe ---------------------------------------------------------------------------------------- */
.detalhe { outline: none; }
.detalhe-vazio { display: none; }

.painel-detalhe { overflow: clip; border-radius: 18px; background: var(--papel); box-shadow: var(--sombra-alta); }
.detalhe-topo {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--palco);
  color: var(--creme);
  border-bottom: 3px solid var(--cor-status);
}
.detalhe-posicao { font-size: 13px; opacity: 0.8; font-variant-numeric: tabular-nums; }
.detalhe-navegar { display: inline-flex; gap: 6px; }
.botao-icone {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(246, 244, 239, 0.12);
  color: inherit;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  transition: background var(--transicao);
}
.botao-icone:hover { background: rgba(246, 244, 239, 0.24); }
.botao-icone:disabled { opacity: 0.3; cursor: default; }

.palco { display: flex; justify-content: center; padding: 14px; background: radial-gradient(ellipse at 50% 0%, #2c2318, var(--palco) 70%); }
.carrossel { position: relative; height: min(62vh, 620px); max-width: 100%; aspect-ratio: 9 / 16; }
.f-4x5 .carrossel { height: min(54vh, 540px); aspect-ratio: 4 / 5; }
.tela { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; margin: 0; }
.tela.ativa { display: flex; }
.tela video, .tela img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #000; }
.midia-ausente.grande { flex-direction: column; gap: 6px; width: 100%; border-radius: 10px; font-size: 15px; }
.midia-ausente.grande span { font-weight: 400; color: var(--texto-leve); }
.carrossel-seta {
  position: absolute;
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.88);
  color: var(--verde-escuro);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.carrossel-seta.antes { left: 6px; }
.carrossel-seta.depois { right: 6px; }
.carrossel-conta {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(15, 12, 9, 0.65);
  color: var(--creme);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.palco-texto {
  max-width: 36ch;
  margin: 12px 0;
  padding: 22px 22px 26px;
  border-radius: 6px 6px 18px 6px;
  background: #fbf3e2;
  color: #3a2d19;
  font-family: var(--serifa);
  font-size: 18px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.palco-texto p { margin: 0; }

.detalhe-info { padding: 16px 18px 26px; }
.detalhe-quando { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-family: var(--serifa); }
.detalhe-hora { font-size: 44px; font-weight: 700; line-height: 1; color: var(--verde-escuro); font-variant-numeric: lining-nums tabular-nums; }
.detalhe-dia { font-size: 17px; font-weight: 700; color: var(--dourado-escuro); }
.detalhe-titulo { margin: 10px 0 4px; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.detalhe-tipo { margin: 0 0 10px; font-size: 13px; color: var(--texto-leve); }
.detalhe-tipo .codigo { font-size: inherit; }
.detalhe-selos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.detalhe-selos .selo { padding: 3px 11px; font-size: 13px; }
.ajuste-aberto { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #f6edda; color: #5c4116; font-size: 14px; }
.ver-no-ar { display: inline-block; margin-top: 10px; color: var(--no-ar); font-weight: 700; }

.mensagem { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.mensagem.ok { background: var(--aprovado-tinta); color: var(--aprovado-texto); }
.mensagem.erro { background: var(--reprovado-tinta); color: var(--reprovado-texto); }
.mensagem a { color: inherit; font-weight: 700; }

.acoes {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px -18px 0;
  padding: 10px 18px 12px;
  background: linear-gradient(rgba(255, 253, 248, 0.85), var(--papel) 30%);
}
.acao {
  min-height: 48px;
  padding: 8px 6px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--branco);
  color: var(--texto);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.acao:hover { border-color: var(--verde); }
.acao:active { transform: scale(0.98); }
.acao.aberta { border-color: var(--dourado); background: #fbf3e2; }
.acao-aprovar {
  order: -1;
  grid-column: 1 / -1;
  min-height: 54px;
  border-color: var(--verde);
  background: var(--verde);
  color: var(--creme);
  font-size: 17px;
}
.acao-aprovar:hover { background: var(--verde-escuro); }
.acao-recusar { color: var(--reprovado); }
.acao:disabled { opacity: 0.55; cursor: progress; }

.campo-acao { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 12px; background: #fbf3e2; }
.campo-acao[hidden] { display: none; }
.campo-acao label { font-size: 14px; font-weight: 700; }
.campo-acao p { margin: 0; }
.campo-acao textarea, .campo-acao input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--branco);
  color: var(--texto);
  font: inherit;
  resize: vertical;
}
.campo-acao textarea:focus, .campo-acao input:focus { outline: 3px solid rgba(200, 150, 62, 0.45); border-color: var(--dourado); }
.campo-dica { font-size: 13px; color: #6b5330; }
.campo-botoes { display: flex; justify-content: flex-end; gap: 8px; }
.botao-confirma, .botao-perigo, .botao-leve-escuro {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.botao-confirma { background: var(--verde); color: var(--creme); }
.botao-perigo { background: var(--reprovado); color: var(--branco); }
.botao-leve-escuro { border-color: var(--borda); background: var(--branco); color: var(--texto); }

.legenda, .historico { margin-top: 22px; }
.legenda h3, .historico h3 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dourado-escuro);
}
.legenda p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.historico ol { margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--creme-escuro); }
.historico li { position: relative; padding: 3px 0 3px 4px; font-size: 14px; color: var(--texto-leve); }
.historico li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dourado);
}
.historico time { margin-right: 6px; color: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Celular: o detalhe cobre a tela e desliza de lado */
@media (max-width: 899px) {
  .detalhe {
    position: fixed;
    inset: 0;
    z-index: 30;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--papel);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 220ms ease-out, visibility 0s linear 220ms;
  }
  .detalhe-aberto { overflow: hidden; }
  .detalhe-aberto .detalhe { visibility: visible; transform: none; transition: transform 220ms ease-out; }
  .painel-detalhe { min-height: 100%; border-radius: 0; box-shadow: none; }
  .carrossel { height: min(58vh, 560px); }
  .f-4x5 .carrossel { height: min(50vh, 470px); }
}

/* Computador: o detalhe fica à direita, parado enquanto a lista rola */
@media (min-width: 900px) {
  .cronograma {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(350px, 31vw, 440px);
    gap: 24px;
    align-items: start;
    padding: 0 24px 56px;
  }
  .barra { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .chips { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .detalhe { position: sticky; top: 14px; max-height: calc(100vh - 28px); margin-top: 14px; overflow-y: auto; border-radius: 18px; scrollbar-width: thin; }
  .detalhe-vazio {
    display: block;
    padding: 34px 26px;
    border: 2px dashed var(--borda);
    border-radius: 18px;
    color: var(--texto-leve);
    text-align: center;
  }
  .detalhe-vazio-titulo { margin: 0 0 6px; font-family: var(--serifa); font-size: 22px; font-weight: 700; color: var(--verde); }
  .detalhe-vazio-dica { font-size: 13px; }
  .acoes { position: static; margin: 16px 0 0; padding: 0; background: none; }
  .carrossel { height: min(56vh, 600px); }
  .f-4x5 .carrossel { height: min(46vh, 520px); }
}

.tela.falhou video, .tela.falhou img { display: none; }
.tela.falhou::after { content: "Não consegui abrir a mídia."; position: static; color: var(--creme); font-size: 15px; }

/* Recado curto no pé da tela (falta de internet, lista que não atualizou) */
.recado {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 50;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--palco);
  color: var(--creme);
  font-size: 14px;
  box-shadow: var(--sombra-alta);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity var(--transicao), transform var(--transicao);
}
.recado.visivel { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}