/* ==========================================================================
   TEMA "VIDRO LÍQUIDO" — design system da Intranet 3G Brasil
   Referência visual aprovada: tela Financeiro.

   Como usar numa tela:
     1) <link rel="stylesheet" href="css/tema-vidro.css"> (depois de style.css)
     2) <script src="js/tema-vidro.js"></script>
     3) <body class="tema-vidro">  (ou TemaVidro.ativar() via JS)
   O tema é escopado em .tema-vidro: telas que ainda não migraram continuam
   no visual antigo. Estilos genéricos (.card, .kpi, table, .badge, ...)
   já herdam o visual automaticamente; os componentes .vidro-* são os nomes
   oficiais pra markup novo.
   ========================================================================== */

:root{
  --vidro-fundo:#081428;
  --vidro-azul-luz:#1f4fb8;
  --vidro-dourado-luz:#d9b25c;
  --vidro-agua-luz:#127a74;
  --vidro-roxo-luz:#7b3fb3;
  --vidro-texto:#f2f5fb;
  --vidro-texto-2:#b9c4da;
  --vidro-texto-3:#8392b0;
  --vidro-verde:#4fd6b0;
  --vidro-ambar:#f3b94e;
  --vidro-vermelho:#f2717f;
  --vidro-azul:#6fa8ff;
  --vidro-dourado:#d9b25c;
  --vidro-borda:rgba(255,255,255,.16);
  --vidro-gradiente:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 45%,rgba(255,255,255,.07));
  --vidro-sombra:inset 0 1px 0 rgba(255,255,255,.22),0 18px 50px rgba(0,0,0,.35);
}

/* ===== Base / tipografia ===== */
body.tema-vidro{font-family:"Manrope","Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--vidro-fundo);color:var(--vidro-texto);font-variant-numeric:tabular-nums}
.tema-vidro h1,.tema-vidro h2,.tema-vidro h3,.tema-vidro .section-title,.tema-vidro .kpi .value,.tema-vidro .vidro-kpi .value{font-family:"Outfit","Manrope",sans-serif}
.tema-vidro .main{background:var(--vidro-fundo)}
.tema-vidro :focus-visible{outline:2px solid var(--vidro-azul);outline-offset:2px}

/* ===== Fundo: manchas de luz fixas (injetadas por js/tema-vidro.js) ===== */
.tema-blobs{position:fixed;top:0;right:0;bottom:0;left:250px;overflow:hidden;pointer-events:none;z-index:0}
.tema-blobs span{position:absolute;border-radius:50%;filter:blur(70px)}
.tema-blobs .b1{width:520px;height:520px;background:var(--vidro-azul-luz);opacity:.55;top:-140px;left:-100px}
.tema-blobs .b2{width:420px;height:420px;background:var(--vidro-dourado-luz);opacity:.28;top:28%;right:-110px}
.tema-blobs .b3{width:480px;height:480px;background:var(--vidro-agua-luz);opacity:.45;bottom:-160px;left:18%}
.tema-blobs .b4{width:380px;height:380px;background:var(--vidro-roxo-luz);opacity:.4;bottom:8%;right:14%}
.tema-vidro .topbar,.tema-vidro .content{position:relative;z-index:1}

/* ===== Barra lateral: azul-escuro harmonizado, borda clara à direita ===== */
.tema-vidro .sidebar{background:linear-gradient(180deg,rgba(7,16,31,.96),rgba(10,26,53,.94));border-right:1px solid rgba(255,255,255,.1)}
.tema-vidro .sidebar nav a.active{border-radius:12px;box-shadow:0 0 18px rgba(217,178,92,.35),inset 0 1px 0 rgba(255,255,255,.35)}

/* ===== Cabeçalho ===== */
.tema-vidro .topbar{background:rgba(8,20,40,.55);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.1)}
.tema-vidro .topbar h1{color:var(--vidro-texto);font-weight:700}
.tema-vidro .topbar .sub{color:var(--vidro-texto-2)}
.tema-vidro .back-arrow{color:var(--vidro-azul)}
.tema-vidro .eyebrow{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vidro-dourado);font-weight:700;margin-bottom:2px}
.tema-vidro .user-chip{color:var(--vidro-texto)}

