/* ============================================================================
   CapyMed Design System (capy-ds.css)
   Fonte de verdade visual, extraída do modelo aprovado (CapyMed — Interface).
   Tokens light + dark, tipografia, e componentes base reutilizáveis (.ds-*).
   Carregado globalmente; os tokens ficam disponíveis para TODAS as telas.
   ETAPA 1 (Fundação): tokens + componentes. Não sobrescreve o núcleo ainda.
   ============================================================================ */
:root{
  --bg:#f4f5f7; --surface:#ffffff; --surface-2:#fafafa; --surface-3:#f0f1f4;
  --sep:#e6e6ea; --sep-2:#d6d7dc;
  --ink:#16181c; --ink-2:#52565d; --ink-3:#6b7076;
  --accent:#0f6b47; --accent-2:#0b5638; --accent-soft:#e6f2ec; --accent-3:#2aa06b;
  --calm:#2b5f9e; --calm-soft:#e9f0f9;
  --warn:#9a5a00; --warn-soft:#fdf2e3;
  --crit:#a6231b; --crit-soft:#fbecea;
  --plum:#66489a; --plum-soft:#f1ecf9;
  --glass:rgba(255,255,255,.72);
  --grad-brand:linear-gradient(135deg,#17825a 0%,#0c5a3c 55%,#0a4530 100%);
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --sh-1:0 1px 2px rgba(16,20,28,.05);
  --sh-2:0 18px 44px -18px rgba(16,20,28,.28);
  --sh-3:0 16px 32px -14px rgba(12,48,32,.26);
  --ds-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Inter,Helvetica,Arial,sans-serif;
  /* ══════════════════════════════════════════════════════════════════════
     API SEMÂNTICA (canônica p/ código novo) — mesmos VALORES dos tokens
     curtos acima (aliases). Migração aditiva: NENHUM valor muda; apenas
     disponibiliza --color-*/--space-*/--z-*/--dur-* p/ todas as telas.
     Espelha capymed.tokens.css do Design System. Código novo usa estes;
     --ink/--accent/--sep… seguem como aliases legados.
     ══════════════════════════════════════════════════════════════════════ */
  --color-bg-primary:var(--bg); --color-surface:var(--surface); --color-surface-subtle:var(--surface-2); --color-surface-sunken:var(--surface-3);
  --color-border:var(--sep); --color-border-strong:var(--sep-2);
  --color-text-primary:var(--ink); --color-text-secondary:var(--ink-2); --color-text-muted:var(--ink-3);
  --color-primary:var(--accent); --color-primary-hover:var(--accent-2); --color-primary-soft:var(--accent-soft);
  --color-success:var(--accent); --color-success-soft:var(--accent-soft);
  --color-info:var(--calm); --color-info-soft:var(--calm-soft);
  --color-warning:var(--warn); --color-warning-soft:var(--warn-soft);
  --color-danger:var(--crit); --color-danger-hover:var(--crit); --color-danger-soft:var(--crit-soft);
  --color-viz-1:var(--accent); --color-viz-2:var(--calm); --color-viz-3:var(--warn); --color-viz-4:var(--plum); --color-viz-5:var(--crit);
  /* on-colors: texto sobre um fill de status sólido (dark override abaixo) */
  --color-on-primary:#ffffff; --color-on-danger:#ffffff; --color-on-info:#ffffff; --color-on-warning:#ffffff;
  /* superfícies especiais / foco */
  --glass-bg:var(--glass); --scrim:rgba(16,20,28,.38); --focus-ring:var(--accent); --focus-ring-w:2px;
  /* tipografia */
  --font-sans:var(--ds-font); --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* radius extra (mantém a escala do app: --r-card = --r-lg = 18px) */
  --r-xs:5px; --r-card:var(--r-lg); --r-pop:16px; --r-pill:999px;
  /* espaçamento base-2px */
  --space-0-5:2px; --space-1:4px; --space-1-5:6px; --space-2:8px; --space-2-5:10px; --space-3:12px; --space-3-5:14px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-14:56px;
  /* alturas de controle */
  --control-sm:28px; --control-md:34px; --control-lg:44px; --input-h:36px;
  /* motion */
  --dur-fast:140ms; --dur-base:160ms; --dur-overlay:220ms; --dur-enter:280ms;
  --ease-standard:cubic-bezier(.2,0,0,1); --ease-enter:cubic-bezier(.16,1,.3,1); --ease-exit:cubic-bezier(.4,0,1,1);
  /* layout & grid */
  --content-max:1560px; --header-h:56px; --context-h:44px; --gutter:clamp(16px,4vw,32px);
  /* breakpoints (doc; literais em @media) — Mobile ≤767 · Tablet 768–1023 · Notebook 1024–1439 · Desktop ≥1440 · Nav 1080 */
  --bp-mobile:767px; --bp-tablet:768px; --bp-notebook:1024px; --bp-desktop:1440px; --bp-nav:1080px;
  /* camadas / z-index */
  --z-base:0; --z-sticky:100; --z-dropdown:1000; --z-popover:1100; --z-drawer:1200; --z-modal:1300; --z-toast:1400;
}
:root[data-theme="dark"]{
  --bg:#0d0f12; --surface:#15181c; --surface-2:#191d21; --surface-3:#20242a;
  --sep:#262b31; --sep-2:#333a42;
  --ink:#f2f4f6; --ink-2:#b0b6bf; --ink-3:#7d848d;
  --accent:#4fbe8b; --accent-2:#6ed3a3; --accent-soft:rgba(79,190,139,.14); --accent-3:#6ed3a3;
  --calm:#7fb0ea; --calm-soft:rgba(127,176,234,.14);
  --warn:#e0a44b; --warn-soft:rgba(224,164,75,.14);
  --crit:#ef6f64; --crit-soft:rgba(239,111,100,.14);
  --plum:#b79ae8; --plum-soft:rgba(183,154,232,.15);
  --glass:rgba(21,24,28,.76);
  --grad-brand:linear-gradient(135deg,#18604390 0%,#0f3a2b 55%,#0d2a22 100%),linear-gradient(#11241d,#11241d);
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 20px 48px -18px rgba(0,0,0,.75);
  --sh-3:0 18px 36px -14px rgba(0,0,0,.7);
  /* on-colors: no dark os fills de status são claros → foreground escuro */
  --color-on-primary:#0d0f12; --color-on-danger:#0d0f12; --color-on-info:#0d0f12; --color-on-warning:#0d0f12;
  --scrim:rgba(0,0,0,.6);
}

/* ---- keyframes compartilhados ---- */
@keyframes ds-fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ds-menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes ds-spin{to{transform:rotate(360deg)}}
@keyframes ds-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ds-nebula{0%,100%{opacity:.55;transform:translate3d(0,0,0) scale(1)}50%{opacity:.85;transform:translate3d(4%,-5%,0) scale(1.14)}}
@keyframes ds-starDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-80px,-60px,0)}}
@keyframes ds-pulseDot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ============================================================================
   COMPONENTES BASE (.ds-*) — usados pelas telas redesenhadas.
   Prefixados para não colidir com o núcleo legado enquanto migramos.
   ============================================================================ */
