/* Pilo Edit · PWA · capa del personaje Pilo + papel (28-oct-2026, BORRADOR para aprobación de Cris).
   Se carga DESPUÉS de estilos.css y galeria.css.
   - Por defecto (camino c, recomendado): papel crema donde vive Pilo; el video siempre sobre negro
     (miniaturas de la galería, que ya eran oscuras, y el "escenario" del reproductor).
   - El interruptor "Oscuro" sigue funcionando: en oscuro, Pilo lleva halo violeta y una superficie más clara detrás (camino a).
   - La app ya NO se pone oscura sola por el modo del sistema: el papel es parte de la marca. Solo si la persona lo pide.
   - <html data-camino="b">: todo papel, también detrás del reproductor (solo para comparar).
   Informe: desarrollo/pilo_personaje/INFORME.md */

:root,
html[data-camino]{
  --sup:#f6f1e7;--sup2:#efe8db;--so:rgba(122,100,68,.32);--sc:rgba(255,255,255,.95);
  --texto:#1d1927;--suave:#55505f;--tenue:#6f6879;
  --cian:#086d67;--azul:#2a62c9;--violeta:#6544d8;--rosa:#c22d5a;--dorado:#8f5400;--verde:#1d7a4f;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="dark"]){
    --sup:#f6f1e7;--sup2:#efe8db;--so:rgba(122,100,68,.32);--sc:rgba(255,255,255,.95);
    --texto:#1d1927;--suave:#55505f;--tenue:#6f6879;
    --cian:#086d67;--azul:#2a62c9;--violeta:#6544d8;--rosa:#c22d5a;--dorado:#8f5400;--verde:#1d7a4f;color-scheme:light}
  :root:not([data-theme="dark"]) .interruptor i{left:3px}
}
:root[data-theme="dark"]{
  --sup:#1f2633;--sup2:#242c3b;--so:rgba(8,11,18,.72);--sc:rgba(62,74,96,.38);
  --texto:#e4eaf4;--suave:#a3b0c7;--tenue:#8592ab;
  --cian:#4fe0d6;--azul:#6eb0ff;--violeta:#a99bff;--rosa:#ff8bab;--dorado:#f5b356;--verde:#5cd39b;color-scheme:dark}
/* en oscuro, el texto del botón principal va oscuro sobre el degradado claro (blanco no pasa AA sobre #a99bff) */
:root[data-theme="dark"] .btn.prim,:root[data-theme="dark"] .sino button[aria-pressed="true"],:root[data-theme="dark"] .pg-btn.pg-prim,
:root[data-theme="dark"] .pg-card[aria-current="true"] .pg-btn[data-accion="elegir"],:root[data-theme="dark"] .pg-pest[aria-selected="true"]{color:#0b0f16}
.paso.h i{color:#0b0f16}
:root:not([data-theme="dark"]) .paso.h i{color:#fff}
:root:not([data-theme="dark"]) .capa{background:rgba(246,241,231,.6)}

/* ---------- escenario oscuro para el video (caminos a y c) ---------- */
.escenario{border-radius:24px;padding:14px;background:#11151c;box-shadow:var(--sombra)}
.escenario .reproductor{box-shadow:0 18px 40px -18px rgba(0,0,0,.9)}
html[data-camino="b"] .escenario{background:transparent;box-shadow:none;padding:0}

/* ---------- Pilo ---------- */
.pilo-fig{margin:0;pointer-events:none;line-height:0;position:relative}
.pilo-fig img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
:root[data-theme="dark"] .pilo-fig::before{content:"";position:absolute;inset:4% 2% 12%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(169,155,255,.62),rgba(130,120,200,.34) 58%,transparent 100%)}
:root[data-theme="dark"] .pilo-fig img{filter:drop-shadow(0 0 1.5px rgba(196,186,255,.95)) drop-shadow(0 0 10px rgba(169,155,255,.55))}
.pilo-fig{isolation:isolate}

@keyframes pilo-flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pilo-respirar{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.pilo-flota img{animation:pilo-flotar 4s ease-in-out infinite}
.pilo-respira img{transform-origin:50% 90%;animation:pilo-respirar 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pilo-flota img,.pilo-respira img{animation:none!important}}

/* galería: Pilo con lupa a la derecha del título */
#vEstilos{position:relative}
.pilo-galeria{position:absolute;right:-2px;top:-6px;width:74px;z-index:2}
#vEstilos .pg-cabeza{padding-right:78px}
@media (min-width:560px){.pilo-galeria{width:96px}#vEstilos .pg-cabeza{padding-right:104px}}
/* un Pilo por pantalla: si está abierto el formulario de cuenta, el de la galería se esconde */
body:has(#capa:not([hidden])) .pilo-galeria{visibility:hidden}

/* modal de cuenta */
.pilo-modal{width:96px;margin:-6px auto -4px}

/* subir: Pilo abre los brazos en lugar del ícono del celular */
.subir .pilo-subir{width:84px;margin:0 auto 6px}
.subir.listo .pilo-subir{opacity:.9}

/* estado: Pilo a la derecha del título (flota mientras edita) */
.pilo-estado{float:right;width:88px;margin:-8px -4px 4px 10px}
#estadoProceso .barra,#estadoAprobar .momentos,#estadoError .aviso{clear:both}
#estadoProceso::after,#estadoError::after{content:"";display:block;clear:both}
.listo-titulo{display:flex;align-items:center;justify-content:center;gap:8px}
.pilo-listo{width:60px;flex:none;margin:-10px 0 -8px}

/* estado vacío de Mis videos */
.vacio{display:grid;justify-items:center;gap:8px;text-align:center;padding:26px 16px}
.pilo-vacio{width:104px}

/* cuenta: el token es un secreto */
.token-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pilo-token{width:58px;flex:none;margin:-10px -4px -6px 0}

/* insignias que van SOBRE la miniatura oscura: siempre con el cian claro (texto oscuro encima pasa AA) */
.pg-ins{background:#4fe0d6}

/* ======================================================================================
   Camino D = paleta de Pilo Grow (tema "Brisa" de Pilo v2), para comparar. Mismos hex exactos y mismos dos ajustes
   de accesibilidad que en la landing (ver landing_pilo/assets/pilo-personaje.css §4).
   d = Brisa en todo (escenario del video sobre papel) · dc = Brisa + regla de C (escenario del video en el navy #181f39)
   ====================================================================================== */
@font-face{font-family:"Fredoka";font-weight:500 700;font-display:swap;src:url("../fuentes/fredoka-latin.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url("../fuentes/instrumentsans-latin.woff2") format("woff2")}
html[data-camino="d"],html[data-camino="dc"]{
  --sup:#fdf8f1;--sup2:#eaf5f2;--so:rgba(24,31,57,.16);--sc:rgba(255,255,255,0);
  --texto:#181f39;--suave:#4a4f68;--tenue:#4a4f68;
  --cian:#181f39;--azul:#181f39;--violeta:#181f39;--rosa:#c0392b;--dorado:#8a5a00;--verde:#1d6b4f;
  --cian-s:rgba(253,165,151,.55);--vio-s:rgba(253,165,151,.3);
  --titulo:"Fredoka","Instrument Sans",system-ui,sans-serif;--cuerpo:"Instrument Sans",system-ui,sans-serif;
  --sombra:0 10px 32px -12px rgba(24,31,57,.18);--sombra-p:0 6px 18px -8px rgba(24,31,57,.14);--hundido:inset 0 1px 4px rgba(24,31,57,.12);
}
:is(html[data-camino="d"],html[data-camino="dc"]) body{background:#fdf8f1;background-image:radial-gradient(circle at 12% 0%,rgba(173,216,206,.30),transparent 45%),
  radial-gradient(circle at 100% 18%,rgba(253,165,151,.28),transparent 40%),radial-gradient(circle at 30% 100%,rgba(253,165,151,.28),transparent 50%);background-attachment:fixed}
:is(html[data-camino="d"],html[data-camino="dc"]) :is(h1,h2,h3,.marca b){font-weight:700}
:is(html[data-camino="d"],html[data-camino="dc"]) h1 em{color:#181f39;background:linear-gradient(transparent 58%,#fda597 58%,#feda90 92%,transparent 92%)}
:is(html[data-camino="d"],html[data-camino="dc"]) :is(.neu,.opcion,.tipo-pedido button,.sug button,.barra-cel){
  background:color-mix(in srgb,#fff 68%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.55)}
:is(html[data-camino="d"],html[data-camino="dc"]) .btn{border-radius:999px;font-family:var(--titulo);font-weight:600;background:color-mix(in srgb,#fff 70%,transparent);border:1px solid rgba(255,255,255,.55)}
:is(html[data-camino="d"],html[data-camino="dc"]) .btn.prim,:is(html[data-camino="d"],html[data-camino="dc"]) .sino button[aria-pressed="true"]{background:#fda597;color:#181f39;border:0;box-shadow:0 10px 24px -8px rgba(253,165,151,.6)}
:is(html[data-camino="d"],html[data-camino="dc"]) .logo{background:linear-gradient(135deg,#fda597,#feda90);color:#181f39}
:is(html[data-camino="d"],html[data-camino="dc"]) .barra i,:is(html[data-camino="d"],html[data-camino="dc"]) .interruptor i{background:linear-gradient(90deg,#add8ce,#fda597)}
:is(html[data-camino="d"],html[data-camino="dc"]) .subir{border-color:#fda597}
:is(html[data-camino="d"],html[data-camino="dc"]) .paso.h i{background:#add8ce;color:#181f39}
:is(html[data-camino="d"],html[data-camino="dc"]) .paso.a i{background:#fda597;color:#181f39}
:is(html[data-camino="d"],html[data-camino="dc"]) .barra-cel button[aria-current="page"]{background:#fda597;color:#181f39;box-shadow:none}
:is(html[data-camino="d"],html[data-camino="dc"]) .pg{--g-grad:linear-gradient(135deg,#fda597,#feda90);--g-cian:#add8ce;--g-violeta:#181f39;--g-dorado:#8a5a00}
:is(html[data-camino="d"],html[data-camino="dc"]) :is(.pg-pest[aria-selected="true"],.pg-btn.pg-prim,.pg-card[aria-current="true"] .pg-btn[data-accion="elegir"],.pg-tuyo){color:#181f39}
:is(html[data-camino="d"],html[data-camino="dc"]) :is(.pg-plan,.pg-pest,.pg-btn){background:color-mix(in srgb,#fff 70%,transparent)}
:is(html[data-camino="d"],html[data-camino="dc"]) .pg-ins{background:#add8ce;color:#181f39}
html[data-camino="d"] .escenario{background:transparent;box-shadow:none;padding:0}
html[data-camino="dc"] .escenario{background:#181f39}

/* Regla de C en la galería de la app: Pilo y el encabezado en papel; las secciones de miniaturas en un escenario oscuro */
:is(html[data-camino="c"]:not([data-theme="dark"]),html[data-camino="dc"]) .pg-sec{
  background:#11151c;border-radius:24px;padding:16px 12px 14px;margin-top:14px;color:var(--g-texto);
  --g-texto:#e9eef7;--g-suave:#a3b0c7;--g-tenue:#8592ab;--g-fondo:#1f2633;--g-fondo2:#242c3b;
  --g-cian:#4fe0d6;--g-azul:#6eb0ff;--g-violeta:#a99bff;--g-rosa:#ff8bab;--g-dorado:#f5b356;--g-verde:#5cd39b;
  --g-so:rgba(0,0,0,.55);--g-sc:rgba(62,74,96,.3);
  --g-sombra:7px 7px 16px rgba(0,0,0,.6),-5px -5px 14px rgba(62,74,96,.25);
  --g-sombra-p:4px 4px 9px rgba(0,0,0,.55),-3px -3px 8px rgba(62,74,96,.3);--g-hundido:inset 4px 4px 9px rgba(0,0,0,.55),inset -3px -3px 8px rgba(62,74,96,.3)}
html[data-camino="dc"] .pg-sec{background:#181f39;--g-fondo:#222a48;--g-fondo2:#283152;--g-violeta:#fda597;--g-cian:#add8ce;
  --g-grad:linear-gradient(135deg,#fda597,#feda90);--g-sombra:0 14px 32px -14px rgba(0,0,0,.7);--g-sombra-p:0 6px 18px -8px rgba(0,0,0,.6);--g-hundido:inset 0 1px 4px rgba(0,0,0,.45)}
:is(html[data-camino="c"]:not([data-theme="dark"]),html[data-camino="dc"]) .pg-sec .pg-btn{color:var(--g-texto)}
html[data-camino="dc"] .pg-sec :is(.pg-btn.pg-prim,.pg-card[aria-current="true"] .pg-btn[data-accion="elegir"]){color:#181f39}