/* ===== vidro-cartao ===== */
.tema-vidro .card,.tema-vidro .vidro-cartao{position:relative;background:var(--vidro-gradiente);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border:1px solid var(--vidro-borda);border-radius:24px;box-shadow:var(--vidro-sombra);color:var(--vidro-texto)}
.tema-vidro .card::before,.tema-vidro .vidro-cartao::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 60% at 10% -10%,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.tema-vidro .card h3,.tema-vidro .vidro-cartao h3{color:var(--vidro-texto);font-weight:700}
.tema-vidro .section-title{color:var(--vidro-texto);font-weight:700}
.tema-vidro .card .chart-sub,.tema-vidro .vidro-cartao .chart-sub{font-size:.76rem;color:var(--vidro-texto-3);margin:-8px 0 12px}

/* ===== vidro-nota ===== */
.tema-vidro .note-banner,.tema-vidro .vidro-nota{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:var(--vidro-texto-2);border-radius:14px}
.tema-vidro .note-banner.err,.tema-vidro .vidro-nota.erro{background:rgba(242,113,127,.12);border-color:rgba(242,113,127,.35);color:var(--vidro-vermelho)}
.tema-vidro .note-banner.warn,.tema-vidro .vidro-nota.alerta{background:rgba(243,185,78,.12);border-color:rgba(243,185,78,.35);color:var(--vidro-ambar)}

/* ===== vidro-kpi ===== */
.tema-vidro .kpi,.tema-vidro .vidro-kpi{padding:22px 22px 20px;--tone:var(--vidro-azul)}
.tema-vidro [data-tone="gold"]{--tone:var(--vidro-dourado)}
.tema-vidro [data-tone="green"]{--tone:var(--vidro-verde)}
.tema-vidro [data-tone="blue"]{--tone:var(--vidro-azul)}
.tema-vidro [data-tone="red"]{--tone:var(--vidro-vermelho)}
.tema-vidro [data-tone="amber"]{--tone:var(--vidro-ambar)}
.tema-vidro .kpi .label,.tema-vidro .vidro-kpi .label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vidro-texto-2);font-weight:700;display:flex;align-items:center;gap:8px}
.tema-vidro .kpi .dot,.tema-vidro .vidro-kpi .dot{width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:0 0 10px var(--tone);flex-shrink:0}
.tema-vidro .kpi .value,.tema-vidro .vidro-kpi .value{font-size:2rem;font-weight:700;color:var(--tone);margin-top:10px;line-height:1.1}
.tema-vidro .kpi .ctx,.tema-vidro .vidro-kpi .ctx{font-size:.78rem;color:var(--vidro-texto-3);margin-top:6px}
.tema-vidro .delta.up{color:var(--vidro-verde)}
.tema-vidro .delta.down{color:var(--vidro-vermelho)}

/* ===== vidro-grafico / vidro-vazio ===== */
.tema-vidro .chart-box,.tema-vidro .vidro-grafico{position:relative;height:320px}
.tema-vidro .chart-box.small{height:220px}
.tema-vidro .chart-empty,.tema-vidro .vidro-vazio,.tema-vidro .empty-state{display:none;color:var(--vidro-texto-3);font-size:.85rem;text-align:center;padding:60px 0}
.tema-vidro .vidro-vazio.visivel,.tema-vidro .empty-state.visivel{display:block}

