/* ============================================================
   LAYOUT-OS.CSS — adaptação visual do projeto OS para o FLUXO
   Somente apresentação. Não altera IDs, conteúdo, rotas ou regras.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --os-brand-50: #eef5ff;
  --os-brand-100: #dbeafe;
  --os-brand-200: #bfdbfe;
  --os-brand-300: #93c5fd;
  --os-brand-400: #60a5fa;
  --os-brand-500: #3b82f6;
  --os-brand-600: #2563eb;
  --os-brand-700: #1d4ed8;
  --os-brand-800: #173d82;
  --os-brand-900: #10213f;
  --os-bg: #f5f7fb;
  --os-bg-soft: #f8fafc;
  --os-surface: #ffffff;
  --os-surface-2: #f8fafc;
  --os-text: #172033;
  --os-text-soft: #344054;
  --os-muted: #667085;
  --os-muted-2: #98a2b3;
  --os-border: #e2e8f0;
  --os-border-strong: #cbd5e1;
  --os-success: #16a34a;
  --os-warning: #d97706;
  --os-danger: #dc2626;
  --os-cyan: #0891b2;
  --os-radius-xs: 7px;
  --os-radius-sm: 10px;
  --os-radius-md: 14px;
  --os-radius-lg: 18px;
  --os-shadow-xs: 0 1px 2px rgba(16,24,40,.04);
  --os-shadow-sm: 0 4px 14px rgba(16,24,40,.06);
  --os-shadow-md: 0 12px 32px rgba(16,24,40,.09), 0 3px 8px rgba(16,24,40,.04);
  --os-shadow-lg: 0 24px 64px rgba(16,24,40,.16);

  /* Compatibilidade com os nomes usados pelo projeto FLUXO. */
  --verde-900: var(--os-brand-900);
  --verde-800: var(--os-brand-800);
  --verde-700: var(--os-brand-700);
  --verde-600: var(--os-brand-600);
  --verde-500: var(--os-brand-500);
  --verde-400: var(--os-brand-400);
  --verde-300: var(--os-brand-300);
  --verde-200: var(--os-brand-200);
  --verde-100: var(--os-brand-100);
  --verde-50: var(--os-brand-50);
  --terra-800: #3b4354;
  --terra-600: #596579;
  --terra-400: #7c8aa1;
  --terra-200: #d0d5dd;
  --terra-100: #f2f4f7;
  --dourado-600: #d97706;
  --dourado-400: #f59e0b;
  --dourado-100: #fffbeb;
  --cinza-700: #344054;
  --cinza-500: #667085;
  --cinza-300: #d0d5dd;
  --cinza-100: #f2f4f7;
  --cinza-50: #f9fafb;
  --branco: #fff;
  --perigo: var(--os-danger);
  --perigo-suave: #fef2f2;
  --alerta: var(--os-warning);
  --alerta-suave: #fffbeb;
  --sucesso: var(--os-success);
  --sucesso-suave: #f0fdf4;
  --sombra-sm: var(--os-shadow-sm);
  --sombra-md: var(--os-shadow-md);
  --sombra-lg: var(--os-shadow-lg);
  --raio-sm: var(--os-radius-xs);
  --raio-md: var(--os-radius-sm);
  --raio-lg: var(--os-radius-md);
  --raio-xl: var(--os-radius-lg);
}

html { min-height: 100%; background: var(--os-bg); }
body.layout-os-aplicado,
body {
  background:
    radial-gradient(circle at 100% 0, rgba(47,116,245,.07), transparent 26rem),
    var(--os-bg) !important;
  color: var(--os-text);
  font-family: 'DM Sans','Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Navegação superior — mantém links, permissões e destinos originais. */
.nav {
  min-height: 68px !important;
  height: auto !important;
  padding: 9px clamp(14px,2vw,28px) !important;
  gap: 16px !important;
  background: linear-gradient(105deg, #10213f 0%, #173d82 50%, #1f5dde 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(16,33,63,.18) !important;
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
}
.nav::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  pointer-events: none;
}
.nav-brand {
  min-width: max-content;
  margin-right: 4px !important;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  font-size: 16px !important;
  letter-spacing: .03em !important;
}
.nav-brand span { color: #fff !important; }
.nav-brand::after {
  content: 'ABASTECIMENTO';
  display: block;
  margin-left: 2px;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.58);
}
.nav-links {
  min-width: 0;
  gap: 3px !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display:none; }
.nav-link {
  min-height: 40px;
  padding: 8px 11px !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.73) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid transparent;
}
.nav-link:hover {
  color:#fff !important;
  background:rgba(255,255,255,.11) !important;
  border-color:rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.nav-link.ativo,
.nav-link.active {
  color:#fff !important;
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.18);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 6px 16px rgba(5,20,50,.14);
}
.nav-link .icone { font-size: 15px !important; }
.os-nav-toggle {
  display:none;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:19px;
  cursor:pointer;
}

/* Conteúdo e títulos. */
.container,
main.main,
main:not(.login-main) {
  width: min(100%, 1440px) !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
}
.container { padding: clamp(18px,2.4vw,32px) clamp(14px,2.2vw,28px) !important; }
.pagina-header,
.screen-header,
.main-head {
  position: relative;
  margin-bottom: 22px !important;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--os-border);
}
.pagina-header h1,
.screen-header h2,
.main-head h1,
.header h1,
.topbar-title {
  color: var(--os-text) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em;
}
.pagina-header h1 { font-size: clamp(22px,2vw,30px) !important; }
.pagina-header p,
.screen-header p,
.main-head .sub,
.topbar-sub { color: var(--os-muted) !important; }

