/* Pilo Edit · PWA · lenguaje «Shopex adaptado» (28-oct-2026, BORRADOR para aprobación de Cris).
   Se carga DESPUÉS de neo.css y solo actúa con <html data-paleta="pilo">. Del kit Shopex se toman SOLO colores, sombras y
   proporciones medidas (radio 24 en contenedores, 14–16 en tarjetas, botones y campos en píldora de 52, barra inferior blanca con
   la pestaña elegida en píldora menta). Informe: desarrollo/ui_shopex/INFORME.md */
html[data-paleta="pilo"]{--r:24px;
  --sombra:6px 8px 22px var(--so),-6px -6px 16px var(--sc);
  --sombra-p:4px 5px 12px var(--so),-4px -4px 10px var(--sc);
  --hundido:inset 3px 3px 7px var(--so),inset -3px -3px 7px var(--sc)}
html[data-paleta="pilo"] .neu{border-radius:24px}
html[data-paleta="pilo"] :is(.hund,.subir,.reproductor,.aviso,.token,.copia-col,.extra-total,.tipo-pedido button,.paquetes button){border-radius:20px}
html[data-paleta="pilo"] :is(.opcion,.paso){border-radius:16px}
/* campos y botones en píldora (el kit: 52 de alto, radio completo) */
html[data-paleta="pilo"] .campo{border-radius:999px;min-height:52px;padding:12px 20px}
html[data-paleta="pilo"] textarea.campo{border-radius:20px}
html[data-paleta="pilo"] .btn{border-radius:999px}
html[data-paleta="pilo"] .btn.prim{min-height:52px;font-weight:700}
html[data-paleta="pilo"] .btn.chico{border-radius:999px}
html[data-paleta="pilo"] .logo{border-radius:14px}
/* barra inferior: blanca, esquinas de arriba redondeadas, pestaña elegida en píldora menta con tinta (y contorno, de neo.css) */
html[data-paleta="pilo"] .barra-cel{border-radius:24px 24px 0 0;box-shadow:0 -6px 22px var(--so)}
html[data-paleta="pilo"] .barra-cel button{border-radius:999px}
/* galería: tarjetas con radio 16 sobre el panel oscuro (el video sigue sobre oscuro) */
html[data-paleta="pilo"] .pg-media{border-radius:16px}
html[data-paleta="pilo"] .pg-sec{border-radius:24px}
/* palabra resaltada en oscuro: texto menta con subrayado bajo (el marcador de acento detrás de texto claro daría ~2,5:1) */
html[data-paleta="pilo"][data-modo="oscuro"] h1 em,html[data-paleta="pilo"][data-modo="oscuro"] .pg-titulo em{color:var(--n-acento);
  background:linear-gradient(transparent 86%,color-mix(in srgb,var(--n-acento) 55%,transparent) 86%,color-mix(in srgb,var(--n-acento) 55%,transparent) 96%,transparent 96%)}
/* en modo claro la galería vive sobre el panel oscuro: el marcador violeta con tinta no aplica ahí → mismo trato menta */
html[data-paleta="pilo"][data-modo="claro"] .pg-sec .pg-titulo em{color:var(--n-acento);
  background:linear-gradient(transparent 86%,color-mix(in srgb,var(--n-acento) 55%,transparent) 86%,color-mix(in srgb,var(--n-acento) 55%,transparent) 96%,transparent 96%)}
