/* css/20-panel-console.css — overlay bold (console) dos paineis SPA nao-reskinizados.
   Agentes UX/UI (2026-07-19). Escopado #view-, aditivo, por ultimo. */


/* ===== SERVIDOR ===== */
/* =====================================================================
   OVERLAY CONSOLE — Painel do Servidor (banco de horas)
   Escopo estrito: #view-servidor (classes reais vistas em views/servidor.html
   linhas 1-392 e no render js/app/servidor.js). Carrega por ultimo, aditivo.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. COMMAND HEADER — .intranet-header
   Base (09-reception.css) ja e gradiente primary-dark->primary. Aqui
   reforcamos: gradiente 110deg mais contrastado, sombra profunda, cantos,
   highlight radial (::after) e barra-acento vertical (kicker via ::before
   no .intranet-header-brand, sem injetar texto = nao desloca conteudo).
   --------------------------------------------------------------------- */
#view-servidor .intranet-header {
  background: linear-gradient(110deg, #273114 0%, #394820 60%, #4c5d2f 100%);
  border-radius: 18px;
  padding: 22px 26px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(39,49,20,0.18),
    0 14px 34px -12px rgba(39,49,20,0.45);
}
/* brilho de vidro no canto direito */
#view-servidor .intranet-header::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 40%;
  background: radial-gradient(circle at 72% 28%, rgba(255,255,255,0.14), transparent 62%);
  pointer-events: none;
}
/* barra-acento vertical (kicker visual) antes do logo */
#view-servidor .intranet-header-brand {
  position: relative;
  z-index: 1;
}
#view-servidor .intranet-header-brand::before {
  content: '';
  width: 4px;
  align-self: stretch;
  min-height: 40px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.35));
  box-shadow: 0 0 14px rgba(255,255,255,0.55);
  flex: 0 0 4px;
}
/* logo em vidro com mais presenca */
#view-servidor .intranet-header-logo {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}
#view-servidor .intranet-header-title {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
/* subtitulo vira micro-chip translucido */
#view-servidor .intranet-header-sub {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
}
#view-servidor .intranet-header-actions {
  position: relative;
  z-index: 1;
}
/* botoes do header em vidro branco */
#view-servidor .intranet-header .btn {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.26);
  font-weight: 600;
  border-radius: 9px;
  transition: background .18s ease, transform .18s ease;
}
#view-servidor .intranet-header .btn:hover {
  background: rgba(255,255,255,0.26);
  transform: translateY(-1px);
}
#view-servidor .intranet-header .btn.btn-danger {
  background: rgba(220,38,38,0.88);
  border-color: rgba(220,38,38,0.30);
}
#view-servidor .intranet-header .btn.btn-danger:hover {
  background: #dc2626;
}

/* ---------------------------------------------------------------------
   2. SIDEBAR — .intranet-sidebar / -section / -label / .intranet-menu-item
   Base do #view-servidor e crua; aplicamos a mesma linguagem refinada:
   cartao branco, rotulos console, item ativo com faixa/ponto roxo.
   --------------------------------------------------------------------- */
#view-servidor .intranet-sidebar {
  background: #ffffff;
  border: 1px solid #e3e9d8;
  border-radius: 16px;
  padding: 6px 0;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 6px 20px -12px rgba(39,49,20,0.18);
}
#view-servidor .intranet-sidebar-section + .intranet-sidebar-section {
  border-top: 1px solid #ecf0e5;
}
#view-servidor .intranet-sidebar-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d9977;
}
#view-servidor .intranet-menu-item {
  border-radius: 10px;
  font-weight: 600;
  color: #4d5243;
  transition: background .16s ease, color .16s ease;
}
#view-servidor .intranet-menu-item:hover:not(:disabled) {
  background: #f6f7f3;
  color: #394820;
}
/* item ativo: faixa-acento a esquerda + fundo tonal */
#view-servidor .intranet-menu-item.is-active {
  background: linear-gradient(90deg, rgba(57,72,32,0.12), rgba(57,72,32,0.03));
  color: #273114;
  box-shadow: inset 3px 0 0 #394820;
}

/* ---------------------------------------------------------------------
   3. CARDS — .card / .servidor-content-panel / .servidor-forms-card /
   .servidor-form-card  (painels de resumo, perfil, rendimento, forms).
   Radius ~18, borda sutil, sombra leve. Hover levanta nos paineis de
   listagem/formulario (servidor-content-panel).
   --------------------------------------------------------------------- */
#view-servidor .intranet-main .card {
  border: 1px solid #e3e9d8;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 24px -16px rgba(39,49,20,0.20);
}
/* titulos de secao dentro dos cards ganham peso console */
#view-servidor .intranet-main .card > h4,
#view-servidor .intranet-main .card > h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* paineis de conteudo (forms/contracheques/formulario) levantam no hover */
#view-servidor .servidor-content-panel {
  transition: transform .18s ease, box-shadow .18s ease;
}
#view-servidor .servidor-content-panel:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(15,23,42,0.05),
    0 16px 34px -18px rgba(39,49,20,0.30);
}

/* ---------------------------------------------------------------------
   4. KPIs — grid #servidor-summary-cards.
   As regras de .rh-kpi-card/-label/-value foram REMOVIDAS: o Servidor migrou
   para o .kpi do kit Aurora (aurora-core.css) e servidor.js parou de emitir
   aquelas classes, entao eram regras mortas — inclusive uma superficie branca
   opaca que so brigava com o vidro.
   --------------------------------------------------------------------- */
#view-servidor .rh-stat-grid {
  gap: 16px;
}

/* ---------------------------------------------------------------------
   5. STATUS CHIPS — .status-active / .status-inactive (gov status dos
   contracheques/formularios, via _govStatusClass em servidor.js).
   Viram pilulas com bg tonal do estado.
   --------------------------------------------------------------------- */
#view-servidor .status-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(22,163,74,0.12);
  color: #15803d;
  font-weight: 700;
  font-size: 0.78rem;
}
#view-servidor .status-inactive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(220,38,38,0.12);
  color: #dc2626;
  font-weight: 700;
  font-size: 0.78rem;
}

/* ---------------------------------------------------------------------
   6. FORM FIELDS — .servidor-form-field inputs/selects: foco com anel roxo
   da marca. Botao primario com peso. (.servidor-form-footer / -actions)
   --------------------------------------------------------------------- */
#view-servidor .servidor-form-field input:focus,
#view-servidor .servidor-form-field select:focus {
  border-color: #394820;
  box-shadow: 0 0 0 3px rgba(57,72,32,0.15);
  outline: none;
}
#view-servidor .servidor-form-footer-actions .btn.btn-primary,
#view-servidor .intranet-main .btn.btn-primary {
  font-weight: 700;
  box-shadow: 0 8px 18px -8px rgba(57,72,32,0.45);
}

/* =====================================================================
   DARK — body.theme-dark #view-servidor ...
   Fundos escuros, texto claro, acentos vivos preservados.
   ===================================================================== */

/* header: mesmo gradiente forte, sombra mais densa */
body.theme-dark #view-servidor .intranet-header {
  background: linear-gradient(110deg, #1d250f 0%, #2f3b1a 58%, #435229 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.40),
    0 16px 40px -14px rgba(0,0,0,0.60);
}

/* sidebar e cards em superficie escura */
body.theme-dark #view-servidor .intranet-sidebar {
  background: #171a12;
  border-color: #2c3125;
  box-shadow: 0 6px 20px -12px rgba(0,0,0,0.55);
}
body.theme-dark #view-servidor .intranet-sidebar-section + .intranet-sidebar-section {
  border-top-color: #23271d;
}
body.theme-dark #view-servidor .intranet-sidebar-label {
  color: #879175;
}
body.theme-dark #view-servidor .intranet-menu-item {
  color: #bfc7b2;
}
body.theme-dark #view-servidor .intranet-menu-item:hover:not(:disabled) {
  background: #21251b;
  color: #d7e1c5;
}
body.theme-dark #view-servidor .intranet-menu-item.is-active {
  background: linear-gradient(90deg, rgba(76,93,47,0.30), rgba(76,93,47,0.06));
  color: #e6ecdb;
  box-shadow: inset 3px 0 0 #708749;
}

body.theme-dark #view-servidor .intranet-main .card {
  border-color: #2c3125;
  box-shadow: 0 8px 26px -18px rgba(0,0,0,0.60);
}
body.theme-dark #view-servidor .servidor-content-panel:hover {
  box-shadow: 0 16px 36px -18px rgba(0,0,0,0.70);
}

/* status chips no escuro */
body.theme-dark #view-servidor .status-active {
  background: rgba(22,163,74,0.22);
  color: #4ade80;
}
body.theme-dark #view-servidor .status-inactive {
  background: rgba(220,38,38,0.22);
  color: #f87171;
}

/* foco de campo no escuro */
body.theme-dark #view-servidor .servidor-form-field input:focus,
body.theme-dark #view-servidor .servidor-form-field select:focus {
  border-color: #708749;
  box-shadow: 0 0 0 3px rgba(112,135,73,0.25);
}


/* ===== RH ===== */
/* ============================================================
   RH — Overlay "console" (bold). Escopo total: #view-rh
   Classes reais: .intranet-header/-brand/-logo/-title/-sub,
   .intranet-menu-item(.is-active), .intranet-sidebar-label,
   .rh-dashboard-panel(s), .rh-report-table, .rh-chip, .rh-time-mark-missing,
   .rh-cc-tab(.is-active), .status-active/.status-inactive, .card
   Aditivo — carrega por ultimo.
   ============================================================ */

/* ---- COMMAND HEADER: faixa forte, gradiente marca + kicker ---- */
#view-rh .intranet-header {
  background: linear-gradient(110deg, #273114 0%, #394820 60%, #4c5d2f 100%);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(39,49,20,0.34);
  padding: 20px 28px;
  position: relative;
  overflow: hidden;
}
/* brilho diagonal sutil no canto direito (peso extra) */
#view-rh .intranet-header::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -10%;
  width: 340px;
  height: 240%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.16), transparent 70%);
  transform: rotate(18deg);
  pointer-events: none;
}
/* logo com mais presenca */
#view-rh .intranet-header-logo {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
/* kicker/badge acima do titulo via ::before */
#view-rh .intranet-header-title {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}
#view-rh .intranet-header-title::before {
  content: "RECURSOS HUMANOS";
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.72);
  margin-bottom: 3px;
}
#view-rh .intranet-header-sub { color: rgba(255,255,255,0.90); }
/* botoes do header: vidro sobre o gradiente */
#view-rh .intranet-header .btn {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.30);
  font-weight: 700;
}
#view-rh .intranet-header .btn:hover {
  background: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}

