/* La hoja del formulario de artes (rolandimpresores.com/hola) y de su página de estado y su política. Es el aspecto de la tienda
   (apps/tienda/public/tienda.css): el mismo fondo, UN solo azul noche, Bricolage Grotesque para títulos y botones y Figtree para el texto, pero sin
   depender de ella: los valores están copiados aquí. Los colores, las letras y las medidas se definen UNA vez, en :root; el resto solo usa
   las variables (test/hola-estatico.test.js revisa que no haya un color suelto). Sin degradados, sin mayúsculas espaciadas, sin animaciones que
   estorben. El celular es lo primero: una columna de hasta 560 px, centrada en el computador, sin barra horizontal desde 320 px.
   Para celulares viejos (Chrome 61): las pilas verticales son de grid (grid-gap), no de flex con gap, que llegó mucho después; y nada de
   `inset`. Las filas con espacio entre sus partes usan márgenes. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/hola/fuentes/bricolage-grotesque-5.3.0-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/hola/fuentes/figtree-5.3.0-latin.woff2') format('woff2');
}

:root {
  /* La interfaz: un solo color, el azul noche, y los textos en tres grises. */
  --fondo: #FAF9F6;
  --superficie: #FFFFFF;
  --noche: #0E1030;
  --enlace: #282870;
  --texto: #1A1A2E;
  --texto-2: #3D3D52;
  --texto-3: #55556A;
  --gris: #E3E2EC;
  --sobre-noche: #FFFFFF;
  --borde: rgba(40, 40, 112, .14);
  --borde-campo: rgba(40, 40, 112, .25);
  --borde-suave: rgba(40, 40, 112, .10);
  --borde-punteado: rgba(40, 40, 112, .35);
  --fondo-suave: rgba(40, 40, 112, .05);
  /* Verde solo para «Listo» y ámbar solo para avisos y errores. */
  --bien-texto: #1E6B44;
  --bien-fondo: #E3F3EA;
  --ambar-texto: #7A4B00;
  --ambar-fondo: #FFF4DB;
  --sombra-tarjeta: 0 1px 2px rgba(14, 16, 48, .06);
  --letra-titulo: 'Bricolage Grotesque', 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --letra-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radio-tarjeta: 12px;
  --radio-boton: 10px;
  --alto-boton: 48px;
  --toque: 44px;
  --ancho-columna: 560px;
}

/* --- Base --- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra-texto);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--enlace); }
a:hover { color: var(--noche); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--noche); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Una pila vertical: cada hijo en su fila, con el espacio de --pila entre ellos. */
.pila, .contenido, .encabezado, .tarjeta--columna, .formulario, .campo, .grupo, .desplegable-cuerpo, .archivos, .avance, .pie, .confirmacion,
.lista-simple, .acciones, .lineas, .legal, .zona-archivos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: var(--pila, 16px);
  align-content: start;
}

/* --- La estructura --- */

.aviso-prueba { margin: 0; padding: 6px 16px; background: var(--ambar-fondo); color: var(--ambar-texto); font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; }
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.cabecera-dentro { width: 100%; max-width: var(--ancho-columna); margin: 0 auto; padding: 6px 16px; }
.logo { display: flex; align-items: center; min-height: var(--toque); }
.logo img { height: 30px; width: auto; }
.contenido { flex: 1; width: 100%; max-width: var(--ancho-columna); margin: 0 auto; padding: 20px 16px 32px; }
.encabezado { --pila: 6px; }
.titulo-1 { font-family: var(--letra-titulo); font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--noche); }
.titulo-2 { font-family: var(--letra-titulo); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--noche); }
.titulo-3 { font-size: 16px; font-weight: 700; color: var(--texto); }
.bajada { font-size: 17px; line-height: 1.45; color: var(--texto-2); }
.texto-chico { font-size: 14px; line-height: 1.4; color: var(--texto-3); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta); padding: 16px; }

/* --- Campos --- */

