/* ═══════════════════════════════════════════════════════════════════════════
   LUZ DE HALO — el sistema de diseño de Abhalo (v3, 10-oct-2026)
   Un solo archivo: variables, base y piezas. Se enlaza y se usa con clases lh-*.

   La idea, en corto:
   · Grafito casi negro (o papel crema de día). Nada de negro plano: una luz
     cobalto muy tenue entra por arriba a la derecha.
   · IMÁGENES solo en los «sitios» (la marca, la portada de un panel, la pantalla
     vacía, la entrada): metal cepillado y fluidos en cobalto, plata y lima, con
     grano. El texto NUNCA va encima de una imagen: va debajo, sobre liso.
   · Todo lo demás es CRISTAL: superficies casi transparentes con un canto de luz
     arriba, bordes finos y sombras largas.
   · El COLOR dice qué pasa: cobalto = lo tuyo y el foco; ámbar = algo te espera;
     lima = «estás aquí»; verde = hecho; rojo = error; plata = la marca.
   · ICONOS a dos tonos (trazo + relleno suave). Nunca emojis.
   · Para leer con dislexia: Atkinson Hyperlegible (u OpenDyslexic), letra grande,
     frases cortas, contraste ≥ 4,5:1, con el dedo nada por debajo de 44 px.

   Temas: oscuro (por defecto) y crema (<html class="tema-crema">).
   Letra: <html class="letra-dislexia"> y/o <html class="letra-grande">.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Las fuentes: copia la carpeta «fuentes» de Abhalo (publico/fuentes) junto a este archivo. */