/* ---- SIDEBAR: rotulos e item ativo (JS usa .is-active) ---- */
#view-rh .intranet-sidebar-label {
  color: #4c5d2f;
  font-weight: 800;
}
/* item ativo: fundo tonal + barra de acento a esquerda (base so estiliza .active) */
#view-rh .intranet-menu-item {
  position: relative;
  border-radius: 12px;
}
#view-rh .intranet-menu-item.is-active {
  background: linear-gradient(90deg, rgba(57,72,32,0.12), rgba(57,72,32,0.04));
  border-color: rgba(57,72,32,0.35);
  color: #273114;
  font-weight: 700;
}
#view-rh .intranet-menu-item.is-active::after {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #394820, #4c5d2f);
}
#view-rh .intranet-menu-item:hover {
  border-color: rgba(57,72,32,0.25);
}

/* ---- CARDS: radius, borda sutil, sombra leve, hover levanta ---- */
#view-rh .card {
  border-radius: 18px;
  border: 1px solid #e1e7d7;
  box-shadow: 0 6px 20px rgba(39,49,20,0.08);
  transition: transform .16s ease, box-shadow .16s ease;
}
#view-rh .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(39,49,20,0.14);
}

/* ---- KPIs: faixa colorida de 4px a esquerda + numero grande ---- */
#view-rh .rh-dashboard-grid { gap: 16px; }

/* ---- PAINEIS do dashboard (graficos/ranking) ---- */
#view-rh .rh-dashboard-panels { gap: 16px; }
#view-rh .rh-dashboard-panel {
  border: 1px solid #e1e7d7;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(39,49,20,0.06);
}
#view-rh .rh-dashboard-panel h5 {
  color: #273114;
  font-weight: 800;
}

/* ---- TABELA de relatorio: cabecalho forte ---- */
#view-rh .rh-report-table th {
  background: #ecf2e3;
  color: #273114;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* ---- STATUS chips (aprovado/rejeitado) viram pilulas tonais ---- */
#view-rh .status-active {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(22,163,74,0.12);
  color: #15803d;
  font-weight: 700;
  font-size: 0.78rem;
}
#view-rh .status-inactive {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(220,38,38,0.12);
  color: #b91c1c;
  font-weight: 700;
  font-size: 0.78rem;
}
/* chip do "sem marcacao" no ponto: reforca alerta */
#view-rh .rh-time-mark-missing {
  background: rgba(217,119,6,0.12);
  border-color: rgba(217,119,6,0.35);
  color: #b45309;
}

/* ---- ABAS do contracheque (.rh-cc-tab): ativa com acento marca ----
   inline style define color/border-bottom → precisa !important p/ vencer */
#view-rh .rh-cc-tab.is-active {
  color: #394820 !important;
  border-bottom-color: #394820 !important;
}
#view-rh .rh-cc-tab:hover { color: #273114 !important; }

/* ============================================================
   DARK — body.theme-dark #view-rh (fundos escuros, acentos vivos)
   ============================================================ */

/* header: gradiente ainda mais profundo, sombra escura */
body.theme-dark #view-rh .intranet-header {
  background: linear-gradient(110deg, #181f0b 0%, #2f3b1a 55%, #394820 100%);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
body.theme-dark #view-rh .intranet-header-title::before { color: rgba(255,255,255,0.66); }

/* sidebar */
body.theme-dark #view-rh .intranet-sidebar-label { color: #93ac68; }
body.theme-dark #view-rh .intranet-menu-item.is-active {
  background: linear-gradient(90deg, rgba(76,93,47,0.30), rgba(76,93,47,0.10));
  border-color: rgba(111,133,72,0.55);
  color: #dce7ca;
}
body.theme-dark #view-rh .intranet-menu-item.is-active::after {
  background: linear-gradient(180deg, #698141, #93ac68);
}

/* cards */
body.theme-dark #view-rh .card {
  border-color: #2a2e24;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
}
body.theme-dark #view-rh .card:hover {
  box-shadow: 0 14px 34px rgba(0,0,0,0.6);
}

/* paineis dashboard */
body.theme-dark #view-rh .rh-dashboard-panel {
  background: #1a1c15;
  border-color: #2f3327;
}
body.theme-dark #view-rh .rh-dashboard-panel h5 { color: #cddab7; }

/* tabela */
body.theme-dark #view-rh .rh-report-table th {
  background: #22261c;
  color: #cddab7;
}

/* status chips no escuro */
body.theme-dark #view-rh .status-active {
  background: rgba(22,163,74,0.22);
  color: #6ee7a2;
}
body.theme-dark #view-rh .status-inactive {
  background: rgba(220,38,38,0.22);
  color: #fca5a5;
}
body.theme-dark #view-rh .rh-time-mark-missing {
  background: rgba(217,119,6,0.22);
  border-color: rgba(217,119,6,0.5);
  color: #fbbf24;
}

/* abas contracheque no escuro */
body.theme-dark #view-rh .rh-cc-tab.is-active {
  color: #a9c17e !important;
  border-bottom-color: #698141 !important;
}


/* ===== RECEPTION ===== */
/* ============================================================
   OVERLAY "CONSOLE" — Painel RECEPÇÃO  (#view-reception)
   Aditivo: carregar por ÚLTIMO. Tudo escopado em #view-reception
   (claro) e body.theme-dark #view-reception (escuro).
   Classes reais citadas do markup (views/servidor.html) e do
   render (js/app/reception2.js): .rec-page-header,
   .rc-flabel, .rc-fbox, .rc-fbox-auto, .rec-tab, .rec-tab-content,
   .rec-list-item, .rec-list-title, .rec-list-row, .rec-ticket-code,
   .rec-status-badge (+ variantes), #rec-patient-banner, .rc-nm,
   .rc-sub, .rc-ini, #rec-patient-summary, #rec-summary-name,
   #rec-empty-state, #rec-patient-card, #rec-new-form.
   ============================================================ */

/* ── COMMAND HEADER ───────────────────────────────────────────
   .rec-page-header já é gradiente inline; reforço o peso: gradiente
   pedido, sombra mais profunda, anel interno de brilho e um leve
   realce no topo. !important porque os valores vêm de style inline. */
#view-reception .rec-page-header {
  background: linear-gradient(110deg, #273114, #394820 60%, #4c5d2f) !important;
  border-radius: 20px !important;
  box-shadow:
    0 18px 40px -12px rgba(39,49,20,.55),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  position: relative;
}
/* fio de luz no topo da faixa, reforça o ar "console" */
#view-reception .rec-page-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, #7f9854, #4c5d2f 60%, transparent);
  opacity: .85;
  pointer-events: none;
}

/* ── BANNER DA FICHA (#rec-patient-banner) ────────────────────
   Também gradiente inline; deixo o corte mais marcado e a inicial
   (.rc-ini) mais forte. */
#view-reception #rec-patient-banner {
  background: linear-gradient(110deg, #202811, #394820 62%, #586d34) !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12);
}
#view-reception #rec-patient-banner .rc-ini {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  font-weight: 800;
  letter-spacing: .02em;
}
#view-reception #rec-patient-banner .rc-nm { font-weight: 800; letter-spacing: .01em; }
#view-reception #rec-patient-banner .rc-sub { opacity: .95; }

/* ── RÓTULOS DE CAMPO (.rc-flabel) ────────────────────────────
   Sem estilo próprio no markup — aplico tipografia "console":
   caixa-alta, peso, tracking e cor de marca esmaecida. */
#view-reception .rc-flabel {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #707b5d;
  margin-bottom: 6px;
}

/* ── CAMPOS (.rc-fbox / .rc-fbox-auto) ────────────────────────
   Inputs/selects sem estilo próprio no markup. Dou moldura sólida,
   radius e foco de marca forte. */
#view-reception .rc-fbox {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1.5px solid #e0e7d3;
  border-radius: 12px;
  background: #ffffff;
  color: #1a2011;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#view-reception .rc-fbox:focus {
  border-color: #586d34;
  box-shadow: 0 0 0 3px rgba(88,109,52,.18);
}
#view-reception .rc-fbox[readonly],
#view-reception .rc-fbox:disabled {
  background: #f5f7f1;
  color: #4d5343;
  cursor: default;
}
/* campos preenchidos por CEP: leve tom para sinalizar "automático" */
#view-reception .rc-fbox-auto {
  background: #edf2e5;
  border-style: dashed;
}

/* ── TABS (.rec-tab / .rec-tab.active) ────────────────────────
   Já existem regras em 09-reception.css; reforço o ativo com
   sublinhado grosso de marca e um chip no hover. */
#view-reception .rec-tab {
  border-radius: 10px 10px 0 0;
  font-weight: 700 !important;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
#view-reception .rec-tab:hover:not(.active) {
  background: #f5f8f0 !important;
  color: #3b4922 !important;
}
#view-reception .rec-tab.active {
  color: #394820 !important;
  box-shadow: inset 0 -3px 0 #394820 !important;
}

/* ── ITENS DE LISTA (agendamentos / senhas / retornos) ────────
   .rec-list-item vem do render. Dou o "cartão console": faixa
   colorida de 4px à esquerda (::before) + hover que levanta -2px. */
#view-reception .rec-list-item {
  position: relative;
  border: 1px solid #e6ecdb !important;
  border-radius: 14px !important;
  overflow: hidden;
}
#view-reception .rec-list-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(#394820, #586d34);
}
#view-reception .rec-list-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(88,109,52,.35) !important;
  box-shadow: 0 12px 26px -14px rgba(53,66,30,.45) !important;
}
#view-reception .rec-list-title { color: #1a2011; }
#view-reception .rec-ticket-code {
  color: #394820;
  font-weight: 800;
  letter-spacing: .02em;
}

/* ── STATUS / CHIPS (.rec-status-badge + variantes) ───────────
   Pílulas tonais no padrão de estados console. As variantes
   (rec-status-active/waiting/served/completed/closed/cancelled/no_show)
   são geradas pelo render a partir de a.status/t.status. */
#view-reception .rec-status-badge {
  padding: 4px 11px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}
