/* ===== Base: tokens de diseño (azul Francia) ===== */
:root {
  color-scheme: light;
  --azul: #0055a4;          /* azul Francia */
  --azul-hover: #00468a;
  --azul-profundo: #002f5f;
  --azul-claro: #e8f0fa;
  --azul-borde: #c3d6ee;
  --bg: #f4f6fa;
  --panel: #ffffff;
  --text: #0f1b2d;
  --muted: #5b6b80;
  --border: #dde3ec;
  --accent: var(--azul);
  --ok: #0f7b4a;
  --ok-claro: #e6f5ed;
  --error: #c0262d;
  --error-claro: #fdeceb;
  --warn: #b3540a;
  --linea-activa: rgba(0, 229, 255, 0.12); /* mismo cian que el resaltado de rectas en el lienzo */
  --accent-suave: rgba(0, 85, 164, 0.07);
  --radio: 14px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(15, 27, 45, 0.05), 0 8px 24px rgba(15, 27, 45, 0.06);
  --sombra-azul: 0 6px 18px rgba(0, 85, 164, 0.28);
  --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fuente-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(0, 85, 164, 0.10), transparent 60%),
    var(--bg);
  color: var(--text);
  padding: 0 1rem 2rem;
  -webkit-font-smoothing: antialiased;
}