@font-face { font-family: "Atkinson Hyperlegible"; src: url(../fuentes/AtkinsonHyperlegible-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(../fuentes/AtkinsonHyperlegible-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(../fuentes/AtkinsonHyperlegible-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url(../fuentes/OpenDyslexic-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url(../fuentes/OpenDyslexic-Bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* ───────────── 1. variables ───────────── */
:root {
  /* superficies */
  --fondo: #0b0c0f;          /* grafito */
  --panel: #111217;
  --panel-alto: #1a1b22;
  --borde: #2a2c35;
  --codigo: #08090b;
  /* texto */
  --texto: #f2f2f4;
  --tenue: #a3a6b1;          /* lo secundario: 7:1 sobre el fondo */
  --marca: #e8e9ec;          /* plata: titulares, la marca */
  /* colores con significado */
  --acento: #8fb0ff;         /* cobalto: lo tuyo, los enlaces, el foco */
  --brillo: #cbea2b;         /* lima: «estás aquí», ideas */
  --espera: #f5b83d;         /* ámbar: algo te espera (un permiso, una decisión) */
  --ok: #3dd68c;             /* hecho */
  --alerta: #f59e5b;         /* cuidado */
  --error: #f2716b;          /* falló */
  --primario: #f2f2f4;       /* el botón principal: píldora clara */
  --primario-texto: #0b0c0f;
  /* cristal */
  --cristal: rgba(255, 255, 255, .035);
  --cristal-alto: rgba(255, 255, 255, .07);
  --canto: rgba(255, 255, 255, .09);
  --canto-fuerte: rgba(255, 255, 255, .16);
  --luz: inset 0 1px 0 rgba(255, 255, 255, .07);         /* el canto de arriba, donde da la luz */
  --aura: rgba(80, 125, 255, .24);                        /* el brillo cobalto del halo */
  --sombra: 0 24px 60px -24px rgba(0, 0, 0, .85);
  --sombra-flota: 0 30px 70px -20px rgba(0, 0, 0, .85);
  --panel-rgb: 17, 18, 23;                                /* = --panel, para fundir imágenes con él */
  --fondo-rgb: 11, 12, 15;                                /* = --fondo */
  --sobre-imagen: #ffffff;                                /* el logo o un icono encima de una imagen */
  /* forma y letra */
  --r: 14px; --r-grande: 22px; --r-pildora: 999px;
  --base: 17px;
  --fuente: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  /* grano fino: da a las imágenes aire de foto */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E");
  /* las imágenes de la marca (se desenfocan; ver .lh-imagen) */
  --img-vetas:
    repeating-linear-gradient(-13deg, rgba(255, 255, 255, .10) 0 2px, transparent 2px 19px),
    repeating-linear-gradient(-13deg, rgba(8, 10, 16, .30) 0 28px, transparent 28px 74px),
    linear-gradient(166deg, #2b2f38 0%, #7e848f 22%, #d2b19b 38%, #8e97a8 50%, #3c4c6d 64%, #161b26 82%, #0b0c0f 100%);
  --img-vetas-fino:
    linear-gradient(161deg, transparent 0 14%, rgba(236, 204, 182, .62) 24%, transparent 33%),
    linear-gradient(161deg, transparent 0 38%, rgba(176, 192, 220, .5) 46%, transparent 55%),
    linear-gradient(161deg, transparent 0 57%, rgba(255, 255, 255, .28) 61%, transparent 67%),
    linear-gradient(161deg, transparent 0 70%, rgba(110, 130, 175, .45) 78%, transparent 88%),
    repeating-linear-gradient(161deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #353943, #1c2029 70%, #15171d);
  --img-cobalto:
    radial-gradient(30% 30% at 30% 25%, rgba(220, 235, 255, .9), transparent 70%),
    radial-gradient(35% 40% at 75% 72%, rgba(8, 26, 84, .95), transparent 70%),
    conic-gradient(from 140deg at 45% 55%, #06123a, #1f5bff, #7fb4ff, #0a2a8a, #2e6bff, #0a1a50, #06123a);
  --img-plata:
    radial-gradient(30% 40% at 28% 30%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(25% 35% at 70% 62%, rgba(255, 255, 255, .7), transparent 70%),
    radial-gradient(40% 30% at 60% 14%, rgba(18, 18, 20, .9), transparent 70%),
    conic-gradient(from 200deg at 50% 50%, #0c0c0e, #9a9aa2, #1a1a1d, #e8e8ec, #2a2a2e, #bdbdc4, #0c0c0e);
  --img-lima:
    radial-gradient(28% 34% at 35% 28%, rgba(250, 255, 170, .95), transparent 70%),
    radial-gradient(40% 40% at 75% 76%, rgba(36, 50, 5, .95), transparent 70%),
    conic-gradient(from 300deg at 55% 45%, #2a3505, #d7f20a, #8fae00, #1d2604, #c3e33a, #556b06, #2a3505);
  /* dibujos para usar como máscara (toman el color del texto) */
  --halo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M58 32a26 26 0 1 1-52 0a26 26 0 1 1 52 0ZM46.04 34.6a16.64 16.64 0 1 0-33.28 0a16.64 16.64 0 1 0 33.28 0Z'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5.5 6.5 6.5L9 18.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8e99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* De día: papel crema. Mismos nombres, otros valores (todos pasan 4,5:1). */
html.tema-crema {
  --fondo: #f4efe4; --panel: #fcf8ef; --panel-alto: #ede6d6; --borde: #d3c9b3; --codigo: #ece5d5;
  --texto: #1d2126; --tenue: #56606d; --marca: #14171b;
  --acento: #1f4fd8; --brillo: #5e7a00; --espera: #8a5600; --ok: #1d7a49; --alerta: #9a4415; --error: #b93737;
  --primario: #1d2126; --primario-texto: #fcf8ef;
  --cristal: rgba(255, 255, 255, .5); --cristal-alto: rgba(255, 255, 255, .85);
  --canto: rgba(60, 45, 20, .13); --canto-fuerte: rgba(60, 45, 20, .24);
  --luz: inset 0 1px 0 rgba(255, 255, 255, .9);
  --aura: rgba(31, 79, 216, .16);
  --sombra: 0 24px 60px -28px rgba(60, 45, 20, .38);
  --sombra-flota: 0 24px 50px -24px rgba(60, 45, 20, .4);
  --panel-rgb: 252, 248, 239; --fondo-rgb: 244, 239, 228;
  --sobre-imagen: #14171b;
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.14'/%3E%3C/svg%3E");
  --img-vetas:
    repeating-linear-gradient(-13deg, rgba(255, 255, 255, .45) 0 2px, transparent 2px 19px),
    repeating-linear-gradient(-13deg, rgba(120, 100, 70, .07) 0 28px, transparent 28px 74px),
    linear-gradient(166deg, #ebe5d8 0%, #ccd1da 22%, #ecd0bb 38%, #d3dae6 50%, #b7c5dd 64%, #ede7da 82%, #f4efe4 100%);
  --img-vetas-fino:
    linear-gradient(161deg, transparent 0 14%, rgba(236, 200, 172, .7) 24%, transparent 33%),
    linear-gradient(161deg, transparent 0 38%, rgba(170, 190, 228, .55) 46%, transparent 55%),
    linear-gradient(161deg, transparent 0 57%, rgba(255, 255, 255, .8) 61%, transparent 67%),
    repeating-linear-gradient(161deg, rgba(255, 255, 255, .35) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #e6dfd2, #efe9dd 70%, #f6f1e7);
  --img-cobalto:
    radial-gradient(30% 30% at 30% 25%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(35% 40% at 75% 72%, rgba(120, 155, 245, .8), transparent 70%),
    conic-gradient(from 140deg at 45% 55%, #c9d7ff, #8fb0ff, #e6edff, #a9c1ff, #7ea2ff, #dbe5ff, #c9d7ff);
  --img-plata:
    radial-gradient(30% 40% at 28% 30%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(40% 30% at 60% 14%, rgba(150, 150, 160, .6), transparent 70%),
    conic-gradient(from 200deg at 50% 50%, #dedcd6, #b9bac2, #f4f3ef, #a9aab3, #ecebe6, #c9cad1, #dedcd6);
  --img-lima:
    radial-gradient(28% 34% at 35% 28%, rgba(255, 255, 230, .95), transparent 70%),
    radial-gradient(40% 40% at 75% 76%, rgba(140, 170, 30, .6), transparent 70%),
    conic-gradient(from 300deg at 55% 45%, #e9f3b8, #cfe35c, #f4fadc, #bcd640, #e6f2a2, #d6e683, #e9f3b8);
}
/* OpenDyslexic aparenta más tamaño: se baja la raíz para que ocupe lo mismo. */
html.letra-dislexia { --fuente: "OpenDyslexic", "Atkinson Hyperlegible", sans-serif; --base: 15.5px; }
html.letra-grande { --base: 20px; }
html.letra-dislexia.letra-grande { --base: 18px; }

/* ───────────── 2. base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--base); color-scheme: dark; -webkit-text-size-adjust: 100%; }
html.tema-crema { color-scheme: light; }
body {
  margin: 0; font: 1rem/1.6 var(--fuente); color: var(--texto); -webkit-font-smoothing: antialiased;
  background: radial-gradient(56rem 26rem at 88% -8%, rgba(64, 110, 255, .085), transparent 70%), var(--fondo);
  background-attachment: fixed;
}
html.tema-crema body { background: radial-gradient(56rem 26rem at 88% -8%, rgba(31, 79, 216, .06), transparent 70%), var(--fondo); background-attachment: fixed; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; color: var(--marca); }
p { margin: 0 0 .8em; }
a { color: var(--acento); text-underline-offset: 3px; }
code, kbd, pre { font-family: var(--mono); }
code { background: var(--cristal-alto); border: 1px solid var(--canto); border-radius: 6px; padding: .05em .35em; font-size: .9em; }
kbd { background: var(--cristal-alto); border: 1px solid var(--canto-fuerte); box-shadow: var(--luz); border-radius: 6px; padding: .05em .4em; font-size: .8em; }
pre { background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 2.6rem), var(--codigo); border: 1px solid var(--canto); border-radius: 12px; padding: .9rem 1rem; overflow-x: auto; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
::selection { background: var(--acento); color: var(--primario-texto); }
* { scrollbar-width: thin; scrollbar-color: var(--canto-fuerte) transparent; }
.v-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* solo para el lector de pantalla */

/* ───────────── 3. iconos (recursos/iconos.svg) ─────────────
   <svg class="ico"><use href="#i-nombre"/></svg>  · toman el color del texto.
   El relleno suave lo gradúa --ico-tono: más en lo abierto o elegido. */
.ico {
  display: block; flex: none; width: 1.2rem; height: 1.2rem;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  --ico-tono: .22;
}
html.tema-crema .ico { --ico-tono: .16; }
button:hover .ico, a:hover .ico { --ico-tono: .32; }
[aria-expanded="true"] .ico, [aria-pressed="true"] .ico, .activo .ico { --ico-tono: .42; }
.ico.ico-t { display: inline-block; width: 1.12em; height: 1.12em; vertical-align: -.2em; margin-right: .38em; }   /* dentro de una frase */
.ico-izq { transform: scaleX(-1); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ───────────── 4. botones ───────────── */
/* Principal: una píldora clara (uno por pantalla). Los demás: cristal. */
.lh-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.6rem; padding: .5rem 1.15rem; border-radius: var(--r-pildora);
  font: 700 1rem/1.2 var(--fuente); cursor: pointer; text-decoration: none;
  background: var(--primario); color: var(--primario-texto); border: 1px solid var(--primario);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s;
}
.lh-boton:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primario) 14%, transparent); }
.lh-boton .ico { width: 1.1rem; height: 1.1rem; }
.lh-boton.cristal, .lh-icono {
  background: linear-gradient(180deg, var(--cristal-alto), var(--cristal)); color: var(--texto);
  border-color: var(--canto-fuerte); box-shadow: var(--luz); font-weight: 400;
}
.lh-boton.cristal:hover, .lh-icono:hover { background: var(--cristal-alto); border-color: color-mix(in srgb, var(--texto) 30%, transparent); box-shadow: var(--luz); }
.lh-boton.peligro { background: var(--error); border-color: var(--error); color: #0b0c0f; }
html.tema-crema .lh-boton.peligro, html.tema-crema .lh-boton.hecho { color: #fff; }
.lh-boton.hecho { background: var(--ok); border-color: var(--ok); color: #06120b; }
.lh-boton:disabled { opacity: .45; cursor: default; box-shadow: none; }
/* Botón de solo icono: redondo. SIEMPRE con aria-label. */
.lh-icono {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; border: 1px solid var(--canto-fuerte); cursor: pointer;
}
/* Lo abierto o encendido: la luz del halo. */
.lh-icono[aria-expanded="true"], .lh-icono[aria-pressed="true"], .lh-icono.activo,
.lh-boton.cristal[aria-pressed="true"], .lh-boton.cristal.activo {
  border-color: var(--acento); color: var(--acento);
  background: color-mix(in srgb, var(--acento) 12%, transparent); box-shadow: var(--luz), 0 0 0 3px var(--aura);
}

/* ───────────── 5. campos ───────────── */
.lh-etiqueta { display: block; font-size: .85rem; font-weight: 700; color: var(--tenue); margin: 0 0 .3rem; }
.lh-campo {
  width: 100%; min-height: 2.6rem; padding: .55rem .9rem; border-radius: 12px;
  font: 1rem/1.4 var(--fuente); color: var(--texto);
  background: var(--cristal); border: 1px solid var(--canto-fuerte);
  transition: border-color .15s, box-shadow .2s;
}
select.lh-campo { appearance: none; padding-right: 2.4rem; background: var(--flecha-select) right .8rem center / 1.1rem no-repeat, var(--cristal); }
textarea.lh-campo { resize: vertical; }
.lh-campo::placeholder { color: var(--tenue); opacity: 1; }
.lh-campo:hover { border-color: color-mix(in srgb, var(--texto) 28%, transparent); }
.lh-campo:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--aura); }

/* ───────────── 6. cristal: superficies ───────────── */
.lh-cristal {
  background: linear-gradient(180deg, var(--cristal-alto), var(--cristal)), var(--panel);
  border: 1px solid var(--canto-fuerte); border-radius: var(--r-grande);
  box-shadow: var(--luz), 0 30px 70px -36px rgba(0, 0, 0, .9);
  padding: 1.1rem 1.2rem;
}
html.tema-crema .lh-cristal { box-shadow: var(--luz), var(--sombra); }
.lh-tarjeta {
  background: linear-gradient(180deg, var(--cristal-alto), var(--cristal));
  border: 1px solid var(--canto-fuerte); border-radius: 16px; box-shadow: var(--luz); padding: .9rem 1rem;
}
a.lh-tarjeta, button.lh-tarjeta { display: block; color: inherit; text-decoration: none; text-align: left; font: inherit; cursor: pointer; width: 100%; }
a.lh-tarjeta:hover, button.lh-tarjeta:hover { border-color: color-mix(in srgb, var(--texto) 35%, transparent); }
/* Lo que flota (menús, avisos): cristal esmerilado. */
.lh-menu {
  background: linear-gradient(180deg, rgba(30, 32, 40, .9), rgba(18, 19, 24, .94));
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--canto-fuerte); border-radius: 18px; box-shadow: var(--luz), var(--sombra-flota);
  padding: .4rem;
}
html.tema-crema .lh-menu { background: linear-gradient(180deg, rgba(255, 253, 248, .94), rgba(250, 245, 234, .97)); }
.lh-menu-item {
  display: flex; align-items: center; gap: .8rem; width: 100%; padding: .55rem .7rem; border-radius: 12px;
  background: transparent; border: 0; color: var(--texto); font: inherit; text-align: left; cursor: pointer; text-decoration: none;
}
.lh-menu-item:hover, .lh-menu-item:focus-visible { background: var(--cristal-alto); }
.lh-menu-item > .ico { box-sizing: content-box; padding: .45rem; border-radius: 10px; color: var(--acento);
  background: linear-gradient(180deg, var(--cristal-alto), var(--cristal)); border: 1px solid var(--canto); }
.lh-menu-item small { display: block; color: var(--tenue); font-size: .85rem; }
/* Píldora (chip): un dato corto o un filtro. */
.lh-pildora {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: var(--r-pildora);
  background: linear-gradient(180deg, var(--cristal-alto), var(--cristal)); border: 1px solid var(--canto); box-shadow: var(--luz);
  font-size: .9rem; font-weight: 700; color: var(--tenue);
}
.lh-pildora .ico { width: 1rem; height: 1rem; }
button.lh-pildora { cursor: pointer; font-family: inherit; }
.lh-pildora.activo, .lh-pildora[aria-pressed="true"] { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
/* Insignia: un número sobre un icono (nunca un 0: vacío = sin insignia). */
.lh-insignia {
  position: absolute; top: -5px; right: -5px; min-width: 1.2rem; padding: 0 .3rem;
  font: 700 .7rem/1.2rem var(--fuente); text-align: center; border-radius: .6rem;
  background: var(--alerta); color: #141414; border: 2px solid var(--fondo);
}
html.tema-crema .lh-insignia { color: #fff; }
.lh-separador { height: 1px; border: 0; margin: 1rem 0; background: linear-gradient(90deg, transparent, var(--canto-fuerte) 18%, color-mix(in srgb, var(--acento) 45%, transparent) 50%, var(--canto-fuerte) 82%, transparent); }

/* ───────────── 7. imágenes, solo en sus sitios ─────────────
   Patrón: la pieza aísla su capa; ::before es la imagen desenfocada; ::after, el
   velo que la funde con el panel + el grano. El texto va DEBAJO, sobre liso. */
.lh-imagen { position: relative; isolation: isolate; overflow: hidden; }
.lh-imagen::before { content: ""; position: absolute; z-index: -2; inset: -12%; background: var(--img-cobalto); filter: blur(18px) saturate(1.15); }
.lh-imagen::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--grano); }
.lh-imagen.vetas::before { background: var(--img-vetas); filter: blur(7px) saturate(1.05); }
.lh-imagen.vetas-fino::before { background: var(--img-vetas-fino); filter: blur(2.5px) saturate(1.1); }
.lh-imagen.plata::before { background: var(--img-plata); }
.lh-imagen.lima::before { background: var(--img-lima); }
/* La banda de la marca: metal cepillado detrás del logo (el logo sí puede ir encima). */
.lh-banda { padding: 1.9rem 1.2rem 1.5rem; color: var(--sobre-imagen); }
.lh-banda::before { background: var(--img-vetas-fino); filter: blur(2.5px) saturate(1.1); inset: -10% -8%; }
.lh-banda::after { background: linear-gradient(180deg, rgba(var(--panel-rgb), .05) 0%, rgba(var(--panel-rgb), .22) 55%, rgba(var(--panel-rgb), .8) 86%, rgb(var(--panel-rgb)) 100%), var(--grano); }
.lh-banda > * { filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .45)); }
html.tema-crema .lh-banda > * { filter: drop-shadow(0 1px 8px rgba(255, 255, 255, .7)); }
/* La portada de un panel: la imagen arriba y el título debajo. Cada panel, su color. */
.lh-portada { padding: 5.2rem 1.2rem .2rem; }
.lh-portada::before { inset: auto -15% auto -15%; top: -2.6rem; height: 10rem; }
.lh-portada::after { background: linear-gradient(180deg, rgba(var(--panel-rgb), 0) 0, rgba(var(--panel-rgb), .08) 2.8rem, rgba(var(--panel-rgb), .9) 4.9rem, rgb(var(--panel-rgb)) 5.7rem), var(--grano); }
.lh-portada h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.4rem; margin: 0; }
.lh-portada h2 .ico { width: 1.45rem; height: 1.45rem; color: var(--acento); }
.lh-portada.lima h2 .ico { color: var(--brillo); }
.lh-portada.plata h2 .ico { color: var(--marca); }
/* La pantalla vacía («elige algo», «aún no hay nada»): una tarjeta con su luz arriba. */
.lh-vacio { max-width: 34rem; margin: 2rem auto; padding: 10rem 1.6rem 1.8rem; text-align: center; border-radius: 26px;
  border: 1px solid var(--canto-fuerte); box-shadow: var(--luz), var(--sombra); background: var(--panel); }
.lh-vacio::before { inset: auto -20% auto -20%; top: -3rem; height: 15rem; filter: blur(26px) saturate(1.2); }
.lh-vacio::after { background: linear-gradient(180deg, rgba(var(--panel-rgb), 0) 0, rgba(var(--panel-rgb), .1) 4rem, rgba(var(--panel-rgb), .92) 8.6rem, rgb(var(--panel-rgb)) 9.6rem), var(--grano); }
.lh-vacio h2 { color: var(--texto); }
.lh-vacio p { color: var(--tenue); }
/* La entrada (login): el metal a toda pantalla, moviéndose muy despacio; el formulario, esmerilado. */
.lh-entrada { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.lh-entrada::before { inset: -14%; background: var(--img-vetas); filter: blur(7px) saturate(1.08); animation: lh-deriva 70s linear infinite alternate; }
.lh-entrada::after { background: radial-gradient(ellipse at 50% 46%, rgba(var(--fondo-rgb), .12), rgba(var(--fondo-rgb), .62) 78%), var(--grano); }
@keyframes lh-deriva { to { transform: translate3d(-5%, -3%, 0) rotate(1.5deg); } }
.lh-esmerilado {
  width: min(24rem, 100%); padding: 1.6rem;
  background: linear-gradient(180deg, rgba(28, 30, 38, .74), rgba(14, 15, 19, .84));
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 40px 90px -30px rgba(0, 0, 0, .9);
}
html.tema-crema .lh-esmerilado { background: linear-gradient(180deg, rgba(255, 253, 248, .82), rgba(250, 245, 234, .9)); border-color: rgba(60, 45, 20, .16); }
/* El halo de la marca como dibujo (toma el color del texto). */
.lh-halo { display: inline-block; width: 1.4em; height: 1.4em; background: currentColor; -webkit-mask: var(--halo) center / contain no-repeat; mask: var(--halo) center / contain no-repeat; }

/* ───────────── 8. estructura de una app ───────────── */
.lh-app { display: grid; grid-template-columns: 19rem 1fr; min-height: 100vh; min-height: 100dvh; }
.lh-lateral {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: .5rem; padding: 0 1rem 1rem;
  background: linear-gradient(180deg, #121319, #0e0f13 60%, #0c0d10); border-right: 1px solid var(--canto);
}
html.tema-crema .lh-lateral { background: linear-gradient(180deg, #fdfaf3, #f9f4e9); }
.lh-lateral > .lh-banda { margin: 0 -1rem .3rem; }
.lh-principal { display: flex; flex-direction: column; min-width: 0; }
/* La barra de arriba: transparente, con una línea de luz debajo (más viva en el centro). */
.lh-barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .55rem; padding: .7rem 1.2rem;
  background: linear-gradient(180deg, rgba(var(--fondo-rgb), .9), rgba(var(--fondo-rgb), .72));
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.lh-barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--canto-fuerte) 18%, color-mix(in srgb, var(--acento) 45%, transparent) 50%, var(--canto-fuerte) 82%, transparent); }
.lh-barra-titulo { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-contenido { flex: 1; padding: 1.5rem; max-width: 56rem; width: 100%; margin: 0 auto; }
/* Una fila de lista; la elegida («estás aquí») con una luz lima que entra por la izquierda. */
.lh-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.6rem; padding: .45rem .75rem; border-radius: 12px;
  background: transparent; border: 0; color: var(--texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.lh-item:hover { background: var(--cristal-alto); }
.lh-item.activo, .lh-item[aria-current="page"] {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brillo) 13%, transparent), var(--cristal) 55%);
  box-shadow: inset 2px 0 0 var(--brillo), var(--luz);
}
/* Pestañas: un grupo de píldoras sobre cristal casi opaco. */
.lh-pestanas { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: var(--r-pildora);
  background: rgba(var(--fondo-rgb), .94); border: 1px solid var(--canto-fuerte); box-shadow: var(--luz); }
.lh-pestanas button { min-height: 2.3rem; padding: .3rem .95rem; border-radius: var(--r-pildora); border: 0; background: transparent; color: var(--tenue); font: 700 .95rem/1 var(--fuente); cursor: pointer; }
.lh-pestanas button[aria-selected="true"] { background: var(--primario); color: var(--primario-texto); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--primario) 70%, transparent); }
/* La caja de acción de abajo (escribir, buscar…): el contenido se funde al llegar a ella. */
.lh-caja { position: sticky; bottom: 0; padding: .5rem 1.5rem 1rem; }
.lh-caja::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.4rem; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--fondo-rgb), .92), rgba(var(--fondo-rgb), 0)); }
.lh-caja-fila {
  display: flex; align-items: flex-end; gap: .3rem; max-width: 56rem; margin: 0 auto; padding: .35rem;
  border: 1px solid var(--canto-fuerte); border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)), var(--panel);
  box-shadow: var(--luz), 0 22px 50px -28px rgba(0, 0, 0, .95);
}
html.tema-crema .lh-caja-fila { background: linear-gradient(180deg, #fffefb, #fbf6ec); }
.lh-caja-fila:focus-within { border-color: color-mix(in srgb, var(--acento) 65%, transparent); box-shadow: var(--luz), 0 0 0 4px var(--aura), 0 0 46px -14px var(--aura); }
.lh-caja-fila textarea, .lh-caja-fila input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--texto); font: 1rem/1.5 var(--fuente); padding: .5rem .4rem; resize: none; outline: none; }
.lh-caja-fila textarea::placeholder, .lh-caja-fila input::placeholder { color: var(--tenue); opacity: 1; }
.lh-caja-fila .lh-icono { background: transparent; border-color: transparent; box-shadow: none; }
.lh-caja-fila .lh-icono:hover { background: var(--cristal-alto); }

/* ───────────── 9. estados y mensajes ───────────── */
/* Algo te ESPERA (un permiso, una decisión): ámbar que brilla. Lo más importante de la pantalla. */
.lh-espera {
  border: 1px solid color-mix(in srgb, var(--espera) 70%, transparent); border-radius: 18px; padding: 1rem 1.15rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--espera) 10%, var(--panel)), var(--panel) 70%);
  box-shadow: var(--luz), 0 0 0 4px color-mix(in srgb, var(--espera) 13%, transparent), 0 24px 50px -26px color-mix(in srgb, var(--espera) 45%, transparent);
}
.lh-espera > :first-child { font-size: 1.2rem; font-weight: 700; }
/* Avisos de colores: info, ok, aviso, error, truco. El icono va en el título. */
.lh-banner { --c: var(--acento); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-left: 4px solid var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent); border-radius: 12px; padding: .75rem .95rem; margin: 0 0 1rem; box-shadow: var(--luz); }
.lh-banner.ok { --c: var(--ok); } .lh-banner.aviso { --c: var(--espera); } .lh-banner.error { --c: var(--error); } .lh-banner.truco { --c: var(--brillo); }
.lh-banner-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--texto); }
.lh-banner-titulo .ico { color: var(--c); --ico-tono: .3; }
.lh-banner > p { margin: .35rem 0 0; }
/* Lo tuyo (un mensaje, una selección): cristal con un tinte de cobalto. */
.lh-mio { background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 15%, var(--panel)), color-mix(in srgb, var(--acento) 7%, var(--panel)));
  border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent); border-radius: 20px 20px 6px 20px; padding: .75rem 1rem; box-shadow: var(--luz); }
