/* =====================================================================================
   ui-padrao · tema.css · v20261012
   FONTE ÚNICA: D:\claude -arquivos\_ui-padrao\front\tema.css
   A cópia dentro de cada app (ui/tema.css) é gerada por sincronizar.ps1 — NÃO editar lá.

   Temas  : data-theme = clean | dark | tech           (atributo em <html>; também vale em qualquer elemento,
                                                        usado pelos mini-previews do seletor)
   Marca  : data-marca = parana | casa-quattro | ultra | lojista   (só troca o grupo "acento")
   Regra  : cor SÓ por token --ui-*. Zero hex novo nos apps (exceções: --ui-logo-bg, prévias de impressão, jsPDF).
   ===================================================================================== */

/* ---------- 0. Comuns aos 3 temas ---------- */
[data-theme] {
  --ui-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ui-font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --ui-font-titulo: var(--ui-font);
  --ui-logo-bg: #ffffff;              /* chip branco atrás de logos — constante intencional */
  --ui-scroll-track: transparent;
  --ui-transicao: .15s ease;
  --ui-fundo-app-size: auto;
}

/* ---------- 1. CLEAN — claro, azul-marinho da marca, sem gradientes ---------- */
[data-theme="clean"] {
  color-scheme: light;
  --ui-bg: #f4f6f9;
  --ui-surface: #ffffff;
  --ui-surface2: #eef2f6;
  --ui-surface-hover: #e6ecf3;
  --ui-glass: rgba(255,255,255,.88);
  --ui-blur: 0px;
  --ui-border: #d9e1ea;
  --ui-border-strong: #b9c6d4;
  --ui-border-glow: transparent;
  --ui-text: #15202b;
  --ui-text-2: #3c4a59;
  --ui-muted: #5b6b7c;
  --ui-code-bg: #0f2231;
  --ui-code-text: #e9f1f8;
  --ui-selection: #cfe0f3;

  --ui-accent: #1C3D5E;
  --ui-accent-hover: #16314c;
  --ui-accent-solid: #1C3D5E;
  --ui-accent-text: #ffffff;
  --ui-accent-soft: #e4ecf5;
  --ui-accent-soft-2: #c5d6e8;
  --ui-accent-2: #B01E2E;
  --ui-link: #1d5a9a;
  --ui-focus: 0 0 0 3px rgba(28,61,94,.28);

  --ui-ok: #1f7a4d;      --ui-ok-soft: #dff5e8;
  --ui-warn: #9a5b00;    --ui-warn-soft: #fff1d6;
  --ui-danger: #B01E2E;  --ui-danger-soft: #fde3e6;
  --ui-info: #1d5a9a;    --ui-info-soft: #e1edf9;
  --ui-neutro: #5b6b7c;  --ui-neutro-soft: #e9eef3;
  --ui-on-status: #ffffff;   /* texto sobre fundo sólido de status */

  --ui-chart-1: #1C3D5E; --ui-chart-2: #B01E2E; --ui-chart-3: #2b7fd4; --ui-chart-4: #1f9d6a;
  --ui-chart-5: #e08a1e; --ui-chart-6: #7c5cd6; --ui-chart-7: #d6467f; --ui-chart-8: #17a2b8;
  --ui-chart-text: #5b6b7c;
  --ui-chart-grid: rgba(21,32,43,.08);
  --ui-tooltip-bg: #15202b; --ui-tooltip-text: #ffffff; --ui-tooltip-border: rgba(28,61,94,.4);

  --ui-th-bg: #f0f3f7; --ui-th-text: #3c4a59;
  --ui-row-hover: #eef3f9; --ui-zebra: #f8fafc; --ui-row-sel: #dce8f5;
  --ui-topbar-bg: #1C3D5E; --ui-topbar-text: #ffffff; --ui-topbar-muted: #b7c7d8; --ui-topbar-accent: #ff8a9b;

  --ui-radius: 10px; --ui-radius-sm: 6px; --ui-radius-lg: 14px;
  --ui-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
  --ui-shadow-lg: 0 16px 48px rgba(16,24,40,.16);
  --ui-glow: none;
  --ui-fundo-app: none;
  --ui-fundo-login: radial-gradient(900px 600px at 20% -10%, #e4ecf5, #f4f6f9 60%);
  --ui-scroll-thumb: #c3ccd6;
}

/* ---------- 2. DARK (Escuro) — paleta DP atual com contraste corrigido ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #0b1622;
  --ui-surface: #10212f;
  --ui-surface2: #173142;
  --ui-surface-hover: #1d3a4e;
  --ui-glass: rgba(16,33,47,.86);
  --ui-blur: 0px;
  --ui-border: #264052;
  --ui-border-strong: #355a73;
  --ui-border-glow: transparent;
  --ui-text: #e9f1f8;
  --ui-text-2: #c2d1de;
  --ui-muted: #93a9bd;
  --ui-code-bg: #07121b;
  --ui-code-text: #e9f1f8;
  --ui-selection: rgba(74,147,217,.35);

  --ui-accent: #4a93d9;
  --ui-accent-hover: #63a6e6;
  --ui-accent-solid: #2b6fb0;
  --ui-accent-text: #ffffff;
  --ui-accent-soft: rgba(74,147,217,.16);
  --ui-accent-soft-2: rgba(74,147,217,.38);
  --ui-accent-2: #e5566a;
  --ui-link: #6fb3f0;
  --ui-focus: 0 0 0 3px rgba(74,147,217,.35);

  --ui-ok: #3fcf8e;      --ui-ok-soft: rgba(63,207,142,.14);
  --ui-warn: #f6b73c;    --ui-warn-soft: rgba(246,183,60,.14);
  --ui-danger: #ff6b7d;  --ui-danger-soft: rgba(226,59,78,.18);
  --ui-info: #5ab0ff;    --ui-info-soft: rgba(90,176,255,.14);
  --ui-neutro: #93a9bd;  --ui-neutro-soft: rgba(147,169,189,.14);
  --ui-on-status: #07121b;

  --ui-chart-1: #4a93d9; --ui-chart-2: #34d399; --ui-chart-3: #f6a64b; --ui-chart-4: #a78bfa;
  --ui-chart-5: #f472b6; --ui-chart-6: #22d3ee; --ui-chart-7: #facc15; --ui-chart-8: #93a9bd;
  --ui-chart-text: #93a9bd;
  --ui-chart-grid: rgba(147,169,189,.12);
  --ui-tooltip-bg: rgba(8,18,28,.94); --ui-tooltip-text: #e9f1f8; --ui-tooltip-border: rgba(74,147,217,.35);

  --ui-th-bg: #142a3a; --ui-th-text: #93a9bd;
  --ui-row-hover: rgba(74,147,217,.08); --ui-zebra: rgba(255,255,255,.02); --ui-row-sel: rgba(74,147,217,.2);
  --ui-topbar-bg: #10212f; --ui-topbar-text: #e9f1f8; --ui-topbar-muted: #93a9bd; --ui-topbar-accent: #ff8a9b;

  --ui-radius: 12px; --ui-radius-sm: 7px; --ui-radius-lg: 16px;
  --ui-shadow: 0 10px 30px rgba(0,0,0,.4);
  --ui-shadow-lg: 0 18px 50px rgba(0,0,0,.5);
  --ui-glow: none;
  --ui-fundo-app: radial-gradient(900px 520px at 85% -5%, rgba(74,147,217,.12), transparent 60%),
                  radial-gradient(720px 520px at 0% 0%, rgba(176,30,46,.07), transparent 55%);
  --ui-fundo-login: radial-gradient(circle at 30% 20%, #142a3c, #0b1622 70%);
  --ui-scroll-thumb: #2d4a60;
}

/* ---------- 3. TECH — preto profundo, neon ciano/violeta, vidro, grade ---------- */
[data-theme="tech"] {
  color-scheme: dark;
  --ui-bg: #070b12;
  --ui-surface: #0d131f;
  --ui-surface2: #131c2c;
  --ui-surface-hover: #182438;
  --ui-glass: rgba(13,19,31,.72);
  --ui-blur: 10px;
  --ui-border: #1f2b40;
  --ui-border-strong: #2a3a55;
  --ui-border-glow: rgba(34,211,238,.35);
  --ui-text: #e6f1ff;
  --ui-text-2: #b9c8de;
  --ui-muted: #8b9bb4;
  --ui-code-bg: #040810;
  --ui-code-text: #e6f1ff;
  --ui-selection: rgba(34,211,238,.3);

  --ui-accent: #22d3ee;
  --ui-accent-hover: #67e8f9;
  --ui-accent-solid: #22d3ee;
  --ui-accent-text: #04111a;
  --ui-accent-soft: rgba(34,211,238,.14);
  --ui-accent-soft-2: rgba(34,211,238,.38);
  --ui-accent-2: #a78bfa;
  --ui-link: #67e8f9;
  --ui-focus: 0 0 0 3px rgba(34,211,238,.4);

  --ui-ok: #2fe3a7;      --ui-ok-soft: rgba(47,227,167,.14);
  --ui-warn: #fbbf24;    --ui-warn-soft: rgba(251,191,36,.14);
  --ui-danger: #ff5c7a;  --ui-danger-soft: rgba(255,92,122,.16);
  --ui-info: #60a5fa;    --ui-info-soft: rgba(96,165,250,.14);
  --ui-neutro: #8b9bb4;  --ui-neutro-soft: rgba(139,155,180,.14);
  --ui-on-status: #04111a;

  --ui-chart-1: #22d3ee; --ui-chart-2: #a78bfa; --ui-chart-3: #2fe3a7; --ui-chart-4: #f472b6;
  --ui-chart-5: #fbbf24; --ui-chart-6: #60a5fa; --ui-chart-7: #fb923c; --ui-chart-8: #8b9bb4;
  --ui-chart-text: #8b9bb4;
  --ui-chart-grid: rgba(139,155,180,.12);
  --ui-tooltip-bg: rgba(4,8,16,.94); --ui-tooltip-text: #e6f1ff; --ui-tooltip-border: rgba(34,211,238,.4);

  --ui-th-bg: #0f1828; --ui-th-text: #8b9bb4;
  --ui-row-hover: rgba(34,211,238,.07); --ui-zebra: rgba(255,255,255,.02); --ui-row-sel: rgba(34,211,238,.16);
  --ui-topbar-bg: rgba(13,19,31,.72); --ui-topbar-text: #e6f1ff; --ui-topbar-muted: #8b9bb4; --ui-topbar-accent: #a78bfa;

  --ui-radius: 8px; --ui-radius-sm: 5px; --ui-radius-lg: 12px;
  --ui-shadow: 0 0 0 1px rgba(34,211,238,.06), 0 12px 40px rgba(0,0,0,.6);
  --ui-shadow-lg: 0 0 24px rgba(34,211,238,.18), 0 24px 60px rgba(0,0,0,.7);
  --ui-glow: 0 0 18px rgba(34,211,238,.25);
  --ui-fundo-app: linear-gradient(rgba(34,211,238,.035) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(34,211,238,.035) 1px, transparent 1px),
                  radial-gradient(900px 500px at 80% -10%, rgba(124,58,237,.22), transparent 60%),
                  radial-gradient(700px 500px at 0% 0%, rgba(34,211,238,.14), transparent 55%);
  --ui-fundo-app-size: 100% 40px, 40px 100%, auto, auto;
  --ui-fundo-login: linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px),
                    radial-gradient(900px 500px at 80% -10%, rgba(124,58,237,.32), transparent 60%),
                    radial-gradient(700px 500px at 0% 0%, rgba(34,211,238,.2), transparent 55%);
  --ui-scroll-thumb: #22304a;
}

