/* ============================================================================
   Nix · Liquid Glass — KIT COMPARTIDO (fundación visual de todo el ecosistema)
   ----------------------------------------------------------------------------
   Cómo usarlo en un sitio:
     1) copia este fichero a  <sitio>/static/css/liquid-glass.css
     2) copia liquid-glass.js a <sitio>/static/js/liquid-glass.js
     3) copia inter.woff2 a    <sitio>/static/fonts/inter.woff2
     4) en el <head>, ANTES de tu CSS:  <link rel="stylesheet" href="/static/css/liquid-glass.css">
     5) añade  <div class="bg" aria-hidden="true"><i></i><i></i><i></i></div>  al principio del <body>
     6) al final del <body>:  <script src="/static/js/liquid-glass.js"></script>
     7) en tu CSS, mapea tus clases a los tokens (--gl, --bd, --ac, --r, --blur…)
   El CSS del sitio debe cargarse DESPUÉS para poder sobrescribir lo que haga falta.
   ========================================================================== */

@font-face{
  font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter.woff2") format("woff2");
}

:root{
  color-scheme:light dark;
  /* --- núcleo Liquid Glass --- */
  --tx:#0b1a2b; --mu:rgba(11,26,43,.6);
  --gl:rgba(255,255,255,.6); --bd:rgba(255,255,255,.7);
  --ac:#0a84ff; --sh:0 10px 40px rgba(20,50,90,.14);
  --b1:#bcd6f2; --b2:#eaf1fb; --bar:rgba(11,26,43,.1);
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --fox:#ff8a3d;
  /* --- alias de superficie --- */
  --bg:#eef3fb; --bg-2:rgba(255,255,255,.5);
  --surface:rgba(255,255,255,.6); --surface-2:rgba(255,255,255,.45); --surface-3:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.7); --line-soft:rgba(255,255,255,.45);
  --fg:var(--tx); --fg-2:rgba(11,26,43,.78); --muted:var(--mu); --faint:rgba(11,26,43,.45);
  --accent:var(--ac); --accent-2:#3d9bff; --accent-soft:rgba(10,132,255,.15);
  --info:#0a84ff; --info-soft:rgba(10,132,255,.15);
  --ok:#34c759; --ok-soft:rgba(52,199,89,.16);
  --warn:#ff9500; --warn-soft:rgba(255,149,0,.16);
  --err:#ff3b30; --err-soft:rgba(255,59,48,.15);
  /* --- forma --- */
  --r:28px; --r-lg:38px; --r-sm:18px; --r-xs:12px;
  --blur:28px;
  --ring:0 0 0 3px rgba(10,132,255,.30);
  --top:64px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --tx:#f2f6fb; --mu:rgba(242,246,251,.62);
    --gl:rgba(30,42,64,.5); --bd:rgba(255,255,255,.14);
    --ac:#4aa8ff; --sh:0 10px 40px rgba(0,0,0,.4);
    --b1:#0b1730; --b2:#050b16; --bar:rgba(255,255,255,.13);
    --fox:#ffa869;
    --bg:#05070d; --bg-2:rgba(20,30,50,.55);
    --surface:rgba(30,42,64,.5); --surface-2:rgba(42,58,84,.45); --surface-3:rgba(62,84,116,.5);
    --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.08);
    --fg:#f2f6fb; --fg-2:rgba(242,246,251,.82); --faint:rgba(242,246,251,.45);
    --accent:var(--ac); --accent-2:#7cc0ff; --accent-soft:rgba(74,168,255,.18);
    --info:#4aa8ff; --info-soft:rgba(74,168,255,.18);
    --ok:#3ddc84; --ok-soft:rgba(61,220,132,.18);
    --warn:#ffcc00; --warn-soft:rgba(255,204,0,.18);
    --err:#ff6b60; --err-soft:rgba(255,107,96,.18);
    --ring:0 0 0 3px rgba(74,168,255,.34);
  }
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--tx);
  background:linear-gradient(180deg,var(--b1),var(--b2)) fixed;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.45;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.025em}
a{color:inherit}
::selection{background:var(--accent-soft)}
*{scrollbar-width:thin;scrollbar-color:var(--bar) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--bar);border-radius:999px;border:2px solid transparent;background-clip:content-box}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:var(--ring);
}

/* ------------------------------------------------------------- fondo vivo */
.bg{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:fl 18s ease-in-out infinite alternate}
.bg i:nth-child(1){width:46vmax;height:46vmax;left:-10vmax;top:-8vmax;background:#4f8cff}
.bg i:nth-child(2){width:40vmax;height:40vmax;right:-12vmax;top:30vh;background:#a78bfa;animation-delay:-6s}
.bg i:nth-child(3){width:44vmax;height:44vmax;left:15vw;bottom:-22vmax;background:#2dd4bf;animation-delay:-12s}
@keyframes fl{to{transform:translate(8vmax,6vmax) scale(1.18)}}
@media (prefers-color-scheme:dark){ .bg i{opacity:.34} }

/* --------------------------------------------------------------- recetas */
/* Cristal base — aplícalo a tarjetas, paneles, cajas, modales, listas… */
.lg-glass{
  background:var(--gl);border:1px solid var(--bd);border-radius:var(--r);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);
  box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.35);
}
.lg-glass-soft{
  background:var(--gl);border:1px solid var(--bd);border-radius:var(--r-sm);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  box-shadow:0 6px 22px rgba(20,50,90,.1),inset 0 1px 0 rgba(255,255,255,.35);
}
/* Barra superior / nav flotante */
.lg-bar{
  background:var(--gl);border-bottom:1px solid var(--bd);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.35),0 8px 30px rgba(20,50,90,.06);
  transition:box-shadow .4s var(--ease);
}
.lg-bar.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.35),0 12px 40px rgba(20,50,90,.16)}

