/* Capa visual "cristal minimalista": más aire, vidrio con brillo, movimiento suave. Se carga después de app.css y app2.css. */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --spec:rgba(255,255,255,.46); --edge-a:rgba(255,255,255,.95); --edge-b:rgba(124,58,237,.16);
  --shadow:0 18px 44px -26px rgba(90,40,160,.34);
}
:root[data-tema="dark"]{ --spec:rgba(255,255,255,.07); --edge-a:rgba(255,255,255,.26); --edge-b:rgba(255,255,255,.05); --shadow:0 26px 60px -34px rgba(0,0,0,.85); }
@media (prefers-color-scheme:dark){ :root:not([data-tema="light"]){ --spec:rgba(255,255,255,.07); --edge-a:rgba(255,255,255,.26); --edge-b:rgba(255,255,255,.05); --shadow:0 26px 60px -34px rgba(0,0,0,.85); } }

@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-sale .18s var(--ease) both; }
::view-transition-new(root){ animation:vt-entra .32s var(--ease) both; }
@keyframes vt-sale{ to{ opacity:0; } }
@keyframes vt-entra{ from{ opacity:0; transform:translateY(6px); } }

body{ letter-spacing:.005em; -webkit-font-smoothing:antialiased; }
main{ gap:26px; padding-top:34px; }
h1{ font-size:2.05rem; font-weight:680; letter-spacing:-.025em; }
h2{ font-weight:640; letter-spacing:-.015em; }
.cab p{ max-width:68ch; line-height:1.5; }

/* vidrio: borde de luz, brillo arriba y sombra corta */
.glass{
  border:1px solid transparent; border-radius:22px;
  background:linear-gradient(180deg,var(--spec),transparent 46%) padding-box, linear-gradient(var(--glass),var(--glass)) padding-box,
             linear-gradient(150deg,var(--edge-a),var(--edge-b) 55%,var(--edge-a)) border-box;
  backdrop-filter:blur(22px) saturate(1.55); -webkit-backdrop-filter:blur(22px) saturate(1.55);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.35);
}
.aviso{ border-radius:16px; backdrop-filter:blur(14px); }
.cifra, .accion, .dato{ border-radius:22px; }

/* fondo vivo, lentísimo */
body::before{ animation:deriva-a 38s ease-in-out infinite alternate; }
body::after{ animation:deriva-b 46s ease-in-out infinite alternate; }
@keyframes deriva-a{ to{ transform:translate3d(9vw,7vh,0) scale(1.08); } }
@keyframes deriva-b{ to{ transform:translate3d(-8vw,-6vh,0) scale(1.1); } }

/* menú lateral */
.lado{ padding:24px 16px; }
nav.menu a{ border-radius:14px; transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
nav.menu a:hover{ transform:translateX(3px); }
nav.menu a.on{ box-shadow:0 14px 30px -14px var(--brand), inset 0 1px 0 rgba(255,255,255,.3); }
.marca b{ transition:transform .5s var(--ease); } .marca:hover b{ transform:rotate(-8deg) scale(1.06); }

/* botones */
.btn{ border-radius:14px; position:relative; overflow:hidden; transition:transform .2s var(--ease), box-shadow .25s var(--ease), filter .2s, background .25s; }
.btn:hover{ transform:translateY(-1px); filter:none; box-shadow:inset 0 1px 0 var(--glass-hi), 0 10px 24px -14px rgba(90,40,160,.45); }
.btn:active{ transform:translateY(0) scale(.975); }
.btn.primario{ box-shadow:0 14px 30px -14px var(--brand), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.primario::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s var(--ease); pointer-events:none; }
.btn.primario:hover::after{ transform:translateX(120%); }

/* campos */
input,select,textarea{ border-radius:14px; transition:border-color .2s, box-shadow .25s var(--ease), background .2s; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(234,88,12,.16); background:var(--glass-hi); }
.escaner{ border-width:1.5px; }

/* tablas y renglones */
tbody tr{ transition:background .2s; }
td{ border-top-color:rgba(124,58,237,.09); }
.renglon{ transition:background .2s, transform .25s var(--ease); } .renglon:hover{ transform:translateX(2px); }
.pastilla{ box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }
.tabs a{ transition:background .2s, transform .2s var(--ease); } .tabs a:hover{ transform:translateY(-1px); text-decoration:none; }

/* tarjetas que se levantan al pasar el mouse */
a.cifra, a.dato, a.accion, .accion{ transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s; }
a.cifra:hover, a.dato:hover, a.accion:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -22px rgba(90,40,160,.5); text-decoration:none; }

/* entrada escalonada de cada pantalla */
@keyframes sube{ from{ opacity:0; transform:translateY(14px) scale(.992); } to{ opacity:1; transform:none; } }
main > *{ animation:sube .65s var(--ease) both; }
main > *:nth-child(2){ animation-delay:.05s } main > *:nth-child(3){ animation-delay:.10s } main > *:nth-child(4){ animation-delay:.15s }
main > *:nth-child(5){ animation-delay:.20s } main > *:nth-child(6){ animation-delay:.25s } main > *:nth-child(n+7){ animation-delay:.30s }
.acciones > *, .rejilla > *, .props > *{ animation:sube .6s var(--ease) both; }
.acciones > *:nth-child(2), .rejilla > *:nth-child(2){ animation-delay:.08s } .acciones > *:nth-child(3), .rejilla > *:nth-child(3){ animation-delay:.16s }
.rejilla > *:nth-child(4){ animation-delay:.24s }

/* semáforo con un latido muy suave en lo urgente */
@keyframes latido{ 0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.38); } 60%{ box-shadow:0 0 0 7px rgba(220,38,38,0); } }
.pastilla.rojo, .pastilla.caducado{ animation:latido 2.6s ease-out infinite; }

/* avisos que entran con suavidad */
.aviso.ok, .aviso.mal{ animation:sube .5s var(--ease) both; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  body::before, body::after{ animation:none !important; }
}
@media print{ main > *{ animation:none !important; } }