/* La piel del producto.
 *
 * Sin librería de componentes: acá el aspecto propio es parte del argumento de
 * calidad (CLAUDE.md), y MUI hace que todo se vea igual a todo. Además esto es,
 * en parte, una herramienta de diseño: si se ve barata, el veredicto que da
 * también se lee barato.
 *
 * Móvil primero y a una mano — el cliente saca la foto del logo con el teléfono
 * parado en el mostrador.
 *
 * La idea que ordena todo: **taller de oficio con instrumentos de precisión.**
 * Papel cálido y tipografía con carácter para lo que se lee; números tabulares
 * en mono para lo que se mide. El preview es el objeto principal de la
 * pantalla y está tratado como tal, no como una ilustración al costado.
 */

/* --------------------------------------------------------------- tipografía
   Tres roles y ninguno más. Una tipografía de más no agrega matiz: agrega ruido.

   - **Archivo** — el logotipo y la interfaz. Grotesca de proporción estrecha,
     legible a 13 px en un teléfono al sol, que es donde se usa esto.
   - **Source Serif 4** — titulares y texto. La serifa es lo mejor que tiene la
     página: da voz a lo que se lee y separa "lo que te estamos diciendo" de
     "lo que podés tocar".
   - **IBM Plex Mono** — medidas y conteos, con `tabular-nums`. Un número que
     cambia mientras se arrastra un control no puede saltar de ancho. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root {
  /* Fondo y superficie: los valores exactos del documento de identidad
     (#F4F3F0 / #FFFFFF claro, #0D0F12 / #15181D oscuro). El papel cálido que
     tenía esto antes leía a artesanía; el producto tiene que leer a
     instrumento, y tener la app en una paleta y la marca en otra es deriva
     que después nadie recuerda por qué existe (D-064). --tela/--tela-hueco y
     --linea/--linea-suave reusan los mismos dos tonos "line"/"line-soft" del
     documento: ahí solo hay dos pasos de recesión, no cuatro, así que un
     panel hundido y un borde comparten swatch. */
  --papel:        #f4f3f0;
  --papel-alto:   #ffffff;
  --tela:         #eae8e3;
  --tela-hueco:   #dedcd6;
  --linea:        #dedcd6;
  --linea-suave:  #eae8e3;
  --tinta:        #14171b;
  --tinta-media:  #3a404a;
  --tinta-tenue:  #61697a;

  /* **El verde ya no es la marca.** Verde, ámbar y carmín quedan reservados para
     los tres estados del veredicto y para nada más. Cuando el botón de descargar
     usaba el mismo verde que "se borda tal cual", el color dejaba de significar
     algo justo en la pantalla donde tiene que significar todo. Valores exactos
     de la identidad. */
  --bien:       #1e8f62;
  --bien-alto:  #24a473;
  --bien-suave: #e3f2ec;

  /* Acero: rieles, etiquetas, enlaces y acciones. Es el color de la herramienta,
     no del resultado, y por eso no compite con el veredicto. */
  --acento:       #4e6479;
  --acento-alto:  #61798f;
  --acento-suave: #e7ebee;

  /* Carmín: lo que cambia respecto del arte. Nunca decora, siempre señala. */
  --carmin:       #c0392e;
  --carmin-suave: #fbeae7;
  --ambar:        #b0741a;
  --ambar-suave:  #faf1de;

  --sombra-1: 0 1px 2px rgba(20,23,27,.06);
  --sombra-2: 0 1px 3px rgba(20,23,27,.07), 0 8px 24px -6px rgba(20,23,27,.10);
  --sombra-3: 0 2px 6px rgba(20,23,27,.08), 0 18px 40px -12px rgba(20,23,27,.18);
  --anillo:   0 0 0 3px rgba(78,100,121,.26);

  --radio:    16px;
  --radio-s:  10px;
  --paso:     8px;

  --texto: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --ui: "Archivo", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:        #0d0f12;
    --papel-alto:   #15181d;
    --tela:         #1d2128;
    --tela-hueco:   #262b33;
    --linea:        #262b33;
    --linea-suave:  #1d2128;
    --tinta:        #ecedef;
    --tinta-media:  #bcc0c8;
    --tinta-tenue:  #8b93a0;

    --bien:       #3dbe8b;
    --bien-alto:  #55d0a0;
    --bien-suave: #16302a;

    --acento:       #8fa9c0;
    --acento-alto:  #a7c0d4;
    --acento-suave: #1c2530;

    --carmin:       #e2564d;
    --carmin-suave: #331a17;
    --ambar:        #e8a33d;
    --ambar-suave:  #332512;

    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px -6px rgba(0,0,0,.5);
    --sombra-3: 0 2px 6px rgba(0,0,0,.45), 0 18px 40px -12px rgba(0,0,0,.6);
    --anillo:   0 0 0 3px rgba(143,169,192,.32);
  }
}