/* Cards e painéis — sem trocar o conteúdo interno. */
.card,
.stat-box,
.stat-card,
.kpi,
.resumo-card,
.acao-card,
.estado-card,
.section,
.filter-wrap,
.tbl-wrap,
.tabela-wrap,
.login-card,
.modal,
.modal-box,
.panel {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid var(--os-border) !important;
  border-radius: var(--os-radius-md) !important;
  box-shadow: var(--os-shadow-sm) !important;
}
.card {
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--os-border-strong) !important; box-shadow: var(--os-shadow-md) !important; }
.card-header,
.card-head {
  background: linear-gradient(180deg,#fff 0%,#fbfcfe 100%) !important;
  border-bottom: 1px solid var(--os-border) !important;
}
.card-header { padding: 16px 20px !important; }
.card-body { padding: 20px !important; }
.card-title,
.card-titulo {
  color: var(--os-text) !important;
  font-weight: 750 !important;
  letter-spacing: -.012em;
}
.card-sub { color: var(--os-muted) !important; }

/* KPIs do painel. */
.stats-grid,
.stats-row,
.kpi-row { gap: 14px !important; }
.stat-box,
.stat-card,
.kpi {
  position:relative;
  overflow:hidden;
  padding: 18px !important;
  min-height: 112px;
}
.stat-box::before,
.stat-card::before,
.kpi::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--os-brand-400),var(--os-brand-700));
}
.stat-label,
.kpi-label,
.resumo-label {
  color:var(--os-muted) !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.055em !important;
}
.stat-val,
.stat-value,
.kpi-value,
.resumo-valor {
  color:var(--os-text) !important;
  font-weight:800 !important;
  letter-spacing:-.035em;
}
.stat-sub,
.kpi-foot,
.resumo-sub { color:var(--os-muted) !important; }

/* Abas. */
.tabs,
.app-tabs,
.plan-tabs {
  padding: 5px !important;
  gap: 4px !important;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid var(--os-border) !important;
  border-radius: 13px !important;
  box-shadow: var(--os-shadow-xs) !important;
}
.tab-btn,
.app-tab,
.plan-tabs button {
  min-height: 38px;
  border-radius: 9px !important;
  color: var(--os-muted) !important;
  font-weight: 650 !important;
}
.tab-btn:hover,
.app-tab:hover,
.plan-tabs button:hover { background:var(--os-brand-50) !important; color:var(--os-brand-700) !important; }
.tab-btn.ativo,
.tab-btn.active,
.app-tab.active,
.plan-tabs button.active {
  background:var(--os-brand-600) !important;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(37,99,235,.20) !important;
}

/* Formulários e filtros. */
.form-grid { gap:14px !important; }
.form-campo label,
.field label,
.lbl,
.fil-label,
.campo label,
.control label {
  color:var(--os-text-soft) !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.045em !important;
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.fil-sel,
.fil-inp,
.cfg-input,
.cfg-select {
  min-height: 40px;
  color:var(--os-text) !important;
  background:#fff !important;
  border:1px solid var(--os-border-strong) !important;
  border-radius:9px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.02);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.fil-sel:focus,
.fil-inp:focus {
  outline:none !important;
  border-color:var(--os-brand-500) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.14) !important;
}
input::placeholder, textarea::placeholder { color:var(--os-muted-2) !important; }
.filtros,
.filter-wrap {
  padding:16px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--os-border) !important;
  border-radius:var(--os-radius-md) !important;
  box-shadow:var(--os-shadow-xs) !important;
}
.filter-row { gap:12px !important; }

