/* Estilos del generador de documentos.
   Una sola columna centrada, tipografía del sistema y buen aire entre campos.
   El tema oscuro sale de prefers-color-scheme: no hay botón para cambiarlo.

   La forma la manda el uso real: un formulario puede tener 20 campos o más, o
   sea varias pantallas de scroll. Por eso hay tres anclas fijas —la barra de
   arriba, el nombre de la plantilla y la barra de acción de abajo—: en
   cualquier punto del scroll se sabe dónde se está y cómo terminar. */

:root {
  --fondo: #f6f7f9;
  --papel: #ffffff;
  --texto: #1b1f24;
  --suave: #5b6672;
  --borde: #d6dbe1;
  --borde-fuerte: #b7c0ca;
  --acento: #1d4ed8;
  --acento-texto: #ffffff;
  --error: #b42318;
  --error-fondo: #fef3f2;
  --exito: #067647;
  --exito-fondo: #ecfdf3;
  --radio: 8px;

  /* Escala de espaciado: todo el aire del proyecto sale de acá. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  --sombra: 0 1px 2px rgb(16 24 40 / 0.04), 0 8px 24px -12px rgb(16 24 40 / 0.18);

  /* Alto real de la barra de arriba: lo mide app.js, porque cambia con el
     tamaño de letra del sistema y con el ancho de la ventana. El valor de acá
     es solo el que vale hasta que el JS corre (o si no corre). */
  --alto-barra: 53px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14171a;
    --papel: #1c2024;
    --texto: #e8eaed;
    --suave: #9aa4af;
    --borde: #333a42;
    --borde-fuerte: #4a545e;
    --acento: #5b8def;
    --acento-texto: #0e1114;
    --error: #ff9a90;
    --error-fondo: #2b1b19;
    --exito: #6fdc9b;
    --exito-fondo: #0f2318;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.7);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* --- Barra superior ---------------------------------------------------
   Fija: el botón de salir y la vuelta al inicio no deberían depender de
   dónde quedó el scroll. */

.barra {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) var(--e5);
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}

.barra form { margin: 0; }

.marca {
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--texto);
  text-decoration: none;
}

.marca:hover { color: var(--acento); }

/* --- Columna principal ------------------------------------------------ */

main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--e6) var(--e5) var(--e7);
}

h1 {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--e2);
  text-wrap: balance;
}

h2 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0 0 var(--e1);
}

.pie {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--e5) var(--e6);
  color: var(--suave);
  font-size: 0.85rem;
}

/* El nombre de la plantilla acompaña el scroll: con 20 campos, tres
   pantallas más abajo uno ya no se acuerda de cuál eligió. */
.encabezado-plantilla {
  position: sticky;
  top: var(--alto-barra);         /* justo debajo de la barra, sin taparla */
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  margin: calc(var(--e6) * -1) calc(var(--e5) * -1) var(--e5);
  padding: var(--e4) var(--e5);
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}

