/* ============================================================================
   aurora-core.css — Sistema visual "Aurora Premium" (FUNDACAO / fonte unica).
   Kit de componentes REAIS reconstruido a partir do mockup de referencia
   (artifact "Administracao Global - Aurora" + _mockup-portal.html).

   - TUDO escopado sob .aur  -> isola 100% do CSS legado durante a migracao.
   - Uma view migrada recebe class="aur" e usa estas classes reais (nada de !important).
   - Canvas aurora + blobs sao GLOBAIS (aurora.css no body + #aur-sky). A view e transparente.
   - Claro por padrao. Escuro segue o toggle do app (body.theme-dark) e tambem
     .aur[data-theme="dark"] (para preview standalone). NUNCA fundo preto.
   - Fonte Segoe UI. Superficies = vidro fosco. Primario = gradiente roxo.
   Carregar por ULTIMO no index.html.
   ============================================================================ */

.aur, .aur *{ box-sizing:border-box }

.aur{
  --brand:#394820; --brand2:#5c6f3a; --lilac:#8faf57; --acc:#4e5f2f;
  --ink:#1d2215; --ink-soft:#5b6250; --line:rgba(57,72,32,.14); --fld-bd:rgba(57,72,32,.36);
  --glass:rgba(255,255,255,.62); --glass-brd:rgba(255,255,255,.7);
  --shadow:0 18px 50px -22px rgba(46,59,23,.45);
  --ok:#3f9d6a; --warn:#9a6c22; --err:#d43766; --info:#3a6fd0; /* warn/err escurecidos p/ AA no claro (dark tem override) */
  --p0:#e23a6d; --p1:#e8863a; --p2:#c68a2c; --p3:#4a9d6a;
  --font:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;

  position:relative; z-index:1;
  font-family:var(--font); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

/* ---- Escuro: segue o toggle global (body.theme-dark) OU preview (.aur[data-theme=dark]) ---- */
body.theme-dark .aur,
.aur[data-theme="dark"]{
  --brand:#8fb057; --brand2:#a5c66c; --lilac:#b4cb8d; --acc:#95be4e;
  --ink:#e7f0d9; --ink-soft:#adba96; --line:rgba(157,190,99,.18); --fld-bd:rgba(157,190,99,.36);
  --glass:rgba(54,62,42,.6); --glass-brd:rgba(146,181,87,.28);
  --shadow:0 22px 55px -20px rgba(0,0,0,.55);
  --p0:#ff6a92; --p1:#ffab5e; --p2:#e8c04f; --p3:#66d69a;
  --ok:#66d69a; --warn:#ffb877; --err:#ff86a6; --info:#8fb2ff;
}

/* ---- container padrao de pagina ----
   1560px e o padrao do sistema (mesma largura de .in-page na Intranet, do
   .intranet-grid na UBS e do .reg-shell na Regulacao). Os 1240px vinham do
   MOCKUP de referencia, que era um layout de leitura — em painel operacional
   sobrava tela vazia dos dois lados. */
.aur .shell{
  position:relative; z-index:1; max-width:1560px; margin:0 auto; padding:18px 18px 40px;
  display:flex; flex-direction:column; gap:16px;
}
/* o .hidden global do app precisa vencer o display:inline-flex dos botoes do kit */
.aur .hidden{ display:none !important }

/* ============================ SUPERFICIE VIDRO ============================ */
.aur .glass{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--glass-brd);
  border-radius:20px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.5);
  position:relative;
}
/* fio de luz iridescente de 1px na borda */
.aur .glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,rgba(92,111,58,.5),transparent 40%,transparent 60%,rgba(143,175,87,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.7;
}

/* ============================ TOPBAR / MARCA ============================ */
.aur .topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; flex-wrap:wrap }
.aur .brand{ display:flex; align-items:center; gap:14px; min-width:0 }
.aur .mark{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:#fff; flex:none;
  background:linear-gradient(135deg,var(--brand),#64793f); box-shadow:0 8px 22px -6px rgba(57,72,32,.6);
}
.aur .brand-txt h1{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.15 }
.aur .brand-txt p{ margin:2px 0 0; font-size:12px; line-height:1.5; color:var(--ink-soft) }
.aur .actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }

