/* ===========================================================================
   Estilo Nava OS (vidro e gradientes, modelo Dashboard Via3) — Minhas configurações › Personalização.
   Só vale com <html data-estilo="vidro">; o estilo clássico não muda nada.
   =========================================================================== */

/* ---------- fundo em gradiente com ondas ---------- */
html[data-estilo="vidro"] body {
  background-color: #0a1530;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8a4c' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23e85a24' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236fa8ff' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%232f6fe5' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 640 C 260 520 420 760 700 700 S 1120 520 1600 600 L1600 900 L0 900Z' fill='url(%23a)'/%3E%3Cpath d='M900 0 C 1120 160 1300 60 1600 220 L1600 0Z' fill='url(%23b)'/%3E%3Cpath d='M0 760 C 380 700 620 860 1000 780 S 1400 700 1600 760 L1600 900 L0 900Z' fill='%23ff9a66' fill-opacity='.18'/%3E%3C/svg%3E"),
    radial-gradient(900px 520px at 100% 0%, rgba(90, 140, 255, .28), transparent 62%),
    radial-gradient(800px 520px at 0% 100%, rgba(232, 90, 36, .35), transparent 62%),
    linear-gradient(160deg, #0a1530 0%, #0f2147 55%, #0b1630 100%);
  background-size: 100% 100%, auto, auto, auto;
  background-attachment: fixed;
}
html[data-estilo="vidro"][data-theme="claro"] body {
  background-color: #f1f0fa;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffb08a' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffd9c4' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b9c7ff' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23d9d2ff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 640 C 260 520 420 760 700 700 S 1120 520 1600 600 L1600 900 L0 900Z' fill='url(%23a)'/%3E%3Cpath d='M900 0 C 1120 160 1300 60 1600 220 L1600 0Z' fill='url(%23b)'/%3E%3C/svg%3E"),
    radial-gradient(900px 520px at 100% 0%, rgba(170, 160, 255, .35), transparent 62%),
    radial-gradient(800px 520px at 0% 100%, rgba(255, 170, 130, .35), transparent 62%),
    linear-gradient(160deg, #eceefc 0%, #f6eff7 50%, #fcefe8 100%);
}

/* ---------- tokens: superfícies translúcidas ---------- */
html[data-estilo="vidro"] {
  --fundo: transparent;
  --superficie: rgba(255, 255, 255, .065);
  --superficie-2: rgba(255, 255, 255, .10);
  --campo: rgba(255, 255, 255, .06);
  --linha: rgba(255, 255, 255, .11);
  --linha-forte: rgba(255, 255, 255, .2);
  --raio: 18px;
  --raio-lg: 22px;
  --raio-sm: 11px;
  --sombra: 0 24px 60px rgba(3, 8, 20, .45);
  --sombra-sutil: 0 8px 24px rgba(3, 8, 20, .25);
  --vidro-borda: rgba(255, 255, 255, .14);
  --vidro-brilho: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
}
html[data-estilo="vidro"][data-theme="claro"] {
  --superficie: rgba(255, 255, 255, .62);
  --superficie-2: rgba(255, 255, 255, .85);
  --campo: rgba(255, 255, 255, .72);
  --linha: rgba(40, 50, 90, .09);
  --linha-forte: rgba(40, 50, 90, .16);
  --sombra: 0 24px 60px rgba(70, 70, 140, .16);
  --sombra-sutil: 0 8px 24px rgba(70, 70, 140, .10);
  --vidro-borda: rgba(255, 255, 255, .85);
  --vidro-brilho: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .45));
}

/* ---------- painéis de vidro ---------- */
html[data-estilo="vidro"] .cartao,
html[data-estilo="vidro"] .kpi,
html[data-estilo="vidro"] .lateral,
html[data-estilo="vidro"] .topo-painel,
html[data-estilo="vidro"] .paleta-caixa,
html[data-estilo="vidro"] .guia-popup-caixa,
html[data-estilo="vidro"] dialog.sobre,
html[data-estilo="vidro"] .menu-itens {
  background: var(--vidro-brilho), var(--superficie);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--sombra-sutil);
}
html[data-estilo="vidro"] .cartao, html[data-estilo="vidro"] .kpi { border-radius: var(--raio); }
html[data-estilo="vidro"] .kpi:hover { box-shadow: var(--sombra); transform: translateY(-1px); transition: transform .15s, box-shadow .15s; }

