/* Estilos del generador de documentos.
   Una sola columna centrada, tipografía del sistema y buen aire entre campos.
   El tema sale de prefers-color-scheme y se puede forzar con el botón de la
   barra. Ver el bloque EL TEMA más abajo y static/tema.js.

   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 {
  color-scheme: light;
  --fondo: #f6f7f9;
  --papel: #ffffff;
  --texto: #1b1f24;
  --suave: #5b6672;
  --borde: #d6dbe1;
  --borde-fuerte: #b7c0ca;
  /* El borde de un campo de formulario NO es decoración: es lo que le dice a
     alguien dónde escribir. Por eso tiene token propio y llega a 3:1 contra el
     papel, que es el mínimo que pide WCAG 1.4.11 para un control. --borde y
     --borde-fuerte se quedan claritos porque separan cajas, y para eso no rige
     ese mínimo; subirlos a todos ensuciaría la pantalla sin ayudar a nadie. */
  --borde-control: #858f9b;   /* 3,28:1 sobre --papel */
  --acento: #1d4ed8;
  --acento-texto: #ffffff;
  --error: #b42318;
  --error-fondo: #fef3f2;
  --exito: #067647;
  --exito-fondo: #ecfdf3;
  /* Para lo que todavía se puede evitar: el vencimiento que se viene. Ámbar y
     no rojo a propósito — el rojo es para lo que ya salió mal. */
  --atencion: #8a5200;        /* 6,05:1 sobre su fondo */
  --atencion-fondo: #fff8ed;
  --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;
}

/* EL TEMA
   Claro por defecto, oscuro si lo pide el sistema, y un botón que puede mandar
   sobre las dos cosas: Auto, Claro u Oscuro. Lo elegido se guarda en el navegador
   de cada persona y lo aplica static/tema.js.

   OJO: las dos listas de tokens oscuros de más abajo son LA MISMA y tienen que
   cambiar juntas. Están duplicadas a propósito y no unificadas con light-dark():
   esa función es de hace pocos años, y un navegador que no la entiende no pierde
   el tema, pierde TODOS los colores de la página. Un estudio con una máquina vieja
   no se puede quedar sin pantalla por una comodidad nuestra.

   `color-scheme` va junto con los colores para que los controles del navegador
   —barras de scroll, menús desplegables, el selector de archivos— acompañen y no
   queden blancos sobre fondo negro. */

@media (prefers-color-scheme: dark) {
  /* Auto: sigue al sistema, salvo que la persona haya pedido claro a mano. */
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --fondo: #14171a;
    --papel: #1c2024;
    --texto: #e8eaed;
    --suave: #9aa4af;
    --borde: #333a42;
    --borde-fuerte: #4a545e;
    --borde-control: #78838f;   /* 4,25:1 sobre --papel */
    --acento: #5b8def;
    --acento-texto: #0e1114;
    --error: #ff9a90;
    --error-fondo: #2b1b19;
    --exito: #6fdc9b;
    --exito-fondo: #0f2318;
    --atencion: #fdba74;        /* 9,56:1 sobre su fondo */
    --atencion-fondo: #2a1f10;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.7);
  }
}

/* Oscuro pedido a mano, tenga el sistema lo que tenga. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #14171a;
  --papel: #1c2024;
  --texto: #e8eaed;
  --suave: #9aa4af;
  --borde: #333a42;
  --borde-fuerte: #4a545e;
  --borde-control: #78838f;   /* 4,25:1 sobre --papel */
  --acento: #5b8def;
  --acento-texto: #0e1114;
  --error: #ff9a90;
  --error-fondo: #2b1b19;
  --exito: #6fdc9b;
  --exito-fondo: #0f2318;
  --atencion: #fdba74;        /* 9,56:1 sobre su fondo */
  --atencion-fondo: #2a1f10;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.7);
}

* { box-sizing: border-box; }

/* El sprite de iconos no ocupa lugar. Estaba como style= en el HTML y se movió
   acá por la CSP: era el ÚNICO estilo en línea de todo el proyecto, y sacarlo
   permite prohibir los estilos en línea sin excepciones (ver
   config/middleware.py). Una excepción abierta se aprovecha para inyectar. */
.sprite { position: absolute; }

/* Las tres anclas fijas del formulario (barra de arriba, nombre de la plantilla
   y barra de acción de abajo) tapaban el campo recién enfocado cuando se navega
   con Tab: el navegador lo scrollea hasta el borde del viewport, que es
   justamente donde están las barras. Con esto queda siempre a la vista. */
html {
  scroll-padding-top: calc(var(--alto-barra) + var(--e7));
  scroll-padding-bottom: 80px;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 100% y no 16px: quien agranda la letra en la configuración del navegador
     —cosa que hace buena parte del público de este producto— vería ese ajuste
     cancelado por un valor fijo. Todo lo demás ya está en rem y escala solo. */
  font-size: 100%;
  line-height: 1.5;
}