/* ----------------------------------------------------------------- botones */
.lg-btn{
  font:inherit;cursor:pointer;border-radius:999px;border:1px solid var(--bd);
  background:var(--gl);color:var(--tx);padding:9px 16px;font-size:14px;font-weight:500;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  transition:transform .45s var(--spring),background .25s,box-shadow .25s,filter .25s;
}
.lg-btn:hover{background:var(--surface-3)}
.lg-btn:active{transform:scale(.94)}
.lg-btn.primary{
  background:linear-gradient(160deg,var(--ac),#5e5ce6);color:#fff;border-color:transparent;font-weight:600;
  box-shadow:0 12px 30px rgba(10,132,255,.34),inset 0 1px 0 rgba(255,255,255,.35);
}
.lg-btn.primary:hover{filter:brightness(1.06)}
.lg-btn.danger{background:linear-gradient(160deg,#ff6b60,var(--err));color:#fff;border-color:transparent;
  box-shadow:0 12px 30px rgba(255,59,48,.3)}
.lg-btn.ghost{background:transparent;border-color:transparent;color:var(--muted);box-shadow:none}
.lg-btn.ghost:hover{background:var(--surface-2);color:var(--tx)}

/* ------------------------------------------------------------------ campos */
.lg-input{
  width:100%;background:var(--gl);border:1px solid var(--bd);color:var(--tx);
  border-radius:var(--r-xs);padding:11px 14px;font:inherit;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  transition:box-shadow .3s,border-color .3s;
}
.lg-input::placeholder{color:var(--faint)}
.lg-input:focus{border-color:var(--ac);box-shadow:var(--ring)}

/* -------------------------------------------------------- píldoras / chips */
.lg-pill,.lg-badge{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 11px;
  font-size:11.5px;font-weight:600;border:1px solid var(--bd);background:var(--surface-2);color:var(--muted);
}
.lg-chip{
  background:var(--gl);border:1px solid var(--bd);color:var(--muted);border-radius:999px;
  padding:7px 15px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  transition:transform .45s var(--spring),background .3s,color .2s,box-shadow .3s;
}
.lg-chip:hover{color:var(--tx)}
.lg-chip:active{transform:scale(.94)}
.lg-chip.on{
  background:linear-gradient(160deg,var(--ac),#5e5ce6);color:#fff;border-color:transparent;
  box-shadow:0 12px 28px rgba(10,132,255,.4);
}
/* selector segmentado con píldora deslizante */
.lg-seg{position:relative;display:inline-flex;flex-wrap:nowrap;width:max-content;max-width:100%;
  overflow-x:auto;padding:4px;border-radius:999px;gap:2px;background:var(--gl);border:1px solid var(--bd);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.lg-seg::before{
  content:"";position:absolute;top:4px;bottom:4px;left:var(--tl,4px);width:var(--tw,0);
  border-radius:999px;background:linear-gradient(160deg,var(--ac),#5e5ce6);
  box-shadow:0 8px 20px rgba(10,132,255,.4);transition:left .5s var(--spring),width .5s var(--spring);
}
.lg-seg .lg-chip{position:relative;z-index:1;background:none;border-color:transparent;box-shadow:none}
.lg-seg .lg-chip.on{background:none;box-shadow:none;color:#fff}

/* ------------------------------------------------------------------- listas */
.lg-row{
  display:flex;align-items:center;gap:14px;padding:13px 16px;min-width:0;
  background:var(--gl);border:1px solid var(--bd);border-radius:var(--r-sm);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  box-shadow:0 6px 22px rgba(20,50,90,.1),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .45s var(--spring),box-shadow .3s,border-color .3s,background .3s;
}
.lg-row:hover{border-color:var(--ac);background:var(--surface-3);transform:translateX(3px)}

/* ------------------------------------------- aparición en cascada (reveal) */
.js .rv{opacity:0;transform:translateY(26px) scale(.98);
  transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ------------------------------------------------------- accesibilidad */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .bg i{animation:none!important}
}
/* Fallback si el navegador no soporta backdrop-filter */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg-glass,.lg-glass-soft,.lg-bar,.lg-btn,.lg-input,.lg-chip,.lg-seg,.lg-row{background:rgba(255,255,255,.92)}
  @media (prefers-color-scheme:dark){
    .lg-glass,.lg-glass-soft,.lg-bar,.lg-btn,.lg-input,.lg-chip,.lg-seg,.lg-row{background:rgba(22,32,50,.96)}
  }
}