/* La cara de Xarpie (public/xarpie-cara.js). Cargado DESPUES de cuarto-oscuro.css: usa sus tokens (--tinta, --apagado, --marca-punto, --t-*, --e-*, --lento).
   La cara es SIEMPRE papel claro con tinta oscura, en los dos temas (por eso tokens propios y no --pag/--tinta, que cambian en oscuro). Lo que se dibuja
   FUERA del cuerpo (burbujas, signo de pregunta, rayos) usa --tinta, que si cambia con el tema: asi se ve sobre la tinta oscura y sobre el papel claro.
   Todo movimiento va en pasos (~8 dibujos por segundo): salta, no desliza. Con movimiento reducido nada se mueve y no hay destello. */
:root{ --cara-papel:#FCFBF7; --cara-tinta:#2B2926; --cara-flash:#FCFBF7; --cara-punto:var(--marca-punto);
  /* Los ocho colores: una pareja (punto del lente + tinte del cuerpo, que sigue siendo papel). Medidos: punto/cuerpo >= 4.7:1 y tinta/cuerpo >= 10:1.
     Los valores viven AQUI, en :root, y nada mas (paridad-cuarto-oscuro): el color activo es :root[data-xc-color="..."] y el menu pinta cada muestra con estas variables.
     El almagre es el de la marca: usa --marca-punto, asi que si la marca cambia, el de siempre cambia con ella. */
  --xc-almagre-punto:var(--marca-punto); --xc-almagre-papel:#FCFBF7;
  --xc-tinta-punto:#2B2926; --xc-tinta-papel:#E4E1DA;
  --xc-cianotipo-punto:#27579B; --xc-cianotipo-papel:#D3E2F4;
  --xc-salvia-punto:#436540; --xc-salvia-papel:#D9E7D2;
  --xc-ciruela-punto:#5A3E93; --xc-ciruela-papel:#E0D7F0;
  --xc-turquesa-punto:#1B6E5B; --xc-turquesa-papel:#CDE8E1;
  --xc-ocre-punto:#7C5A18; --xc-ocre-papel:#F1E2B8;
  --xc-ladrillo-punto:#9A3A54; --xc-ladrillo-papel:#F3D7DF;
}
:root[data-xc-color="tinta"]{ --cara-punto:var(--xc-tinta-punto); --cara-papel:var(--xc-tinta-papel); --cara-flash:var(--xc-tinta-papel); }
:root[data-xc-color="cianotipo"]{ --cara-punto:var(--xc-cianotipo-punto); --cara-papel:var(--xc-cianotipo-papel); --cara-flash:var(--xc-cianotipo-papel); }
:root[data-xc-color="salvia"]{ --cara-punto:var(--xc-salvia-punto); --cara-papel:var(--xc-salvia-papel); --cara-flash:var(--xc-salvia-papel); }
:root[data-xc-color="ciruela"]{ --cara-punto:var(--xc-ciruela-punto); --cara-papel:var(--xc-ciruela-papel); --cara-flash:var(--xc-ciruela-papel); }
:root[data-xc-color="turquesa"]{ --cara-punto:var(--xc-turquesa-punto); --cara-papel:var(--xc-turquesa-papel); --cara-flash:var(--xc-turquesa-papel); }
:root[data-xc-color="ocre"]{ --cara-punto:var(--xc-ocre-punto); --cara-papel:var(--xc-ocre-papel); --cara-flash:var(--xc-ocre-papel); }
:root[data-xc-color="ladrillo"]{ --cara-punto:var(--xc-ladrillo-punto); --cara-papel:var(--xc-ladrillo-papel); --cara-flash:var(--xc-ladrillo-papel); }

.xc-p{ fill:var(--cara-papel); }
.xc-ln{ stroke:var(--cara-tinta); }
.xc-lo{ stroke:var(--cara-tinta); fill:none; }
.xc-pl{ stroke:var(--cara-papel); fill:none; }
.xc-i{ fill:var(--cara-tinta); }
.xc-d{ fill:var(--cara-punto); }
.xc-mk{ stroke:var(--tinta); fill:none; }
.xc-mkf{ fill:var(--tinta); }
.xc-pop{ opacity:0; pointer-events:none; }
.xc .xc-pop *{ fill:var(--cara-flash); stroke:var(--cara-flash); stroke-width:11px; stroke-dasharray:none; opacity:1; }
.xc-rayos{ opacity:0; }

