/* ============================================================================
   Plexum — base visual compartilhada (plexum-ui.css) · 14/09/2026
   Carregado por TODOS os módulos DEPOIS do <style> próprio de cada um, então:
   1) unifica os tokens de cor (cada módulo tinha um tom diferente da marca);
   2) unifica a geometria de botões, pílulas, campos e tabelas;
   3) fornece componentes novos com prefixo px- (toast, modal, faixa de erro,
      skeleton, estado vazio, dropzone) usados pelo plexum-utils.js;
   4) foco visível, alvos de toque de 44 px, tabelas em cards no celular.
   Cores da marca: navy #2C3451 · azul #18A2CD · laranja #F79A58 · cinza #AEB1B5
                   verde #2E9E5B · vermelho #D64545
   ========================================================================== */

/* ---------- 1. Tokens canônicos (sobrescrevem os nomes usados em cada módulo) ---------- */
:root{
  /* nomes canônicos */
  --px-navy:#2C3451; --px-navy-deep:#232A42; --px-navy-soft:#3A4366;
  --px-blue:#18A2CD; --px-blue-deep:#127FA1; --px-blue-soft:#E1F3F9;
  --px-orange:#F79A58; --px-orange-deep:#E07F3A; --px-orange-soft:#FDEEE1;
  --px-gray:#AEB1B5; --px-green:#2E9E5B; --px-green-soft:#E2F1EA;
  --px-red:#D64545; --px-red-soft:#FBE6E2; --px-warn:#E8A93B; --px-warn-soft:#FDF3E1;
  --px-bg:#F3F5F8; --px-surface:#FFFFFF; --px-ink:#222A3F; --px-muted:#6B7280; --px-line:#E2E6EC; --px-line-strong:#C7CCD6;
  --px-radius:10px; --px-radius-sm:8px; --px-shadow:0 1px 2px rgba(20,28,50,.06),0 6px 20px rgba(20,28,50,.06);
  --px-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --px-font-display:"Poppins","Inter",system-ui,sans-serif;

  /* aliases usados pelos módulos (todos passam a apontar para o mesmo valor) */
  --navy:var(--px-navy); --navy-deep:var(--px-navy-deep); --navy-soft:var(--px-navy-soft);
  --slate:var(--px-navy); --slate-2:var(--px-navy-soft);
  --blue:var(--px-blue); --blue-deep:var(--px-blue-deep); --blue-soft:var(--px-blue-soft);
  --accent:var(--px-blue); --accent-deep:var(--px-blue-deep); --accent-soft:var(--px-blue-soft);
  --orange:var(--px-orange); --orange-deep:var(--px-orange-deep); --orange-soft:var(--px-orange-soft);
  --gray:var(--px-gray);
  --green:var(--px-green); --green-soft:var(--px-green-soft); --green-bg:var(--px-green-soft);
  --ok:var(--px-green); --ok-soft:var(--px-green-soft);
  --red:var(--px-red); --red-soft:var(--px-red-soft); --red-bg:var(--px-red-soft);
  --danger:var(--px-red); --danger-soft:var(--px-red-soft);
  --warn:var(--px-warn);
  --bg:var(--px-bg); --paper:var(--px-bg); --surface:var(--px-surface); --card:var(--px-surface); --white:#fff;
  --ink:var(--px-ink); --text:var(--px-ink); --txt:var(--px-ink);
  --muted:var(--px-muted); --line:var(--px-line); --line-strong:var(--px-line-strong);
  --blue-bg:var(--px-blue-soft); --orange-bg:var(--px-orange-soft); --navy-bg:#ECEEF5;
}
/* Mão de Obra usa nomes próprios (e "--laranja" guarda o navy — mantido por compatibilidade) */
:root{
  --laranja:var(--px-navy); --laranja-dark:var(--px-navy-deep); --laranja-light:#ECEEF4;
  --accent-light:var(--px-orange-soft);
  --cinza-bg:var(--px-bg); --cinza-card:var(--px-surface); --cinza-border:var(--px-line);
  --cinza-text:var(--px-ink); --cinza-muted:var(--px-muted);
  --verde:var(--px-green); --verde-bg:var(--px-green-soft); --azul:var(--px-blue); --azul-bg:var(--px-blue-soft);
  --amarelo:#D4853A; --amarelo-bg:var(--px-warn-soft); --vermelho:var(--px-red); --vermelho-bg:var(--px-red-soft);
  --cinza-prata:var(--px-gray);
}