.campo { --pila: 6px; font-size: 15px; font-weight: 600; color: var(--texto-2); }
.campo-opcional { font-weight: 400; color: var(--texto-3); }
.campo-ayuda { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--texto-3); }
.campo-error { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ambar-texto); }
.entrada {
  width: 100%;
  height: var(--alto-boton);
  padding: 0 14px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-boton);
  background: var(--superficie);
  font-family: var(--letra-texto);
  font-size: 16px;
  font-weight: 400;
  color: var(--texto);
}
.entrada--selector { padding: 0 10px; }
.entrada--area { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.4; resize: vertical; }
.entrada::placeholder { color: var(--texto-3); }
.entrada:focus { outline: 2px solid var(--noche); outline-offset: 1px; }
.entrada[aria-invalid="true"] { border: 2px solid var(--ambar-texto); padding-left: 13px; padding-right: 13px; }
.entrada--selector[aria-invalid="true"] { padding-left: 9px; padding-right: 9px; }
.entrada--area[aria-invalid="true"] { padding-top: 11px; padding-bottom: 11px; }
.campos-2 { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 16px; align-items: end; }
@media (min-width: 340px) { .campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pila--junta { --pila: 6px; }
.turnstile:empty { display: none; }

/* Una pregunta de Sí / No: dos fichas que son botones de opción de verdad (el foco y las flechas funcionan). */
.grupo { --pila: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.grupo > legend { padding: 0; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--texto-2); }
.fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 8px; }
.ficha { position: relative; display: block; cursor: pointer; }
.ficha input { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ficha-cuerpo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--alto-boton);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-boton);
  background: var(--superficie);
  color: var(--texto-2);
  font-size: 16px;
  font-weight: 600;
}
.ficha input:checked + .ficha-cuerpo { background: var(--noche); border-color: var(--noche); color: var(--sobre-noche); font-weight: 700; }
.ficha input:focus + .ficha-cuerpo { outline: 2px solid var(--noche); outline-offset: 2px; }
.grupo--error .ficha-cuerpo { border: 2px solid var(--ambar-texto); }

.casilla { display: flex; align-items: flex-start; min-height: var(--toque); padding: 8px 0; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--texto); cursor: pointer; }
.casilla input { flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 10px 0 0; accent-color: var(--noche); }

/* «Detalles de impresión (opcional)»: plegado, para que el formulario no se vea largo. */
.desplegable { border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); background: var(--superficie); }
.desplegable > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--alto-boton); padding: 0 14px; list-style: none; font-size: 16px; font-weight: 600; color: var(--texto); cursor: pointer; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after { content: ''; flex: 0 0 8px; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: rotate(45deg); }
.desplegable[open] > summary::after { transform: rotate(-135deg); }
.desplegable-cuerpo { padding: 4px 14px 16px; }

/* --- Botones --- */

.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--alto-boton);
  padding: 0 20px;
  border: none;
  border-radius: var(--radio-boton);
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}
.boton--primario { background: var(--noche); color: var(--sobre-noche); }
.boton--primario:hover { color: var(--sobre-noche); }
.boton--secundario { background: var(--superficie); color: var(--noche); border: 1.5px solid var(--noche); font-size: 16px; }
.boton--secundario:hover { color: var(--noche); }
.boton--texto { height: auto; min-height: var(--toque); padding: 0 4px; background: transparent; color: var(--enlace); font-family: var(--letra-texto); font-weight: 600; font-size: 15px; text-decoration: underline; }
.boton--ancho { width: 100%; }
.boton:active { opacity: .85; }
.boton[aria-disabled="true"], .boton:disabled { background: var(--gris); color: var(--texto-3); border-color: transparent; cursor: default; }
.boton[aria-busy="true"] { cursor: progress; }

/* --- Los archivos --- */

.zona-archivos { --pila: 8px; justify-items: center; padding: 18px 14px; border: 1.5px dashed var(--borde-punteado); border-radius: var(--radio-tarjeta); background: var(--fondo-suave); text-align: center; }
.zona-archivos--sobre { border-color: var(--noche); background: var(--superficie); }
.zona-archivos--error { border-color: var(--ambar-texto); }
.zona-archivos .archivo { width: 100%; max-width: 280px; }
.archivo { position: relative; cursor: pointer; }
.archivo:focus-within { outline: 2px solid var(--noche); outline-offset: 2px; border-radius: var(--radio-boton); }
.archivo-entrada { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.arrastrar { display: none; font-size: 14px; color: var(--texto-3); }
@media (hover: hover) and (pointer: fine) { .arrastrar { display: block; } }

.archivos { --pila: 0; border: 1px solid var(--borde); border-radius: var(--radio-boton); background: var(--superficie); }
.archivos:empty { display: none; }
.archivo-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-gap: 2px 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--borde-suave); }
.archivo-fila:last-child { border-bottom: 0; }
.archivo-nombre { font-size: 15px; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.archivo-peso { font-size: 14px; color: var(--texto-3); white-space: nowrap; }
.archivo-estado { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--texto-3); }
.archivo-estado > * { margin-right: 12px; }
.archivo-estado--bien { color: var(--bien-texto); font-weight: 600; }
.archivo-estado--mal { color: var(--ambar-texto); font-weight: 600; }
.archivo-quitar { width: var(--toque); height: var(--toque); margin: -8px -10px -8px 0; border: 0; background: transparent; color: var(--texto-3); font-size: 22px; line-height: 1; }
.total { font-size: 14px; font-weight: 600; color: var(--texto-2); }
.barra { grid-column: 1 / -1; appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--gris); overflow: hidden; }
.barra::-webkit-progress-bar { background: var(--gris); border-radius: 3px; }
.barra::-webkit-progress-value { background: var(--noche); border-radius: 3px; }
.barra::-moz-progress-bar { background: var(--noche); border-radius: 3px; }
.barra--bien::-webkit-progress-value { background: var(--bien-texto); }
.barra--bien::-moz-progress-bar { background: var(--bien-texto); }

