/* La escena publicitaria de la lavada. Sin dependencias: la CSP solo permite
   'self'.

   ⚠️ HOJA APARTE de `estilo.css` a proposito. Aquella la comparten las tres
   explicaciones que ya estan publicadas; meter aqui los colores de la piel, el
   agua y la chapa de la lavadora obligaria a tocar un archivo del que dependen
   tres paginas en produccion para pintar una cuarta.

   ⚠️ Y LA REGLA QUE MANDA EN TODO ESTE ARCHIVO: la CSP es `style-src 'self'`,
   asi que **los atributos `style="..."` del HTML se descartan** — con el unico
   aviso en la consola. Todo lo fijo vive en clases, aqui. Lo que se calcula lo
   escribe el guion por CSSOM (`el.style.setProperty`), que la CSP no bloquea.
   Los atributos de presentacion de SVG (`fill`, `stroke`, `d`) NO son estilos
   en linea y no les afecta. */

:root {
  --fondo:    #0d1117;
  --papel:    #161b22;
  --linea:    #283040;
  --texto:    #e6edf3;
  --tenue:    #8b98a9;
  --acento:   #58a6ff;
  --bien:     #3fb950;
  --mal:      #f85149;
  --aviso:    #d29922;

  /* Los de la escena */
  --muro:     #131a26;
  --piso:     #1d2634;
  --chapa:    #c9d4e2;
  --chapa-b:  #97a6ba;
  --cristal:  #0e1723;
  --agua:     #2f86c4;
  --piel:     #e0a479;
  --pelo:     #33261f;
  --canasto:  #b07a4a;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f6f8fa; --papel: #fff; --linea: #d6dde6;
    --texto: #1f2933; --tenue: #5b6672; --acento: #0b62d0;
    --muro: #eaeff5; --piso: #dae2ec;
    --chapa: #f2f6fa; --chapa-b: #b6c2d1; --cristal: #dde6f0;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 0 20px 60px;
}

.cabeza, main, .pie { max-width: 1120px; margin: 0 auto; }

/* ⚠️ La cabecera se aprieta a propósito. Lo que hay debajo —texto del paso y
   escena— tiene que caber JUNTO en una ventana normal, y cada píxel de aquí
   arriba sale de ahí. */
.cabeza { padding: 22px 0 12px; }

/* El titular a la izquierda y los controles a la derecha, en la misma banda.
   ⚠️ `align-items: flex-end` los alinea con la BASE del titular: arriba
   quedaban flotando a media altura, sin nada con lo que alinearse. */
.cabeza-fila {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px 28px; flex-wrap: wrap; margin-bottom: 16px;
}
.cabeza-titulo { flex: 1 1 22rem; }
.cabeza-controles {
  display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
  flex: 0 0 auto;
}

.migas {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tenue);
}
h1 { margin: 0; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.1;
     letter-spacing: -.015em; }

/* --- la escena ---------------------------------------------------------- */

.escena {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 8px;
  /* En pantalla estrecha la escena se desplaza DENTRO de su caja; lo que nunca
     puede es empujar la pagina a lo ancho. */
  overflow-x: auto;
}

/* ⚠️ EL TOPE DE ALTURA ES LA MITAD DEL ARREGLO: sin él, la escena crece con el
   ancho de la pantalla y empuja el texto del capítulo fuera del encuadre — que
   es justo el problema que se venía a resolver subiéndolo.

   ⚠️ Y va contra el ESPACIO QUE QUEDA, no contra un `56vh` a ojo. Lo de arriba
   —titular, controles y texto del paso— **no encoge con la ventana**, así que un
   porcentaje fijo cuadra en una pantalla grande y se pasa en un portátil de
   768 px de alto. El `max()` pone un suelo para que en una ventana muy baja la
   escena no acabe siendo una raya.

   No deforma nada: el `viewBox` con su `preserveAspectRatio` por defecto escala
   el contenido y lo centra, dejando aire a los lados si sobra ancho. */
