/* =====================================================================================================
   ZEDRAN AERO - estilo general de las webapps gratuitas de Zedran Labs - versión 1.1 (2026-10-22: partículas de Dark Aero y la casilla Animación)
   Lo pide el estándar de webapps gratuitas 2.1 (§2). Vive con él, en la carpeta zedran-aero/ del paquete
   G:\Mi unidad\Brain-IA\Zedran\Estandar-webapps-gratuitas\, y cada herramienta copia esa carpeta tal cual.
   Decisiones de diseño de Zedran Labs del 2026-10-21 y 22. Todavía NO se aplica a ninguna herramienta.

   - Full Aero es el estilo principal (tema claro) y Dark Aero el secundario (tema oscuro). Cambia entre los dos el
     botón de tema del estándar (data-theme="dark" en <html>, theme.js), como siempre.
   - Se carga DESPUÉS de la hoja base de la herramienta (la que usa los tokens del estándar, §2): cambia esos tokens
     y agrega la forma (vidrio, botones, sliders, fondos).
   - Tres bloques grandes:
       1. COMPARTIDOS        la forma de todo. Solo usa tokens: aquí no hay colores de marca, nada más blancos y negros
                             transparentes para brillos y sombras.
       2. ESTILO FULL AERO   todos los colores del tema claro, en :root. Dark Aero hereda lo que no cambia.
       3. ESTILO DARK AERO   solo los colores que cambian en el tema oscuro, en :root[data-theme="dark"].
     Al final va el ARCHIVO: Neo Aero y Metro Aero, comentados y sin usar.

   CÓMO SE USA EN UNA HERRAMIENTA
   - Con clases en el HTML (lo más simple en una herramienta nueva):
       .ae-panel          panel grande de vidrio con franjas de luz (secciones, encabezado, pie)
       .ae-titulo         barra azul con brillo arriba de un .ae-panel (va como primer hijo del panel)
       .ae-vidrio         vidrio sin franjas (avisos, burbujas, barras chicas)
       .ae-tarjeta        tarjeta de adentro de un panel (cada archivo, un resultado, los datos)
       .ae-btn + un tipo  .ae-principal | .ae-accion | .ae-secundario | .ae-terciario | .ae-herramienta
       .ae-opciones       opciones sueltas con radios: <label><input type="radio"><span>720p</span></label>
       .ae-tile + color   .ae-tile-verde | .ae-tile-azul | .ae-tile-naranja | .ae-tile-grafito (un número o un <svg>)
       .ae-barra          barra de avance: <div class="ae-barra"><span></span></div> (el ancho del span es el avance)
     Los campos (select, textarea, input de texto y número), las casillas, los sliders, <progress> y las barras de
     desplazamiento toman el estilo solos.
   - O con un adaptador: una hoja chica de la herramienta que aplica los mismos tokens a su propio marcado
     (también puede cubrir los ::before y el estado de los radios, que no se pueden marcar con una clase).
   - Hace falta además:
       a) los fondos en fondos/ junto a este archivo (hoy aero_2.jpg y vista_gris.jpg);
       b) para las burbujas, al inicio de <body>:
          <div class="aero-burbujas" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
       c) la parte llena de los sliders (--pct) la pone zedran-aero.js; si la herramienta cambia el valor de un slider
          por código, llama después a window.ZedranAero.rango(input).
       d) zedran-aero.js en <head>, sin defer y después de theme.js: arma el botón de engrane de abajo a la derecha
          (apagar o encender la animación y el fondo difuminado), arma las partículas de Dark Aero y aplica lo
          guardado antes del primer pintado.
   ===================================================================================================== */

/* RECETAS de los tutoriales de frutiger-aero.neocities.org (probadas una por una en la maqueta donde nació el
   estilo)
   [R-BOTÓN]  tutorials/buttons: brillo partido, cantos internos, sombra que lo hace flotar y texto hundido.
              PRESIONADO: más oscuro (filter: brightness(.88)), cantos de 1 px y sin sombra exterior.
   [R-TILE]   tutorials/tile: degradado radial al 95 % (claro abajo, oscuro a la mitad), cantos internos al 25 %,
              contorno interior de 1 px y sombra; ícono blanco al 85 %. Aquí SIN la elipse de brillo, para que los
              tiles no se confundan con botones.
   [R-PANEL]  tutorials/pane: vidrio con franjas de luz en diagonal, difuminadas y recortadas por el panel.
   Dónde va cada una: el presionado en todos los botones; los tiles en números e íconos de datos; las franjas en los
   paneles grandes. */


/* #####################################################################################################
   1. COMPARTIDOS
   ##################################################################################################### */

/* ---------- Fondo: foto, degradado de respaldo y animación (burbujas en Full, partículas en Dark) ---------- */
:root body {
  background-color: var(--ae-bgc); background-image: var(--ae-bg); background-attachment: fixed;
}
/* La foto va en una capa fija detrás de todo, para poder difuminarla con --ae-fondo-blur. Se agranda 3 veces el blur
   por cada lado para que la orilla borrosa quede fuera de la pantalla. Mientras carga la foto se ve el degradado. */
:root body::before {
  content: ""; position: fixed; z-index: var(--z-fondo); pointer-events: none;
  inset: calc(var(--ae-fondo-blur) * -3);
  background-color: var(--ae-bgc); background-image: var(--ae-wall), var(--ae-bg);
  background-size: cover; background-position: center;
  filter: blur(var(--ae-fondo-blur));
}
.aero-burbujas { position: fixed; inset: 0; z-index: var(--z-burbujas); overflow: hidden; pointer-events: none; opacity: var(--ae-burbujas); }
.aero-burbujas i {
  position: absolute; bottom: -60px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0 10%, rgba(255,255,255,.15) 35%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.55));
  border: 1px solid rgba(255,255,255,.6); animation: aero-sube var(--d) linear infinite; animation-delay: var(--w);
}
/* Cada burbuja: posición (--x), tamaño (--s), duración de la subida (--d) y retraso (--w) */
.aero-burbujas i:nth-child(1) { --x: 6%;  --s: 26px; --d: 15s; --w: 0s; }
.aero-burbujas i:nth-child(2) { --x: 21%; --s: 12px; --d: 10s; --w: 3s; }
.aero-burbujas i:nth-child(3) { --x: 39%; --s: 38px; --d: 19s; --w: 6s; }
.aero-burbujas i:nth-child(4) { --x: 58%; --s: 16px; --d: 12s; --w: 1s; }
.aero-burbujas i:nth-child(5) { --x: 76%; --s: 30px; --d: 17s; --w: 8s; }
.aero-burbujas i:nth-child(6) { --x: 93%; --s: 12px; --d: 9s;  --w: 4s; }
.aero-burbujas i:nth-child(7) { --x: 48%; --s: 20px; --d: 14s; --w: 10s; }
.aero-burbujas i:nth-child(8) { --x: 31%; --s: 10px; --d: 11s; --w: 5s; }
@keyframes aero-sube { to { transform: translate(30px, -115vh); } }
@media (prefers-reduced-motion: reduce) { .aero-burbujas { display: none; } }
/* En Dark Aero no van las burbujas: van las partículas (abajo) */
:root[data-theme="dark"] .aero-burbujas { display: none; }
/* Ajustes del visitante (botón de engrane, zedran-aero.js): apagar la animación o el fondo difuminado. Apagar la
   animación es además lo que pide WCAG 2.2.2 para algo que se mueve solo más de 5 segundos. */
