:root {
  --tinta: #2b1d30;
  --tinta-2: #57485b;
  --gris: #766c7a;
  --linea: #e4dce5;
  --banda: #f7f3f7;
  --blanco: #ffffff;
  --marca: #d4006f;
  --marca-profunda: #9c0051;
  --acento: #6c2a7c;
  --seleccion: #fbe4f0;
  --cian: #0098d4;
  --amarillo: #f1b400;
  --naranja: #ef8a00;
  --verde: #2e8b45;
  --aviso: #c26a00;

  --c-aceptable: #2e8b45;
  --c-insuficiente: #c26a00;
  --c-puente: #d4006f;
  --c-sin_soldar: #0076a8;
  --c-exceso: #9a7200;
  --c-fria: #6c2a7c;

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px;
  --ancho: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fuente); color: var(--tinta); background: var(--blanco);
  font-size: 17px; line-height: 1.6;
}
h1, h2, h3 { margin: 0 0 var(--e3); line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; }
h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; color: var(--acento); }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 var(--e4); max-width: 65ch; }
a { color: var(--marca-profunda); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
code, .mono { font-family: var(--mono); font-size: 0.9em; }
.num { font-variant-numeric: tabular-nums; }

/* Encabezado con el motivo del cartel */
.encabezado { position: sticky; top: 0; z-index: 10; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.encabezado .fila { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e5); height: 64px; display: flex; align-items: center; gap: var(--e5); }
.logotipo { display: flex; flex-direction: column; line-height: 1.05; text-decoration: none; color: var(--tinta); }
.logotipo b { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.logotipo b span { color: var(--marca); }
.logotipo small { font-size: 12.5px; color: var(--acento); font-weight: 600; }
.motivo { display: flex; height: 4px; width: 72px; }
.motivo i { flex: 1; }
.motivo i:nth-child(1) { background: var(--marca); }
.motivo i:nth-child(2) { background: var(--cian); }
.motivo i:nth-child(3) { background: var(--amarillo); }
.motivo i:nth-child(4) { background: var(--acento); }
.encabezado nav { margin-left: auto; display: flex; gap: var(--e5); font-size: 15px; }
.encabezado nav a { color: var(--tinta-2); text-decoration: none; font-weight: 600; }
.encabezado nav a:hover { color: var(--marca-profunda); }
.encabezado nav a[aria-current="page"] { color: var(--marca); }

.aviso-sintetico { background: var(--blanco); border-left: 4px solid var(--aviso); border-bottom: 1px solid var(--linea); }
.aviso-sintetico p { max-width: var(--ancho); margin: 0 auto; padding: var(--e3) var(--e5); font-size: 15px; }

main { max-width: var(--ancho); margin: 0 auto; padding: var(--e6) var(--e5) var(--e8); }
.seccion { padding: var(--e6) 0; border-top: 1px solid var(--linea); }
.seccion:first-child { border-top: 0; padding-top: 0; }
.entrada { color: var(--tinta-2); font-size: 18px; }
.nota { color: var(--gris); font-size: 14.5px; }

/* Cifras de estado */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin: var(--e5) 0; }
.cifras div { padding: var(--e4) var(--e4) var(--e4) 0; }
.cifras div + div { border-left: 1px solid var(--linea); padding-left: var(--e4); }
.cifras b { display: block; font-size: 38px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifras span { color: var(--gris); font-size: 14.5px; }

/* Tablas */
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th { text-align: left; font-weight: 700; border-bottom: 1.5px solid var(--tinta); padding: var(--e2); }
td { border-bottom: 1px solid var(--linea); padding: var(--e2); vertical-align: middle; }
tr.elegida td { background: var(--seleccion); box-shadow: inset 3px 0 0 var(--marca); }

/* Botones y formularios */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--e4);
  border: 1.5px solid var(--marca); background: var(--marca); color: var(--blanco); font: inherit; font-weight: 700;
  font-size: 15.5px; border-radius: 2px; cursor: pointer; text-decoration: none; }
.boton:hover { background: var(--marca-profunda); border-color: var(--marca-profunda); }
.boton.secundario { background: transparent; color: var(--marca-profunda); }
.boton.secundario:hover { background: var(--seleccion); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
input[type=text], select { font: inherit; font-size: 16px; min-height: 44px; padding: 0 var(--e3); border: 1px solid var(--linea); border-radius: 2px; background: var(--blanco); color: var(--tinta); }
label { font-weight: 600; font-size: 15px; display: block; margin-bottom: var(--e1); }
.campo { margin-bottom: var(--e4); }

/* Área de trabajo: imagen y panel */
.trabajo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e5); align-items: start; }
.lienzo { border: 1px solid var(--linea); background: var(--banda); position: relative; }
.lienzo canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.panel { border-left: 1px solid var(--linea); padding-left: var(--e5); position: sticky; top: 88px; }
.panel h3 { margin-top: var(--e2); }
.estado { font-size: 14.5px; color: var(--tinta-2); min-height: 1.6em; }
.estado.error { color: var(--marca-profunda); font-weight: 600; }

