/* Temas · claro/oscuro por hora local (theme.js). El tablero es oscuro por base; aquí se define el claro.
   El login es claro por base; aquí se define el oscuro. El botón NO ocupa espacio del tablero: vive en la
   cabecera auto-oculta (fija, superpuesta) y en el login es un icono absoluto en una esquina. */

/* ---------- botón ---------- */
.ntema{display:inline-flex;align-items:center;justify-content:center;gap:.35em;cursor:pointer;line-height:1}
.ntema svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ntema svg .fill{fill:currentColor;stroke:none}
.xtema{padding:.4em .55em}
.login-left{position:relative}
.login{position:relative}
.ntema-login{position:absolute;z-index:5;top:max(12px,env(safe-area-inset-top));right:12px;width:34px;height:34px;padding:0;border-radius:50%;
  border:1px solid var(--borde);background:rgba(255,255,255,.85);color:var(--tx2);box-shadow:0 2px 8px #171a1b14;-webkit-tap-highlight-color:transparent}
.ntema-login:hover{color:var(--primario);border-color:var(--primario-100)}
.ntema-login svg{width:17px;height:17px}
.ntema:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}

/* logos de la cabecera */
.xbrand .lg-cla{display:none}
html[data-theme=light] .xbrand .lg-osc{display:none}
html[data-theme=light] .xbrand .lg-cla{display:block}

/* ---------- TABLERO CLARO ---------- */
html[data-theme=light] body:has(#app:not(.hidden)){background:#eef3f9}
html[data-theme=light] #app{
  --bg0:#eef3f9;--bg1:#f7f9fc;--tx:#0f1d31;--tx2:#3a4d64;--mu:#5c6f86;
  --cy:#0284c7;--cy2:#0369a1;--pu:#6d4fa0;--pu2:#7b5bb0;--gold:#a8820f;--gold2:#8f6d06;
  --ok:#0f8f80;--warn:#b7700a;--bad:#d42a2a;--info:#0369a1;
  --glass:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
  --edge:linear-gradient(135deg,rgba(2,132,199,.35),rgba(109,79,160,.16) 40%,rgba(2,132,199,.06) 70%,rgba(123,91,176,.3));
  color-scheme:light}