/* info/azul: agendado + aguardando */
#view-reception .rec-status-active,
#view-reception .rec-status-waiting {
  background: #e8f0fe !important;
  border-color: #c7dbfb !important;
  color: #1d4ed8 !important;
}
/* alerta/âmbar: em atendimento */
#view-reception .rec-status-served {
  background: #fff4e5 !important;
  border-color: #fcd9a3 !important;
  color: #b45309 !important;
}
/* livre/verde: atendido/concluído/fechado */
#view-reception .rec-status-completed,
#view-reception .rec-status-closed {
  background: #e7f7ee !important;
  border-color: #b6e6c9 !important;
  color: #15803d !important;
}
/* erro/vermelho: cancelado */
#view-reception .rec-status-cancelled {
  background: #fdeaec !important;
  border-color: #7daf2899 cf !important;
  color: #b91c1c !important;
}
/* neutro/cinza: não compareceu */
#view-reception .rec-status-no_show {
  background: #eef1f5 !important;
  border-color: #d8dfe8 !important;
  color: #475569 !important;
}

/* ── RESUMO DO PACIENTE (#rec-patient-summary) ────────────────
   Reforço a barra lateral de acento (border-left) e o nome. */
#view-reception #rec-patient-summary {
  border-left-width: 4px !important;
  border-left-color: #586d34 !important;
}
#view-reception #rec-summary-name { color: #1a2011 !important; font-weight: 800 !important; }


/* ═══════════════════════════════════════════════════════════
   DARK  ·  body.theme-dark #view-reception
   Fundos escuros + texto claro, acentos de marca preservados.
   =========================================================== */

/* Header e banner permanecem vivos (gradiente forte já contrasta) */
#view-reception .rec-page-header,
#view-reception #rec-patient-banner { /* herdam do claro */ }

/* Superfícies com id (têm bg #fff inline) -> escurece com !important */
body.theme-dark #view-reception #rec-empty-state,
body.theme-dark #view-reception #rec-patient-card,
body.theme-dark #view-reception #rec-new-form {
  background: #1a1e13 !important;
  border-color: #292d21 !important;
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .7) !important;
}

/* Rótulos e campos */
body.theme-dark #view-reception .rc-flabel { color: #9fac88; }
body.theme-dark #view-reception .rc-fbox {
  background: #1b1f14;
  border-color: #2e3325;
  color: #e7ecdd;
}
body.theme-dark #view-reception .rc-fbox::placeholder { color: #7a816e; }
body.theme-dark #view-reception .rc-fbox:focus {
  border-color: #7eae2b;
  box-shadow: 0 0 0 3px rgba(126,174,43,.25);
}
body.theme-dark #view-reception .rc-fbox[readonly],
body.theme-dark #view-reception .rc-fbox:disabled {
  background: #1a1d14;
  color: #98a189;
}
body.theme-dark #view-reception .rc-fbox-auto { background: #212519; }

/* Tabs */
body.theme-dark #view-reception .rec-tab:hover:not(.active) {
  background: #1c2016 !important;
  color: #d3e1bc !important;
}
body.theme-dark #view-reception .rec-tab.active {
  color: #a5c56f !important;
  box-shadow: inset 0 -3px 0 #7eae2b !important;
}

/* Itens de lista */
body.theme-dark #view-reception .rec-list-item {
  background: #171a12 !important;
  border-color: #292d21 !important;
}
body.theme-dark #view-reception .rec-list-item::before {
  background: linear-gradient(#586d34, #7eae2b);
}
body.theme-dark #view-reception .rec-list-item:hover {
  border-color: rgba(126,174,43,.45) !important;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8) !important;
}
body.theme-dark #view-reception .rec-list-title { color: #e7ecdd; }
body.theme-dark #view-reception .rec-ticket-code { color: #a5c56f; }

/* Resumo do paciente (bg #fff inline) */
body.theme-dark #view-reception #rec-patient-summary {
  background: #1b1f14 !important;
  border-color: #2e3325 !important;
  border-left-color: #7eae2b !important;
}
body.theme-dark #view-reception #rec-summary-name { color: #e7ecdd !important; }

/* Status chips — fundos escuros tonais, acento vivo */
body.theme-dark #view-reception .rec-status-active,
body.theme-dark #view-reception .rec-status-waiting {
  background: rgba(37, 99, 235, .18) !important;
  border-color: rgba(37, 99, 235, .45) !important;
  color: #93b4fb !important;
}
body.theme-dark #view-reception .rec-status-served {
  background: rgba(217, 119, 6, .18) !important;
  border-color: rgba(217, 119, 6, .45) !important;
  color: #f2b968 !important;
}
body.theme-dark #view-reception .rec-status-completed,
body.theme-dark #view-reception .rec-status-closed {
  background: rgba(22, 163, 74, .18) !important;
  border-color: rgba(22, 163, 74, .45) !important;
  color: #6ee7a0 !important;
}
body.theme-dark #view-reception .rec-status-cancelled {
  background: rgba(220, 38, 38, .18) !important;
  border-color: rgba(220, 38, 38, .45) !important;
  color: #f4a3a3 !important;
}
body.theme-dark #view-reception .rec-status-no_show {
  background: rgba(100, 116, 139, .20) !important;
  border-color: rgba(100, 116, 139, .5) !important;
  color: #b6c0cd !important;
}



/* ===== FATURAMENTO ===== */
/* ============================================================================
   OVERLAY BOLD — "Faturamento SUS"
   Escopo raiz: #view-faturamento-sus (host #fatsus-root)  ·  DARK incluso.
   Aditivo, somente cosmetico. NAO altera grid/layout.

   NOTA DE REALIDADE: este painel e renderizado ~100% com estilos INLINE por
   faturamento-sus.js (cada div traz style="..."), que vencem CSS externo.
   Por isso os ganchos seguros abaixo usam:
     - CLASSES REAIS presentes no HTML deste painel: .panel-container, .fat-card
     - ancoras estruturais ESTAVEIS do render(): .panel-container tem sempre
       3 filhos na ordem [1]=header  [2]=abas  [3]=corpo
     - o hook de acao [onclick*="openKanban"] (real, nos cards/linhas clicaveis)
   KPIs, funil, barras por prestador, tabelas (contratos/producao/BPA), chips de
   aba e checklist ficam de fora (inline data-driven) — ver risks.
   ============================================================================ */

/* ---- COMMAND HEADER: reforca a faixa (1o filho do .panel-container) --------
   Ja e um banner com gradiente; aqui so aprofundamos p/ a paleta da marca,
   sombra mais forte e um brilho superior interno (comando "console"). --------- */
#view-faturamento-sus .panel-container > div:first-child {
  background: linear-gradient(110deg, #273114 0%, #394820 58%, #4c5d2f 100%) !important;
  box-shadow: 0 20px 44px -18px rgba(39,49,20,.62),
              inset 0 1px 0 rgba(255, 255, 255, .14) !important;
  border-radius: 22px !important;
}

/* ---- ABAS (2o filho): chips com leve elevacao no hover ---------------------- */
#view-faturamento-sus .panel-container > div:nth-child(2) > button {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
#view-faturamento-sus .panel-container > div:nth-child(2) > button:hover {
  transform: translateY(-1px);
}

/* ---- CARDS reais (.fat-card): raio/sombra bold + fita de marca no topo + hover
   Usados na aba "Visao geral" (Funil da competencia / Apresentado por prestador). */
#view-faturamento-sus .fat-card {
  position: relative;
  border: 1px solid #e5ecda !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px -18px rgba(57,70,36,.30) !important;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
#view-faturamento-sus .fat-card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, #394820, #4c5d2f);
}
#view-faturamento-sus .fat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px -20px rgba(57,70,36,.40) !important;
}

/* ---- Cards/linhas CLICAVEIS (pipeline de Demandas + linhas de Glosa) --------
   Gancho real: os elementos com onclick="app.faturamentoSus.openKanban()". ---- */
#view-faturamento-sus div[onclick*="openKanban"] {
  transition: transform .16s ease, box-shadow .16s ease !important;
}
#view-faturamento-sus div[onclick*="openKanban"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(57,70,36,.32) !important;
}

/* ============================ DARK MODE ==================================== */
body.theme-dark #view-faturamento-sus .panel-container > div:first-child {
  box-shadow: 0 22px 46px -18px rgba(0, 0, 0, .60),
              inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}
body.theme-dark #view-faturamento-sus .fat-card {
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .60) !important;
}
body.theme-dark #view-faturamento-sus .fat-card:hover {
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .72) !important;
}
body.theme-dark #view-faturamento-sus div[onclick*="openKanban"]:hover {
  box-shadow: 0 18px 32px -14px rgba(0, 0, 0, .55) !important;
}


/* ===== FATURAMENTO-TRANSPORTE ===== */
/* =====================================================================
   OVERLAY "CONSOLE / BOLD" — Faturamento do Transporte
   Escopo: #view-faturamento (o painel faturamento-transporte reusa este
   container; panels.js chama switchView('view-faturamento') com
   state.transporteOnly). NAO existe #view-faturamento-transporte no DOM.
   Somente aditivo. Classes reais de css/16/02.css (.fatd-* e .fat-*).
   ===================================================================== */

/* ---------- 1) COMMAND HEADER: cabecalho da area vira faixa forte ---------- */
#view-faturamento .fat-area-head{
  background:linear-gradient(110deg,#273114,#394820 60%,#4c5d2f);
  border-radius:16px;
  padding:18px 22px;
  box-shadow:0 12px 28px -12px rgba(39,49,20,.55);
  align-items:center;
}
#view-faturamento .fat-area-head .fat-area-title,
#view-faturamento .fat-area-head-left{ color:#fff; }
#view-faturamento .fat-area-head .fat-area-title{
  font-size:1.32rem; font-weight:800; letter-spacing:.01em;
}
/* icone da area: caixa translucida sobre a faixa */
#view-faturamento .fat-area-head .fat-area-icon{
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  color:#fff;
}
/* chips de contrato que aparecem no lado direito da faixa */
#view-faturamento .fat-area-head .fatd-chip{
  background:rgba(255,255,255,.14); color:#e7ecde;
  border-color:rgba(255,255,255,.28);
}
#view-faturamento .fat-area-head .fatd-chip:hover{ background:rgba(255,255,255,.24); }
#view-faturamento .fat-area-head .fatd-chip.active{
  background:#fff; color:#394820; border-color:#fff;
}
/* Visao geral: titulo reforcado (nao usa faixa por padrao) */
#view-faturamento .fat-visao-title{
  font-size:1.34rem; font-weight:800;
  border-left:5px solid #394820; padding-left:12px;
}