/* ============================ BOTOES ============================ */
.aur .btn{
  font-family:inherit; font-size:13px; font-weight:600; border-radius:11px; padding:9px 14px;
  border:1px solid var(--line); cursor:pointer; background:transparent; color:var(--ink);
  transition:.18s; white-space:nowrap; display:inline-flex; align-items:center; gap:7px;
}
.aur .btn:hover{ transform:translateY(-1px) }
.aur .btn.ghost{ background:rgba(255,255,255,.35) }
body.theme-dark .aur .btn.ghost, .aur[data-theme="dark"] .btn.ghost{ background:rgba(255,255,255,.06) }
.aur .btn.primary{ color:#fff; border:none; background:linear-gradient(135deg,var(--brand) 0%,#64793f 55%,#7f9b4e 100%); box-shadow:0 10px 24px -8px rgba(78,98,44,.7) }
.aur .btn.primary .plus{ font-weight:800 }
.aur .btn.soft{ color:var(--brand); background:rgba(92,111,58,.12); border-color:rgba(92,111,58,.22) }
body.theme-dark .aur .btn.soft, .aur[data-theme="dark"] .btn.soft{ color:var(--brand2); background:rgba(147,185,80,.14) }
.aur .btn.danger{ color:#fff; border:none; background:linear-gradient(135deg,var(--err),#ff7a9a); box-shadow:0 10px 24px -8px rgba(210,40,90,.6) }
.aur .btn.exit{ color:var(--ink-soft) }
.aur .icon-btn{
  width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.35);
  color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:.18s;
}
body.theme-dark .aur .icon-btn, .aur[data-theme="dark"] .icon-btn{ background:rgba(255,255,255,.06) }
.aur .icon-btn:hover{ color:var(--brand); border-color:rgba(92,111,58,.4); transform:translateY(-1px) }
/* alternancia sol/lua no botao de tema */
.aur .theme .i-moon{ display:none }
body.theme-dark .aur .theme .i-sun, .aur[data-theme="dark"] .theme .i-sun{ display:none }
body.theme-dark .aur .theme .i-moon, .aur[data-theme="dark"] .theme .i-moon{ display:block }

/* ============================ ABAS ============================ */
.aur .tabs{ display:flex; gap:4px; padding:6px; position:relative; align-self:flex-start; overflow:auto; scrollbar-width:none }
.aur .tabs::-webkit-scrollbar{ display:none }
.aur .tab{
  position:relative; z-index:1; font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-soft);
  background:transparent; border:none; padding:9px 18px; border-radius:13px; cursor:pointer; white-space:nowrap; transition:color .2s;
}
.aur .tab.active{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),#64793f);
  box-shadow:0 8px 20px -8px rgba(78,98,44,.7);
}
/* ink deslizante opcional: presente so quando a view injeta <span class="tab-ink"> */
.aur .tabs:has(.tab-ink) .tab.active{ background:transparent; box-shadow:none }
.aur .tab-ink{
  position:absolute; z-index:0; top:6px; bottom:6px; left:6px; width:82px; border-radius:13px;
  background:linear-gradient(135deg,var(--brand),#64793f); box-shadow:0 8px 20px -8px rgba(78,98,44,.7);
  transition:transform .32s cubic-bezier(.4,1.1,.4,1),width .32s;
}

/* ============================ FILTROS ============================ */
.aur .filters{ display:flex; gap:14px; padding:14px 18px; flex-wrap:wrap; align-items:flex-end }
.aur .field{ display:flex; flex-direction:column; gap:5px }
.aur .field .lbl{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft) }
.aur .field.search{
  flex:1; min-width:230px; flex-direction:row; align-items:center; gap:9px;
  background:rgba(255,255,255,.4); border:1px solid var(--fld-bd); border-radius:12px; padding:10px 13px; color:var(--ink-soft);
}
body.theme-dark .aur .field.search, .aur[data-theme="dark"] .field.search{ background:rgba(255,255,255,.05) }
.aur .field.search:focus-within{ border-color:var(--brand2); box-shadow:0 0 0 3px rgba(92,111,58,.18) }
/* o campo de busca JA e a caixa: o input por dentro fica cru.
   !important porque o aurora.css global forca background/border em todo `input`. */