html[data-theme=dark] #app{color-scheme:dark}
html[data-theme=light] #app .xbg{
  background:radial-gradient(60vw 50vh at 10% -6%,rgba(14,165,233,.14),transparent 60%),radial-gradient(60vw 55vh at 92% 4%,rgba(130,99,167,.13),transparent 60%),radial-gradient(80vw 60vh at 50% 110%,rgba(32,93,127,.1),transparent 60%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23205d7f' stroke-opacity='.07'/%3E%3C/svg%3E"),linear-gradient(180deg,var(--bg1),var(--bg0))}
html[data-theme=light] .xcard,html[data-theme=light] .xhead,html[data-theme=light] .xhero,html[data-theme=light] .xarea,html[data-theme=light] .xkpi,html[data-theme=light] .xnode{
  box-shadow:0 .4em 1.4em rgba(32,60,100,.1),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme=light] #app .xhead{background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(244,247,251,.95));box-shadow:0 1em 2.4em rgba(32,60,100,.22),0 0 1.2em rgba(2,132,199,.1)}
html[data-theme=light] .xhint{color:#0f1d31;background:rgba(255,255,255,.96);border-color:rgba(2,132,199,.4)}
/* texto que era blanco fijo */
html[data-theme=light] .xcard>h3,html[data-theme=light] .xast b,html[data-theme=light] .xen,html[data-theme=light] .xcomms b,
html[data-theme=light] .xcat b,html[data-theme=light] .xbtn:hover{color:var(--tx)}
html[data-theme=light] .xring .rl,html[data-theme=light] .xgauge .gt{fill:var(--tx)}
html[data-theme=light] .xbt b{background:linear-gradient(90deg,#614393,#205d7f 55%,#0284c7);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=light] #app .ej{color:#6b7d92}
html[data-theme=light] .xchip.pri{color:#5a3d8c}
html[data-theme=light] .xcat.pri b{color:#5a3d8c}
html[data-theme=light] .xini{color:var(--tx);background:linear-gradient(#fff,#fff) padding-box,conic-gradient(var(--cy),var(--pu2),var(--cy)) border-box}
html[data-theme=light] .xav img{border-color:#fff}
html[data-theme=light] .xtabs button[aria-current="page"]{color:var(--tx)}
/* líneas y rellenos translúcidos blancos -> tinta azul tenue */
html[data-theme=light] .xbt span,html[data-theme=light] .xuser{border-color:rgba(15,29,49,.14)}
html[data-theme=light] .xbtn{border-color:rgba(15,29,49,.2)}
html[data-theme=light] .xring .rk,html[data-theme=light] .xgauge .gk{stroke:rgba(15,29,49,.09)}
html[data-theme=light] .xbar,html[data-theme=light] .xstack{background:rgba(15,29,49,.08)}
html[data-theme=light] .xchip.mute{border-color:rgba(15,29,49,.16);background:rgba(15,29,49,.04)}
html[data-theme=light] .xev,html[data-theme=light] .xagent,html[data-theme=light] .xproj,html[data-theme=light] .xmail,html[data-theme=light] .xcat{
  border-color:rgba(15,29,49,.09);background:rgba(255,255,255,.6)}
html[data-theme=light] .xer,html[data-theme=light] .xrow{border-color:rgba(15,29,49,.07)}
html[data-theme=light] .xbars{border-color:rgba(15,29,49,.12)}
html[data-theme=light] .xcomms span{background:rgba(2,132,199,.06);border-color:rgba(2,132,199,.25)}

/* ---------- LOGIN OSCURO (el panel derecho y las fotos no se tocan) ---------- */
html[data-theme=dark] body:has(#login:not(.hidden)){background:#040914}
html[data-theme=dark] .login{--tx:#e7eef8;--tx2:#b7c6d8;--muted:#8a9db3;--borde:#22324a;background:#071226;color-scheme:dark}
html[data-theme=dark] .lmain h1{background:linear-gradient(90deg,#a78bdb 0%,#c9b6e6 40%,#38c6ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=dark] .kicker{color:#a78bdb}
html[data-theme=dark] .gbtn{background:#0d1b33;color:var(--tx);border-color:#22324a}
html[data-theme=dark] .gbtn:hover{border-color:#38c6ff;box-shadow:0 8px 24px rgba(56,198,255,.18)}
html[data-theme=dark] .lmark{box-shadow:0 4px 14px rgba(0,0,0,.5)}
html[data-theme=dark] .ntema-login{background:rgba(13,27,51,.85);border-color:#22324a;color:#b7c6d8}
html[data-theme=dark] .ntema-login:hover{color:#38c6ff;border-color:#38c6ff}
html[data-theme=light] .xbv i{background:linear-gradient(180deg,rgba(2,132,199,.85),rgba(109,79,160,.45))}
html[data-theme=light] .xbv.last i{background:linear-gradient(180deg,#b8900f,rgba(168,130,15,.45))}
html[data-theme=light] .xbv em{text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* ---------- alertas, equipo y ficha (claro) ---------- */
html[data-theme=light] .xalerts{background:linear-gradient(165deg,rgba(255,255,255,.95),rgba(255,247,247,.85) 40%,rgba(246,242,252,.85))}
html[data-theme=light] .xal,html[data-theme=light] button.xper,html[data-theme=light] .xm-r,html[data-theme=light] .xsv,html[data-theme=light] .xm-s{border-color:rgba(15,29,49,.1);background:rgba(255,255,255,.65)}
html[data-theme=light] .xal.alta{background:rgba(212,42,42,.07);border-color:rgba(212,42,42,.3)}
html[data-theme=light] .xal.media{background:rgba(183,112,10,.06)}
html[data-theme=light] .xal.res{background:transparent}
html[data-theme=light] .xal-ic{background:rgba(15,29,49,.04);border-color:rgba(15,29,49,.1)}
html[data-theme=light] .xsv.alta{border-color:rgba(212,42,42,.35)}html[data-theme=light] .xsv.media{border-color:rgba(183,112,10,.35)}
html[data-theme=light] .xteamk span{background:rgba(2,132,199,.06);border-color:rgba(2,132,199,.22)}
html[data-theme=light] .xchip.gold{color:#7a5c05;border-color:rgba(168,130,15,.45);background:rgba(168,130,15,.1)}
html[data-theme=light] .xmodal-bg{background:rgba(15,29,49,.35)}
html[data-theme=light] .xmodal-p{background:linear-gradient(160deg,rgba(255,255,255,.99),rgba(244,247,251,.98));box-shadow:0 1.6em 4em rgba(32,60,100,.3),0 0 1.6em rgba(2,132,199,.12)}
html[data-theme=light] .xm-h{border-color:rgba(2,132,199,.2)}
html[data-theme=light] .xm-x{border-color:rgba(15,29,49,.2)}
html[data-theme=light] .xm-s h4,html[data-theme=light] .xcard h4{color:#0369a1}
html[data-theme=light] .xvacio{border-color:rgba(92,111,134,.4)}