/* ================================================================
   CIT Tecnologia — Design tokens e componentes base.
   Extraído do Brandbook CIT Tecnologia. Não redefina cores fora
   deste arquivo: consuma sempre os tokens semânticos --cit-*.
   ================================================================ */

:root{
  --cit-blue-50:#EBF3F9;--cit-blue-100:#CCE2EF;--cit-blue-200:#A6CCE3;--cit-blue-300:#73AED4;--cit-blue-400:#4091C4;
  --cit-blue-500:#006CB0;--cit-blue-600:#005F9B;--cit-blue-700:#005184;--cit-blue-800:#00436D;--cit-blue-900:#003454;

  --cit-turquoise-50:#EBFAFA;--cit-turquoise-100:#CCF4F2;--cit-turquoise-200:#A6EBE9;--cit-turquoise-300:#73E0DC;--cit-turquoise-400:#40D4D0;
  --cit-turquoise-500:#00C6C0;--cit-turquoise-600:#00AEA9;--cit-turquoise-700:#009490;--cit-turquoise-800:#007B77;--cit-turquoise-900:#005F5C;

  --cit-neutral-0:#FFFFFF;
  --cit-neutral-50:#F8FAFB;--cit-neutral-100:#F0F5F7;--cit-neutral-200:#DEE8ED;--cit-neutral-300:#C5D4DC;--cit-neutral-400:#92A8B4;
  --cit-neutral-500:#617985;--cit-neutral-600:#48616E;--cit-neutral-700:#334B57;--cit-neutral-800:#203842;--cit-neutral-900:#122A34;

  --cit-navy-500:#23344E;--cit-navy-600:#1C2A40;--cit-navy-700:#162232;

  --cit-green-50:#EAF7EF;--cit-green-500:#1E8E4E;--cit-green-700:#146137;
  --cit-amber-50:#FDF4E3;--cit-amber-500:#B8791A;--cit-amber-700:#8A5A12;
  --cit-red-50:#FCEDED;--cit-red-500:#C0392B;--cit-red-700:#8E2B20;

  --cit-font-display:"Montserrat",system-ui,sans-serif;
  --cit-font-body:"Poppins",system-ui,sans-serif;
  --cit-font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --cit-weight-regular:400;--cit-weight-medium:500;--cit-weight-semibold:600;--cit-weight-bold:700;

  --cit-text-display:72px;--cit-text-hero:56px;--cit-text-h1:44px;--cit-text-h2:36px;--cit-text-h3:28px;
  --cit-text-h4:22px;--cit-text-lead:18px;--cit-text-body:16px;--cit-text-small:14px;--cit-text-caption:12px;--cit-text-micro:10px;

  --cit-leading-tight:1.08;--cit-leading-snug:1.2;--cit-leading-normal:1.45;--cit-leading-relaxed:1.6;

  --cit-tracking-display:-0.02em;--cit-tracking-heading:-0.01em;--cit-tracking-body:0;
  --cit-tracking-label:0.02em;--cit-tracking-eyebrow:0.14em;

  --cit-space-1:4px;--cit-space-2:8px;--cit-space-3:12px;--cit-space-4:16px;--cit-space-5:20px;
  --cit-space-6:24px;--cit-space-8:32px;--cit-space-10:40px;--cit-space-12:48px;--cit-space-16:64px;

  --cit-container-max:1240px;

  --cit-radius-xs:4px;--cit-radius-sm:8px;--cit-radius-md:10px;--cit-radius-lg:12px;--cit-radius-xl:14px;--cit-radius-full:999px;

  --cit-border-color:var(--cit-neutral-200);
  --cit-border-color-strong:var(--cit-neutral-300);
  --cit-divider:var(--cit-neutral-200);

  --cit-shadow-sm:0 1px 2px rgba(18,42,52,.06);
  --cit-shadow-md:0 2px 8px rgba(18,42,52,.08);
  --cit-shadow-lg:0 8px 24px rgba(18,42,52,.10);

  --cit-focus:var(--cit-turquoise-500);
  --cit-focus-ring:0 0 0 3px rgba(0,198,192,.45);

  --cit-ease:cubic-bezier(.22,.61,.36,1);
  --cit-duration-hover:200ms;

  --cit-primary:var(--cit-blue-500);--cit-primary-hover:var(--cit-blue-600);--cit-primary-active:var(--cit-blue-700);--cit-primary-subtle:var(--cit-blue-50);
  --cit-secondary:var(--cit-turquoise-500);--cit-secondary-hover:var(--cit-turquoise-600);

  --cit-bg-base:#FFFFFF;--cit-bg-subtle:var(--cit-neutral-50);--cit-bg-muted:var(--cit-neutral-100);
  --cit-surface:#FFFFFF;

  --cit-text-primary:var(--cit-navy-500);--cit-text-secondary:var(--cit-neutral-600);--cit-text-muted:var(--cit-neutral-500);
  --cit-text-link:var(--cit-blue-500);--cit-text-link-hover:var(--cit-blue-700);

  --cit-success:var(--cit-green-500);--cit-success-subtle:var(--cit-green-50);--cit-success-strong:var(--cit-green-700);
  --cit-warning:var(--cit-amber-500);--cit-warning-subtle:var(--cit-amber-50);--cit-warning-strong:var(--cit-amber-700);
  --cit-error:var(--cit-red-500);--cit-error-subtle:var(--cit-red-50);--cit-error-strong:var(--cit-red-700);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cit-bg-subtle);color:var(--cit-text-primary);font-family:var(--cit-font-body);font-size:var(--cit-text-body);line-height:var(--cit-leading-relaxed);font-weight:var(--cit-weight-regular);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--cit-font-display);font-weight:var(--cit-weight-semibold);color:inherit;margin:0 0 var(--cit-space-4);letter-spacing:var(--cit-tracking-heading);line-height:var(--cit-leading-snug);text-wrap:balance}