.encabezado-plantilla h1 {
  margin: 0;
  font-size: 1.25rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.volver {
  color: var(--acento);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.volver:hover { text-decoration: underline; }

.ayuda {
  color: var(--suave);
  font-size: 0.9rem;
  margin: var(--e1) 0 var(--e3);
  max-width: 62ch;
}

main > p { max-width: 62ch; }

.aviso {
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--papel);
  margin: 0 0 var(--e5);
}

.aviso.error {
  border-color: var(--error);
  background: var(--error-fondo);
  color: var(--error);
}

.aviso a { color: inherit; font-weight: 600; }

/* --- Lista de plantillas ---------------------------------------------- */

.plantillas { list-style: none; margin: 0 0 var(--e6); padding: 0; }

.plantillas li {
  display: flex;
  align-items: stretch;
  gap: var(--e2);
  margin-bottom: var(--e2);
}

.plantillas li form { display: flex; }

.plantillas a {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex: 1;
  min-width: 0;
  padding: var(--e4);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  text-decoration: none;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.plantillas a:hover {
  border-color: var(--acento);
  box-shadow: var(--sombra);
}

.plantillas .icono { color: var(--suave); flex: none; }
.plantillas a:hover .icono { color: var(--acento); }

.plantillas .texto-plantilla {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.plantillas .nombre { font-weight: 500; overflow-wrap: anywhere; }
.plantillas .descripcion {
  font-size: 0.875rem;
  color: var(--suave);
  overflow-wrap: anywhere;
}

.etiqueta-origen {
  font-size: 0.75rem;
  color: var(--suave);
  border: 1px solid var(--borde);
  border-radius: 99px;
  padding: 1px var(--e2);
  white-space: nowrap;
}

.subir {
  padding: var(--e5);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.subir input[type="file"] { display: block; margin: var(--e3) 0; max-width: 100%; }

/* --- Campos del formulario -------------------------------------------- */

.campo { margin-bottom: var(--e5); }

label {
  display: block;
  margin-bottom: var(--e1);
  font-weight: 500;
}

.pista {
  display: block;
  margin: 0 0 var(--e1);
  color: var(--suave);
  font-size: 0.85rem;
  font-weight: 400;
}

input[type="text"], input[type="password"], input[type="email"], textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px var(--e3);
  font: inherit;
  color: var(--texto);
  background: var(--papel);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  transition: border-color 120ms ease-out;
}

input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover { border-color: var(--suave); }

textarea {
  resize: vertical;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.9rem;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
textarea:focus, select:focus,
button:focus-visible, a:focus-visible, input[type="file"]:focus {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

input.con-error { border-color: var(--error); }
input.con-error:focus { outline-color: var(--error); }

.error-campo {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin: var(--e1) 0 0;
  color: var(--error);
  font-size: 0.88rem;
}

.error-campo .icono { flex: none; }

label.check {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-weight: 500;
  cursor: pointer;
}

label.check:hover { border-color: var(--borde-fuerte); }
label.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--acento); }

/* --- Grupos: listas y campos condicionados ---------------------------- */

fieldset {
  margin: 0 0 var(--e5);
  padding: var(--e4);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

legend {
  padding: 0 var(--e1);
  font-weight: 600;
  color: var(--suave);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

fieldset .campo:last-of-type { margin-bottom: 0; }

.fila {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-top: 1px solid var(--borde);
}

.fila:first-child { border-top: none; padding-top: 0; }

/* Al agregar un ítem hay que ver qué apareció: es el único momento de la
   interfaz donde algo cambia sin que la página se recargue. */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.fila.nueva { animation: aparecer 220ms cubic-bezier(0.16, 1, 0.3, 1); }

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

.celdas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  flex: 1;
  min-width: 0;
}

.celda { flex: 1 1 180px; min-width: 0; }

.lista.simple .fila input { flex: 1; }

/* --- Botones e iconos -------------------------------------------------- */

.icono { width: 16px; height: 16px; flex: none; }

.quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px;              /* alinea con el input, no con el label */
  padding: 0;
  width: 42px;
  height: 42px;
  background: transparent;
  color: var(--suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}

.lista.simple .quitar, .plantillas .quitar { margin-top: 0; }

/* En la lista de plantillas el botón acompaña el alto de la fila, que cambia
   si el nombre de la plantilla ocupa dos renglones. */
.plantillas .quitar {
  background: var(--papel);
  height: auto;
  align-self: stretch;
}

.quitar:hover { color: var(--error); border-color: var(--error); }

.agregar {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e3);
  padding: var(--e2) var(--e3);
  background: transparent;
  color: var(--acento);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 120ms ease-out, background 120ms ease-out;
}

.agregar:hover { border-color: var(--acento); background: var(--fondo); }

/* La acción principal acompaña el scroll: en un formulario de tres
   pantallas, "Generar documento" no puede vivir solo en el fondo. */
.acciones {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin: var(--e6) calc(var(--e5) * -1) 0;
  padding: var(--e3) var(--e5);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--borde);
}

.progreso {
  color: var(--suave);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

button.primario {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e3) var(--e5);
  min-height: 46px;
  font: inherit;
  font-weight: 600;
  color: var(--acento-texto);
  background: var(--acento);
  border: none;
  border-radius: var(--radio);
  cursor: pointer;
  transition: filter 120ms ease-out;
}

button.primario:hover { filter: brightness(1.08); }
button.primario[disabled] { opacity: 0.65; cursor: progress; }

button.secundario {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 10px var(--e4);
  font: inherit;
  color: var(--texto);
  background: var(--papel);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  cursor: pointer;
}

button.secundario:hover { border-color: var(--suave); }

.boton-salir {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 7px var(--e3);
  font: inherit;
  font-size: 0.9rem;
  color: var(--suave);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}

.boton-salir:hover { color: var(--error); border-color: var(--error); }

/* --- Confirmación de descarga ------------------------------------------ */

.descargado {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 0 var(--e5);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--exito);
  border-radius: var(--radio);
  background: var(--exito-fondo);
  color: var(--exito);
}

.descargado[hidden] { display: none; }

/* --- Activación -------------------------------------------------------- */

.huella {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e3);
  margin: var(--e5) 0 var(--e6);
  padding: var(--e5);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.etiqueta-huella {
  flex: 1 1 100%;
  color: var(--suave);
  font-size: 0.85rem;
}

.huella code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  user-select: all;
}

/* --- Pantallas angostas ------------------------------------------------ */

@media (max-width: 560px) {
  main { padding: var(--e5) var(--e4) var(--e6); }

  /* En un teléfono, tres barras fijas se comen un tercio de la pantalla. La
     de arriba es la menos útil mientras se completa el formulario, así que se
     va con el scroll y queda el nombre de la plantilla, que es lo que orienta. */
  .barra {
    position: static;
    padding: var(--e2) var(--e4);
  }

  .encabezado-plantilla {
    top: 0;
    margin: calc(var(--e5) * -1) calc(var(--e4) * -1) var(--e4);
    padding: var(--e3) var(--e4);
  }

  .encabezado-plantilla h1 { font-size: 1.1rem; }

  .acciones {
    margin: var(--e5) calc(var(--e4) * -1) 0;
    padding: var(--e3) var(--e4);
  }

  .progreso { display: none; }   /* el botón manda cuando falta ancho */

  /* Objetivos táctiles: nada por debajo de 44px cuando se usa con el dedo. */
  .boton-salir, .agregar { min-height: 44px; }
  .quitar { width: 44px; height: 44px; }
  .quitar { margin-top: 23px; }
}