/* ---------- 2. Base tipográfica e geometria comum ---------- */
html{ -webkit-text-size-adjust:100%; }
body{ font-family:var(--px-font); color:var(--px-ink); }
h1,h2,h3,.display{ font-family:var(--px-font-display); }
:focus-visible{ outline:2px solid var(--px-blue); outline-offset:2px; border-radius:4px; }
button:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible){ outline:none; }
::selection{ background:var(--px-blue-soft); }

/* botões: uma única geometria (cores continuam as de cada módulo) */
.btn{ font-family:var(--px-font); font-weight:600; font-size:13.5px; line-height:1.2; padding:10px 16px; border-radius:var(--px-radius-sm);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:filter .15s,transform .05s,box-shadow .15s; }
.btn:hover{ filter:brightness(1.04); }
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn:disabled{ opacity:.55; cursor:not-allowed; filter:none; transform:none; }
.btn.sm,.btn-sm,.btn.btn-sm{ padding:7px 12px; font-size:12.5px; }
.btn.px-busy{ position:relative; pointer-events:none; opacity:.8; }
.btn.px-busy::after{ content:""; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:px-spin .7s linear infinite; margin-left:6px; }
@keyframes px-spin{ to{ transform:rotate(360deg); } }

/* pílulas e chips: mesma altura e raio */
.badge,.pill,.status,.tag{ border-radius:999px; font-weight:700; letter-spacing:.02em; }

/* campos */
input,select,textarea{ font-family:var(--px-font); }
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{ border-radius:var(--px-radius-sm); }

