/* Tokens extraídos de membros.dominus.site (referência visual pedida) */
:root {
  --bg: #000;
  --text: #EDF4EB;
  --text-dim: #A7B7A4;
  --heading: #F6FBF5;
  --accent: #41F20A;
  --accent-dark: #062800;
  --card-bg: rgba(2, 8, 2, .44);
  --card-border: rgba(255, 255, 255, .11);
  --glass-bg: rgba(0, 0, 0, .30);
  --badge-bg: rgba(255, 255, 255, .06);
  --badge-border: rgba(255, 255, 255, .1);
  --badge-text: #D9E4D6;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  background-image:
    radial-gradient(50vw 80vw at 50% -10%, rgba(26, 131, 0, .14), rgba(0, 0, 0, 0) 70%),
    radial-gradient(40vw 60vw at 85% 80%, rgba(12, 74, 20, .18), rgba(0, 0, 0, 0) 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  min-height: 100vh;
}

h1, h2, h3, .brand {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  color: var(--heading);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
h1 { font-size: 26px; font-weight: 600; }

a { color: var(--accent); }

/* --- Navegação: migalhas no topo e dock no rodapé ------------------------
   Redesenho aprovado em 14/09/2026 (HANDOFF-redesenho-painel.md). O menu
   lateral saiu: o conteúdo ganha os 208 px dele. CSS transplantado de
   interface/prototipo-dock.html. */
:root {
  --popover: #0B100B;
  --amber: #F2C94C;
  --dock-escala: .85;   /* o dock inteiro, um número só (aprovado: 85%) */
}

.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  /* Altura fixa: o texto das migalhas cresce perto do cursor e a barra
     não pode crescer junto (pedido de 14/09/2026). */
  height: 52px; padding: 0 28px; border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(10px);
}
.migalhas { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 500; min-width: 0; }
.migalhas a { color: var(--text-dim); text-decoration: none; border-radius: 6px; white-space: nowrap; }
.migalhas a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.migalhas a:focus-visible, .app:focus-visible, .sel-trigger:focus-visible, .barra-dir .sair:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.migalhas .sep { color: rgba(255, 255, 255, .28); display: inline-flex; }
.migalhas .sep svg { width: 14px; height: 14px; }
.migalhas .atual { color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Movimento das migalhas (aprovado em 14/09/2026, static/migalhas.js): cada
   nível novo entra em sequência, e perto do cursor o TEXTO cresce com a curva
   do dock -- a fonte maior reflui a linha e afasta os vizinhos. Espaçamento e
   ícone da casa em em, pra crescerem junto. As setas não reagem. */
.migalhas a, .migalhas .atual { padding: 4px 6px; line-height: 20px; transition: font-size 90ms ease-out, color 120ms ease-out, background-color 120ms ease-out; }
.migalhas .home { display: inline-flex; padding: 4px; }
.migalhas .home svg { width: 1.2em; height: 1.2em; }
@keyframes mig-entra { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: none; } }
.migalhas .entra { animation: mig-entra 240ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .migalhas .entra { animation: none; }
  .migalhas a, .migalhas .atual { transition: none; }
}
.barra-dir { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }
.barra-dir .sair {
  background: none; border: 1px solid var(--card-border); color: var(--text); cursor: pointer;
  font: 600 12px 'Inter Tight', sans-serif; padding: 5px 10px; border-radius: 8px;
  transition: background-color 120ms ease-out;
}
.barra-dir .sair:hover { background: rgba(255, 255, 255, .06); }
@media (max-width: 640px) { .barra { padding: 10px 16px; } .barra-dir .email { display: none; } }

/* Seletor (desenho do shadcn, em HTML puro; static/seletor.js monta). */
.sel { position: relative; display: inline-block; }
.sel-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 40px; min-width: 260px; max-width: 100%; padding: 0 10px 0 12px; border-radius: 10px;
  border: 1px solid var(--card-border); background: rgba(255, 255, 255, .03); color: var(--text);
  font: 500 14px 'Inter Tight', sans-serif; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.sel-trigger:hover { background: rgba(255, 255, 255, .06); }
.sel-trigger[aria-expanded="true"] { border-color: rgba(65, 242, 10, .45); }
.sel-trigger[aria-invalid="true"] { border-color: rgba(255, 107, 107, .6); }
.sel-trigger .sel-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-trigger .sel-valor.placeholder { color: var(--text-dim); }
.sel-trigger svg { width: 16px; height: 16px; color: var(--text-dim); flex: none; }
.sel-popup {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 100%; max-height: 320px; overflow-y: auto;
  padding: 4px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--popover);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  transform-origin: top; animation: sel-abrir 120ms ease-out;
}
@keyframes sel-abrir { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .sel-popup { animation: none; } }
.sel-label { padding: 6px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.sel-sep { height: 1px; background: var(--card-border); margin: 4px -4px; }
.sel-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 8px; border-radius: 6px; font-size: 13.5px; cursor: pointer; color: var(--text); white-space: nowrap;
}
.sel-item[data-ativo] { background: rgba(255, 255, 255, .07); }
.sel-item[aria-selected="true"] { color: var(--accent); }
.sel-item .check { width: 15px; height: 15px; flex: none; visibility: hidden; }
.sel-item[aria-selected="true"] .check { visibility: visible; }
.sel-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Dock de etapas (static/dock.js dimensiona e amplia). */
.dock-wrap { position: fixed; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; z-index: 40; pointer-events: none; }
.dock {
  pointer-events: auto; position: relative;
  transform: scale(var(--dock-escala)); transform-origin: 50% 100%;
  background: rgba(20, 24, 20, .72); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .25);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.dock-trilho { position: relative; }
