/*
 * Look Futurístico (data-look="futuristico"): vidrio sobre los colores de Helios. Un lienzo con luz
 * (campos de azul noche, arena, vino y oliva sobre crema, o sobre azul noche de noche), capas
 * translúcidas encima, luz en los bordes y sombra corta. Traído del vidrio que se hizo para el CRM de
 * Dale el 7 de octubre de 2026 en su versión sobre la paleta de Helios (dale-look-glass, a09dac8).
 *
 * Todo vive bajo :root[data-look='futuristico'], así Helios y Vintage no cambian. Los colores son
 * tokens; las reglas solo los leen. Los textos bajan un tono para quedar en 4,5:1 sobre el punto más
 * oscuro del lienzo. Solo desenfoca lo que flota sobre contenido que se mueve (la barra superior, la
 * barra del celular y la hoja de Más); los diálogos y paneles quedan casi sólidos.
 */

:root[data-look='futuristico'] {
  --vidrio-campo-azul: rgba(96, 128, 172, .72);
  --vidrio-campo-arena: rgba(238, 206, 150, .92);
  --vidrio-campo-vino: rgba(168, 64, 82, .4);
  --vidrio-campo-oliva: rgba(140, 150, 100, .36);
  --vidrio-fill-suave: rgba(255, 253, 249, .34);
  --vidrio-fill: rgba(253, 251, 247, .62);
  --vidrio-fill-hover: rgba(255, 254, 251, .76);
  --vidrio-fill-fuerte: rgba(255, 253, 249, .84);
  --vidrio-cubierta: rgba(255, 253, 249, .97);
  --vidrio-pastilla: rgba(255, 255, 255, .94);
  --vidrio-borde-tenue: rgba(255, 255, 255, .46);
  --vidrio-luz: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55);
  --vidrio-arista: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .2) 34%, rgba(255, 255, 255, .04) 62%, rgba(255, 255, 255, .55));
  --vidrio-sombra-baja: 0 1px 2px rgba(28, 37, 52, .08), 0 8px 16px -10px rgba(28, 37, 52, .3);
  --vidrio-sombra: 0 2px 4px rgba(28, 37, 52, .06), 0 14px 20px -14px rgba(28, 37, 52, .34);
  --vidrio-desenfoque: blur(20px) saturate(1.6);
  --vidrio-accion-sombra: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 10px 20px -12px rgba(28, 37, 52, .6);
  --vidrio-brillo: rgba(255, 255, 255, .42);
  --vidrio-hoja: rgba(252, 250, 245, .6);
  --vidrio-tarjeta: rgba(255, 254, 251, .58);
  --vidrio-capa: var(--vidrio-luz), var(--vidrio-sombra-baja);
  --vidrio-panel: var(--vidrio-luz), var(--vidrio-sombra);

  /* Los tokens que leen todas las superficies de Helios, puestos sobre el vidrio. */
  --h-fondo: #efe6d6;
  --h-fondo-luz:
    radial-gradient(1100px 760px at 4% -10%, var(--vidrio-campo-azul), transparent 64%),
    radial-gradient(980px 720px at 102% 2%, var(--vidrio-campo-arena), transparent 62%),
    radial-gradient(1040px 780px at 98% 110%, var(--vidrio-campo-vino), transparent 62%),
    radial-gradient(860px 660px at -8% 106%, var(--vidrio-campo-oliva), transparent 60%);
  --h-hoja: var(--vidrio-hoja);
  --h-papel: var(--vidrio-tarjeta);
  --h-papel-2: var(--vidrio-fill-suave);
  --h-pestana: transparent;
  --h-pestana-hover: var(--vidrio-fill-hover);
  --h-bolsillo: var(--vidrio-fill);
  --h-tinta-2: #4e5865;
  --h-tinta-3: #34404f;
  --h-positivo: #3f4430;
  --h-baldosa: var(--vidrio-capa);
  --h-sombra-hoja: var(--vidrio-panel);
  --h-sombra-1: var(--vidrio-sombra-baja);
  --h-vidrio-texto: var(--vidrio-fill);
  --h-vidrio-brillo: var(--vidrio-luz);
}