* { box-sizing: border-box; }
/* `button, .boton { display: flex }` más abajo le gana al `display: none` que el
   navegador le pone a `[hidden]` por defecto — sin esto #cuenta se ve como una
   píldora vacía en cada carga hasta que el JS de sesión decide mostrarla o no. */
[hidden] { display: none !important; }
:focus-visible { outline: 0; box-shadow: var(--anillo); border-radius: 6px; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.6 var(--texto);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* Sin esto, un enlace suelto en un párrafo (los cruces entre Términos y
   Privacidad, por ejemplo) cae al azul de link por defecto del navegador en
   vez del acero de la marca. Los selectores más específicos (.enlace, #pie a,
   .legal .volver) lo pisan donde hace falta otro tratamiento. */
a { color: var(--acento); }
a:hover { color: var(--acento-alto); }
/* La trama de tela va SOLO en el lienzo, que es donde significa algo: ahí dice
   "esto es hilo sobre tela". Detrás del texto se lee como papel cuadriculado y
   le pelea la atención a lo único que hay que leer. */

/* ------------------------------------------------------------------ cabecera */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--linea-suave);
  background: color-mix(in srgb, var(--papel) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  position: sticky; top: 0; z-index: 20;
}
/* El logotipo: la marca y la palabra.
   La marca es una **columna de satin** —el rectángulo redondeado— cruzada por
   tres puntadas que se pasan del contorno. Ese sobrepaso es lo que el producto
   mide y sobre lo que dicta su veredicto: la huella del hilo (D-029). No es un
   adorno; es la única idea que hay que entender para entender el producto. */
.marca {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--tinta); text-decoration: none;
  font-family: var(--ui); font-weight: 600; font-size: 19px;
  letter-spacing: -.03em;
}
.marca svg { width: 26px; height: 26px; flex: none; }
.marca:hover { color: var(--tinta); }
.cabecera-der { display: flex; align-items: center; gap: 6px; }

.idioma {
  display: flex; gap: 2px; background: var(--tela-hueco);
  border-radius: 999px; padding: 3px;
}
.idioma button {
  /* `min-height: 0` y `flex: none` NO son cosméticos: la regla base de `button`
     trae 52 px de alto y `flex: 1 1 auto` para los botones de acción, y sin
     desactivarlos acá el conmutador salía como dos círculos gigantes. Es el
     mismo error que la ✕ del editor — una regla genérica pisando un control
     chico— y las dos veces solo se vio mirando la pantalla. */
  min-height: 0; flex: none; box-shadow: none;
  border: 0; background: transparent; color: var(--tinta-tenue);
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: color .18s, background .18s;
}
.idioma button:hover { filter: none; box-shadow: none; }
.idioma button.activo {
  background: var(--papel-alto); color: var(--tinta); box-shadow: var(--sombra-1);
}

/* -------------------------------------------------------------------- lienzo */
main { max-width: 760px; margin: 0 auto; padding: 26px 20px 80px; }
.pantalla { display: none; }
.pantalla.activa { display: block; animation: entra .34s cubic-bezier(.2,.7,.3,1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .pantalla.activa { animation: none; }
  * { transition-duration: .01ms !important; }
}

h1 {
  font-family: var(--display);
  font-size: clamp(31px, 8.2vw, 42px); line-height: 1.1;
  letter-spacing: -.02em; font-weight: 600; margin: 22px 0 12px;
  text-wrap: balance;
}
h2 {
  font-family: var(--display);
  font-size: 23px; line-height: 1.25; letter-spacing: -.012em;
  font-weight: 600; margin: 0 0 10px; text-wrap: balance;
}
.bajada { color: var(--tinta-media); margin: 0 0 30px; font-size: 17px; max-width: 46ch; }

/* ------------------------------------------------------------ zona de subida */
#zona {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 240px; padding: 32px 26px;
  border: 1.5px dashed var(--linea); border-radius: 22px;
  background:
    radial-gradient(130% 100% at 50% 0%, var(--papel-alto), transparent 78%),
    var(--tela-hueco);
  cursor: pointer; text-align: center;
  box-shadow: var(--sombra-1);
  transition: border-color .2s, box-shadow .2s, transform .2s, background .2s;
}
#zona:hover, #zona:focus-visible { border-color: var(--acento); box-shadow: var(--sombra-2); }
#zona.encima {
  border-color: var(--acento); border-style: solid;
  background: radial-gradient(120% 90% at 50% 0%, var(--acento-suave), transparent 75%), var(--tela);
  transform: scale(1.012); box-shadow: var(--sombra-3);
}
#zona svg {
  width: 52px; height: 52px; fill: none; stroke: var(--acento);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: .85; transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