/* tabelas: cabeçalho discreto e zebra suave, igual em todo módulo */
table th{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--px-muted); font-weight:600; }
table tbody tr:hover td{ background:#F8FAFC; }

/* ---------- 3. Componentes px- ---------- */
/* toast (fila no canto inferior direito) */
#px-toasts{ position:fixed; right:18px; bottom:18px; z-index:99999; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:min(420px,calc(100vw - 32px)); }
.px-toast{ pointer-events:auto; background:var(--px-navy); color:#fff; padding:11px 14px 11px 12px; border-radius:var(--px-radius); box-shadow:var(--px-shadow);
  font-size:13.5px; font-weight:600; line-height:1.35; display:flex; align-items:flex-start; gap:10px; border-left:4px solid var(--px-blue);
  animation:px-in .18s ease-out; }
.px-toast.ok{ border-left-color:var(--px-green); } .px-toast.error{ border-left-color:var(--px-red); } .px-toast.warn{ border-left-color:var(--px-orange); }
.px-toast .px-ic{ font-size:15px; line-height:1.2; flex:0 0 auto; }
.px-toast .px-x{ margin-left:auto; background:transparent; border:none; color:#fff; opacity:.7; cursor:pointer; font-size:16px; line-height:1; padding:0 2px; }
.px-toast.px-out{ animation:px-out .18s ease-in forwards; }
@keyframes px-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes px-out{ to{ opacity:0; transform:translateY(8px); } }

/* modal de diálogo (confirm / prompt / alert) */
.px-dlg-wrap{ position:fixed; inset:0; z-index:99990; background:rgba(20,26,45,.48); display:flex; align-items:center; justify-content:center; padding:16px; animation:px-fade .15s; }
@keyframes px-fade{ from{ opacity:0; } }
.px-dlg{ background:var(--px-surface); color:var(--px-ink); width:min(480px,100%); border-radius:14px; box-shadow:0 20px 60px rgba(20,28,50,.28); padding:22px 22px 18px; animation:px-pop .18s ease-out; }
@keyframes px-pop{ from{ opacity:0; transform:scale(.96) translateY(6px); } }
.px-dlg h3{ margin:0 0 8px; font-size:17px; font-family:var(--px-font-display); color:var(--px-navy); }
.px-dlg .px-msg{ font-size:14px; color:#3B4358; line-height:1.5; white-space:pre-line; }
.px-dlg .px-msg b{ color:var(--px-ink); }
.px-dlg input.px-in,.px-dlg textarea.px-in{ width:100%; margin-top:12px; padding:10px 12px; border:1px solid var(--px-line-strong); border-radius:var(--px-radius-sm); font-size:14px; box-sizing:border-box; }
.px-dlg textarea.px-in{ min-height:84px; resize:vertical; }
.px-dlg .px-hint{ font-size:12px; color:var(--px-muted); margin-top:6px; }
.px-dlg .px-acts{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap; }
.px-dlg .px-b{ font-family:var(--px-font); font-weight:600; font-size:13.5px; padding:10px 16px; border-radius:var(--px-radius-sm); cursor:pointer; border:1px solid var(--px-line-strong); background:#fff; color:var(--px-ink); }
.px-dlg .px-b.primary{ background:var(--px-navy); border-color:var(--px-navy); color:#fff; }
.px-dlg .px-b.danger{ background:var(--px-red); border-color:var(--px-red); color:#fff; }
.px-dlg .px-b:disabled{ opacity:.5; cursor:not-allowed; }
.px-dlg.px-danger h3{ color:var(--px-red); }
.px-dlg pre.px-pre{ max-height:50vh; overflow:auto; background:#F4F6F9; border:1px solid var(--px-line); border-radius:8px; padding:10px; font-size:12px; margin-top:10px; white-space:pre-wrap; word-break:break-word; }

/* faixa de erro persistente (falha de leitura / permissão) */
.px-errorbar{ position:sticky; top:0; z-index:9000; background:var(--px-red-soft); color:#8E2323; border-bottom:1px solid #F1C4C4; padding:10px 16px; font-size:13.5px; font-weight:600; display:flex; gap:10px; align-items:center; }
.px-errorbar .px-x{ margin-left:auto; background:transparent; border:none; cursor:pointer; color:inherit; font-size:16px; }
.px-errorbar button.px-retry{ background:#fff; border:1px solid #F1C4C4; color:inherit; border-radius:6px; padding:5px 10px; font-weight:600; cursor:pointer; }

/* skeleton */
.px-skel{ background:linear-gradient(90deg,#E9ECF1 25%,#F4F6F9 37%,#E9ECF1 63%); background-size:400% 100%; animation:px-skel 1.2s ease infinite; border-radius:8px; }
@keyframes px-skel{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
.px-skel-rows{ display:flex; flex-direction:column; gap:10px; padding:14px; }
.px-skel-rows .px-skel{ height:16px; }
.px-skel-rows .px-skel:nth-child(2n){ width:78%; } .px-skel-rows .px-skel:nth-child(3n){ width:62%; }

/* estado vazio */
.px-empty{ text-align:center; padding:40px 20px; color:var(--px-muted); }
.px-empty .px-ic{ font-size:34px; margin-bottom:8px; }
.px-empty .px-t{ font-weight:700; color:var(--px-ink); font-size:15px; margin-bottom:4px; }
.px-empty .px-s{ font-size:13px; }
.px-empty .btn{ margin-top:14px; }

/* dropzone */
.px-drop{ border:2px dashed var(--px-line-strong); border-radius:var(--px-radius); padding:16px; text-align:center; color:var(--px-muted); font-size:13px; transition:background .15s,border-color .15s; cursor:pointer; }
.px-drop.drag{ background:var(--px-blue-soft); border-color:var(--px-blue); color:var(--px-blue-deep); }

/* cabeçalho ordenável genérico */
th.px-sort{ cursor:pointer; user-select:none; white-space:nowrap; }
th.px-sort:hover{ color:var(--px-navy); }
th.px-sort .arrow{ margin-left:4px; font-size:.6rem; opacity:.35; }
th.px-sort.on{ color:var(--px-navy); } th.px-sort.on .arrow{ opacity:1; color:var(--px-blue); }

/* ---------- 4. Toque e celular ---------- */
@media (pointer:coarse){
  .btn{ min-height:44px; }
  input:not([type=checkbox]):not([type=radio]),select,textarea{ font-size:16px !important; min-height:42px; }
}
@media (max-width:760px){
  /* tabelas marcadas com .px-cards viram cartões (cada td usa data-label) */
  table.px-cards thead{ display:none; }
  table.px-cards,table.px-cards tbody,table.px-cards tr,table.px-cards td{ display:block; width:100%; box-sizing:border-box; }
  table.px-cards tr{ background:var(--px-surface); border:1px solid var(--px-line); border-radius:var(--px-radius); margin:0 0 10px; padding:8px 12px; box-shadow:var(--px-shadow); }
  table.px-cards td{ display:flex; justify-content:space-between; gap:12px; padding:6px 0 !important; border:none !important; text-align:left !important; }
  table.px-cards td::before{ content:attr(data-label); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--px-muted); font-weight:600; flex:0 0 38%; }
  table.px-cards td:not([data-label])::before{ content:none; }
  table.px-cards td:not([data-label]){ justify-content:flex-end; }
  .px-dlg{ padding:18px 16px 14px; }
}
@media print{ #px-toasts,.px-dlg-wrap,.px-errorbar{ display:none !important; } }