/* ===========================================================================
   Surface no estilo do POC Via3 (poc.via3tecnologia.com.br, "Nava OS" / vidro, versão
   de 14/10/2026): fundo liso, cartões sólidos, menu lateral flutuante em vidro, item
   ativo em degradê laranja, topo com botões redondos e usuário no canto direito.
   Vale com <html data-estilo="vidro">.
   Carregado depois de via3-ui.css e via3-surface.css.
   =========================================================================== */

/* Tokens do POC na versão atual (14/10/2026): página de fundo liso — branco no
   claro, grafite suave no escuro — e superfícies sólidas. Só o menu lateral
   continua em vidro, com um tom próprio (azul em cima, laranja embaixo). */
html[data-estilo="vidro"] {
  --fonte: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fundo:#0f1626;
  --superficie:#161f33; --superficie-2:#1c263c; --campo:#131b2d;
  --linha:rgba(255,255,255,.08); --linha-forte:rgba(255,255,255,.14);
  --raio:18px; --raio-lg:22px; --raio-sm:11px;
  --sombra:0 10px 30px rgba(0,0,0,.28); --sombra-sutil:0 2px 10px rgba(0,0,0,.2);
  --vidro-borda:rgba(255,255,255,.07); --vidro-brilho:linear-gradient(transparent, transparent);
  --tinta:#ffffff; --tinta-2:rgba(255,255,255,.86); --tinta-fraca:rgba(255,255,255,.66);
}
html[data-estilo="vidro"][data-theme="claro"] {
  --fundo:#ffffff;
  --superficie:#ffffff; --superficie-2:#f7f8fb; --campo:#ffffff;
  --linha:rgba(15,23,42,.07); --linha-forte:rgba(15,23,42,.13);
  --sombra:0 10px 30px rgba(15,23,42,.06); --sombra-sutil:0 2px 10px rgba(15,23,42,.04);
  --vidro-borda:rgba(15,23,42,.08); --vidro-brilho:linear-gradient(transparent, transparent);
  --tinta:#12212c; --tinta-2:#4a5b68; --tinta-fraca:#6b7c89;
}
html[data-estilo="vidro"] body { background:#0f1626; background-image:none; }
html[data-estilo="vidro"][data-theme="claro"] body { background:#ffffff; background-image:none; }

/* menu lateral em vidro com tom próprio (igual ao POC) */
html[data-estilo="vidro"]:not([data-theme="claro"]) .lateral {
  --superficie:rgba(255,255,255,.065); --superficie-2:rgba(255,255,255,.10);
  --linha:rgba(255,255,255,.11); --vidro-borda:rgba(255,255,255,.14);
  --vidro-brilho:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  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);
  border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 60px rgba(3,8,20,.45);
}
html[data-estilo="vidro"][data-theme="claro"] .lateral {
  --superficie:rgba(255,255,255,.42); --superficie-2:rgba(255,255,255,.7);
  --linha:rgba(40,50,90,.09); --vidro-borda:rgba(255,255,255,.75);
  --vidro-brilho:linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  --tinta:#12212c; --tinta-2:#3b4660; --tinta-fraca:#5b667e;
  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:1px solid rgba(40,50,90,.08); box-shadow:0 24px 60px rgba(70,70,140,.16);
}
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; }

/* ---------- vidro ---------- */
html[data-estilo="vidro"] .cartao, html[data-estilo="vidro"] .cartao-flutuante, html[data-estilo="vidro"] .usuario-pop {
  background:var(--superficie); border:1px solid var(--vidro-borda); box-shadow:var(--sombra-sutil);
}
html[data-estilo="vidro"] .lateral { -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); }
html[data-estilo="vidro"] .cartao { border-radius:var(--raio); }
html[data-estilo="vidro"] .usuario-pop { box-shadow:var(--sombra); }


/* ---------- estrutura: menu flutuante + conteúdo ---------- */
.app { display:flex; min-height:100vh; }
.lateral { width:236px; flex:none; display:flex; flex-direction:column; gap:4px; padding:18px 12px 14px;
  position:sticky; top:14px; margin:14px 0 14px 14px; height:calc(100vh - 28px); border-radius:22px; overflow-y:auto;
  transition:width .25s ease; }
.lateral .marca { padding:4px 10px 16px; text-decoration:none; display:block; }
.lateral .logo-img { display:block; width:140px; height:auto; }
.lateral .logo-claro { display:none; }
html[data-theme="claro"] .lateral .logo-claro { display:block; }
html[data-theme="claro"] .lateral .logo-escuro { display:none; }
.lateral .sist { margin-top:6px; font-size:10px; font-weight:600; letter-spacing:.34em; color:var(--acao); }
.lateral .menu-rot { font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-fraca); padding:12px 12px 4px; }
.item { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:12px; color:var(--tinta-2);
  text-decoration:none; font-size:13.5px; font-weight:500; white-space:nowrap; }
.item i { font-size:18px; flex:none; opacity:.85; }
.item:hover { background:var(--superficie-2); color:var(--tinta); }
.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); font-weight:600; }
.item.on i { opacity:1; }
.lateral .rodape-lateral { margin-top:auto; padding:12px 10px 2px; font-size:11px; color:var(--tinta-fraca); line-height:1.5; }
.app.recolhido .lateral { width:74px; }
.app.recolhido .lateral .txt, .app.recolhido .lateral .menu-rot, .app.recolhido .lateral .sist,
.app.recolhido .lateral .rodape-lateral { display:none; }
.app.recolhido .lateral .item { justify-content:center; padding:10px 0; }
.app.recolhido .lateral .logo-img { width:46px; }
.app.recolhido .lateral .marca { padding:4px 0 14px; display:flex; justify-content:center; }