#lienzo {
  display: block; width: 100%; min-width: 860px; height: auto;
  /* ⚠️ 389 = los 362 px de arriba + los 18 de padding y borde de `.escena` + 9 de
     aire. MEDIDO, no estimado: la primera versión olvidó el padding y se pasaba
     por 7 px justo en la ventana de portátil, que es la que importa.
     Comprobado de 700 px a 1440 px de alto. Si se toca la cabecera, se vuelve a
     medir — este número depende de ella. */
  max-height: max(280px, calc(100vh - 389px));
  margin: 0 auto;
}

/* --- el local ------------------------------------------------------------ */

.pared  { fill: var(--muro); }
.suelo  { stroke: var(--linea); stroke-width: 1.5; }
.zocalo { fill: var(--piso); }
.lugar  { fill: var(--tenue); font: 600 11px/1 var(--mono); letter-spacing: .18em; }
.lugar-sub { fill: var(--tenue); font: 11px/1 system-ui, sans-serif; opacity: .8; }

/* El anillo del paso. El arco se dibuja con `stroke-dasharray`, que el guion
   ajusta por CSSOM — la CSP no bloquea eso, solo los `style=` del marcado. */
.aro-fondo { fill: none; stroke: var(--linea); stroke-width: 4; }
.aro {
  fill: none; stroke: var(--acento); stroke-width: 4; stroke-linecap: round;
}
/* ⚠️ Los tres capitulos ⭐ pintan el anillo en ambar. Es el mismo codigo de
   color que los puntos del mando: quien vuelve a la pagina reconoce cuales son
   los momentos que importan sin tener que leer el titulo. */
#paso-marca.destacado .aro { stroke: var(--aviso); }
#paso-marca.destacado .aro-n { fill: var(--aviso); }
.aro-n {
  fill: var(--texto); font: 700 19px/1 var(--mono); text-anchor: middle;
}

.cartel-c { fill: rgba(127,150,190,.07); stroke: var(--linea); stroke-width: 1.5; }
.cartel-t { fill: var(--tenue); font: 600 13px/1 var(--mono);
            letter-spacing: .22em; text-anchor: middle; }
.cartel-p { fill: var(--texto); font: 700 34px/1 var(--mono); text-anchor: middle; }
.cartel-s { fill: var(--tenue); font: 11px/1 system-ui, sans-serif;
            text-anchor: middle; }

/* --- la persona ---------------------------------------------------------- */

.sombra { fill: rgba(0,0,0,.28); }
.miembro {
  stroke: var(--texto); stroke-width: 7; stroke-linecap: round; fill: none;
}
.miembro.brazo { stroke-width: 6; }
.ropa   { fill: var(--acento); }
.piel   { fill: var(--piel); }
.pelo   { fill: var(--pelo); }

