/* ======================================================================
   tema.css — FUNDAÇÃO VISUAL da reforma (obra 25/09/2026), proposta "Três colunas"
   aprovada pelo Felipe (mistura Gramado × Arena).

   Carrega DEPOIS de dashboard.css: redefine os MESMOS nomes de token que o painel
   inteiro (e os módulos Cockpit, Canais dark, Blog, Planejamento, Copy) já usa —
   assim cada tela herda a paleta nova sem ninguém editar o CSS dela — e acrescenta
   os tokens e peças novas (vidro, destaque, gramado, seletor em forma de campo).

   Regra da casa: [data-theme="light"] contém SÓ variáveis.
   Contrato visual completo: docs/DESIGN-reforma-painel.md.
   ====================================================================== */

@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(/admin/assets/fonts/sora-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(/admin/assets/fonts/sora-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- ESCURO (padrão) ---------- */
:root{
  /* nomes herdados (o painel inteiro consome) */
  --bg:#07161A; --bg-2:#0A1C21; --surface:#132225; --surface-2:#1A2A2D;
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.17);
  --fg:#E6F4F1; --fg-mut:#93B5AE; --fg-dim:#6F8F89;
  --brand:#34D399; --brand-2:#10B981; --brand-soft:rgba(52,211,153,.14);
  --pos:#34D399; --neg:#FB7185; --warn:#FBBF24; --info:#67E8F9;
  --radius:16px; --radius-sm:10px;
  --shadow:0 18px 48px -22px rgba(0,0,0,.65);
  --font:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --topbar-bg:rgba(7,22,26,.72);
  --warn-text:#FDE68A;
  --callout-text:#A7F3D0;
  --chart-grid:rgba(255,255,255,.07);
  --rv-track:rgba(255,255,255,.07);   /* neutro: "sem registro" dos Canais dark tem de ser cinza (croma ≤ 12) */
  --rv-hair:rgba(230,244,241,.14);
  --rv-tint-ok:rgba(52,211,153,.13);
  --rv-tint-warn:rgba(251,191,36,.14);
  --rv-tint-bad:rgba(251,113,133,.14);
  --rv-explain-bg:rgba(230,244,241,.03);

  /* novos (reforma) */
  --glass:rgba(255,255,255,.05);
  --glass-hi:rgba(255,255,255,.08);
  --glass-border:rgba(255,255,255,.10);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.06);
  --glow-a:rgba(14,165,183,.20);          /* ciano, canto superior direito */
  --glow-b:rgba(34,197,94,.14);           /* verde, canto inferior esquerdo */
  --destaque:linear-gradient(135deg,#0EA5B7 0%,#22C55E 100%);  /* SÓ ROAS e botões de lote */
  --destaque-solido:#16B39A;
  --on-destaque:#03201A;
  --on-brand:#03201A;
  --btn-brand:#34D399;
  --brand-ink:#34D399;                    /* verde usado como TEXTO */
  --pitch:#0F3E31;                        /* assinatura "campo de futebol" */
  --pitch-stripe:rgba(255,255,255,.04);
  --pitch-line:rgba(255,255,255,.30);
  --pitch-sel:rgba(255,255,255,.10);
  --on-pitch:#E9F7F2;
  --on-pitch-mut:#A9CFC2;
  --tint-ok:rgba(52,211,153,.14);
  --tint-warn:rgba(251,191,36,.14);
  --tint-bad:rgba(251,113,133,.14);
  --tint-info:rgba(103,232,249,.13);
  --chip-ok:#34D399; --chip-atencao:#FBBF24; --chip-ruim:#FB7185; --chip-info:#67E8F9;
  --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px #67E8F9;
  --scrim:rgba(3,10,12,.62);
  --sheet-bg:#0C1E23;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-1:140ms; --dur-2:200ms; --dur-3:260ms;
  --z-topbar:20; --z-nav:30; --z-sheet:40; --z-dialog:50; --z-toast:60;
}

/* ---------- CLARO — SÓ tokens ---------- */
[data-theme="light"]{
  --bg:#EEF3EC; --bg-2:#E5ECE3; --surface:#FFFFFF; --surface-2:#F6F9F5;
  --border:rgba(14,42,27,.12); --border-2:rgba(14,42,27,.20);
  --fg:#0E2A1B; --fg-mut:#48625A; --fg-dim:#52695F;
  --brand:#15803D; --brand-2:#166534; --brand-soft:rgba(22,163,74,.12); --brand-vivo:#16A34A;
  --pos:#15803D; --neg:#E11D48; --warn:#B45309; --info:#0E7490;
  --shadow:0 14px 40px -22px rgba(14,42,27,.28);
  --topbar-bg:rgba(238,243,236,.82);
  --warn-text:#7C4A03;
  --callout-text:#14532D;
  --chart-grid:rgba(14,42,27,.09);
  --rv-track:rgba(0,0,0,.06);
  --rv-hair:rgba(14,42,27,.14);
  --rv-tint-ok:rgba(22,163,74,.11);
  --rv-tint-warn:rgba(180,83,9,.11);
  --rv-tint-bad:rgba(225,29,72,.10);
  --rv-explain-bg:rgba(14,42,27,.025);

  --glass:#FFFFFF;
  --glass-hi:#F6F9F5;
  --glass-border:rgba(14,42,27,.10);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.9);
  --glow-a:rgba(14,165,183,.08);
  --glow-b:rgba(34,197,94,.08);
  --destaque:linear-gradient(135deg,#7C3AED 0%,#6D28D9 100%);   /* roxo: SÓ ROAS e lote */
  --destaque-solido:#7C3AED;
  --on-destaque:#FFFFFF;
  --on-brand:#FFFFFF;
  --btn-brand:#15803D;
  --brand-ink:#15803D;
  --pitch:#0F3E31;
  --pitch-stripe:rgba(255,255,255,.05);
  --pitch-line:rgba(255,255,255,.34);
  --pitch-sel:rgba(255,255,255,.12);
  --on-pitch:#EFFAF5;
  --on-pitch-mut:#B6D8CB;
  --tint-ok:rgba(22,163,74,.10);
  --tint-warn:rgba(180,83,9,.10);
  --tint-bad:rgba(225,29,72,.09);
  --tint-info:rgba(14,116,144,.10);
  --chip-ok:#166534; --chip-atencao:#92400E; --chip-ruim:#BE123C; --chip-info:#155E75;
  --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px #0E7490;
  --scrim:rgba(14,42,27,.35);
  --sheet-bg:#FFFFFF;
}

/* ---------- base ---------- */
html{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
body{
  font-family:var(--font);
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 100% -8%, var(--glow-a), transparent 62%),
    radial-gradient(900px 640px at -6% 108%, var(--glow-b), transparent 60%);
  background-attachment:fixed;
  font-feature-settings:"ss01" 0;
}
.num,.ui-num{font-variant-numeric:tabular-nums}
/* botões e campos herdam a Sora (sem isto os módulos antigos caíam em Arial do navegador) */
button,input,select,textarea{font-family:inherit}
::placeholder{color:var(--fg-mut);opacity:1}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:8px}