/* --- Avisos y mensajes --- */

.aviso { padding: 10px 12px; border-radius: var(--radio-boton); background: var(--ambar-fondo); color: var(--ambar-texto); font-size: 15px; font-weight: 600; line-height: 1.4; }
.aviso--bien { background: var(--bien-fondo); color: var(--bien-texto); }
.aviso-acciones { display: flex; flex-wrap: wrap; margin-top: 4px; }
.aviso-acciones > * { margin-right: 12px; }
.avance { --pila: 4px; padding: 12px 14px; border-radius: var(--radio-boton); background: var(--fondo-suave); }
.avance-titulo { font-size: 16px; font-weight: 700; color: var(--noche); }

.pie { --pila: 8px; text-align: center; font-size: 14px; color: var(--texto-3); }
.pie a { font-weight: 600; }

/* --- La confirmación y la página de estado --- */

.confirmacion { --pila: 14px; }
.lista-simple { --pila: 4px; font-size: 15px; color: var(--texto-2); }
.lista-simple li { overflow-wrap: anywhere; }
.entrada.enlace-estado { background: var(--fondo-suave); font-size: 14px; color: var(--texto-2); text-overflow: ellipsis; }
.sigue { padding-top: 14px; border-top: 1px solid var(--borde-suave); }
.acciones { --pila: 8px; }
@media (min-width: 440px) { .acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.centrado { text-align: center; }

.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; }
.paso { display: grid; grid-gap: 6px; color: var(--texto-3); }
.paso-barra { height: 6px; border-radius: 3px; background: var(--gris); }
.paso--hecho { color: var(--texto-2); }
.paso--hecho .paso-barra, .paso--actual .paso-barra { background: var(--noche); }
.paso--actual { color: var(--noche); font-weight: 700; }
.lineas { --pila: 0; }
.linea { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--borde-suave); font-size: 15px; }
.linea:last-child { border-bottom: 0; }
.linea dt { margin-right: 12px; color: var(--texto-3); }
.linea dd { text-align: right; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; white-space: pre-line; }

/* --- La prueba para aprobar (estado.js: la tarjeta arriba de los pasos) --- */

.aprobacion { --pila: 12px; }
.prueba { margin: 0; }
.prueba-imagen { width: 100%; height: auto; border: 1px solid var(--borde); border-radius: var(--radio-boton); background: var(--superficie); }
.prueba-imagen--chica { width: auto; max-width: 160px; max-height: 160px; }
.prueba-grande { justify-self: start; }
.prueba-cargando { padding: 24px 0; text-align: center; }
/* «Verla en grande»: la imagen sola, del ancho de la pantalla, con «Cerrar»; se acerca con los dedos (la página deja hacer zoom). */
.prueba--grande { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; margin: 0; padding: 64px 8px 16px; overflow: auto; background: var(--noche); }
.prueba--grande .prueba-imagen { border: 0; border-radius: 0; }
.prueba-cerrar { position: fixed; top: 10px; right: 10px; z-index: 51; height: var(--toque); }
.prueba-nota { font-size: 15px; line-height: 1.45; color: var(--texto-2); white-space: pre-line; overflow-wrap: anywhere; }
.confirmar { --pila: 10px; }
.acciones--una { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 440px) { .acciones--una { grid-template-columns: minmax(0, 220px); } }
.entrada--corta { min-height: 64px; }
.aprobacion .desplegable > summary { font-size: 15px; }
.mensajes { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 8px; margin-bottom: 12px; }
.mensaje { padding: 8px 10px; border-radius: var(--radio-boton); background: var(--fondo-suave); }
.mensaje--tuyo { border: 1px solid var(--borde); background: var(--superficie); }
.mensaje-quien { display: block; font-size: 13px; font-weight: 600; color: var(--texto-3); }
.mensaje-texto { display: block; font-size: 15px; line-height: 1.45; color: var(--texto); white-space: pre-line; overflow-wrap: anywhere; }
.pruebas-anteriores { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 12px; }

/* --- La política de datos --- */

.legal { --pila: 12px; font-size: 16px; line-height: 1.5; color: var(--texto-2); }
.legal h2 { margin-top: 8px; }
.legal ul { list-style: disc; padding-left: 22px; display: grid; grid-gap: 6px; }