/* ---------- 4. Marcas (só o grupo acento) ---------- */
[data-theme="clean"][data-marca="casa-quattro"] {
  --ui-accent: #8a6a1f; --ui-accent-hover: #6f5518; --ui-accent-solid: #8a6a1f; --ui-accent-text: #ffffff;
  --ui-accent-soft: #f3ecd9; --ui-accent-soft-2: #e3d4a8; --ui-accent-2: #c9a24b; --ui-link: #7a5c14;
  --ui-focus: 0 0 0 3px rgba(138,106,31,.3); --ui-chart-1: #8a6a1f; --ui-topbar-bg: #1a1408; --ui-topbar-accent: #e0bd6a;
}
[data-theme="dark"][data-marca="casa-quattro"] {
  --ui-accent: #d4ad55; --ui-accent-hover: #e0bd6a; --ui-accent-solid: #c9a24b; --ui-accent-text: #1a1408;
  --ui-accent-soft: rgba(212,173,85,.16); --ui-accent-soft-2: rgba(212,173,85,.38); --ui-accent-2: #e0bd6a; --ui-link: #e0bd6a;
  --ui-focus: 0 0 0 3px rgba(212,173,85,.35); --ui-chart-1: #d4ad55;
  --ui-fundo-app: radial-gradient(900px 520px at 85% -5%, rgba(212,173,85,.10), transparent 60%);
}
[data-theme="tech"][data-marca="casa-quattro"] {
  --ui-accent: #f2cd6b; --ui-accent-hover: #ffe08a; --ui-accent-solid: #f2cd6b; --ui-accent-text: #1a1408;
  --ui-accent-soft: rgba(242,205,107,.14); --ui-accent-soft-2: rgba(242,205,107,.38); --ui-link: #ffe08a;
  --ui-focus: 0 0 0 3px rgba(242,205,107,.4); --ui-border-glow: rgba(242,205,107,.35);
  --ui-glow: 0 0 18px rgba(242,205,107,.25); --ui-chart-1: #f2cd6b;
}
[data-theme="clean"][data-marca="ultra"] {
  --ui-accent: #0C2C5C; --ui-accent-hover: #0a2349; --ui-accent-solid: #0C2C5C; --ui-accent-2: #B41F2E;
  --ui-accent-soft: #e3e9f3; --ui-accent-soft-2: #c3cfe3; --ui-topbar-bg: #0f2944; --ui-chart-1: #0C2C5C; --ui-chart-2: #B41F2E;
}
[data-theme="dark"][data-marca="ultra"] { --ui-accent: #5a9bea; --ui-accent-hover: #74adf0; --ui-accent-2: #ff8a9b; --ui-chart-1: #5a9bea; }
[data-theme="tech"][data-marca="ultra"] { --ui-accent-2: #ff8a9b; }
[data-theme="clean"][data-marca="lojista"] {
  --ui-accent: #4933D1; --ui-accent-hover: #3b28b0; --ui-accent-solid: #4933D1; --ui-accent-text: #ffffff;
  --ui-accent-soft: #ece8fb; --ui-accent-soft-2: #cfc6f5; --ui-accent-2: #242424; --ui-link: #4933D1;
  --ui-focus: 0 0 0 3px rgba(73,51,209,.28); --ui-chart-1: #4933D1; --ui-topbar-accent: #c4b5fd;
}
[data-theme="dark"][data-marca="lojista"] {
  --ui-accent: #8b7cf6; --ui-accent-hover: #a497fa; --ui-accent-solid: #6d5de6; --ui-accent-soft: rgba(139,124,246,.16);
  --ui-accent-soft-2: rgba(139,124,246,.38); --ui-link: #a497fa; --ui-focus: 0 0 0 3px rgba(139,124,246,.35); --ui-chart-1: #8b7cf6;
}
[data-theme="tech"][data-marca="lojista"] {
  --ui-accent: #a78bfa; --ui-accent-hover: #c4b5fd; --ui-accent-solid: #a78bfa; --ui-accent-text: #0f0a1f; --ui-accent-2: #22d3ee;
  --ui-accent-soft: rgba(167,139,250,.14); --ui-accent-soft-2: rgba(167,139,250,.38); --ui-link: #c4b5fd;
  --ui-focus: 0 0 0 3px rgba(167,139,250,.4); --ui-border-glow: rgba(167,139,250,.35); --ui-glow: 0 0 18px rgba(167,139,250,.25);
  --ui-chart-1: #a78bfa; --ui-chart-2: #22d3ee;
}

/* ---------- 5. Base (só nos três temas da biblioteca; outro valor de data-theme — ex.: "lojista" — fica intocado) ---------- */
html:is([data-theme="clean"], [data-theme="dark"], [data-theme="tech"]) { scrollbar-color: var(--ui-scroll-thumb) var(--ui-scroll-track); }
html:is([data-theme="clean"], [data-theme="dark"], [data-theme="tech"]) body {
  background-color: var(--ui-bg);
  background-image: var(--ui-fundo-app);
  background-size: var(--ui-fundo-app-size);
  background-repeat: repeat;
  background-attachment: fixed;
  color: var(--ui-text);
}
:is([data-theme="clean"], [data-theme="dark"], [data-theme="tech"]) ::selection { background: var(--ui-selection); }
:is([data-theme="clean"], [data-theme="dark"], [data-theme="tech"]) ::-webkit-scrollbar { width: 10px; height: 10px; }
:is([data-theme="clean"], [data-theme="dark"], [data-theme="tech"]) ::-webkit-scrollbar-thumb { background: var(--ui-scroll-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
:is([data-theme="clean"], [data-theme="dark"], [data-theme="tech"]) ::-webkit-scrollbar-track { background: var(--ui-scroll-track); }
:is([data-theme="clean"], [data-theme="dark"], [data-theme="tech"]) select option { background-color: var(--ui-surface); color: var(--ui-text); }
:is([data-theme="clean"], [data-theme="dark"], [data-theme="tech"]) :is(input, select, textarea):focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
:is([data-theme="clean"], [data-theme="dark"], [data-theme="tech"]) code, :is([data-theme="clean"], [data-theme="dark"], [data-theme="tech"]) pre.ui-code { font-family: var(--ui-font-mono); }
:is([data-theme="clean"], [data-theme="dark"], [data-theme="tech"]) pre.ui-code { background: var(--ui-code-bg); color: var(--ui-code-text); border-radius: var(--ui-radius-sm); padding: 10px 12px; }

/* Tech: vidro no cabeçalho e brilho discreto */
[data-theme="tech"] header { background: var(--ui-glass); backdrop-filter: blur(var(--ui-blur)); -webkit-backdrop-filter: blur(var(--ui-blur)); border-bottom-color: var(--ui-border-glow); }
[data-theme="tech"] nav button.active, [data-theme="tech"] .abas button.on, [data-theme="tech"] .tabs button.on { text-shadow: 0 0 12px rgba(34,211,238,.45); }
[data-theme="tech"] .card, [data-theme="tech"] .ui-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--ui-shadow); }
[data-theme="tech"] .btn.primary, [data-theme="tech"] .ui-btn.primario { box-shadow: var(--ui-glow); }

/* ---------- 6. Utilitários (prefixo ui- não colide com nada existente) ---------- */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 18px 20px; }
.ui-glass { background: var(--ui-glass); backdrop-filter: blur(var(--ui-blur)); -webkit-backdrop-filter: blur(var(--ui-blur)); }

.ui-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; background: var(--ui-neutro-soft); color: var(--ui-neutro); border: 1px solid transparent; }
.ui-badge.ok     { background: var(--ui-ok-soft);     color: var(--ui-ok); }
.ui-badge.warn   { background: var(--ui-warn-soft);   color: var(--ui-warn); }
.ui-badge.danger { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-badge.info   { background: var(--ui-info-soft);   color: var(--ui-info); }
.ui-badge.accent { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-badge.solido.ok     { background: var(--ui-ok);     color: var(--ui-on-status); }
.ui-badge.solido.warn   { background: var(--ui-warn);   color: var(--ui-on-status); }
.ui-badge.solido.danger { background: var(--ui-danger); color: var(--ui-on-status); }
.ui-badge.solido.info   { background: var(--ui-info);   color: var(--ui-on-status); }

.ui-txt-ok { color: var(--ui-ok) !important; } .ui-txt-warn { color: var(--ui-warn) !important; } .ui-txt-danger { color: var(--ui-danger) !important; }
.ui-txt-info { color: var(--ui-info) !important; } .ui-txt-muted { color: var(--ui-muted) !important; } .ui-txt-accent { color: var(--ui-accent) !important; }
.ui-txt-2 { color: var(--ui-text-2) !important; }
.ui-bg-ok-soft { background: var(--ui-ok-soft) !important; } .ui-bg-warn-soft { background: var(--ui-warn-soft) !important; }
.ui-bg-danger-soft { background: var(--ui-danger-soft) !important; } .ui-bg-info-soft { background: var(--ui-info-soft) !important; }
.ui-bg-accent-soft { background: var(--ui-accent-soft) !important; }

.ui-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border); background: var(--ui-surface2); color: var(--ui-text); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; transition: border-color var(--ui-transicao), background var(--ui-transicao), color var(--ui-transicao); }
.ui-btn:hover { border-color: var(--ui-accent); }
.ui-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-btn:disabled { opacity: .5; cursor: default; }
.ui-btn.primario { background: var(--ui-accent-solid); border-color: var(--ui-accent-solid); color: var(--ui-accent-text); }
.ui-btn.primario:hover { filter: brightness(1.08); }
.ui-btn.fantasma { background: transparent; }
.ui-btn.perigo { color: var(--ui-danger); border-color: var(--ui-danger-soft); background: var(--ui-danger-soft); }
.ui-btn.xs { padding: 4px 9px; font-size: 12px; }