:root[data-ae-animacion="no"] .aero-burbujas { display: none; }

/* ---------- PARTÍCULAS DE DARK AERO (las arma zedran-aero.js): motas de luz y, cada 5 a 10 s, una estela ----------
   Solo existen en Dark, con la animación encendida y sin movimiento reducido. Cada mota lleva sus valores al azar
   (--x, --y, tamaño --s, duración --d, titileo --t, recorrido --dx y --dy, brillo --o) y los vuelve a sortear en
   cada vuelta. Los colores están en el bloque de Dark Aero. Cuántas motas y cada cuánto sale una estela: al inicio de
   la parte 2 de zedran-aero.js. */
.aero-particulas { position: fixed; inset: 0; z-index: var(--z-burbujas); overflow: hidden; pointer-events: none; }
.aero-particulas i { position: absolute; left: var(--x); top: var(--y); }
/* Mota de luz: flota despacio y titila */
.aero-mota { width: var(--s); height: var(--s); animation: aero-mota-flota var(--d) linear var(--w) infinite; }
.aero-mota::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--mota-centro) 0 28%, var(--mota-luz) 55%, transparent 72%);
  box-shadow: 0 0 calc(var(--s) * 2.5) var(--mota-brillo), 0 0 calc(var(--s) * 6) var(--mota-halo);
  animation: aero-mota-titila var(--t) ease-in-out var(--w) infinite alternate;
}
@keyframes aero-mota-flota {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: var(--o); }
  88%  { opacity: var(--o); }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
@keyframes aero-mota-titila { from { opacity: .3; } to { opacity: 1; } }
/* Estela: una línea fina de luz que cruza una vez en diagonal y se va (blanca, verde o azul) */
.aero-estela {
  width: var(--l); height: var(--h); margin-left: calc(var(--l) / -2); border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--c) 35%, rgba(255,255,255,.95) 50%, var(--c) 65%, transparent);
  filter: drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 12px var(--c));
  opacity: 0; animation: aero-estela var(--d) ease-in-out 1 forwards;
}
.aero-estela.blanca { --c: var(--estela-blanca); }
.aero-estela.verde  { --c: var(--estela-verde); }
.aero-estela.azul   { --c: var(--estela-azul); }
@keyframes aero-estela {
  0%   { transform: rotate(var(--a)) translateX(-30vw); opacity: 0; }
  15%  { opacity: var(--o); }
  80%  { opacity: var(--o); }
  100% { transform: rotate(var(--a)) translateX(30vw); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .aero-particulas { display: none; } }
:root[data-ae-animacion="no"] .aero-particulas { display: none; }
:root[data-ae-blur="no"] body::before { inset: 0; filter: none; }

/* ---------- Vidrio ([R-PANEL]) ---------- */
:root :is(.ae-panel, .ae-vidrio) {
  background: var(--ae-glass);
  border: 1px solid var(--line);
  border-radius: var(--ae-r);
  -webkit-backdrop-filter: blur(var(--ae-blur)) saturate(160%);
  backdrop-filter: blur(var(--ae-blur)) saturate(160%);
  box-shadow: var(--ae-shadow), 0 0 0 1px var(--ae-edge) inset;
}
:root .ae-panel { background: var(--ae-franjas), var(--ae-glass); padding: var(--ae-pad); }
:root .ae-vidrio { padding: 10px 16px; }
/* Si el sistema pide menos transparencia, el vidrio se vuelve sólido */
@media (prefers-reduced-transparency: reduce) {
  :root :is(.ae-panel, .ae-vidrio) { background: var(--ae-solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Barra de título: llega a las orillas del panel */
:root .ae-titulo {
  margin: calc(-1 * var(--ae-pad)) calc(-1 * var(--ae-pad)) 16px; padding: 11px var(--ae-pad);
  background: var(--ae-head); color: var(--ae-head-ink); text-shadow: var(--ae-head-texto);
  border-bottom: 1px solid var(--ae-head-linea); border-radius: calc(var(--ae-r) - 1px) calc(var(--ae-r) - 1px) 0 0;
  font: 700 1.05rem/1.2 var(--font-display); letter-spacing: .01em;
}
/* Tarjeta de adentro */
:root .ae-tarjeta {
  padding: 12px 14px;
  background: var(--ae-paper); border: 1px solid var(--line); border-radius: var(--ae-r-field);
  box-shadow: var(--ae-tarjeta-sombra);
}

/* ---------- BOTONES: cinco tipos, para que se distinga qué hace cada uno ----------
   [HERRAMIENTA] cambian la página, no el contenido (idioma, tema y los que sean así): orbe azul como los botones de
                 atrás y adelante de Windows 7.
   [PRINCIPAL]   la acción principal de la herramienta (procesar, reproducir): verde, partido a la mitad, reflejo
                 grande arriba y brillo leve abajo, como el botón de reproducir del Reproductor de Windows Media.
   [ACCIÓN]      lo que se hace con el contenido (editar, cancelar) y la opción elegida: azul partido, sin reflejo.
   [SECUNDARIO]  especiales (descargar, el café): azul partido con reflejo y halo.
   [TERCIARIO]   poco importantes (colapsar, copiar, deshacer, quitar, +/- y las opciones no elegidas): gris con brillo.
   En los botones largos el reflejo ocupa toda la mitad de arriba, de punta a punta. */
:root .ae-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 18px; border-radius: var(--ae-r-ctl);
  font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: filter .12s, box-shadow .12s;
}
:root .ae-principal {
  background: var(--btn-principal); border: 1px solid var(--btn-principal-borde);
  color: var(--btn-principal-tinta); text-shadow: var(--btn-principal-texto); box-shadow: var(--btn-principal-sombra);
  font-family: var(--font-display); font-weight: 700;
}
:root .ae-accion {
  background: var(--btn-accion); border: 1px solid var(--btn-accion-borde);
  color: var(--btn-accion-tinta); text-shadow: var(--btn-accion-texto); box-shadow: var(--btn-accion-sombra);
}
:root .ae-secundario {
  background: var(--btn-secundario); border: 1px solid var(--btn-secundario-borde);
  color: var(--btn-secundario-tinta); text-shadow: var(--btn-secundario-texto); box-shadow: var(--btn-secundario-sombra);
}
:root .ae-terciario {
  background: var(--btn-terciario); border: 1px solid var(--btn-terciario-borde);
  color: var(--btn-terciario-tinta); text-shadow: var(--btn-terciario-texto); box-shadow: var(--btn-terciario-sombra);
}
:root .ae-herramienta {
  width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; font-weight: 700;
  background: var(--btn-herramienta); border: 1px solid var(--btn-herramienta-borde);
  color: var(--btn-herramienta-tinta); text-shadow: var(--btn-herramienta-texto); box-shadow: var(--btn-herramienta-sombra);
}
:root .ae-herramienta svg { filter: drop-shadow(0 1px 1px rgba(0,25,60,.85)); }
/* Reflejo de principales y secundarios: toda la mitad de arriba; el borde redondeado del botón lo recorta */
:root :is(.ae-principal, .ae-secundario) { position: relative; isolation: isolate; overflow: hidden; }
:root :is(.ae-principal, .ae-secundario)::before {
  content: ""; position: absolute; z-index: -1; inset: .5px .5px 60% .5px; border-radius: 99px; pointer-events: none;
  background: var(--btn-reflejo);
}
/* Al pasar el ratón, un poco más de luz */
:root .ae-btn:hover:not(:disabled) { filter: brightness(1.07); }
/* [R-BOTÓN] PRESIONADO: cantos de 1 px, sin sombra exterior y más oscuro mientras se presiona */
:root .ae-btn:active:not(:disabled), :root .ae-opciones label:active span {
  box-shadow: var(--btn-presionado); filter: brightness(.88);
}
:root .ae-btn:active:not(:disabled)::before { opacity: .55; }
:root .ae-btn:disabled { filter: grayscale(.9) opacity(.6); box-shadow: none; cursor: not-allowed; }

/* ---------- Opciones sueltas (radios): las no elegidas son [TERCIARIO]; la elegida, [ACCIÓN] hundida ---------- */
:root .ae-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
:root .ae-opciones label { position: relative; }
:root .ae-opciones input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
:root .ae-opciones span {
  display: flex; align-items: center; min-height: 38px; padding: 0 15px; border-radius: var(--ae-r-ctl); font-weight: 600;
  background: var(--btn-terciario); border: 1px solid var(--btn-terciario-borde);
  color: var(--btn-terciario-tinta); text-shadow: var(--btn-terciario-texto); box-shadow: var(--btn-terciario-sombra);
  transition: filter .12s, box-shadow .12s;
}
:root .ae-opciones input:checked + span {
  background: var(--btn-accion); border-color: var(--btn-accion-borde); font-weight: 700;
  color: var(--btn-accion-tinta); text-shadow: var(--btn-accion-texto); box-shadow: var(--btn-hundido);
}
:root .ae-opciones input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
:root .ae-opciones input:disabled + span { opacity: .5; text-decoration: line-through; cursor: not-allowed; }

/* ---------- Tiles ([R-TILE]): un número o un ícono blanco sobre color ---------- */
:root .ae-tile {
  --tile1: var(--ae-azul1); --tile2: var(--ae-azul2);
  display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 10px;
  color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.4);
  background: radial-gradient(140% 105% at 50% 100%, color-mix(in srgb, var(--tile1) 65%, white), var(--tile1) 48%, var(--tile2) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.2), 0 3px 4px rgba(0,0,0,.3);
}
:root .ae-tile svg { width: 56%; height: 56%; fill: rgb(255 255 255 / 85%); filter: drop-shadow(0 2px 0 rgb(0 0 0 / 30%)); }
:root .ae-tile-verde   { --tile1: var(--ae-verde1);   --tile2: var(--ae-verde2); }
:root .ae-tile-azul    { --tile1: var(--ae-azul1);    --tile2: var(--ae-azul2); }
:root .ae-tile-naranja { --tile1: var(--ae-naranja1); --tile2: var(--ae-naranja2); }
:root .ae-tile-grafito { --tile1: var(--ae-grafito1); --tile2: var(--ae-grafito2); }

/* ---------- Barra de avance: la verde con brillo de Windows 7 ---------- */
:root :is(.ae-barra, progress) {
  display: block; height: 12px; overflow: hidden; -webkit-appearance: none; appearance: none;
  background: var(--ae-paper); border: 1px solid var(--line-strong); border-radius: var(--ae-r-ctl);
  box-shadow: 0 1px 2px rgba(0,0,0,.2) inset;
}
:root .ae-barra > span { display: block; height: 100%; transition: width .3s; }
/* Separadas: si un navegador no conoce uno de los ::-webkit- o ::-moz-, descarta la regla completa */
:root .ae-barra > span { background: var(--ae-progress); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; border-radius: inherit; }
:root progress::-webkit-progress-bar { background: transparent; }
:root progress::-webkit-progress-value { background: var(--ae-progress); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; border-radius: inherit; }
:root progress::-moz-progress-bar { background: var(--ae-progress); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; border-radius: inherit; }

/* ---------- Campos y casillas ---------- */
/* Tamaño de los campos, con peso bajo (:where) para que la hoja de la herramienta lo pueda cambiar */
:root :where(select, textarea, input:is([type="text"], [type="number"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="password"])) {
  min-height: 40px; padding: 8px 10px; font: inherit;
}
:root :is(select, textarea, input:is([type="text"], [type="number"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="password"])) {
  background: var(--ae-paper); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--ae-r-field);
  box-shadow: 0 1px 2px rgba(8,50,95,.16) inset;
}
:root :is(select, textarea, input:is([type="text"], [type="number"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="password"])):focus { border-color: var(--accent); }
/* La lista que se abre del menú, sólida (el fondo del campo es casi transparente) */
:root select option { background: var(--ae-opcion); color: var(--ink); }
:root :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }

/* ---------- SLIDERS: ranura, parte llena verde con brillo y bolita blanca ---------- */
:root input[type="range"] { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; cursor: pointer; }
:root input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px; border: 1px solid var(--slider-ranura-borde);
  background:
    linear-gradient(180deg, var(--slider-brillo), transparent 60%),
    var(--slider-lleno) 0 0 / var(--pct, 50%) 100% no-repeat,
    var(--slider-ranura);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
:root input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--slider-bolita); border: 1px solid var(--slider-bolita-borde);
  box-shadow: 0 2px 4px rgba(0,0,0,.3), inset 0 -2px 3px rgba(0,0,0,.08);
}
:root input[type="range"]:active::-webkit-slider-thumb { filter: brightness(.92); }
:root input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; border: 1px solid var(--slider-ranura-borde); background: var(--slider-ranura); }
:root input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--slider-lleno); }
:root input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--slider-bolita-borde); background: var(--slider-bolita); box-shadow: 0 2px 4px rgba(0,0,0,.3); }

/* ---------- BARRAS DE DESPLAZAMIENTO: la de la página y las de adentro (Chrome y Edge; Firefox usa scrollbar-color) ---------- */
:root::-webkit-scrollbar, :root ::-webkit-scrollbar { width: 14px; height: 14px; }
:root::-webkit-scrollbar-track, :root ::-webkit-scrollbar-track { background: var(--scroll-riel); border-left: 1px solid var(--scroll-riel-borde); }
:root::-webkit-scrollbar-thumb, :root ::-webkit-scrollbar-thumb {
  border: 1px solid var(--scroll-pulgar-borde); border-radius: 999px; background-clip: padding-box;
  background-color: var(--scroll-pulgar-color); background-image: var(--scroll-pulgar); box-shadow: var(--scroll-pulgar-luz);
}
:root::-webkit-scrollbar-thumb:hover, :root ::-webkit-scrollbar-thumb:hover { border-color: var(--scroll-pulgar-borde-hover); }
:root::-webkit-scrollbar-corner, :root ::-webkit-scrollbar-corner { background: var(--scroll-esquina); }
@supports not selector(::-webkit-scrollbar) {
  :root { scrollbar-color: var(--scroll-firefox); }
}


/* ---------- ENLACES: texto del color normal y subrayado verde brillante, grueso ----------
   Nunca en un botón, aunque sea un <a>: un botón no lleva subrayado (Zedran Labs, 2026-10-22). */