/* Un medidor: la barra brilla con su color (verde, ámbar o naranja según cómo va). */
.lh-medidor { height: .55rem; border-radius: var(--r-pildora); background: var(--cristal-alto); box-shadow: inset 0 0 0 1px var(--canto); overflow: hidden; }
.lh-medidor > i { display: block; height: 100%; border-radius: inherit; background: currentColor; color: var(--ok); box-shadow: 0 0 10px -1px currentColor; }
.lh-medidor.medio > i { color: var(--espera); } .lh-medidor.alto > i { color: var(--alerta); }
/* Desplegable (details/summary) con la flecha dibujada. */
.lh-desplegable > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.lh-desplegable > summary::-webkit-details-marker { display: none; }
.lh-desplegable > summary::after { content: ""; width: .78em; height: .78em; opacity: .7; background: currentColor;
  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; transition: transform .15s ease; }
.lh-desplegable[open] > summary::after { transform: rotate(90deg); }

/* ───────────── 10. móvil, dedo y movimiento ───────────── */
@media (max-width: 780px) {
  .lh-app { grid-template-columns: 1fr; }
  .lh-lateral { position: fixed; inset: 0 auto 0 0; height: auto; width: min(19rem, 86vw); z-index: 40; transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
  .lh-lateral.abierto { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
  .lh-contenido { padding: 1rem .8rem; }
  .lh-caja { padding: .4rem .5rem calc(.5rem + env(safe-area-inset-bottom)); }
  .lh-barra { padding: .5rem; gap: .3rem; }
}
/* Con el dedo: nada por debajo de 44 px, con cualquier letra. */
@media (pointer: coarse) {
  .lh-boton, .lh-campo, .lh-item, .lh-menu-item, button.lh-pildora, .lh-pestanas button { min-height: max(44px, 2.75rem); }
  .lh-icono { width: max(44px, 2.6rem); height: max(44px, 2.6rem); }
  .lh-desplegable > summary { min-height: 44px; }
  .lh-caja-fila textarea, .lh-caja-fila input { min-height: max(44px, 2.75rem); }
}
/* En el móvil, los campos con 16 px o más: si no, el iPhone hace zoom al tocarlos. */
@media (max-width: 780px), (pointer: coarse) {
  .lh-campo, .lh-caja-fila textarea, .lh-caja-fila input { font-size: max(16px, 1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .lh-entrada::before { animation: none; }
  .lh-desplegable > summary::after, .lh-lateral { transition: none; }
}