.conteudo { flex:1; min-width:0; padding:14px 30px 60px; }
.conteudo-miolo { max-width:1180px; }
.conteudo h1 { font-size:24px; margin-bottom:4px; }
.conteudo .cap { color:var(--tinta-2); font-size:13.5px; margin:0 0 22px; }

/* ---------- topo ---------- */
.cabecalho { display:flex; align-items:center; gap:10px; margin:0 0 22px; min-height:56px; }
.cabecalho .espaco { flex:1; }
.topo-icone { width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; padding:0;
  background:var(--superficie); border:1px solid var(--vidro-borda); color:var(--tinta); box-shadow:var(--sombra-sutil); font-size:19px; text-decoration:none; cursor:pointer; }
.topo-icone:hover { border-color:rgba(232,90,36,.55); color:var(--acao); }
.cabecalho .titulo-pagina { font-size:13px; color:var(--tinta-fraca); font-weight:500; }
.cabecalho .titulo-pagina b { color:var(--tinta); font-weight:600; }
.usuario-menu { position:relative; }
.usuario-menu summary { list-style:none; display:flex; align-items:center; gap:9px; padding:4px 12px 4px 4px; border-radius:999px; cursor:pointer;
  background:var(--superficie); border:1px solid var(--vidro-borda); box-shadow:var(--sombra-sutil); }
.usuario-menu summary::-webkit-details-marker { display:none; }
.usuario-menu summary:hover, .usuario-menu[open] summary { border-color:rgba(232,90,36,.55); }
.avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#f37a3e,#d24a18); color:#fff; display:inline-flex;
  align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.usuario-nome { display:flex; flex-direction:column; line-height:1.15; max-width:170px; }
.usuario-nome b { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usuario-nome small { font-size:11px; color:var(--tinta-fraca); }
.usuario-pop { position:absolute; right:0; top:calc(100% + 8px); z-index:40; min-width:240px; padding:8px; border-radius:16px; }
.usuario-pop-topo { padding:8px 10px 10px; border-bottom:1px solid var(--linha); margin-bottom:6px; }
.usuario-pop-topo b { display:block; font-size:13px; }
.usuario-pop-topo small { display:block; color:var(--tinta-fraca); font-size:11.5px; word-break:break-all; }
.usuario-pop a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:var(--tinta); text-decoration:none; font-size:13px; font-weight:500; }
.usuario-pop a:hover { background:rgba(232,90,36,.14); color:var(--acao); }
.usuario-pop a i { font-size:17px; }

/* ---------- botões, campos, tabelas ---------- */
html[data-estilo="vidro"] button.acao, html[data-estilo="vidro"] .botao-acao {
  background:linear-gradient(135deg,#f37a3e,#e85a24 55%,#d24a18); border-color:transparent; color:#fff; border-radius:12px;
  box-shadow:0 8px 20px rgba(232,90,36,.30); }
html[data-estilo="vidro"] button:not(.acao):not(.topo-icone) { background:var(--superficie); border-color:var(--vidro-borda); border-radius:12px; }
html[data-estilo="vidro"] input:not([type=checkbox]):not([type=radio]), html[data-estilo="vidro"] select, html[data-estilo="vidro"] textarea {
  background:var(--campo); border-color:var(--linha); border-radius:11px; color:var(--tinta); }
html[data-estilo="vidro"]:not([data-theme="claro"]) select { background-color:rgba(20,34,61,.85); }
html[data-estilo="vidro"] select option { background-color:#14223d; color:#fff; }
html[data-estilo="vidro"][data-theme="claro"] select option { background-color:#fff; color:#12212c; }
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 #fff inset; }
html[data-estilo="vidro"] table.lista { background:var(--superficie); border:1px solid var(--vidro-borda); border-radius:var(--raio);
  border-collapse:separate; border-spacing:0; overflow:hidden; box-shadow:var(--sombra-sutil); }
html[data-estilo="vidro"] table.lista th { background:transparent; padding:12px 14px; }
html[data-estilo="vidro"] table.lista td { padding:12px 14px; }
html[data-estilo="vidro"] table.lista tr:last-child td { border-bottom:none; }
html[data-estilo="vidro"] table.lista tbody tr:hover td { background:var(--superficie-2); }
html[data-estilo="vidro"] .flash { border-radius:14px; }

/* ---------- tela de acesso (login) em vidro ---------- */
html[data-estilo="vidro"] .acesso-caixa { border-radius:16px; box-shadow:var(--sombra); }
.tema-acesso { position:fixed; top:18px; right:18px; z-index:5; }
.acesso-logo { display:block; width:170px; height:auto; }
.acesso-logo.logo-claro { display:none; }
html[data-theme="claro"] .acesso-logo.logo-claro { display:block; }
html[data-theme="claro"] .acesso-logo.logo-escuro { display:none; }
html[data-estilo="vidro"] .pilar { border-left-color:var(--acao); }

@media (max-width:900px) {
  .app { flex-direction:column; }
  .lateral { position:sticky; top:0; z-index:20; width:auto; height:auto; margin:0; border-radius:0 0 18px 18px; flex-direction:row; align-items:center;
    padding:8px 10px; overflow-x:auto; }
  .lateral .marca, .lateral .menu-rot, .lateral .rodape-lateral, .lateral .txt { display:none; }
  .lateral nav { display:flex; gap:4px; }
  .item { padding:10px 12px; }
  .recolher { display:none !important; }
  .conteudo { padding:12px 16px 48px; }
  .usuario-nome { display:none; }
  .usuario-menu summary { padding:4px; }
}