/* ===== vidro-tabela / vidro-badge ===== */
.tema-vidro table{color:var(--vidro-texto)}
.tema-vidro th{color:var(--vidro-texto-3);border-bottom:1px solid rgba(255,255,255,.14)}
.tema-vidro td{border-bottom:1px solid rgba(255,255,255,.08)}
.tema-vidro tr:hover td{background:rgba(255,255,255,.04)}
.tema-vidro .badge,.tema-vidro .vidro-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;border:1px solid transparent}
.tema-vidro .badge.green,.tema-vidro .vidro-badge.verde{background:rgba(79,214,176,.14);color:var(--vidro-verde);border-color:rgba(79,214,176,.35)}
.tema-vidro .badge.gold,.tema-vidro .vidro-badge.ambar{background:rgba(243,185,78,.14);color:var(--vidro-ambar);border-color:rgba(243,185,78,.35)}
.tema-vidro .badge.red,.tema-vidro .vidro-badge.vermelho{background:rgba(242,113,127,.14);color:var(--vidro-vermelho);border-color:rgba(242,113,127,.35)}
.tema-vidro .badge.blue,.tema-vidro .vidro-badge.azul{background:rgba(111,168,255,.14);color:var(--vidro-azul);border-color:rgba(111,168,255,.35)}
.tema-vidro .badge.gray,.tema-vidro .vidro-badge.cinza{background:rgba(255,255,255,.07);color:var(--vidro-texto-2);border-color:rgba(255,255,255,.16)}
.tema-vidro .btn-link{color:var(--vidro-azul)}
.tema-vidro .btn-link.danger{color:var(--vidro-vermelho)}

/* ===== vidro-botao ===== */
.tema-vidro .vidro-botao{padding:9px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:var(--vidro-texto);font-weight:700;font-size:.85rem;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s}
.tema-vidro .vidro-botao:hover{background:rgba(255,255,255,.14)}
.tema-vidro .vidro-botao.primario{background:rgba(217,178,92,.22);border-color:rgba(217,178,92,.55);color:var(--vidro-dourado)}
.tema-vidro .vidro-botao.perigo{background:rgba(242,113,127,.12);border-color:rgba(242,113,127,.4);color:var(--vidro-vermelho)}
.tema-vidro .vidro-botao:disabled{opacity:.5;cursor:not-allowed}

/* ===== vidro-input / vidro-select (e formulários dentro de cartões/modais) ===== */
.tema-vidro .card label,.tema-vidro .vidro-cartao label,.tema-vidro .modal-box label{color:var(--vidro-texto-2)}
.tema-vidro .card input,.tema-vidro .card select,.tema-vidro .card textarea,
.tema-vidro .modal-box input,.tema-vidro .modal-box select,.tema-vidro .modal-box textarea,
.tema-vidro .vidro-input,.tema-vidro .vidro-select{background:rgba(255,255,255,.06);color:var(--vidro-texto);border:1px solid rgba(255,255,255,.18);border-radius:10px;font-family:inherit}
.tema-vidro .card input::placeholder,.tema-vidro .modal-box input::placeholder,.tema-vidro .vidro-input::placeholder{color:var(--vidro-texto-3)}
.tema-vidro select option{background:#0f2040;color:var(--vidro-texto)}
.tema-vidro .card input[type="checkbox"]{width:auto}
.tema-vidro .form-msg.ok{color:var(--vidro-verde)}
.tema-vidro .form-msg.err{color:var(--vidro-vermelho)}

/* ===== Abas / filtros em pílula ===== */
.tema-vidro .tab-btn,.tema-vidro .pill-filter button{padding:8px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--vidro-texto-2);font-weight:700;cursor:pointer;font-size:.85rem;font-family:inherit}
.tema-vidro .tab-btn.active,.tema-vidro .pill-filter button.active{background:rgba(217,178,92,.18);border-color:rgba(217,178,92,.55);color:var(--vidro-dourado)}

/* ===== Cartões de módulo (Central da Intranet) ===== */
.tema-vidro .module-card{position:relative;background:var(--vidro-gradiente);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border:1px solid var(--vidro-borda);border-radius:24px;box-shadow:var(--vidro-sombra);padding:26px;color:var(--vidro-texto);transition:transform .2s,border-color .2s,box-shadow .2s;--tone:var(--vidro-azul)}
.tema-vidro .module-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 60% at 10% -10%,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.tema-vidro .module-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 22px 56px rgba(0,0,0,.45)}
.tema-vidro .module-card .ico{width:50px;height:50px;border-radius:50%;font-size:1.3rem;color:var(--vidro-texto);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),rgba(255,255,255,.14) 45%,rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 22px rgba(0,0,0,.35),0 0 20px var(--tone)}
.tema-vidro .module-card h3{color:var(--vidro-texto);font-weight:700}
.tema-vidro .module-card p{color:var(--vidro-texto-2)}
.tema-vidro .module-card .status{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tone)}
.tema-vidro .module-card .status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:0 0 10px var(--tone)}