.ui-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-tabela th { background: var(--ui-th-bg); color: var(--ui-th-text); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--ui-border); position: sticky; top: 0; }
.ui-tabela td { padding: 7px 10px; border-bottom: 1px solid var(--ui-border); vertical-align: middle; }
.ui-tabela tbody tr:hover td { background: var(--ui-row-hover); }
.ui-tabela.zebra tbody tr:nth-child(even) td { background: var(--ui-zebra); }
.ui-tabela tr.sel td { background: var(--ui-row-sel); }
.ui-tabela td.num, .ui-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }

.ui-input, [data-theme] .ui-input { background: var(--ui-surface2); border: 1px solid var(--ui-border); color: var(--ui-text); border-radius: var(--ui-radius-sm); padding: 8px 10px; font: inherit; font-size: 13px; }

.perm-hidden { display: none !important; }

/* Botão ⚙ do header */
.ui-btn-config { white-space: nowrap; }
.ui-btn-config:hover { color: var(--ui-accent); }

/* ---------- 7. Modal Configurações ---------- */
.ui-modal-bg { position: fixed; inset: 0; background: rgba(2,8,14,.62); z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.ui-modal-bg[hidden] { display: none; }
.ui-modal { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-lg); width: 1040px; max-width: 100%; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; font-family: var(--ui-font); font-size: 14px; text-align: left; }
[data-theme="tech"] .ui-modal { background: var(--ui-glass); backdrop-filter: blur(var(--ui-blur)); -webkit-backdrop-filter: blur(var(--ui-blur)); border-color: var(--ui-border-glow); }
.ui-modal-cabecalho { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ui-border); }
.ui-modal-cabecalho h2 { margin: 0; font-size: 17px; font-weight: 700; font-family: var(--ui-font-titulo); color: var(--ui-text); }
.ui-modal-cabecalho .ui-modal-sub { font-size: 12px; color: var(--ui-muted); }
.ui-modal-fechar { margin-left: auto; background: none; border: 1px solid var(--ui-border); color: var(--ui-muted); border-radius: var(--ui-radius-sm); width: 32px; height: 32px; cursor: pointer; font-size: 16px; line-height: 1; }
.ui-modal-fechar:hover { color: var(--ui-text); border-color: var(--ui-accent); }
.ui-modal-wrap { display: flex; min-height: 0; flex: 1; }
.ui-modal-menu { width: 220px; flex: none; border-right: 1px solid var(--ui-border); padding: 12px; display: flex; flex-direction: column; gap: 4px; background: var(--ui-surface2); }
.ui-modal-menu button { text-align: left; background: none; border: none; color: var(--ui-text-2); padding: 10px 12px; border-radius: var(--ui-radius-sm); cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px; display: flex; gap: 8px; align-items: center; }
.ui-modal-menu button:hover { background: var(--ui-surface-hover); color: var(--ui-text); }
.ui-modal-menu button.ativo { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-modal-corpo { flex: 1; overflow: auto; padding: 20px 24px 28px; min-height: 320px; }
.ui-modal-corpo h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ui-text); }
.ui-modal-corpo .ui-ajuda { color: var(--ui-muted); font-size: 12.5px; margin: 0 0 16px; line-height: 1.5; }
.ui-modal-corpo .ui-secao + .ui-secao { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ui-border); }
@media (max-width: 720px) {
  .ui-modal-wrap { flex-direction: column; }
  .ui-modal-menu { width: auto; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--ui-border); }
}