#zona:hover svg, #zona.encima svg { transform: translateY(-3px); }
#zona strong { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
#zona span { color: var(--tinta-tenue); font-size: 14px; }

#ajustes { margin-top: 22px; border-top: 1px solid var(--linea-suave); padding-top: 12px; }
#ajustes summary {
  cursor: pointer; color: var(--tinta-tenue); font-size: 14px; font-weight: 500;
  list-style: none; padding: 4px 0;
}
#ajustes summary::-webkit-details-marker { display: none; }
#ajustes summary::before { content: "＋ "; font-weight: 400; }
#ajustes[open] summary::before { content: "－ "; }
.campo { margin: 18px 0; }
.campo label { display: flex; justify-content: space-between; font-size: 14px;
  font-weight: 500; margin-bottom: 8px; }
.campo output, .control output {
  font-variant-numeric: tabular-nums; color: var(--tinta-tenue);
  font-weight: 600;
}

/* Los deslizadores son instrumentos de medida: pista fina, pulgar sólido. */
input[type=range] {
  width: 100%; -webkit-appearance: none; appearance: none;
  background: transparent; height: 26px; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: var(--tela-hueco);
}
input[type=range]::-moz-range-track {
  height: 5px; border-radius: 999px; background: var(--tela-hueco);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8.5px;
  border-radius: 999px; background: var(--papel-alto);
  border: 2px solid var(--acento); box-shadow: var(--sombra-1);
  transition: transform .12s;
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 999px; background: var(--papel-alto);
  border: 2px solid var(--acento); box-shadow: var(--sombra-1);
}
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }

/* ------------------------------------------------------------------ progreso */
.miniatura { display: flex; justify-content: center; margin: 18px 0 30px; }
.miniatura img {
  max-width: 210px; max-height: 210px; border-radius: 18px;
  box-shadow: var(--sombra-3); opacity: .62;
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir { 50% { opacity: .95; transform: scale(1.012) } }
#progreso h2 { text-align: center; font-family: var(--ui); font-size: 19px;
  font-weight: 600; letter-spacing: -.01em; }
.barra {
  height: 6px; background: var(--tela-hueco); border-radius: 999px;
  overflow: hidden; margin: 20px 0 10px;
}
#barra_llena {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--acento), var(--acento-alto));
  transition: width .45s cubic-bezier(.2,.7,.3,1);
  position: relative;
}
#barra_llena::after {
  /* Un brillo que recorre: dice "sigue trabajando" incluso cuando la etapa no
     cambia, que es justo el tranco largo donde la pantalla parecía congelada. */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: recorre 1.6s linear infinite;
}
@keyframes recorre { from { transform: translateX(-100%) } to { transform: translateX(100%) } }
.pulso { text-align: center; color: var(--tinta-tenue); font-size: 13px;
  font-variant-numeric: tabular-nums; min-height: 20px; }

/* ----------------------------------------------------------------- veredicto */
#titular { margin-bottom: 22px; }
#titular h2 { display: flex; align-items: flex-start; gap: 11px; }
#titular .marca-estado {
  flex: none; width: 26px; height: 26px; border-radius: 999px; margin-top: 2px;
  display: grid; place-items: center; color: #fff; font-size: 14px;
  font-weight: 700; font-family: var(--ui);
  box-shadow: 0 0 0 4px var(--acento-suave);
}
.bien .marca-estado { background: var(--bien); box-shadow: 0 0 0 4px var(--bien-suave); }
.ojo .marca-estado  { background: var(--carmin); box-shadow: 0 0 0 4px var(--carmin-suave); }
.aviso-estado .marca-estado { background: var(--ambar); box-shadow: 0 0 0 4px var(--ambar-suave); }
#titular p { margin: 8px 0 0; color: var(--tinta-media); }