/* Selector de clases */
.clases { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--linea); margin-bottom: var(--e4); }
.clases button { display: flex; align-items: center; gap: var(--e3); min-height: 44px; padding: 0 var(--e3); border: 0;
  border-bottom: 1px solid var(--linea); background: var(--blanco); font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; color: var(--tinta); }
.clases button:last-child { border-bottom: 0; }
.clases button:hover { background: var(--banda); }
.clases button.activa { background: var(--seleccion); font-weight: 700; }
.clases kbd { font-family: var(--mono); font-size: 13px; border: 1px solid var(--linea); padding: 0 6px; color: var(--gris); }
.muestra { width: 18px; height: 18px; flex: none; border: 3px solid currentColor; }
.muestra.aceptable { color: var(--c-aceptable); border-width: 2px; border-style: dotted; }
.muestra.insuficiente { color: var(--c-insuficiente); }
.muestra.puente { color: var(--c-puente); }
.muestra.sin_soldar { color: var(--c-sin_soldar); border-style: dashed; }
.muestra.exceso { color: var(--c-exceso); border-style: double; border-width: 4px; }
.muestra.fria { color: var(--c-fria); border-style: dotted; }

.progreso { display: flex; gap: 2px; margin: var(--e2) 0 var(--e4); }
.progreso i { height: 6px; flex: 1; background: var(--linea); }
.progreso i.hecho { background: var(--acento); }

.lista-sospechas { border-top: 1px solid var(--linea); margin-bottom: var(--e4); max-height: 46vh; overflow: auto; }
.lista-sospechas button { width: 100%; display: flex; justify-content: space-between; gap: var(--e2); padding: var(--e2) 0; border: 0;
  border-bottom: 1px solid var(--linea); background: none; font: inherit; font-size: 15px; cursor: pointer; text-align: left; color: var(--tinta); }
.lista-sospechas button.elegida { background: var(--seleccion); box-shadow: inset 3px 0 0 var(--marca); padding-left: var(--e2); }
.lista-sospechas button.resuelta { color: var(--gris); text-decoration: line-through; }