:root :is(a, u):not(.ae-btn) { text-decoration-color: var(--enlace-subrayado); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:root a.ae-btn { text-decoration: none; }

/* ---------- BOTÓN DE ENGRANE (lo arma zedran-aero.js): abajo a la derecha, abre los ajustes del fondo ---------- */
.ae-engrane {
  position: fixed; right: 14px; bottom: 14px; z-index: var(--z-engrane);
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
:root .ae-engrane-btn { width: 36px; height: 36px; }   /* un orbe [HERRAMIENTA], un poco más chico */
:root .ae-engrane-panel { display: grid; gap: 10px; padding: 12px 14px; color: var(--ink); font-size: .9rem; }
.ae-engrane-op { display: flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer; white-space: nowrap; }
.ae-engrane-op input { width: 18px; height: 18px; margin: 0; flex: none; }


/* #####################################################################################################
   2. ESTILO FULL AERO (tema claro, el principal)
   Todos los colores. Dark Aero hereda lo que no cambia.
   ##################################################################################################### */
:root {
  color-scheme: light;

  /* Letras: Segoe UI (Frutiger se probó y se descartó). Fuera de Windows: Myriad Pro o Figtree (autoalojada, §5 del
     estándar). Los datos técnicos siguen en --font-mono (JetBrains Mono). */
  --font-body: "Segoe UI", "Myriad Pro", "Figtree", system-ui, sans-serif;
  --font-display: "Segoe UI", "Myriad Pro", "Figtree", system-ui, sans-serif;

  /* FONDO: la foto (--ae-wall) va sobre el degradado de respaldo (--ae-bg), que se ve mientras carga la foto.
     --ae-fondo-blur: qué tan borroso se ve el fondo (0px = nítido; más px = más borroso). Va encendido de inicio
                      (6px en Full y 5px en Dark, de Zedran Labs); el botón de engrane lo apaga y lo vuelve a este valor.
     --ae-burbujas: opacidad de las burbujas, que solo van en Full (1 = como están, 0 = no se ven). */
  --ae-wall: url("fondos/aero_2.jpg");
  --ae-bgc: #56c1f2;
  --ae-bg:
    radial-gradient(circle at 85% 7%, rgba(255,255,240,.95) 0 3.5%, rgba(255,255,220,.35) 8%, transparent 20%),
    linear-gradient(180deg, transparent 70%, #1fb5c9 70.3%, #0a6f9e 100%),
    radial-gradient(75% 18% at 28% 71%, #6fd23f 0 55%, transparent 56%),
    radial-gradient(60% 15% at 82% 72%, #2e9a1a 0 55%, transparent 56%),
    linear-gradient(180deg, #0b7fd6, #56c1f2 40%, #c8f0ff 70%);
  --ae-fondo-blur: 6px;
  --ae-burbujas: 1;

  /* TRANSPARENCIA DE LAS TARJETAS (en porcentaje: 100% = sólido, 0% = invisible)
     --ae-glass:  los paneles de vidrio; va del primer porcentaje (arriba a la izquierda) al segundo (abajo a la derecha).
     --ae-paper:  las tarjetas de adentro y los campos.
     --ae-solido: el vidrio cuando el sistema pide menos transparencia.
     --ae-blur:   qué tanto se difumina lo que está detrás del vidrio (más px = más borroso).
     --ae-franjas: las franjas de luz en diagonal de los paneles ([R-PANEL]). */
  --ae-glass: linear-gradient(160deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 30%));
  --ae-paper: rgb(250 253 255 / 35%);
  --ae-solido: #eef6fc;
  --ae-edge: rgb(255 255 255 / 35%);
  --ae-blur: 10px;
  --ae-shadow: 0 30px 60px -22px rgba(0,40,90,.6), 0 0 0 1px rgba(255,255,255,.5);
  --ae-tarjeta-sombra: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 14px -8px rgba(8,50,95,.35);
  --ae-franjas:
    linear-gradient(118deg, transparent 6%, rgba(255,255,255,.26) 11%, rgba(255,255,255,.06) 17%, transparent 21%),
    linear-gradient(118deg, transparent 25%, rgba(255,255,255,.14) 28%, transparent 31%),
    linear-gradient(118deg, transparent 60%, rgba(255,255,255,.18) 66%, rgba(255,255,255,.05) 71%, transparent 75%),
    linear-gradient(118deg, transparent 82%, rgba(255,255,255,.1) 85%, transparent 88%);
  --ae-r: 18px; --ae-r-ctl: 999px; --ae-r-field: 10px;   /* esquinas: paneles, botones y campos */
  --ae-pad: 18px;                                         /* margen interior de los paneles */
  --z-fondo: -2; --z-burbujas: -1; --z-engrane: 20;       /* capas: la foto, las burbujas y el botón de engrane */

  /* BARRAS DE TÍTULO: azul con brillo partido */
  --ae-head: linear-gradient(180deg, #6cc0ee, #2f9ad8 48%, #0b6fb4 52%, #2c8fd0);
  --ae-head-ink: #fff;
  --ae-head-texto: 0 1px 2px rgba(0,40,80,.6);
  --ae-head-linea: rgba(0,50,100,.35);

  /* COLOR DEL TEXTO: --ink el principal (títulos de sección, nombres, lo importante), --ink-2 el normal (párrafos
     y explicaciones) y --ink-3 el secundario (ayudas, datos técnicos).
     ENLACES: el texto va en --accent-text (el color del texto principal) y el subrayado en --enlace-subrayado, el
     verde brillante de la paleta. Así el verde se ve y el texto se lee (decisión de Zedran Labs, 2026-10-22). */
  --ink: #06304f; --ink-2: #2a587a; --ink-3: #36617f;
  --accent: #22b4e8; --accent-ink: #fff; --accent-text: var(--ink); --accent-soft: rgba(34,180,232,.16);
  --enlace-subrayado: #6fd23f;

  /* Tokens del estándar (§2) que cambian con el estilo */
  --bg: #fbfdff; --surface: rgba(250,253,255,.94); --surface-2: rgba(0,80,140,.08);
  --line: rgba(0,80,140,.24); --line-strong: rgba(0,80,140,.46);
  --amber: #8a5800; --amber-soft: #fbefd6; --danger: #c0392b;
  --focus: #ffb21f;
  --ae-opcion: #ffffff;   /* fondo de la lista que se abre de los menús */

  /* BOTONES */
  /* [PRINCIPAL] verde: base, brillo leve de abajo y halo */
  --btn-principal:
    radial-gradient(55% 60% at 50% 100%, rgba(205,255,175,.55), rgba(205,255,175,0) 70%),
    linear-gradient(180deg, #86e45e 0%, #76e043 49.5%, #32a41d 50.5%, #3fae27 75%, #6ccb4c 100%);
  --btn-principal-borde: #2f7f22;
  --btn-principal-tinta: #fff;
  --btn-principal-texto: 0 1px 2px rgba(0,60,0,.55);
  --btn-principal-sombra: inset 0 0 0 1px rgba(255,255,255,.25), 0 3px 8px rgba(20,90,10,.35), 0 0 12px rgba(111,210,63,.35);
  /* [ACCIÓN] y [SECUNDARIO] azules: --ae-a1 es el color y --ae-a2 su tono oscuro (también los tiles azules) */
  --ae-a1: #22b4e8; --ae-a2: #0670b0;
  --btn-accion: linear-gradient(180deg, color-mix(in srgb, var(--ae-a1) 50%, white), var(--ae-a1) 49%, var(--ae-a2) 51%, color-mix(in srgb, var(--ae-a1) 75%, white));
  --btn-accion-borde: color-mix(in srgb, var(--ae-a2) 75%, black);
  --btn-accion-tinta: #fff;
  --btn-accion-texto: 0 1px 1px rgba(0,0,0,.35);
  --btn-accion-sombra: 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 6px rgba(255,255,255,.25) inset, 0 2px 5px rgba(0,50,100,.3);
  --btn-secundario: var(--btn-accion);
  --btn-secundario-borde: var(--btn-accion-borde);
  --btn-secundario-tinta: #fff;
  --btn-secundario-texto: 0 1px 1px rgba(0,0,0,.35);
  --btn-secundario-sombra: 0 1px 0 #fff inset, 0 -3px 8px rgba(255,255,255,.4) inset, 0 4px 10px rgba(0,50,100,.35), 0 0 14px color-mix(in srgb, var(--ae-a1) 50%, transparent);
  /* Reflejo de principales y secundarios, en porcentaje: el primero es arriba y el segundo donde termina.
     100% = blanco sólido, 0% = invisible; para más transparente, baja los dos (sobre todo el primero). */
  --btn-reflejo: linear-gradient(180deg, rgb(255 255 255 / 50%), rgb(255 255 255 / 6%));
  /* [HERRAMIENTA] orbe azul, con los colores medidos en los botones de atrás y adelante de Windows 7.
     Mitad de arriba: degradado circular desde el centro del orbe (detrás del icono): casi azul marino al centro,
     azul grisáceo a media distancia y azul pálido solo en la orilla. Para oscurecer o aclarar, cambia los COLORES de
     las primeras paradas (el centro); mover solo los porcentajes casi no cambia nada si el color del centro es claro.
     Mitad de abajo: azul petróleo arriba que se aclara a cian, con un resplandor cian en la orilla de abajo. */
  --btn-herramienta:
    radial-gradient(50% 100% at 50% 100%,
      #1e476b 0%, #1e476b 18%,
      #3a6390 30%, #4f77a3 42%,
      #6290b8 62%, #7398c0 76%,
      #87aad2 88%, #9ab7dc 94%,
      #c4d6f5 100%) top center / 100% 50% no-repeat,
    radial-gradient(60% 30% at 50% 100%, rgba(119,220,255,.9), rgba(119,220,255,0) 80%),
    linear-gradient(180deg, #13517a 50%, #1771ae 62%, #1d93c3 74%, #2eabd3 86%, #37b2dd 100%);
  --btn-herramienta-borde: #1d3a66;
  --btn-herramienta-tinta: #fff;
  --btn-herramienta-texto: 0 1px 2px rgba(0,25,60,.8);
  --btn-herramienta-sombra: inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 5px rgba(0,30,70,.4);
  /* [TERCIARIO] gris con brillo */
  --btn-terciario: linear-gradient(180deg, #ffffff 0%, #f0f2f4 49%, #dadee2 51%, #eef0f2 100%);
  --btn-terciario-borde: #a3acb4;
  --btn-terciario-tinta: #3b454e;
  --btn-terciario-texto: 0 1px 0 rgba(255,255,255,.8);
  --btn-terciario-sombra: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.22);
  /* [R-BOTÓN] presionado (mientras se presiona) y hundido (la opción elegida) */
  --btn-presionado: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -1px 1px rgba(0,0,0,.4), inset 0 2px 4px rgba(0,0,0,.18);
  --btn-hundido: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -1px 1px rgba(0,0,0,.35), inset 0 3px 6px rgba(0,0,0,.22);

  /* TILES ([R-TILE]): verde, azul, naranja y grafito; cada uno con su color y su tono oscuro. No tienen un código de
     color: separan los datos y le dan color a lo que ya es plano (decisión de Zedran Labs, 2026-10-22). */
  --ae-verde1: #6fd23f; --ae-verde2: #2e9a1a;
  --ae-azul1: #22b4e8; --ae-azul2: #0670b0;
  --ae-naranja1: #ffa53a; --ae-naranja2: #e0640c;
  --ae-grafito1: #8f98a1; --ae-grafito2: #4d5660;

  /* BARRA DE AVANCE: verde con brillo de Windows 7 */
  --ae-progress: linear-gradient(180deg, #d4f7b8, #6fd23f 48%, #3f9e1a 52%, #86e05a);

  /* SLIDERS: ranura gris, parte llena verde con brillo y bolita blanca */
  --slider-ranura: linear-gradient(180deg, #cfd6dc, #eef1f4);
  --slider-ranura-borde: rgba(20,60,30,.35);
  --slider-brillo: rgba(255,255,255,.55);
  --slider-lleno: linear-gradient(180deg, #86e45e, #32a41d);
  --slider-bolita: radial-gradient(circle at 50% 32%, #ffffff 0 38%, #eef1f3 70%, #d3d9de 100%);
  --slider-bolita-borde: #8f9aa4;

  /* BARRAS DE DESPLAZAMIENTO: blancas y grises con brillo */
  --scroll-riel: linear-gradient(90deg, #e3e8ec, #f6f8f9);
  --scroll-riel-borde: #cfd6dc;
  --scroll-pulgar: linear-gradient(90deg, #ffffff 0%, #f0f2f4 49%, #dadee2 51%, #eef0f2 100%);
  --scroll-pulgar-color: #e4e8eb;
  --scroll-pulgar-borde: #9aa4ad;
  --scroll-pulgar-borde-hover: #7d8994;
  --scroll-pulgar-luz: inset 0 1px 0 #fff;
  --scroll-esquina: #eef1f3;
  --scroll-firefox: #c9d0d6 #eef1f3;   /* Firefox: pulgar y riel */
}


/* #####################################################################################################
   3. ESTILO DARK AERO (tema oscuro, el secundario)
   Es Full Aero con la misma paleta (verde, azul, orbe y gris), más oscura. Solo cambia lo que está aquí; lo demás
   (el orbe, el reflejo y el verde de los enlaces, por ejemplo) se hereda de Full.
   ##################################################################################################### */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* FONDO (Vista gris es temporal, en lo que hay uno con la marca). Sin foto: negro azulado con líneas de luz verdes
     y cian abajo a la derecha. */
  --ae-wall: url("fondos/vista_gris.jpg");
  --ae-bgc: #05080c;
  --ae-bg:
    radial-gradient(150% 110% at 112% 152%, transparent 61%, rgb(80 235 120 / 85%) 61.25%, transparent 61.6%),
    radial-gradient(165% 118% at 104% 160%, transparent 60%, rgb(45 195 255 / 90%) 60.2%, transparent 60.5%),
    radial-gradient(110% 150% at 135% 128%, transparent 55%, rgb(40 225 190 / 55%) 55.25%, transparent 55.7%),
    radial-gradient(160% 115% at 106% 158%, transparent 53%, rgb(30 175 205 / 20%) 59.5%, transparent 66%),
    radial-gradient(70% 55% at 100% 100%, rgb(20 120 120 / 28%), transparent 70%),
    linear-gradient(180deg, #010307, #020a14 55%, #04162a);
  --ae-fondo-blur: 5px;

  /* PARTÍCULAS (en lugar de las burbujas; las arma zedran-aero.js): motas de luz y estelas ocasionales */
  --mota-centro: rgba(235,248,255,.95);   /* el centro de cada mota */
  --mota-luz: rgba(140,215,255,.55);      /* su luz alrededor */
  --mota-brillo: rgba(150,215,255,.7);    /* el resplandor cercano */
  --mota-halo: rgba(110,190,255,.25);     /* el halo de lejos */
  --estela-blanca: rgba(230,245,255,.85);
  --estela-verde: rgba(120,230,140,.8);
  --estela-azul: rgba(80,175,255,.85);

  /* TRANSPARENCIA DE LAS TARJETAS (igual que en Full: 100% = sólido, 0% = invisible)
     --ae-paper es un azul claro muy transparente, para que las tarjetas de adentro se vean un poco más claras que el panel. */
  --ae-glass: linear-gradient(160deg, rgb(24 66 104 / 62%), rgb(6 28 52 / 42%));
  --ae-paper: rgb(110 175 235 / 12%);
  --ae-solido: #0a2238;
  --ae-edge: rgb(140 220 255 / 22%);
  --ae-shadow: 0 30px 60px -22px rgb(0 0 0 / 85%), 0 0 0 1px rgb(120 200 255 / 22%);
  --ae-franjas:
    linear-gradient(118deg, transparent 6%, rgba(160,220,255,.1) 11%, rgba(160,220,255,.03) 17%, transparent 21%),
    linear-gradient(118deg, transparent 25%, rgba(160,220,255,.06) 28%, transparent 31%),
    linear-gradient(118deg, transparent 60%, rgba(160,220,255,.08) 66%, rgba(160,220,255,.02) 71%, transparent 75%);

  /* BARRAS DE TÍTULO: el mismo azul con brillo partido, más oscuro */
  --ae-head: linear-gradient(180deg, #3b84b6, #1c679b 48%, #06426f 52%, #135786);

  /* OJO: los tokens del estándar (§2) van todos aquí aunque no cambien, porque la hoja base también los define en su
     tema oscuro y, con más peso, ganaría ella. */
  /* COLOR DEL TEXTO (los enlaces: el texto principal con el mismo subrayado verde brillante de Full) */
  --ink: #eaf6ff; --ink-2: #bcd8ec; --ink-3: #9fc2da;
  --accent: #3ec3f2; --accent-ink: #fff; --accent-text: var(--ink); --accent-soft: rgb(62 195 242 / 18%);

  /* Tokens del estándar (§2) */
  --bg: #061a2c; --surface: rgb(6 26 44 / 94%); --surface-2: rgb(140 220 255 / 10%);
  --line: rgb(140 220 255 / 22%); --line-strong: rgb(140 220 255 / 44%);
  --amber: #f2a51a; --amber-soft: #33301f; --danger: #f08a7a;
  --focus: #ffb21f;
  --ae-opcion: #0a2740;

  /* BOTONES: los mismos colores, más oscuros */
  --btn-principal:
    radial-gradient(55% 60% at 50% 100%, rgba(180,245,150,.4), rgba(180,245,150,0) 70%),
    linear-gradient(180deg, #6cc248 0%, #5cbb31 49.5%, #23801a 50.5%, #2c8a1f 75%, #50a83a 100%);
  --btn-principal-borde: #1d5a15;
  --btn-principal-sombra: inset 0 0 0 1px rgba(255,255,255,.2), 0 3px 8px rgba(0,0,0,.5), 0 0 12px rgba(92,187,49,.3);
  --ae-a1: #1c9ccf; --ae-a2: #05578c;
  /* [TERCIARIO] grafito */
  --btn-terciario: linear-gradient(180deg, #8e979f 0%, #6e777f 49%, #5a636b 51%, #757e86 100%);
  --btn-terciario-borde: #3e464d;
  --btn-terciario-tinta: #f2f5f7;
  --btn-terciario-texto: 0 -1px 0 rgba(0,0,0,.35);
  --btn-terciario-sombra: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(0,0,0,.4);

  /* TILES */
  --ae-verde1: #5cbb31; --ae-verde2: #23801a;
  --ae-azul1: #1c9ccf; --ae-azul2: #05578c;

  /* SLIDERS: ranura oscura */
  --slider-ranura: linear-gradient(180deg, #2b343c, #48525b);
  --slider-ranura-borde: rgba(0,0,0,.5);
  --slider-brillo: rgba(255,255,255,.4);

  /* BARRAS DE DESPLAZAMIENTO: grafito */
  --scroll-riel: linear-gradient(90deg, #232a31, #2e363e);
  --scroll-riel-borde: #161b20;
  --scroll-pulgar: linear-gradient(90deg, #8e979f 0%, #6e777f 49%, #5a636b 51%, #757e86 100%);
  --scroll-pulgar-color: #6e777f;
  --scroll-pulgar-borde: #3e464d;
  --scroll-pulgar-borde-hover: #5b656e;
  --scroll-pulgar-luz: inset 0 1px 0 rgba(255,255,255,.3);
  --scroll-esquina: #2e363e;
  --scroll-firefox: #7a838b #2b3239;
}

/* #####################################################################################################
   ARCHIVO: NEO AERO Y METRO AERO (comentados, sin usar)
   Los otros dos estilos que se probaron, por si se retoman. Dependen de data-style="neo" | "metro" en <html>,
   que ninguna herramienta pone: para verlos hay que agregarlo.
   Para no cerrar este comentario, sus comentarios internos van escritos como "/ * ... * /".
   #####################################################################################################

/ * =================== Tokens: NEO AERO =================== * /
:root[data-style="neo"] {
  --font-body: "Segoe UI Variable Text", "Segoe UI", "Figtree", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Figtree", system-ui, sans-serif;
  --ae-bgc: #7cc8f5;
  --ae-bg:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.5) 0 2.5%, transparent 2.7%),
    radial-gradient(circle at 86% 14%, rgba(255,255,255,.35) 0 4%, transparent 4.3%),
    radial-gradient(130% 55% at 50% 108%, #7ed957 0 36%, transparent 36.5%),
    radial-gradient(80% 50% at 20% 0%, rgba(255,255,255,.45), transparent 70%),
    linear-gradient(180deg, #2f8fe0 0%, #7cc8f5 45%, #d9f2ff 100%);
  --ae-glass: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.4));
  --ae-paper: rgba(250,253,255,.94);
  --ae-edge: rgba(255,255,255,.85);
  --ae-blur: 18px; --ae-r: 14px; --ae-r-ctl: 999px; --ae-r-field: 8px;
  --ae-shadow: 0 18px 40px -14px rgba(8,50,95,.45), 0 2px 6px rgba(8,50,95,.16);
  --ae-p1: #19a7d8; --ae-p2: #0a6fa8; --ae-p-ink: #fff;
  --ae-a1: #5cc72f; --ae-a2: #2f8a14; --ae-a-ink: #fff;
  --ae-verde1: #5cc72f; --ae-verde2: #2f8a14; --ae-azul1: #19a7d8; --ae-azul2: #0a6fa8;   / * tiles: los de los botones * /
  --ae-head: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.18));
  --ae-head-ink: var(--ink);
  --ae-on-hero: #fff; --ae-hero-shadow: 0 2px 10px rgba(5,40,80,.5);
  --ae-h-weight: 700; --ae-h-case: none;
  --ae-btn: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.58) 50%, rgba(218,236,250,.62) 51%, rgba(255,255,255,.88));
  --ae-btn-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(8,50,95,.22);
  --ae-seg-off: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.52));
  --ae-progress: linear-gradient(180deg, #d4f7b8, #6fd23f 48%, #3f9e1a 52%, #86e05a);
  / * tokens de la página * /
  --bg: #f7fbff; --surface: rgba(250,253,255,.94); --surface-2: rgba(10,70,120,.08);
  --line: rgba(10,70,120,.2); --line-strong: rgba(10,70,120,.42);
  --ink: #0d2a42; --ink-2: #33536b; --ink-3: #47657d;
  --accent: #19a7d8; --accent-ink: #fff; --accent-text: #0a6fa8; --accent-soft: rgba(25,167,216,.14);
  --focus: #ff8a00; --state-ring: transparent; --bar-fill: #5cc72f; --visor: #04182c;
  --radius: 12px;
}
:root[data-style="neo"][data-theme="dark"] {
  --ae-bgc: #0b3a66;
  --ae-bg:
    radial-gradient(130% 55% at 50% 108%, #1f5a33 0 36%, transparent 36.5%),
    radial-gradient(80% 50% at 20% 0%, rgba(120,190,255,.18), transparent 70%),
    linear-gradient(180deg, #041a33, #0b3a66 50%, #12507e);
  --ae-glass: linear-gradient(180deg, rgba(18,40,64,.72), rgba(30,70,110,.44));
  --ae-paper: rgba(15,42,68,.94); --ae-edge: rgba(160,215,255,.3);
  --ae-shadow: 0 18px 40px -14px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.3);
  --ae-head: linear-gradient(180deg, rgba(120,190,255,.22), rgba(120,190,255,0));
  --ae-btn: linear-gradient(180deg, rgba(120,180,230,.34), rgba(60,120,170,.22) 50%, rgba(20,60,100,.34) 51%, rgba(60,120,170,.34));
  --ae-btn-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 3px rgba(0,0,0,.45);
  --ae-seg-off: rgba(120,180,230,.16);
  --bg: #0f2a44; --surface: rgba(15,42,68,.94); --surface-2: rgba(160,215,255,.1);
  --line: rgba(160,215,255,.2); --line-strong: rgba(160,215,255,.44);
  --ink: #e8f4ff; --ink-2: #b6cfe3; --ink-3: #9dbbd3;
  --accent: #33b9ea; --accent-text: #8fd6ff; --accent-soft: rgba(51,185,234,.18);
  --focus: #ffa53a; --visor: #020c18;
}
/ * =================== Tokens: METRO AERO (naranja) =================== * /
:root[data-style="metro"] {
  --font-body: "Segoe UI Variable Text", "Segoe UI", "Figtree", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Figtree", system-ui, sans-serif;
  --ae-bgc: #e9eef3;
  --ae-bg:
    radial-gradient(40% 35% at 88% 6%, rgba(255,106,0,.3), transparent 70%),
    radial-gradient(45% 40% at 6% 95%, rgba(31,127,209,.28), transparent 70%),
    linear-gradient(160deg, #e9eef3, #d6e2ec);
  --ae-glass: rgba(255,255,255,.66);
  --ae-paper: #ffffff; --ae-edge: transparent;
  --ae-blur: 16px; --ae-r: 0px; --ae-r-ctl: 0px; --ae-r-field: 0px;
  --ae-shadow: none;
  --ae-p1: #ff6a00; --ae-p2: #ff6a00; --ae-p-ink: #1a0b00;
  --ae-a1: #1f7fd1; --ae-a2: #1f7fd1; --ae-a-ink: #fff;
  --ae-head: transparent; --ae-head-ink: var(--ink);
  --ae-on-hero: var(--ink); --ae-hero-shadow: none;
  --ae-h-weight: 300; --ae-h-case: lowercase;
  --ae-btn: transparent; --ae-btn-shadow: none; --ae-seg-off: transparent;
  --ae-progress: #ff6a00;
  --bg: #ffffff; --surface: #ffffff; --surface-2: rgba(20,40,60,.07);
  --line: rgba(20,40,60,.16); --line-strong: rgba(20,40,60,.5);
  --ink: #111c26; --ink-2: #3f505f; --ink-3: #4f6172;
  --accent: #ff6a00; --accent-ink: #1a0b00; --accent-text: #b34700; --accent-soft: rgba(255,106,0,.12);
  --focus: #ff6a00; --state-ring: transparent; --bar-fill: #ff6a00; --visor: #0b1622;
  --radius: 0px;
}
:root[data-style="metro"][data-theme="dark"] {
  --ae-bgc: #0b1622;
  --ae-bg:
    radial-gradient(40% 35% at 88% 6%, rgba(255,106,0,.3), transparent 70%),
    radial-gradient(45% 40% at 6% 95%, rgba(31,127,209,.3), transparent 70%),
    linear-gradient(160deg, #0b1622, #13263a);
  --ae-glass: rgba(40,70,100,.48);
  --ae-paper: #152738;
  --bg: #152738; --surface: #152738; --surface-2: rgba(170,210,240,.1);
  --line: rgba(170,210,240,.18); --line-strong: rgba(170,210,240,.5);
  --ink: #f2f6fa; --ink-2: #b3c4d3; --ink-3: #9fb3c4;
  --accent-text: #ff9a4d; --accent-soft: rgba(255,106,0,.16);
}
:root[data-style="neo"]                     { --ae-fondo-blur: 7px; }
:root[data-style="metro"]                   { --ae-fondo-blur: 0px; }
/ * Metro: los paneles llevan la barra naranja arriba * /
:root[data-style="metro"] :where(.ed-wrap.abierto > .editor, .files, .settings, details.download, .how) { border-top: 4px solid var(--accent); }
:root[data-style="metro"] .brand img { filter: none; }
:root[data-style="metro"] :is(.files, .settings, .editor) > .sec-title,
:root[data-style="metro"] .how > h2 {
  background: none; border-bottom: 0; padding: 14px 18px 2px;
  font-weight: 300; font-size: 1.7rem; text-transform: lowercase; letter-spacing: -.01em;
}
/ * mismo tamaño que Neo * /
:root[data-style="metro"] .intro h1 { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.2rem); line-height: 1; letter-spacing: -.02em; }
:root[data-style="metro"] .bubble { box-shadow: none; border-left: 4px solid var(--accent); }
:root[data-wall][data-style="metro"] .intro { border-top: 4px solid var(--accent); }
/ * [R-BOTÓN] La receta, en los neutros de Neo (los de color van más abajo, con su brillo partido) * /
:root[data-style="neo"] :is(.btn-ghost, .copy-btn, .item-x, .ed-mini, .ed-quitar-capa, .seg span),
:root[data-style="neo"] .round-btn {
  background: linear-gradient(180deg,
    var(--fa-arriba, color-mix(in srgb, var(--fa-c) 81%, white)) 0%,
    var(--fa-c) 47%,
    var(--fa-abajo, color-mix(in srgb, var(--fa-c) 88%, white)) 100%);
  border: 1px solid var(--fa-borde, color-mix(in srgb, var(--fa-c) 70%, black));
  color: var(--fa-tinta, #fff);
  text-shadow: var(--fa-texto, 0 -2px 1px rgba(0,0,0,.25));
  box-shadow: inset 0 2px 1px rgba(255,255,255,.3), inset 0 -2px 1px var(--fa-canto-abajo, rgba(0,0,0,.4)), var(--fa-sombra, 0 3px 6px rgba(0,0,0,.25));
  transition: filter .12s, box-shadow .12s;
}
/ * Neo: los de color llevan el brillo partido a la mitad con los colores brillantes, y un reflejo arriba
   (Full tiene su propio sistema de botones, en la sección "BOTONES DE FULL AERO") * /
:root[data-style="neo"] :is(.btn-primary, .btn-dl, .ed-play, .donate-btn, .seg input:checked + span) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 50%, white), var(--c1) 49%, var(--c2) 51%, color-mix(in srgb, var(--c1) 75%, white));
  border: 1px solid color-mix(in srgb, var(--c2) 75%, black);
  color: var(--c-ink); text-shadow: 0 1px 1px rgba(0,0,0,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 -2px 6px rgba(255,255,255,.3) inset, 0 2px 5px rgba(8,50,95,.3);
  transition: filter .12s, box-shadow .12s;
}
/ * [R-BOTÓN] PRESIONADO (Neo y Full): cantos de 1 px, sin sombra exterior y más oscuro mientras se presiona * /
:root[data-style]:not([data-style="metro"]) :is(.btn-primary, .btn-dl, .ed-play, .donate-btn, .btn-ghost, .copy-btn, .round-btn, .item-x, .ed-mini, .ed-quitar-capa):active:not(:disabled),
:root[data-style]:not([data-style="metro"]) .seg label:active span {
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -1px 1px rgba(0,0,0,.4), inset 0 2px 4px rgba(0,0,0,.18);
  filter: brightness(.88);
}
:root[data-style]:not([data-style="metro"]) .seg input:checked + span {
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -1px 1px rgba(0,0,0,.35), inset 0 3px 6px rgba(0,0,0,.22);
}
:root[data-style]:not([data-style="metro"]) :is(.btn-primary, .btn-dl, .ed-play, .donate-btn, .round-btn):active:not(:disabled)::before { opacity: .55; }
/ * Metro: plano, recto y con contorno; del tutorial solo toma el presionado (más oscuro) * /
:root[data-style="metro"] :is(.btn-primary, .btn-dl, .ed-play, .donate-btn, .seg input:checked + span) { background: var(--c1); border: 2px solid var(--c1); color: var(--c-ink); text-shadow: none; box-shadow: none; }
:root[data-style="metro"] :is(.btn-ghost, .copy-btn, .round-btn, .item-x, .ed-mini, .ed-quitar-capa) { background: transparent; border: 2px solid var(--ink); color: var(--ink); box-shadow: none; border-radius: 0; text-shadow: none; }
:root[data-style="metro"] :is(.btn-ghost, .copy-btn, .round-btn, .item-x, .ed-mini):hover:not(:disabled) { background: var(--accent-soft); filter: none; }
:root[data-style="metro"] :is(.btn-primary, .btn-dl, .ed-play, .donate-btn):active:not(:disabled) { filter: brightness(.84); }
:root[data-style="metro"] :is(.btn-ghost, .copy-btn, .round-btn, .item-x, .ed-mini, .ed-quitar-capa):active:not(:disabled) { background: color-mix(in srgb, var(--ink) 16%, transparent); }
:root[data-style="metro"] .ed-play { border-radius: 0; }
:root[data-style="metro"] .btn-primary { font-weight: 600; letter-spacing: .04em; text-transform: lowercase; }
/ * Metro: la opción elegida va en naranja, como en la demo (después de la regla que reparte --c1) * /
:root[data-style="metro"] .seg input:checked + span { --c1: var(--accent); --c2: var(--accent); --c-ink: #1a0b00; }
:root[data-style="metro"] :is(select, .size-num input, .ed-des input) { border: 2px solid var(--ink-2); box-shadow: none; }
:root[data-style="metro"] .seg span { border: 2px solid var(--line-strong); background: transparent; color: var(--ink); }
:root[data-style="metro"] .seg input:checked + span { border-color: var(--c1); }
:root[data-style="metro"] .field legend { font-weight: 600; }
:root[data-style="metro"] :is(.item, .estimate, .dl-facts, .ed-sinvista) { box-shadow: none; }
:root[data-style="metro"] .est-big { font-weight: 300; font-size: 2.8rem; }
:root[data-style="metro"] .bar { box-shadow: none; }
:root[data-style="metro"] details.download > summary { background: none; padding: 16px 18px 12px; }
:root[data-style="metro"] .dl-title { font-weight: 300; font-size: 1.9rem; text-transform: lowercase; }
:root[data-style="metro"] details.download > summary::after { border-radius: 0; border: 2px solid var(--ink); background: transparent; }
:root[data-style="metro"] .dl-steps li::before { border-radius: 0; background: none; box-shadow: none; text-shadow: none; color: var(--accent); font-weight: 300; font-size: 2.2rem; top: 2px; left: 14px; }
/ * [R-TILE] Neo y Full: cada dato lleva su ícono en un tile (escudo verde, descarga azul, rayo naranja y monitor grafito),
   con los colores brillantes de los botones y sin elipse de brillo.
   Va en ::before porque el texto del <li> lo reescribe el cambio de idioma. * /
:root[data-style]:not([data-style="metro"]) .how-facts li { position: relative; padding-left: 66px; min-height: 64px; }
:root[data-style]:not([data-style="metro"]) .how-facts li::before {
  content: ""; position: absolute; left: 12px; top: 12px; width: 42px; height: 42px; border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.2), 0 3px 4px rgba(0,0,0,.3);
}
:root[data-style]:not([data-style="metro"]) .how-facts li:nth-child(1)::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-opacity='.85' d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3z'/%3E%3C/svg%3E") 50% 50% / 56% 56% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-opacity='.3' d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3z'/%3E%3C/svg%3E") 50% calc(50% + 2px) / 56% 56% no-repeat,
    radial-gradient(140% 105% at 50% 100%, color-mix(in srgb, var(--ae-verde1) 65%, white), var(--ae-verde1) 48%, var(--ae-verde2) 100%);
}
:root[data-style]:not([data-style="metro"]) .how-facts li:nth-child(2)::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-opacity='.85' d='M11 3h2v10l3.5-3.5 1.4 1.4L12 16.8l-5.9-5.9 1.4-1.4L11 13V3zM5 19h14v2H5z'/%3E%3C/svg%3E") 50% 50% / 56% 56% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-opacity='.3' d='M11 3h2v10l3.5-3.5 1.4 1.4L12 16.8l-5.9-5.9 1.4-1.4L11 13V3zM5 19h14v2H5z'/%3E%3C/svg%3E") 50% calc(50% + 2px) / 56% 56% no-repeat,
    radial-gradient(140% 105% at 50% 100%, color-mix(in srgb, var(--ae-azul1) 65%, white), var(--ae-azul1) 48%, var(--ae-azul2) 100%);
}
:root[data-style]:not([data-style="metro"]) .how-facts li:nth-child(3)::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-opacity='.85' d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E") 50% 50% / 56% 56% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-opacity='.3' d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E") 50% calc(50% + 2px) / 56% 56% no-repeat,
    radial-gradient(140% 105% at 50% 100%, color-mix(in srgb, #ffa53a 65%, white), #ffa53a 48%, #e0640c 100%);
}
:root[data-style]:not([data-style="metro"]) .how-facts li:nth-child(4)::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-opacity='.85' d='M3 4h18v12H3V4zm7 14h4v2h3v1H7v-1h3v-2z'/%3E%3C/svg%3E") 50% 50% / 56% 56% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-opacity='.3' d='M3 4h18v12H3V4zm7 14h4v2h3v1H7v-1h3v-2z'/%3E%3C/svg%3E") 50% calc(50% + 2px) / 56% 56% no-repeat,
    radial-gradient(140% 105% at 50% 100%, color-mix(in srgb, #8f98a1 65%, white), #8f98a1 48%, #4d5660 100%);
}
/ * Metro: los datos son mosaicos pegados y el primero va en naranja * /
:root[data-style="metro"] .how-grid { grid-template-columns: minmax(0, 1fr); }
:root[data-style="metro"] .how-facts { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
:root[data-style="metro"] .how-facts li { padding: 16px; min-height: 120px; }
:root[data-style="metro"] .how-facts li:first-child { background: var(--accent); border-color: var(--accent); color: #1a0b00; }
:root[data-style="metro"] .how-facts li:first-child strong { color: #1a0b00; }

   FIN DEL ARCHIVO */