/* El preview es el objeto principal de la pantalla: se enmarca como una pieza
   montada en el bastidor, no como una imagen ilustrativa. */
.lienzo { margin: 0 0 22px; }
.lienzo canvas {
  width: 100%; height: auto; display: block;
  border-radius: var(--radio); background: #e9e4da;
  box-shadow: var(--sombra-2), inset 0 0 0 1px var(--linea-suave);
}
figcaption {
  margin-top: 10px; font-size: 13px; color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

#lupas { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 22px; }
@media (min-width: 600px) { #lupas.dos { grid-template-columns: 1fr 1fr; } }
.lupa {
  background: var(--papel-alto); border-radius: var(--radio); padding: 14px;
  box-shadow: var(--sombra-2), inset 0 0 0 1px var(--linea-suave);
}
.lupa canvas { width: 100%; height: auto; display: block; border-radius: var(--radio-s); }
.lupa p { margin: 11px 0 0; font-size: 13px; color: var(--tinta-tenue); line-height: 1.5; }
.lupa b { color: var(--carmin); font-weight: 700; }
#lupas .mas { grid-column: 1/-1; margin: 0; font-size: 13px;
  color: var(--tinta-tenue); order: 9; }

/* -------------------------------------------------- problemas y salidas ------
   El color del recuadro dice de qué habla: carmín lo que cambia respecto del
   arte, verde lo que el cliente puede hacer (D-046). */
#explicacion { margin-bottom: 24px; }
#explicacion p { margin: 0 0 10px; }
.problema, .salidas {
  border-radius: var(--radio); padding: 16px 18px; margin-bottom: 14px;
  box-shadow: var(--sombra-1);
}
.problema { background: var(--carmin-suave); border-left: 3px solid var(--carmin); }
.salidas  { background: var(--acento-suave); border-left: 3px solid var(--acento); }
.problema p:last-child, .salidas div:last-child p { margin-bottom: 0; }
.problema ul { margin: 10px 0 0; padding-left: 20px; }
.problema li { margin-bottom: 6px; }
.problema .pie { font-size: 13px; color: var(--tinta-tenue); }
.salidas h3 {
  font-size: 12px; margin: 0 0 12px; color: var(--acento);
  text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
}
.salidas .salida + .salida { margin-top: 14px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--acento) 18%, transparent); }
.salidas strong { display: block; margin-bottom: 3px; font-weight: 600; }
.error {
  background: var(--carmin-suave); border-left: 3px solid var(--carmin);
  padding: 16px 18px; border-radius: var(--radio);
}

/* La fusión de tintas se muestra, no se nombra: nombrar un RGB en dos idiomas
   es inventar, y dos muestras al lado del hilo único se entienden sin palabras. */
.fusion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.chip {
  width: 26px; height: 26px; border-radius: 8px; display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), var(--sombra-1);
}
.flecha { color: var(--tinta-tenue); margin: 0 2px; font-size: 18px; }
.fusion span[translate] { font-weight: 600; }

/* ------------------------------------------------------------------- botones */
button, .boton {
  font: inherit; font-weight: 600; letter-spacing: -.005em;
  border: 0; border-radius: 12px; padding: 15px 22px;
  cursor: pointer; text-align: center; text-decoration: none;
  background: linear-gradient(180deg, var(--acento-alto), var(--acento));
  color: #fff; flex: 1 1 auto; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: var(--sombra-2), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .12s, box-shadow .18s, filter .18s;
}
button:hover, .boton:hover { filter: brightness(1.06); box-shadow: var(--sombra-3); }
button:active, .boton:active { transform: translateY(1px); box-shadow: var(--sombra-1); }
button:disabled { opacity: .55; cursor: default; transform: none; }
.boton small, button small { font-weight: 500; opacity: .82; }

.secundario {
  background: var(--papel-alto); color: var(--tinta-media);
  box-shadow: inset 0 0 0 1px var(--linea), var(--sombra-1);
  width: 100%;
}
.secundario:hover { filter: none; color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta-tenue), var(--sombra-1); }

