/* ZABI · "Desert Aurora" theme — se carga después de los estilos de cada página */
:root{
  --bg:#06070D; --panel:rgba(255,255,255,.035); --line:rgba(255,255,255,.08);
  --text:#EEF1FA; --muted:#8B93AE;
  --accent:#E8B86B; --ink:#06121A;
  --teal:#2EE6D6; --violet:#7B61FF; --gold:#E8B86B;
  --ok:#3DDC97; --warn:#F5B451; --bad:#FF6B7A; --info:#7FB2FF;
  --grad:linear-gradient(120deg,var(--teal) 0%,var(--violet) 55%,var(--gold) 100%);
  --glass-blur:saturate(140%) blur(18px);
}
html{background:var(--bg)}
body{background:transparent!important;position:relative;isolation:isolate}

/* --- Aurora animada de fondo --- */
body::before,body::after{content:"";position:fixed;z-index:-2;pointer-events:none;border-radius:50%;filter:blur(80px);opacity:.85}
body::before{width:70vmax;height:70vmax;left:-20vmax;top:-30vmax;
  background:radial-gradient(circle at 30% 30%,rgba(46,230,214,.55),transparent 60%),radial-gradient(circle at 70% 60%,rgba(123,97,255,.45),transparent 60%);
  animation:zDrift1 22s ease-in-out infinite alternate}
body::after{width:60vmax;height:60vmax;right:-25vmax;bottom:-30vmax;
  background:radial-gradient(circle at 40% 40%,rgba(232,184,107,.40),transparent 60%),radial-gradient(circle at 70% 30%,rgba(123,97,255,.35),transparent 60%);
  animation:zDrift2 26s ease-in-out infinite alternate}
@keyframes zDrift1{to{transform:translate(18vmax,12vmax) rotate(35deg) scale(1.15)}}
@keyframes zDrift2{to{transform:translate(-16vmax,-10vmax) rotate(-30deg) scale(1.1)}}
.z-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
.z-glow{position:fixed;z-index:-1;width:420px;height:420px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(46,230,214,.10),transparent 65%);transition:opacity .4s;opacity:0}

/* --- Tipografía y marca --- */
body{font-feature-settings:"ss01","cv11";letter-spacing:-.005em}
h1{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:zShift 8s ease-in-out infinite alternate}
.logo{background:var(--grad)!important;background-size:200% 200%!important;color:var(--ink)!important;animation:zShift 6s ease-in-out infinite alternate;box-shadow:0 0 24px rgba(46,230,214,.35)}
@keyframes zShift{from{background-position:0% 50%}to{background-position:100% 50%}}

/* --- Barras superiores en vidrio --- */
header{background:rgba(6,7,13,.55);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);position:sticky;top:0;z-index:5}
.foot{background:rgba(6,7,13,.6);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}

/* --- Tarjetas de vidrio --- */
.kpi,section,.box,a.card,.pass,.bot,.card,.gate form{
  background:var(--panel)!important;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--line)!important;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 40px -24px rgba(0,0,0,.6)}