/* ===== Outros componentes legados ===== */
.tema-vidro .progress-bar{background:rgba(255,255,255,.1)}
.tema-vidro .progress-bar .fill{background:linear-gradient(90deg,var(--vidro-azul),var(--vidro-verde))}
.tema-vidro .social-row{border-bottom-color:rgba(255,255,255,.08)}

/* ===== Modais ===== */
.tema-vidro .modal-overlay{background:rgba(4,10,22,.65);backdrop-filter:blur(6px)}
.tema-vidro .modal-box{background:var(--vidro-gradiente),#0d1c38;border:1px solid var(--vidro-borda);border-radius:24px;box-shadow:var(--vidro-sombra),0 18px 50px rgba(0,0,0,.5);color:var(--vidro-texto)}
.tema-vidro .modal-box h3{color:var(--vidro-texto)}
.tema-vidro .modal-box [style*="color:#66768a"],.tema-vidro .modal-box [style*="color:#8a97a6"]{color:var(--vidro-texto-3)!important}
.tema-vidro .modal-box hr{border-top-color:rgba(255,255,255,.12)!important}
.tema-vidro .modal-box img[alt="QR Code Pix"]{background:#fff}

/* ===== Mini calendário ===== */
.tema-vidro .mini-calendar{background:#0d1c38;border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 36px rgba(0,0,0,.5);color:var(--vidro-texto)}
.tema-vidro .mc-header button{color:var(--vidro-texto)}
.tema-vidro .mc-header button:hover,.tema-vidro .mc-day:hover,.tema-vidro .mc-month:hover{background:rgba(255,255,255,.1)}
.tema-vidro .mc-title{color:var(--vidro-texto);border-bottom-color:var(--vidro-dourado)}
.tema-vidro .mc-title .mc-year,.tema-vidro .mc-weekdays{color:var(--vidro-texto-3)}
.tema-vidro .mc-day.mc-selected,.tema-vidro .mc-month.mc-selected{background:var(--vidro-dourado);color:var(--vidro-fundo)}
.tema-vidro .mc-day.mc-disabled{color:#55637f}
.tema-vidro .mc-month{background:rgba(255,255,255,.06)}

/* ===== Desempenho: opção de desligar o blur numa tela lenta (body.sem-blur) ===== */
.tema-vidro.sem-blur .card,.tema-vidro.sem-blur .vidro-cartao,.tema-vidro.sem-blur .module-card,.tema-vidro.sem-blur .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,34,66,.82)}

/* ===== Responsivo ===== */
@media(max-width:720px){
  .tema-blobs{left:0}
  .tema-vidro .content{padding:20px 16px 50px}
  .tema-vidro .topbar{padding:14px 16px}
  .tema-vidro .card,.tema-vidro .module-card{backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
  /* Tabelas que optam por .vidro-tabela (com data-label nas células) viram
     cartões empilhados no celular, sem rolagem horizontal. */
  .vidro-tabela thead{display:none}
  .vidro-tabela,.vidro-tabela tbody,.vidro-tabela tr,.vidro-tabela td{display:block;width:100%}
  .vidro-tabela tr{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .vidro-tabela tr:last-child{border-bottom:none}
  .vidro-tabela td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:5px 0;text-align:right}
  .vidro-tabela td::before{content:attr(data-label);color:var(--vidro-texto-3);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;text-align:left;flex-shrink:0}
  .vidro-tabela td:empty{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tema-vidro .module-card{transition:none}
  .tema-vidro .module-card:hover{transform:none}
}