#acciones { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
@media (min-width: 520px) { #acciones { flex-direction: row; flex-wrap: wrap; } }
#acciones-editor { margin-bottom: 18px; display: grid; gap: 10px; }
#acciones-editor button { width: 100%; }

.enlace {
  background: none; border: 0; color: var(--acento); font-weight: 600;
  font-size: 14px; padding: 6px 0; min-height: 0; text-decoration: underline;
  text-underline-offset: 4px; display: inline-block; width: auto;
  box-shadow: none; flex: 0 0 auto;
}
.enlace:hover { filter: none; box-shadow: none; color: var(--acento-alto); }

/* -------------------------------------------------------------------- hilos */
#hilos { border-top: 1px solid var(--linea-suave); padding-top: 22px; margin-bottom: 30px; }
#hilos h3 { font-family: var(--display); font-size: 17px; font-weight: 600;
  margin: 0 0 5px; letter-spacing: -.01em; }
#hilos .nota { font-size: 13px; color: var(--tinta-tenue); margin: 0 0 16px; }
#hilos ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
#hilos li {
  display: flex; align-items: center; gap: 12px; font-size: 14px;
  padding: 10px 12px; border-radius: var(--radio-s);
  transition: background .15s;
}
#hilos li:hover { background: var(--tela); }
/* La muestra de hilo con un brillo diagonal: un carrete tiene brillo, un
   cuadrado plano no. Es el detalle que hace que la lista se lea como hilos. */
#hilos .muestra {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), var(--sombra-1);
  position: relative; overflow: hidden;
}
#hilos .muestra::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.42) 0 22%, transparent 42%);
}
#hilos .cat {
  color: var(--tinta-tenue); margin-left: auto; font-size: 12px;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
#hilos em { font-style: normal; color: var(--tinta-tenue); font-size: 13px; }

/* ------------------------------------------------------------------- editor */
#ed_titular {
  position: sticky; top: 57px; z-index: 10; margin: -26px -20px 18px;
  padding: 14px 20px;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linea-suave);
}
#ed_titular .linea { display: flex; align-items: center; gap: 11px;
  font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
#ed_titular .punto {
  width: 13px; height: 13px; border-radius: 999px; flex: none;
  transition: background .3s, box-shadow .3s;
}
#ed_titular.bien .punto { background: var(--bien); box-shadow: 0 0 0 4px var(--bien-suave); }
#ed_titular.ojo  .punto { background: var(--carmin); box-shadow: 0 0 0 4px var(--carmin-suave); }
#ed_titular.dist .punto { background: var(--ambar);  box-shadow: 0 0 0 4px var(--ambar-suave); }
#ed_titular p { margin: 5px 0 0 24px; font-size: 13.5px; color: var(--tinta-tenue); }
#ed_titular .midiendo { opacity: .5; }

#ed_lienzo { cursor: crosshair; }
#ed_seleccion:not(:empty) {
  background: var(--papel-alto); border-radius: var(--radio); padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--sombra-2), inset 0 0 0 1px var(--linea-suave);
}
#ed_seleccion h4 { margin: 0 0 12px; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 9px; }
#ed_seleccion .fila { display: flex; gap: 9px; flex-wrap: wrap; }
#ed_seleccion button { flex: 0 1 auto; padding: 10px 16px; min-height: 42px; font-size: 14px; }

.control { margin: 0 0 22px; }
.control label { display: flex; justify-content: space-between; font-size: 14px;
  font-weight: 500; margin-bottom: 8px; }
.marca-umbral {
  margin: 8px 0 0; font-size: 13.5px; color: var(--bien); min-height: 20px;
  font-weight: 500;
}
.marca-umbral.lejos { color: var(--carmin); }
.control .pie { margin: 8px 0 0; font-size: 12.5px; color: var(--tinta-tenue); }

#ed_colores_lista { display: grid; gap: 8px; margin-bottom: 24px; }
.color-fila {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--papel-alto); border-radius: var(--radio-s); font-size: 14.5px;
  box-shadow: inset 0 0 0 1px var(--linea-suave), var(--sombra-1);
  cursor: pointer; transition: box-shadow .16s, transform .16s;
}
.color-fila:hover { transform: translateX(2px); }
.color-fila.activo { box-shadow: inset 0 0 0 2px var(--acento), var(--sombra-2); }
.color-fila .muestra {
  width: 26px; height: 26px; border-radius: 7px; flex: none; position: relative;
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.color-fila .muestra::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.42) 0 22%, transparent 42%);
}
/* `flex: 0 0 auto` no es cosmético: la regla base de `button` trae
   `flex: 1 1 auto`, así que esta ✕ crecía hasta ocupar media fila invisible y
   tocar el NOMBRE del color borraba el color. En un teléfono eso es destructivo
   y no hay forma de que el usuario entienda qué pasó. */
