/* ============================================================
   CIVITAS MARINGA - Identidade v3 "Liga + Cabine"
   Direcao aprovada: app de liga esportiva (servidor/publico) +
   cabine de comando (executivo). Sem sidebar: barra de comando.
   Fontes: Space Grotesk (display) / Archivo (corpo) / IBM Plex Mono.
   Regra fixa: nunca usar travessao. Ver PADROES-DE-ESCRITA.md.
   ============================================================ */

:root{
  --f-disp:'Space Grotesk',sans-serif;
  --f-corpo:'Archivo',sans-serif;
  --f-mono:'IBM Plex Mono',monospace;

  --tinta:#0B1220;          /* barra de comando / titulos fortes */
  --tinta-2:#13284A;        /* gradiente da barra */
  --papel:#F3F5F8;          /* fundo claro */
  --branco:#FFFFFF;
  --linha:#E2E8F0;
  --cinza:#64748B;
  --azul:#2A588E; --azul-p:#1E3A5F;
  --ouro:#C9A227; --ouro-c:#E7C95A;
  --verde:#0FB286; --verde-e:#0A8D6A;
  --ciano:#3FC8E4;
  --alerta:#B91C1C;
  --r:14px; --r-g:18px; --r-p:999px;
  --sombra:0 1px 2px rgba(11,18,32,.05), 0 10px 30px -18px rgba(11,18,32,.25);
  --sombra-ouro:0 0 0 1px rgba(201,162,39,.35), 0 12px 34px -16px rgba(201,162,39,.45);
  --foco:0 0 0 3px rgba(42,88,142,.30);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--f-corpo);
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  font-size:15px; line-height:1.5;
}
a{ color:var(--azul); text-decoration:none; }
a:hover{ color:var(--azul-p); }

h1,h2,h3,h4{ font-family:var(--f-disp); color:var(--tinta); line-height:1.12; letter-spacing:-.01em; }
h1{ font-weight:700; font-size:30px; }
h2{ font-weight:700; font-size:22px; }
h3{ font-weight:600; font-size:17px; }

.kicker{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cinza); font-weight:500; }
.muted{ color:var(--cinza); }
.mono{ font-family:var(--f-mono); }
.tnum{ font-variant-numeric:tabular-nums lining-nums; }

/* rotulo de secao: numero dourado + titulo + regua */
.sec-label{ display:flex; align-items:baseline; gap:12px; margin:34px 0 18px; }
.sec-label .num{ font-family:var(--f-mono); color:var(--ouro); font-size:12px; font-weight:600; }
.sec-label h2{ font-family:var(--f-disp); font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--azul-p); }
.sec-label .hr{ flex:1; height:1px; background:var(--linha); }