.kpi,section,.box,a.card{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.kpi::after,section::after,.box::after,a.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--grad);opacity:0;transition:opacity .35s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.kpi:hover,a.card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -20px rgba(46,230,214,.25)}
.kpi:hover::after,section:hover::after,.box:hover::after,a.card:hover::after{opacity:.7}
.kpi b{background:linear-gradient(180deg,#fff,#c9d2ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi.alert b{background:linear-gradient(180deg,#ffb3bb,var(--bad));-webkit-background-clip:text;background-clip:text}
.kpi b.z-bump{animation:zBump .6s cubic-bezier(.2,.8,.2,1)}
@keyframes zBump{40%{transform:scale(1.18);filter:drop-shadow(0 0 12px rgba(46,230,214,.7))}}

/* --- Botones con degradado y brillo --- */
.send,.btn:not(.ghost),.gate button,.card .acts .pri{
  background:var(--grad)!important;background-size:180% 100%!important;color:var(--ink)!important;border:0!important;
  position:relative;overflow:hidden;transition:background-position .5s,transform .2s,box-shadow .3s;box-shadow:0 8px 24px -10px rgba(123,97,255,.6)}
.send:hover,.btn:not(.ghost):hover,.gate button:hover,.card .acts .pri:hover{background-position:100% 0!important;box-shadow:0 10px 30px -8px rgba(46,230,214,.6)}
.send:active,.btn:active,.gate button:active{transform:scale(.97)}
.send::after,.btn:not(.ghost)::after,.gate button::after,.card .acts .pri::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:zShine 3.8s ease-in-out infinite}
@keyframes zShine{0%,65%{left:-60%}100%{left:130%}}
.chip,.sm,.btn.ghost,.mic,.spk,select{transition:border-color .25s,box-shadow .25s,background .25s}
.chip:hover,.sm:hover,.btn.ghost:hover,.mic:hover,.spk:hover{border-color:var(--teal)!important;box-shadow:0 0 0 3px rgba(46,230,214,.12)}

/* --- Inputs --- */
input:focus,#code:focus,.gate input:focus{border-color:var(--teal)!important;box-shadow:0 0 0 4px rgba(46,230,214,.14)}

/* --- Chat --- */
.me{background:var(--grad)!important;background-size:200% 100%!important;color:var(--ink)!important;box-shadow:0 10px 26px -14px rgba(123,97,255,.8)}
.msg,.card{animation:zRise .45s cubic-bezier(.2,.8,.2,1) both}
.card{border-left:3px solid transparent!important;border-image:var(--grad) 1!important;border-image-slice:0 0 0 1!important}
.card .code,.code{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.typing{animation:zFade 1.2s ease-in-out infinite alternate}
@keyframes zFade{from{opacity:.4}to{opacity:1}}
.mic.rec{background:var(--bad)!important;box-shadow:0 0 0 0 rgba(255,107,122,.6);animation:zRing 1.3s infinite}
@keyframes zRing{70%{box-shadow:0 0 0 14px rgba(255,107,122,0)}100%{box-shadow:0 0 0 0 rgba(255,107,122,0)}}

/* --- Feed y tablas --- */
.ev.new{animation:zFlash 2.2s ease-out}
@keyframes zFlash{0%{background:linear-gradient(90deg,rgba(46,230,214,.22),rgba(123,97,255,.12));box-shadow:inset 3px 0 0 var(--teal)}100%{background:transparent;box-shadow:inset 3px 0 0 transparent}}
tr{transition:background .2s}
tr:hover td{background:rgba(255,255,255,.025)}
.live{color:var(--ok)}
.live::before{box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:zRing2 1.8s infinite}
@keyframes zRing2{70%{box-shadow:0 0 0 8px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}

/* --- Recepción y pase --- */
.result.on{animation:zPop .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes zPop{from{transform:scale(.92);opacity:0}}
.r-ok{box-shadow:0 0 40px -10px rgba(61,220,151,.6)}
.qr{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 60px -10px rgba(46,230,214,.55)}
.pass{animation:zRise .6s cubic-bezier(.2,.8,.2,1) both}

/* --- Entrada escalonada --- */
.z-reveal{opacity:0;transform:translateY(14px)}
.z-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
@keyframes zRise{from{opacity:0;transform:translateY(10px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .z-reveal{opacity:1;transform:none}
}

/* --- Áreas seguras del iPhone (notch / isla / barra de inicio) en modo app instalada --- */
header{padding-top:calc(14px + env(safe-area-inset-top))!important;
  padding-left:max(18px, env(safe-area-inset-left))!important;padding-right:max(18px, env(safe-area-inset-right))!important}
.foot form{padding-bottom:calc(12px + env(safe-area-inset-bottom))!important}
@media (display-mode: standalone){ html,body{overscroll-behavior-y:none} }
/* Altura real de la pantalla en iOS (evita la franja vacía abajo en modo app) */
@supports (min-height:100dvh){ body{min-height:100dvh} }