.color-fila .quitar {
  flex: 0 0 auto; margin-left: auto; background: none; border: 0;
  color: var(--tinta-tenue); font-size: 19px; line-height: 1;
  padding: 6px 10px; min-height: 0; width: auto; cursor: pointer;
  box-shadow: none; border-radius: 8px;
}
.color-fila .quitar:hover { background: var(--carmin-suave); color: var(--carmin); filter: none; }
.color-fila.fundido { opacity: .5; }
.color-fila .cat { color: var(--tinta-tenue); font-size: 13px; }

#ed_botones { display: flex; flex-direction: column; gap: 11px; margin-bottom: 30px; }
@media (min-width: 520px) { #ed_botones { flex-direction: row; } }

/* La cabecera del veredicto es fija: sin este margen, el navegador desplaza una
   fila justo debajo de ella y el toque cae en la cabecera. En un teléfono eso se
   siente como que el botón no funciona. */
.color-fila, #ed_seleccion, .control { scroll-margin-top: 150px; }

/* ------------------------------------------------------------------ cuentas */
/* El "Entrar" tenía contraste de texto secundario y desaparecía sobre el fondo,
   sobre todo en oscuro. El visitante casual no lo necesita —la app funciona sin
   cuenta— pero el dueño del taller, que es exactamente quien va a tener cuenta,
   no lo encontraba. Pasa a ser un control con borde y color de acento: sigue
   siendo discreto, pero se ve. */
.cabecera-der #cuenta {
  background: var(--acento-suave); border: 0; color: var(--acento);
  font-size: 13px; font-weight: 700; padding: 8px 14px; min-height: 0;
  width: auto; flex: none; border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 28%, transparent);
}
.cabecera-der #cuenta:hover {
  background: var(--acento); color: #fff; filter: none;
  box-shadow: var(--sombra-1);
}

#dlg_cuenta {
  border: 0; border-radius: 20px; padding: 26px; max-width: 400px;
  width: calc(100% - 36px); background: var(--papel-alto); color: var(--tinta);
  box-shadow: var(--sombra-3);
}
#dlg_cuenta::backdrop { background: rgba(20,16,12,.42); backdrop-filter: blur(3px); }
#dlg_cuenta .cerrar {
  position: absolute; top: 10px; right: 12px; background: none; border: 0;
  color: var(--tinta-tenue); font-size: 22px; min-height: 0; width: auto;
  padding: 4px 8px; flex: none; box-shadow: none;
}
#dlg_cuenta .cerrar:hover { filter: none; color: var(--tinta); }
#dlg_cuenta h3 { margin: 0 0 8px; font-size: 20px; font-family: var(--display);
  font-weight: 600; letter-spacing: -.015em; }
#dlg_cuenta p { margin: 0 0 18px; color: var(--tinta-tenue); font-size: 14.5px; }
#dlg_cuenta input[type=email] {
  width: 100%; padding: 14px 16px; border: 0; border-radius: 12px;
  font: inherit; background: var(--tela); color: var(--tinta);
  margin-bottom: 12px; box-shadow: inset 0 0 0 1px var(--linea);
}
#dlg_cuenta ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
#dlg_cuenta li { display: flex; gap: 10px; align-items: center; font-size: 14px;
  padding: 12px 14px; background: var(--tela); border-radius: var(--radio-s); }
#dlg_cuenta li .cuando { margin-left: auto; color: var(--tinta-tenue); font-size: 12px;
  font-variant-numeric: tabular-nums; }

/* El pulgar arriba/abajo: es el instrumento para medir la prueba en el taller
   sin pedirles que lleven cuentas a mano (D-057). */
#opinion {
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-size: 14px; color: var(--tinta-tenue); flex-wrap: wrap;
  padding: 14px 16px; background: var(--tela); border-radius: var(--radio);
}
#opinion button {
  flex: 0 0 auto; width: auto; min-height: 42px; padding: 9px 18px;
  background: var(--papel-alto); color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linea), var(--sombra-1);
}
#opinion button.elegido {
  background: linear-gradient(180deg, var(--acento-alto), var(--acento));
  color: #fff; box-shadow: var(--sombra-2);
}
#opinion input {
  flex: 1 1 180px; padding: 11px 14px; border: 0; border-radius: 10px;
  font: inherit; background: var(--papel-alto); color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linea);
}

