/* RIB Administrativo — tema "escuro com vidro" + profundidade 3D
   Carregado por último: redefine o tema escuro e acrescenta os efeitos de profundidade.
   O tema claro continua existindo (botão sol/lua no topo). */

/* ================= Paleta do tema escuro ================= */
:root[data-theme="dark"] {
  --bg: #050a14; --sup: #0d1628; --sup-2: #111d33; --borda: rgba(148,178,255,.13); --borda-forte: rgba(148,178,255,.24);
  --txt: #eaf1fb; --txt-2: #b3c1d8; --txt-3: #8798b3;
  --pri: #5b9dff; --pri-hover: #7db3ff; --pri-suave: rgba(59,130,246,.18); --pri-txt: #ffffff;
  --verde: #4ade80; --verde-bg: rgba(34,197,94,.15); --amarelo: #fbbf24; --amarelo-bg: rgba(245,158,11,.15); --laranja: #fb923c; --laranja-bg: rgba(249,115,22,.15);
  --vermelho: #f87171; --vermelho-bg: rgba(239,68,68,.16); --roxo: #a78bfa; --roxo-bg: rgba(139,92,246,.17); --cinza: #b3c1d8; --cinza-bg: rgba(148,163,184,.12);
  --lateral-bg: rgba(8,14,27,.62); --lateral-txt: #a9bad6; --lateral-ativo: rgba(91,157,255,.16);
  --sombra: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -26px rgba(0,0,0,.85);
  --sombra-alta: 0 1px 0 rgba(255,255,255,.07) inset, 0 30px 80px -20px rgba(0,0,0,.8);
  --vidro: linear-gradient(155deg, rgba(30,48,86,.82), rgba(12,20,38,.88) 55%, rgba(10,17,33,.9));
  --vidro-forte: linear-gradient(155deg, #1c2e54, #0c1528);
  --desfoque: blur(18px) saturate(1.35);
  --raio: 16px; --raio-p: 10px;
  color-scheme: dark;
}
:root[data-theme="dark"].leve { --desfoque: none; --vidro: linear-gradient(155deg, #18284a, #0e182c); --vidro-forte: linear-gradient(155deg, #1b2c50, #0d172b); }

/* ================= Fundo: aurora fixa atrás de tudo ================= */
:root[data-theme="dark"] body { background: var(--bg); }
:root[data-theme="dark"] body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; transform: translateZ(0);
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(37,99,235,.34), transparent 62%),
    radial-gradient(760px 560px at 96% 8%, rgba(8,145,178,.22), transparent 60%),
    radial-gradient(900px 700px at 78% 108%, rgba(79,70,229,.2), transparent 62%),
    radial-gradient(700px 520px at 0% 100%, rgba(14,116,144,.16), transparent 60%),
    #050a14; }
/* malha em perspectiva bem discreta, como um "chão" ao fundo */
:root[data-theme="dark"] body::after { content: ''; position: fixed; left: -20%; right: -20%; bottom: -8%; height: 46vh; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(96,165,250,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,.13) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(520px) rotateX(64deg) translateZ(0); transform-origin: 50% 100%; contain: strict;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 85%); mask-image: linear-gradient(to top, #000, transparent 85%); }
:root[data-theme="dark"].leve body::after { display: none; }

/* ================= Vidro nos blocos principais ================= */
:root[data-theme="dark"] :is(.cartao, .pn-bloco, .ind) { background: var(--vidro); border-color: var(--borda); box-shadow: var(--sombra); }
:root[data-theme="dark"] .ind { background: radial-gradient(300px circle at var(--lx, -400px) var(--ly, -400px), rgba(125,175,255,.13), transparent 62%), var(--vidro); }
:root[data-theme="dark"] :is(.cartao, .pn-bloco) { transition: border-color .25s, box-shadow .25s; }
:root[data-theme="dark"] :is(.cartao, .pn-bloco):hover { border-color: rgba(148,188,255,.26); }
:root[data-theme="dark"] .cartao .cab { border-bottom-color: rgba(148,178,255,.1); }
/* cartão dentro de cartão não desfoca de novo (pesa e escurece) */
:root[data-theme="dark"] :is(.cartao, .pn-bloco, .modal) :is(.cartao, .ind) { background: rgba(255,255,255,.035); box-shadow: none; }

/* Menu lateral e topo */
:root[data-theme="dark"] .lateral { background: linear-gradient(180deg, #0d182e, #070c18); border-right: 1px solid var(--borda); }
:root[data-theme="dark"] .lateral a { position: relative; transition: background .2s, color .2s; }
:root[data-theme="dark"] .lateral a:hover { background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .lateral a.ativo { background: linear-gradient(90deg, rgba(59,130,246,.32), rgba(34,211,238,.08)); box-shadow: inset 0 0 0 1px rgba(125,175,255,.22), 0 10px 24px -14px rgba(59,130,246,.9); }
:root[data-theme="dark"] .lateral a.ativo::before { content: ''; position: absolute; left: -12px; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(#60a5fa, #22d3ee); box-shadow: 0 0 14px #38bdf8; }
:root[data-theme="dark"] .lateral a.ativo svg { color: #7dd3fc; }
:root[data-theme="dark"] .lateral .grupo { color: #6f86ad; }
:root[data-theme="dark"] .topo { background: rgba(6,11,22,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom-color: var(--borda); }
:root[data-theme="dark"].leve .topo { background: #070d19; }
:root[data-theme="dark"] .avatar { background: linear-gradient(140deg, #2563eb, #0891b2); color: #fff; box-shadow: 0 6px 16px -6px rgba(37,99,235,.9); }
:root[data-theme="dark"] .nav-baixo { background: rgba(8,14,27,.72); border-color: var(--borda); }

/* Botões */
:root[data-theme="dark"] .btn { background: rgba(255,255,255,.055); border-color: var(--borda-forte); transition: background .15s, border-color .15s, transform .15s, box-shadow .2s; }
:root[data-theme="dark"] .btn:hover:not(:disabled) { background: rgba(255,255,255,.1); border-color: rgba(170,200,255,.4); transform: translateY(-1px); }
:root[data-theme="dark"] .btn:active:not(:disabled) { transform: translateY(1px); }
:root[data-theme="dark"] .btn.pri { background: linear-gradient(135deg, #2f6fe4, #1aa3c8); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 26px -12px rgba(37,120,235,.95); }
:root[data-theme="dark"] .btn.pri:hover:not(:disabled) { background: linear-gradient(135deg, #3f7ff0, #22b8dc); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 16px 32px -12px rgba(37,140,235,1); }
:root[data-theme="dark"] .btn.fantasma { background: transparent; border-color: transparent; }
:root[data-theme="dark"] .btn.fantasma:hover:not(:disabled) { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .btn.perigo { border-color: rgba(248,113,113,.4); }

/* Campos */
:root[data-theme="dark"] :is(input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=search], input[type=number], input[type=tel], input[type=url], select, textarea) {
  background: rgba(4,9,20,.5); border-color: var(--borda-forte); }
:root[data-theme="dark"] :is(input, select, textarea):focus { border-color: #5b9dff; box-shadow: 0 0 0 3px rgba(91,157,255,.22), 0 0 22px -6px rgba(56,189,248,.6); }
:root[data-theme="dark"] select option { background: #0d1628; color: var(--txt); }
:root[data-theme="dark"] ::placeholder { color: #6f809c; }

/* Tabelas, abas, chips, avisos */
:root[data-theme="dark"] table.tab th { background: rgba(255,255,255,.035); border-bottom-color: var(--borda); }
:root[data-theme="dark"] table.tab td { border-bottom-color: rgba(148,178,255,.08); }
:root[data-theme="dark"] table.tab tbody tr:hover { background: rgba(91,157,255,.08); }
:root[data-theme="dark"] .abas { border-bottom-color: var(--borda); }
:root[data-theme="dark"] .abas .indicador { background: linear-gradient(90deg, #60a5fa, #22d3ee); box-shadow: 0 0 14px rgba(56,189,248,.8); }
:root[data-theme="dark"] .chip { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
:root[data-theme="dark"] .alerta { border: 1px solid var(--borda); }
:root[data-theme="dark"] .toast { background: var(--vidro-forte); color: var(--txt); border: 1px solid var(--borda-forte); }
:root[data-theme="dark"] .toast.erro { background: linear-gradient(135deg, #b91c1c, #7f1d1d); color: #fff; }
:root[data-theme="dark"] .toast.ok { background: linear-gradient(135deg, #15803d, #0f5132); color: #fff; }

/* Modais: vidro forte, fundo desfocado, entrada em 3D */
:root[data-theme="dark"] .modal-fundo { background: rgba(2,6,14,.74); }
:root[data-theme="dark"].leve .modal-fundo { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2,6,14,.8); }
:root[data-theme="dark"] .modal { background: var(--vidro-forte); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-alta); }
:root[data-theme="dark"] .modal .m-cab, :root[data-theme="dark"] .modal .m-rod { border-color: var(--borda); }
.modal-fundo { perspective: 1400px; }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .modal { animation: modal-3d .42s cubic-bezier(.16,1,.3,1) both; transform-origin: 50% 100%; }
}
@keyframes modal-3d { from { opacity: 0; transform: translateY(26px) translateZ(-120px) rotateX(9deg); } to { opacity: 1; transform: none; } }

/* Barras de rolagem */
:root[data-theme="dark"] * { scrollbar-color: rgba(148,178,255,.28) transparent; }
:root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(148,178,255,.22); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(148,178,255,.4); background-clip: padding-box; border: 2px solid transparent; }

/* Painel */
:root[data-theme="dark"] .pn-kpi { background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--tom) 20%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--tom) 18%, #16264a), #0c1529 62%);
  border-color: color-mix(in srgb, var(--tom) 34%, rgba(148,178,255,.14));
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 22px 40px -24px color-mix(in srgb, var(--tom) 75%, transparent); }
:root[data-theme="dark"] .pn-kpi .ico { box-shadow: 0 8px 18px -8px var(--tom); transform: translateZ(26px); }
:root[data-theme="dark"] .pn-kpi .val { transform: translateZ(34px); text-shadow: 0 0 26px color-mix(in srgb, var(--tom) 55%, transparent); }
:root[data-theme="dark"] .pn-kpi .rot, :root[data-theme="dark"] .pn-kpi .ext { transform: translateZ(14px); }
:root[data-theme="dark"] .pn-hero { border: 1px solid rgba(148,188,255,.2); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 40px 80px -40px rgba(37,99,235,.7); }

/* ================= Profundidade em todas as telas ================= */
/* indicadores inclinam com o mouse; o conteúdo "salta" em camadas */
.indicadores, .teste-grade { perspective: 900px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ind { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .2s ease-out, box-shadow .25s, border-color .25s; }
  .ind:hover { box-shadow: 0 26px 44px -26px color-mix(in srgb, var(--tom, var(--pri)) 80%, transparent), var(--sombra); border-color: color-mix(in srgb, var(--tom, var(--pri)) 45%, var(--borda)); }
  .ind .val { transform: translateZ(26px); } .ind .rot { transform: translateZ(14px); } .ind .ext { transform: translateZ(8px); }
}
:root[data-theme="dark"] .ind::before { background: linear-gradient(var(--tom, var(--pri)), transparent); box-shadow: 0 0 16px var(--tom, var(--pri)); }
:root[data-theme="dark"] .ind .val { text-shadow: 0 0 24px color-mix(in srgb, var(--tom, var(--pri)) 45%, transparent); }

/* troca de página: a nova página chega "de dentro da tela" */
.principal { perspective: 1600px; perspective-origin: 50% 240px; }
@media (prefers-reduced-motion: no-preference) {
  .conteudo.saindo { animation: pg-sai .16s cubic-bezier(.4,0,.2,1) both; }
  .conteudo.entrando { animation: pg-entra .45s cubic-bezier(.16,1,.3,1) backwards; transform-origin: 50% 0; }
}
@keyframes pg-sai { to { opacity: 0; transform: translateY(-8px) scale(.99); } }
@keyframes pg-entra { from { opacity: 0; transform: translateZ(-90px) rotateX(4deg) translateY(22px); } to { opacity: 1; transform: none; } }

/* ================= Rosca 3D do painel ================= */
.pn-anel .r3d { position: relative; width: 210px; height: 190px; flex: none; cursor: grab; touch-action: pan-y; }
.pn-anel .r3d canvas { width: 100%; height: 100%; display: block; }
.pn-anel .r3d .meio { position: absolute; left: 0; right: 0; top: 30%; translate: 0 -50%; text-align: center; pointer-events: none; }
.pn-anel .r3d .meio small { display: none; }
.pn-anel .r3d .meio b { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.pn-anel .r3d .meio small { color: var(--txt-3); font-size: 12px; }
.pn-anel li { border-radius: 8px; padding: 3px 8px; margin: -3px -8px; transition: background .2s; cursor: default; }
.pn-anel li.foco { background: color-mix(in srgb, var(--c) 16%, transparent); }

/* ================= Login 3D (sempre escuro, nos dois temas) ================= */
.tela-login { position: relative; overflow: hidden; background: #030712; color: #eaf1fb; perspective: 1300px; --px: 0; --py: 0;
  --txt: #eaf1fb; --txt-2: #b3c1d8; --txt-3: #8798b3; --pri: #5b9dff; --borda-forte: rgba(148,178,255,.26); --sup: #0d1628; --vermelho: #fca5a5; --vermelho-bg: rgba(239,68,68,.18); color-scheme: dark; }
.login-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tela-login .login-marca { background: none; z-index: 1; }
.tela-login .login-marca::after { display: none; }
.tela-login .login-marca > .selo, .tela-login .login-marca > div:not(.selo) { translate: calc(var(--px) * -10px) calc(var(--py) * -6px); transition: translate .5s cubic-bezier(.16,1,.3,1); }
.tela-login .login-marca h1 { font-size: 46px; color: #fff; text-shadow: 0 0 34px rgba(56,189,248,.55), 0 4px 18px rgba(0,0,0,.5); }
.tela-login .login-marca { overflow: visible; }
.tela-login .login-marca p { text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.tela-login .pv-login { translate: calc(var(--px) * 22px) calc(var(--py) * 10px); transition: translate .5s cubic-bezier(.16,1,.3,1); }
.tela-login .pv-login { right: 4%; }
.tela-login .pv-login img { filter: none; -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 26%); mask-image: linear-gradient(to right, transparent 2%, #000 26%); }
.tela-login .pv-login::before { background: radial-gradient(circle, rgba(56,189,248,.2), transparent 65%); }
.tela-login .login-form-area { position: relative; z-index: 2; transform-style: preserve-3d; }
.tela-login .login-cartao { max-width: 420px; padding: 34px 32px 28px; border-radius: 24px; position: relative;
  background: radial-gradient(380px circle at var(--lx, 50%) var(--ly, 0%), rgba(140,190,255,.16), transparent 62%), linear-gradient(155deg, rgba(40,64,112,.5), rgba(9,16,32,.66));
  border: 1px solid rgba(160,195,255,.24); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 50px 100px -30px rgba(0,0,0,.85), 0 0 80px -30px rgba(56,189,248,.55);
  transform: rotateY(calc(var(--px) * 5deg)) rotateX(calc(var(--py) * -4deg)); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.leve .tela-login .login-cartao { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(155deg, #1a2b4f, #0a1224); }
.tela-login .login-cartao h2 { font-size: 27px; transform: translateZ(34px); }
.tela-login .login-cartao .sub { transform: translateZ(22px); }
.tela-login .login-cartao form { transform: translateZ(14px); transform-style: preserve-3d; }
.tela-login .login-cartao .btn.pri { transform: translateZ(22px); background: linear-gradient(135deg, #2f6fe4, #1aa3c8); border-color: transparent; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 16px 30px -12px rgba(37,120,235,.95); }
.tela-login .login-cartao .btn.pri:hover { background: linear-gradient(135deg, #3f7ff0, #22b8dc); }
.tela-login .login-cartao .btn:not(.pri) { background: rgba(255,255,255,.06); border-color: rgba(148,178,255,.26); color: #eaf1fb; }
.tela-login .login-cartao :is(input[type=text], input[type=email], input[type=password]) { background: rgba(3,8,18,.55); border-color: rgba(148,178,255,.26); color: #eaf1fb; }
.tela-login .login-cartao :is(input):focus { border-color: #5b9dff; box-shadow: 0 0 0 3px rgba(91,157,255,.24), 0 0 24px -6px rgba(56,189,248,.7); }
.tela-login .login-cartao :is(label, .lembrar, .aviso-lgpd, .dica, p) { color: #b3c1d8; }
.tela-login .login-cartao h2 { color: #fff; }
@media (max-width: 820px) {
  .tela-login { perspective: none; }
  .tela-login .login-marca h1 { font-size: 28px; }
  .tela-login .login-cartao { transform: none; padding: 26px 22px; }
  .tela-login .login-form-area { align-items: start; padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .tela-login .login-cartao, .tela-login .pv-login, .tela-login .login-marca > * { transform: none; translate: none; transition: none; } }

/* ================= Modo leve (ligado sozinho quando o computador não acompanha) ================= */
.leve * { transition-duration: .01ms !important; }
.leve :is(.ind, .pn-kpi) { transform: none !important; }
.leve .ind .val, .leve .ind .rot, .leve .ind .ext, .leve .pn-kpi > * { transform: none !important; }
.leve .topo, .leve .tela-login .login-cartao { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.leve .conteudo.entrando, .leve .conteudo.saindo, .leve .modal, .leve .cascata > *, .leve table.tab tbody tr.surge { animation: none !important; }
.leve body::after { display: none; }
.leve :is(.ind, .pn-kpi, .pn-kpi .val, .ind .val) { text-shadow: none !important; }

/* Painel: elementos da estrada já são quase opacos — o desfoque por trás só custava processamento */
.pn-hero, .pn-hero * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }