/* ═══════════════════════════════════════════════════════════════
   TEMAS — os mesmos do sistema da Balança (MMO LOGIST).
   O tema escolhido em "🎨 Aparência" fica em <html data-tema="...">
   (ver /js/prefs.js). O tamanho da letra fica em --esc e o tipo de
   letra em --font. Padrão: Clássico (claro).
   Esta camada vem depois do estilo do portal e manda nas cores de
   tudo: topo, menu, cartões, tabelas, botões, campos e ecrãs de entrada.
═══════════════════════════════════════════════════════════════ */

/* ── Paletas ─────────────────────────────────────────────────── */
html[data-tema] body {
  --r: 12px;
}
html[data-tema="classico"] body {
  --bg:#eef1f5;--bg2:#f6f8fb;--bg3:#f6f8fb;--card:#ffffff;--campo:#ffffff;
  --border:#e2e6ec;--border2:#c6ceda;
  --accent:#1a3c6e;--accent2:#2a6db5;--accent3:#1a3c6e;--acento:#f7b733;
  --text:#222!important;--text2:#555!important;--text3:#777!important;
  --menu-bg:#1a3c6e;--menu-txt:#ffffff;--menu-txt2:#b9cdea;--menu-hover:rgba(255,255,255,.08);
  --menu-act-bg:rgba(247,183,51,.16);--menu-act-txt:#f7b733;--menu-act-borda:#f7b733;
  --topo-bg:#ffffff;--topo-txt:#1a3c6e;--th-bg:#1a3c6e;--th-txt:#ffffff;
  --btn-pri:#1a3c6e;--sobre-btn-pri:#ffffff;--login-a:#1a3c6e;--login-b:#2a6db5;--login-c:#f7b733;
  --sombra:0 2px 10px rgba(16,24,40,.08);
}
html[data-tema="verde"] body {
  --bg:#edf4ef;--bg2:#f4f8f5;--bg3:#f4f8f5;--card:#ffffff;--campo:#fbfdf5;
  --border:#dbe6de;--border2:#bfd3c5;
  --accent:#1f5a3c;--accent2:#2e8b57;--accent3:#1f5a3c;--acento:#e3b341;
  --text:#222!important;--text2:#555!important;--text3:#777!important;
  --menu-bg:#1f5a3c;--menu-txt:#ffffff;--menu-txt2:#cfe8d9;--menu-hover:rgba(255,255,255,.08);
  --menu-act-bg:rgba(227,179,65,.16);--menu-act-txt:#e3b341;--menu-act-borda:#e3b341;
  --topo-bg:#ffffff;--topo-txt:#1f5a3c;--th-bg:#1f5a3c;--th-txt:#ffffff;
  --btn-pri:#1f5a3c;--sobre-btn-pri:#ffffff;--login-a:#1f5a3c;--login-b:#2e8b57;--login-c:#e3b341;
  --sombra:0 2px 10px rgba(16,24,40,.08);
}
html[data-tema="vinho"] body {
  --bg:#f5eff1;--bg2:#faf5f6;--bg3:#faf5f6;--card:#ffffff;--campo:#fffaf5;
  --border:#eadde1;--border2:#d9c2c9;
  --accent:#6b1f33;--accent2:#a33a55;--accent3:#6b1f33;--acento:#d9a441;
  --text:#222!important;--text2:#555!important;--text3:#777!important;
  --menu-bg:#6b1f33;--menu-txt:#ffffff;--menu-txt2:#f0d3db;--menu-hover:rgba(255,255,255,.08);
  --menu-act-bg:rgba(217,164,65,.16);--menu-act-txt:#d9a441;--menu-act-borda:#d9a441;
  --topo-bg:#ffffff;--topo-txt:#6b1f33;--th-bg:#6b1f33;--th-txt:#ffffff;
  --btn-pri:#6b1f33;--sobre-btn-pri:#ffffff;--login-a:#6b1f33;--login-b:#a33a55;--login-c:#d9a441;
  --sombra:0 2px 10px rgba(16,24,40,.08);
}
html[data-tema="grafite"] body {
  --bg:#eceef1;--bg2:#f5f6f8;--bg3:#f5f6f8;--card:#ffffff;--campo:#ffffff;
  --border:#dfe2e6;--border2:#c3c8cf;
  --accent:#2f3640;--accent2:#56606d;--accent3:#2f3640;--acento:#f39c12;
  --text:#222!important;--text2:#555!important;--text3:#777!important;
  --menu-bg:#2f3640;--menu-txt:#ffffff;--menu-txt2:#d5d9de;--menu-hover:rgba(255,255,255,.08);
  --menu-act-bg:rgba(243,156,18,.16);--menu-act-txt:#f39c12;--menu-act-borda:#f39c12;
  --topo-bg:#ffffff;--topo-txt:#2f3640;--th-bg:#2f3640;--th-txt:#ffffff;
  --btn-pri:#2f3640;--sobre-btn-pri:#ffffff;--login-a:#2f3640;--login-b:#56606d;--login-c:#f39c12;
  --sombra:0 2px 10px rgba(16,24,40,.08);
}
html[data-tema="contraste"] body {
  --bg:#ffffff;--bg2:#ffffff;--bg3:#ffffff;--card:#ffffff;--campo:#ffffff;
  --border:#000000;--border2:#000000;
  --accent:#000000;--accent2:#000000;--accent3:#000000;--acento:#ffd400;
  --text:#000!important;--text2:#000!important;--text3:#000!important;
  --menu-bg:#000000;--menu-txt:#ffffff;--menu-txt2:#ffffff;--menu-hover:#222222;
  --menu-act-bg:#ffd400;--menu-act-txt:#000000;--menu-act-borda:#ffd400;
  --topo-bg:#ffffff;--topo-txt:#000000;--th-bg:#000000;--th-txt:#ffffff;
  --btn-pri:#000000;--sobre-btn-pri:#ffffff;--login-a:#000000;--login-b:#000000;--login-c:#ffd400;
  --sombra:none;
}
html[data-tema="robusto"] body {
  --bg:#07090d;--bg2:#0e1118;--bg3:#0e1118;--card:#151921;--campo:#07090d;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.16);
  --accent:#f59e0b;--accent2:#f59e0b;--accent3:#fbbf24;--acento:#f59e0b;
  --text:#eef0f7;--text2:#8f94a9;--text3:#6b7086;
  --menu-bg:#0e1118;--menu-txt:#eef0f7;--menu-txt2:#8f94a9;--menu-hover:#151921;
  --menu-act-bg:rgba(245,158,11,.1);--menu-act-txt:#f59e0b;--menu-act-borda:#f59e0b;
  --topo-bg:#0e1118;--topo-txt:#eef0f7;--th-bg:#0e1118;--th-txt:#8f94a9;
  --btn-pri:#f59e0b;--sobre-btn-pri:#07090d;--login-a:#07090d;--login-b:#151921;--login-c:#f59e0b;
  --sombra:0 4px 28px rgba(0,0,0,.45);--r:16px;
}
/* Capricórnio — o azul #1B6BA8 do Soft Robusto MZ (Hospital Capricórnio) */
html[data-tema="capricornio"] body {
  --bg:#001420;--bg2:#00202f;--bg3:#002c40;--card:#001a29;--campo:#002c40;
  --border:rgba(27,107,168,.28);--border2:rgba(74,155,212,.45);
  --accent:#1b6ba8;--accent2:#1b6ba8;--accent3:#4a9bd4;--acento:#4a9bd4;
  --text:#eaf3fa;--text2:#8fc1e6;--text3:#5f87a6;
  --menu-bg:#00202f;--menu-txt:#eaf3fa;--menu-txt2:#8fc1e6;--menu-hover:#002c40;
  --menu-act-bg:rgba(27,107,168,.25);--menu-act-txt:#8fc1e6;--menu-act-borda:#1b6ba8;
  --topo-bg:#00202f;--topo-txt:#eaf3fa;--th-bg:#0c2c46;--th-txt:#8fc1e6;
  --btn-pri:#1b6ba8;--sobre-btn-pri:#ffffff;--login-a:#071b2c;--login-b:#123f65;--login-c:#1b6ba8;
  --sombra:0 4px 24px rgba(0,0,0,.45);
}
html[data-tema="escuro"] body {
  --bg:#0e131a;--bg2:#18202b;--bg3:#212b38;--card:#18202b;--campo:#212b38;
  --border:#2c3848;--border2:#3d4b5e;
  --accent:#4a8fe7;--accent2:#4a8fe7;--accent3:#8ab8ff;--acento:#f2b233;
  --text:#e5eaf1;--text2:#9aa8ba;--text3:#7d8a9c;
  --menu-bg:#121922;--menu-txt:#e5eaf1;--menu-txt2:#9aa8ba;--menu-hover:#1e2733;
  --menu-act-bg:rgba(138,184,255,.12);--menu-act-txt:#8ab8ff;--menu-act-borda:#8ab8ff;
  --topo-bg:#121922;--topo-txt:#e5eaf1;--th-bg:#1a2330;--th-txt:#b9c6d8;
  --btn-pri:#4a8fe7;--sobre-btn-pri:#ffffff;--login-a:#0e131a;--login-b:#1f3f6b;--login-c:#f2b233;
  --sombra:0 4px 20px rgba(0,0,0,.4);
}