@media (max-width: 860px) {
  body { font-size: 16px; }
  .encabezado .fila { height: 56px; padding: 0 var(--e4); gap: var(--e3); }
  .motivo { width: 40px; }
  main { padding: var(--e5) var(--e4) var(--e7); }
  .trabajo { grid-template-columns: 1fr; }
  .panel { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea); padding-top: var(--e4); position: static; }
  .acciones .boton { width: 100%; }
  .tabla-movil-oculta { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.campo-corto { max-width: 360px; }
.acciones.al-pie { align-items: end; }

/* Página del proyecto */
:root { --c-base: #0086c0; --c-red: #d4006f; }
.portada { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: var(--e7); align-items: center; padding: var(--e6) 0 var(--e7); }
.portada h1 { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -0.03em; }
.sobretitulo { color: var(--acento); font-weight: 700; font-size: 15px; margin-bottom: var(--e3); }
.portada-figura svg { width: 100%; height: auto; display: block; border: 1px solid var(--linea); }
.tarjeta-svg { fill: #96643c; }
.pad-svg { fill: #c88c46; }
.metal-svg { fill: #d9d6d2; }
.hueco-svg { fill: #2b1d30; }
.marca-svg { fill: none; stroke-width: 3.5; }
.marca-svg.c-insuficiente { stroke: var(--c-insuficiente); }
.marca-svg.c-puente { stroke: var(--c-puente); }
.marca-svg.c-exceso { stroke: var(--c-exceso); stroke-dasharray: 2 0; }
.bloque { padding: var(--e8) 0; border-top: 1px solid var(--linea); }
.bloque.banda { background: var(--banda); box-shadow: 0 0 0 100vmax var(--banda); clip-path: inset(0 -100vmax); }
.bloque h2 { font-size: clamp(28px, 3.2vw, 42px); }
.bloque .entrada { max-width: 62ch; }
.pasos { list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 0; margin: var(--e5) 0 0; border-top: 1px solid var(--linea); }
.pasos li { counter-increment: paso; padding: var(--e4) var(--e4) var(--e4) 0; }
.pasos li + li { border-left: 1px solid var(--linea); padding-left: var(--e4); }
.pasos li::before { content: counter(paso); display: block; font-weight: 800; font-size: 34px; color: var(--marca); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pasos b { display: block; margin-bottom: var(--e1); }
.pasos span, .cifras span { font-size: 15.5px; color: var(--tinta-2); line-height: 1.5; }
.tabla-metas { max-width: 820px; margin-top: var(--e4); }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); margin-bottom: var(--e4); }
.linea-tiempo { list-style: none; padding: 0; margin: var(--e4) 0 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--linea); }
.linea-tiempo li { padding: var(--e4) var(--e3) 0 0; position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--blanco); border: 2px solid var(--acento); }
.linea-tiempo li.hecho::before { background: var(--acento); }
.linea-tiempo b { display: block; font-variant-numeric: tabular-nums; }
.linea-tiempo span { font-size: 15px; color: var(--tinta-2); }
.fuentes li { font-size: 14.5px; color: var(--tinta-2); margin-bottom: var(--e2); overflow-wrap: anywhere; }

/* Gráficas de puntos con intervalo */
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e5); font-size: 14.5px; color: var(--tinta-2); margin: var(--e4) 0; }
.leyenda span { display: inline-flex; align-items: center; gap: var(--e2); }
.punto-muestra { width: 12px; height: 12px; display: inline-block; }
.punto-muestra.linea_base, .punto.linea_base { background: var(--c-base); }
.punto-muestra.red, .punto.red { background: var(--c-red); border-radius: 50%; }
.ic-muestra { width: 26px; height: 2px; background: var(--tinta-2); display: inline-block; }
.dos-graficas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); }
.puntos { margin: 0 0 var(--e4); }
.puntos figcaption { margin-bottom: var(--e3); }
.fila-punto { display: grid; grid-template-columns: 128px minmax(0, 1fr) 44px; align-items: center; gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--linea); outline-offset: 2px; }
.fila-punto:hover, .fila-punto:focus { background: var(--blanco); }
.etiqueta-fila { font-size: 14px; line-height: 1.25; }
.etiqueta-fila small { color: var(--gris); font-size: 12.5px; }
.pista { position: relative; height: 22px; }
.pista i { position: absolute; top: 50%; }
.pista .ic { height: 2px; margin-top: -1px; background: var(--tinta-2); opacity: 0.55; }
.pista .punto { width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 2px var(--banda); }
.pista .meta { top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--gris); }
.valor { font-size: 14.5px; text-align: right; color: var(--tinta); }
.eje { display: grid; grid-template-columns: 128px minmax(0, 1fr) 44px; gap: var(--e3); height: 22px; font-size: 12.5px; color: var(--gris); }
.eje .marcas { position: relative; }
.eje .marcas b { position: absolute; font-weight: 400; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.leyenda-meta { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e2); }
.meta-muestra { width: 0; height: 14px; border-left: 1.5px dashed var(--gris); display: inline-block; }
.tabla-datos { margin-top: var(--e4); }
.tabla-datos summary { cursor: pointer; font-weight: 700; color: var(--marca-profunda); min-height: 44px; display: flex; align-items: center; }
.hash { overflow-wrap: anywhere; }
.tooltip { position: absolute; z-index: 20; max-width: 300px; background: var(--tinta); color: var(--blanco); font-size: 13.5px; padding: var(--e2) var(--e3); pointer-events: none; }

@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; gap: var(--e5); padding-top: var(--e4); }
  .bloque { padding: var(--e7) 0; }
  .pasos, .linea-tiempo { grid-template-columns: 1fr; border-top: 0; }
  .pasos li, .pasos li + li { border-left: 0; border-top: 1px solid var(--linea); padding: var(--e3) 0; }
  .linea-tiempo { border-left: 2px solid var(--linea); padding-left: var(--e4); }
  .linea-tiempo li { padding: 0 0 var(--e4); }
  .linea-tiempo li::before { top: 4px; left: calc(-1 * var(--e4) - 7px); }
  .dos-graficas, .dos-columnas { grid-template-columns: 1fr; gap: var(--e4); }
  .fila-punto, .eje { grid-template-columns: 104px minmax(0, 1fr) 40px; }
}
.cifras b { white-space: nowrap; }
@media (max-width: 860px) {
  .logotipo b { font-size: 17px; white-space: nowrap; }
  .logotipo small { display: none; }
  .encabezado nav { gap: var(--e3); font-size: 14.5px; }
  .cifras { grid-template-columns: 1fr; }
  .cifras div + div { border-left: 0; border-top: 1px solid var(--linea); padding-left: 0; }
}
@media (max-width: 420px) { .motivo { display: none; } }