/* ---------- 2) KPIs: faixa colorida 4->5px + numero grande forte ---------- */
#view-faturamento .fatd-kpi{
  border-radius:16px;
  border-left-width:5px;
  box-shadow:0 6px 18px -12px rgba(32,38,23,.35);
  transition:transform .14s ease, box-shadow .14s ease;
}
#view-faturamento .fatd-kpi:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 26px -14px rgba(32,38,23,.42);
}
#view-faturamento .fatd-kpi-label{ letter-spacing:.05em; }
#view-faturamento .fatd-kpi-value{
  font-size:1.7rem; font-weight:800; line-height:1.05;
}
/* mantem a semantica de cor ja existente (k-money/k-audit/k-ok/k-glosa) */
#view-faturamento .fatd-kpi.k-money{ border-left-color:#16a34a; }
#view-faturamento .fatd-kpi.k-audit{ border-left-color:#d97706; }
#view-faturamento .fatd-kpi.k-ok{ border-left-color:#16a34a; }
#view-faturamento .fatd-kpi.k-glosa{ border-left-color:#dc2626; }

/* ---------- 3) PIPELINE de status: passos mais firmes ---------- */
#view-faturamento .fatd-pipeline{ border-radius:16px; }
#view-faturamento .fatd-pipe-step{
  border-radius:12px;
  transition:transform .12s ease;
}
#view-faturamento .fatd-pipe-step:hover{ transform:translateY(-2px); }
#view-faturamento .fatd-pipe-n{ font-size:1.4rem; font-weight:800; }
#view-faturamento .fatd-pipe-label{ letter-spacing:.02em; }

/* ---------- 4) CARDS: radius 16-18, borda sutil, sombra leve, hover ---------- */
#view-faturamento .fatd-filters,
#view-faturamento .fatd-chart-card,
#view-faturamento .fatd-table-card,
#view-faturamento .fat-sidebar,
#view-faturamento .fat-visao-areas-card{
  border-radius:16px;
  box-shadow:0 6px 20px -14px rgba(32,38,23,.30);
}
#view-faturamento .fatd-chart-card,
#view-faturamento .fatd-table-card{
  transition:transform .14s ease, box-shadow .14s ease;
}
#view-faturamento .fatd-chart-card:hover,
#view-faturamento .fatd-table-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -18px rgba(32,38,23,.40);
}
/* cartoes de area/transporte da Visao geral */
#view-faturamento .fat-visao-area,
#view-faturamento .fat-visao-transporte{
  border-radius:14px;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#view-faturamento .fat-visao-area:hover,
#view-faturamento .fat-visao-transporte:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px -16px rgba(32,38,23,.40);
}
/* destaque do bloco Transporte (foco deste painel): acento info a esquerda */
#view-faturamento .fat-visao-transporte{
  border-left:5px solid #2563eb;
}
#view-faturamento .fat-visao-tp-metrics strong{ font-size:1.25rem; font-weight:800; }
#view-faturamento .fat-visao-area-val{ font-weight:800; }

/* espacamento consistente (gap 16-20) nas grades principais */
#view-faturamento .fatd-wrap{ gap:20px; }
#view-faturamento .fatd-kpis{ gap:16px; }
#view-faturamento .fatd-charts{ gap:16px; }

/* ---------- 5) CHIPS / STATUS: pilulas com bg tonal, mais bold ---------- */
#view-faturamento .fatd-badge,
#view-faturamento .fatd-status-sel,
#view-faturamento .fatd-tipo{ font-weight:800; letter-spacing:.01em; }
#view-faturamento .fatd-chip{ font-weight:800; }
#view-faturamento .fatd-chip.active{ background:#394820; border-color:#394820; }
#view-faturamento .fatd-ex b{ font-weight:800; }

/* ---------- 6) TABELA: cabecalho com leve tinta da marca ---------- */
#view-faturamento .fatd-table th{
  background:rgba(57,72,32,.06);
  color:#273114;
  font-weight:800;
}
#view-faturamento .fatd-table-head strong{ font-weight:800; }
/* topo do card de tabela ja usa --area-color; reforca a espessura */
#view-faturamento .fatd-wrap .fatd-table-card{ border-top-width:3px; }

/* ---------- 7) SIDEBAR de areas: estado ativo mais firme ---------- */
#view-faturamento .fat-side-item.active{
  box-shadow:inset 3px 0 0 #394820;
  font-weight:800;
}
#view-faturamento .fat-side-title{ letter-spacing:.1em; }

/* =====================================================================
   DARK — variantes para cada cor/fundo (body.theme-dark)
   ===================================================================== */

/* header: mantem faixa forte, apenas sombra mais funda */
body.theme-dark #view-faturamento .fat-area-head{
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
}
body.theme-dark #view-faturamento .fat-visao-title{ border-left-color:#4c5d2f; }

/* KPIs no escuro: mesma semantica de cor + sombra escura */
body.theme-dark #view-faturamento .fatd-kpi{
  box-shadow:0 8px 20px -12px rgba(0,0,0,.55);
}
body.theme-dark #view-faturamento .fatd-kpi:hover{
  box-shadow:0 16px 28px -14px rgba(0,0,0,.6);
}

/* cards no escuro: sombra escura (bg/borda ja tratados pelo CSS base) */
body.theme-dark #view-faturamento .fatd-filters,
body.theme-dark #view-faturamento .fatd-chart-card,
body.theme-dark #view-faturamento .fatd-table-card,
body.theme-dark #view-faturamento .fat-sidebar,
body.theme-dark #view-faturamento .fat-visao-areas-card{
  box-shadow:0 8px 22px -14px rgba(0,0,0,.55);
}
body.theme-dark #view-faturamento .fatd-chart-card:hover,
body.theme-dark #view-faturamento .fatd-table-card:hover,
body.theme-dark #view-faturamento .fat-visao-area:hover,
body.theme-dark #view-faturamento .fat-visao-transporte:hover{
  box-shadow:0 18px 32px -18px rgba(0,0,0,.6);
}

/* bloco Transporte: acento info visivel no escuro */
body.theme-dark #view-faturamento .fat-visao-transporte{ border-left-color:#3b82f6; }

/* tabela: tinta da marca adaptada ao escuro */
body.theme-dark #view-faturamento .fatd-table th{
  background:rgba(81,95,56,.18);
  color:#d7decb;
}

/* sidebar ativo no escuro */
body.theme-dark #view-faturamento .fat-side-item.active{
  box-shadow:inset 3px 0 0 #798c58;
}

/* chips na faixa (escuro) mantem contraste */
body.theme-dark #view-faturamento .fat-area-head .fatd-chip{
  background:rgba(255,255,255,.12); color:#e1e7d7; border-color:rgba(255,255,255,.24);
}
body.theme-dark #view-faturamento .fat-area-head .fatd-chip.active{
  background:#fff; color:#394820;
}


/* ===== SIGTAP ===== */
/* ============================================================
   OVERLAY BOLD — Painel SIGTAP  (escopo: #view-sigtap)
   Linguagem "console" hospitalar. Aditivo, somente visual.
   Classes reais: .intranet-header*, .sigtap-query-card/-form,
   #sigtap-codigo, .sigtap-result*, .sigtap-meta-grid,
   .sigtap-badge.is-ok/.is-no, .sigtap-table*, .card, .btn*.
   ============================================================ */

/* Tokens locais (nao vazam — presos ao escopo do painel) */
#view-sigtap{
  --sg-brand:#394820; --sg-deep:#273114; --sg-brand2:#4c5d2f;
  --sg-ok:#16a34a; --sg-info:#2563eb; --sg-warn:#d97706;
  --sg-err:#dc2626; --sg-violet:#536f23; --sg-neutral:#64748b;
  --sg-line:#e7eae3; --sg-ink:#1c2014;
}

/* Respiro geral entre blocos do painel */
#view-sigtap .sigtap-shell{ display:flex; flex-direction:column; gap:20px; }

/* ---------- COMMAND HEADER: faixa forte em gradiente ---------- */
#view-sigtap .intranet-header{
  background:linear-gradient(110deg,#273114,#394820 60%,#4c5d2f);
  color:#fff;
  border:none;
  border-radius:18px;
  padding:22px 26px;
  box-shadow:0 14px 34px -12px rgba(39,49,20,.55);
  position:relative;
  overflow:hidden;
}
/* brilho diagonal sutil no canto do banner */
#view-sigtap .intranet-header::after{
  content:""; position:absolute; top:-40%; right:-6%;
  width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);
  pointer-events:none;
}
#view-sigtap .intranet-header-title{
  color:#fff; font-weight:800; letter-spacing:.4px; font-size:1.5rem;
}
#view-sigtap .intranet-header-sub{ color:rgba(255,255,255,.82); }
/* logo em chip de vidro */
#view-sigtap .intranet-header-logo{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  color:#fff; border-radius:14px;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
/* botoes do header legiveis sobre o gradiente */
#view-sigtap .intranet-header-actions .btn{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  color:#fff; font-weight:600; border-radius:10px;
}
#view-sigtap .intranet-header-actions .btn:hover{ background:rgba(255,255,255,.24); }
#view-sigtap .intranet-header-actions .btn-danger{
  background:rgba(220,38,38,.9); border-color:rgba(255,255,255,.35);
}
#view-sigtap .intranet-header-actions .btn-danger:hover{ background:#dc2626; }

/* ---------- CARD de consulta (barra de comando) ---------- */
#view-sigtap .sigtap-query-card{
  border-radius:16px;
  border:1px solid var(--sg-line);
  box-shadow:0 8px 22px -14px rgba(39,49,20,.28);
  padding:20px 22px;
  border-left:4px solid var(--sg-brand);
}
#view-sigtap .sigtap-query-form{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px;
}
#view-sigtap .sigtap-query-form label{
  width:100%; margin-bottom:-6px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sg-neutral);
}
#view-sigtap #sigtap-codigo{
  flex:1 1 240px;
  border:1.5px solid var(--sg-line);
  border-radius:12px;
  padding:12px 15px;
  font-size:1.05rem; font-weight:700; letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:var(--sg-ink);
  transition:border-color .15s, box-shadow .15s;
}
#view-sigtap #sigtap-codigo:focus{
  outline:none; border-color:var(--sg-brand);
  box-shadow:0 0 0 4px rgba(57,72,32,.14);
}