/* ---------- BARRA DE COMANDO (substitui sidebar) ---------- */
.cmdbar{ position:sticky; top:0; z-index:40; background:linear-gradient(120deg,var(--tinta-2),var(--tinta)); color:#fff; }
.cmdbar .row1{ display:flex; align-items:center; gap:16px; padding:12px 22px; }
.cmdbar .marca{ font-family:var(--f-disp); font-weight:700; letter-spacing:.14em; font-size:14px; white-space:nowrap; }
.cmdbar .marca b{ color:var(--ouro-c); }
.cmdbar .selo{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ciano); border:1px solid rgba(63,200,228,.35); border-radius:6px; padding:3px 9px; white-space:nowrap; }
.cmdbar .right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.cmdbar .who{ text-align:right; line-height:1.15; }
.cmdbar .who .nm{ font-weight:600; font-size:13px; }
.cmdbar .who .pp{ font-family:var(--f-mono); font-size:10px; color:#9fb8da; text-transform:uppercase; letter-spacing:.08em; }
.cmdbar .sair{ font-family:var(--f-disp); font-weight:600; font-size:12px; color:#cdd9ea; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:8px 14px; }
.cmdbar .sair:hover{ background:rgba(255,255,255,.08); color:#fff; }
.cmdnav{ display:flex; gap:2px; padding:0 16px 0; overflow-x:auto; scrollbar-width:none; border-top:1px solid rgba(255,255,255,.07); }
.cmdnav::-webkit-scrollbar{ display:none; }
.cmdnav a{ font-family:var(--f-disp); font-weight:600; font-size:13px; color:#9fb8da; padding:11px 14px; border-bottom:2px solid transparent; white-space:nowrap; }
.cmdnav a:hover{ color:#fff; }
.cmdnav a.ativo{ color:#fff; border-bottom-color:var(--ouro); }

.content{ padding:26px 22px 60px; max-width:1240px; margin:0 auto; }
.pg-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.pg-head .pg-title{ font-family:var(--f-disp); font-weight:700; font-size:26px; }

/* guia explicativo (para operadores sem experiencia) */
.guia{ background:#EEF4FF; border:1px solid #D5E3FA; border-radius:var(--r); margin:14px 0 4px; }
.guia summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; padding:12px 16px; font-family:var(--f-disp); font-weight:600; font-size:13px; color:var(--azul-p); }
.guia summary::before{ content:"?"; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--azul); color:#fff; font-size:12px; font-weight:700; flex-shrink:0; }
.guia[open] summary{ border-bottom:1px solid #D5E3FA; }
.guia .g-body{ padding:12px 16px 14px 46px; font-size:13.5px; color:#33465e; }
.guia .g-body ol{ margin-left:16px; }
.guia .g-body li{ margin:4px 0; }

/* ---------- SUPERFICIES ---------- */
.card{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-g); box-shadow:var(--sombra); padding:20px; }
.card + .card{ margin-top:16px; }
.card-hd{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:6px; }
.card-hd h3{ margin:0; }
.card-ouro{ border:1px solid rgba(201,162,39,.5); box-shadow:var(--sombra-ouro); }
.divider{ height:1px; background:var(--linha); border:0; margin:16px 0; }

/* bento */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.b3{ grid-column:span 3; } .b4{ grid-column:span 4; } .b6{ grid-column:span 6; }
.b8{ grid-column:span 8; } .b12{ grid-column:span 12; }
@media (max-width:980px){ .b3,.b4{ grid-column:span 6; } .b6,.b8{ grid-column:span 12; } }
@media (max-width:560px){ .b3,.b4,.b6{ grid-column:span 12; } }

/* stat tile */
.stat-card{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-g); box-shadow:var(--sombra); padding:18px 20px; }
.stat{ font-family:var(--f-disp); font-weight:700; font-size:40px; line-height:1; margin-top:8px; font-variant-numeric:tabular-nums; color:var(--azul-p); }
.stat-ouro{ color:var(--ouro); }
.stat-card .sub{ color:var(--cinza); font-size:12.5px; margin-top:6px; }

/* crest (escudo da secretaria) */
.crest{ display:grid; place-items:center; border-radius:12px; color:#fff; font-family:var(--f-disp); font-weight:700; letter-spacing:.02em; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); flex-shrink:0; }
.crest.sm{ width:36px; height:36px; font-size:11px; border-radius:10px; }
.crest.md{ width:48px; height:48px; font-size:13px; }

/* ---------- BOTOES ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-disp); font-weight:600; font-size:13.5px; line-height:1;
  border:1px solid transparent; border-radius:12px; padding:11px 18px; cursor:pointer;
  background:var(--azul); color:#fff; transition:filter .15s, background .15s; }
.btn:hover{ background:var(--azul-p); color:#fff; }
.btn:focus-visible{ outline:none; box-shadow:var(--foco); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-ouro{ background:var(--ouro); color:#22344E; }
.btn-ouro:hover{ background:var(--ouro-c); color:#22344E; }
.btn-ghost{ background:#fff; color:var(--azul-p); border-color:var(--linha); }
.btn-ghost:hover{ background:var(--papel); color:var(--azul-p); }
/* botão secundário para fundo escuro (portal do servidor, telas azul-noite) */
.btn-escuro{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.38); }
.btn-escuro:hover{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.6); }
.btn-escuro.ouro{ color:#F0D77A; border-color:rgba(231,201,90,.6); }
.btn-escuro.ouro:hover{ background:rgba(231,201,90,.14); color:#F7E3A0; border-color:#E7C95A; }
.btn-danger{ background:#fff; color:var(--alerta); border-color:rgba(185,28,28,.35); }
.btn-danger:hover{ background:#FDECEC; }
.btn-lg{ padding:15px 26px; font-size:15px; border-radius:14px; }
.btn-block{ width:100%; }

/* ---------- FORMULARIO ---------- */
.field{ margin-bottom:16px; }
.label{ display:block; font-family:var(--f-disp); font-size:12.5px; font-weight:600; color:var(--azul-p); margin-bottom:6px; }
.hint{ font-size:12px; color:var(--cinza); margin-top:5px; }
.input,.select,.textarea{
  width:100%; font-family:var(--f-corpo); font-size:14.5px; color:var(--tinta);
  background:#fff; border:1px solid var(--linha); border-radius:12px; padding:12px 14px;
  transition:border-color .15s, box-shadow .15s; }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--azul); box-shadow:var(--foco); }
.input.mono{ font-family:var(--f-mono); letter-spacing:.12em; }
.textarea{ resize:vertical; }

/* ---------- GRAVATA ---------- */
.gravata{ display:inline-block; width:4px; border-radius:2px; align-self:stretch; min-height:1.2em; flex-shrink:0; }
.gravata-row{ display:flex; align-items:center; gap:10px; }

/* ---------- TABELA / RANKING ---------- */
.tabela{ width:100%; border-collapse:collapse; }
.tabela th{ text-align:left; font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--cinza); font-weight:500; padding:0 12px 10px; border-bottom:1px solid var(--linha); }
.tabela td{ padding:12px; border-bottom:1px solid var(--linha); font-size:14px; }
.tabela tr:last-child td{ border-bottom:0; }
.tabela tbody tr:hover{ background:var(--papel); }
.tabela .pos{ font-family:var(--f-mono); font-weight:600; font-variant-numeric:tabular-nums; }
.tabela .pts{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; }
.medal-1{ color:var(--ouro); } .medal-2{ color:#8B95A3; } .medal-3{ color:#A57045; }

/* linha de classificacao estilo liga */
.lin{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--linha); border-radius:var(--r); padding:10px 13px; margin-bottom:8px; }
.lin .rk{ font-family:var(--f-mono); font-weight:600; width:26px; color:var(--cinza); font-size:14px; }
.lin.destaque{ background:linear-gradient(100deg,#fff,#FFF8E6); border-color:#ECCF7A; }
.lin .nm{ flex:1; font-weight:600; font-size:14px; min-width:0; }
.lin .nm small{ display:block; font-family:var(--f-mono); font-size:10px; color:var(--cinza); font-weight:400; }
.lin .pt{ font-family:var(--f-mono); font-weight:600; font-size:14px; }

/* pills */
.pill{ display:inline-block; padding:3px 10px; border-radius:var(--r-p); font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.pill-ok{ background:rgba(15,178,134,.12); color:var(--verde-e); }
.pill-wait{ background:rgba(201,162,39,.16); color:#9A7D18; }
.pill-mut{ background:#EEF2F7; color:var(--cinza); }
.pill-live{ background:rgba(34,197,94,.14); color:#15803D; }

.liga-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ouro); border:1px solid rgba(201,162,39,.4); border-radius:var(--r-p); padding:5px 13px; background:rgba(201,162,39,.06); }

/* ---------- MARCA (lockup do logo.js) ---------- */
.civ-lockup{ display:flex; align-items:center; gap:14px; }
.civ-lockup.civ-vert{ flex-direction:column; text-align:center; gap:10px; }
.civ-sym svg{ width:100%; height:auto; display:block; }
.civ-word .civ-name{ font-family:var(--f-disp); font-weight:700; font-size:19px; letter-spacing:.1em; line-height:1; }
.civ-word .civ-mg{ font-family:var(--f-mono); font-weight:500; font-size:10px; letter-spacing:.34em; margin-top:3px; }
.civ-word .civ-rule{ height:2px; width:46px; margin:6px 0; border-radius:2px; }
.civ-word .civ-sub{ font-size:10.5px; letter-spacing:.02em; }

/* ---------- UTILIDADES ---------- */
.row{ display:flex; gap:16px; }
.col{ flex:1; min-width:0; }
.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.center{ text-align:center; }
.mt-2{ margin-top:8px; } .mt-4{ margin-top:16px; } .mt-6{ margin-top:24px; } .mt-8{ margin-top:32px; }
.mb-0{ margin-bottom:0; }
.flash{ padding:12px 15px; border-radius:12px; margin-bottom:16px; font-size:13.5px; }
.flash-erro{ background:#FDECEC; color:#8F1D1D; border:1px solid #F3C4C4; }
.flash-ok{ background:#E8F7F1; color:#0A6B50; border:1px solid #B9E6D6; }
.empty{ text-align:center; color:var(--cinza); padding:40px 20px; }
.empty .ic{ font-size:30px; color:var(--linha); margin-bottom:10px; }

@media (max-width:980px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .row{ flex-direction:column; }
  .content{ padding:18px 14px 80px; }
}
@media (max-width:560px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid #FFDD00; outline-offset:2px; }