/* Fotos reales, reto y experimentos */
.alterna { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--e4); }
.alterna button { min-height: 40px; padding: 0 var(--e3); border: 1px solid var(--linea); margin: 0 -1px -1px 0; background: var(--blanco); font: inherit; font-size: 14.5px; cursor: pointer; color: var(--tinta); }
.alterna button.activa { background: var(--marca); border-color: var(--marca); color: var(--blanco); font-weight: 700; }
.rejilla-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--e2); }
.foto { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; }
.foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.foto.elegida { border-color: var(--marca); }
.foto[hidden] { display: none; }
.foto-grande { width: 100%; max-width: 280px; height: auto; display: block; margin-bottom: var(--e3); border: 1px solid var(--linea); }
.veredicto { font-size: 15.5px; }
.marca-ok, .marca-error { display: inline-block; padding: 0 6px; font-size: 13px; font-weight: 700; border: 1.5px solid currentColor; margin-left: 4px; }
.marca-ok { color: var(--c-aceptable); }
.marca-error { color: var(--marca-profunda); }
.barras { margin: var(--e3) 0; }
.barra { display: grid; grid-template-columns: 1fr 90px 44px; gap: var(--e2); align-items: center; font-size: 14px; padding: 3px 0; }
.barra.predicha { font-weight: 700; }
.pista-barra { height: 10px; background: var(--linea); position: relative; }
.pista-barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--marca); }
.barra:not(.predicha) .pista-barra i { background: var(--gris); }
.atribucion { margin-top: var(--e6); border-top: 1px solid var(--linea); padding-top: var(--e3); }
.reto { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--e6); align-items: start; }
.reto-foto img { width: 100%; max-width: 320px; height: auto; display: block; border: 1px solid var(--linea); }
.reto[hidden], #final[hidden] { display: none; }
.clases button:disabled { cursor: default; color: var(--tinta); }
.matriz table { font-size: 13px; }
.matriz th { font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--tinta); padding: 6px; }
.matriz td.celda { text-align: center; padding: 8px 4px; border: 2px solid var(--blanco); }
.celda.s0 { background: #fbf2f7; color: var(--tinta-2); }
.celda.s1 { background: #f6cde2; color: var(--tinta); }
.celda.s2 { background: #ec8fbd; color: var(--tinta); }
.celda.s3 { background: #d4006f; color: var(--blanco); }
.celda.s4 { background: #8f004b; color: var(--blanco); }
.celda.diagonal { outline: 1.5px solid var(--tinta); outline-offset: -3px; }
.leyenda-rampa { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gris); margin: var(--e3) 0; }
.leyenda-rampa i { width: 28px; height: 12px; display: inline-block; }
.leyenda-rampa i.s0 { background: #fbf2f7; } .leyenda-rampa i.s1 { background: #f6cde2; } .leyenda-rampa i.s2 { background: #ec8fbd; }
.leyenda-rampa i.s3 { background: #d4006f; } .leyenda-rampa i.s4 { background: #8f004b; }
@media (max-width: 860px) {
  .reto { grid-template-columns: 1fr; }
  .matriz { overflow-x: auto; }
  .encabezado .fila { height: auto; flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
  .encabezado nav { order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; gap: 4px var(--e4); font-size: 14.5px; padding: 6px 0 10px; }
  .encabezado nav a[aria-current="page"] { color: var(--marca); }
}
.explorar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); margin-top: var(--e4); }
.explorar a { padding: var(--e4) var(--e4) var(--e4) 0; text-decoration: none; color: var(--tinta); }
.explorar a + a { border-left: 1px solid var(--linea); padding-left: var(--e4); }
.explorar b { display: block; color: var(--marca-profunda); font-size: 18px; margin-bottom: var(--e1); }
.explorar span { font-size: 15px; color: var(--tinta-2); }
.explorar a:hover b { text-decoration: underline; }
@media (max-width: 860px) {
  .explorar { grid-template-columns: 1fr; }
  .explorar a, .explorar a + a { border-left: 0; border-top: 1px solid var(--linea); padding: var(--e3) 0; }
}
.desliza { overflow-x: auto; }
@media (max-width: 860px) { .desliza td.num, .desliza th:nth-child(3) { white-space: nowrap; } }