/* Pilo en oscuro: placa lavanda clara */
html[data-paleta="pilo"][data-modo="oscuro"] .pilo-fig::before{background:color-mix(in srgb,var(--n-apoyo) 30%,#ffffff);border-radius:28px 28px 24px 24px}
/* Pilo v2 (28-oct): en claro el anillo de foco es tinta; dentro del panel oscuro del video daría 1,06:1 → ahí va en el amarillo de apoyo (13:1) */
html[data-paleta="pilo"][data-modo="claro"] :is(.zona-video,.escenario,.pg-sec) :focus-visible{outline-color:var(--n-apoyo)}
/* Pilo v2: palabra resaltada IGUAL en los dos modos (misma forma, solo cambia el color): texto del acento en su versión AA
   (claro: coral oscuro #bd3f2a, 4,7:1 · oscuro: menta, 9,1:1) con subrayado grueso bajo del acento. En el panel oscuro: el acento tal cual. */
html[data-paleta="pilo"]:is([data-modo="claro"],[data-modo="oscuro"]) :is(h1 em,.pg-titulo em){color:var(--n-borde-acento);
  background:linear-gradient(transparent 86%,color-mix(in srgb,var(--n-acento) 55%,transparent) 86%,color-mix(in srgb,var(--n-acento) 55%,transparent) 96%,transparent 96%)}
html[data-paleta="pilo"]:is([data-modo="claro"],[data-modo="oscuro"]) .pg-sec .pg-titulo em{color:var(--n-acento)}
/* Pilo v2 (28-oct): la PWA usa viewport-fit=cover; sin esto, instalada en un iPhone con notch la cabecera y la línea del cupo
   («4 de 5 · 13 min de 15 min») quedan bajo la barra de estado. Se respeta la zona segura de arriba en los dos modos. */
html[data-paleta="pilo"] .app{padding-top:max(16px,env(safe-area-inset-top,0px))}
/* ==== Pilo v3 · USO de los colores de vida (GENERADO por desarrollo/ui_pilo_v3/herramientas/paleta_pilo_v3.py — no editar a mano). Roles: acento = acción · apoyo = Pilo y foco · vida-1 = marcadores y etiquetas · vida-2 = brillo ==== */
/* palabra resaltada = vida-2 (claro: tinta sobre marcador amarillo, como Verde Pilo · oscuro: ámbar con subrayado) */
html[data-paleta="pilo"][data-modo="claro"] :is(h1,h2,h3,.pg-titulo) em{color:var(--n-texto);background:linear-gradient(transparent 60%,var(--n-vida-2) 60%,var(--n-vida-2) 92%,transparent 92%)}
html[data-paleta="pilo"][data-modo="oscuro"] :is(h1,h2,h3,.pg-titulo) em{color:var(--n-vida-2);background:linear-gradient(transparent 86%,color-mix(in srgb,var(--n-vida-2) 55%,transparent) 86%,color-mix(in srgb,var(--n-vida-2) 55%,transparent) 96%,transparent 96%)}
html[data-paleta="pilo"][data-modo] :is(.zona-video,.pg-sec) :is(h1,h2,h3,.pg-titulo) em{color:var(--n-vida-2);background:linear-gradient(transparent 86%,color-mix(in srgb,var(--n-vida-2) 55%,transparent) 86%,color-mix(in srgb,var(--n-vida-2) 55%,transparent) 96%,transparent 96%)}
/* vida-1 = marcadores y etiquetas: número de cada sección de la galería, «Nuevo» y «Recomendado» */
html[data-paleta="pilo"][data-modo] .pg-sec .pg-sec-cab h2 em{color:var(--n-vida-1);background:none}
html[data-paleta="pilo"] :is(.pg-ins:not(.pg-ins-pronto),.pg-reco){background:var(--n-vida-1);color:var(--n-sobre-vida)}
/* vida-2 = brillo: precio de fundador, paso en curso del progreso y destellos de Pilo */
html[data-paleta="pilo"] .pg-plan .pg-pf{color:var(--n-vida-2-texto)}
html[data-paleta="pilo"][data-modo] .paso.a i{background:var(--n-vida-2);color:var(--n-sobre-vida);box-shadow:none}
html[data-paleta="pilo"] :is(.pilo-listo,.pilo-galeria)::after{content:"\2726";position:absolute;z-index:3;top:-4px;right:-6px;font:400 17px/1 system-ui,sans-serif;color:var(--n-vida-2);text-shadow:-15px 15px 0 var(--n-vida-1);transform:scale(.85);pointer-events:none}