/* Botões. */
.btn,
.act-btn,
.nav-btn,
.action-btn,
.fp-btn,
.btn-batch,
.acao-btn {
  border-radius:9px !important;
  font-family:inherit !important;
  font-weight:650 !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease !important;
}
.btn:hover,
.act-btn:hover,
.btn-batch:hover,
.acao-btn:hover { transform:translateY(-1px); }
.btn-primario,
.btn-primary,
.btn-pri,
.act-btn:not(.outline),
.btn-batch-upd {
  background:linear-gradient(135deg,var(--os-brand-600),var(--os-brand-700)) !important;
  color:#fff !important;
  border-color:var(--os-brand-600) !important;
  box-shadow:0 5px 14px rgba(37,99,235,.18) !important;
}
.btn-primario:hover,
.btn-primary:hover,
.btn-pri:hover { box-shadow:0 8px 20px rgba(37,99,235,.25) !important; }
.btn-secundario,
.btn-outline,
.btn-ghost,
.act-btn.outline {
  background:#fff !important;
  color:var(--os-text-soft) !important;
  border:1px solid var(--os-border-strong) !important;
  box-shadow:var(--os-shadow-xs) !important;
}
.btn-secundario:hover,
.btn-outline:hover,
.btn-ghost:hover,
.act-btn.outline:hover {
  color:var(--os-brand-700) !important;
  border-color:var(--os-brand-300) !important;
  background:var(--os-brand-50) !important;
}
.btn-success { background:var(--os-success) !important;color:#fff !important; }
.btn-danger { background:var(--os-danger) !important;color:#fff !important; }

/* Tabelas. */
.tabela-wrap,
.tbl-wrap,
.table-wrap,
[style*="overflow-x:auto"]:has(> table) {
  overflow:auto !important;
  border:1px solid var(--os-border) !important;
  border-radius:12px !important;
  background:#fff;
}
table { background:#fff; }
thead th,
th {
  background:#f8fafc !important;
  color:#475467 !important;
  border-bottom:1px solid var(--os-border-strong) !important;
  font-size:10px !important;
  font-weight:750 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase;
}
td {
  color:var(--os-text-soft) !important;
  border-bottom:1px solid #edf1f6 !important;
}
tbody tr:hover td { background:#f8fbff !important; }

/* Badges e mensagens. */
.badge,
.pill,
.chip,
.card-badge,
.fonte-badge {
  border-radius:999px !important;
  font-weight:700 !important;
  letter-spacing:.01em;
}
.badge-blue { background:var(--os-brand-50) !important;color:var(--os-brand-700) !important;border-color:var(--os-brand-200) !important; }
.badge-green,.badge-ativo,.pill-ok { background:#ecfdf3 !important;color:#067647 !important;border-color:#abefc6 !important; }
.badge-yellow { background:#fffaeb !important;color:#b54708 !important;border-color:#fedf89 !important; }
.badge-red,.badge-inativo { background:#fef3f2 !important;color:#b42318 !important;border-color:#fecdca !important; }
.alerta,
.notice,
.info-box,
.err-banner { border-radius:10px !important; }

/* Modais. */
.modal-overlay,
.modal-backdrop,
[id^="modal-"][style*="position:fixed"] { backdrop-filter:blur(5px); }
.modal,
.modal-box,
.modal-content,
[id^="modal-"] > div {
  border-radius:16px !important;
  box-shadow:var(--os-shadow-lg) !important;
}
.modal-header { border-bottom-color:var(--os-border) !important; }
.modal-footer { border-top-color:var(--os-border) !important; }

/* Login do painel principal. */
#screen-login {
  background:
    radial-gradient(circle at 20% 20%,rgba(96,165,250,.25),transparent 24rem),
    radial-gradient(circle at 80% 90%,rgba(8,145,178,.15),transparent 24rem),
    linear-gradient(135deg,#0b1528 0%,#10213f 46%,#1f5dde 100%) !important;
}
.login-logo-title span { color:#93c5fd !important; }
.login-logo-sub { color:rgba(255,255,255,.68) !important; }
.login-card { border:1px solid rgba(255,255,255,.75) !important; }

/* Dashboard customizado — apenas troca o sistema visual. */
body:has(.topbar) {
  --bg:var(--os-bg);
  --surface:var(--os-surface);
  --surface-2:var(--os-surface);
  --surface-3:var(--os-bg-soft);
  --text:var(--os-text);
  --text-2:var(--os-text-soft);
  --text-3:var(--os-muted);
  --border:var(--os-border);
  --border-2:var(--os-border-strong);
  --green:var(--os-brand-600);
  --accent:var(--os-brand-600);
  --blue:var(--os-brand-500);
}
.topbar {
  background:#fff !important;
  border-bottom:1px solid var(--os-border) !important;
  box-shadow:0 4px 16px rgba(16,24,40,.05) !important;
}
.topbar-inner { max-width:1440px !important; margin-inline:auto !important; }
.logo-mark { box-shadow:0 5px 14px rgba(37,99,235,.18); }
.main { padding:24px clamp(14px,2.2vw,28px) 40px !important; }
.sec-h { border-bottom-color:var(--os-border) !important; }
.chart-wrap { background:linear-gradient(180deg,#fff,#fbfcfe); border-radius:12px; }

/* Dispositivos: transforma a barra lateral em navegação horizontal. */
.app-layout { display:block !important; min-height:auto !important; }
.app-layout > .sidebar {
  position:static !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  margin:18px auto 0 !important;
  padding:8px !important;
  max-width:1440px;
  display:flex !important;
  align-items:center;
  gap:6px;
  overflow-x:auto !important;
  background:#fff !important;
  color:var(--os-text) !important;
  border:1px solid var(--os-border) !important;
  border-radius:13px !important;
  box-shadow:var(--os-shadow-xs) !important;
}
.app-layout > .sidebar .sidebar-title { display:none !important; }
.app-layout > .sidebar .nav-btn {
  width:auto !important;
  min-width:max-content;
  margin:0 !important;
  padding:9px 13px !important;
  background:transparent !important;
  color:var(--os-muted) !important;
  border:0 !important;
}
.app-layout > .sidebar .nav-btn.active {
  background:var(--os-brand-600) !important;
  color:#fff !important;
}
.app-layout > .sidebar .nav-btn small { color:inherit !important;opacity:.72; }
.app-layout > .sidebar .sidebar-back { margin-left:auto !important; border:0 !important; padding:0 !important; }
.notif-main { margin:0 auto !important; width:min(100%,1440px) !important; padding:18px clamp(14px,2.2vw,28px) 32px !important; }
.analise-content { padding:0 !important; }

/* Simulador: menu que era lateral vira faixa superior. */
.app > .sidebar {
  position:static !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  padding:10px clamp(14px,2.2vw,28px) !important;
  background:linear-gradient(105deg,#10213f,#173d82,#1f5dde) !important;
  border:0 !important;
  box-shadow:0 8px 24px rgba(16,33,63,.15);
}
.app > .sidebar > * { margin:0 !important; }
.app > .sidebar .nav-btn,
.app > .sidebar button,
.app > .sidebar a {
  width:auto !important;
  min-width:max-content;
}
.app > .main { margin-left:0 !important; width:100% !important; max-width:1440px; margin-inline:auto !important; }

/* Configurações: blocos mais legíveis. */
.cfg-secao,
.cfg-item,
.grupo,
.grupo-head,
.secao {
  border-color:var(--os-border) !important;
}
.cfg-item { background:#fff !important; }

/* Scrollbars discretas. */
* { scrollbar-color:#cbd5e1 transparent; scrollbar-width:thin; }
*::-webkit-scrollbar { width:9px;height:9px; }
*::-webkit-scrollbar-thumb { background:#cbd5e1;border:2px solid transparent;background-clip:padding-box;border-radius:999px; }
*::-webkit-scrollbar-thumb:hover { background:#94a3b8;border:2px solid transparent;background-clip:padding-box; }

@media (max-width: 1100px) {
  .nav { flex-wrap:wrap; }
  .os-nav-toggle { display:inline-flex; margin-left:auto; }
  .nav-links {
    display:none !important;
    width:100%;
    order:10;
    overflow:visible;
    flex-wrap:wrap;
    padding:8px 0 3px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .nav.os-nav-open .nav-links { display:flex !important; }
  .nav-link { flex:1 1 150px; justify-content:flex-start; }
  .nav > div[style*="margin-left:auto"] { margin-left:0 !important; }
  .topbar { flex-wrap:wrap !important; height:auto !important; min-height:68px; padding:10px 16px !important; }
  .topbar-right,.topbar-actions { flex-wrap:wrap !important; }
}

@media (max-width: 760px) {
  body { font-size:13px !important; }
  .container,.main,.notif-main { padding-inline:12px !important; }
  .pagina-header,.screen-header,.main-head { align-items:flex-start !important; }
  .stats-row,.stats-grid,.kpi-row { grid-template-columns:1fr !important; }
  .grid-2,.grid-3,.row,.row.c3 { grid-template-columns:1fr !important; }
  .card-body,.card { padding:15px !important; }
  .card-header,.card-head { padding:14px 15px !important; }
  .filtros,.filter-wrap { padding:12px !important; }
  .form-acoes,.main-head-acts,.topbar-actions { width:100%; }
  .form-acoes .btn,.main-head-acts .btn { flex:1;justify-content:center; }
  .app-layout > .sidebar { margin:12px !important; }
  .app-layout > .sidebar .sidebar-back { margin-left:0 !important; }
  .nav-brand::after { display:none; }
  .modal,.modal-box { width:calc(100vw - 20px) !important; max-height:92vh !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration:.001ms !important;animation-duration:.001ms !important; }
}

/* ============================================================
   MODO COMPACTO — mais conteúdo visível em notebook/desktop.
   Mantém o conteúdo e a lógica; reduz somente dimensões visuais.
   ============================================================ */
@media (min-width: 761px) {
  body.layout-os-aplicado,
  body { font-size: 13px !important; line-height: 1.42 !important; }

  .nav {
    min-height: 52px !important;
    padding: 5px clamp(10px,1.4vw,20px) !important;
    gap: 9px !important;
    box-shadow: 0 6px 18px rgba(16,33,63,.15) !important;
  }
  .nav-brand {
    margin-right: 0 !important;
    padding: 3px 7px 3px 3px !important;
    font-size: 15px !important;
    gap: 7px !important;
    border-radius: 9px !important;
  }
  .nav-brand::after { font-size: 8px !important; letter-spacing: .10em !important; }
  .nav-links { gap: 1px !important; }
  .nav-link {
    min-height: 34px !important;
    padding: 6px 9px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    gap: 5px !important;
  }
  .nav-link .icone { font-size: 13px !important; }

  .container {
    padding: 16px clamp(12px,1.7vw,22px) 24px !important;
  }
  .container,
  main.main,
  main:not(.login-main) {
    width: min(100%, 1500px) !important;
    max-width: 1500px !important;
  }
  .pagina-header,
  .screen-header,
  .main-head {
    margin-bottom: 14px !important;
    padding: 0 0 11px !important;
    gap: 10px !important;
  }
  .pagina-header h1 { font-size: clamp(19px,1.55vw,24px) !important; gap: 7px !important; }
  .pagina-header p,
  .screen-header p,
  .main-head .sub,
  .topbar-sub { font-size: 11.5px !important; margin-top: 1px !important; }

  .tabs,
  .app-tabs,
  .plan-tabs {
    padding: 4px !important;
    gap: 2px !important;
    margin-bottom: 14px !important;
    border-radius: 11px !important;
  }
  .tab-btn,
  .app-tab,
  .plan-tabs button {
    min-height: 32px !important;
    padding: 6px 11px !important;
    border-radius: 7px !important;
    font-size: 11.5px !important;
    gap: 5px !important;
  }
  .tab-btn .icone { font-size: 12px !important; }

  .card { border-radius: 11px !important; }
  .card-header,
  .card-head {
    min-height: 44px !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .card-body { padding: 14px !important; }
  .card-title,
  .card-titulo { font-size: 13px !important; gap: 6px !important; }
  .card-sub { font-size: 10.5px !important; }

  .stats-grid,
  .stats-row,
  .kpi-row {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .stat-box,
  .stat-card,
  .kpi {
    min-height: 82px !important;
    padding: 11px 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }
  .stat-icone {
    width: 40px !important;
    height: 40px !important;
    border-radius: 9px !important;
    font-size: 18px !important;
  }
  .stat-info p,
  .stat-label,
  .kpi-label,
  .resumo-label { font-size: 9.5px !important; line-height: 1.3 !important; }
  .stat-info h3,
  .stat-val,
  .stat-value,
  .kpi-value,
  .resumo-valor { font-size: 18px !important; line-height: 1.08 !important; }
  .stat-info span,
  .stat-sub,
  .kpi-foot,
  .resumo-sub { font-size: 9.5px !important; }
  .nivel-bar-wrap { height: 7px !important; margin-block: 3px !important; }

  #grid-tanques-nivel {
    grid-template-columns: repeat(auto-fill, minmax(188px, 205px)) !important;
    gap: 10px !important;
    justify-content: start !important;
    margin-bottom: 14px !important;
  }
  #grid-tanques-nivel .stat-card { min-height: 90px !important; }

  .form-grid { gap: 10px !important; margin-bottom: 13px !important; }
  .form-campo label,
  .field label,
  .lbl,
  .fil-label,
  .campo label,
  .control label {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .fil-sel,
  .fil-inp,
  .cfg-input,
  .cfg-select {
    min-height: 34px !important;
    padding: 6px 9px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
  }
  textarea { min-height: 70px !important; }
  .filtros,
  .filter-wrap { padding: 11px !important; border-radius: 10px !important; }
  .filter-row { gap: 8px !important; }

  .btn,
  .act-btn,
  .nav-btn,
  .action-btn,
  .fp-btn,
  .btn-batch,
  .acao-btn {
    min-height: 32px !important;
    padding: 6px 10px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    gap: 5px !important;
  }
  .btn-sm { min-height: 28px !important; padding: 5px 9px !important; font-size: 10.5px !important; }

  thead th,
  th { padding: 7px 9px !important; font-size: 9px !important; }
  td { padding: 7px 9px !important; font-size: 11.5px !important; }
  .tabela-wrap,
  .tbl-wrap,
  .table-wrap,
  [style*="overflow-x:auto"]:has(> table) { border-radius: 9px !important; }

  .badge,
  .pill,
  .chip,
  .card-badge,
  .fonte-badge { padding: 3px 7px !important; font-size: 9.5px !important; }
  .alerta,
  .notice,
  .info-box,
  .err-banner { padding: 9px 12px !important; margin-bottom: 10px !important; font-size: 11.5px !important; }

  .modal-header,
  .modal-footer { padding: 12px 16px !important; }
  .modal-body { padding: 14px 16px !important; }

  .topbar { min-height: 54px !important; padding-block: 6px !important; }
  .main { padding: 16px clamp(12px,1.7vw,22px) 28px !important; }
  .notif-main { padding: 14px clamp(12px,1.7vw,22px) 24px !important; }
  .app-layout > .sidebar {
    margin: 12px auto 0 !important;
    padding: 5px !important;
    gap: 3px !important;
    border-radius: 10px !important;
  }
  .app-layout > .sidebar .nav-btn { padding: 6px 10px !important; min-height: 32px !important; }
  .app > .sidebar { padding: 7px clamp(12px,1.7vw,22px) !important; gap: 4px !important; }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .nav-link { padding-inline: 7px !important; font-size: 11px !important; }
  .nav-brand::after { display:none !important; }
  #grid-tanques-nivel { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important; }
}

/* ============================================================
   PALETA GLOBAL — 5 temas persistentes em todas as páginas
   A preferência é gravada pelo layout-os.js em localStorage.
   ============================================================ */
:root,
html[data-os-theme="blue"] {
  color-scheme: light;
  --os-nav-start: #10213f;
  --os-nav-mid: #173d82;
  --os-nav-end: #1f5dde;
  --os-page-glow: rgba(47,116,245,.075);
  --os-surface-alpha: rgba(255,255,255,.97);
  --os-surface-soft-alpha: rgba(255,255,255,.95);
  --os-card-head-start: #ffffff;
  --os-card-head-end: #fbfcfe;
  --os-table-head: #f8fafc;
  --os-row-hover: #f8fbff;
  --os-row-border: #edf1f6;
  --os-focus-ring: rgba(59,130,246,.14);
  --os-scrollbar: #cbd5e1;
  --os-scrollbar-hover: #94a3b8;
}

html[data-os-theme="mint"] {
  color-scheme: light;
  --os-brand-50: #ecfdf8;
  --os-brand-100: #d1faee;
  --os-brand-200: #a7f3dd;
  --os-brand-300: #6ee7c7;
  --os-brand-400: #34d3aa;
  --os-brand-500: #14b892;
  --os-brand-600: #0f8f77;
  --os-brand-700: #0f766e;
  --os-brand-800: #0e5c56;
  --os-brand-900: #0b403d;
  --os-bg: #f2f9f8;
  --os-bg-soft: #f7fcfb;
  --os-surface: #ffffff;
  --os-surface-2: #f6faf9;
  --os-text: #16302d;
  --os-text-soft: #2b4b47;
  --os-muted: #607a76;
  --os-muted-2: #8aa19e;
  --os-border: #d8e9e7;
  --os-border-strong: #c2dcd8;
  --os-cyan: #0284c7;
  --os-nav-start: #083c39;
  --os-nav-mid: #0e5c56;
  --os-nav-end: #0f8f77;
  --os-page-glow: rgba(15,143,119,.10);
  --os-surface-alpha: rgba(255,255,255,.97);
  --os-surface-soft-alpha: rgba(255,255,255,.95);
  --os-card-head-start: #ffffff;
  --os-card-head-end: #f7fbfa;
  --os-table-head: #f2f9f8;
  --os-row-hover: #f1fbf8;
  --os-row-border: #e4efed;
  --os-focus-ring: rgba(15,143,119,.16);
  --os-scrollbar: #bfd8d4;
  --os-scrollbar-hover: #86aaa5;
}

html[data-os-theme="violet"] {
  color-scheme: light;
  --os-brand-50: #f5f3ff;
  --os-brand-100: #ede9fe;
  --os-brand-200: #ddd6fe;
  --os-brand-300: #c4b5fd;
  --os-brand-400: #a78bfa;
  --os-brand-500: #8b5cf6;
  --os-brand-600: #7c3aed;
  --os-brand-700: #6d28d9;
  --os-brand-800: #5b21b6;
  --os-brand-900: #3b176d;
  --os-bg: #f8f6fc;
  --os-bg-soft: #fcfbfe;
  --os-surface: #ffffff;
  --os-surface-2: #faf8fd;
  --os-text: #291f3a;
  --os-text-soft: #493d5e;
  --os-muted: #716580;
  --os-muted-2: #9d92aa;
  --os-border: #e7e0ef;
  --os-border-strong: #d7cce5;
  --os-cyan: #db2777;
  --os-nav-start: #32175f;
  --os-nav-mid: #51279a;
  --os-nav-end: #7c3aed;
  --os-page-glow: rgba(124,58,237,.10);
  --os-surface-alpha: rgba(255,255,255,.97);
  --os-surface-soft-alpha: rgba(255,255,255,.95);
  --os-card-head-start: #ffffff;
  --os-card-head-end: #fbf9fe;
  --os-table-head: #f8f5fc;
  --os-row-hover: #faf7ff;
  --os-row-border: #eee8f4;
  --os-focus-ring: rgba(124,58,237,.16);
  --os-scrollbar: #d7cce5;
  --os-scrollbar-hover: #a995bd;
}

html[data-os-theme="dark"] {
  color-scheme: dark;
  --os-brand-50: #172441;
  --os-brand-100: #1d3159;
  --os-brand-200: #24447b;
  --os-brand-300: #3765a8;
  --os-brand-400: #4f83d8;
  --os-brand-500: #60a5fa;
  --os-brand-600: #3b82f6;
  --os-brand-700: #2563eb;
  --os-brand-800: #1d4ed8;
  --os-brand-900: #dbeafe;
  --os-bg: #0c111d;
  --os-bg-soft: #101827;
  --os-surface: #151e2e;
  --os-surface-2: #111a29;
  --os-text: #f1f5f9;
  --os-text-soft: #d7deea;
  --os-muted: #9aa8bc;
  --os-muted-2: #738197;
  --os-border: #273449;
  --os-border-strong: #34425a;
  --os-success: #3bc67a;
  --os-warning: #f2a93b;
  --os-danger: #f97066;
  --os-cyan: #38bdf8;
  --os-shadow-xs: 0 1px 2px rgba(0,0,0,.22);
  --os-shadow-sm: 0 6px 18px rgba(0,0,0,.18);
  --os-shadow-md: 0 18px 42px rgba(0,0,0,.30);
  --os-shadow-lg: 0 28px 74px rgba(0,0,0,.45);
  --os-nav-start: #07101e;
  --os-nav-mid: #102b5b;
  --os-nav-end: #1f5dde;
  --os-page-glow: rgba(47,116,245,.12);
  --os-surface-alpha: rgba(21,30,46,.98);
  --os-surface-soft-alpha: rgba(17,26,41,.96);
  --os-card-head-start: #182235;
  --os-card-head-end: #141d2c;
  --os-table-head: #111a29;
  --os-row-hover: #19263a;
  --os-row-border: #253247;
  --os-focus-ring: rgba(96,165,250,.22);
  --os-scrollbar: #34425a;
  --os-scrollbar-hover: #52627a;
}

html[data-os-theme="graphite"] {
  color-scheme: dark;
  --os-brand-50: #352b1c;
  --os-brand-100: #4b381a;
  --os-brand-200: #6a4917;
  --os-brand-300: #9a6815;
  --os-brand-400: #d08a12;
  --os-brand-500: #f59e0b;
  --os-brand-600: #d97706;
  --os-brand-700: #b45309;
  --os-brand-800: #92400e;
  --os-brand-900: #fff4d6;
  --os-bg: #111315;
  --os-bg-soft: #16191c;
  --os-surface: #202327;
  --os-surface-2: #191c20;
  --os-text: #f4f4f5;
  --os-text-soft: #d4d4d8;
  --os-muted: #a1a1aa;
  --os-muted-2: #71717a;
  --os-border: #34383e;
  --os-border-strong: #454a52;
  --os-success: #4ade80;
  --os-warning: #fbbf24;
  --os-danger: #fb7185;
  --os-cyan: #fb923c;
  --os-shadow-xs: 0 1px 2px rgba(0,0,0,.26);
  --os-shadow-sm: 0 7px 20px rgba(0,0,0,.24);
  --os-shadow-md: 0 20px 46px rgba(0,0,0,.36);
  --os-shadow-lg: 0 30px 78px rgba(0,0,0,.50);
  --os-nav-start: #17191c;
  --os-nav-mid: #3d3322;
  --os-nav-end: #b45309;
  --os-page-glow: rgba(245,158,11,.10);
  --os-surface-alpha: rgba(32,35,39,.98);
  --os-surface-soft-alpha: rgba(25,28,32,.96);
  --os-card-head-start: #24272b;
  --os-card-head-end: #1d2024;
  --os-table-head: #191c20;
  --os-row-hover: #292d32;
  --os-row-border: #31353b;
  --os-focus-ring: rgba(245,158,11,.22);
  --os-scrollbar: #454a52;
  --os-scrollbar-hover: #686e77;
}

/* Compatibilidade das variáveis do front original em todos os temas. */
html[data-os-theme] {
  background: var(--os-bg) !important;
  --verde-900: var(--os-brand-900);
  --verde-800: var(--os-brand-800);
  --verde-700: var(--os-brand-700);
  --verde-600: var(--os-brand-600);
  --verde-500: var(--os-brand-500);
  --verde-400: var(--os-brand-400);
  --verde-300: var(--os-brand-300);
  --verde-200: var(--os-brand-200);
  --verde-100: var(--os-brand-100);
  --verde-50: var(--os-brand-50);
  --terra-800: var(--os-text-soft);
  --terra-600: var(--os-muted);
  --terra-400: var(--os-muted-2);
  --terra-200: var(--os-border-strong);
  --terra-100: var(--os-surface-2);
  --cinza-700: var(--os-text-soft);
  --cinza-500: var(--os-muted);
  --cinza-300: var(--os-border-strong);
  --cinza-100: var(--os-surface-2);
  --cinza-50: var(--os-bg-soft);
  --branco: var(--os-surface);
  --sucesso-suave: color-mix(in srgb, var(--os-success) 13%, var(--os-surface));
  --alerta-suave: color-mix(in srgb, var(--os-warning) 13%, var(--os-surface));
  --perigo-suave: color-mix(in srgb, var(--os-danger) 13%, var(--os-surface));
}

html[data-os-theme] body.layout-os-aplicado,
html[data-os-theme] body {
  background:
    radial-gradient(circle at 100% 0, var(--os-page-glow), transparent 26rem),
    var(--os-bg) !important;
  color: var(--os-text) !important;
}

html[data-os-theme] .nav,
html[data-os-theme] .app > .sidebar {
  background: linear-gradient(105deg,var(--os-nav-start),var(--os-nav-mid),var(--os-nav-end)) !important;
}

html[data-os-theme] .card,
html[data-os-theme] .stat-box,
html[data-os-theme] .stat-card,
html[data-os-theme] .kpi,
html[data-os-theme] .resumo-card,
html[data-os-theme] .acao-card,
html[data-os-theme] .estado-card,
html[data-os-theme] .section,
html[data-os-theme] .filter-wrap,
html[data-os-theme] .tbl-wrap,
html[data-os-theme] .tabela-wrap,
html[data-os-theme] .login-card,
html[data-os-theme] .modal,
html[data-os-theme] .modal-box,
html[data-os-theme] .modal-content,
html[data-os-theme] .panel,
html[data-os-theme] .cfg-item,
html[data-os-theme] .app-layout > .sidebar {
  background: var(--os-surface-alpha) !important;
  color: var(--os-text) !important;
}

html[data-os-theme] .card-header,
html[data-os-theme] .card-head {
  background: linear-gradient(180deg,var(--os-card-head-start),var(--os-card-head-end)) !important;
}

html[data-os-theme] .tabs,
html[data-os-theme] .app-tabs,
html[data-os-theme] .plan-tabs,
html[data-os-theme] .filtros,
html[data-os-theme] .filter-wrap {
  background: var(--os-surface-soft-alpha) !important;
}

html[data-os-theme] input:not([type="checkbox"]):not([type="radio"]),
html[data-os-theme] select,
html[data-os-theme] textarea,
html[data-os-theme] .fil-sel,
html[data-os-theme] .fil-inp,
html[data-os-theme] .cfg-input,
html[data-os-theme] .cfg-select,
html[data-os-theme] .control {
  background: var(--os-surface) !important;
  color: var(--os-text) !important;
  border-color: var(--os-border-strong) !important;
}

html[data-os-theme] input:focus,
html[data-os-theme] select:focus,
html[data-os-theme] textarea:focus,
html[data-os-theme] .control:focus {
  box-shadow: 0 0 0 3px var(--os-focus-ring) !important;
}

html[data-os-theme] input[type="date"],
html[data-os-theme] input[type="time"],
html[data-os-theme] input[type="datetime-local"] { color-scheme: inherit; }

html[data-os-theme] .btn-secundario,
html[data-os-theme] .btn-outline,
html[data-os-theme] .btn-ghost,
html[data-os-theme] .act-btn.outline,
html[data-os-theme] .icon-btn {
  background: var(--os-surface) !important;
  color: var(--os-text-soft) !important;
  border-color: var(--os-border-strong) !important;
}

html[data-os-theme] .tabela-wrap,
html[data-os-theme] .tbl-wrap,
html[data-os-theme] .table-wrap,
html[data-os-theme] [style*="overflow-x:auto"]:has(> table),
html[data-os-theme] table {
  background: var(--os-surface) !important;
}
html[data-os-theme] thead th,
html[data-os-theme] th {
  background: var(--os-table-head) !important;
  color: var(--os-muted) !important;
}
html[data-os-theme] td {
  color: var(--os-text-soft) !important;
  border-bottom-color: var(--os-row-border) !important;
}
html[data-os-theme] tbody tr:hover td { background: var(--os-row-hover) !important; }

html[data-os-theme] .topbar {
  background: var(--os-surface) !important;
  color: var(--os-text) !important;
}
html[data-os-theme] .chart-wrap { background: linear-gradient(180deg,var(--os-surface),var(--os-surface-2)) !important; }
html[data-os-theme] .sec-h,
html[data-os-theme] .pagina-header,
html[data-os-theme] .screen-header,
html[data-os-theme] .main-head,
html[data-os-theme] .modal-header,
html[data-os-theme] .modal-footer { border-color: var(--os-border) !important; }

html[data-os-theme="dark"] .badge-green,
html[data-os-theme="graphite"] .badge-green,
html[data-os-theme="dark"] .badge-ativo,
html[data-os-theme="graphite"] .badge-ativo,
html[data-os-theme="dark"] .pill-ok,
html[data-os-theme="graphite"] .pill-ok { background:rgba(34,197,94,.16) !important;color:#86efac !important;border-color:rgba(74,222,128,.32) !important; }
html[data-os-theme="dark"] .badge-yellow,
html[data-os-theme="graphite"] .badge-yellow { background:rgba(245,158,11,.16) !important;color:#fcd34d !important;border-color:rgba(251,191,36,.34) !important; }
html[data-os-theme="dark"] .badge-red,
html[data-os-theme="graphite"] .badge-red,
html[data-os-theme="dark"] .badge-inativo,
html[data-os-theme="graphite"] .badge-inativo { background:rgba(244,63,94,.15) !important;color:#fda4af !important;border-color:rgba(251,113,133,.32) !important; }
html[data-os-theme="dark"] .badge-blue,
html[data-os-theme="graphite"] .badge-blue { background:color-mix(in srgb,var(--os-brand-600) 18%,transparent) !important;color:var(--os-brand-400) !important;border-color:color-mix(in srgb,var(--os-brand-500) 36%,transparent) !important; }

html[data-os-theme="dark"] #screen-login,
html[data-os-theme="graphite"] #screen-login {
  background:
    radial-gradient(circle at 20% 20%,var(--os-page-glow),transparent 24rem),
    linear-gradient(135deg,var(--os-nav-start),var(--os-nav-mid),var(--os-nav-end)) !important;
}

/* Seletor de temas. */
.os-theme-picker {
  position: relative;
  flex: 0 0 auto;
  z-index: 1300;
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
}
.nav > .os-theme-picker { margin-left: 5px; }
.topbar-acts .os-theme-picker,
.topbar-actions .os-theme-picker,
.header-actions .os-theme-picker { margin-left: 3px; }
.os-theme-trigger {
  min-width: 35px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 9px;
  background: rgba(255,255,255,.11);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.os-theme-trigger:hover,
.os-theme-picker.open .os-theme-trigger {
  background: rgba(255,255,255,.19);
  border-color: rgba(255,255,255,.30);
  transform: translateY(-1px);
}
.topbar .os-theme-trigger,
.header-actions .os-theme-trigger,
.os-theme-floating .os-theme-trigger {
  background: var(--os-surface) !important;
  color: var(--os-text-soft) !important;
  border-color: var(--os-border-strong) !important;
  box-shadow: var(--os-shadow-xs) !important;
}
.os-theme-trigger-icon { font-size: 15px; line-height: 1; }
.os-theme-trigger-label { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.os-theme-mini-dots { display:flex; align-items:center; gap:2px; }
.os-theme-mini-dots i { width:6px; height:6px; border-radius:50%; border:1px solid rgba(255,255,255,.32); }
.topbar .os-theme-mini-dots i,
.header-actions .os-theme-mini-dots i,
.os-theme-floating .os-theme-mini-dots i { border-color:rgba(0,0,0,.13); }
.os-theme-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 244px;
  padding: 9px;
  display: none;
  background: var(--os-surface) !important;
  color: var(--os-text) !important;
  border: 1px solid var(--os-border) !important;
  border-radius: 13px;
  box-shadow: var(--os-shadow-lg);
}
.os-theme-picker.open .os-theme-popover { display:block; animation:os-theme-in .15s ease both; }
@keyframes os-theme-in { from{opacity:0;transform:translateY(-5px) scale(.98)} to{opacity:1;transform:none} }
.os-theme-title { padding: 3px 5px 8px; font-size: 10px; font-weight: 800; color: var(--os-muted); text-transform: uppercase; letter-spacing: .08em; }
.os-theme-options { display:grid; grid-template-columns:1fr; gap:4px; }
.os-theme-option {
  width:100%;
  min-height:42px;
  padding:6px 8px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--os-text-soft);
  cursor:pointer;
  font:inherit;
  text-align:left;
}
.os-theme-option:hover { background:var(--os-brand-50); color:var(--os-text); }
.os-theme-option.active {
  background:var(--os-brand-50);
  color:var(--os-brand-700);
  border-color:var(--os-brand-200);
  font-weight:750;
}
.os-theme-swatch {
  width:46px;
  height:26px;
  display:flex;
  overflow:hidden;
  border-radius:7px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  flex:0 0 auto;
}
.os-theme-swatch i { flex:1; }
.os-theme-name { flex:1; font-size:11.5px; }
.os-theme-check { width:16px; text-align:center; color:var(--os-brand-600); font-weight:900; }
.os-theme-floating {
  position:fixed;
  top:12px;
  right:14px;
  z-index:2000;
}
.os-theme-floating .os-theme-popover { position:absolute; }

* { scrollbar-color: var(--os-scrollbar) transparent; }
*::-webkit-scrollbar-thumb { background:var(--os-scrollbar) !important; border:2px solid transparent; background-clip:padding-box !important; }
*::-webkit-scrollbar-thumb:hover { background:var(--os-scrollbar-hover) !important; border:2px solid transparent; background-clip:padding-box !important; }

@media (max-width:1100px) {
  .nav > .os-theme-picker { order: 2; margin-left:4px; }
  .os-theme-trigger-label { display:none; }
  .os-theme-popover { right:-3px; }
}
@media (max-width:620px) {
  .os-theme-popover { width:min(244px,calc(100vw - 24px)); }
  .os-theme-mini-dots { display:none; }
  .os-theme-trigger { width:36px; padding:0; }
}