/* ============================================================================
   TEMA ESCURO — edite este arquivo diretamente.
   Os valores de cor ficam nos blocos de variáveis (html.dark-mode { --x: … }) abaixo.

   Como funciona
   - O tema vive em <html class="dark-mode">, aplicado por um script no <head>
     ANTES da primeira pintura (sem "piscada" clara ao abrir).
   - TUDO fica dentro de @media screen: a IMPRESSÃO continua sempre clara.
   - css/styles.css usa tokens (--azul, --borda…). O HTML/JS legado usa
     var(--d-*, #cor-original): fora do modo escuro o token não existe e vale a
     cor original; no modo escuro os --d-* abaixo assumem.
   - Prévias de documento (evolução, receita, TCLE…) ficam CLARAS, como folha de
     papel, para mostrar fielmente o que será impresso.
   ========================================================================== */
@media screen {

  html.dark-mode {
    color-scheme: dark;
    scrollbar-color: #3a5278 #0b1220;
    --azul: #7cc0f5;
    --azul-medio: #6cb6ff;
    --azul-claro: #16233b;
    --verde: #4ade80;
    --verde-claro: #0f2a20;
    --cinza: #a9b6c9;
    --cinza-claro: #0e1727;
    --borda: #26354f;
    --branco: #111a2b;
    --texto: #e6edf7;
    --texto-suave: #8fa0ba;
    --bg-page: #0b1220;
    --bg-card: #111a2b;
    --bg-input: #0d1626;
    --preview-bg: #0f1828;
    --brand-bg: #0f2140;
    --brand-bg-2: #0d1a2f;
    --brand-bg-deep: #08101f;
    --ok-solid: #1e7f52;
    --btn-primary-bg: #2a6cb5;
    --btn-primary-hover: #347bc4;
    --sombra-card: 0 2px 10px rgba(0,0,0,0.35);
    --foco-ring: 0 0 0 3px rgba(108,182,255,0.28);
    --d-bg-card: #111a2b;
    --d-bg-page: #0b1220;
    --d-cinza-claro: #0e1727;
    --d-bg-strong: #26354f;
    --d-azul-claro: #16233b;
    --d-bg-erro: #2a1418;
    --d-bg-alerta: #2a2110;
    --d-verde-claro: #0f2a20;
    --d-primary: #2a6cb5;
    --d-brand-bar: #0f2140;
    --d-primary-2: #2f74bf;
    --d-brand-deep: #08101f;
    --d-brand-2: #0d1a2f;
    --d-azul-2: #1f4170;
    --d-azul-3: #2b5a99;
    --d-bg-roxo: #231b3f;
    --d-azul: #7cc0f5;
    --d-azul-medio: #6cb6ff;
    --d-fg-roxo: #c4b5fd;
    --d-texto: #e6edf7;
    --d-cinza: #a9b6c9;
    --d-texto-mut: #8091ab;
    --d-fg-erro: #fca5a5;
    --d-fg-alerta: #fcd34d;
    --d-verde: #4ade80;
    --d-borda: #26354f;
    --d-borda-forte: #3a5278;
    --d-bd-erro: #6b2a30;
    --d-bd-alerta: #6b5316;
    --d-bd-ok: #1f5a40;
    --d-bd-roxo: #4b3f87;
  }

  /* ---------- base ---------- */
  html.dark-mode body { background: var(--bg-page); color: var(--texto); }
  html.dark-mode ::selection { background: rgba(108,182,255,0.35); color: #fff; }
  html.dark-mode ::placeholder { color: var(--texto-suave); opacity: 1; }
  html.dark-mode input:disabled, html.dark-mode select:disabled, html.dark-mode textarea:disabled {
    background: #0a111f; color: var(--texto-suave); opacity: .85;
    -webkit-text-fill-color: var(--texto-suave);
  }
  html.dark-mode input:focus, html.dark-mode select:focus, html.dark-mode textarea:focus {
    border-color: var(--azul-medio); background: #0f1a2e;
  }
  html.dark-mode input[type="checkbox"], html.dark-mode input[type="radio"] { accent-color: #4ea8de; }
  html.dark-mode hr, html.dark-mode .divider { border-color: var(--borda); }

  /* ---------- cabeçalho / barras ---------- */
  html.dark-mode .app-header {
    background: linear-gradient(180deg, #112648 0%, #0d1d38 100%);
    border-bottom: 1px solid #1f3558;
    box-shadow: 0 2px 14px rgba(0,0,0,0.45);
  }
  html.dark-mode .app-header img {
    background: rgba(255,255,255,0.94); border-radius: 10px; padding: 3px 8px;
  }
  html.dark-mode .tabs-bar { border-top: 1px solid #1f3558; border-bottom: 1px solid #14233f; }
  html.dark-mode .tab-btn { background: rgba(255,255,255,0.05); color: #b4c3da; }
  html.dark-mode .tab-btn:not(.active):hover { background: rgba(255,255,255,0.12); color: #fff; }
  html.dark-mode .tab-btn.active,
  html.dark-mode .subtab-btn.active { background: var(--bg-page); color: var(--azul); }
  html.dark-mode .tab-btn.active .tab-badge { background: var(--azul-claro); color: var(--azul); }
  html.dark-mode .subtab-btn { color: #aebfd8; }
  html.dark-mode .subtab-btn:not(.active):hover { color: #fff; }
  html.dark-mode .subtab-btn.kit { color: #fcd34d; }
  html.dark-mode .subtab-btn.kit.active { color: #fbbf24; }
  html.dark-mode .module-nav { border-bottom-color: #1f3558; }
  html.dark-mode .module-btn { color: #aebfd8; }
  html.dark-mode .module-btn.active { color: #fff; }
  html.dark-mode .subtabs-bar { border-bottom: 1px solid #14233f; }
  html.dark-mode .subtabs-dropdown { background: #0d1a2f; border-color: #26406a; }
  html.dark-mode .dark-toggle-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); }

  /* ---------- cards ---------- */
  html.dark-mode .card { background: var(--bg-card); border-color: var(--borda); box-shadow: var(--sombra-card); }
  html.dark-mode .card-header { background: #16233b; border-bottom-color: var(--borda); }
  html.dark-mode .card-header h2 { color: #9ad0fa; }
  html.dark-mode label { color: #b4c2d8; }

  /* ---------- botões ---------- */
  html.dark-mode .btn-primary { color: #fff; }
  html.dark-mode .btn-secondary { background: #1a2b47; color: #cfe6fb; border-color: #2c4468; }
  html.dark-mode .btn-secondary:hover { background: #223859; }
  html.dark-mode .btn-danger { background: #2a1418; color: #fca5a5; border-color: #6b2a30; }
  html.dark-mode .btn-danger:hover { background: #3a1a20; }
  html.dark-mode .desc-template-btn:hover,
  html.dark-mode .desc-template-btn.ativo { background: var(--btn-primary-bg); border-color: var(--azul-medio); color: #fff; }
  html.dark-mode .confirm-btn-cancel { background: #16233b; color: var(--cinza); border-color: var(--borda); }

  /* ---------- chips, pills, checks (inclui Risco Cirúrgico) ---------- */
  html.dark-mode .status-chip { background: var(--bg-input); color: var(--cinza); border-color: var(--borda); }
  html.dark-mode .status-chip:hover { border-color: #3a5278; color: var(--texto); }
  html.dark-mode .status-chip.selected-sim { background: #0f2a20; color: #86efac; border-color: #2f9e66; }
  html.dark-mode .status-chip.selected-nao { background: #2a1418; color: #fca5a5; border-color: #b4474f; }
  html.dark-mode .check-item { background: var(--bg-input); color: var(--cinza); border-color: var(--borda); }
  html.dark-mode .check-item:hover { border-color: #3a5278; color: var(--texto); }
  html.dark-mode .check-item:has(input:checked) { background: #0f2a20; color: #86efac; border-color: #2f9e66; }
  html.dark-mode .opcao-pill { background: var(--bg-input); color: var(--cinza); border-color: var(--borda); }
  html.dark-mode .opcao-pill:hover, html.dark-mode .opcao-pill.ativo {
    background: #1a3358; color: #cfe6fb; border-color: var(--azul-medio);
  }
  html.dark-mode .freq-btn { background: var(--bg-input); color: var(--cinza); }
  html.dark-mode .freq-btn.sos.active { background: #2b2210; border-color: #d98a2b; color: #fcd34d; }
  html.dark-mode .freq-btn.regular.active { background: #0f2a20; border-color: #2f9e66; color: #86efac; }
  html.dark-mode .risco-box { background: #0f1b31; border-color: #2d5a94; }
  html.dark-mode .risco-box-title { color: #9ad0fa; }
  html.dark-mode .posop-section { background: #0f221d; border-color: #1f4a3b; }
  html.dark-mode .posop-section-title { color: #6ee7b7; }
  html.dark-mode .help-text { color: var(--texto-suave); }

  /* ---------- toast / avisos ---------- */
  html.dark-mode .toast { box-shadow: 0 6px 24px rgba(0,0,0,0.55); }
  html.dark-mode .offline-banner { background: #a93226; }

  /* ---------- modais ---------- */
  html.dark-mode .confirm-overlay, html.dark-mode .print-select-overlay { background: rgba(2,6,14,0.72); }
  html.dark-mode .confirm-box, html.dark-mode .print-select-box {
    background: #131d31; border-color: #2a3c5c; box-shadow: 0 24px 70px rgba(0,0,0,0.65);
  }
  html.dark-mode .print-select-item:hover { background: #1a2b47; }

  /* ---------- sidebars / listas ---------- */
  html.dark-mode .historico-sidebar-header, html.dark-mode .cc-dia-sidebar-header { background: #14305a; }
  html.dark-mode .sidebar-ev-item:hover { background: #16233b; }
  html.dark-mode .sidebar-ev-item.selecionado { border-color: var(--azul-medio); background: #16233b; }
  html.dark-mode .sidebar-modo-banner { background: #2b2210; border-bottom-color: #6b5316; color: #fcd34d; }
  html.dark-mode .cc-dia-nome { color: var(--azul); }
  html.dark-mode .cc-dia-proc { color: var(--cinza); }
  html.dark-mode .cc-dia-btn { background: var(--btn-primary-bg); }
  html.dark-mode .amb-pac-card { background: var(--bg-card); }
  html.dark-mode #cc-ac-dropdown { box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
  html.dark-mode .busca-global-item:hover { background: #16233b !important; }

  /* ---------- relógio da dieta ---------- */
  html.dark-mode .clock-face { background: #16233b; border-color: var(--azul-medio); }
  html.dark-mode .clock-hand, html.dark-mode .clock-center { background: var(--azul-medio); }
  html.dark-mode .clock-hour-mark { background: rgba(124,192,245,0.4); }
  html.dark-mode .time-display { background: #16233b; border-color: var(--azul-medio); color: var(--azul); }

  /* ---------- página inicial ---------- */
  html.dark-mode .home-page {
    background:
      radial-gradient(900px 480px at 50% -8%, rgba(56,120,210,0.20), transparent 70%),
      linear-gradient(160deg, #060c18 0%, #0a1730 55%, #0c2142 100%);
  }
  html.dark-mode .home-sub { color: #9fb2cf; }
  html.dark-mode .home-card {
    background: linear-gradient(180deg, #141f35 0%, #101a2d 100%);
    border-color: #27395a;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  }
  html.dark-mode .home-card:hover {
    background: linear-gradient(180deg, #1a2a47 0%, #15223b 100%);
    border-color: #4f86cc;
    box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(79,134,204,0.35);
  }
  html.dark-mode .home-card--admin { border-color: rgba(251,191,36,0.45); }
  html.dark-mode .home-card--admin:hover { border-color: rgba(251,191,36,0.8); }
  html.dark-mode .home-card-title { color: #eef4fc; }
  html.dark-mode .home-card-desc { color: #9fb2cf; }
  html.dark-mode .home-footer { color: #8a9fc0; }

  /* ---------- Tailwind (CDN) — o prefixo html.dark-mode garante a precedência ---------- */
  html.dark-mode .bg-white { background-color: var(--bg-card); }
  html.dark-mode .bg-gray-50, html.dark-mode .hover\:bg-gray-50:hover { background-color: #0e1727; }
  html.dark-mode .bg-gray-100, html.dark-mode .hover\:bg-gray-100:hover { background-color: #16233b; }
  html.dark-mode .bg-gray-200, html.dark-mode .hover\:bg-gray-200:hover { background-color: #1f2f4b; }
  html.dark-mode .bg-gray-300 { background-color: #33476b; }
  html.dark-mode .hover\:bg-blue-50\/50:hover { background-color: rgba(59,130,246,0.12); }
  html.dark-mode .bg-green-50 { background-color: #0f2a20; }
  html.dark-mode .bg-green-100 { background-color: #12372a; }
  html.dark-mode .bg-red-50 { background-color: #2a1418; }
  html.dark-mode .bg-red-100 { background-color: #3a1a20; }
  html.dark-mode .bg-yellow-50 { background-color: #2a2110; }
  html.dark-mode .bg-yellow-100 { background-color: #3a2d12; }
  html.dark-mode .bg-blue-100 { background-color: #16305a; }
  html.dark-mode .text-gray-300 { color: #6f819e; }
  html.dark-mode .text-gray-400 { color: #8091ab; }
  html.dark-mode .text-gray-500 { color: #9aabc4; }
  html.dark-mode .text-gray-600, html.dark-mode .hover\:text-gray-600:hover { color: #b4c2d8; }
  html.dark-mode .text-gray-700, html.dark-mode .hover\:text-gray-700:hover { color: #c8d4e6; }
  html.dark-mode .text-gray-800, html.dark-mode .text-gray-900 { color: #e6edf7; }
  html.dark-mode .text-blue-600, html.dark-mode .hover\:text-blue-800:hover { color: #7cb7fb; }
  html.dark-mode .text-indigo-600 { color: #a5b4fc; }
  html.dark-mode .text-red-500, html.dark-mode .text-red-600, html.dark-mode .text-red-700,
  html.dark-mode .hover\:text-red-700:hover { color: #fca5a5; }
  html.dark-mode .text-green-600, html.dark-mode .text-green-700 { color: #86efac; }
  html.dark-mode .text-amber-600, html.dark-mode .text-amber-700 { color: #fcd34d; }
  html.dark-mode .text-yellow-700, html.dark-mode .text-yellow-800 { color: #fde047; }
  html.dark-mode .border-gray-100 { border-color: #1b2840; }
  html.dark-mode .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1b2840; }
  html.dark-mode .border-gray-200 { border-color: var(--borda); }
  html.dark-mode .border-gray-300 { border-color: #33476b; }
  html.dark-mode .border-red-200 { border-color: #6b2a30; }
  html.dark-mode .border-green-200, html.dark-mode .border-green-300 { border-color: #1f5a40; }
  html.dark-mode .border-yellow-100 { border-color: #5a4614; }
  html.dark-mode .border-blue-300, html.dark-mode .hover\:border-blue-200:hover { border-color: #2d5a94; }
  /* Tailwind (preflight) usa border-color:#e5e7eb nas utilitárias .border/.border-b/.border-t */
  html.dark-mode .border, html.dark-mode .border-b, html.dark-mode .border-t { border-color: var(--borda); }
  html.dark-mode .border-gray-200.border, html.dark-mode .border-gray-300.border { border-color: inherit; }

  /* ---------- módulo Escala ---------- */
  html.dark-mode .tab-active { border-bottom-color: #60a5fa; color: #7cb7fb; }
  html.dark-mode .bg-nerj { background-color: #0f2a20; color: #86efac; border-color: #1f5a40; }
  html.dark-mode .bg-ghc  { background-color: #14284a; color: #93c5fd; border-color: #24457a; }
  html.dark-mode .bg-ms   { background-color: #231b3f; color: #c4b5fd; border-color: #4b3f87; }
  html.dark-mode .alerta-24h { background-color: #3a1a20 !important; color: #fca5a5 !important; border-color: #6b2a30 !important; }
  html.dark-mode .period-header { color: #8091ab; border-bottom-color: #1b2840; }
  html.dark-mode .folga { opacity: 0.5; }

  /* ---------- PRÉVIAS = FOLHA DE PAPEL CLARA ----------
     Dentro do papel os tokens voltam ao claro: --x = valores do :root e
     --d-* = initial (o var() cai no fallback hex original do HTML/JS).
     Contêiner vazio (só .preview-empty) continua escuro, sem "papel" em branco. */
  html.dark-mode :is([id*="preview"]:not(#ferias-per-preview), #presc-doc):has(> :not(.preview-empty)) {
    color-scheme: light;
    --azul: #0a3d6b;
    --azul-medio: #1a5fa8;
    --azul-claro: #e8f0f9;
    --verde: #1a6b4a;
    --verde-claro: #e6f4ee;
    --cinza: #4a5568;
    --cinza-claro: #f5f7fa;
    --borda: #d0dae8;
    --branco: #ffffff;
    --texto: #1a202c;
    --texto-suave: #64748b;
    --bg-page: #eef2f8;
    --bg-card: #ffffff;
    --bg-input: #f5f7fa;
    --preview-bg: #fdfcfb;
    --d-bg-card: initial;
    --d-bg-page: initial;
    --d-cinza-claro: initial;
    --d-bg-strong: initial;
    --d-azul-claro: initial;
    --d-bg-erro: initial;
    --d-bg-alerta: initial;
    --d-verde-claro: initial;
    --d-primary: initial;
    --d-brand-bar: initial;
    --d-primary-2: initial;
    --d-brand-deep: initial;
    --d-brand-2: initial;
    --d-azul-2: initial;
    --d-azul-3: initial;
    --d-bg-roxo: initial;
    --d-azul: initial;
    --d-azul-medio: initial;
    --d-fg-roxo: initial;
    --d-texto: initial;
    --d-cinza: initial;
    --d-texto-mut: initial;
    --d-fg-erro: initial;
    --d-fg-alerta: initial;
    --d-verde: initial;
    --d-borda: initial;
    --d-borda-forte: initial;
    --d-bd-erro: initial;
    --d-bd-alerta: initial;
    --d-bd-ok: initial;
    --d-bd-roxo: initial;
    background: #ffffff;
    color: #1a202c;
    border-radius: 8px;
    box-shadow: 0 0 0 1px #2a3c5c, 0 10px 30px rgba(0,0,0,0.45);
  }
  html.dark-mode .preview-empty { color: var(--texto-suave); }
  html.dark-mode .preview-timestamp { color: var(--texto-suave); }

}