/* ---------- compat de módulos de outras obras (só TOKEN, escopo do próprio módulo) ----------
   Copy (copy_tab.css): a célula de calor 4 misturava 52% do verde; com o verde novo (#34D399, mais claro)
   o texto --fg em cima dela caiu pra ~4,1:1. 46% mantém a escala de calor e volta pro AA (≈5:1). */
.copy-root,.copy-dlg{--c-calor-4:color-mix(in srgb, var(--brand) 46%, transparent)}

/* ---------- vidro ---------- */
.ui-glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--glass-edge), var(--shadow);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .ui-glass{background:var(--surface)} }
@media (prefers-reduced-transparency: reduce){ .ui-glass{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none} }

/* ---------- botões ---------- */
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:0 14px;border-radius:11px;
  font:600 13px/1 var(--font);letter-spacing:.005em;white-space:nowrap;
  color:var(--fg);background:var(--glass-hi);border:1px solid var(--glass-border);
  cursor:pointer;text-decoration:none;
  transition:background-color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out), opacity var(--dur-1) ease;
}
.ui-btn svg{width:16px;height:16px;flex:none}
@media (hover:hover) and (pointer:fine){ .ui-btn:hover{border-color:var(--border-2);background:var(--glass-hi)} }
.ui-btn:active{transform:scale(.97)}
.ui-btn[disabled],.ui-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.ui-btn--primario{background:var(--btn-brand);color:var(--on-brand);border-color:transparent}
@media (hover:hover) and (pointer:fine){ .ui-btn--primario:hover{background:var(--brand-2);border-color:transparent} }
.ui-btn--lote{background:var(--destaque);color:var(--on-destaque);border-color:transparent}
@media (hover:hover) and (pointer:fine){ .ui-btn--lote:hover{filter:brightness(1.06);border-color:transparent} }
.ui-btn--fantasma{background:transparent}
.ui-btn--perigo{color:var(--neg)}
.ui-btn--sm{min-height:32px;padding:0 11px;font-size:12.5px;border-radius:9px}
.ui-btn[data-carregando="1"]{position:relative;color:transparent}
.ui-btn[data-carregando="1"]::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;
  border:2px solid currentColor;border-color:var(--fg) transparent var(--fg) transparent;animation:ui-giro .7s linear infinite}
@keyframes ui-giro{to{transform:rotate(360deg)}}