.ds{font-family:var(--ds-font);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ds *,.ds *::before,.ds *::after{box-sizing:border-box}
.ds :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* superfícies */
.ds-surface{background:var(--surface);border:1px solid var(--sep);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.ds-card{background:var(--surface);border:1px solid var(--sep);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:border-color .18s,box-shadow .18s,transform .18s}

/* botões */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 15px;border:1px solid var(--sep-2);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:600 13.5px/1 var(--ds-font);cursor:pointer;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;white-space:nowrap}
.ds-btn:hover{border-color:var(--ink-3);background:var(--surface-2);transform:translateY(-1px)}
.ds-btn:active{transform:translateY(0)}
.ds-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.ds-btn-primary{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:var(--sh-3)}
.ds-btn-primary:hover{border-color:var(--accent-2);background:var(--accent-2);transform:translateY(-2px)}
.ds-btn-ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.ds-btn-ghost:hover{background:var(--surface-3);color:var(--ink);transform:none}
.ds-btn-danger{border-color:color-mix(in srgb,var(--crit) 40%,var(--sep-2));background:var(--surface);color:var(--crit)}
.ds-btn-danger:hover{background:var(--crit-soft);border-color:var(--crit)}
.ds-btn-sm{min-height:32px;padding:0 11px;font-size:12.5px;border-radius:var(--r-sm)}

/* campos */
.ds-field{display:flex;flex-direction:column;gap:6px}
.ds-label{font-size:12px;font-weight:600;color:var(--ink-2)}
.ds-label small{font-weight:500;color:var(--ink-3)}
.ds-input,.ds-select,.ds-textarea{width:100%;min-height:44px;padding:0 13px;border:1px solid var(--sep-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);font:14px/1.4 var(--ds-font);transition:border-color .18s,background .18s,box-shadow .18s;-webkit-appearance:none}
.ds-textarea{min-height:96px;padding:11px 13px;resize:vertical}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:none;border-color:var(--accent-3);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.ds-input::placeholder{color:var(--ink-3)}
.ds-input:disabled,.ds-select:disabled{opacity:.6;cursor:not-allowed}

/* page header + container */
.ds-page{max-width:1560px;margin:0 auto;padding:clamp(16px,2.4vw,28px) clamp(14px,2.4vw,32px)}
.ds-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ds-page-title{font-size:clamp(21px,2.3vw,26px);font-weight:600;letter-spacing:-.028em;margin:0;color:var(--ink)}
.ds-page-sub{font-size:13.5px;color:var(--ink-2);margin:5px 0 0}

/* tabela */
.ds-table-wrap{background:var(--surface);border:1px solid var(--sep);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.ds-table{width:100%;border-collapse:collapse;font-size:13px}
.ds-table th{height:42px;padding:0 14px;text-align:left;background:var(--surface-2);color:var(--ink-3);font-size:11px;font-weight:600;letter-spacing:.045em;text-transform:uppercase;border-bottom:1px solid var(--sep);white-space:nowrap}
.ds-table td{padding:12px 14px;border-bottom:1px solid var(--sep);color:var(--ink);vertical-align:middle}
.ds-table tr:last-child td{border-bottom:0}
.ds-table tbody tr{transition:background .12s}
.ds-table tbody tr:hover{background:var(--surface-2)}
.ds-num{font-variant-numeric:tabular-nums}

/* badges / chips */
.ds-badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.ds-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.ds-badge-success{background:var(--accent-soft);color:var(--accent)}
.ds-badge-info{background:var(--calm-soft);color:var(--calm)}
.ds-badge-warn{background:var(--warn-soft);color:var(--warn)}
.ds-badge-crit{background:var(--crit-soft);color:var(--crit)}
.ds-badge-plum{background:var(--plum-soft);color:var(--plum)}
.ds-badge-neutral{background:var(--surface-3);color:var(--ink-2)}
.ds-chip{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 12px;border:1px solid var(--sep-2);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:500}

/* KPI / metric */
.ds-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ds-kpi{background:var(--surface);border:1px solid var(--sep);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--sh-1)}
.ds-kpi-val{font-size:26px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ds-kpi-label{font-size:12.5px;color:var(--ink-2);margin-top:5px;font-weight:500}

/* filtros */
.ds-filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--sep);border-radius:var(--r-lg);padding:12px;box-shadow:var(--sh-1)}
.ds-search{position:relative;flex:1;min-width:220px}
.ds-search .ds-input{padding-left:40px}
.ds-search-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}

