/* =========================================================
   Maxolan · Estilo CRISTAL NOCHE
   Fondo morado noche con burbujas líquidas magenta, naranja,
   amarillo y violeta; cristal oscuro con borde blanco brillante.
   Se carga DESPUÉS de glass.css. Para volver al lila, quitar
   este archivo de los <link> de las tres páginas.
   ========================================================= */
:root {
  --noche: #160A36;
  --magenta: #E23FC6;
  --naranja-v: #FF8A3D;
  --amarillo-v: #FFD24A;
  --violeta-v: #7B2CF5;
  --rosa-v: #FF5FA2;
  --cristal: rgba(255, 255, 255, 0.09);
  --borde-cristal: rgba(255, 255, 255, 0.62);
  --ink: #FFFFFF;
  --muted: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.16);
  --sombra: 0 24px 50px -24px rgba(0, 0, 0, 0.7);
}

html { background: var(--noche); }
body { background: var(--noche); color: #fff; }

/* Burbujas líquidas de colores (difuminadas detrás del cristal) */
body::before {
  width: 46vmax; height: 52vmax; left: -12vmax; top: 18vh; bottom: auto; border-radius: 46% 54% 58% 42% / 52% 40% 60% 48%;
  background: radial-gradient(circle at 70% 25%, var(--amarillo-v) 0%, var(--naranja-v) 22%, var(--magenta) 52%, var(--violeta-v) 80%, rgba(123,44,245,0) 100%);
  filter: blur(6px); opacity: .95;
}
body::after {
  width: 40vmax; height: 40vmax; right: -14vmax; top: 30vh;
  background: radial-gradient(circle at 35% 35%, var(--rosa-v) 0%, var(--magenta) 30%, var(--violeta-v) 62%, rgba(123,44,245,0) 74%);
  filter: blur(8px); opacity: .9;
}
.cielo-burbuja {
  width: 26vmax; height: 26vmax; left: 38vw; top: -6vmax;
  background: radial-gradient(circle at 60% 30%, var(--amarillo-v) 0%, var(--naranja-v) 25%, var(--magenta) 55%, var(--violeta-v) 78%, rgba(123,44,245,0) 90%);
  filter: blur(3px); opacity: .95;
}
.cielo-burbuja::after {
  content: ""; position: fixed; width: 34vmax; height: 24vmax; right: 6vw; bottom: -8vmax; border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
  background: radial-gradient(circle at 40% 30%, var(--naranja-v) 0%, var(--magenta) 40%, var(--violeta-v) 75%, rgba(123,44,245,0) 92%);
  filter: blur(10px); opacity: .85; pointer-events: none;
}

/* Cabecera */
.top { background: rgba(22, 10, 54, 0.45); border-bottom: 1px solid rgba(255,255,255,.18); }
.nav button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }

/* Botones de cristal oscuro con borde blanco brillante */
.tile.g, .eq.g, .lz a.g {
  background: linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 100%) !important;
  border: 1.5px solid var(--borde-cristal);
  box-shadow: inset 0 0 22px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.6), var(--sombra);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
}
.tile.g:hover, .eq.g:hover, .lz a.g:hover { background: linear-gradient(160deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 100%) !important; }
.tile .t, .eq .t, .lz b, .tile .n, .tile .s { text-shadow: 0 1px 6px rgba(0,0,0,.45); }

/* Paneles de lectura: también cristal oscuro, texto blanco */
.card, .box, .conv, .empty, .next, .movil, .qa, .steps, .hist, .form {
  background: linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 100%);
  border: 1.5px solid rgba(255,255,255,.45); color: #fff;
  box-shadow: inset 0 0 18px rgba(255,255,255,.08), var(--sombra);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
}
a.card:hover { background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); border-color: #fff; }
.card .eq, .card .meta, .box .lbl, .empty, .next .q span, .hist span, .qa li span, .steps li span, .sub, .ctx { color: var(--muted); }
.next .hora, .form label, .qa li b { color: #fff; }
.form input, .form select, .form textarea { background: rgba(255,255,255,.95); color: #2C2668; border-color: transparent; }
.steps .dotc { border-color: rgba(255,255,255,.4); }
.steps li.done .dotc { background: linear-gradient(150deg, var(--amarillo-v), var(--magenta)); }

/* Botón principal: degradado magenta → naranja como las burbujas */
.cta { background: linear-gradient(120deg, var(--magenta) 0%, #F0569A 45%, var(--naranja-v) 100%); color: #fff; text-shadow: 0 1px 2px rgba(80,0,60,.35);
  box-shadow: 0 16px 30px -14px rgba(226,63,198,.75), inset 0 1px 0 rgba(255,255,255,.35); }
.cta:hover { box-shadow: 0 20px 36px -14px rgba(226,63,198,.9), inset 0 1px 0 rgba(255,255,255,.35); }

/* Chips e islas */
.chip, .islas button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.chip[aria-pressed="true"], .islas button[aria-pressed="true"] { background: #fff; color: #2C1A66; }
.opt { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.opt:hover, .opt.sel { background: linear-gradient(120deg, var(--magenta), var(--naranja-v)); border-color: transparent; color: #fff; }
.progress span.on { background: linear-gradient(90deg, var(--amarillo-v), var(--magenta)); }
.slots button { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); }
.slots button[aria-pressed="true"] { background: linear-gradient(120deg, #2FD68A, #12B5C6); border-color: transparent; }
.accion.peligro { background: rgba(255,255,255,.08); color: #FF9FB0; border-color: #FF9FB0; }
.accion.peligro.seguro { background: #F04B5E; color: #fff; }

/* Pie y avisos flotantes */
.pie a { background: rgba(255,255,255,.08) !important; }
.toast { background: rgba(30, 14, 70, .9); color: #fff; border-color: rgba(255,255,255,.4); }

/* El albarán se queda como papel blanco para que parezca un documento */
.albaran { background: #fff; color: #2C2668; border-color: #fff; }
.albaran .alb-l, .albaran .alb-sub, .albaran .alb-num span, .albaran .alb-tabla th { color: #5E5A8C; }
.albaran .alb-tabla td, .albaran .alb-tabla th { border-color: rgba(44,38,104,.12); }

@media print {
  .cielo-burbuja::after { display: none; }
}
.tile .badge { background: #fff; color: #2C1A66; }
.chip, .islas button, .pill { text-shadow: none; }