:root[data-look='futuristico'][data-tema='noche'] {
  --vidrio-campo-azul: rgba(72, 112, 178, .78);
  --vidrio-campo-arena: rgba(236, 131, 107, .4);
  --vidrio-campo-vino: rgba(160, 48, 68, .66);
  --vidrio-campo-oliva: rgba(120, 126, 88, .3);
  --vidrio-fill-suave: rgba(255, 255, 255, .04);
  --vidrio-fill: rgba(22, 31, 42, .62);
  --vidrio-fill-hover: rgba(255, 255, 255, .08);
  --vidrio-fill-fuerte: rgba(24, 33, 45, .86);
  --vidrio-cubierta: rgba(24, 33, 45, .97);
  --vidrio-pastilla: rgba(243, 238, 228, .14);
  --vidrio-borde-tenue: rgba(255, 255, 255, .07);
  --vidrio-luz: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08);
  --vidrio-arista: linear-gradient(140deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .05) 36%, rgba(255, 255, 255, 0) 62%, rgba(236, 131, 107, .28));
  --vidrio-sombra-baja: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 16px -10px rgba(0, 0, 0, .7);
  --vidrio-sombra: 0 2px 4px rgba(0, 0, 0, .25), 0 14px 20px -14px rgba(0, 0, 0, .8);
  --vidrio-accion-sombra: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 10px 22px -12px rgba(0, 0, 0, .8);
  --vidrio-brillo: rgba(255, 255, 255, .05);
  --vidrio-hoja: rgba(14, 21, 30, .55);
  --vidrio-tarjeta: rgba(28, 37, 47, .58);

  --h-fondo: #0a1018;
  --h-grano: linear-gradient(transparent, transparent);
  --h-tinta-2: #b9b3a8;
  --h-tinta-3: #d3cdc3;
  --h-positivo: #b6c192;
}

/* ---------- El lienzo: la luz sobre la que se apoya el vidrio ---------- */

:root[data-look='futuristico'] body {
  background: var(--h-fondo-luz), var(--h-fondo);
  background-attachment: fixed;
}

/* Los aros y baldosas del fondo de Helios se apagan: la luz ya está en el lienzo. */
:root[data-look='futuristico'] .h-fondo {
  display: none;
}

/* ---------- La barra superior y la hoja ---------- */

:root[data-look='futuristico'] .h-topbar {
  background: var(--vidrio-fill);
  border-color: transparent;
  box-shadow: var(--vidrio-capa);
  -webkit-backdrop-filter: var(--vidrio-desenfoque);
  backdrop-filter: var(--vidrio-desenfoque);
}

:root[data-look='futuristico'] .h-refr-linea {
  display: none;
}

:root[data-look='futuristico'] .h-hoja {
  isolation: isolate;
  background: linear-gradient(180deg, var(--vidrio-brillo), transparent 180px), var(--vidrio-hoja);
}

/* Luz en el canto: un anillo de 1 px por fuera, más claro donde entra la luz (arriba a la izquierda). */
:root[data-look='futuristico'] :is(.h-hoja, .h-topbar, .entrada-card)::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: var(--vidrio-arista);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Pestañas: un riel de vidrio con la abierta como píldora sólida ---------- */

@media (min-width: 761px) {
  :root[data-look='futuristico'] .h-tabs {
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    height: auto;
    margin: 12px 0;
    padding: 4px;
    gap: 2px;
    border-radius: 999px;
    background: var(--vidrio-fill);
    box-shadow: var(--vidrio-capa);
    -webkit-backdrop-filter: var(--vidrio-desenfoque);
    backdrop-filter: var(--vidrio-desenfoque);
  }

  :root[data-look='futuristico'] .h-tab-wrap {
    height: auto;
  }
}

:root[data-look='futuristico'] .h-tab-luz,
:root[data-look='futuristico'] .h-tab-barrido {
  display: none;
}