/* ---------- chips ---------- */
.ui-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;
  font:600 11.5px/1 var(--font);color:var(--fg-mut);background:var(--glass-hi);border:1px solid var(--glass-border);white-space:nowrap}
.ui-chip svg{width:13px;height:13px}
.ui-chip--ok{color:var(--chip-ok);background:var(--tint-ok);border-color:transparent}
.ui-chip--atencao{color:var(--chip-atencao);background:var(--tint-warn);border-color:transparent}
.ui-chip--ruim{color:var(--chip-ruim);background:var(--tint-bad);border-color:transparent}
.ui-chip--info{color:var(--chip-info);background:var(--tint-info);border-color:transparent}

/* ---------- gramado (assinatura) ---------- */
.ui-pitch{
  color:var(--on-pitch);
  background:
    repeating-linear-gradient(90deg, var(--pitch-stripe) 0 34px, transparent 34px 68px),
    var(--pitch);
  border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), var(--shadow);
}

/* Seletor de situação em forma de campo: 4 faixas do gramado separadas pelas linhas
   do campo; círculo central na linha do meio; faixa escolhida acende. */
.ui-campo{position:relative;display:grid;grid-template-columns:repeat(4,1fr);min-height:92px;overflow:hidden;isolation:isolate}
.ui-campo::before{ /* linhas: contorno + meio-campo + círculo central */
  content:"";position:absolute;inset:8px;border:1.5px solid var(--pitch-line);border-radius:10px;pointer-events:none;z-index:1;
  background:
    linear-gradient(var(--pitch-line),var(--pitch-line)) 50% 0 / 1.5px 100% no-repeat,
    radial-gradient(circle at 50% 50%, transparent 11px, var(--pitch-line) 11.5px, var(--pitch-line) 13px, transparent 13.5px);
}
.ui-campo::after{ /* grandes áreas nas pontas */
  content:"";position:absolute;inset:8px;pointer-events:none;z-index:1;border-radius:10px;
  background:
    linear-gradient(var(--pitch-line),var(--pitch-line)) 0 50% / 18px 1.5px no-repeat,
    linear-gradient(var(--pitch-line),var(--pitch-line)) 100% 50% / 18px 1.5px no-repeat;
  opacity:.8;
}
.ui-campo > button{
  position:relative;z-index:2;appearance:none;border:0;background:transparent;color:var(--on-pitch-mut);
  /* número no topo; rótulo com 2 linhas reservadas (texto solto vira item anônimo da grade), folga lateral
     pro círculo do meio-campo nunca cobrir rótulo */
  display:grid;grid-template-rows:auto minmax(2.3em,auto);justify-items:center;align-content:start;row-gap:6px;padding:18px 14px 22px;cursor:pointer;
  font:500 11.5px/1.15 var(--font);text-align:center;
  transition:background-color var(--dur-2) ease,color var(--dur-2) ease;
}
.ui-campo > button b{font:700 24px/1 var(--font);color:var(--on-pitch);font-variant-numeric:tabular-nums}
.ui-campo > button[aria-pressed="true"]{background:var(--pitch-sel);color:var(--on-pitch)}
.ui-campo > button[aria-pressed="true"]::after{content:"";position:absolute;left:22%;right:22%;bottom:12px;height:3px;border-radius:3px;background:var(--brand)}
@media (hover:hover) and (pointer:fine){ .ui-campo > button:hover{color:var(--on-pitch)} }
.ui-campo > button:focus-visible{box-shadow:inset 0 0 0 2px var(--info);border-radius:10px}

/* ---------- ao vivo ---------- */
.ui-aovivo{display:inline-flex;align-items:center;gap:7px;font:600 11.5px/1 var(--font);color:var(--fg-mut)}
.ui-aovivo i{width:8px;height:8px;border-radius:50%;background:var(--fg-dim)}
.ui-aovivo[data-estado="ok"] i{background:var(--pos);box-shadow:0 0 0 0 var(--pos);animation:ui-pulso 2.4s var(--ease-out) infinite}
.ui-aovivo[data-estado="caiu"] i{background:var(--warn)}
@keyframes ui-pulso{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* ---------- esqueleto de carregamento ---------- */
.ui-skel{position:relative;overflow:hidden;background:var(--glass-hi);border-radius:10px;min-height:14px}
.ui-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:ui-brilho 1.3s ease-in-out infinite}
@keyframes ui-brilho{to{transform:translateX(100%)}}

/* ---------- vazio ---------- */
.ui-vazio{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px;color:var(--fg-mut);font-size:13px}
.ui-vazio b{color:var(--fg);font-weight:600}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  .ui-aovivo[data-estado="ok"] i{animation:none}
  .ui-skel::after{animation:none}
  .ui-btn,.ui-campo > button{transition:none}
}