/* ── Tipo e tamanho da letra ─────────────────────────────────── */
html[data-tema] body { font-family: var(--font); }
html[data-tema] body button, html[data-tema] body input, html[data-tema] body select, html[data-tema] body textarea { font-family: var(--font); }
html[data-tema] #app, html[data-tema] #role-select, html[data-tema] #login-screen,
html[data-tema] #campus-select, html[data-tema] .modal-ov { zoom: var(--esc, 1); }

/* ── Componentes (todos os temas) ────────────────────────────── */
html[data-tema] body { background: var(--bg); color: var(--text); }
html[data-tema] body .topbar { background: var(--topo-bg); color: var(--topo-txt); border-bottom: 3px solid var(--acento); box-shadow: var(--sombra); backdrop-filter: none; }
html[data-tema] body .topbar .tb-brand, html[data-tema] body .topbar .tb-name { color: var(--topo-txt); }
html[data-tema] body .topbar .tb-brand span { color: var(--acento); }
html[data-tema] body .tb-btn { border-color: var(--border2); color: var(--topo-txt); background: transparent; }
html[data-tema] body .tb-btn:hover { border-color: var(--acento); }
html[data-tema] body .sidebar { background: var(--menu-bg); border-right: 1px solid var(--border); }
html[data-tema] body .sidebar .nav-sec { color: var(--menu-txt2); }
html[data-tema] body .sidebar .nav-sec:hover { color: var(--menu-txt); }
html[data-tema] body .sidebar .nav-item { color: var(--menu-txt); }
html[data-tema] body .sidebar .nav-item:hover { background: var(--menu-hover); color: var(--menu-txt); }
html[data-tema] body .sidebar .nav-item.active { background: var(--menu-act-bg); color: var(--menu-act-txt); border-left: 3px solid var(--menu-act-borda); font-weight: 700; }
html[data-tema] body .sidebar input { background: rgba(255,255,255,.1); color: var(--menu-txt); border-color: rgba(255,255,255,.25); }
html[data-tema] body .sidebar input::placeholder { color: var(--menu-txt2); }
html[data-tema] body .card, html[data-tema] body .scard, html[data-tema] body .modal,
html[data-tema] body .login-box, html[data-tema] body .role-card, html[data-tema] body .campus-card {
  background: var(--card); border-color: var(--border); box-shadow: var(--sombra); border-radius: var(--r); }