.app {
  position: absolute; bottom: 0; display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer; text-decoration: none; transform-origin: bottom center;
}
.app .tile {
  width: 100%; height: 100%; border-radius: 22%; display: flex; align-items: center; justify-content: center;
  background: var(--tile); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .45);
  filter: grayscale(1) brightness(.72) contrast(.95); transition: filter 220ms ease-out;
}
.app .tile svg { flex: none; display: block; color: #fff; stroke-width: 2.25; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.app.ativo .tile, .app:hover .tile, .app:focus-visible .tile { filter: none; }
.app .marca-ativa { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 4px rgba(0, 0, 0, .5); opacity: 0; }
.app.ativo .marca-ativa { opacity: 1; }
.app .cont {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--amber); color: #2a1f00; font: 700 11px/18px 'Inter Tight', sans-serif; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.app .dock-rotulo {
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translate(-50%, 4px);
  background: rgba(20, 24, 20, .92); border: 1px solid rgba(255, 255, 255, .14); color: var(--text);
  font: 600 12px 'Inter Tight', sans-serif; padding: 4px 9px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.app:hover .dock-rotulo, .app:focus-visible .dock-rotulo { opacity: 1; transform: translate(-50%, 0); }
.app.pulo .tile { animation: pulo 420ms ease-out; }
@keyframes pulo { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14%); } }
@media (prefers-reduced-motion: reduce) { .app.pulo .tile { animation: none; } .app .tile { transition: none; } }
/* Cor de cada etapa: só a ativa (e a sob o mouse) aparece em cor. */
.app[data-etapa="hoje"] { --tile: linear-gradient(160deg, #8dff5e, #1a8300); }
.app[data-etapa="transcricao"] { --tile: linear-gradient(160deg, #c4b5fd, #5b21b6); }
.app[data-etapa="avatares"] { --tile: linear-gradient(160deg, #fdba74, #c2410c); }
.app[data-etapa="reescrita"] { --tile: linear-gradient(160deg, #7dd3fc, #0369a1); }
.app[data-etapa="producao"] { --tile: linear-gradient(160deg, #fca5a5, #b91c1c); }
.app[data-etapa="traducao"] { --tile: linear-gradient(160deg, #fde68a, #b45309); }
.app[data-etapa="dashboard"] { --tile: linear-gradient(160deg, #99f6e4, #0f766e); }

/* O conteúdo usa a largura que o menu lateral ocupava e ganha respiro
   embaixo pra nada ficar atrás do dock. */
.container { max-width: 1840px; margin: 0 auto; padding: 24px 28px 150px; }
@media (max-width: 640px) { .container { padding: 16px 16px 130px; } }

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
}

.row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--badge-bg); border: 1px solid var(--badge-border);
  color: var(--badge-text); border-radius: 10px; padding: 4px 10px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.badge.ok { color: var(--accent); border-color: rgba(65, 242, 10, .22); background: rgba(65, 242, 10, .08); }
.badge.warn { color: #F2C94C; border-color: rgba(242, 201, 76, .25); background: rgba(242, 201, 76, .08); }
.badge.fail { color: #FF6B6B; border-color: rgba(255, 107, 107, .25); background: rgba(255, 107, 107, .08); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 12px; border: none; cursor: pointer;
  font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 13.5px;
  color: var(--accent-dark);
  background: linear-gradient(#7bfa45 0%, #41f20a 46%, #2bb102 64%, #1a8300 100%);
  box-shadow: 0 0 15px rgba(65, 242, 10, .25);
  transition: filter .15s;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.06); }
/* Sem isto, um botao desabilitado continuava verde e cheio de destaque -- a
   remessa ja transcrita parecia ter acao pendente, e o clique nao fazia nada
   sem explicar por que. Reportado em 07/09/2026. */
.btn:disabled {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--card-border);
  cursor: not-allowed; filter: none;
}
.btn:disabled:hover { filter: none; }
.btn.secondary {
  background: var(--badge-bg); color: var(--text);
  border: 1px solid var(--badge-border); box-shadow: none;
}

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; color: var(--text-dim); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
td { padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
tr:last-child td { border-bottom: none; }

.progress-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #1a8300, #41f20a); border-radius: 999px; }

.muted { color: var(--text-dim); font-size: 13px; }
.stat { min-width: 120px; }
.stat .muted { margin-bottom: 2px; }
.stat strong { font-size: 18px; font-family: 'Bricolage Grotesque', sans-serif; color: var(--heading); }

/* Checklist por vídeo (accordion em <details>) */
.job-card { padding: 0; overflow: hidden; }
.job-card summary {
  list-style: none; cursor: pointer; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.job-card summary::-webkit-details-marker { display: none; }
.job-card summary::before {
  content: "▸"; display: inline-block; margin-right: 10px; color: var(--text-dim);
  transition: transform .15s; font-size: 11px;
}
.job-card[open] summary::before { transform: rotate(90deg); }
.job-card summary .job-name { font-weight: 600; font-size: 14px; }
.job-card summary .job-meta { display: flex; align-items: center; gap: 12px; }

.checklist {
  display: flex; flex-direction: column; gap: 9px;
  padding: 4px 20px 18px 42px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: -1px; padding-top: 14px;
}
.checklist-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ci-cost { margin-left: auto; color: var(--text-dim); font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.ci-icon {
  width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.ci-done .ci-icon { background: rgba(65, 242, 10, .15); color: var(--accent); }
.ci-done .ci-icon::before { content: "✓"; }
.ci-running .ci-icon { background: rgba(242, 201, 76, .15); color: #F2C94C; animation: pulse 1.4s infinite; }
.ci-running .ci-icon::before { content: "●"; }
.ci-failed .ci-icon { background: rgba(255, 107, 107, .15); color: #FF6B6B; }
.ci-failed .ci-icon::before { content: "✕"; }
.ci-skipped .ci-icon { background: rgba(255, 255, 255, .06); color: var(--text-dim); }
.ci-skipped .ci-icon::before { content: "–"; }
.ci-pending .ci-icon { background: rgba(255, 255, 255, .03); color: rgba(167, 183, 164, .35); border: 1px dashed rgba(255, 255, 255, .1); }
.ci-pending .ci-label { color: rgba(167, 183, 164, .5); }
.ci-failed .ci-detail { color: #FF6B6B; }
.ci-detail { font-size: 12px; color: var(--text-dim); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.banner {
  padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(65, 242, 10, .22);
  background: rgba(65, 242, 10, .06); margin-bottom: 20px; font-size: 13.5px;
}
.banner.warn { border-color: rgba(242, 201, 76, .25); background: rgba(242, 201, 76, .08); }

/* Tela de login (mesma linguagem visual da área de membros) */
.login-page { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.login-head { text-align: center; margin-bottom: 28px; }
.login-head h1 {
  font-size: 30px; line-height: 1.25; margin: 0;
}
.login-head h1 .accent { color: var(--accent); display: block; }
.login-card { width: 100%; max-width: 400px; padding: 28px; }
.login-eyebrow {
  display: flex; align-items: center; gap: 8px; color: var(--text-dim);
  font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 20px;
}
.field { margin-bottom: 16px; }
.field-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.field label {
  font-size: 12.5px; font-weight: 600; color: var(--badge-text);
}
.field a.forgot { font-size: 12px; color: var(--text-dim); text-decoration: none; }
.field a.forgot:hover { color: var(--accent); }
.field .input-row { position: relative; display: flex; align-items: center; }
.field input {
  width: 100%; height: 46px; padding: 0 16px; border-radius: 14px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .42);
  color: var(--heading); font-family: 'Inter Tight', sans-serif; font-size: 15px;
}
.field input::placeholder { color: rgba(167, 183, 164, .55); }
.field input:focus { outline: none; border-color: rgba(65, 242, 10, .4); }
.field .toggle-senha {
  position: absolute; right: 8px; background: var(--badge-bg);
  border: 1px solid var(--badge-border); color: var(--badge-text);
  border-radius: 10px; padding: 5px 12px; font-size: 12.5px; font-weight: 500;
  cursor: pointer; font-family: 'Inter Tight', sans-serif;
}
.login-card .btn { width: 100%; height: 46px; margin-top: 4px; }
.login-card .btn:disabled { opacity: .65; cursor: wait; }
.login-hint { text-align: center; color: var(--text-dim); font-size: 12px; margin-top: 16px; }
.login-msg {
  font-size: 13px; padding: 10px 14px; border-radius: 10px; margin-bottom: 16px;
  background: rgba(255, 107, 107, .08); border: 1px solid rgba(255, 107, 107, .25); color: #FF9E9E;
}
.login-msg.ok { background: rgba(65, 242, 10, .08); border-color: rgba(65, 242, 10, .25); color: var(--accent); }

form.inline { display: inline; }

/* --- Reescrita de copy ---------------------------------------------------- */

.comparacao { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .comparacao { grid-template-columns: 1fr; } }

.rotulo {
  color: var(--text-dim); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px;
  display: block;
}
.texto-copy { line-height: 1.65; font-size: 14.5px; margin: 0 0 10px; }

/* O que saiu fica riscado e apagado; o que entrou, destacado no verde da
   marca. Nunca so a cor: o riscado e o sublinhado carregam a informacao
   sozinhos pra quem nao distingue vermelho de verde. */
/* Cada coluna marca so o seu lado, entao nao precisa mais de riscado nem
   sublinhado pra diferenciar: o fundo basta, e o texto continua legivel.
   O sublinhado fica so no verde, pra nao depender de cor sozinha. */
.d-saiu {
  background: rgba(255, 90, 90, .16); color: #FFC9C9;
  border-radius: 3px; padding: 1px 3px;
}
.d-entrou {
  background: rgba(65, 242, 10, .15); color: #D6FFC6;
  border-radius: 3px; padding: 1px 3px;
  text-decoration: underline; text-decoration-color: rgba(65, 242, 10, .45);
}

.topo-item {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.linha-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.linha-item-fim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Corpo comum travado na tela de um vídeo: lido, não editado. */
.corpo-travado {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px dashed var(--card-border); color: var(--text-dim);
}
.corpo-travado p { margin: 6px 0 0; line-height: 1.55; }

/* Vídeo sendo analisado na tela da copy. */
.analisando { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); }
.girando {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255, 255, 255, .15); border-top-color: var(--accent);
  animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 3s; } }

/* Aba Avatares: um quadro por vídeo, escolhido com borda verde. */
.grupo-avatar { margin: 18px 0 30px; }
.grade-avatares {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px; margin-top: 12px;
}
.avatar {
  display: flex; flex-direction: column; gap: 8px; padding: 8px;
  border: 1px solid var(--card-border); border-radius: 12px; background: var(--card-bg);
  transition: border-color 120ms ease-out;
}
.avatar.escolhido { border-color: rgba(65, 242, 10, .6); }
.avatar-quadro { position: relative; }
.avatar video {
  display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  background: #000; border-radius: 8px;
}
.previa-aviso {
  display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  color: var(--text-dim); pointer-events: none;
}
.avatar.sem-previa .previa-aviso { display: flex; }

.card.aviso { border-color: rgba(255, 200, 60, .35); }

input[type="text"], textarea {
  width: 100%; background: rgba(0, 0, 0, .35); color: var(--text);
  border: 1px solid var(--card-border); border-radius: 12px;
  font-family: 'Inter Tight', sans-serif; font-size: 14px; line-height: 1.6;
  padding: 12px; margin-bottom: 12px; resize: vertical;
}
input[type="text"]:focus, textarea:focus { outline: none; border-color: rgba(65, 242, 10, .45); }

select {
  background: rgba(0, 0, 0, .35); color: var(--text);
  border: 1px solid var(--card-border); border-radius: 12px;
  font-family: 'Inter Tight', sans-serif; font-size: 14px;
  padding: 10px 12px; min-width: 260px;
}

details summary {
  cursor: pointer; color: var(--text-dim); font-size: 14px;
  font-weight: 500; list-style: none;
}
details summary:hover { color: var(--text); }
details[open] summary { margin-bottom: 14px; }

.estatisticas { display: flex; gap: 34px; flex-wrap: wrap; }
.estatisticas .stat strong { font-size: 19px; }
.small { font-size: 12.5px; }

/* Alternador limpo/marcado sem JavaScript: o checkbox fica escondido e os
   dois paragrafos aparecem conforme o estado dele. */
.alternar { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
            text-transform: none; letter-spacing: 0; font-weight: 500; }
.alternar input { accent-color: var(--accent); cursor: pointer; }
/* O alternador esta fora das colunas e controla as duas. Marcado (padrao)
   mostra o texto com destaque; desmarcado mostra o texto limpo. */
.texto-copy.limpo { display: none; }
.texto-copy.marcado { display: block; }
body:has(#ver-diff:not(:checked)) .texto-copy.limpo { display: block; }
body:has(#ver-diff:not(:checked)) .texto-copy.marcado { display: none; }
.alternar.acima { margin: 0 0 12px; }

/* Editor da nossa versao: o textarea fica transparente por cima de uma
   camada com o mesmo texto e o verde do diff. Mesma fonte, mesmo padding e
   mesma quebra nos dois, senao o destaque sai do lugar da palavra. */
[hidden] { display: none !important; }

/* Previa do video do parceiro ao lado do veredito da abertura. Video em pe
   (9:16): altura limitada pra nao empurrar a copy pra baixo. */
.abertura-video { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.abertura-video .abertura-info { flex: 1; min-width: 260px; }
.previa-video { height: 320px; max-width: 100%; border-radius: 10px; background: #000; }
.editor-copy { position: relative; }
.editor-copy .editor-camada,
.editor-copy textarea {
  font-family: 'Inter Tight', sans-serif; font-size: 14.5px; line-height: 1.65;
  padding: 10px 12px; margin: 0; border: 1px solid transparent; border-radius: 12px;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
  letter-spacing: normal; box-sizing: border-box; width: 100%;
}
.editor-copy .editor-camada { color: var(--text); min-height: 120px; }
.editor-copy textarea {
  position: absolute; inset: 0; height: 100%; resize: none; overflow: hidden;
  background: transparent; color: transparent; caret-color: var(--text);
  border-color: var(--card-border);
}
.editor-copy textarea:focus { border-color: rgba(65, 242, 10, .45); }
.editor-copy textarea::selection { color: transparent; background: rgba(120, 170, 255, .35); }
/* Sem padding lateral aqui: 3 px a mais por palavra empurrariam a linha. */
.editor-copy .d-entrou { padding: 0; border-radius: 0; color: #D6FFC6; }
body:has(#ver-diff:not(:checked)) .editor-copy .d-entrou,
body:has(#ver-diff:not(:checked)) #orig-marcado .d-saiu {
  background: none; text-decoration: none; color: inherit;
}
/* Frase ao lado da frase: cada linha e uma grade de duas colunas, entao o
   trecho do parceiro e o nosso ficam sempre na mesma altura. */
.linha-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
              border-top: 1px solid rgba(255, 255, 255, .06); }
.linha-copy > :first-child { border-right: 1px solid rgba(255, 255, 255, .10); }
.linha-copy.cabecalho-copy { border-top: 0; padding-bottom: 8px; align-items: center; }
.linha-copy.cabecalho-copy > * { padding: 0 12px; }
@media (max-width: 900px) { .linha-copy { grid-template-columns: 1fr; } }
.orig-celula { font-size: 14.5px; line-height: 1.65; padding: 6px 12px; margin: 0; }
.orig-celula .d-saiu { padding: 0; border-radius: 0; }
/* Sem caixa em volta do texto editavel (pedido de 14/09/2026): so a linha do
   meio separa os lados. Ao clicar, um fundo leve mostra onde se esta digitando. */
.linha-editor .editor-camada,
.linha-editor textarea { min-height: 0; padding: 6px 12px; border-color: transparent; border-radius: 0; }
.linha-editor textarea:focus { border-color: transparent; background: rgba(255, 255, 255, .04); }
/* Editando uma frase: mostra o texto do próprio campo e a camada colorida some
   só nela (15/09/2026). O cursor fica sempre em cima da letra, mesmo quando o
   navegador ou uma extensão de correção desenha o campo um pouco diferente da
   camada -- no painel do usuário o cursor caía no meio do "u" de "que". O verde
   volta quando sai da frase. */
.linha-editor:focus-within .editor-camada,
.linha-editor:focus-within .editor-camada .d-entrou { color: transparent; background: none; text-decoration: none; }
.linha-editor:focus-within textarea { color: var(--text); }
.linha-editor:focus-within textarea::selection { color: var(--text); }
/* Marcando o fundo: mesmo texto solto da edicao, sem caixa (pedido de
   14/09/2026). So a frase marcada ganha o amarelo. */
.celula-fundo { font-size: 14.5px; line-height: 1.65; padding: 7px 12px; }
body:has(#ver-diff:not(:checked)) .orig-celula .d-saiu {
  background: none; text-decoration: none; color: inherit;
}
.frases-fundo { line-height: 1.9; font-size: 14.5px; padding: 10px 12px;
                border: 1px solid rgba(255, 200, 60, .35); border-radius: 12px; }
.frase-fundo { cursor: pointer; border-radius: 4px; padding: 1px 2px; }
.frase-fundo:hover { background: rgba(255, 255, 255, .08); }
.frase-fundo { transition: background-color 120ms ease-out; }
.frase-fundo.marcada { background: rgba(255, 200, 60, .30); color: #FFE9B0; }
.d-fundo-legenda { color: #FFE9B0; }
.abertura-ok { color: #9BE58A; }
.abertura-falta { color: #FFC46B; }
.badge.erro { color: #E88; border-color: rgba(255, 90, 90, .35); }
.erro-linha { color: #E88; font-size: 12px; margin-top: 4px; }
.engrenagem { font-size: 18px; line-height: 1; padding: 8px 12px; }

/* Confirmacao depois de salvar. Antes o formulario redirecionava calado e
   ficava a duvida de se gravou -- clicar e nao ter retorno e o tipo de coisa
   que faz a pessoa clicar de novo. */
/* Tela da copy: pendências e abas Roteiro / Vídeo (14/09/2026). */
.pendencias { display: flex; gap: 22px; flex-wrap: wrap; margin: -4px 0 14px; font-size: 13.5px; }
.pendencia { color: var(--text-dim); }
.pendencia .marca { display: inline-block; width: 1.1em; color: #FFC46B; }
.pendencia.feita { color: var(--text); }
.pendencia.feita .marca { color: var(--accent); }
.link-botao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.linha-iguais { margin: 0 0 12px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.link-botao { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer;
              font: inherit; text-decoration: underline; }
.acoes-discretas { margin-top: 10px; color: var(--text-dim); }
.acoes-discretas a, .acoes-discretas .link-botao { color: var(--text-dim); }
.partes-remessa { margin: -6px 0 14px; color: var(--text-dim); }
.partes-remessa a { color: var(--text-dim); }

/* Falha e bloqueio não podem ter a cara do sucesso (auditoria GPT, 14/09). */
.aviso-erro, .aviso-atencao {
  border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
  font-size: 14px; font-weight: 500;
}
.aviso-erro { background: rgba(255, 90, 90, .12); border: 1px solid rgba(255, 90, 90, .4); color: #FF9E9E; }
.aviso-atencao { background: rgba(255, 200, 60, .10); border: 1px solid rgba(255, 200, 60, .35); color: #FFD37A; }
.frase-fundo:focus-visible { outline: 2px solid rgba(255, 200, 60, .8); outline-offset: 2px; }
.aviso-ok {
  background: rgba(65, 242, 10, .12);
  border: 1px solid rgba(65, 242, 10, .3);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
  color: var(--accent); font-size: 14px; font-weight: 500;
}

/* A lista ABERTA do <select> nao herda o estilo do campo: o sistema desenha
   ela com o tema claro dele, e o texto claro do nosso tema sumia no fundo
   cinza. `color-scheme: dark` faz o proprio sistema desenhar em escuro, e as
   cores no <option> cobrem os navegadores que respeitam isso. */
select { color-scheme: dark; }
select option {
  background: #0B120A;
  color: var(--text);
  padding: 8px;
}
select option:checked { background: var(--accent-dark); color: var(--accent); }

/* Cartao que e link inteiro (a lista de remessas). Sem isto so o texto seria
   clicavel, e o alvo de clique ficaria menor do que parece. */
.bloco-link { text-decoration: none; color: inherit; display: flex; }
.bloco-link:hover { border-color: rgba(65, 242, 10, .35); }
.seta { color: var(--text-dim); font-size: 18px; }

/* Conferência da importação: cada opção é um cartão clicável inteiro, e a
   escolhida se destaca sozinha via :has() -- sem JS, o rádio é a fonte da
   verdade e a borda só reflete o que ele diz. */
.opcao-copy {
  display: block; cursor: pointer; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--card-border); border-radius: 10px;
}
.opcao-copy:hover { border-color: rgba(255, 255, 255, .24); }
.opcao-copy:has(input:checked) {
  border-color: var(--accent); background: rgba(65, 242, 10, .06);
}
.opcao-copy.vazia { padding: 9px 14px; margin-bottom: 0; }
.opcao-copy input[type="radio"] { accent-color: var(--accent); }

/* Link pro criativo no Drive, dentro do <summary> do job. `stopPropagation`
   no clique evita que abrir o link também abra/feche o card. */
.link-drive {
  color: var(--accent); text-decoration: none; font-size: 12px;
  border: 1px solid rgba(65, 242, 10, .3); border-radius: 6px;
  padding: 2px 8px; white-space: nowrap;
}
.link-drive:hover { background: rgba(65, 242, 10, .1); }

/* --- Tela do vídeo numa vista só (fase 2 do redesenho, 14/09/2026) --------
   Vídeo e abertura à esquerda, copy no meio, contexto à direita. Um botão
   verde só (Aprovar e próximo); o resto é contorno. */
.rev { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1200px) { .rev { grid-template-columns: 260px minmax(0, 1fr); } .rev-contexto { grid-column: 1 / -1; } }
@media (max-width: 720px) { .rev { grid-template-columns: 1fr; } .rev-video { position: static; } }
.rev-video { position: sticky; top: 62px; }
.previa-video { display: block; width: 100%; max-height: 420px; border-radius: 10px; background: #000; }
.previa-vazia { aspect-ratio: 9 / 16; max-height: 420px; width: 100%; border-radius: 10px; border: 1px dashed var(--card-border); background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.quadros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.quadros figure { margin: 0; }
.quadros img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 5px; border: 1px solid var(--card-border); background: #111; }
.quadros figcaption { font-size: 10.5px; color: var(--text-dim); text-align: center; margin-top: 2px; }
.abertura-bloco { margin-top: 12px; }
.seg { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.seg .chip { flex: 0 0 auto; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 10px; cursor: pointer;
  border: 1px solid var(--badge-border); background: var(--badge-bg); color: var(--text);
  font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 12px; white-space: nowrap;
}
.chip:hover { background: rgba(255, 255, 255, .09); }
/* Selecionado: borda e texto verdes com a marca, nunca verde cheio (um botão
   verde cheio por tela, e a tecla de atalho não se lia sobre o verde). */
.chip[aria-pressed="true"] { background: rgba(65, 242, 10, .13); color: var(--accent); border-color: rgba(65, 242, 10, .7); }
.chip[aria-pressed="true"]::before { content: "✓"; font-size: 11px; }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kbd {
  font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.4;
  border: 1px solid var(--card-border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--text-dim);
}
.btn .kbd { color: inherit; opacity: .85; border-color: rgba(0, 0, 0, .35); }
.btn.secondary .kbd { border-color: var(--card-border); color: var(--text-dim); opacity: 1; }
.chip[aria-pressed="true"] .kbd { color: var(--accent); border-color: rgba(65, 242, 10, .45); }
.btn.leve { background: none; border-color: transparent; color: var(--text-dim); box-shadow: none; }
.btn.leve:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.btn.small { height: 30px; padding: 0 10px; font-size: 12.5px; }
.trilho { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; flex-wrap: wrap; }
.trilho .ponto { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: inline-block; }
.trilho .ponto.feito { background: var(--accent); }
.trilho .ponto.pendente { background: #F2C94C; }
.trilho .ponto.atual { outline: 2px solid #fff; outline-offset: 1px; }
.trilho .ponto:hover { transform: scale(1.4); }
.trilho .muted { margin-left: 6px; }
.painel-reprovar textarea { margin-bottom: 8px; }
/* Fundo e refazer marcados por modo (15/09/2026): nenhum botão na linha. Com o
   modo ligado na lateral, a frase vira clicável; a de fundo fica âmbar e a de
   refazer, vermelha. */
.linha-copy .celula-nossa { position: relative; }
.linha-copy.com-fundo .celula-nossa { background: rgba(255, 200, 60, .08); box-shadow: inset 3px 0 0 rgba(255, 200, 60, .6); }
.linha-copy.com-refazer .celula-nossa { background: rgba(255, 90, 90, .08); box-shadow: inset 3px 0 0 rgba(255, 90, 90, .6); }
.linha-copy.com-refazer.com-fundo .celula-nossa { background: rgba(255, 150, 70, .10); }
#linhas[data-modo] .celula-nossa { cursor: pointer; transition: background 120ms ease-out; }
#linhas[data-modo] .celula-nossa textarea { pointer-events: none; }
#linhas[data-modo="fundo"] .celula-nossa:hover { background: rgba(255, 200, 60, .16); }
#linhas[data-modo="refazer"] .celula-nossa:hover { background: rgba(255, 90, 90, .16); }
.btn-modo { width: 100%; transition: border-color 120ms ease-out, color 120ms ease-out; }
.btn-modo[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.rev-contexto .card { padding: 14px 16px; margin-bottom: 10px; }
/* Sem espaço morto em cima do título do cartão (15/09/2026). */
.rev-contexto .card > h2:first-child { margin-top: 0; }
/* Gavetas da lateral (15/09/2026): Reprovar e Modelo abrem e fecham no título. */
details.gaveta > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; border-radius: 6px; }
details.gaveta > summary::-webkit-details-marker { display: none; }
details.gaveta > summary h2 { font-size: 15px; margin: 0; flex: 1; }
details.gaveta > summary .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
details.gaveta > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gaveta-seta { flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); opacity: .7; transition: transform 120ms ease-out; }
details.gaveta[open] .gaveta-seta { transform: rotate(45deg); }
.gaveta-corpo { margin-top: 12px; }
.modelos { display: grid; gap: 6px; }
.modelo-opcao { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px; cursor: pointer; transition: border-color 120ms ease-out; }
.modelo-opcao:hover { border-color: rgba(255, 255, 255, .28); }
.modelo-opcao:has(input:checked) { border-color: var(--accent); }
.modelo-opcao input { width: auto; margin: 0; accent-color: var(--accent); }
.modelo-opcao .muted { margin-left: auto; white-space: nowrap; }
.proposta:not(:empty) { margin-top: 12px; }
.proposta-topo { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.proposta-texto { max-height: 320px; overflow-y: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.55; padding: 10px 12px;
  border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.proposta-acoes { display: flex; gap: 8px; margin-top: 8px; }
.proposta-acoes form { flex: 1; margin: 0; }
.proposta-acoes form .btn { width: 100%; }
.rev-contexto .card > :last-child { margin-bottom: 0; }
.pend-linha { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pend-linha:last-child { border-bottom: 0; }
.ponto-p { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); flex: none; display: inline-block; }
.ponto-p.ok { background: var(--accent); }
.ponto-p.falta { background: #F2C94C; }
.estado-rascunho { color: var(--text-dim); }
.atalhos-lista { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-dim); }

/* --- Hoje, Produção, página da remessa, Avatares e Dashboard (fases 3 a 7,
   15/09/2026) ------------------------------------------------------------ */
h2 { font-size: 19px; margin: 26px 0 8px; }
.hoje { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .hoje { grid-template-columns: 1fr; } }
.lista-remessas { display: flex; flex-direction: column; gap: 8px; }
.rem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--card-bg); }
.rem .nome { font-weight: 600; font-size: 15px; }
.rem .nome a { color: var(--text); text-decoration: none; }
.rem .nome a:hover { text-decoration: underline; }
.rem .estado { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.hoje-lado .card { margin-bottom: 10px; }
.chip.ok { color: var(--accent); border-color: rgba(65, 242, 10, .3); background: rgba(65, 242, 10, .08); }
.chip.warn { color: #F2C94C; border-color: rgba(242, 201, 76, .3); background: rgba(242, 201, 76, .08); }
.chip.bad { color: #FF6B6B; border-color: rgba(255, 107, 107, .3); background: rgba(255, 107, 107, .08); }
.chip.ok, .chip.warn, .chip.bad { cursor: default; }
.ponto-p.bad { background: #FF6B6B; }
.regua-etapas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 4px 0 14px; }
@media (max-width: 900px) { .regua-etapas { grid-template-columns: repeat(3, 1fr); } }
.regua-etapas .etapa { border-top: 3px solid rgba(255, 255, 255, .14); padding-top: 6px; font-size: 12.5px; color: var(--text-dim); }
.regua-etapas .etapa b { display: block; color: var(--text); font-size: 13px; }
.regua-etapas .etapa.feito { border-top-color: var(--accent); }
.regua-etapas .etapa.parcial { border-top-color: #F2C94C; }
/* Remessa transcrevendo agora: só o girador amarelo na régua (15/09/2026). */
.girando.amarelo { border-top-color: #F2C94C; }
.regua-etapas .etapa .girando { display: inline-block; vertical-align: -2px; margin-left: 7px; width: 12px; height: 12px; }
.regua-etapas .etapa.andando { border-top-color: #F2C94C; }

/* Página da remessa enquanto transcreve: status centralizado e cada copy
   aparecendo quando fica pronta. */
.transcrevendo { text-align: center; padding: 34px 20px 26px; }
.transcrevendo .girando { width: 34px; height: 34px; border-width: 3px; margin: 0 auto 14px; }
.transcrevendo h2 { margin: 0 0 4px; font-size: 18px; }
.transcrevendo.acabou .girando { border-color: var(--accent); animation: none; }
.copies-vivas { display: grid; gap: 12px; margin-top: 14px; }
.copy-viva { animation: copy-entra .6s cubic-bezier(.2, .8, .2, 1) both; }
.copy-viva .texto-copy { animation: copy-texto .9s ease .25s both; margin: 0; }
.copy-viva .cabeca { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
@keyframes copy-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes copy-texto { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .copy-viva, .copy-viva .texto-copy { animation: none; } }
/* Cartão de remessa com a régua no meio (15/09/2026): nome à esquerda, régua
   centralizada, ações à direita; em tela estreita empilha. */
.cartao-remessa { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 3.4fr) minmax(170px, 1fr); align-items: center; gap: 28px; }
.cartao-remessa .cartao-nome { display: block; min-width: 0; }
.cartao-remessa .cartao-nome strong { display: block; font-size: 15px; }
.cartao-remessa .cartao-nome .chip { margin-top: 6px; }
.cartao-remessa .cartao-regua { display: block; min-width: 0; }
.cartao-remessa .linha-item-fim { justify-content: flex-end; }
.regua-cartao { margin: 0; gap: 14px; }
@media (max-width: 900px) {
  .cartao-remessa { grid-template-columns: 1fr; gap: 12px; }
  .cartao-remessa .linha-item-fim { justify-content: flex-start; }
}
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.tabela-remessa td { padding: 9px 12px; white-space: nowrap; }
.tabela-remessa td:first-child { white-space: normal; }
.estado-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); margin-right: 7px; vertical-align: 1px; }
.estado-ponto.ok { background: var(--accent); }
.estado-ponto.falta { background: #F2C94C; }
.estado-ponto.bad { background: #FF6B6B; }
.player-entregue iframe { width: 100%; max-width: 420px; aspect-ratio: 9 / 16; max-height: 560px; border: 0; border-radius: 10px; margin-top: 10px; background: #000; }
/* Avatares: pôster no lugar do player */
.avatar { cursor: pointer; }
.avatar-quadro { position: relative; aspect-ratio: 9 / 16; background: #000; border-radius: 8px; overflow: hidden; }
.avatar-quadro .poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-quadro video { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-quadro .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; padding-left: 3px; pointer-events: none; }
.avatar.sem-previa .poster, .avatar.sem-previa .play { display: none; }
.avatar-gancho { line-height: 1.35; min-height: 2.7em; overflow: hidden; }
.avatar-nome { font-weight: 600; }
/* Dashboard */
.viz { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --superficie: #0B100B; --bom: #0ca30c; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.tile.hero { grid-column: span 2; }
@media (max-width: 900px) { .tile.hero { grid-column: 1 / -1; } }
.t-label { color: var(--text-dim); font-size: 12.5px; }
.t-valor { font-size: 30px; font-weight: 600; line-height: 1.15; margin-top: 4px; font-family: 'Inter Tight', sans-serif; }
.hero .t-valor { font-size: 46px; }
.t-sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-dim); }
.t-delta { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.t-delta.bom { color: var(--bom); } .t-delta.ruim { color: #e66767; }
.spark { width: 100%; height: 28px; margin-top: 8px; display: block; }
.meter { margin-top: 10px; }
.meter-trilho { position: relative; height: 8px; border-radius: 999px; background: rgba(57, 135, 229, .22); }
.meter-cheio { height: 100%; border-radius: 999px; background: var(--s1); }
.meter-marca { position: absolute; top: -3px; width: 2px; height: 14px; background: rgba(255, 255, 255, .55); }
.meter-legenda { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .graficos { grid-template-columns: 1fr; } }
.graf { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.graf h2, .card .graf-topo h2 { margin: 0; font-size: 16px; }
.graf-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.graf-corpo svg { width: 100%; height: auto; display: block; overflow: visible; }
.graf-corpo .eixo-txt { font: 11px 'Inter Tight', sans-serif; fill: var(--text-dim); }
.graf-corpo .rotulo-txt { font: 600 11.5px 'Inter Tight', sans-serif; fill: var(--text); }
.graf-corpo .grade { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.graf-corpo .base { stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.graf-corpo .ref { stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
.graf-corpo .hit { fill: transparent; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); margin-right: 6px; vertical-align: -1px; }
.graf table { margin-top: 10px; }
.tabela-twin[hidden] { display: none; }
.dica { position: fixed; z-index: 50; pointer-events: none; background: #141a15; border: 1px solid var(--card-border); color: var(--text); font-size: 12px; padding: 6px 9px; border-radius: 7px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); white-space: nowrap; }
.dica b { display: block; font-weight: 600; }

/* Tradução (15/09/2026): o espanhol cresce com o texto, sem barra de rolagem. */
.traducao-texto { field-sizing: content; min-height: 120px; margin-bottom: 8px; }
.item-traducao .comparacao { gap: 20px; }

/* Sub-abas do Dashboard (15/09/2026): Custo x Preços das GPUs. */
.subabas { display: flex; gap: 6px; margin: 14px 0 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.subaba { font: inherit; font-size: 14px; font-weight: 600; color: var(--muted, #9a9a92); background: none; border: none;
  padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 120ms ease-out, border-color 120ms ease-out; }
.subaba:hover { color: var(--texto, #ececec); }
.subaba.on { color: var(--accent); border-bottom-color: var(--accent); }
.subaba:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Barras de preço por hora do dia. */
.barras-hora { display: flex; align-items: flex-end; gap: 3px; height: 180px; padding-top: 18px; }
.col-hora { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.col-val { font-size: 9px; color: var(--muted, #9a9a92); font-variant-numeric: tabular-nums; height: 12px; line-height: 12px; }
.col-barra { width: 70%; min-height: 2px; background: var(--accent); border-radius: 3px 3px 0 0;
  transition: background 120ms ease-out; }
.col-hora:hover .col-barra { background: #e0b968; }
.col-barra.vazia { background: rgba(255,255,255,.12); }
.col-h { font-size: 9.5px; color: var(--muted, #9a9a92); margin-top: 4px; font-variant-numeric: tabular-nums; }
/* Filtro de dias e frescor do vigia de preços. */
.precos-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dias-filtro { display: flex; align-items: center; gap: 6px; }
.dia-op { font-size: 13px; font-weight: 600; color: var(--muted, #9a9a92); text-decoration: none; padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; transition: border-color 120ms, color 120ms; }
.dia-op:hover { color: var(--texto, #ececec); border-color: rgba(255,255,255,.28); }
.dia-op.on { color: var(--accent); border-color: var(--accent); }
.fresco { font-size: 12.5px; padding: 3px 10px; border-radius: 99px; }
.fresco.ok { color: #2f6b45; background: rgba(76,175,111,.16); }
.fresco.velho { color: #b0870a; background: rgba(224,185,80,.16); }