:root[data-look='futuristico'] .h-tab,
:root[data-look='futuristico'] .h-tab:hover,
:root[data-look='futuristico'] .h-tab-wrap.activa .h-tab {
  height: 38px;
  margin-bottom: 0;
  padding: 0 16px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transition: background-color var(--h-dur-1) var(--h-curva), box-shadow var(--h-dur-1) var(--h-curva);
}

:root[data-look='futuristico'] .h-tab:hover {
  background: var(--vidrio-fill-hover);
}

:root[data-look='futuristico'] .h-tab-wrap.activa .h-tab::before,
:root[data-look='futuristico'] .h-tab-wrap.activa .h-tab::after {
  display: none;
}

/* La abierta, en las pestañas y en la barra del celular, es la píldora sólida. */
:root[data-look='futuristico'] :is(.h-tab-wrap.activa .h-tab, .h-bottom-btn.activa) {
  background: var(--vidrio-pastilla);
  box-shadow: var(--vidrio-capa);
}

/* El bolsillo de Aura al final de las pestañas no cabe en el riel. */
:root[data-look='futuristico'] .h-tabs-aura {
  display: none;
}

/* ---------- Capas sobre la hoja ---------- */

:root[data-look='futuristico'] :is(.h-card, .surface) {
  background: var(--vidrio-tarjeta);
  box-shadow: var(--vidrio-capa);
}

:root[data-look='futuristico'] :is(.badge, .cl-badge, .h-chip) {
  background: var(--vidrio-fill-suave);
  box-shadow: inset 0 0 0 1px var(--vidrio-borde-tenue);
}

:root[data-look='futuristico'] .input {
  background: var(--vidrio-fill-fuerte);
}

/* ---------- Controles ---------- */

:root[data-look='futuristico'] .btn {
  border-radius: 999px;
}

:root[data-look='futuristico'] .btn-primary {
  box-shadow: var(--vidrio-accion-sombra);
}

:root[data-look='futuristico'] .btn-secondary {
  background: var(--vidrio-fill);
  box-shadow: var(--vidrio-luz);
}

@media (hover: hover) and (pointer: fine) {
  :root[data-look='futuristico'] .btn-secondary:hover {
    background: var(--vidrio-fill-hover);
  }
}

/* ---------- Coberturas ---------- */

/* La barra del celular y la hoja de Más flotan sobre la página: vidrio denso que la desenfoca. */
:root[data-look='futuristico'] :is(.h-bottom, .h-mas-hoja) {
  background: var(--vidrio-fill-fuerte);
  border-color: transparent;
  box-shadow: var(--vidrio-panel);
  -webkit-backdrop-filter: var(--vidrio-desenfoque);
  backdrop-filter: var(--vidrio-desenfoque);
}

/* Diálogos y el panel de Aura llevan contenido que se anima: casi sólidos, sin desenfoque propio. */
:root[data-look='futuristico'] :is(.cl-dialog, .panel-aura, dialog) {
  background: var(--vidrio-cubierta);
  border-color: transparent;
  box-shadow: var(--vidrio-panel), 0 25px 80px -20px rgba(28, 37, 52, .45);
}

/* ---------- Sin transparencias: las mismas capas, sólidas ---------- */

@media (prefers-reduced-transparency: reduce) {
  :root[data-look='futuristico'] {
    --vidrio-fill-suave: #f6f0e6;
    --vidrio-fill: #f6f0e6;
    --vidrio-fill-hover: #fbf8f2;
    --vidrio-fill-fuerte: #fffdf9;
    --vidrio-cubierta: #fffdf9;
    --vidrio-pastilla: #ffffff;
    --vidrio-brillo: transparent;
    --vidrio-desenfoque: none;
    --vidrio-hoja: #f8f3ea;
    --vidrio-tarjeta: #fffdf9;
  }

  :root[data-look='futuristico'][data-tema='noche'] {
    --vidrio-fill-suave: #1a222c;
    --vidrio-fill: #1a222c;
    --vidrio-fill-hover: #212a35;
    --vidrio-fill-fuerte: #1c252f;
    --vidrio-cubierta: #1c252f;
    --vidrio-pastilla: #2a3440;
    --vidrio-hoja: #121922;
    --vidrio-tarjeta: #1c252f;
  }
}