.canasto { fill: none; stroke: var(--canasto); stroke-width: 3.5; }
.trapo   { fill: var(--tenue); }
.trapo.a { fill: #d9e2ec; }
.trapo.b { fill: #8fb4d9; }
.trapo.c { fill: #c2b0d6; }

.celuchico   { fill: var(--linea); stroke: var(--chapa-b); stroke-width: 2; }
.celuchico-p { fill: var(--acento); opacity: .75; }

/* --- la lavadora --------------------------------------------------------- */

.maquina     { fill: var(--chapa); stroke: var(--chapa-b); stroke-width: 1.5; }
.maquina-top { fill: var(--chapa-b); opacity: .45; }
.perilla     { fill: var(--muro); stroke: var(--chapa-b); stroke-width: 1.5; }
.perilla-marca { fill: var(--chapa); }
.visor       { fill: var(--cristal); }
.luz         { fill: var(--tenue); }
/* ⚠️ Las dos luces son lo unico que dice si HAY CORRIENTE, que es la pieza que
   sostiene toda la promesa. Van por clase y no por `fill` calculado para que
   `reiniciar()` las apague con una linea y no se quede ninguna encendida de un
   capitulo anterior. */
#luz-maquina.on { fill: var(--acento); }
#luz-enchufe.on { fill: var(--bien); }

.hueco-puerta { fill: var(--cristal); }
.marco-puerta { fill: none; stroke: var(--chapa-b); stroke-width: 8; opacity: .55; }
.vidrio  { fill: var(--cristal); stroke: var(--chapa-b); stroke-width: 2; }
.agua    { fill: var(--agua); opacity: .55; }
/* Con hueco se ve girar; un circulo liso gira y parece quieto. */
.tambor  { fill: none; stroke: var(--acento); stroke-width: 4;
           stroke-dasharray: 30 14; stroke-linecap: round; }
.tirador { fill: var(--chapa-b); }
.pie-maquina { fill: var(--chapa-b); font: 600 11px/1 var(--mono);
               letter-spacing: .16em; text-anchor: middle; }

/* --- enchufe y medidor --------------------------------------------------- */

.cable   { fill: none; stroke: var(--linea); stroke-width: 3.5;
           stroke-linecap: round; }
.enchufe { fill: var(--papel); stroke: var(--linea); stroke-width: 1.5; }
.clavija { fill: var(--tenue); }
.luz-enchufe { fill: var(--linea); }

.medidor   { fill: var(--papel); stroke: var(--linea); stroke-width: 1.5; }
.medidor-r { fill: var(--tenue); font: 600 9px/1 var(--mono);
             letter-spacing: .14em; text-anchor: middle; }
.medidor-w { fill: var(--acento); font: 600 18px/1 var(--mono);
             text-anchor: middle; }
.medidor-s { fill: var(--tenue); font: 10px/1 var(--mono); text-anchor: middle; }

/* --- el celular ---------------------------------------------------------- */

.cel-marco    { fill: var(--linea); stroke: var(--chapa-b); stroke-width: 1.5; }
.cel-pantalla { fill: var(--papel); }
.cel-notch    { fill: var(--linea); }
.cel-marca { fill: var(--texto); font: 600 13px/1 system-ui, sans-serif; }
.cel-hora  { fill: var(--tenue); font: 11px/1 var(--mono); text-anchor: end; }
.cel-sep   { stroke: var(--linea); stroke-width: 1; }

.cel-sub    { fill: var(--tenue); font: 12px/1 system-ui, sans-serif; }
.cel-sub.c  { text-anchor: middle; }
.cel-saldo  { fill: var(--texto); font: 700 30px/1 var(--mono); }
.cel-mini   { fill: var(--tenue); font: 10.5px/1 system-ui, sans-serif; }
.cel-mini.c { text-anchor: middle; }
.cel-mini.aviso { fill: var(--aviso); }
.cel-titulo { fill: var(--texto); font: 700 17px/1 system-ui, sans-serif;
              text-anchor: middle; }
.cel-grande { fill: var(--texto); font: 700 26px/1 var(--mono);
              text-anchor: middle; }
.cel-reloj  { fill: var(--aviso); font: 700 44px/1 var(--mono);
              text-anchor: middle; }

.cel-pill   { fill: rgba(63,185,80,.16); stroke: var(--bien); stroke-width: 1; }
.cel-pill-t { fill: var(--bien); font: 600 10px/1 var(--mono);
              text-anchor: middle; letter-spacing: .08em; }
#cel-pastilla.reservada .cel-pill   { fill: rgba(210,153,34,.18); stroke: var(--aviso); }
#cel-pastilla.reservada .cel-pill-t { fill: var(--aviso); }
#cel-pastilla.enciclo   .cel-pill   { fill: rgba(88,166,255,.18); stroke: var(--acento); }
#cel-pastilla.enciclo   .cel-pill-t { fill: var(--acento); }

.cel-btn   { fill: var(--acento); }
.cel-btn-t { fill: #06101f; font: 600 15px/1 system-ui, sans-serif;
             text-anchor: middle; }
.cel-btn.hueco   { fill: none; stroke: var(--tenue); stroke-width: 1.5; }
.cel-btn-t.hueco { fill: var(--tenue); font-size: 14px; }
#cel-boton.apagado .cel-btn   { fill: rgba(127,150,190,.18); }
#cel-boton.apagado .cel-btn-t { fill: var(--tenue); }

.cel-barra-f { fill: rgba(127,150,190,.18); }
.cel-barra   { fill: var(--aviso); }
.cel-barra.ok { fill: var(--acento); }

.cel-cajita { fill: rgba(127,150,190,.07); stroke: var(--linea); stroke-width: 1; }
.cel-traza  { fill: none; stroke: var(--acento); stroke-width: 2;
              stroke-linejoin: round; stroke-linecap: round; }

.cel-tic-c { fill: rgba(63,185,80,.16); stroke: var(--bien); stroke-width: 2; }
.cel-tic   { fill: none; stroke: var(--bien); stroke-width: 4;
             stroke-linecap: round; stroke-linejoin: round; }
.cel-fila-e { fill: var(--tenue); font: 12.5px/1 system-ui, sans-serif; }
.cel-fila-v { fill: var(--texto); font: 600 13px/1 var(--mono); text-anchor: end; }
.cel-fila-v.cobro { fill: var(--mal); }

.spinner-f { fill: none; stroke: var(--linea); stroke-width: 4; }
.spinner   { fill: none; stroke: var(--acento); stroke-width: 4;
             stroke-linecap: round; }

/* Las pantallas se apagan por defecto y el guion enciende la que toca. Asi la
   pagina sin JS enseña un celular vacio y no las cinco encimadas. */
.pantalla { opacity: 0; }

/* --- el panel del operador ----------------------------------------------- */

.mon-marco    { fill: var(--linea); stroke: var(--chapa-b); stroke-width: 1.5; }
.mon-pantalla { fill: var(--papel); }
.mon-pie, .mon-base { fill: var(--chapa-b); opacity: .6; }
.mon-t   { fill: var(--texto); font: 600 11px/1 system-ui, sans-serif; }
.mon-sep { stroke: var(--linea); stroke-width: 1; }
.mon-fila { fill: rgba(127,150,190,.09); }
.mon-f   { fill: var(--tenue); font: 10px/1 system-ui, sans-serif; }
.mon-btn { fill: var(--acento); opacity: .85; }
.mon-btn-t { fill: #06101f; font: 600 9px/1 system-ui, sans-serif;
             text-anchor: middle; }

/* --- lo que viaja -------------------------------------------------------- */

#cobro rect { fill: var(--mal); }
.cobro-t { fill: #fff; font: 700 15px/1 var(--mono); text-anchor: middle; }
#orden rect { fill: var(--acento); }
.orden-t { fill: #06101f; font: 600 13px/1 var(--mono); text-anchor: middle; }

/* --- la curva ------------------------------------------------------------ */

.curva-caja { fill: rgba(127,150,190,.05); stroke: var(--linea); stroke-width: 1; }
.curva-r { fill: var(--tenue); font: 600 10px/1 var(--mono); letter-spacing: .14em; }
.eje   { stroke: var(--linea); stroke-width: 1; }
.traza { fill: none; stroke: var(--acento); stroke-width: 2.5;
         stroke-linejoin: round; stroke-linecap: round; }
.hito  { fill: var(--texto); font: 600 14px/1 system-ui, sans-serif;
         text-anchor: middle; }
.marca   { stroke: var(--tenue); stroke-width: 1; stroke-dasharray: 3 3; }
.marca-t { fill: var(--tenue); font: 10px/1 var(--mono); text-anchor: middle; }
.marca.clave   { stroke: var(--mal); stroke-dasharray: none; stroke-width: 1.5; }
.marca-t.clave { fill: var(--mal); font-weight: 600; }

.veredicto { font: 700 18px/1 system-ui, sans-serif; text-anchor: middle;
             fill: var(--bien); }
.veredicto.malo { fill: var(--mal); }

/* Lo que esta decidido pero todavia no construido. La escena lo enseña, pero no
   lo cuenta como hecho. */
.pendiente {
  fill: var(--aviso); font: 700 11px/1 var(--mono); text-anchor: end;
  letter-spacing: .1em; text-transform: uppercase;
}

.oculto { opacity: 0; }

/* --- resumen / completo -------------------------------------------------- */

.cambio-ver { margin: 0; font-size: 13px; }
.cambio-ver a {
  display: inline-block; padding: 5px 13px; margin-left: 7px;
  border: 1px solid var(--linea); border-radius: 999px;
  color: var(--tenue); text-decoration: none;
}
.cambio-ver a.activo { border-color: var(--acento); color: var(--acento); }
.cambio-ver a:hover { color: var(--texto); }
.cambio-ver .tenue { margin-left: 6px; font-size: 13px; opacity: .75; }

/* --- texto del paso ------------------------------------------------------ */

/* ⚠️ `min-height` FIJO, y no es cosmético: el texto de cada capítulo tiene un
   largo distinto, y sin reservar el alto la escena entera SUBE Y BAJA al pasar
   de uno a otro. Con la explicación arriba, ese salto mueve el dibujo que estás
   mirando. */
.explica {
  /* ⚠️ 206px es el capitulo MAS LARGO medido, no un numero redondo. Con 128 la
     escena daba un salto de 25 px —una linea de texto— cada vez que se pasaba de
     un capitulo largo a uno corto, y con la explicacion arriba ese salto mueve
     el dibujo que estas mirando. El `max-width: 78ch` del parrafo es lo que hace
     que este numero valga: el texto se envuelve al mismo ancho aunque la ventana
     crezca, asi que su alto solo depende de lo que diga. */
  margin: 0; min-height: 206px;
  border-left: 3px solid var(--acento); padding-left: 18px;
}
.paso-num {
  font: 12px/1 var(--mono); color: var(--tenue); letter-spacing: .1em;
  margin-bottom: 6px;
}
.explica h2 { margin: 0 0 8px; font-size: clamp(19px, 2.2vw, 25px);
              line-height: 1.2; }
.explica p { margin: 0; max-width: 78ch; color: var(--texto); font-size: 15.5px; }
.explica strong { color: var(--acento); font-weight: 600; }
.explica em { color: var(--aviso); font-style: normal; font-weight: 600; }

.receta {
  margin: 16px 0 0; padding: 14px 16px; max-width: 72ch;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
  font: 13px/1.7 var(--mono); color: var(--texto);
  overflow-x: auto; white-space: pre;
}

/* --- mando --------------------------------------------------------------- */

/* Sin `margin-top`: ya no cuelga debajo de la escena, va en la banda del titular. */
.mando { display: flex; align-items: center; gap: 12px; margin: 0; }
.mando button {
  background: var(--papel); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 9px;
  padding: 7px 13px; font: inherit; font-size: 14px; cursor: pointer;
}
.mando button:hover { border-color: var(--acento); color: var(--acento); }
.mando button:disabled { opacity: .35; cursor: default; }
.mando button:disabled:hover { border-color: var(--linea); color: var(--texto); }
.mando .auto { margin-left: 4px; font-size: 13px; }

.puntos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.punto {
  width: 11px; height: 11px; border-radius: 50%; padding: 0;
  border: 1px solid var(--linea); background: transparent; cursor: pointer;
}
.punto.activo { background: var(--acento); border-color: var(--acento); }
/* Los tres momentos que tienen que quedarse en la cabeza se marcan tambien en
   el mando: quien vuelve a la pagina sabe adonde ir. */
.punto.estrella { width: 13px; height: 13px; border-color: var(--aviso); }
.punto.estrella.activo { background: var(--aviso); border-color: var(--aviso); }

/* --- pie ----------------------------------------------------------------- */

.pie {
  margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--linea);
  color: var(--tenue); font-size: 14px;
}
.pie strong { color: var(--texto); }
.pie .tenue { font-size: 12.5px; opacity: .8; }
.pie a { color: var(--acento); }

@media (max-width: 720px) {
  .cabeza-controles { align-items: flex-start; width: 100%; }
  .mando { flex-wrap: wrap; }
  .cambio-ver a { margin: 0 7px 0 0; }
}