html[data-tema] body .card-hd { border-bottom: 2px solid var(--acento); }
html[data-tema] body .card-hd h3, html[data-tema] body .page-t { color: var(--accent3); }
html[data-tema] body th { background: var(--th-bg); color: var(--th-txt); border-bottom-color: var(--border); }
html[data-tema] body td { border-color: var(--border); }
html[data-tema] body .btn-primary { background: var(--btn-pri); color: var(--sobre-btn-pri); }
html[data-tema] body .btn-primary:hover { filter: brightness(1.1); }
html[data-tema] body .btn-outline { border-color: var(--border2); color: var(--text); }
html[data-tema] body .fld input, html[data-tema] body .fld select, html[data-tema] body .fld textarea,
html[data-tema] body .ts-wrapper.single .ts-control {
  background: var(--campo); border-color: var(--border2); color: var(--text); }
html[data-tema] body .fld input:focus, html[data-tema] body .fld select:focus, html[data-tema] body .fld textarea:focus {
  border-color: var(--accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 25%, transparent); }
html[data-tema] body .fld label { color: var(--text2); }
html[data-tema] body .ts-wrapper.single.input-active .ts-control, html[data-tema] body .ts-wrapper .ts-control,
html[data-tema] body .ts-wrapper .ts-control input, html[data-tema] body .ts-dropdown input { background: var(--campo) !important; color: var(--text) !important; }
html[data-tema] body .ts-dropdown { background: var(--card); color: var(--text); border-color: var(--border2); }
/* ecrãs de entrada: mesmo degradé da Balança */
html[data-tema] body #splash, html[data-tema] body #campus-select, html[data-tema] body #role-select, html[data-tema] body #login-screen {
  background: linear-gradient(135deg, var(--login-a) 0%, var(--login-b) 60%, var(--login-c) 100%); }