/* La línea de confianza debajo de la zona de subida. Chica y sin adorno: dice lo
   único que hace falta saber antes de subir algo, que es que no hay peaje. */
.confianza {
  margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--tinta-tenue);
}
.confianza::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 999px;
  background: var(--acento); margin-right: 8px; vertical-align: 2px;
}

#dlg_cuenta .pie { font-size: 12.5px; color: var(--tinta-tenue); margin: 10px 0 0; }
#dlg_cuenta strong { color: var(--tinta); }

/* El bastidor: un desplegable y no un deslizador, porque son opciones discretas
   —una máquina tiene el que tiene— y el nombre es del gremio (D-063). */
select {
  width: 100%; padding: 13px 14px; border: 0; border-radius: 12px;
  font: inherit; font-weight: 500; background: var(--tela); color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linea); cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tinta-tenue) 50%),
    linear-gradient(135deg, var(--tinta-tenue) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:focus-visible { box-shadow: inset 0 0 0 1px var(--acento), var(--anillo); }
.campo select { margin-top: 2px; }

/* --------------------------------------------------- los tres roles, aplicados
   Lo que se LEE va en serifa; lo que se TOCA, en la grotesca; lo que se MIDE, en
   la monoespaciada con cifras tabulares — un número que cambia mientras se
   arrastra un control no puede saltar de ancho. */
button, .boton, .secundario, .enlace, select, input, output,
label, summary, .idioma button, #hilos .cat, #zona strong, #zona span,
.salidas h3, #ed_titular .linea, #titular .marca-estado, figcaption,
.confianza, .marca-umbral, .control .pie, #ajustes summary, #opinion,
#dlg_cuenta li, #pie, #pie a {
  font-family: var(--ui);
}
figcaption, output, .pulso, #hilos .cat, #dlg_cuenta li .cuando,
.lupa p, .marca-umbral, #ed_pie {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}
figcaption, .lupa p, .marca-umbral, #ed_pie { font-size: 12.5px; }
#progreso h2 { font-family: var(--ui); }

/* ---------------------------------------------------------------------- pie
   Seis cosas y ninguna de relleno: quién lo hace, cómo se lo contacta, dónde se
   hace, qué pasa con el arte del cliente, para qué máquinas sirve el archivo, y
   las dos páginas legales. Un taller no le confía el arte de sus clientes a algo
   anónimo, y sin esto el producto es anónimo. */
#pie {
  border-top: 1px solid var(--linea-suave);
  padding: 30px 20px 44px;
  max-width: 760px; margin: 0 auto;
  color: var(--tinta-tenue); font-size: 13.5px; line-height: 1.6;
}
.pie-marca { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 18px; }
.pie-marca svg { width: 24px; height: 24px; flex: none; color: var(--tinta-media); }
.pie-marca strong {
  display: block; color: var(--tinta); font-family: var(--ui);
  font-weight: 600; letter-spacing: -.03em; font-size: 15px;
}
#pie p { margin: 0 0 10px; max-width: 62ch; }
.pie-arte { color: var(--tinta-media); }
.pie-abajo {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linea-suave);
}
#pie a { color: var(--acento); text-decoration: none; font-weight: 600; }
#pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
#pie_wa::before { content: "· "; color: var(--tinta-tenue); font-weight: 400; }
#pie_wa:first-child::before { content: none; }

/* --------------------------------------------------------- páginas legales */
.legal { max-width: 640px; margin: 0 auto; padding: 30px 20px 70px; }
.legal h1 { font-size: clamp(27px, 7vw, 34px); margin-bottom: 6px; }
.legal .fecha { color: var(--tinta-tenue); font-family: var(--ui); font-size: 13px;
  margin: 0 0 28px; }
.legal h2 { font-size: 19px; margin: 30px 0 8px; }
.legal p, .legal li { color: var(--tinta-media); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal .volver { display: inline-block; margin-top: 34px; font-family: var(--ui);
  font-weight: 600; color: var(--acento); text-decoration: none; }
.legal hr { border: 0; border-top: 1px solid var(--linea-suave); margin: 40px 0 30px; }