/* Botoes de acao — cheios e fortes */
#view-sigtap .sigtap-query-form .btn-primary{
  background:linear-gradient(120deg,#394820,#4c5d2f);
  border:none; color:#fff; font-weight:700;
  border-radius:12px; padding:12px 22px;
  box-shadow:0 8px 18px -8px rgba(57,72,32,.6);
  transition:transform .12s, box-shadow .12s;
}
#view-sigtap .sigtap-query-form .btn-primary:hover{
  transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(57,72,32,.7);
}
#view-sigtap .btn-accent{
  background:rgba(83,111,35,.1);
  border:1.5px solid rgba(83,111,35,.35);
  color:var(--sg-violet); font-weight:700; border-radius:12px;
  transition:background .12s, transform .12s;
}
#view-sigtap .btn-accent:hover{ background:rgba(83,111,35,.18); transform:translateY(-2px); }

/* ---------- CARDS de resultado / vazio ---------- */
#view-sigtap .sigtap-empty,
#view-sigtap .sigtap-result-card{
  border-radius:18px;
  border:1px solid var(--sg-line);
  box-shadow:0 10px 26px -16px rgba(39,49,20,.3);
  padding:22px 24px;
}
#view-sigtap .sigtap-empty h3,
#view-sigtap .sigtap-result-card h3{
  color:var(--sg-deep); font-weight:800; margin:0;
}

/* Cabecalho do resultado com filete de marca */
#view-sigtap .sigtap-result-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:18px;
  border-bottom:2px solid var(--sg-line);
}
#view-sigtap .sigtap-result-head .small{
  font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sg-brand);
}

/* ---------- KPIs: cartoes de indicador (meta-grid) ---------- */
#view-sigtap .sigtap-meta-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px; margin-bottom:20px;
}
#view-sigtap .sigtap-meta-grid > div{
  position:relative; overflow:hidden;
  background:#f8f9f7;
  border:1px solid var(--sg-line);
  border-radius:14px;
  padding:16px 18px 16px 22px;
  display:flex; flex-direction:column; gap:6px;
}
/* faixa colorida 4px a esquerda (varia por posicao) */
#view-sigtap .sigtap-meta-grid > div::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--sg-brand);
}
#view-sigtap .sigtap-meta-grid > div:nth-child(1)::before{ background:var(--sg-info); }
#view-sigtap .sigtap-meta-grid > div:nth-child(2)::before{ background:var(--sg-warn); }
#view-sigtap .sigtap-meta-grid > div:nth-child(3)::before{ background:var(--sg-ok); }
#view-sigtap .sigtap-meta-grid > div span{
  font-size:.7rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sg-neutral);
}
#view-sigtap .sigtap-meta-grid > div strong{
  font-size:1.5rem; font-weight:800; line-height:1.1;
  color:var(--sg-ink); font-variant-numeric:tabular-nums;
}

/* Descricao do procedimento */
#view-sigtap .sigtap-description{
  background:#f8f9f7; border-left:3px solid var(--sg-brand);
  border-radius:0 10px 10px 0; padding:12px 16px;
  color:#2e3227; margin:0 0 20px; line-height:1.5;
}

/* ---------- Tabela de vinculos CBO ---------- */
#view-sigtap .sigtap-table-wrap{
  border:1px solid var(--sg-line); border-radius:14px; overflow:hidden;
}
#view-sigtap .sigtap-table{
  width:100%; border-collapse:collapse; font-size:.92rem;
}
#view-sigtap .sigtap-table thead th{
  background:linear-gradient(110deg,#273114,#394820);
  color:#fff; text-align:left; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; font-size:.72rem;
  padding:12px 16px;
}
#view-sigtap .sigtap-table tbody td{
  padding:12px 16px; border-top:1px solid var(--sg-line);
  color:var(--sg-ink); vertical-align:middle;
}
#view-sigtap .sigtap-table tbody tr:nth-child(even) td{ background:#f8f9f7; }
#view-sigtap .sigtap-table tbody tr:hover td{ background:rgba(57,72,32,.06); }

/* ---------- CHIPS / status (badge permitido/nao) ---------- */
#view-sigtap .sigtap-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  font-size:.74rem; font-weight:700; letter-spacing:.02em;
  border:1px solid transparent;
}
#view-sigtap .sigtap-badge::before{
  content:""; width:7px; height:7px; border-radius:50%; background:currentColor;
}
#view-sigtap .sigtap-badge.is-ok{
  background:rgba(22,163,74,.12); color:var(--sg-ok); border-color:rgba(22,163,74,.25);
}
#view-sigtap .sigtap-badge.is-no{
  background:rgba(220,38,38,.1); color:var(--sg-err); border-color:rgba(220,38,38,.24);
}

/* =====================================================================
   DARK MODE — body.theme-dark #view-sigtap
   ===================================================================== */
body.theme-dark #view-sigtap{
  --sg-line:#252920; --sg-ink:#e7eae1; --sg-neutral:#9aa4b2;
}
/* Header mantem gradiente forte, sombra mais profunda */
body.theme-dark #view-sigtap .intranet-header{
  box-shadow:0 16px 38px -14px rgba(0,0,0,.6);
}
/* Cards escuros */
body.theme-dark #view-sigtap .sigtap-query-card,
body.theme-dark #view-sigtap .sigtap-empty,
body.theme-dark #view-sigtap .sigtap-result-card{
  background:#171913; border-color:#252920;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.6);
}
body.theme-dark #view-sigtap .sigtap-empty h3,
body.theme-dark #view-sigtap .sigtap-result-card h3{ color:#cad8b0; }
body.theme-dark #view-sigtap .sigtap-result-head{ border-bottom-color:#252920; }
body.theme-dark #view-sigtap .sigtap-result-head .small{ color:#92ac67; }

/* Input escuro */
body.theme-dark #view-sigtap #sigtap-codigo{
  background:#10120c; border-color:#2b3025; color:#e7eae1;
}
body.theme-dark #view-sigtap #sigtap-codigo:focus{
  border-color:#4c5d2f; box-shadow:0 0 0 4px rgba(76,93,47,.28);
}

/* KPIs escuros — faixas coloridas preservadas */
body.theme-dark #view-sigtap .sigtap-meta-grid > div{
  background:#1c2017; border-color:#252920;
}
body.theme-dark #view-sigtap .sigtap-meta-grid > div strong{ color:#eef1e7; }

/* Descricao escura */
body.theme-dark #view-sigtap .sigtap-description{
  background:#1c2017; color:#ccd2c2; border-left-color:#4c5d2f;
}

/* Tabela escura */
body.theme-dark #view-sigtap .sigtap-table-wrap{ border-color:#252920; }
body.theme-dark #view-sigtap .sigtap-table tbody td{
  border-top-color:#252920; color:#dce1d3;
}
body.theme-dark #view-sigtap .sigtap-table tbody tr:nth-child(even) td{ background:#1a1c15; }
body.theme-dark #view-sigtap .sigtap-table tbody tr:hover td{ background:rgba(76,93,47,.18); }

/* Chips escuros — tons tonais mais vivos */
body.theme-dark #view-sigtap .sigtap-badge.is-ok{
  background:rgba(22,163,74,.2); color:#4ade80; border-color:rgba(22,163,74,.35);
}
body.theme-dark #view-sigtap .sigtap-badge.is-no{
  background:rgba(220,38,38,.18); color:#f87171; border-color:rgba(220,38,38,.35);
}
body.theme-dark #view-sigtap .btn-accent{
  background:rgba(83,111,35,.18); color:#c4b5fd; border-color:rgba(83,111,35,.4);
}


/* ===== ISSUED ===== */
/* =========================================================================
   OVERLAY BOLD — Painel "Senhas Emitidas"  (escopo: #view-issued)
   Aditivo, somente CSS. Linguagem "console" das telas hospitalares.
   Paleta: marca #394820 | profundo #273114 | livre #16a34a | info #2563eb
           alerta #d97706 | erro #dc2626 | roxo #536f23 | neutro #64748b
   ========================================================================= */

/* ---- Fundo do painel: base mais forte + halos de marca -------------------- */
#view-issued.issued-view {
  background:
    radial-gradient(circle at 2% 0%, rgba(57,72,32,0.18) 0%, transparent 46%),
    radial-gradient(circle at 100% 100%, rgba(83,111,35,0.14) 0%, transparent 44%),
    #eef0ea;
}

/* ---- Casco: sombra e borda mais presentes -------------------------------- */
#view-issued .issued-shell {
  border-radius: 20px;
  border: 1px solid rgba(57,72,32,0.24);
  box-shadow: 0 22px 52px rgba(39,49,20,0.22);
}

/* ---- COMMAND HEADER: topbar vira faixa forte ----------------------------- */
/* Reforça o banner: gradiente 110deg, texto branco, sombra de profundidade. */
#view-issued .issued-topbar {
  background: linear-gradient(110deg, #273114 0%, #394820 60%, #4c5d2f 100%);
  border-bottom: none;
  box-shadow: 0 10px 26px rgba(39,49,20,0.34);
  padding: 16px 20px;
}

/* Chip de relógio: pílula translúcida mais legível sobre a faixa */
#view-issued .issued-clock-chip {
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
  padding: 9px 14px;
}
#view-issued .issued-clock-chip strong {
  font-size: 1.24rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.22);
}

/* Botões de ação no header — sólidos, alto contraste sobre a faixa */
#view-issued .issued-btn-admin,
#view-issued .issued-btn-intranet {
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* ---- HERO: título com selo de barra de marca ----------------------------- */
#view-issued .issued-hero {
  position: relative;
  padding-top: 22px;
}
#view-issued .issued-hero h1 {
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, #273114, #394820 55%, #536f23);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Traço curto sob o título (aparência de "seção de comando") */
#view-issued .issued-hero p {
  display: inline-block;
  padding-top: 10px;
  border-top: 3px solid rgba(57,72,32,0.28);
}

/* ---- GRID: respiro maior entre cards ------------------------------------- */
#view-issued .issued-grid {
  gap: 18px;
}

/* ---- CARDS de senha = cards de indicador --------------------------------- */
/* Faixa colorida 4px à esquerda (via ::before) conforme o estado.           */
#view-issued .issued-ticket-card {
  position: relative;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(39,49,20,0.10);
  padding: 14px 14px 14px 18px;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
#view-issued .issued-ticket-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
  background: #64748b; /* neutro por padrão */
}
#view-issued .issued-ticket-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(39,49,20,0.16);
}
/* Aguardando → livre (verde) */
#view-issued .issued-ticket-card.is-waiting::before { background: #16a34a; }
/* Em atendimento → alerta (âmbar) */
#view-issued .issued-ticket-card.is-served::before  { background: #d97706; }

/* ---- Chips de status: pílulas tonais mais firmes ------------------------- */
#view-issued .issued-ticket-status {
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 3px 11px;
}
#view-issued .issued-ticket-card.is-waiting .issued-ticket-status {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
}
#view-issued .issued-ticket-card.is-served .issued-ticket-status {
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