html[data-tema] body #role-select h1, html[data-tema] body #role-select h2,
html[data-tema] body #role-select p, html[data-tema] body #role-select .master-lnk,
html[data-tema] body #campus-select h1, html[data-tema] body #campus-select h2, html[data-tema] body #campus-select p { color: #fff !important; }
html[data-tema] body .lang-bar .lbtn { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.6); }
html[data-tema] body .lang-bar .lbtn.active { background: #fff; color: var(--login-a); }
html[data-tema="contraste"] body .sidebar input { background: #fff; color: #000; }

/* ── Temas claros: tirar os restos do desenho escuro ─────────── */
html.tema-claro body .modal-ov { background: rgba(16,24,40,.45); }
html.tema-claro body .badge { color: #fff !important; }
html.tema-claro body .alert { color: var(--text); }
html.tema-claro body .nav-item.active { border-color: var(--menu-act-borda); }

/* ── Alto contraste: bordas grossas, como na Balança ─────────── */
html[data-tema="contraste"] body .btn, html[data-tema="contraste"] body .card,
html[data-tema="contraste"] body .fld input, html[data-tema="contraste"] body .fld select { border: 2px solid #000 !important; }
html[data-tema="contraste"] body a, html[data-tema="contraste"] body button { text-decoration-thickness: 2px; }


/* ── Ecrã de arranque e lema: sempre legíveis, em qualquer tema ──
   O fundo do arranque é um degradé (azul → amarelo no Clássico, preto →
   amarelo no Alto contraste…): o texto passa a branco com sombra e o lema
   fica numa faixa escura translúcida, para nunca se perder no fundo. */
html[data-tema] body #splash .sp-t { color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
html[data-tema] body #splash .sp-t span { color: var(--acento) !important; }
html[data-tema] body #splash .sp-s { color: rgba(255,255,255,.9) !important; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
html[data-tema] body #splash .sp-lema:not(:empty) {
  color: #fff !important; background: rgba(0,0,0,.42); border-radius: 12px; padding: 9px 16px !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.45); font-weight: 600; box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
html[data-tema] body #splash .sp-bar { background: rgba(255,255,255,.3); }
/* faixa do lema por baixo do topo: cores do próprio tema (fundo do cartão + texto do tema) */
html[data-tema] body .lema-bar {
  background: var(--card) !important; color: var(--text2) !important;
  border-bottom: 1px solid var(--border2);
}