.aur .field.search input,
.aur .field.search input:focus{
  border:none !important; background:transparent !important; box-shadow:none !important;
  outline:none; font-family:inherit; font-size:14.5px; color:var(--ink); width:100%; padding:0;
}
.aur .field select, .aur .field input:not(.search input):not([type=checkbox]):not([type=radio]){
  font-family:inherit; font-size:13px; color:var(--ink); background:rgba(255,255,255,.4);
  border:1px solid var(--fld-bd); border-radius:11px; padding:9px 13px; cursor:pointer; min-width:150px; outline:none;
}
body.theme-dark .aur .field select, .aur[data-theme="dark"] .field select{ background:rgba(255,255,255,.05) }
.aur .field select:focus{ border-color:var(--brand2); box-shadow:0 0 0 3px rgba(92,111,58,.18) }
.aur .chips{ display:flex; gap:6px }
.aur .chip{
  font-family:inherit; font-size:12px; font-weight:700; border-radius:10px; padding:8px 13px;
  border:1px solid var(--line); background:rgba(255,255,255,.35); color:var(--ink-soft); cursor:pointer; transition:.16s;
}
body.theme-dark .aur .chip, .aur[data-theme="dark"] .chip{ background:rgba(255,255,255,.05) }
.aur .chip:hover{ transform:translateY(-1px) }
.aur .chip.active{ color:#fff; border:none; background:linear-gradient(135deg,var(--brand),#64793f) }
.aur .chip.p0.active{ background:linear-gradient(135deg,#e23a6d,#ff7aa0) }
.aur .chip.p1.active{ background:linear-gradient(135deg,#e8863a,#ffb066) }
.aur .chip.p2.active{ background:linear-gradient(135deg,#c68a2c,#e6c150) }
.aur .chip.p3.active{ background:linear-gradient(135deg,#3f9d6a,#66d69a) }

/* ============================ GRID DE CONTEUDO ============================ */
.aur .grid{ display:grid; grid-template-columns:1fr 320px; grid-template-areas:"kpi kpi" "queue trend"; gap:16px }
.aur .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px }
/* grid-area so vale quando a faixa vive dentro do .grid de 2 colunas; solta, ela
   se auto-ajusta a QUALQUER quantidade de KPIs (3, 5, 6...) sem orfao na ultima linha */
.aur .grid > .kpis{ grid-area:kpi }
.aur .queue{ grid-area:queue; min-width:0 }
.aur .trend{ grid-area:trend }

/* ============================ KPI ============================ */
.aur .kpi{ padding:16px 16px 15px; display:flex; flex-direction:column; gap:8px; overflow:hidden; min-height:132px }
.aur .k-top{ display:flex; align-items:center; justify-content:space-between }
.aur .k-ico{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--brand),#64793f) }
.aur .k-defer .k-ico{ background:linear-gradient(135deg,#3f9d6a,#63c98d) }
.aur .k-time .k-ico{ background:linear-gradient(135deg,#394820,#5c6f3a) }
.aur .k-sla .k-ico{ background:linear-gradient(135deg,#e23a6d,#ff8a5e) }
.aur .k-info .k-ico{ background:linear-gradient(135deg,#3a6fd8,#7aa0f0) }
.aur .k-warn .k-ico{ background:linear-gradient(135deg,#c68a2c,#e6c150) }
.aur .k-tag{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); background:rgba(92,111,58,.1); padding:3px 8px; border-radius:20px }
.aur .k-tag.alert{ color:#d43766; background:rgba(226,58,109,.12) }
body.theme-dark .aur .k-tag.alert, .aur[data-theme="dark"] .k-tag.alert{ color:#ff86a6 }
.aur .k-val{ font-size:26px; font-weight:750; letter-spacing:-.03em; line-height:1; display:flex; align-items:baseline; gap:6px }
.aur .k-val em{ font-style:normal; font-size:12px; font-weight:600; color:var(--ink-soft) }
.aur .k-val .pct{ font-size:16px; font-weight:700; color:var(--brand2); margin-left:1px }
.aur .k-sub{ font-size:12px; color:var(--ink-soft); margin-top:-2px }
.aur .k-bar{ height:6px; border-radius:6px; background:rgba(77,90,54,.12); overflow:hidden; margin-top:auto }
.aur .k-bar i{ display:block; height:100%; width:var(--w); border-radius:6px; background:linear-gradient(90deg,var(--brand),#7c974d) }
.aur .k-bar.warn i{ background:linear-gradient(90deg,#e23a6d,#ff9a6a) }
.aur .spark{ margin-top:auto; color:var(--brand2); height:26px }
.aur .spark svg{ width:100%; height:100% }
.aur .ring{
  --sz:46px; position:absolute; right:14px; bottom:12px; width:var(--sz); height:var(--sz); border-radius:50%;
  background:conic-gradient(#3f9d6a calc(var(--p)*1%),rgba(77,90,54,.14) 0); display:grid; place-items:center;
}
.aur .ring::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--glass); backdrop-filter:blur(4px) }
.aur .ring span{ position:relative; font-size:10.5px; font-weight:800; color:#3f9d6a }
body.theme-dark .aur .ring span, .aur[data-theme="dark"] .ring span{ color:#66d69a }
body.theme-dark .aur .ring, .aur[data-theme="dark"] .ring{ background:conic-gradient(#66d69a calc(var(--p)*1%),rgba(157,190,99,.16) 0) }

/* ============================ FILA / TABELA ============================ */
.aur .q-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:16px 18px 12px; flex-wrap:wrap }
.aur .q-head h2{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.02em }
.aur .q-head p{ margin:3px 0 0; font-size:12px; color:var(--ink-soft) }
.aur .q-legend{ display:flex; gap:14px; font-size:12px; color:var(--ink-soft) }
.aur .q-legend span{ display:flex; align-items:center; gap:5px }
.aur .dot{ width:8px; height:8px; border-radius:50%; display:inline-block }
.aur .d-defer{ background:#3f9d6a } .aur .d-pend{ background:#e8863a } .aur .d-neg{ background:#e23a6d }

.aur .q-list{ padding:4px 8px 10px }
.aur .q-row{
  display:grid; grid-template-columns:1.7fr 1.1fr .7fr .9fr .95fr .6fr; align-items:center; gap:10px;
  padding:12px 12px; border-radius:14px; font-size:13px; transition:.16s;
}
.aur .q-row.head{ padding:6px 12px 8px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft) }
.aur .q-row:not(.head){ cursor:pointer }
.aur .q-row:not(.head):hover{ background:rgba(92,111,58,.08) }
.aur .q-row:not(.head):focus-visible{ outline:2px solid var(--brand2); outline-offset:-2px }
body.theme-dark .aur .q-row:not(.head):hover, .aur[data-theme="dark"] .q-row:not(.head):hover{ background:rgba(147,185,80,.1) }
.aur .pt{ display:flex; align-items:center; gap:10px; min-width:0 }
.aur .pt b{ font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.aur .av{ flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:10.5px; font-weight:800; color:#fff; font-style:normal; letter-spacing:.02em }
.aur .a1{ background:linear-gradient(135deg,#e23a6d,#ff8aa0) } .aur .a2{ background:linear-gradient(135deg,#394820,#5c6f3a) }
.aur .a3{ background:linear-gradient(135deg,#3f9d6a,#66d69a) } .aur .a4{ background:linear-gradient(135deg,#3a6fd8,#7aa0f0) }
.aur .a5{ background:linear-gradient(135deg,#c68a2c,#e6c150) } .aur .a6{ background:linear-gradient(135deg,#4e5f2f,#7c974d) }
.aur .esp{ color:var(--ink-soft) }
.aur .prio{ font-style:normal; font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:8px; color:#fff }
.aur .prio.p0{ background:linear-gradient(135deg,#e23a6d,#ff7a9a) } .aur .prio.p1{ background:linear-gradient(135deg,#e8863a,#ffb066) }
.aur .prio.p2{ background:linear-gradient(135deg,#c68a2c,#e6c150) } .aur .prio.p3{ background:linear-gradient(135deg,#3f9d6a,#66d69a) }
/* p4 = azul. A classificacao de Manchester tem 5 niveis; sem este, "Azul - nao
   urgente" caia em cinza e ficava indistinguivel de "Sem classificacao". */
.aur .prio.p4{ background:linear-gradient(135deg,#3a6fd8,#7aa0f0) }

/* pulso para alerta clinico que exige acao imediata (achado critico) */
.aur .au-pulse{ animation:auPulse 1.5s ease-in-out infinite }
@keyframes auPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
@media (prefers-reduced-motion:reduce){ .aur .au-pulse{ animation:none; outline:2px solid currentColor; outline-offset:2px } }
.aur .st{ font-style:normal; font-size:12px; font-weight:700; padding:5px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:5px }
.aur .st::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.aur .st.defer{ color:#2f8659; background:rgba(63,157,106,.14) }
.aur .st.pend{ color:#ad631e; background:rgba(232,134,58,.14) }
.aur .st.neg{ color:#d02f5c; background:rgba(226,58,109,.14) }
.aur .st.neu{ color:var(--ink-soft); background:rgba(77,90,54,.1) }
.aur .st.info{ color:#3a6fd0; background:rgba(58,111,208,.14) }
body.theme-dark .aur .st.neu, .aur[data-theme="dark"] .st.neu{ background:rgba(147,185,80,.12) }
body.theme-dark .aur .st.defer, .aur[data-theme="dark"] .st.defer{ color:#77e0a5 }
body.theme-dark .aur .st.pend, .aur[data-theme="dark"] .st.pend{ color:#ffb877 }
body.theme-dark .aur .st.neg, .aur[data-theme="dark"] .st.neg{ color:#ff86a6 }
body.theme-dark .aur .st.info, .aur[data-theme="dark"] .st.info{ color:#8fb2ff }
.aur .proto{ font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:12px; font-weight:600 }
.aur .sla{ font-variant-numeric:tabular-nums; font-weight:700; font-size:12px; text-align:right }
.aur .sla.ok{ color:#2f8659 } .aur .sla.warn{ color:#ad631e } .aur .sla.late{ color:#d02f5c }
body.theme-dark .aur .sla.ok, .aur[data-theme="dark"] .sla.ok{ color:#77e0a5 }
body.theme-dark .aur .sla.warn, .aur[data-theme="dark"] .sla.warn{ color:#ffb877 }
body.theme-dark .aur .sla.late, .aur[data-theme="dark"] .sla.late{ color:#ff86a6 }
.aur .ta-r{ text-align:right; justify-self:end }

/* ============================ ASIDE DE TENDENCIA ============================ */
.aur .trend{ padding:16px 18px; display:flex; flex-direction:column; gap:6px }
.aur .t-head{ display:flex; align-items:center; justify-content:space-between }
.aur .t-head h2{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.02em }
.aur .t-pill{ font-size:12px; font-weight:800; padding:4px 9px; border-radius:20px }
.aur .t-pill.up{ color:#2f8659; background:rgba(63,157,106,.15) }
.aur .t-pill.down{ color:#d02f5c; background:rgba(226,58,109,.14) }
body.theme-dark .aur .t-pill.up, .aur[data-theme="dark"] .t-pill.up{ color:#77e0a5 }
.aur .t-sub{ margin:0; font-size:12px; color:var(--ink-soft) }
.aur .chart{ height:120px; margin:6px 0 4px }
.aur .chart svg{ width:100%; height:100% }
.aur .tline{ filter:drop-shadow(0 4px 8px rgba(78,95,47,.35)) }
.aur .t-stats{ list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.aur .t-stats li{ background:rgba(92,111,58,.08); border-radius:12px; padding:9px 10px; display:flex; flex-direction:column; gap:2px }
body.theme-dark .aur .t-stats li, .aur[data-theme="dark"] .t-stats li{ background:rgba(147,185,80,.1) }
.aur .t-stats span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700 }
.aur .t-stats b{ font-size:18px; font-weight:750; letter-spacing:-.02em }
.aur .t-note{ margin-top:8px; font-size:12px; color:var(--ink-soft); background:rgba(255,255,255,.35); border:1px dashed var(--line); border-radius:12px; padding:10px 12px; line-height:1.4 }
body.theme-dark .aur .t-note, .aur[data-theme="dark"] .t-note{ background:rgba(255,255,255,.04) }
.aur .t-note b{ color:var(--brand2) }

/* ============================ MODAIS ============================ */
/* O overlay costuma ser anexado ao document.body e recebe a classe .aur no
   PROPRIO elemento — nesse caso o seletor descendente nao casa e ele perde
   position/z-index. Por isso o kit aceita as duas formas. */
.aur .au-modal-ovl, .aur.au-modal-ovl{ position:fixed; inset:0; z-index:60; background:rgba(29,34,19,.5); backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px }
.aur .au-modal{ width:min(560px,100%); max-height:88vh; overflow:auto; padding:22px 22px 20px;
  background:rgba(255,255,255,.985); backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5) }
body.theme-dark .aur .au-modal, .aur[data-theme="dark"] .au-modal{ background:rgba(37,41,28,.985); backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5) }
.aur .au-modal h2{ margin:0 0 4px; font-size:18px; font-weight:700; letter-spacing:-.02em }

/* ============================ DIVERSOS ============================ */
.aur .foot{ text-align:center; font-size:12px; color:var(--ink-soft); padding-top:6px; opacity:.85 }

/* estado vazio / sem resultado (componente compartilhado) */
.aur .au-empty{
  grid-column:1/-1; padding:30px 22px; text-align:center; font-size:13px; color:var(--ink-soft);
  border:1px dashed var(--line); border-radius:16px; background:rgba(255,255,255,.3); line-height:1.5;
}
body.theme-dark .aur .au-empty, .aur[data-theme="dark"] .au-empty{ background:rgba(255,255,255,.04) }
.aur .au-empty strong{ display:block; color:var(--ink); font-size:14.5px; font-weight:700; margin-bottom:4px }
.aur button:focus-visible, .aur input:focus-visible, .aur select:focus-visible{ outline:2px solid var(--brand2); outline-offset:2px }

/* ============================ RESPONSIVO ============================ */
@media (max-width:920px){
  .aur .grid{ grid-template-columns:1fr; grid-template-areas:"kpi" "queue" "trend" }
  .aur .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px){
  .aur .kpis{ grid-template-columns:1fr 1fr }
  .aur .q-row{ grid-template-columns:1.6fr .8fr .8fr; gap:8px }
  .aur .q-row .esp, .aur .q-row .proto,
  .aur .q-row.head span:nth-child(2), .aur .q-row.head span:nth-child(5), .aur .q-row.head span:nth-child(6){ display:none }
  .aur .brand-txt h1{ font-size:16px }
}
@media (max-width:420px){ .aur .kpis{ grid-template-columns:1fr } }

/* ============================ TABELA ============================ */
/* Componente que faltava no kit. Os modulos clinicos/UPA renderizam tabelas
   dentro de #ubs-main-content (ja sob .aur), entao herdam isto de graca. */
.aur .au-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px }
.aur .au-table th{
  text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.aur .au-table td{ padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle }
.aur .au-table tbody tr:last-child td{ border-bottom:none }
.aur .au-table tbody tr{ transition:background .16s }
.aur .au-table tbody tr:hover{ background:rgba(92,111,58,.07) }
body.theme-dark .aur .au-table tbody tr:hover, .aur[data-theme="dark"] .au-table tbody tr:hover{ background:rgba(147,185,80,.1) }
.aur .au-table-wrap{ overflow-x:auto; scrollbar-width:thin }

/* ============================ FORM KIT ============================ */
.aur .au-form{ display:grid; gap:12px }
.aur .au-form-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.aur .au-form-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:720px){ .aur .au-form-2, .aur .au-form-3{ grid-template-columns:1fr } }
.aur .au-fld{ display:flex; flex-direction:column; gap:5px; min-width:0 }
.aur .au-fld > label, .aur .au-fld > .lbl{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);
}
.aur .au-fld input, .aur .au-fld select, .aur .au-fld textarea{
  font-family:inherit; font-size:13px; color:var(--ink);
  background:rgba(255,255,255,.45); border:1px solid var(--fld-bd); border-radius:11px;
  padding:9px 12px; outline:none; width:100%; margin:0;
}
body.theme-dark .aur .au-fld input, body.theme-dark .aur .au-fld select, body.theme-dark .aur .au-fld textarea,
.aur[data-theme="dark"] .au-fld input, .aur[data-theme="dark"] .au-fld select, .aur[data-theme="dark"] .au-fld textarea{
  background:rgba(255,255,255,.06);
}
.aur .au-fld input:focus, .aur .au-fld select:focus, .aur .au-fld textarea:focus{
  border-color:var(--brand2); box-shadow:0 0 0 3px rgba(92,111,58,.18);
}
.aur .au-fld textarea{ min-height:84px; resize:vertical }
.aur .au-fld .au-hint{ font-size:12px; color:var(--ink-soft) }
.aur .au-fld.is-invalid input, .aur .au-fld.is-invalid select{ border-color:var(--err); box-shadow:0 0 0 3px rgba(226,58,109,.15) }

/* seção dentro de um painel embutido */
.aur .au-sec{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px }
.aur .au-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.aur .au-sec-head h2, .aur .au-sec-head h3{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.02em }
.aur .au-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }

/* ── ESTADO DESABILITADO ──────────────────────────────────────
   O kit nao tinha :disabled. Faltava porque no layout antigo varios
   "botoes" eram <div>, onde a propriedade disabled do JS nao tem
   efeito algum; ao virarem <button> de verdade o estado passou a
   valer e precisa ser legivel. Cobre tambem hover/active para o
   controle nao "levantar" quando esta bloqueado. */
.aur .btn:disabled,
.aur .btn[disabled] {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.4);
  box-shadow: none;
  transform: none;
}
.aur .btn:disabled:hover,
.aur .btn[disabled]:hover,
.aur .btn:disabled:active,
.aur .btn[disabled]:active {
  transform: none;
  box-shadow: none;
  filter: grayscale(.4);
}