/* ---- Número da senha: grande e forte (o "KPI" do card) ------------------- */
#view-issued .issued-ticket-code {
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, #273114, #394820 60%, #536f23);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ordem (#01) vira selo de marca */
#view-issued .issued-ticket-order {
  color: #394820;
  background: rgba(57,72,32,0.10);
  border: 1px solid rgba(57,72,32,0.18);
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 800;
}

/* ---- Chips de meta (depto / prioridade) ---------------------------------- */
#view-issued .issued-ticket-dept {
  color: #1d4ed8;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  font-weight: 700;
}
#view-issued .issued-ticket-priority {
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  font-weight: 800;
}

/* Nota / observação — realce âmbar coeso */
#view-issued .issued-ticket-note {
  background: #fffbeb;
  border: 1px solid #fcd9a3;
  color: #92400e;
  border-radius: 12px;
}

/* ---- Estados vazio / erro ------------------------------------------------ */
#view-issued .issued-empty-icon {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
  box-shadow: 0 6px 16px rgba(22,163,74,0.20);
}
#view-issued .issued-empty-state.is-error .issued-empty-icon {
  color: #dc2626;
  background: #fee2e2;
  border-color: #fca5a5;
}
#view-issued .issued-empty-title {
  color: #273114;
}

/* =========================================================================
   DARK  (body.theme-dark #view-issued …)
   ========================================================================= */

/* Fundo do painel escuro */
body.theme-dark #view-issued.issued-view {
  background:
    radial-gradient(circle at 2% 0%, rgba(76,93,47,0.24) 0%, transparent 46%),
    radial-gradient(circle at 100% 100%, rgba(83,111,35,0.20) 0%, transparent 44%),
    #12140f;
}

/* Casco escuro */
body.theme-dark #view-issued .issued-shell {
  background: linear-gradient(165deg, #1b1e17 0%, #151712 100%);
  border-color: rgba(76,93,47,0.34);
  box-shadow: 0 22px 52px rgba(0,0,0,0.55);
}

/* Command header — mesma faixa, sombra mais profunda */
body.theme-dark #view-issued .issued-topbar {
  background: linear-gradient(110deg, #1d250f 0%, #394820 60%, #4c5d2f 100%);
  box-shadow: 0 12px 30px rgba(0,0,0,0.55);
}

/* Título dark: gradiente claro para não sumir */
body.theme-dark #view-issued .issued-hero h1 {
  background: linear-gradient(100deg, #c7d7ac, #aac281 55%, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-dark #view-issued .issued-hero p {
  color: #a8b09a;
  border-top-color: rgba(170,194,129,0.30);
}

/* Cards escuros */
body.theme-dark #view-issued .issued-ticket-card {
  background: #1d2018;
  border-color: rgba(170,194,129,0.14);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
body.theme-dark #view-issued .issued-ticket-card:hover {
  box-shadow: 0 16px 34px rgba(0,0,0,0.6);
}
/* Faixas de estado (verde/âmbar) mantêm boa leitura no escuro */
body.theme-dark #view-issued .issued-ticket-card::before        { background: #64748b; }
body.theme-dark #view-issued .issued-ticket-card.is-waiting::before { background: #22c55e; }
body.theme-dark #view-issued .issued-ticket-card.is-served::before  { background: #f59e0b; }

/* Número da senha em tom claro no escuro */
body.theme-dark #view-issued .issued-ticket-code {
  background: linear-gradient(120deg, #c7d7ac, #aac281 60%, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-dark #view-issued .issued-ticket-patient { color: #e6eadf; }
body.theme-dark #view-issued .issued-ticket-time    { color: #949c87; }

/* Chips de status dark (tonal escuro) */
body.theme-dark #view-issued .issued-ticket-card.is-waiting .issued-ticket-status {
  color: #86efac; background: rgba(22,163,74,0.18); border-color: rgba(34,197,94,0.42);
}
body.theme-dark #view-issued .issued-ticket-card.is-served .issued-ticket-status {
  color: #fcd34d; background: rgba(217,119,6,0.18); border-color: rgba(245,158,11,0.42);
}

/* Selo de ordem dark */
body.theme-dark #view-issued .issued-ticket-order {
  color: #c7d7ac; background: rgba(76,93,47,0.24); border-color: rgba(170,194,129,0.30);
}

/* Chips de meta dark */
body.theme-dark #view-issued .issued-ticket-dept {
  color: #93c5fd; background: rgba(37,99,235,0.18); border-color: rgba(96,165,250,0.42);
}
body.theme-dark #view-issued .issued-ticket-priority {
  color: #fcd34d; background: rgba(217,119,6,0.18); border-color: rgba(245,158,11,0.42);
}
body.theme-dark #view-issued .issued-ticket-note {
  background: rgba(217,119,6,0.14); border-color: rgba(245,158,11,0.34); color: #fcd9a3;
}

/* Estados vazio/erro dark */
body.theme-dark #view-issued .issued-empty-state {
  background: rgba(29,32,24,0.7); border-color: rgba(170,194,129,0.28);
}
body.theme-dark #view-issued .issued-empty-state.is-error {
  background: rgba(220,38,38,0.12); border-color: rgba(248,113,113,0.4);
}
body.theme-dark #view-issued .issued-empty-icon {
  color: #86efac; background: rgba(22,163,74,0.18); border-color: rgba(34,197,94,0.42);
}
body.theme-dark #view-issued .issued-empty-state.is-error .issued-empty-icon {
  color: #fca5a5; background: rgba(220,38,38,0.18); border-color: rgba(248,113,113,0.42);
}
body.theme-dark #view-issued .issued-empty-title { color: #c7d7ac; }
body.theme-dark #view-issued .issued-empty-sub   { color: #949c87; }


/* ===== TV ===== */
/* ============================================================
   OVERLAY BOLD "CONSOLE" — TV (mural de senhas)  #view-tv
   Aditivo e 100% escopado. Nao altera grid/estrutura.
   Classes reais: tv-shell, tv-topbar, tv-clock-chip, ticket-big,
   tv-patient-name, tv-desk-name, tv-type-badge, tv-main-kicker,
   tv-side-panel, tv-side-head, tv-history-item, tv-hist-type.
   ============================================================ */

/* ---- SHELL: moldura mais encorpada, sombra profunda ---- */
#view-tv .tv-shell {
  border: 1px solid rgba(39,49,20,0.28);
  box-shadow: 0 24px 60px rgba(39,49,20,0.26), 0 2px 0 rgba(255,255,255,0.6) inset;
}

/* ---- COMMAND HEADER: faixa forte de comando ----
   Reforca a topbar (que ja e banner) com o gradiente da marca,
   borda inferior dourada e sombra de profundidade. */
#view-tv .tv-topbar {
  background: linear-gradient(110deg, #273114 0%, #394820 60%, #4c5d2f 100%);
  border-bottom: 3px solid rgba(230,184,0,0.55);
  box-shadow: 0 10px 26px rgba(39,49,20,0.30);
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Relogio: chip de comando com numero grande tabular e brilho */
#view-tv .tv-clock-chip {
  border: 1px solid rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.14);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18) inset, 0 2px 8px rgba(0,0,0,0.16);
}
#view-tv .tv-clock-chip strong {
  font-size: 1.35rem;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,0.28);
}

/* Botao Sair: erro solido e forte no header */
#view-tv .tv-btn-logout {
  background: #dc2626;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(220,38,38,0.42);
}
#view-tv .tv-btn-logout:hover { background: #b91c1c; }

/* ---- KICKER: rotulo "Senha Chamada" como etiqueta de comando ---- */
#view-tv .tv-main-kicker {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(110deg, #273114, #394820 60%, #4c5d2f);
  box-shadow: 0 8px 20px rgba(39,49,20,0.28);
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
  margin-bottom: 16px;
}

/* ---- NUMERO GIGANTE: alto contraste, peso maximo ---- */
#view-tv .ticket-big {
  font-weight: 900;
  color: #273114;
  letter-spacing: 0.01em;
  text-shadow: 0 12px 30px rgba(39,49,20,0.24), 0 2px 0 rgba(255,255,255,0.55);
}
/* Nome de paciente (chamada clinica): tom neutro escuro para leitura */
#view-tv .ticket-big.is-name { color: #1c2113; }

/* Nome do paciente sob a senha */
#view-tv .tv-patient-name {
  font-weight: 800;
  color: #2a2f20;
}

/* Guiche/local: destaque forte em vermelho com pilula de fundo */
#view-tv .tv-desk-name {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 22px;
  border-radius: 16px;
  color: #dc2626;
  background: rgba(220,38,38,0.10);
  border: 2px solid rgba(220,38,38,0.28);
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(220,38,38,0.14);
}

/* ---- BADGE DE TIPO (palco): pilula tonal grande e forte ---- */
#view-tv .tv-type-badge {
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 999px;
  margin-bottom: 14px;
  border: 2px solid transparent;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}
/* Agendamento -> info (azul) */
#view-tv .tv-type-badge.is-appt {
  color: #1d4ed8; background: rgba(37,99,235,0.14); border-color: rgba(37,99,235,0.34);
}
/* Preferencial -> alerta (ambar) */
#view-tv .tv-type-badge.is-pref {
  color: #b45309; background: rgba(217,119,6,0.16); border-color: rgba(217,119,6,0.36);
}
/* Normal -> marca (roxo) */
#view-tv .tv-type-badge.is-normal {
  color: #394820; background: rgba(57,72,32,0.12); border-color: rgba(57,72,32,0.30);
}

/* ---- PAINEL LATERAL: cabecalho de secao com barra da marca ---- */
#view-tv .tv-side-head h3 {
  position: relative;
  padding-left: 14px;
  font-weight: 900;
  color: #273114;
  letter-spacing: 0.01em;
}
#view-tv .tv-side-head h3::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 1.05em; border-radius: 999px;
  background: linear-gradient(180deg, #394820, #4c5d2f);
}

/* Botao de audio: acento livre (verde) quando ligado */
#view-tv .tv-audio-btn {
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
#view-tv .tv-audio-btn.btn-success {
  background: #16a34a; color: #fff; border-color: rgba(255,255,255,0.30);
  box-shadow: 0 6px 16px rgba(22,163,74,0.36);
}