.icono { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* ===== Cabecera ===== */
.barra-app {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0 -1rem 1.25rem;
  padding: 0.7rem 1.5rem;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.marca { display: flex; align-items: center; gap: 0.7rem; color: var(--text); text-decoration: none; }
.marca-logo {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 11px;
  background: linear-gradient(140deg, #1a6fc4, var(--azul) 55%, var(--azul-profundo));
  color: #fff;
  box-shadow: var(--sombra-azul);
}
.marca-logo .icono { width: 1.35rem; height: 1.35rem; }
.marca-logo-foto { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid var(--azul); box-shadow: 0 4px 12px rgba(0, 85, 164, 0.25); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-texto strong { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; }
.marca-texto small { color: var(--muted); font-size: 0.75rem; font-weight: 500; }

/* Ajustes de vista arriba a la derecha: créditos, unidad de las medidas y barra. */
.ajustes-vista {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.chip-creditos {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--azul-borde);
  border-radius: 999px;
  background: var(--azul-claro);
  color: var(--azul);
  font: 700 0.85rem var(--fuente);
  cursor: pointer;
}
.chip-creditos[hidden] { display: none; }
.chip-creditos:hover:not(:disabled) { background: #dbe8f7; border-color: var(--azul); }
.chip-creditos.vacio { background: var(--error-claro); border-color: #f3c3c1; color: var(--error); }

/* Selectores de la cabecera (control segmentado). */
.selector-barra {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
}
.selector-barra legend {
  float: left;
  margin: 0 0.4rem 0 0.6rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.selector-barra label {
  position: relative;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.selector-barra label:hover { color: var(--text); }
.selector-barra label:has(input:checked) {
  z-index: 1;
  background: var(--azul);
  color: #fff;
}
.selector-barra label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.selector-barra input { position: absolute; opacity: 0; pointer-events: none; }

h1, h2, h3 { letter-spacing: -0.02em; }
h1 { font-size: 1.3rem; margin: 0 0 0.25rem; }
.subtitle { color: var(--muted); margin: 0; }

.paso {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
  max-width: 1400px;
  margin: 0 auto 1rem;
}

/* ===== Botones ===== */
button {
  font-family: var(--fuente);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--azul);
  border-radius: var(--radio-chico);
  background: var(--azul);
  color: white;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
/* Sólo los botones "comunes": las barras V2/V3 y los cartelitos del lienzo tienen el suyo. */
button:not([class]):hover:not(:disabled),
.btn:not(.btn-secundario):not(.btn-descarga):hover:not(:disabled) { background: var(--azul-hover); }
button:focus-visible { outline: 3px solid rgba(0, 85, 164, 0.35); outline-offset: 2px; }
button:disabled { background: #b8c6d8; border-color: #b8c6d8; cursor: not-allowed; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  font-size: 0.95rem;
  text-decoration: none;
}
.btn-primario { box-shadow: var(--sombra-azul); }
.btn-primario:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 85, 164, 0.32); }
.btn-primario:active:not(:disabled) { transform: translateY(0); }
.btn-primario:disabled { box-shadow: none; }
.btn-secundario, button.secundario, #btn-regla-reiniciar {
  background: var(--panel);
  color: var(--azul);
  border-color: var(--azul-borde);
  box-shadow: none;
}
.btn-secundario:hover:not(:disabled), button.secundario:hover:not(:disabled) {
  background: var(--azul-claro);
  border-color: var(--azul);
}
.btn-bloque { width: 100%; }
/* Botón trabajando: el ícono gira y no se puede volver a apretar. */
.btn.cargando { pointer-events: none; opacity: 0.85; }
.btn.cargando .icono { animation: girar 0.9s linear infinite; }

input[type="number"] {
  display: block;
  margin: 0.6rem 0;
}

/* ===== Mensajes de estado ===== */
.estado {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radio-chico);
  background: var(--azul-claro);
  color: var(--azul-profundo);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}
.estado[hidden] { display: none; }
/* Sin clase = algo en curso: un círculo que gira. */
.estado::before {
  content: "";
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
.estado.ok { background: var(--ok-claro); color: var(--ok); }
.estado.error { background: var(--error-claro); color: var(--error); }
.estado.ok::before, .estado.error::before {
  animation: none;
  border: none;
  border-radius: 0;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--mascara) center / contain no-repeat;
  mask: var(--mascara) center / contain no-repeat;
}
.estado.ok { --mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.estado.error { --mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); }

@keyframes girar { to { transform: rotate(360deg); } }

.ayuda { color: var(--muted); font-size: 0.9rem; }
.ayuda-chica { color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0; }

.barra-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.btn-herramienta {
  position: relative;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
}

.btn-herramienta.activa {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-herramienta-peligro { color: #b3261e; }
.btn-herramienta-peligro.activa { background: #b3261e; border-color: #b3261e; color: #fff; }

.btn-herramienta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-icono {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  text-align: center;
}

.control-curvatura[hidden] { display: none; }
.control-curvatura {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text);
}
.control-curvatura input {
  width: 3.6rem;
  font-size: 0.85rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.control-alinear[hidden] { display: none; }
.control-alinear {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.control-alinear input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.control-alinear:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.separador-herramientas {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 0.2rem;
}

/* Tooltip estilo "Photoshop": aparece al pasar el mouse (o con foco por teclado). */
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.4rem;
  background: #1c1c1c;
  color: #fff;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  font-size: 0.78rem;
  line-height: 1.3;
  width: max-content;
  max-width: 230px;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.cota-estado-texto {
  flex-basis: 100%;
  /* Mismo alto vacía que con un mensaje: si no, la pizarra salta al aparecer uno. */
  line-height: 1.4;
  min-height: 1.4em;
  color: var(--muted);
  font-size: 0.85rem;
}
.cota-estado-texto.ok { color: var(--ok); font-weight: 600; }
.cota-estado-texto.herramienta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  padding: 0.4rem 0.7rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  background: var(--accent-suave);
  color: var(--text);
  font-size: 0.9rem;
}
.estado-principal { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.estado-secundario { color: var(--muted); font-variant-numeric: tabular-nums; }
.estado-atajos { color: var(--muted); font-size: 0.8rem; }
.estado-atajos kbd { font-size: 0.75rem; color: var(--text); }
.cota-estado-texto.error { color: #b3261e; font-weight: 600; }

.layout-editor {
  position: relative;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.lienzo-contenedor {
  position: relative;
  flex: 1 1 500px;
  min-width: 280px;
}

.lienzo-wrap {
  position: relative;
  border: 1px solid var(--border);
  background: #222;
  overflow: auto;
  max-height: 70vh;
  /* Sin las barras del navegador: van las propias, superpuestas (abajo). */
  scrollbar-width: none;
}
.lienzo-wrap::-webkit-scrollbar { display: none; }

/* Barras de desplazamiento de la pizarra: finas, translúcidas sobre el
   fondo oscuro, aparecen al usar la pizarra y se desvanecen solas. El riel
   es la zona sensible (más ancha); el pulgar visible es más fino. */
:root {
  --desplazador-pulgar: rgba(255, 255, 255, 0.32);
  --desplazador-pulgar-activo: rgba(255, 255, 255, 0.6);
  --desplazador-riel: rgba(255, 255, 255, 0.06);
}
.desplazador[hidden] { display: none; }
.desplazador {
  position: absolute;
  z-index: 4;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.35s ease, background-color 0.2s ease;
  touch-action: none;
}
.desplazador.visible,
.desplazador:hover,
.desplazador.arrastrando { opacity: 1; }
.desplazador:hover,
.desplazador.arrastrando { background: var(--desplazador-riel); backdrop-filter: blur(2px); }
.desplazador-pulgar {
  position: absolute;
  border-radius: 999px;
  background: var(--desplazador-pulgar);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  transition: background-color 0.2s ease, inset 0.15s ease;
  cursor: grab;
}
.desplazador-h .desplazador-pulgar { top: 4px; bottom: 4px; }
.desplazador-v .desplazador-pulgar { left: 4px; right: 4px; }
.desplazador:hover .desplazador-pulgar,
.desplazador.arrastrando .desplazador-pulgar { background: var(--desplazador-pulgar-activo); }
.desplazador-h:hover .desplazador-pulgar,
.desplazador-h.arrastrando .desplazador-pulgar { top: 2px; bottom: 2px; }
.desplazador-v:hover .desplazador-pulgar,
.desplazador-v.arrastrando .desplazador-pulgar { left: 2px; right: 2px; }
.desplazador.arrastrando .desplazador-pulgar { cursor: grabbing; }

.caja-coordenadas {
  position: absolute;
  z-index: 6;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background: rgba(28, 28, 28, 0.92);
  border: 1px solid #ffca28;
  border-radius: 5px;
  padding: 0.35rem 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -100%);
  margin-top: -0.6rem;
}

.caja-coordenadas[hidden] { display: none; }

.caja-coordenadas label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: #fff;
  white-space: nowrap;
}

.caja-coordenadas input {
  width: 4.5rem;
  margin: 0;
  padding: 0.2rem 0.3rem;
  font-size: 0.85rem;
}

.caja-coordenadas #btn-caja-ok {
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--ok);
  border-color: var(--ok);
}

/* Cuadrito de la herramienta "Girar": grados + Horizontal / Vertical / Aplicar. */
.caja-giro input { width: 4.2rem; }
.caja-giro button {
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: transparent;
  color: #fff;
  border-color: #777;
}
.caja-giro button:hover { border-color: #ffca28; }
.caja-giro button:focus-visible { outline: 2px solid #ffca28; outline-offset: 1px; }
.caja-giro #btn-giro-ok { background: var(--ok); border-color: var(--ok); }

/* Cuadrito de la herramienta "Rectángulo": Dx / Dy con su candado (fijar) + Crear.
   Queda quieto en la esquina superior izquierda de lo visible de la pizarra
   (lo ubica app.js, ubicarCajaRectangulo). */
.caja-rectangulo { transform: none; margin: 0; }
.rect-campo { display: flex; align-items: center; gap: 0.3rem; }
.rect-campo > label:first-child { font-weight: 600; }
.rect-unidad { font-size: 0.78rem; color: #ddd; }
.caja-rectangulo .rect-fijo {
  position: relative;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #555;
  border-radius: 3px;
  color: #aaa;
  cursor: pointer;
}
.caja-rectangulo .rect-fijo:hover { border-color: #ffca28; color: #fff; }
.caja-rectangulo .rect-fijo:has(input:checked) { border-color: #ffca28; background: rgba(255, 202, 40, 0.15); color: #ffca28; }
.caja-rectangulo .rect-fijo:has(input:focus-visible) { outline: 2px solid #ffca28; outline-offset: 1px; }
/* El checkbox sigue ahí (teclado, lectores de pantalla) pero se ve el candado. */
.caja-rectangulo .rect-fijo input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.rect-fijo svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rect-fijo rect { fill: currentColor; stroke: none; }
.rect-fijo .candado-cerrado { display: none; }
.rect-fijo:has(input:checked) .candado-abierto { display: none; }
.rect-fijo:has(input:checked) .candado-cerrado { display: inline; }
.caja-rectangulo #btn-rect-ok {
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--ok);
  border-color: var(--ok);
}
.caja-rectangulo #btn-rect-ok:focus-visible { outline: 2px solid #ffca28; outline-offset: 1px; }
.caja-rectangulo #btn-rect-ok:disabled { opacity: 0.45; cursor: not-allowed; }

/* Cuadrito "Corregir medida": medida actual -> real, a qué aplicarla y resumen. */
.caja-medida {
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
}
/* Se ubica desde app.js (ubicarCajaMedida) por su esquina, afuera del molde. */
.caja-medida { transform: none; margin: 0; }
.caja-medida .caja-titulo {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.caja-medida .caja-fila { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.caja-medida .medida-actual { font-size: 0.78rem; color: #ddd; white-space: nowrap; }
.caja-medida .medida-actual strong { color: #fff; }
.medida-opciones {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0.3rem 0.45rem 0.35rem;
  border: 1px solid #555;
  border-radius: 4px;
}
.medida-opciones legend { padding: 0 0.25rem; font-size: 0.7rem; color: #bbb; }
.caja-medida .medida-opciones label { cursor: pointer; white-space: normal; }
.medida-opciones label[hidden] { display: none; }
.medida-opciones input { width: auto; margin: 0; accent-color: #ffca28; }
.medida-opciones input:focus-visible { outline: 2px solid #ffca28; outline-offset: 2px; }
.medida-opciones .medida-todos { margin-left: 1.3rem; color: #ddd; }
.medida-resumen { margin: 0; font-size: 0.75rem; color: #ffca28; line-height: 1.3; }
.medida-resumen.error { color: #ff8a80; }
.caja-medida button {
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  flex: 1 1 auto;
}
.caja-medida button:focus-visible { outline: 2px solid #ffca28; outline-offset: 1px; }
.caja-medida #btn-medida-ok { background: var(--ok); border-color: var(--ok); }
.caja-medida #btn-medida-ok:disabled { opacity: 0.45; cursor: not-allowed; }
.caja-medida #btn-medida-cancelar { background: transparent; color: #fff; border-color: #777; }
.caja-medida #btn-medida-cancelar:hover { border-color: #ffca28; }

.caja-nuevo-punto {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}
/* Se ubica desde app.js (ubicarCajaNuevoPunto) por su esquina, separado del punto. */
.caja-nuevo-punto { transform: none; margin: 0; width: max-content; }
/* Barra para arrastrar el cartel. */
.caja-asa {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.35rem -0.5rem 0;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #444;
  border-radius: 5px 5px 0 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.caja-asa:hover { background: rgba(255, 255, 255, 0.06); }
.caja-asa:hover svg { fill: #ffca28; }
.caja-nuevo-punto.arrastrando .caja-asa { cursor: grabbing; background: rgba(255, 255, 255, 0.1); }
.caja-asa svg { width: 0.6rem; height: 0.8rem; flex: none; fill: #999; }
.caja-nuevo-punto .caja-titulo {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.caja-nuevo-punto .caja-fila { display: flex; gap: 0.5rem; align-items: center; }
/* Con "Perímetro" tildado, Dx/Dy no cuentan: se atenúan (siguen editables con Tab). */
.caja-nuevo-punto .fila-dxdy { transition: opacity 0.15s; }
.caja-nuevo-punto.modo-perimetro .fila-dxdy { opacity: 0.4; }
/* Dx, Dy y Perímetro uno debajo del otro: nombre | campo | mm. */
.campos-nuevo-punto {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 0.3rem 0.4rem;
  font-size: 0.78rem;
  color: #fff;
}
.campos-nuevo-punto > label { font-weight: 600; }
.campos-nuevo-punto .check-perimetro { gap: 0.3rem; cursor: pointer; }
.campos-nuevo-punto .check-perimetro input { width: auto; margin: 0; accent-color: #ffca28; }
.caja-nuevo-punto:not(.modo-perimetro) input.fila-perimetro { opacity: 0.6; }
.aviso-nuevo-punto { margin: 0; font-size: 0.75rem; color: #ff8a80; }
.caja-nuevo-punto button {
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  flex: 1 1 auto;
}
.caja-nuevo-punto #btn-nuevo-punto-ok { background: var(--ok); border-color: var(--ok); }
.caja-nuevo-punto #btn-nuevo-punto-cancelar { background: transparent; color: #fff; border-color: #777; }
.caja-nuevo-punto .btn-caja-aplicar { background: var(--ok); border-color: var(--ok); }
.caja-nuevo-punto .btn-caja-cerrar { background: transparent; color: #fff; border-color: #777; }
.caja-nuevo-punto .btn-caja-cerrar:hover { border-color: #ffca28; }
.caja-nuevo-punto button:focus-visible { outline: 2px solid #ffca28; outline-offset: 1px; }

canvas {
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.zoom-controles {
  position: absolute;
  top: 0.6rem;
  right: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  z-index: 5;
}

.btn-zoom {
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Ojo "Ocultar / Mostrar fondo", abajo del zoom: tachado mientras el fondo está oculto. */
.btn-fondo { display: grid; place-items: center; margin-top: 0.3rem; }
.icono-ojo {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icono-ojo .tachado { display: none; }
.btn-fondo[aria-pressed="true"] { background: #1c1c1c; color: #fff; border-color: #555; }
.btn-fondo[aria-pressed="true"] .tachado { display: inline; }
.btn-zoom:hover { border-color: var(--accent); }
.btn-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.zoom-controles .btn-zoom[data-tooltip]:hover::after,
.zoom-controles .btn-zoom[data-tooltip]:focus-visible::after {
  top: auto;
  right: 100%;
  left: auto;
  bottom: 0;
  margin-top: 0;
  margin-right: 0.4rem;
}

.ayuda-rapida {
  margin-top: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  background: var(--panel);
}

.ayuda-rapida summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  list-style: none;
}
.ayuda-rapida summary::-webkit-details-marker { display: none; }
.ayuda-rapida summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  transition: transform 0.15s ease;
}
.ayuda-rapida[open] summary::before { transform: rotate(90deg); }

.ayuda-rapida-contenido {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.7rem 1.2rem;
  margin-top: 0.6rem;
}

.ayuda-rapida-contenido h4 {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ayuda-rapida-contenido ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ayuda-rapida-contenido li { font-size: 0.82rem; line-height: 1.35; }

.panel {
  flex: 0 0 300px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.bloque {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem;
}

.bloque h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.2rem 0.3rem; border-bottom: 1px solid var(--border); }
td:last-child { text-align: right; width: 1.8rem; }
/* Las medidas no se parten ("131.5 / mm") aunque el nombre del molde sea largo. */
#tabla-moldes td:nth-child(2), #tabla-moldes td:nth-child(3) { white-space: nowrap; }
#tabla-moldes th { white-space: nowrap; font-size: 0.8rem; }
#tabla-moldes td:first-child { width: 100%; }

/* Fila del molde sobre el que se está actuando ahora mismo en el lienzo (ver
   resaltarFilaMoldeActivo() en app.js). */
tr.fila-activa { background: rgba(26, 92, 255, 0.1); }
/* Pasar el mouse por la fila resalta ese molde en el lienzo (ver actualizarTabla()). */
#tabla-moldes tbody tr:hover,
#tabla-moldes tbody tr:focus-within { background: rgba(26, 92, 255, 0.06); }
tr.fila-activa td { font-weight: 600; }

/* Ancho / alto de la tabla: se ven como texto, pero son botones que abren "Corregir medida". */
.btn-medida-tabla {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted rgba(0, 0, 0, 0.35);
  text-underline-offset: 3px;
}
.btn-medida-tabla:hover { color: var(--accent); text-decoration-color: var(--accent); }
.btn-medida-tabla:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }

.input-nombre-molde {
  display: block;
  min-width: 4rem;
  padding: 0.1rem 0.25rem;
  margin-left: -0.25rem;
  border: 1px solid transparent;
  border-radius: 3px;
  overflow-wrap: anywhere;
  cursor: text;
}
.input-nombre-molde:hover { border-color: var(--border); }
.input-nombre-molde:focus-visible,
.input-nombre-molde:focus { outline: none; border-color: var(--accent); background: var(--panel); }
tr.fila-activa .input-nombre-molde { font-weight: 600; }

.btn-borrar-molde {
  background: transparent;
  color: #b3261e;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.2rem;
}
.btn-borrar-molde:hover { color: #7a1a13; }

.botones-exportar { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.botones-exportar button { flex: 1 1 auto; }

#descargas[hidden] { display: none; }
#descargas { display: flex; gap: 0.8rem; margin-top: 0.5rem; }
#descargas a { color: var(--accent); }
#descargas a[hidden] { display: none; }

.lista-cotas { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.fila-cota {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25rem 0.4rem;
}
.fila-cota span { flex: 0 0 auto; font-weight: 600; }
.fila-cota input { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0.2rem; }
.fila-cota button {
  flex: 0 0 auto;
  background: transparent;
  color: #b3261e;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.3rem;
}

/* Filas de "Rectas": el nombre es un botón (selecciona la recta en el lienzo),
   así que hereda la fila de cotas pero sin el look de botón primario. */
.fila-linea.activa { border-color: var(--accent); background: var(--linea-activa); }
.fila-linea .btn-elegir-linea {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: none;
  padding: 0.15rem 0.2rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.fila-linea .btn-elegir-linea::before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 3px;
  margin-right: 0.45rem;
  vertical-align: middle;
  /* misma recta blanca con borde oscuro que en el lienzo (COLOR_LINEA en app.js) */
  background: #fff;
  box-shadow: 0 0 0 1.5px #111;
  border-radius: 2px;
}
.fila-linea .btn-elegir-linea:hover { color: var(--accent); }
.fila-linea button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

kbd {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 0.3rem;
  background: #f0f0ee;
}

@media (max-width: 640px) {
  .panel { flex-basis: 100%; }
  .caja-rectangulo { flex-direction: column; align-items: stretch; }
}

/* --- Barra de herramientas V2: íconos en columna a la izquierda de la pizarra ---
   Va en el margen libre a la izquierda de la tarjeta del editor; si la ventana
   no deja lugar, entra dentro de la tarjeta corriendo la pizarra. */
:root {
  --barra-v2-boton: 2.4rem;
  --barra-v2-fondo: #2b2b2b;
  --barra-v2-borde: #3d3d3d;
  --barra-v2-icono: #d6d6d6;
  --barra-v2-hover: #3c3c3c;
}
body.modo-barra-v2 .barra-herramientas > .btn-herramienta,
body.modo-barra-v2 .barra-herramientas > .separador-herramientas { display: none; }
body.modo-barra-v2 .barra-herramientas { min-height: 2.2rem; }

.barra-v2[hidden] { display: none; }
.barra-v2 {
  position: absolute;
  top: 0;
  right: calc(100% + 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem;
  background: var(--barra-v2-fondo);
  border: 1px solid var(--barra-v2-borde);
  border-radius: 6px;
}
.barra-v2-grupo {
  display: grid;
  grid-template-columns: repeat(2, var(--barra-v2-boton));
  gap: 0.15rem;
}
.barra-v2-grupo + .barra-v2-grupo {
  padding-top: 0.35rem;
  border-top: 1px solid var(--barra-v2-borde);
}
.barra-v2 button {
  display: grid;
  place-items: center;
  width: var(--barra-v2-boton);
  height: var(--barra-v2-boton);
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--barra-v2-icono);
}
.barra-v2 button[hidden] { display: none; }
.barra-v2 button:hover:not(:disabled) { background: var(--barra-v2-hover); color: #fff; }
.barra-v2 button:active:not(:disabled) { background: #1f1f1f; }
.barra-v2 button:focus-visible { outline: 2px solid #ffca28; outline-offset: -2px; }
.barra-v2 button.activa,
.barra-v2 button.activa:hover:not(:disabled) { background: var(--accent); border-color: #5c8bff; color: #fff; }
.barra-v2 button.peligro:hover:not(:disabled) { color: #ff8a80; }
.barra-v2 button:disabled { background: transparent; color: #777; opacity: 0.5; cursor: not-allowed; }
.barra-v2 svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.barra-v2 svg .relleno { fill: currentColor; stroke: none; }

@media (max-width: 1400px) {
  body.modo-barra-v2 .layout-editor { padding-left: calc(2 * var(--barra-v2-boton) + 1.75rem); }
  .barra-v2 { right: auto; left: 0; }
}

/* Cartel de la barra V2: nombre de la herramienta y su tecla. */
.tooltip-barra[hidden] { display: none; }
.tooltip-barra {
  position: fixed;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.55rem;
  background: #1c1c1c;
  color: #fff;
  border-radius: 4px;
  font-size: 0.82rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  transform: translateY(-50%);
}
.tooltip-barra kbd {
  padding: 0.05rem 0.35rem;
  border: 1px solid #555;
  border-radius: 3px;
  background: #2e2e2e;
  color: #ffca28;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
}

/* --- Barra de herramientas V3: paletas en pestañas arriba de la pizarra ---
   Pestañas como las de Audaces (Patrones, Puntos, Rectas...) y, debajo, las
   herramientas de la paleta elegida con ícono, nombre y tecla. */
:root {
  --v3-fondo-pestanas: #ecece8;
  --v3-hover: #e6ebf7;
  --v3-texto-tenue: #5b5b5b;
  --v3-radio: 5px;
}
.btn-herramienta.solo-v3 { display: none; }
body.modo-barra-v3 .barra-herramientas > .btn-herramienta,
body.modo-barra-v3 .barra-herramientas > .separador-herramientas { display: none; }

.barra-v3[hidden] { display: none; }
.barra-v3 {
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--v3-radio);
  background: var(--panel);
}
.barra-v3-cabecera {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem 0;
  background: var(--v3-fondo-pestanas);
  border-bottom: 1px solid var(--border);
  border-radius: var(--v3-radio) var(--v3-radio) 0 0;
}
.barra-v3-fijas {
  display: flex;
  gap: 0.1rem;
  align-self: center;
  padding: 0 0.5rem 0.3rem 0;
  border-right: 1px solid var(--border);
}
.barra-v3-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
}
.barra-v3-pestana {
  margin-bottom: -1px;
  padding: 0.4rem 0.9rem;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--v3-radio) var(--v3-radio) 0 0;
  color: var(--v3-texto-tenue);
  font-size: 0.88rem;
}
.barra-v3-pestana:hover { color: var(--text); background: rgba(255, 255, 255, 0.6); }
.barra-v3-pestana:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.barra-v3-pestana[aria-selected="true"] {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: inset 0 2px 0 var(--accent);
  color: var(--text);
  font-weight: 600;
}

.barra-v3-paleta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.9rem;
  padding: 0.4rem 0.5rem;
}
.barra-v3-paleta[hidden] { display: none; }
.barra-v3-divisor {
  width: 1px;
  align-self: stretch;
  margin: 0.15rem 0.35rem;
  background: var(--border);
}
.barra-v3-divisor[hidden] { display: none; }

.barra-v3-herramienta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font-size: 0.86rem;
}
.barra-v3-herramienta[hidden] { display: none; }
.barra-v3-herramienta.solo-icono { padding: 0.3rem; }
.barra-v3-herramienta:hover:not(:disabled) { background: var(--v3-hover); }
.barra-v3-herramienta:active:not(:disabled) { background: #d6def2; }
.barra-v3-herramienta:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.barra-v3-herramienta.activa,
.barra-v3-herramienta.activa:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.barra-v3-herramienta.peligro { color: #b3261e; }
.barra-v3-herramienta.peligro:hover:not(:disabled) { background: #fbeaea; }
.barra-v3-herramienta:disabled { background: transparent; opacity: 0.4; cursor: not-allowed; }
.barra-v3-herramienta svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.barra-v3-herramienta svg .relleno { fill: currentColor; stroke: none; }
.barra-v3-herramienta kbd {
  padding: 0 0.3rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--v3-texto-tenue);
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.35;
}
.barra-v3-herramienta.activa kbd { border-color: rgba(255, 255, 255, 0.5); background: transparent; color: rgba(255, 255, 255, 0.9); }

/* ===================================================================
   Rediseño: stepper, tarjetas de inicio, zona de la foto y retoques
   del editor. Va al final para pisar los estilos de arriba.
   =================================================================== */

/* ----- Stepper ----- */
.stepper { max-width: 1100px; margin: 0 auto 1.5rem; }
.stepper ol {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.paso-stepper {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 0;
  min-width: 0;
  color: var(--muted);
}
.paso-stepper[hidden] { display: none; }
/* Línea entre pasos: se llena de azul cuando el paso anterior está hecho. */
.paso-stepper + .paso-stepper::before {
  content: "";
  flex: 0 1 4rem;
  height: 2px;
  margin-right: 0.35rem;
  border-radius: 2px;
  background: var(--border);
  transition: background-color 0.3s ease;
}
.paso-stepper.hecho + .paso-stepper::before,
.paso-stepper.hecho + .paso-stepper.activo::before { background: var(--azul); }
.paso-stepper-marca {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--panel);
  font-weight: 800;
  font-size: 0.9rem;
  transition: all 0.25s ease;
}
.paso-stepper-marca .ok { display: none; }
.paso-stepper-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.paso-stepper-texto strong { font-size: 0.92rem; color: var(--text); white-space: nowrap; }
.paso-stepper-texto small { font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paso-stepper.activo .paso-stepper-marca {
  border-color: var(--azul);
  background: var(--azul);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(0, 85, 164, 0.14);
}
.paso-stepper.hecho .paso-stepper-marca { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.paso-stepper.hecho .num { display: none; }
.paso-stepper.hecho .ok { display: block; }
.paso-stepper:not(.activo):not(.hecho) .paso-stepper-texto strong { color: var(--muted); }

/* ----- Inicio: título y tarjetas de los pasos 1 y 2 ----- */
.inicio { max-width: 1100px; margin: 0 auto; }
.inicio[hidden] { display: none; }
.intro { text-align: center; max-width: 640px; margin: 0 auto 1.75rem; }
.intro h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.intro p { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.5; }

.tarjetas-inicio {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.25rem;
  align-items: start;
}
/* Sin código (el .exe) la tarjeta de la foto ocupa todo el ancho. */
.tarjetas-inicio:has(> #caja-licencia[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin: 0 auto; }

.tarjeta {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.4rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.tarjeta[hidden] { display: none; }
.tarjeta.activa { border-color: var(--azul-borde); box-shadow: var(--sombra), 0 0 0 4px rgba(0, 85, 164, 0.08); }
.tarjeta.hecha .tarjeta-num { background: var(--ok); }

.tarjeta-cabecera { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 1.1rem; }
.tarjeta-cabecera h2 { margin: 0.1rem 0 0.25rem; font-size: 1.12rem; font-weight: 800; }
.tarjeta-cabecera p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.tarjeta-cabecera code {
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  background: var(--azul-claro);
  color: var(--azul);
  font: 600 0.85em var(--fuente-mono);
}
.tarjeta-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  background: var(--azul);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  transition: background-color 0.25s ease;
}

/* Campo del código: grande, monoespaciado, con ícono de llave. */
.campo-codigo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0 0.95rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radio-chico);
  background: #f8fafd;
  color: var(--muted);
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.campo-codigo:focus-within { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 4px rgba(0, 85, 164, 0.12); color: var(--azul); }
.campo-codigo .icono { width: 1.25rem; height: 1.25rem; }
.campo-codigo input {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font: 600 1.15rem var(--fuente-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.campo-codigo input::placeholder { color: #a8b4c4; letter-spacing: 0.08em; }
.tarjeta.hecha .campo-codigo { border-color: #b5dfc8; background: var(--ok-claro); }

.notas { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.notas li { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.notas .icono { margin-top: 0.1rem; color: var(--azul); }
.notas a { color: var(--azul); font-weight: 700; }

/* Zona de la foto: arrastrar y soltar, o clic. */
.zona-foto {
  position: relative;
  display: block;
  border: 2px dashed var(--azul-borde);
  border-radius: var(--radio);
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(0, 85, 164, 0.025) 10px 20px);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.zona-foto:hover, .zona-foto:focus-within { border-color: var(--azul); background: var(--azul-claro); }
.zona-foto.arrastrando { border-color: var(--azul); border-style: solid; background: var(--azul-claro); transform: scale(1.01); }
.zona-foto input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zona-foto-vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2.1rem 1rem;
  text-align: center;
}
.zona-foto-vacia[hidden], .zona-foto-elegida[hidden] { display: none; }
.zona-foto-vacia strong { font-size: 1rem; }
.zona-foto-vacia small { color: var(--muted); font-size: 0.82rem; }
.zona-foto-icono {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 0.4rem;
  border-radius: 16px;
  background: var(--azul-claro);
  color: var(--azul);
  transition: transform 0.2s ease;
}
.zona-foto:hover .zona-foto-icono { transform: translateY(-3px); }
.zona-foto-icono .icono { width: 1.6rem; height: 1.6rem; }
.zona-foto-elegida { display: flex; align-items: center; gap: 1rem; padding: 0.85rem; }
.zona-foto-elegida img {
  width: 5.5rem;
  height: 5.5rem;
  flex: none;
  object-fit: cover;
  border-radius: var(--radio-chico);
  background: #e9eef5;
}
.zona-foto-datos { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.zona-foto-datos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zona-foto-datos small { color: var(--muted); font-size: 0.82rem; }
.zona-foto-datos .cambiar { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--azul); font-weight: 700; }

/* Tarjeta de la foto bloqueada hasta validar el código. */
.bloqueo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radio);
  background: rgba(248, 250, 253, 0.9);
  color: var(--muted);
  text-align: center;
  font-weight: 600;
  pointer-events: none;
}
.bloqueo[hidden] { display: none; }
.bloqueo .icono { width: 1.6rem; height: 1.6rem; color: var(--azul); }
.bloqueo p { margin: 0; line-height: 1.45; }
.bloqueo small { font-weight: 500; }
.zona-envoltorio { position: relative; }
.tarjeta.bloqueada .zona-foto { border-style: solid; border-color: var(--border); }
.tarjeta.bloqueada .zona-foto-vacia, .tarjeta.bloqueada .zona-foto-elegida { visibility: hidden; }
/* Bloqueada: "Digitalizar" no se muestra; la foto de prueba sigue disponible. */
.tarjeta.bloqueada #btn-procesar { display: none; }

.acciones { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem; }
.acciones .btn { flex: 1 1 12rem; }

/* Barra de progreso indeterminada mientras se procesa. */
.progreso { height: 4px; margin-top: 1rem; overflow: hidden; border-radius: 4px; background: var(--azul-claro); }
.progreso[hidden] { display: none; }
.progreso span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--azul), #3d8ae0);
  animation: progreso 1.3s ease-in-out infinite;
}
@keyframes progreso { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Entrada suave de las secciones. */
.inicio:not([hidden]), .paso:not([hidden]) { animation: aparecer 0.35s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----- Editor ----- */
.editor-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.9rem; }
.editor-cabecera h2 { margin: 0 0 0.2rem; font-size: 1.2rem; font-weight: 800; }
.editor-cabecera .ayuda { margin: 0; }

.btn-herramienta {
  border-radius: 8px;
  border-color: var(--border);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
}
.btn-herramienta:hover:not(:disabled) { background: var(--azul-claro); border-color: var(--azul-borde); color: var(--azul); }
.btn-herramienta.activa,
.btn-herramienta.activa:hover:not(:disabled) { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-herramienta-peligro { color: var(--error); }
.btn-herramienta-peligro:hover:not(:disabled) { background: var(--error-claro); border-color: #f3c3c1; color: var(--error); }
.btn-icono { display: inline-grid; place-items: center; }
.btn-icono .icono { width: 1.1rem; height: 1.1rem; }

.lienzo-wrap { border-radius: var(--radio-chico); border-color: #1f2a3a; background: #1a2230; }

.btn-zoom { display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, 0.95); }
.btn-zoom:hover:not(:disabled) { background: #fff; color: var(--azul); }
.btn-zoom .icono { width: 1.1rem; height: 1.1rem; }

.ayuda-rapida { border-radius: var(--radio-chico); background: #f8fafd; }

.panel { gap: 0.8rem; }
.bloque { border-radius: var(--radio-chico); background: var(--panel); }
.bloque h3 { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.bloque-exportar { border-color: var(--azul-borde); background: linear-gradient(180deg, var(--azul-claro), var(--panel) 70%); }
.botones-exportar .btn { flex: 1 1 0; }
#descargas.descargas { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
#descargas.descargas[hidden], #descargas a[hidden] { display: none; }
#descargas a.btn-descarga {
  border: 1px solid #b5dfc8;
  border-radius: var(--radio-chico);
  background: var(--ok-claro);
  color: var(--ok);
  font-weight: 700;
  animation: aparecer 0.3s ease both;
}
#descargas a.btn-descarga:hover { background: #d4eedf; }

/* ----- WhatsApp ----- */
:root { --whatsapp: #25d366; --whatsapp-oscuro: #128c4a; }

.btn-whatsapp-cabecera {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn-whatsapp-cabecera:hover { background: var(--whatsapp-oscuro); transform: translateY(-1px); }
.btn-whatsapp-cabecera .icono { width: 1.1rem; height: 1.1rem; }

.whatsapp-flotante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(18, 140, 74, 0.4);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.whatsapp-flotante:hover { background: var(--whatsapp-oscuro); transform: scale(1.04); }
.whatsapp-flotante .icono { width: 1.7rem; height: 1.7rem; }
/* Anillo que late para llamar la atención. */
.whatsapp-flotante::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--whatsapp);
  animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}
.whatsapp-flotante-texto { padding-right: 0.35rem; white-space: nowrap; }
.en-editor .whatsapp-flotante-texto { display: none; }
.en-editor .whatsapp-flotante { padding: 0.65rem; }

/* ----- Cursos (debajo de la cabecera) ----- */
.promo {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 1.5rem;
  padding: 1.4rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 1.25rem;
  align-items: center;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(500px 200px at 95% 0%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(400px 220px at 0% 110%, rgba(61, 138, 224, 0.55), transparent 70%),
    linear-gradient(120deg, var(--azul-profundo), var(--azul) 60%, #1a6fc4);
  box-shadow: 0 14px 36px rgba(0, 47, 95, 0.25);
}
/* Trama de líneas finas tipo pizarra de corte. */
.promo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.promo > * { position: relative; z-index: 1; }
.promo-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.promo h2 {
  margin: 0.6rem 0 0.5rem;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 800;
  line-height: 1.2;
}
.promo-autor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}
.promo-autor { align-items: flex-start; }
.autor-texto { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.autor-texto strong { display: inline-flex; align-items: center; gap: 0.4rem; color: #fff; font-size: 1rem; }
.autor-texto p { margin: 0; line-height: 1.45; font-size: 0.84rem; }
.autor-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.autor-cta:hover { background: rgba(255, 255, 255, 0.22); border-color: #fff; }
.autor-cta .icono { color: var(--whatsapp); }
.promo-autor .icono { color: #ffd166; }
.avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.85), 0 6px 16px rgba(0, 0, 0, 0.25);
}
.avatar-chico { width: 36px; height: 36px; border-width: 2px; box-shadow: 0 0 0 2px var(--azul-borde); }

.promo-cursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.curso {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.curso:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); }
.curso-icono {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 11px;
  background: #fff;
  color: var(--azul);
}
.curso-icono .icono { width: 1.25rem; height: 1.25rem; }
.curso-texto { display: flex; flex-direction: column; gap: 0.2rem; }
.curso-texto strong { font-size: 1.02rem; font-weight: 800; }
.curso-texto small { color: rgba(255, 255, 255, 0.82); font-size: 0.84rem; line-height: 1.4; }
.curso-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  margin-top: auto;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--whatsapp);
  font-size: 0.82rem;
  font-weight: 800;
}
.curso:hover .curso-cta .icono { transform: translateX(3px); }
.curso-cta .icono { transition: transform 0.2s ease; }

/* En el editor la promo queda como una franja fina, para no quitar espacio. */
.promo.compacta {
  max-width: 1400px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radio-chico);
}
.promo.compacta h2, .promo.compacta .promo-autor, .promo.compacta .curso-texto small, .promo.compacta .curso-icono { display: none; }
.promo.compacta .promo-cursos { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.promo.compacta .curso { flex-direction: row; align-items: center; gap: 0.6rem; padding: 0.35rem 0.4rem 0.35rem 0.85rem; border-radius: 999px; }
.promo.compacta .curso-texto strong { font-size: 0.86rem; }
.promo.compacta .curso-cta { margin: 0; }

/* ----- Pie ----- */
.pie {
  max-width: 1100px;
  margin: 2.5rem auto 0;
  padding: 1.25rem 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.86rem;
}
.pie strong { color: var(--text); }
.pie-marca { display: flex; align-items: center; gap: 0.55rem; }
.marca-logo-chico { width: 1.8rem; height: 1.8rem; border-radius: 8px; box-shadow: none; }
.marca-logo-chico .icono { width: 1rem; height: 1rem; }
.pie-cursos { margin: 0; }
.pie-contacto {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--whatsapp-oscuro);
  font-weight: 800;
  text-decoration: none;
}
.pie-contacto:hover { text-decoration: underline; }
.pie-legal { flex-basis: 100%; margin: 0.25rem 0 0; color: var(--muted); font-size: 0.76rem; }

@media (max-width: 860px) {
  .promo { grid-template-columns: minmax(0, 1fr); }
  .promo.compacta { grid-template-columns: minmax(0, 1fr); }
  .promo.compacta .promo-intro { display: none; }
  .promo.compacta .promo-cursos { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .promo { padding: 1.15rem; border-radius: var(--radio); }
  .promo-cursos { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .promo h2 { font-size: 1.15rem; }
  .curso { flex-direction: row; align-items: center; gap: 0.7rem; padding: 0.65rem 0.7rem; }
  .curso-texto { flex: 1; min-width: 0; }
  .curso-texto small { display: none; }
  .curso-texto strong { font-size: 0.92rem; }
  .curso-icono { width: 2rem; height: 2rem; border-radius: 9px; }
  .curso-cta { margin: 0; align-self: center; }
  .whatsapp-numero { display: none; }
  .btn-whatsapp-cabecera { padding: 0.45rem; }
  .whatsapp-flotante-texto { display: none; }
  .pie { flex-direction: column; align-items: flex-start; padding-bottom: 4.5rem; }
}

/* ----- Celular / pantallas angostas ----- */
@media (max-width: 860px) {
  .tarjetas-inicio { grid-template-columns: minmax(0, 1fr); }
  .paso-stepper-texto small { display: none; }
}
@media (max-width: 560px) {
  .barra-app { padding: 0.6rem 1rem; }
  .marca-texto small, .selector-barra legend { display: none; }
  .paso-stepper-texto { display: none; }
  .paso-stepper.activo .paso-stepper-texto { display: flex; }
  .tarjeta { padding: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}