h1{font-size:var(--cit-text-h1)}h2{font-size:var(--cit-text-h2)}h3{font-size:var(--cit-text-h3)}
h4{font-size:var(--cit-text-h4);font-family:var(--cit-font-body);font-weight:var(--cit-weight-semibold);line-height:var(--cit-leading-normal)}
p{margin:0 0 var(--cit-space-4);max-width:68ch}
a{color:var(--cit-text-link);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--cit-duration-hover) var(--cit-ease),border-color var(--cit-duration-hover) var(--cit-ease)}
a:hover{color:var(--cit-text-link-hover);border-bottom-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cit-focus);outline-offset:2px}
small{font-size:var(--cit-text-small)}
strong{font-weight:var(--cit-weight-semibold)}
hr{border:0;border-top:1px solid var(--cit-divider);margin:var(--cit-space-8) 0}
code,kbd,samp{font-family:var(--cit-font-mono);font-size:.92em}
img{max-width:100%;height:auto}
::selection{background:var(--cit-turquoise-200);color:var(--cit-navy-700)}

/* Utilitários tipográficos */
.cit-eyebrow{font-family:var(--cit-font-body);font-size:var(--cit-text-caption);font-weight:var(--cit-weight-semibold);letter-spacing:var(--cit-tracking-eyebrow);text-transform:uppercase;color:var(--cit-blue-500)}
.small{font-size:13px;line-height:1.6;color:var(--cit-text-secondary)}
.tiny{font-family:var(--cit-font-mono);font-size:11px;color:var(--cit-text-muted)}
.cap{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--cit-text-muted)}
.mono{font-family:var(--cit-font-mono);font-size:12px;color:var(--cit-text-muted)}

