/* ============================================================================
   CAOSYSTEM — tokens de design compartilhados (portal + Mesa interna)
   Identidade: editorial, forense, contemporânea. "DO CAOS À PROVA".
   Hierarquia por tipografia, espaço e borda — sombras mínimas, zero gradiente.
   ========================================================================== */

/* ---------- fontes auto-hospedadas (sem CDN) ---------- */
@font-face { font-family:'Fraunces'; src:url('/fonts/Fraunces-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('/fonts/Fraunces-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('/fonts/Fraunces-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('/fonts/Archivo-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('/fonts/Archivo-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('/fonts/Archivo-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('/fonts/Archivo-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('/fonts/SpaceMono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('/fonts/SpaceMono-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  /* ---------- cor: base ---------- */
  --cs-grafite:      #1C1D1B;   /* tinta e chrome escuro */
  --cs-papel:        #F4F1E9;   /* fundo geral */
  --cs-superficie:   #FCFBF7;   /* cartões e painéis */
  --cs-borda:        #D9D5CC;   /* linhas divisórias */
  --cs-borda-forte:  #B9B4A7;
  --cs-texto:        #1C1D1B;
  --cs-texto-2:      #686A66;   /* secundário (AA sobre papel/superfície) */
  --cs-texto-3:      #8B8D88;   /* terciário, só para meta em tamanho >=12px bold mono */
  --cs-inverso:      #F4F1E9;   /* texto sobre grafite */

  /* ---------- cor: acento institucional ---------- */
  --cs-cobre:        #A76524;   /* ação, link, marca */
  --cs-cobre-escuro: #7E4B18;   /* hover/ativo (AA sobre papel) */
  --cs-cobre-tinta:  #F0E4D4;   /* fundo suave de destaque */

  /* ---------- cor: estados semânticos (AA sobre superfície) ---------- */
  --cs-ok:           #2E6B45;   /* concluído / válido / em dia */
  --cs-ok-fundo:     #E4EEE5;
  --cs-atencao:      #8A6410;   /* pendência / atenção */
  --cs-atencao-fundo:#F5EBD4;
  --cs-urgente:      #A93226;   /* vencido / erro / urgente */
  --cs-urgente-fundo:#F7E3E0;
  --cs-info:         #7E4B18;   /* "azul" informativo = cobre escuro por decisão de marca */
  --cs-info-fundo:   var(--cs-cobre-tinta);

  /* ---------- tipografia ---------- */
  --cs-font-editorial: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cs-font-ui:        'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cs-font-mono:      'Space Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
  --cs-fs-11: 11px; --cs-fs-12: 12px; --cs-fs-13: 13px; --cs-fs-14: 14px;
  --cs-fs-16: 16px; --cs-fs-19: 19px; --cs-fs-24: 24px; --cs-fs-32: 32px;
  --cs-lh: 1.5;

  /* ---------- espaço / forma ---------- */
  --cs-s1: 4px; --cs-s2: 8px; --cs-s3: 12px; --cs-s4: 16px;
  --cs-s5: 24px; --cs-s6: 32px; --cs-s7: 48px;
  --cs-raio: 6px;          /* contido: fichas, não bolhas */
  --cs-raio-g: 10px;
  --cs-sombra: 0 1px 2px rgba(28,29,27,.06);          /* quase imperceptível */
  --cs-sombra-flutuante: 0 8px 28px rgba(28,29,27,.14); /* modal/drawer apenas */

  /* ---------- foco e camadas ---------- */
  --cs-foco: 2px solid var(--cs-cobre);
  --cs-z-drawer: 60; --cs-z-modal: 80; --cs-z-toast: 100;
}

/* ============================ base ============================ */
.cs-app { font-family: var(--cs-font-ui); font-size: var(--cs-fs-14);
  line-height: var(--cs-lh); color: var(--cs-texto); background: var(--cs-papel);
  -webkit-font-smoothing: antialiased; }
.cs-app *:focus-visible { outline: var(--cs-foco); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cs-app *, .cs-app *::before, .cs-app *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================ marca ============================ */
/* Wordmark tipográfico: CAOS (Fraunces) + SYSTEM (Space Mono), régua de cobre. */
.cs-wordmark { display:inline-flex; align-items:baseline; gap:2px;
  text-decoration:none; color:inherit; letter-spacing:0; }
.cs-wordmark .caos { font-family:var(--cs-font-editorial); font-weight:700;
  font-size:1.35em; letter-spacing:-0.015em; }
.cs-wordmark .system { font-family:var(--cs-font-mono); font-weight:700;
  font-size:.82em; letter-spacing:.14em; padding-left:6px;
  border-left:2px solid var(--cs-cobre); margin-left:6px; transform:translateY(-1px); }
.cs-tagline { font-family:var(--cs-font-mono); font-size:var(--cs-fs-11);
  letter-spacing:.22em; color:var(--cs-texto-2); text-transform:uppercase; }

/* Etiqueta de evidência (assinatura visual): meta técnica em mono */
.cs-meta { font-family:var(--cs-font-mono); font-size:var(--cs-fs-12);
  color:var(--cs-texto-2); letter-spacing:.01em; }
.cs-meta b { color:var(--cs-texto); font-weight:700; }

/* ============================ títulos ============================ */
.cs-h1 { font-family:var(--cs-font-editorial); font-weight:600;
  font-size:var(--cs-fs-32); line-height:1.15; letter-spacing:-.01em; margin:0; }
.cs-h2 { font-family:var(--cs-font-editorial); font-weight:600;
  font-size:var(--cs-fs-24); line-height:1.2; margin:0; }
.cs-h3 { font-family:var(--cs-font-ui); font-weight:600; font-size:var(--cs-fs-16); margin:0; }
.cs-eyebrow { font-family:var(--cs-font-mono); font-size:var(--cs-fs-11);
  letter-spacing:.18em; text-transform:uppercase; color:var(--cs-texto-2); }

/* ============================ botões ============================ */
.cs-btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family:var(--cs-font-ui); font-weight:600; font-size:var(--cs-fs-13);
  border-radius:var(--cs-raio); border:1px solid transparent;
  padding:9px 16px; min-height:36px; transition:background .12s, border-color .12s;
  text-decoration:none; }
.cs-btn:disabled { opacity:.45; cursor:not-allowed; }
.cs-btn-primario { background:var(--cs-grafite); color:var(--cs-inverso); }
.cs-btn-primario:hover:not(:disabled) { background:#000; }
.cs-btn-acento { background:var(--cs-cobre); color:#fff; }
.cs-btn-acento:hover:not(:disabled) { background:var(--cs-cobre-escuro); }
.cs-btn-secundario { background:var(--cs-superficie); color:var(--cs-texto);
  border-color:var(--cs-borda-forte); }
.cs-btn-secundario:hover:not(:disabled) { border-color:var(--cs-grafite); }
.cs-btn-fantasma { background:transparent; color:var(--cs-texto-2); }
.cs-btn-fantasma:hover:not(:disabled) { color:var(--cs-texto); background:rgba(28,29,27,.05); }
.cs-btn-perigo { background:var(--cs-urgente); color:#fff; }
.cs-btn-sm { padding:5px 10px; min-height:28px; font-size:var(--cs-fs-12); }

.cs-link { color:var(--cs-cobre-escuro); text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px; }
.cs-link:hover { color:var(--cs-cobre); }

/* ============================ formulários ============================ */
.cs-campo { display:flex; flex-direction:column; gap:5px; }
.cs-campo label { font-size:var(--cs-fs-12); font-weight:600; color:var(--cs-texto-2);
  letter-spacing:.02em; }
.cs-input, .cs-select, .cs-textarea { font-family:var(--cs-font-ui);
  font-size:var(--cs-fs-14); color:var(--cs-texto); background:var(--cs-superficie);
  border:1px solid var(--cs-borda-forte); border-radius:var(--cs-raio);
  padding:9px 12px; min-height:38px; width:100%; }
.cs-textarea { min-height:96px; resize:vertical; }
.cs-input:focus, .cs-select:focus, .cs-textarea:focus { outline:var(--cs-foco); outline-offset:0; }
.cs-input[aria-invalid="true"], .cs-campo.invalido .cs-input { border-color:var(--cs-urgente); }
.cs-erro-campo { color:var(--cs-urgente); font-size:var(--cs-fs-12); }
.cs-ajuda { color:var(--cs-texto-2); font-size:var(--cs-fs-12); }

/* ============================ cartões e fichas ============================ */
.cs-card { background:var(--cs-superficie); border:1px solid var(--cs-borda);
  border-radius:var(--cs-raio-g); box-shadow:var(--cs-sombra); }
.cs-card-pad { padding:var(--cs-s5); }
.cs-ficha { border-left:3px solid var(--cs-borda-forte); }
.cs-ficha.ficha-ok { border-left-color:var(--cs-ok); }
.cs-ficha.ficha-atencao { border-left-color:var(--cs-atencao); }
.cs-ficha.ficha-urgente { border-left-color:var(--cs-urgente); }

/* ============================ badges ============================ */
.cs-badge { display:inline-flex; align-items:center; gap:4px;
  font-family:var(--cs-font-mono); font-size:var(--cs-fs-11); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; border-radius:4px;
  padding:2px 8px; border:1px solid transparent; }
.cs-badge-neutro { background:var(--cs-papel); color:var(--cs-texto-2); border-color:var(--cs-borda); }
.cs-badge-ok { background:var(--cs-ok-fundo); color:var(--cs-ok); }
.cs-badge-atencao { background:var(--cs-atencao-fundo); color:var(--cs-atencao); }
.cs-badge-urgente { background:var(--cs-urgente-fundo); color:var(--cs-urgente); }
.cs-badge-cobre { background:var(--cs-cobre-tinta); color:var(--cs-cobre-escuro); }

/* ============================ tabelas ============================ */
.cs-tabela { width:100%; border-collapse:collapse; font-size:var(--cs-fs-13); }
.cs-tabela th { text-align:left; font-family:var(--cs-font-mono);
  font-size:var(--cs-fs-11); letter-spacing:.1em; text-transform:uppercase;
  color:var(--cs-texto-2); font-weight:700; padding:8px 12px;
  border-bottom:2px solid var(--cs-grafite); white-space:nowrap; }
.cs-tabela td { padding:10px 12px; border-bottom:1px solid var(--cs-borda); vertical-align:top; }
.cs-tabela tr:hover td { background:rgba(167,101,36,.045); }
.cs-tabela-scroll { overflow-x:auto; }

/* ============================ tabs ============================ */
.cs-tabs { display:flex; gap:2px; border-bottom:1px solid var(--cs-borda);
  overflow-x:auto; scrollbar-width:none; }
.cs-tab { font-family:var(--cs-font-ui); font-weight:600; font-size:var(--cs-fs-13);
  color:var(--cs-texto-2); background:none; border:0; border-bottom:2px solid transparent;
  padding:10px 14px; cursor:pointer; white-space:nowrap; }
.cs-tab:hover { color:var(--cs-texto); }
.cs-tab[aria-selected="true"] { color:var(--cs-texto); border-bottom-color:var(--cs-cobre); }

/* ============================ estados ============================ */
.cs-vazio { text-align:center; padding:var(--cs-s7) var(--cs-s5); color:var(--cs-texto-2); }
.cs-vazio .cs-h3 { color:var(--cs-texto); margin-bottom:6px; }
.cs-carregando { color:var(--cs-texto-2); font-family:var(--cs-font-mono);
  font-size:var(--cs-fs-12); padding:var(--cs-s5); }
.cs-carregando::after { content:'…'; animation:cs-pulso 1.2s infinite; }
@keyframes cs-pulso { 50% { opacity:.35; } }
.cs-erro-bloco { background:var(--cs-urgente-fundo); border:1px solid var(--cs-urgente);
  color:var(--cs-urgente); border-radius:var(--cs-raio); padding:10px 14px;
  font-size:var(--cs-fs-13); }

/* ============================ toast ============================ */
.cs-toast-area { position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:var(--cs-z-toast); display:flex; flex-direction:column; gap:8px; }
.cs-toast { background:var(--cs-grafite); color:var(--cs-inverso);
  font-size:var(--cs-fs-13); border-radius:var(--cs-raio); padding:10px 18px;
  box-shadow:var(--cs-sombra-flutuante); }
.cs-toast.erro { background:var(--cs-urgente); }

/* ============================ modal / drawer ============================ */
.cs-veu { position:fixed; inset:0; background:rgba(28,29,27,.45); z-index:var(--cs-z-modal); }
.cs-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:calc(var(--cs-z-modal) + 1); background:var(--cs-superficie);
  border:1px solid var(--cs-borda-forte); border-radius:var(--cs-raio-g);
  box-shadow:var(--cs-sombra-flutuante); width:min(680px, calc(100vw - 32px));
  max-height:88vh; overflow:auto; }
.cs-drawer { position:fixed; top:0; right:0; bottom:0; z-index:var(--cs-z-drawer);
  background:var(--cs-superficie); border-left:1px solid var(--cs-borda-forte);
  box-shadow:var(--cs-sombra-flutuante); width:min(560px, 92vw); overflow:auto; }

/* ============================ paginação ============================ */
.cs-paginacao { display:flex; align-items:center; gap:10px;
  font-family:var(--cs-font-mono); font-size:var(--cs-fs-12); color:var(--cs-texto-2); }