/* ---- CARDS DE HISTORICO: faixa 6px a esquerda + hover ---- */
#view-tv .tv-history-item {
  border: 1px solid rgba(57,72,32,0.14);
  border-left: 6px solid #394820;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 8px 18px rgba(39,49,20,0.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#view-tv .tv-history-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(39,49,20,0.16);
  border-left-color: #4c5d2f;
}
#view-tv .tv-history-item .code {
  font-weight: 900;
  color: #273114;
}
#view-tv .tv-history-item.tv-history-empty {
  border-left-color: rgba(57,72,32,0.30);
}

/* Chip de tipo dentro do historico: pilula tonal compacta */
#view-tv .tv-hist-type {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #394820;
  background: rgba(57,72,32,0.10);
  border: 1px solid rgba(57,72,32,0.24);
}
#view-tv .tv-hist-type.is-appt {
  color: #1d4ed8; background: rgba(37,99,235,0.12); border-color: rgba(37,99,235,0.30);
}
#view-tv .tv-hist-type.is-pref {
  color: #b45309; background: rgba(217,119,6,0.14); border-color: rgba(217,119,6,0.32);
}
#view-tv .tv-hist-type.is-normal {
  color: #394820; background: rgba(57,72,32,0.10); border-color: rgba(57,72,32,0.24);
}

/* Realce da senha nova (blink) mais visivel */
#view-tv .ticket-big.blink { color: #394820; }

/* ============================================================
   DARK — body.theme-dark #view-tv
   ============================================================ */

/* Fundo do palco e shell escuros, mantendo o header em gradiente */
body.theme-dark #view-tv.tv-view {
  background:
    radial-gradient(circle at 2% 0%, rgba(76,93,47,0.20) 0%, transparent 46%),
    radial-gradient(circle at 100% 100%, rgba(230,184,0,0.10) 0%, transparent 44%),
    #11130e;
}
body.theme-dark #view-tv .tv-shell {
  background: linear-gradient(160deg, #1a1e13 0%, #14170f 100%);
  border-color: rgba(76,93,47,0.35);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}

/* Header: mesmo gradiente forte, borda dourada mantem contraste */
body.theme-dark #view-tv .tv-topbar {
  background: linear-gradient(110deg, #1d250f 0%, #394820 60%, #4c5d2f 100%);
  border-bottom-color: rgba(230,184,0,0.60);
}

/* Kicker (etiqueta) permanece legivel no escuro */
body.theme-dark #view-tv .tv-main-kicker {
  background: linear-gradient(110deg, #394820, #4c5d2f);
}

/* Numero gigante em branco para contraste maximo no mural escuro */
body.theme-dark #view-tv .ticket-big {
  color: #ecf0e6;
  text-shadow: 0 12px 32px rgba(0,0,0,0.60), 0 0 24px rgba(76,93,47,0.30);
}
body.theme-dark #view-tv .ticket-big.is-name { color: #e7ecdf; }
body.theme-dark #view-tv .ticket-big.blink { color: #b9d191; }

body.theme-dark #view-tv .tv-patient-name { color: #cbd3bd; }

/* Guiche: vermelho claro sobre fundo escuro */
body.theme-dark #view-tv .tv-desk-name {
  color: #fca5a5;
  background: rgba(220,38,38,0.16);
  border-color: rgba(220,38,38,0.42);
}

/* Badge de tipo no palco (dark) */
body.theme-dark #view-tv .tv-type-badge.is-appt {
  color: #93c5fd; background: rgba(37,99,235,0.22); border-color: rgba(37,99,235,0.46);
}
body.theme-dark #view-tv .tv-type-badge.is-pref {
  color: #fcd34d; background: rgba(217,119,6,0.24); border-color: rgba(217,119,6,0.48);
}
body.theme-dark #view-tv .tv-type-badge.is-normal {
  color: #a9c678; background: rgba(76,93,47,0.24); border-color: rgba(76,93,47,0.46);
}

/* Painel lateral escuro */
body.theme-dark #view-tv .tv-side-panel {
  background: linear-gradient(180deg, #181c11 0%, #13160e 100%);
  border-left-color: rgba(76,93,47,0.30);
}
body.theme-dark #view-tv .tv-side-head h3 { color: #d6dfc4; }

/* Cards de historico escuros */
body.theme-dark #view-tv .tv-history-item {
  background: #1e2317;
  color: #dce2d1;
  border-color: rgba(76,93,47,0.28);
  border-left-color: #4c5d2f;
  box-shadow: 0 8px 18px rgba(0,0,0,0.40);
}
body.theme-dark #view-tv .tv-history-item:hover {
  box-shadow: 0 14px 26px rgba(0,0,0,0.55);
  border-left-color: #687a48;
}
body.theme-dark #view-tv .tv-history-item .code { color: #c8d8ac; }
body.theme-dark #view-tv .tv-history-item .meta { color: #a7b097; }
body.theme-dark #view-tv .tv-history-item.tv-history-empty {
  background: rgba(255,255,255,0.04);
  color: #a7b097;
  border-left-color: rgba(76,93,47,0.40);
}

/* Chip de tipo no historico (dark) */
body.theme-dark #view-tv .tv-hist-type {
  color: #a9c678; background: rgba(76,93,47,0.20); border-color: rgba(76,93,47,0.42);
}
body.theme-dark #view-tv .tv-hist-type.is-appt {
  color: #93c5fd; background: rgba(37,99,235,0.20); border-color: rgba(37,99,235,0.44);
}
body.theme-dark #view-tv .tv-hist-type.is-pref {
  color: #fcd34d; background: rgba(217,119,6,0.22); border-color: rgba(217,119,6,0.46);
}
body.theme-dark #view-tv .tv-hist-type.is-normal {
  color: #a9c678; background: rgba(76,93,47,0.20); border-color: rgba(76,93,47,0.42);
}

/* Botao de audio verde tambem no escuro */
body.theme-dark #view-tv .tv-audio-btn.btn-success {
  background: #16a34a; color: #fff;
}


/* ===== CAPACITACAO ===== */
/* ══════════════════════════════════════════════════════════════
   OVERLAY "CONSOLE" BOLD — Painel Treinamentos (#view-capacitacao)
   Aditivo, escopado. Classes reais: intranet-header(+brand/logo/title/sub/
   actions), #cap-category-tabs, .cap-cat-tab(.active), #cap-materials-grid,
   .cap-card(+thumb/body/title/desc/footer), .cap-badge, .modal/.modal-header.
   ══════════════════════════════════════════════════════════════ */

/* ── COMMAND HEADER ─────────────────────────────────────────────
   O .intranet-header já é banner (gradiente primary-dark→primary).
   Reforço para faixa "console" forte, radius e sombra profunda. */
#view-capacitacao .intranet-header {
  background: linear-gradient(110deg, #273114 0%, #394820 60%, #4c5d2f 100%);
  border-radius: 18px;
  box-shadow: 0 16px 40px -14px rgba(39,49,20,0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 22px 28px;
  position: relative;
  overflow: hidden;
}
/* selo diagonal sutil no canto do header (decorativo, sem afetar layout) */
#view-capacitacao .intranet-header::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -6%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 70%);
  pointer-events: none;
}
#view-capacitacao .intranet-header-logo {
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
#view-capacitacao .intranet-header-title {
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
#view-capacitacao .intranet-header-sub {
  color: rgba(255, 255, 255, 0.90);
}

/* ── CHIPS / FILTROS DE CATEGORIA (.cap-cat-tab) ────────────────
   Pílulas mais encorpadas; estado ativo com tom de marca e sombra. */
#view-capacitacao .cap-cat-tab {
  padding: 7px 18px;
  font-weight: 700;
  border-width: 1.5px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
#view-capacitacao .cap-cat-tab:hover {
  transform: translateY(-1px);
}
#view-capacitacao .cap-cat-tab.active {
  background: linear-gradient(135deg, #394820, #273114);
  border-color: #273114;
  box-shadow: 0 6px 16px -6px rgba(57,72,32,0.55);
}

/* ── GRID + CARDS DE CURSO (.cap-card) ──────────────────────────
   Radius maior, borda sutil, sombra em camadas; faixa colorida 4px
   à esquerda (::before) = assinatura "console". Layout intacto. */
#view-capacitacao #cap-materials-grid { gap: 18px; }
#view-capacitacao .cap-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(57,72,32,0.12);
  box-shadow: 0 6px 18px -10px rgba(30, 41, 59, 0.22);
  transition: box-shadow .2s, transform .2s;
}
#view-capacitacao .cap-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #536f23, #394820);
  border-radius: 18px 0 0 18px;
  z-index: 2;
}
#view-capacitacao .cap-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -16px rgba(39,49,20,0.38);
}
/* thumb: mantém o bg definido pelo tipo (inline via JS) e só adiciona
   profundidade — degradê inferior p/ contraste + ícone maior. */
#view-capacitacao .cap-card-thumb {
  position: relative;
  font-size: 2.8rem;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}
#view-capacitacao .cap-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 32%, rgba(0,0,0,0.22) 100%);
  pointer-events: none;
}
#view-capacitacao .cap-card-title {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
#view-capacitacao .cap-card-footer {
  border-top: 1px solid rgba(57,72,32,0.10);
  background: rgba(57,72,32,0.025);
}

/* ── STATUS / BADGE (.cap-badge) ────────────────────────────────
   Pílula tonal de marca, mais legível. */
#view-capacitacao .cap-badge {
  padding: 3px 11px;
  background: rgba(83,111,35,0.12);
  color: #394820;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── BOTÕES DO HEADER (harmonia com a faixa) ────────────────────
   .btn-primary de ação vira sólido de marca sobre o banner. */
#view-capacitacao .intranet-header .btn-primary {
  background: #ffffff;
  color: #273114;
  border-color: #ffffff;
  font-weight: 800;
}
#view-capacitacao .intranet-header .btn-primary:hover {
  background: rgba(255, 255, 255, 0.88);
  color: #273114;
}

/* ── MODAIS (.modal / .modal-header) ────────────────────────────
   Cabeçalho do modal ganha faixa de marca; corpo com radius. */
#view-capacitacao .modal {
  border-radius: 18px;
  box-shadow: 0 30px 70px -20px rgba(15, 23, 42, 0.45);
  overflow: hidden;
}
#view-capacitacao .modal-header {
  background: linear-gradient(110deg, #273114, #394820);
  color: #fff;
  padding: 16px 20px;
}
#view-capacitacao .modal-header h3 { color: #fff; }
#view-capacitacao .modal-header .btn {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.30);
}

/* ══════════════════════════════════════════════════════════════
   DARK — body.theme-dark #view-capacitacao
   ══════════════════════════════════════════════════════════════ */