/* ---------- 8. Seletor de tema ---------- */
.ui-tema-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ui-tema-card { background: var(--ui-surface); border: 2px solid var(--ui-border); border-radius: var(--ui-radius); padding: 10px; cursor: pointer; text-align: left; color: var(--ui-text); font: inherit; transition: border-color var(--ui-transicao), box-shadow var(--ui-transicao); }
.ui-tema-card:hover { border-color: var(--ui-accent-hover); }
.ui-tema-card[aria-pressed="true"] { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.ui-prev { height: 96px; border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border); background-color: var(--ui-bg); background-image: var(--ui-fundo-app); background-size: var(--ui-fundo-app-size); overflow: hidden; position: relative; color: var(--ui-text); }
.ui-prev-top { height: 18px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.ui-prev-top i { display: block; width: 22px; height: 4px; border-radius: 2px; background: var(--ui-accent); }
.ui-prev-top i + i { background: var(--ui-muted); opacity: .5; width: 14px; }
.ui-prev-card { position: absolute; left: 8px; right: 8px; top: 26px; bottom: 8px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 4px; padding: 7px 8px; box-shadow: var(--ui-shadow); }
.ui-prev-linha { height: 5px; border-radius: 3px; background: var(--ui-text); opacity: .75; margin-bottom: 5px; width: 70%; }
.ui-prev-linha.curta { width: 45%; background: var(--ui-muted); opacity: .7; }
.ui-prev-badge { position: absolute; right: 8px; bottom: 6px; font-size: 8px; padding: 1px 6px; border-radius: 999px; background: var(--ui-ok-soft); color: var(--ui-ok); font-weight: 700; }
.ui-prev-btn { position: absolute; left: 8px; bottom: 6px; width: 28px; height: 9px; border-radius: 3px; background: var(--ui-accent-solid); }
.ui-tema-nome { font-weight: 700; margin: 10px 0 2px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ui-tema-nome .ui-check { margin-left: auto; color: var(--ui-accent); font-size: 14px; visibility: hidden; }
.ui-tema-card[aria-pressed="true"] .ui-check { visibility: visible; }
.ui-tema-desc { font-size: 12px; color: var(--ui-muted); line-height: 1.4; }
.ui-tema-rodape { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 14px; font-size: 12.5px; color: var(--ui-muted); }
.ui-tema-rodape a { color: var(--ui-link); cursor: pointer; text-decoration: underline; }
.ui-tema-rodape .ui-btn { margin-left: auto; }
.ui-tema-status { font-size: 12px; color: var(--ui-ok); }
.ui-tema-status.erro { color: var(--ui-danger); }
.ui-tema-compacto { display: inline-flex; gap: 8px; align-items: center; }
.ui-tema-compacto .ui-tema-rotulo { font-size: 11px; color: var(--ui-muted); margin-right: 2px; }
.ui-tema-compacto button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ui-border); cursor: pointer; padding: 0; background: var(--ui-bg); position: relative; overflow: hidden; }
.ui-tema-compacto button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--ui-surface) 50%, var(--ui-accent) 50%); }
.ui-tema-compacto button[aria-pressed="true"] { border-color: var(--ui-accent); box-shadow: var(--ui-focus); }