/* Layout util */
.stack{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wrap{max-width:var(--cit-container-max);margin:0 auto;padding:0 20px}
.hr{height:1px;background:var(--cit-border-color);border:0;margin:0}

/* Cartões */
.card{padding:24px;border:1px solid var(--cit-border-color);border-radius:12px;background:var(--cit-surface)}
.card--sunken{background:var(--cit-bg-subtle)}
.card--feat{border-color:var(--cit-blue-200);background:linear-gradient(158deg,var(--cit-blue-50),#fff 62%)}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:8px;border:1px solid transparent;font-family:var(--cit-font-body);font-size:14px;font-weight:600;cursor:pointer;transition:background var(--cit-duration-hover) var(--cit-ease),color var(--cit-duration-hover) var(--cit-ease),border-color var(--cit-duration-hover) var(--cit-ease);text-decoration:none}
.btn--pri{background:var(--cit-primary);color:#fff}.btn--pri:hover{background:var(--cit-primary-hover);color:#fff}
.btn--sec{background:var(--cit-turquoise-500);color:var(--cit-navy-700)}.btn--sec:hover{background:var(--cit-turquoise-600)}
.btn--out{background:transparent;color:var(--cit-primary);border-color:var(--cit-blue-300)}.btn--out:hover{border-color:var(--cit-primary);background:var(--cit-blue-50)}
.btn--ghost{background:transparent;color:var(--cit-text-secondary)}.btn--ghost:hover{background:var(--cit-bg-muted);color:var(--cit-text-primary)}
.btn--danger{background:var(--cit-red-500);color:#fff}.btn--danger:hover{background:var(--cit-red-700)}
.btn--sm{height:32px;padding:0 14px;font-size:13px;border-radius:6px}
.btn--lg{height:48px;padding:0 26px;font-size:16px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* Campos de formulário */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--cit-text-secondary)}
.field input,.field select,.field textarea{height:42px;padding:0 14px;border:1px solid var(--cit-border-color-strong);border-radius:8px;background:#fff;color:var(--cit-text-primary);font:inherit;font-size:14px;outline:none;transition:border-color var(--cit-duration-hover) var(--cit-ease),box-shadow var(--cit-duration-hover) var(--cit-ease);width:100%}
.field textarea{height:auto;padding:12px 14px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cit-turquoise-500);box-shadow:0 0 0 3px rgba(0,198,192,.28)}
.field.is-err input,.field.is-err select,.field.is-err textarea{border-color:var(--cit-red-500)}
.field .msg{font-size:12px;color:var(--cit-text-muted)}
.field.is-err .msg{color:var(--cit-red-700)}
.field input[disabled],.field select[disabled]{background:var(--cit-bg-muted);opacity:.7;cursor:not-allowed}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:14px}
.checkbox-row input{width:auto;height:auto}

/* Badges de estado */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:6px;border:1px solid;font-size:12px;font-weight:600;white-space:nowrap}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.b-ok{background:var(--cit-green-50);color:var(--cit-green-700);border-color:rgba(30,142,78,.32)}
.b-warn{background:var(--cit-amber-50);color:var(--cit-amber-700);border-color:rgba(184,121,26,.32)}
.b-err{background:var(--cit-red-50);color:var(--cit-red-700);border-color:rgba(192,57,43,.32)}
.b-info{background:var(--cit-blue-50);color:var(--cit-blue-700);border-color:var(--cit-blue-200)}
.b-mon{background:var(--cit-turquoise-50);color:var(--cit-turquoise-800);border-color:var(--cit-turquoise-300)}
.b-neu{background:var(--cit-bg-muted);color:var(--cit-text-secondary);border-color:var(--cit-border-color-strong)}

/* Tabelas */
.tbl-wrap{overflow-x:auto;border:1px solid var(--cit-border-color);border-radius:12px}
table.tbl{width:100%;border-collapse:collapse;min-width:520px}
table.tbl th{padding:12px 16px;text-align:left;background:var(--cit-bg-subtle);border-bottom:1px solid var(--cit-border-color);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cit-text-muted);white-space:nowrap}
table.tbl td{padding:13px 16px;font-size:14px;border-bottom:1px solid var(--cit-border-color);vertical-align:top}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:var(--cit-bg-subtle)}
table.tbl td.mono,table.tbl td .mono{font-family:var(--cit-font-mono);font-size:12px}

/* Alertas */
.alert{display:flex;gap:12px;padding:14px 16px;border-radius:10px;border:1px solid;font-size:13.5px;line-height:1.5}
.alert b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}
.alert--info{background:var(--cit-blue-50);border-color:var(--cit-blue-200);color:var(--cit-blue-800)}
.alert--ok{background:var(--cit-green-50);border-color:rgba(30,142,78,.28);color:var(--cit-green-700)}
.alert--warn{background:var(--cit-amber-50);border-color:rgba(184,121,26,.28);color:var(--cit-amber-700)}
.alert--err{background:var(--cit-red-50);border-color:rgba(192,57,43,.28);color:var(--cit-red-700)}

/* Estado vazio */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:38px 26px;border:1px dashed var(--cit-border-color-strong);border-radius:12px}

/* Abas */
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--cit-border-color);flex-wrap:wrap}
.tabs a{padding:0 0 12px;font-size:14px;font-weight:500;color:var(--cit-text-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--cit-primary);font-weight:600;border-bottom-color:var(--cit-primary)}

/* Modal (usado por confirmações via <dialog>) */
.modal{padding:26px;border:1px solid var(--cit-border-color);border-radius:14px;background:#fff;box-shadow:0 24px 64px rgba(18,42,52,.18);max-width:440px}
dialog.modal{margin:auto}
dialog.modal::backdrop{background:rgba(18,42,52,.45)}

/* KPI */
.kpi{padding:15px 17px;border:1px solid var(--cit-border-color);border-radius:10px;background:#fff}
.kpi .cap{margin-bottom:8px;letter-spacing:.1em}
.kpi b{font-family:var(--cit-font-display);font-size:26px;font-weight:700;letter-spacing:-.02em;display:block;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--cit-text-muted)}