/* ---------- menu lateral flutuante ---------- */
@media (min-width: 901px) {
  html[data-estilo="vidro"] .app:not(.menu-h) .lateral {
    margin: 14px 0 14px 14px; height: calc(100vh - 28px); top: 14px; border-radius: 22px;
  }
  html[data-estilo="vidro"] .app.menu-h .lateral { margin: 12px 14px 0; width: auto; border-radius: 20px; top: 12px; }
}
html[data-estilo="vidro"] .item { border-radius: 12px; }
html[data-estilo="vidro"] .item.on {
  background: linear-gradient(90deg, rgba(240, 110, 50, .95), rgba(232, 90, 36, .55));
  color: #fff; box-shadow: 0 8px 20px rgba(232, 90, 36, .30);
}
html[data-estilo="vidro"] .item.on svg { opacity: 1; }
html[data-estilo="vidro"] .lateral.recolhida .menu-secao:has(.item.on) .secao-ic {
  background: linear-gradient(135deg, #f07a3c, #e85a24); color: #fff;
}
html[data-estilo="vidro"] .quem-sessao {
  background: var(--superficie-2); border: 1px solid var(--vidro-borda); border-radius: 16px; padding: 10px;
}
html[data-estilo="vidro"] .chip-periodo { background: var(--superficie-2); border: 1px solid var(--vidro-borda); border-radius: 16px; }

/* ---------- topo: busca larga e botões redondos ---------- */
html[data-estilo="vidro"] .cabecalho { background: transparent; }
html[data-estilo="vidro"] .busca-topo {
  min-width: 340px; height: 42px; border-radius: 14px; background: var(--vidro-brilho), var(--superficie);
  border: 1px solid var(--vidro-borda); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
html[data-estilo="vidro"] .busca-topo input { flex: 1; }
html[data-estilo="vidro"] .topo-bt, html[data-estilo="vidro"] .tema-bt {
  height: 42px; background: var(--vidro-brilho), var(--superficie); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
html[data-estilo="vidro"] .topo-icone { width: 42px; border-radius: 50%; }
html[data-estilo="vidro"] .avatar-topo { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }

/* ---------- botões, campos e tabelas ---------- */
html[data-estilo="vidro"] .botao.acao {
  background: linear-gradient(135deg, #f37a3e, #e85a24 55%, #d24a18); border-color: transparent;
  box-shadow: 0 8px 20px rgba(232, 90, 36, .30);
}
html[data-estilo="vidro"] input:not([type=checkbox]):not([type=radio]):not([type=color]),
html[data-estilo="vidro"] select, html[data-estilo="vidro"] textarea {
  background: var(--campo); border-color: var(--linha); border-radius: 11px;
}
html[data-estilo="vidro"] .tab th { background: transparent; }
html[data-estilo="vidro"] .tab tbody tr:hover td { background: var(--superficie-2); }
html[data-estilo="vidro"] .rodape { background: transparent; border-top-color: var(--linha); }

/* ---------- Painel: indicadores e barras como no modelo ---------- */
html[data-estilo="vidro"] .kpi-ic { border-radius: 14px; box-shadow: 0 10px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .35); }
html[data-estilo="vidro"] .bs-barra { box-shadow: 0 14px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .35); }
html[data-estilo="vidro"] .relogio-painel b { font-size: 30px; }
html[data-estilo="vidro"] .saudacao h2 { font-size: 30px; }

/* modo escuro do estilo Nava OS: textos mais brancos sobre o vidro */
html[data-estilo="vidro"]:not([data-theme="claro"]) {
  --tinta: #ffffff;
  --tinta-2: rgba(255, 255, 255, .86);
  --tinta-fraca: rgba(255, 255, 255, .66);
}
html[data-estilo="vidro"]:not([data-theme="claro"]) .item:not(.on),
html[data-estilo="vidro"]:not([data-theme="claro"]) .menu-rot,
html[data-estilo="vidro"]:not([data-theme="claro"]) .kpi-dados .rot,
html[data-estilo="vidro"]:not([data-theme="claro"]) .bs span { color: rgba(255, 255, 255, .86); }

/* listas (select): o navegador desenha as opções com o fundo do campo; no vidro ele é translúcido e o texto
   sumia (branco sobre branco). As opções ganham fundo sólido nos dois modos, em todas as telas. */
html[data-estilo="vidro"] select option,
html[data-estilo="vidro"] select optgroup { background-color: #14223d; color: #ffffff; }
html[data-estilo="vidro"] select option:checked { background-color: #e85a24; color: #ffffff; }
html[data-estilo="vidro"] select option:disabled { color: rgba(255, 255, 255, .45); }
html[data-estilo="vidro"][data-theme="claro"] select option,
html[data-estilo="vidro"][data-theme="claro"] select optgroup { background-color: #ffffff; color: #12212c; }
html[data-estilo="vidro"][data-theme="claro"] select option:checked { background-color: #fde3d6; color: #12212c; }
html[data-estilo="vidro"][data-theme="claro"] select option:disabled { color: #9aa6b0; }
/* campos com fundo sólido o bastante para o texto digitado e o autopreenchimento do navegador */
html[data-estilo="vidro"]:not([data-theme="claro"]) select { background-color: rgba(20, 34, 61, .85); color: #ffffff; }
html[data-estilo="vidro"] input:-webkit-autofill { -webkit-text-fill-color: var(--tinta); box-shadow: 0 0 0 40px rgba(20, 34, 61, .95) inset; }
html[data-estilo="vidro"][data-theme="claro"] input:-webkit-autofill { box-shadow: 0 0 0 40px #ffffff inset; }

/* rodapés no modo escuro do Nava OS: texto mais branco (página e menu lateral) */
html[data-estilo="vidro"]:not([data-theme="claro"]) .rodape,
html[data-estilo="vidro"]:not([data-theme="claro"]) .rodape span { color: rgba(255, 255, 255, .86); }
html[data-estilo="vidro"]:not([data-theme="claro"]) .rodape i { color: var(--acao); }
html[data-estilo="vidro"]:not([data-theme="claro"]) .chip-periodo .r,
html[data-estilo="vidro"]:not([data-theme="claro"]) .chip-periodo .s,
html[data-estilo="vidro"]:not([data-theme="claro"]) .dados-sessao > span,
html[data-estilo="vidro"]:not([data-theme="claro"]) .linha-status,
html[data-estilo="vidro"]:not([data-theme="claro"]) .seta-sessao { color: rgba(255, 255, 255, .86); }
html[data-estilo="vidro"]:not([data-theme="claro"]) .chip-periodo .v,
html[data-estilo="vidro"]:not([data-theme="claro"]) .dados-sessao b { color: #ffffff; }
html[data-estilo="vidro"]:not([data-theme="claro"]) .dados-sessao > span.linha-login { color: rgba(255, 255, 255, .86); }

/* tela de entrada no Nava OS: caixa de acesso em vidro sobre o gradiente */
html[data-estilo="vidro"] .inicio-caixa {
  background: var(--vidro-brilho), var(--superficie); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--sombra); border-radius: 16px; /* padrão de login 16/10/2026 (era 22px) */
}

/* ---------- Relatório de Chamados dentro da Central (Administração › Relatório) ---------- */
html[data-estilo="vidro"] .item[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(240, 110, 50, .95), rgba(232, 90, 36, .55)); color: #fff;
  box-shadow: 0 8px 20px rgba(232, 90, 36, .30); border-radius: 12px;
}
html[data-estilo="vidro"] .item[aria-selected="true"] svg { opacity: 1; }
html[data-estilo="vidro"] .bt {
  background: var(--vidro-brilho), var(--superficie); border: 1px solid var(--vidro-borda); border-radius: 12px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
html[data-estilo="vidro"] .bt-cheio { background: linear-gradient(135deg, #f37a3e, #e85a24 55%, #d24a18); border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px rgba(232, 90, 36, .30); }
html[data-estilo="vidro"] .seg { background: var(--superficie); border-color: var(--vidro-borda); border-radius: 12px; }
html[data-estilo="vidro"] .filtro select, html[data-estilo="vidro"] .busca { background: var(--campo); border-color: var(--vidro-borda); border-radius: 11px; }
html[data-estilo="vidro"] .cartao-topo { border-bottom-color: var(--linha); }
html[data-estilo="vidro"] table.simples thead th { background: transparent; }
html[data-estilo="vidro"] .exportar-menu, html[data-estilo="vidro"] .gaveta {
  background: var(--vidro-brilho), var(--superficie-2); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid var(--vidro-borda);
}

/* o vidro das seções do menu só no menu recolhido (cascata) e no horizontal; aberto, sem caixas */
html[data-estilo="vidro"] .lateral:not(.recolhida) .menu-itens { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-estilo="vidro"] .app.menu-h .lateral .menu-itens {
  background: var(--vidro-brilho), var(--superficie-2); border: 1px solid var(--vidro-borda); box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
}
/* modo claro como no modelo: vidro mais translúcido e as ondas lilás/pêssego aparecendo por trás */
html[data-estilo="vidro"][data-theme="claro"] {
  --superficie: rgba(255, 255, 255, .42);
  --superficie-2: rgba(255, 255, 255, .7);
  --vidro-brilho: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18));
  --vidro-borda: rgba(255, 255, 255, .75);
}
html[data-estilo="vidro"][data-theme="claro"] body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ff9a6b' stop-opacity='.55'/%3E%3Cstop offset='.6' stop-color='%23ffc2a3' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23ffe2d4' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a9b6ff' stop-opacity='.65'/%3E%3Cstop offset='.6' stop-color='%23cfc4ff' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23efe9ff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 720 C 240 600 420 820 720 760 S 1150 560 1600 640 L1600 1000 L0 1000Z' fill='url(%23p)'/%3E%3Cpath d='M0 840 C 360 760 640 940 1020 860 S 1420 760 1600 820 L1600 1000 L0 1000Z' fill='%23ff8f5c' fill-opacity='.22'/%3E%3Cpath d='M820 0 C 1020 180 1240 40 1600 260 L1600 0Z' fill='url(%23l)'/%3E%3Cpath d='M1100 0 C 1260 120 1400 60 1600 140 L1600 0Z' fill='%238f9dff' fill-opacity='.25'/%3E%3Cpath d='M0 0 L0 260 C 180 160 260 60 520 0Z' fill='%23d8ccff' fill-opacity='.35'/%3E%3C/svg%3E"),
    radial-gradient(900px 520px at 100% 0%, rgba(160, 150, 255, .40), transparent 62%),
    radial-gradient(800px 520px at 0% 100%, rgba(255, 160, 120, .45), transparent 62%),
    linear-gradient(160deg, #eceefc 0%, #f4eef8 50%, #fcefe8 100%);
}
@media (max-width: 900px) {
  html[data-estilo="vidro"] .barra-mobile { background: var(--vidro-brilho), var(--superficie); border-bottom-color: var(--vidro-borda); }
  html[data-estilo="vidro"] .lateral { margin: 0; }
}

/* Nava OS + menu recolhido: o desfoque (backdrop-filter) prenderia a cascata dentro da barra estreita;
   recolhida, a barra usa um fundo mais sólido no lugar do desfoque */
@media (min-width: 901px) {
  html[data-estilo="vidro"] .lateral.recolhida { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(16, 30, 60, .92); }
  html[data-estilo="vidro"][data-theme="claro"] .lateral.recolhida { background: rgba(255, 255, 255, .9); }
  html[data-estilo="vidro"] .lateral.recolhida .menu-itens { background: var(--superficie-2); }
  html[data-estilo="vidro"]:not([data-theme="claro"]) .lateral.recolhida .menu-itens { background: rgba(20, 34, 61, .97); }
  html[data-estilo="vidro"][data-theme="claro"] .lateral.recolhida .menu-itens { background: rgba(255, 255, 255, .97); }
}

/* ---------- fundo liso (14/10/2026): branco total no claro, grafite suave no escuro — sem ondas nem gradientes ---------- */
html[data-estilo="vidro"] body,
html[data-estilo="vidro"][data-theme="claro"] body { background-image: none; }
html[data-estilo="vidro"] body { background-color: #0f1626; }
html[data-estilo="vidro"]:not([data-theme="claro"]) {
  --superficie: #161f33;
  --superficie-2: #1c263c;
  --campo: #131b2d;
  --linha: rgba(255, 255, 255, .08);
  --linha-forte: rgba(255, 255, 255, .14);
  --vidro-borda: rgba(255, 255, 255, .07);
  --vidro-brilho: linear-gradient(transparent, transparent);
  --sombra: 0 10px 30px rgba(0, 0, 0, .28);
  --sombra-sutil: 0 2px 10px rgba(0, 0, 0, .2);
}
html[data-estilo="vidro"][data-theme="claro"] body { background-color: #ffffff; }
html[data-estilo="vidro"][data-theme="claro"] {
  --superficie: #ffffff;
  --superficie-2: #f7f8fb;
  --campo: #ffffff;
  --linha: rgba(15, 23, 42, .07);
  --linha-forte: rgba(15, 23, 42, .13);
  --vidro-borda: rgba(15, 23, 42, .08);
  --vidro-brilho: linear-gradient(transparent, transparent);
  --sombra: 0 10px 30px rgba(15, 23, 42, .06);
  --sombra-sutil: 0 2px 10px rgba(15, 23, 42, .04);
}

/* ---------- menu lateral continua em vidro (14/10/2026): tokens antigos só dentro da .lateral + um leve tom
   próprio por trás, já que o fundo da página agora é liso e não há mais ondas para o vidro mostrar ---------- */
html[data-estilo="vidro"]:not([data-theme="claro"]) .lateral {
  --superficie: rgba(255, 255, 255, .065);
  --superficie-2: rgba(255, 255, 255, .10);
  --campo: rgba(255, 255, 255, .06);
  --linha: rgba(255, 255, 255, .11);
  --linha-forte: rgba(255, 255, 255, .2);
  --vidro-borda: rgba(255, 255, 255, .14);
  --vidro-brilho: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
  --sombra: 0 24px 60px rgba(3, 8, 20, .45);
  --sombra-sutil: 0 8px 24px rgba(3, 8, 20, .25);
  background: var(--vidro-brilho),
    radial-gradient(120% 45% at 100% 0%, rgba(90, 140, 255, .20), transparent 70%),
    radial-gradient(120% 45% at 0% 100%, rgba(232, 90, 36, .22), transparent 70%),
    linear-gradient(170deg, #142349, #111a33);
}
html[data-estilo="vidro"][data-theme="claro"] .lateral {
  --superficie: rgba(255, 255, 255, .42);
  --superficie-2: rgba(255, 255, 255, .7);
  --campo: rgba(255, 255, 255, .72);
  --linha: rgba(40, 50, 90, .09);
  --linha-forte: rgba(40, 50, 90, .16);
  --vidro-borda: rgba(255, 255, 255, .75);
  --vidro-brilho: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18));
  --sombra: 0 24px 60px rgba(70, 70, 140, .16);
  --sombra-sutil: 0 8px 24px rgba(70, 70, 140, .10);
  background: var(--vidro-brilho),
    radial-gradient(120% 45% at 100% 0%, rgba(160, 150, 255, .30), transparent 70%),
    radial-gradient(120% 45% at 0% 100%, rgba(255, 160, 120, .32), transparent 70%),
    linear-gradient(170deg, #eef0fd, #fbf1ec);
  border-color: rgba(40, 50, 90, .08);
}
@media (max-width: 900px) {
  html[data-estilo="vidro"]:not([data-theme="claro"]) .lateral.recolhida { background: rgba(16, 30, 60, .92); }
  html[data-estilo="vidro"][data-theme="claro"] .lateral.recolhida { background: rgba(255, 255, 255, .9); }
}

/* ---------- barra de rolagem do menu lateral (14/10/2026): fina, arredondada e afastada dos cantos de 22px,
   para não ser cortada pela borda do menu flutuante, nos dois temas ---------- */
html[data-estilo="vidro"] .lateral { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
html[data-estilo="vidro"][data-theme="claro"] .lateral { scrollbar-color: rgba(40, 50, 90, .22) transparent; }
html[data-estilo="vidro"] .lateral::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-estilo="vidro"] .lateral::-webkit-scrollbar-track { background: transparent; margin: 22px 0; }
html[data-estilo="vidro"] .lateral::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
html[data-estilo="vidro"] .lateral::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .36); }
html[data-estilo="vidro"][data-theme="claro"] .lateral::-webkit-scrollbar-thumb { background-color: rgba(40, 50, 90, .22); }
html[data-estilo="vidro"][data-theme="claro"] .lateral::-webkit-scrollbar-thumb:hover { background-color: rgba(40, 50, 90, .36); }
html[data-estilo="vidro"] .lateral::-webkit-scrollbar-corner { background: transparent; }

/* ---------- rolagem por dentro (14/10/2026): no menu vertical aberto, só a lista de itens rola, entre o logo e o rodapé;
   a barra fica numa faixa reta e não encosta nos cantos arredondados do menu flutuante ---------- */
@media (min-width: 901px) {
  html[data-estilo="vidro"] .app:not(.menu-h) .lateral:not(.recolhida) { overflow: hidden; }
  html[data-estilo="vidro"] .app:not(.menu-h) .lateral:not(.recolhida) .menu {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin-right: -8px; padding-right: 4px;          /* barra encostada na borda interna, sem apertar os itens */
    scrollbar-width: thin; scrollbar-gutter: stable;
  }
  html[data-estilo="vidro"] .app:not(.menu-h) .lateral:not(.recolhida) .menu::-webkit-scrollbar { width: 6px; }
  html[data-estilo="vidro"] .app:not(.menu-h) .lateral:not(.recolhida) .menu::-webkit-scrollbar-track { background: transparent; }
  html[data-estilo="vidro"] .app:not(.menu-h) .lateral:not(.recolhida) .menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 999px; }
  html[data-estilo="vidro"][data-theme="claro"] .app:not(.menu-h) .lateral:not(.recolhida) .menu::-webkit-scrollbar-thumb { background: rgba(40, 50, 90, .22); }
}
html[data-estilo="vidro"] .lateral .menu { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
html[data-estilo="vidro"][data-theme="claro"] .lateral .menu { scrollbar-color: rgba(40, 50, 90, .22) transparent; }

/* ---------- campo de pesquisa do topo (14/10/2026): o texto não encosta nem some no começo ---------- */
html[data-estilo="vidro"] .busca-topo { padding: 0 10px 0 14px; gap: 10px; overflow: hidden; }
html[data-estilo="vidro"] .busca-topo input,
html[data-estilo="vidro"] .busca-topo input:not([type=checkbox]):not([type=radio]):not([type=color]) {
  flex: 1 1 auto; min-width: 0; width: auto; height: 100%; padding: 0 2px; margin: 0; text-indent: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; text-overflow: ellipsis;
}
html[data-estilo="vidro"] .busca-topo svg { flex: 0 0 auto; }
html[data-estilo="vidro"] .busca-topo kbd { flex: 0 0 auto; }
@media (min-width: 901px) {
  html[data-estilo="vidro"] .app.menu-h .barra-ferr-h .busca-topo { min-width: 260px; }
}

/* ---------- celular e tablet (≤ 900 px), ajustes de hoje ---------- */
@media (max-width: 900px) {
  /* menu-gaveta: rola só a lista de itens, a barra não encosta nos cantos arredondados */
  html[data-estilo="vidro"] .lateral, html[data-estilo="vidro"] .lateral.recolhida, html[data-estilo="vidro"] .app.menu-h .lateral { overflow: hidden; }
  html[data-estilo="vidro"] .lateral .menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  html[data-estilo="vidro"] .lateral .menu::-webkit-scrollbar { width: 5px; }
  html[data-estilo="vidro"] .lateral .menu::-webkit-scrollbar-thumb { background: rgba(127, 127, 127, .35); border-radius: 999px; }
  html[data-estilo="vidro"] .lateral-rodape { flex: 0 0 auto; }
  /* pesquisa na barra do menu horizontal: ocupa a linha inteira em vez de estourar a tela */
  html[data-estilo="vidro"] .busca-topo, html[data-estilo="vidro"] .app.menu-h .barra-ferr-h .busca-topo { min-width: 0; width: 100%; }
  html[data-estilo="vidro"] .busca-topo kbd { display: none; }
  /* filtros (Auditoria, Notificações...): campos dividem a linha e quebram sem sair da tela */
  .ferramentas > select, .ferramentas > input:not([type=hidden]) { flex: 1 1 150px; min-width: 0; width: auto; }
  .ferramentas > .botao { flex: 0 0 auto; }
  /* botões Editar / Desativar / Apagar das tabelas de cadastro quebram linha em vez de empurrar a tabela */
  .tab td[style*="nowrap"] { white-space: normal !important; }
  .tab td form[style*="inline"] { display: inline-block !important; margin: 2px 0; }
  .linha-form { flex-wrap: wrap; }
  .linha-form input[name=nome] { flex: 1 1 140px; min-width: 0; }
  /* Auditoria: campos enviados não estouram a largura */
  .tab details div { word-break: break-word; }
}

/* ---------- menu horizontal (14/10/2026): barra de vidro com o tom correndo da esquerda para a direita
   (as manchas do menu vertical ficavam esticadas) e submenus sólidos, legíveis sobre o fundo liso ---------- */
@media (min-width: 901px) {
  html[data-estilo="vidro"]:not([data-theme="claro"]) .app.menu-h .lateral {
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)),
      linear-gradient(90deg, rgba(232, 90, 36, .16), transparent 30%, transparent 70%, rgba(90, 140, 255, .16)), #131d36;
    border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  }
  html[data-estilo="vidro"][data-theme="claro"] .app.menu-h .lateral {
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35)),
      linear-gradient(90deg, rgba(255, 160, 120, .22), transparent 30%, transparent 70%, rgba(160, 150, 255, .22)), #f6f6fc;
    border: 1px solid rgba(40, 50, 90, .08); box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
  }
  /* submenus que abrem para baixo: fundo sólido, borda e sombra */
  html[data-estilo="vidro"] .app.menu-h .lateral .menu-itens,
  html[data-estilo="vidro"] .app.menu-h .lateral .menu-secao.fechada .menu-itens {
    -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 14px; padding: 6px;
  }
  html[data-estilo="vidro"]:not([data-theme="claro"]) .app.menu-h .lateral .menu-itens {
    background: #1a2440; border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  }
  html[data-estilo="vidro"][data-theme="claro"] .app.menu-h .lateral .menu-itens {
    background: #ffffff; border: 1px solid rgba(40, 50, 90, .10); box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
  }
  html[data-estilo="vidro"] .app.menu-h .lateral .menu-itens .item:hover { background: var(--acao-suave); color: var(--tinta); }
  /* rótulos das seções e ferramentas da barra com contraste certo em cada tema */
  html[data-estilo="vidro"]:not([data-theme="claro"]) .app.menu-h button.menu-rot { color: rgba(255, 255, 255, .78); }
  html[data-estilo="vidro"][data-theme="claro"] .app.menu-h button.menu-rot { color: #3b4660; }
  html[data-estilo="vidro"] .app.menu-h .barra-ferr-h .busca-topo,
  html[data-estilo="vidro"] .app.menu-h .barra-ferr-h .topo-bt { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-estilo="vidro"]:not([data-theme="claro"]) .app.menu-h .barra-ferr-h .busca-topo,
  html[data-estilo="vidro"]:not([data-theme="claro"]) .app.menu-h .barra-ferr-h .topo-bt { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
  html[data-estilo="vidro"][data-theme="claro"] .app.menu-h .barra-ferr-h .busca-topo,
  html[data-estilo="vidro"][data-theme="claro"] .app.menu-h .barra-ferr-h .topo-bt { background: #ffffff; border-color: rgba(40, 50, 90, .12); }
}