/* El bloque de arriba al centro, bajo la fila de Chats (cuando la bienvenida ya salio). */
#xc-cabeza{ flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; padding:0 0 var(--e-2); }
/* La cara es la puerta a Cerebro (#/cerebro): un enlace de verdad, con foco de teclado y sin subrayado. */
.xc-enlace{ display:flex; flex-direction:column; align-items:center; gap:2px; color:inherit; background:none; border:0; padding:0; font:inherit; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:var(--r-flota); }
.xc-cara, .xc-cara-h, .xc-nombre, .xc-estado{ display:block; }
/* El ▾ junto al nombre dice que la cara se toca (en telefono no hay hover). */
.xc-enlace .xc-nombre::after{ content:" \25BE"; font-size:var(--t-meta); font-weight:400; color:var(--apagado); }
.xc-enlace:focus-visible{ outline:2px solid var(--marca-punto); outline-offset:2px; }
#xc-cabeza[hidden], .chatpane.xb-modo #xc-cabeza, body:not(.xc-on) #xc-cabeza{ display:none; }
#xc-cara .xc-svg{ width:88px; height:auto; display:block; overflow:visible; }
#chatpane[data-xc-ancho="estrecho"] #xc-cara .xc-svg{ width:84px; }
.xc-nombre{ font-size:var(--t-texto); font-weight:600; color:var(--tinta); line-height:1.2; margin-top:var(--e-1); }
.xc-estado{ font-size:var(--t-meta); color:var(--apagado); line-height:1.2; }
/* En una columna angosta solo la cara: el nombre y el estado se esconden a la vista (un lector de pantalla oye el estado igual, por #xc-voz). */
#chatpane[data-xc-ancho="estrecho"] #xc-nombre, #chatpane[data-xc-ancho="estrecho"] #xc-estado{ display:none; }

/* La cara grande de la bienvenida. */
.xc-heroe{ display:flex; flex-direction:column; align-items:center; gap:var(--e-1); margin:0 auto var(--e-2); }
.xc-heroe .xc-svg{ width:min(150px, 40vw); height:auto; display:block; overflow:visible; }
.xc-heroe .xc-nombre{ font-size:var(--t-sub); }
.xc-heroe .xc-estado{ font-size:var(--t-texto); }

/* Telefono: la cara mas chica y pegada arriba (Daniel, 3 oct). */
@media (max-width:860px){
  #xc-cara .xc-svg{ width:72px; }
  .xc-heroe .xc-svg{ width:min(116px, 32vw); }
  .xc-heroe{ margin-bottom:var(--e-1); }
}

/* El glifo de cada respuesta: quieto, a trazo fino. */
.ava .xc-glifo{ width:30px; height:auto; display:block; }