/* Enlace de salto: fuera de pantalla hasta que recibe el foco. No se usa
   `display:none` ni `visibility:hidden` porque eso también lo saca del orden de
   tabulación, que es justamente para lo que existe. */
.saltar {
  position: absolute;
  left: var(--e2);
  top: -60px;
  z-index: 10;
  padding: var(--e2) var(--e4);
  background: var(--acento);
  color: var(--acento-texto);
  border-radius: var(--radio);
  text-decoration: none;
  transition: top 120ms ease-out;
}

.saltar:focus { top: var(--e2); }

/* main recibe el foco al saltar, pero no tiene que dibujar contorno por eso:
   el contorno es para lo que se navega, no para el destino de un salto. */
main:focus { outline: none; }

/* --- 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; }

/* Lo de la derecha de la barra: el acceso a las cuentas del estudio y el salir. */
.acciones-barra {
  display: flex;
  align-items: center;
  gap: var(--e4);
}

.enlace-barra {
  color: var(--suave);
  text-decoration: none;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.enlace-barra:hover { color: var(--acento); text-decoration: underline; }

/* Privada o del estudio, al subir. Los radios van en línea porque son dos
   opciones cortas: apilarlos les daría un peso que no tienen. */
.ambito {
  border: none;
  margin: 0 0 var(--e4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e5);
}

.ambito legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--e2);
  font-size: 0.875rem;
  color: var(--suave);
}

.ambito label {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.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;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2) var(--e4);
}

/* Empuja los legales a la derecha cuando hay lugar; con el usuario abajo en
   pantalla angosta, el flex-wrap los apila solos. */
.pie-legales { margin-left: auto; }
.pie-legales a { color: inherit; text-decoration: none; }
.pie-legales a:hover { color: var(--acento); text-decoration: underline; }

/* Cambiar el nombre de la plantilla. Va plegado porque no es a lo que la persona
   vino: vino a completar el formulario. Abierto le robaría atención al campo que
   sigue, y cerrado igual se encuentra cuando se lo busca. */
.renombrar {
  margin: 0 0 var(--e5);
  font-size: 0.9rem;
}

.renombrar summary {
  cursor: pointer;
  color: var(--suave);
  padding: var(--e1) 0;
}

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

.renombrar form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e2) var(--e3);
  margin-top: var(--e3);
}

.renombrar label { flex: 100%; margin: 0; }
.renombrar input[type="text"] { flex: 1 1 260px; width: auto; }

/* --- Páginas legales --------------------------------------------------- */
/* Texto largo para leer, no para escanear: medida corta y buen interlineado.
   Son las únicas páginas del sistema que alguien va a leer de arriba abajo. */
.legal {
  max-width: 62ch;
  margin: 0 auto var(--e7);
}

.legal h2 {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
}

.legal h3 { margin-top: var(--e5); font-size: 1rem; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { padding-left: var(--e5); }
.legal li { margin-bottom: var(--e2); }

.legal-fecha {
  color: var(--suave);
  font-size: 0.875rem;
  margin-top: calc(var(--e2) * -1);
}

/* 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.atencion {
  border-color: var(--atencion);
  background: var(--atencion-fondo);
  color: var(--atencion);
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
}

.aviso.atencion .icono { margin-top: 3px; }

.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-control);
  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,
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible,
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);
  /* Control, no caja decorativa: va con el borde que se ve. */
  border: 1px solid var(--borde-control);
  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; }

/* Reiniciar la contraseña, en la lista de cuentas del estudio. Comparte caja con
   .quitar para que los dos botones de la fila queden parejos, pero no hereda su
   color de peligro: esto devuelve el acceso, no lo quita. */
.reiniciar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: color 120ms ease-out, border-color 120ms ease-out;
}

.reiniciar:hover { color: var(--acento); border-color: var(--borde-fuerte); }

/* 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); }

/* Un pixel hacia abajo al apretar. Es lo único que se toma de las skills de
   estética «premium», porque no es decoración: en una conexión lenta es la
   única señal de que el click entró y evita que la persona apriete de nuevo. */
button:active:not([disabled]), .boton:active { transform: translateY(1px); }
/* Sin `opacity` a propósito. Este botón no está inactivo: está OCUPADO, y el
   usuario le está leyendo «Generando documento…» mientras espera. Bajarle la
   opacidad al conjunto mezclaba texto y fondo con la página y dejaba ese texto
   en 3,27:1, por debajo del mínimo, justo en el momento en que más se mira.
   Que no se puede tocar ya lo dicen el cursor y el propio texto del botón. */
button.primario[disabled] { 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); }

/* El botón de tema. Cuadrado y sin texto: al lado de "Salir" compite por un
   espacio que en el celular no sobra, y el ícono ya dice cuál está puesto. El
   nombre del estado va en aria-label, que lo pone app.js. */
.boton-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  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-tema:hover { color: var(--acento); border-color: var(--borde-fuerte); }

.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; }
}