/* ---------- 9. Matriz de perfis (Fase 2) ---------- */
.perm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.perm-table th, .perm-table td { padding: 7px 10px; border-bottom: 1px solid var(--ui-border); text-align: center; }
.perm-table th:first-child, .perm-table td:first-child { text-align: left; }
.perm-table thead th { background: var(--ui-th-bg); color: var(--ui-th-text); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; }
.perm-table tr.secao td { background: var(--ui-surface2); font-weight: 700; text-align: left; color: var(--ui-text-2); }
.perm-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ui-accent); cursor: pointer; }
.perm-table input[type=checkbox]:disabled { cursor: default; opacity: .55; }
.perm-table .so-admin { color: var(--ui-muted); font-size: 11px; }
.perm-table thead th div { line-height: 1.25; }
.perm-table .ui-perf-acoes { display: inline-flex; gap: 2px; margin-top: 3px; }
.ui-perf-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ui-perf-barra .ui-perf-esp { flex: 1; }
.ui-perf-wrap { overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); max-height: 60vh; }
.ui-usr-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ui-usr-form .ui-input { flex: 1; min-width: 150px; }
.ui-input.xs { padding: 4px 8px; font-size: 12.5px; }
.ui-usr-tab code { background: var(--ui-surface2); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.ui-usr-tab .ui-usr-acoes { display: flex; gap: 4px; flex-wrap: wrap; }
.ui-usr-tab tr.ui-usr-bloq td { opacity: .6; }
.so-admin { color: var(--ui-muted); font-size: 11px; }

/* ---------- 10. Impressão: sempre Clean, sem fundo ---------- */
@media print {
  [data-theme] {
    color-scheme: light;
    --ui-bg: #ffffff; --ui-surface: #ffffff; --ui-surface2: #f0f3f7; --ui-surface-hover: #e6ecf3;
    --ui-border: #d9e1ea; --ui-border-strong: #b9c6d4; --ui-text: #15202b; --ui-text-2: #3c4a59; --ui-muted: #5b6b7c;
    --ui-accent: #1C3D5E; --ui-accent-solid: #1C3D5E; --ui-accent-text: #ffffff; --ui-accent-soft: #e4ecf5;
    --ui-ok: #1f7a4d; --ui-ok-soft: #dff5e8; --ui-warn: #9a5b00; --ui-warn-soft: #fff1d6; --ui-danger: #B01E2E; --ui-danger-soft: #fde3e6; --ui-info: #1d5a9a; --ui-info-soft: #e1edf9;
    --ui-th-bg: #f0f3f7; --ui-th-text: #3c4a59; --ui-row-hover: transparent; --ui-zebra: #f8fafc;
    --ui-fundo-app: none; --ui-fundo-app-size: auto; --ui-shadow: none; --ui-shadow-lg: none; --ui-glow: none; --ui-blur: 0px;
  }
  .ui-no-print, .ui-btn-config, .ui-modal-bg { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { [data-theme] { --ui-glow: none; --ui-transicao: 0s; } }