/* segmented control / tabs */
.ds-seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-3);border-radius:var(--r-md)}
.ds-seg button{min-height:32px;padding:0 13px;border:0;border-radius:9px;background:transparent;color:var(--ink-2);font:600 13px var(--ds-font);cursor:pointer;transition:.14s}
.ds-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

/* empty / loading */
.ds-empty{padding:56px 24px;text-align:center;color:var(--ink-2)}
.ds-empty strong{display:block;color:var(--ink);font-size:16px;font-weight:600;margin-bottom:6px}
.ds-spinner{width:18px;height:18px;border:2.5px solid color-mix(in srgb,var(--accent) 35%,transparent);border-top-color:var(--accent);border-radius:50%;animation:ds-spin .7s linear infinite}
.ds-skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:ds-shimmer 1.4s ease infinite;border-radius:var(--r-sm)}
@keyframes ds-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* modal / drawer */
.ds-overlay{position:fixed;inset:0;z-index:1400;background:color-mix(in srgb,#0a1014 55%,transparent);display:flex;align-items:center;justify-content:center;padding:18px;animation:ds-fadeUp .16s ease}
.ds-modal{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--sep);border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.ds-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--sep)}
.ds-modal-head h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
.ds-modal-body{padding:20px}
.ds-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--sep)}
.ds-x{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--sep);border-radius:9px;background:var(--surface);color:var(--ink-2);cursor:pointer}
.ds-x:hover{background:var(--surface-2);color:var(--ink)}

/* scrollbar discreta */
.ds ::-webkit-scrollbar,.ds-scroll::-webkit-scrollbar{width:10px;height:10px}
.ds ::-webkit-scrollbar-thumb,.ds-scroll::-webkit-scrollbar-thumb{background:var(--sep-2);border-radius:99px;border:2px solid transparent;background-clip:content-box}
.ds ::-webkit-scrollbar-thumb:hover,.ds-scroll::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}