/* ---- Movimiento (en pasos) ---- */
@keyframes xc-parp{ 0%,90%,100%{ transform:scaleY(1); } 93%,96%{ transform:scaleY(.12); } }
@keyframes xc-mira{ 0%{ transform:translate(0,0); } 25%{ transform:translate(6px,-6px); } 50%,80%{ transform:translate(12px,-12px); } }
@keyframes xc-escanea{ 0%{ transform:translate(0,0); } 25%{ transform:translate(-14px,0); } 50%{ transform:translate(0,0); } 75%{ transform:translate(14px,0); } }
@keyframes xc-gira{ to{ transform:rotate(360deg); } }
@keyframes xc-vel{ 0%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes xc-b1{ 0%,15%{ opacity:0; } 16%,100%{ opacity:1; } }
@keyframes xc-b2{ 0%,35%{ opacity:0; } 36%,100%{ opacity:1; } }
@keyframes xc-b3{ 0%,55%{ opacity:0; } 56%,100%{ opacity:1; } }
@keyframes xc-q{ to{ stroke-dashoffset:0; } }
@keyframes xc-qp{ to{ opacity:1; } }
@keyframes xc-ceja{ from{ transform:translateY(8px); } to{ transform:translateY(0); } }
@keyframes xc-rayos{ 0%,60%{ opacity:1; } 100%{ opacity:0; } }
@keyframes xc-pop{ 0%{ opacity:0; } 25%{ opacity:.9; } 100%{ opacity:0; } }
@keyframes xc-fundido{ from{ opacity:0; } to{ opacity:1; } }

.xc .xc-parp{ animation:xc-parp calc(4s * var(--lento)) steps(1) infinite; }
.xc .xc-mira{ animation:xc-mira calc(2.4s * var(--lento)) steps(1) infinite; }
.xc .xc-escanea{ animation:xc-escanea calc(1.6s * var(--lento)) steps(1) infinite; }
.xc .xc-gira{ animation:xc-gira calc(3s * var(--lento)) steps(12) infinite; }
.xc .xc-vel{ animation:xc-vel calc(.5s * var(--lento)) steps(1) infinite; }
.xc .xc-b1{ animation:xc-b1 calc(2.4s * var(--lento)) steps(1) infinite; }
.xc .xc-b2{ animation:xc-b2 calc(2.4s * var(--lento)) steps(1) infinite; }
.xc .xc-b3{ animation:xc-b3 calc(2.4s * var(--lento)) steps(1) infinite; }
.xc .xc-q{ stroke-dasharray:1; stroke-dashoffset:1; animation:xc-q calc(.8s * var(--lento)) steps(8) calc(.2s * var(--lento)) forwards; }
.xc .xc-qp{ opacity:0; animation:xc-qp calc(.1s * var(--lento)) steps(1) calc(1s * var(--lento)) forwards; }
.xc .xc-ceja{ animation:xc-ceja calc(.3s * var(--lento)) steps(2) both; }
.xc.xc-destello .xc-rayos{ animation:xc-rayos calc(.9s * var(--lento)) steps(5) both; }
.xc.xc-destello .xc-pop{ animation:xc-pop calc(.5s * var(--lento)) steps(4) calc(.05s * var(--lento)) both; }
/* Quieta (pestana oculta, fuera de la vista, o chat plegado): se detiene donde esta. */
.xc.xc-quieto *{ animation-play-state:paused !important; }

/* Movimiento reducido: sin ebullicion, sin movimiento, sin destello. La cara cambia con un fundido de 120 ms, y se sigue sabiendo que hace Xarpie. */
@media (prefers-reduced-motion: reduce){
  .xc *{ animation:none !important; }
  .xc .xc-q{ stroke-dashoffset:0; }
  .xc .xc-qp{ opacity:1; }
  .xc .xc-svg{ animation:xc-fundido calc(120ms * var(--lento)) linear both !important; }
}
html.movimiento-reducido .xc *{ animation:none !important; }
html.movimiento-reducido .xc .xc-q{ stroke-dashoffset:0; }
html.movimiento-reducido .xc .xc-qp{ opacity:1; }
html.movimiento-reducido .xc .xc-svg{ animation:xc-fundido calc(120ms * var(--lento)) linear both !important; }

/* ---- Los ocho colores en el menu: cada muestra pinta el tinte del cuerpo y, adentro, el punto del lente (tokens de :root, ningun valor aqui). ---- */
.xc-sw[data-c="almagre"]{ --sw-p:var(--xc-almagre-papel); --sw-d:var(--xc-almagre-punto); }
.xc-sw[data-c="tinta"]{ --sw-p:var(--xc-tinta-papel); --sw-d:var(--xc-tinta-punto); }
.xc-sw[data-c="cianotipo"]{ --sw-p:var(--xc-cianotipo-papel); --sw-d:var(--xc-cianotipo-punto); }
.xc-sw[data-c="salvia"]{ --sw-p:var(--xc-salvia-papel); --sw-d:var(--xc-salvia-punto); }
.xc-sw[data-c="ciruela"]{ --sw-p:var(--xc-ciruela-papel); --sw-d:var(--xc-ciruela-punto); }
.xc-sw[data-c="turquesa"]{ --sw-p:var(--xc-turquesa-papel); --sw-d:var(--xc-turquesa-punto); }
.xc-sw[data-c="ocre"]{ --sw-p:var(--xc-ocre-papel); --sw-d:var(--xc-ocre-punto); }
.xc-sw[data-c="ladrillo"]{ --sw-p:var(--xc-ladrillo-papel); --sw-d:var(--xc-ladrillo-punto); }

/* ---- El menu de la cara (public/xarpie-cara-menu.js). Reusa .co-menu (fondo, radio, sombra y su transicion de abrir/cerrar). Se monta en <body>. ---- */
.xc-menu{ box-sizing:border-box; padding:var(--e-3); display:flex; flex-direction:column; gap:var(--e-3); overflow-y:auto; max-width:calc(100vw - 16px); color:var(--texto); font-size:var(--t-texto); }
.xc-menu.xc-sin-anim, .xc-menu.xc-sin-anim.abierto{ transition:none; }
.xc-m-cab{ display:flex; align-items:center; gap:var(--e-3); }
.xc-m-cara .xc-svg{ display:block; height:auto; overflow:visible; }
.xc-m-nom{ font-weight:600; color:var(--tinta); font-size:var(--t-sub); }
.xc-m-sec{ display:flex; flex-direction:column; gap:var(--e-2); }
.xc-m-lab{ font-size:var(--t-meta); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--apagado); }
.xc-m-fila{ display:flex; gap:var(--e-2); align-items:center; }
.xc-m-inp{ flex:1; min-width:0; box-sizing:border-box; height:40px; border-radius:var(--r-pildora); border:1px solid var(--punto); background:transparent; color:var(--tinta); font:inherit; font-size:var(--t-campo); padding:0 var(--e-3); }
.xc-m-inp[disabled]{ color:var(--apagado); border-style:dashed; }
.xc-m-inp[aria-invalid="true"]{ border-color:var(--urge); }
.xc-m-btn{ flex:none; min-height:40px; padding:0 var(--e-4); border-radius:var(--r-pildora); border:0; background:var(--boton); color:var(--boton-t); font:inherit; cursor:pointer; white-space:nowrap; }
.xc-m-btn[disabled]{ opacity:.5; cursor:default; }
.xc-m-ayuda{ font-size:var(--t-meta); line-height:1.4; color:var(--apagado); }
.xc-m-ayuda.err{ color:var(--urge); }
.xc-m-sw{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.xc-sw{ flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--punto); padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--sw-p); }
.xc-sw i{ display:block; width:14px; height:14px; border-radius:50%; background:var(--sw-d); }
.xc-sw[aria-checked="true"], .xc-bd[aria-checked="true"]{ outline:2px solid var(--tinta); outline-offset:2px; }
.xc-m-bd{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e-2); }
.xc-bd{ height:48px; border-radius:var(--r-flota); border:1px solid var(--linea); background:transparent; padding:var(--e-1); cursor:pointer; }
.xc-mini{ display:block; width:100%; height:100%; }
.xc-m-sep{ height:1px; background:var(--linea); }
.xc-m-tg{ display:flex; flex-direction:column; }
.xc-m-pie{ display:flex; justify-content:space-between; align-items:center; }
.xc-m-lnk{ min-height:36px; padding:var(--e-2) 0; background:none; border:0; font:inherit; color:var(--texto); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@media (hover:hover){ .xc-m-lnk:hover{ color:var(--tinta); } .xc-sw:hover, .xc-bd:hover{ border-color:var(--medio); } }
.xc-menu :is(button, input):focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
/* Telefono: una hoja desde abajo con su telon (mismos tokens que el resto de las hojas). */
.xc-telon{ position:fixed; inset:0; z-index:calc(var(--z-menu) - 1); background:var(--velo); }
.xc-menu.xc-hoja{ left:0; right:0; bottom:0; top:auto; width:auto; max-width:none; max-height:82vh; border-radius:var(--r-flota) var(--r-flota) 0 0; padding-bottom:calc(var(--e-4) + env(safe-area-inset-bottom)); background:var(--hoja); transform:translateY(100%); transition:transform var(--d-hoja-sale) var(--curva-cambia), opacity var(--d-hoja-sale) var(--curva-cambia), visibility 0s linear var(--d-hoja-sale); }
.xc-menu.xc-hoja.abierto{ transform:none; transition:transform var(--d-hoja) var(--curva-arrastre), opacity var(--d-hoja) var(--curva-entra), visibility 0s; }
.xc-menu.xc-hoja.xc-sin-anim, .xc-menu.xc-hoja.xc-sin-anim.abierto{ transition:none; }
.xc-grab{ flex:none; width:36px; height:4px; border-radius:4px; background:var(--linea); margin:0 auto; }
@media (prefers-reduced-motion: reduce){ .xc-menu.xc-hoja, .xc-menu.xc-hoja.abierto{ transform:none; transition:opacity 120ms linear, visibility 0s; } }
html.movimiento-reducido .xc-menu.xc-hoja, html.movimiento-reducido .xc-menu.xc-hoja.abierto{ transform:none; transition:opacity 120ms linear, visibility 0s; }