/* header: gradiente mais profundo p/ não estourar no escuro */
body.theme-dark #view-capacitacao .intranet-header {
  background: linear-gradient(110deg, #19200c 0%, #273114 55%, #394820 100%);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* chips no escuro */
body.theme-dark #view-capacitacao .cap-cat-tab {
  box-shadow: none;
}
body.theme-dark #view-capacitacao .cap-cat-tab.active {
  background: linear-gradient(135deg, #536f23, #394820);
  border-color: #536f23;
}

/* cards no escuro: borda/sombra recalibradas */
body.theme-dark #view-capacitacao .cap-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.6);
}
body.theme-dark #view-capacitacao .cap-card:hover {
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7);
}
body.theme-dark #view-capacitacao .cap-card::before {
  background: linear-gradient(180deg, #668b26, #536f23);
}
body.theme-dark #view-capacitacao .cap-card-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

/* badge no escuro */
body.theme-dark #view-capacitacao .cap-badge {
  background: rgba(102,139,38,0.20);
  color: #cae797;
}

/* botão primário do header no escuro */
body.theme-dark #view-capacitacao .intranet-header .btn-primary {
  background: #cae797;
  color: #19200c;
  border-color: #cae797;
}

/* modal no escuro */
body.theme-dark #view-capacitacao .modal-header {
  background: linear-gradient(110deg, #19200c, #273114);
}


/* ===== ATENDIMENTO-UBS ===== */
/* =====================================================================
   OVERLAY "CONSOLE" BOLD — Atendimento clínico UBS (#view-ubs-clinical)
   Aditivo. 100% escopado. Só aparência. Classes reais de views/ubs-clinical.html
   e js/app/units/02.js (.intranet-header*, .ubs-atend-*, .ubs-fila-*,
   .ubs-side-*, .ubs-flow-card*, .ubs-flow-risco, .risco-*).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) COMMAND HEADER — a faixa .intranet-header (já é banner) reforçada:
   gradiente forte da marca + brilho superior, radius e sombra profunda.
   --------------------------------------------------------------------- */
#view-ubs-clinical .intranet-header {
  background:
    radial-gradient(circle at 88% -60%, rgba(230,184,0,.30), transparent 46%),
    linear-gradient(110deg, #273114 0%, #394820 60%, #4c5d2f 100%) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px -14px rgba(39,49,20,.55), inset 0 1px 0 rgba(255,255,255,.14) !important;
  padding: 20px 28px !important;
}
#view-ubs-clinical .intranet-header-logo {
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.4);
}
#view-ubs-clinical .intranet-header-title {
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}

/* ---------------------------------------------------------------------
   2) BARRA DE AÇÕES (.ubs-atend-header) — strip sólido, borda tonal,
   sombra leve; input do guichê em destaque.
   --------------------------------------------------------------------- */
#view-ubs-clinical .ubs-atend-header {
  background: linear-gradient(180deg, #ffffff, #f5f7f2) !important;
  border: 1px solid #dae2cc !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px -8px rgba(39,49,20,.20) !important;
  padding: 14px 16px !important;
}
#view-ubs-clinical .ubs-guiche-input {
  border: 1.5px solid #c1cbae !important;
  border-radius: 11px !important;
  font-weight: 600;
  transition: border-color .14s, box-shadow .14s;
}
#view-ubs-clinical .ubs-guiche-input:focus {
  outline: none;
  border-color: #394820 !important;
  box-shadow: 0 0 0 3px rgba(57,72,32,.14) !important;
}

/* ---------------------------------------------------------------------
   3) LAYOUT — respiro maior entre colunas (gap 16-20px), sem mexer no grid.
   --------------------------------------------------------------------- */
#view-ubs-clinical .ubs-atend-layout { gap: 18px !important; }
#view-ubs-clinical .ubs-fila-board { gap: 18px !important; }

/* ---------------------------------------------------------------------
   4) PAINEL LATERAL + KPIs — cada contador (.ubs-side-counts > div) vira
   card de indicador com faixa colorida 4px à esquerda e número grande.
   --------------------------------------------------------------------- */
#view-ubs-clinical .ubs-atend-side {
  border: 1px solid #dae2cc !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px -12px rgba(39,49,20,.22) !important;
}
#view-ubs-clinical .ubs-side-title {
  color: #394820 !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
}
#view-ubs-clinical .ubs-side-counts { gap: 8px !important; border-top-color: #e1e8d6 !important; }
#view-ubs-clinical .ubs-side-counts > div {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 7px;
  background: #f5f7f2;
  border: 1px solid #dbe3ce;
  border-radius: 12px;
  padding: 9px 12px 9px 16px;
  overflow: hidden;
}
#view-ubs-clinical .ubs-side-counts > div::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px;
  background: #394820;
}
/* estados: 1=aguardando triagem (alerta), 2=no médico (info), 3=finalizados (livre) */
#view-ubs-clinical .ubs-side-counts > div:nth-child(1)::before { background: #d97706; }
#view-ubs-clinical .ubs-side-counts > div:nth-child(2)::before { background: #2563eb; }
#view-ubs-clinical .ubs-side-counts > div:nth-child(3)::before { background: #16a34a; }
#view-ubs-clinical .ubs-side-counts b {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  line-height: 1;
  color: #273114 !important;
}

/* ---------------------------------------------------------------------
   5) QUADRO DE FILAS — cabeçalhos de coluna mais fortes, contagem em pílula.
   --------------------------------------------------------------------- */
#view-ubs-clinical .ubs-fila-col {
  border: 1px solid #dae2cc !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px -12px rgba(39,49,20,.20) !important;
}
#view-ubs-clinical .ubs-fila-col > header {
  padding: 12px 14px !important;
  font-weight: 900;
}
#view-ubs-clinical .ubs-fila-col > header strong { font-weight: 900 !important; letter-spacing: .01em; }
#view-ubs-clinical .ubs-fila-col > header span { font-weight: 900 !important; padding: 2px 11px !important; }
/* Fila Normal = info | Fila Preferencial = alerta (reforço dos tons já existentes) */
#view-ubs-clinical .ubs-fila-normal > header { background: linear-gradient(180deg,#eef4fd,#e4eefb) !important; }
#view-ubs-clinical .ubs-fila-pref   > header { background: linear-gradient(180deg,#fffbeb,#fef3d6) !important; }
#view-ubs-clinical .ubs-atend-main-head strong { color: #273114 !important; font-weight: 900 !important; }

/* ---------------------------------------------------------------------
   6) CARDS DE PACIENTE (.ubs-flow-card) — radius, sombra, acento por risco
   mais grosso, elevação no hover.
   --------------------------------------------------------------------- */
#view-ubs-clinical .ubs-flow-card {
  border-radius: 14px !important;
  border-left-width: 5px !important;
  box-shadow: 0 4px 14px -8px rgba(15,23,42,.18) !important;
}
#view-ubs-clinical .ubs-flow-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(39,49,20,.30) !important;
}
#view-ubs-clinical .ubs-flow-card > header strong { font-weight: 800 !important; }
#view-ubs-clinical .ubs-flow-card-actions { gap: 8px !important; margin-top: 12px !important; }

/* Chips de risco (.ubs-flow-risco + .risco-*) em pílula tonal bold */
#view-ubs-clinical .ubs-flow-risco {
  font-weight: 900 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 10px !important;
}

/* ---------------------------------------------------------------------
   7) DARK THEME (body.theme-dark) — variantes de fundo/borda/texto.
   --------------------------------------------------------------------- */
/* Command header: mantém o gradiente da marca, só aprofunda a sombra */
body.theme-dark #view-ubs-clinical .intranet-header {
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* Barra de ações */
body.theme-dark #view-ubs-clinical .ubs-atend-header {
  background: linear-gradient(180deg,#1c2016,#171a12) !important;
  border-color: #2e3325 !important;
}
body.theme-dark #view-ubs-clinical .ubs-guiche-input {
  background: #1a1e13 !important;
  border-color: #3a412e !important;
  color: #e7eae1 !important;
}
body.theme-dark #view-ubs-clinical .ubs-guiche-input:focus {
  border-color: #839b5b !important;
  box-shadow: 0 0 0 3px rgba(131,155,91,.22) !important;
}
/* Lateral + KPIs */
body.theme-dark #view-ubs-clinical .ubs-atend-side {
  background: #1a1e14 !important;
  border-color: #2e3325 !important;
}
body.theme-dark #view-ubs-clinical .ubs-side-title { color: #a6bf79 !important; }
body.theme-dark #view-ubs-clinical .ubs-side-counts { border-top-color: #2e3325 !important; color: #cfd5c4 !important; }
body.theme-dark #view-ubs-clinical .ubs-side-counts > div {
  background: #1a1e13 !important;
  border-color: #2e3325 !important;
}
body.theme-dark #view-ubs-clinical .ubs-side-counts b { color: #dbe4cc !important; }
/* Colunas de fila */
body.theme-dark #view-ubs-clinical .ubs-fila-col {
  background: #1a1e14 !important;
  border-color: #2e3325 !important;
}
body.theme-dark #view-ubs-clinical .ubs-fila-col > header { border-bottom-color: #2e3325 !important; }
body.theme-dark #view-ubs-clinical .ubs-fila-normal > header { background: linear-gradient(180deg,#1b2438,#16203a) !important; }
body.theme-dark #view-ubs-clinical .ubs-fila-normal > header strong,
body.theme-dark #view-ubs-clinical .ubs-fila-normal > header span { color: #93b4f5 !important; background: transparent; }
body.theme-dark #view-ubs-clinical .ubs-fila-pref > header { background: linear-gradient(180deg,#33280f,#2c2210) !important; }
body.theme-dark #view-ubs-clinical .ubs-fila-pref > header strong,
body.theme-dark #view-ubs-clinical .ubs-fila-pref > header span { color: #f0c163 !important; background: transparent; }
body.theme-dark #view-ubs-clinical .ubs-fila-empty { color: #5b6250 !important; }
body.theme-dark #view-ubs-clinical .ubs-atend-main-head strong { color: #dbe4cc !important; }
/* Cards */
body.theme-dark #view-ubs-clinical .ubs-flow-card {
  background: #1a1e13 !important;
  border-color: #2e3325 !important;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.5) !important;
}
body.theme-dark #view-ubs-clinical .ubs-flow-card:hover {
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.7) !important;
}
body.theme-dark #view-ubs-clinical .ubs-flow-card > header strong { color: #e7eae1 !important; }