/*
  Loadfactur — la demo de la sección final.

  Una capa más sobre estilo.css, con los mismos colores y la misma letra. Aquí
  está dibujado cada estado de la demo; demo.js sólo cambia `data-fase` y
  `data-estado`. Si este fichero no carga, la sección sigue siendo legible: el
  texto y el correo de siempre.

  Del movimiento valen las reglas de movimiento.css: sólo `transform`,
  `opacity` y `clip-path`, y todo dentro de `prefers-reduced-motion:
  no-preference`. Hay una excepción, y es esta: el barrido de la factura que se
  está leyendo se repite, porque dura lo que dura la espera de verdad. Acaba
  cuando llega el resultado y no vuelve.
*/

:root {
  /* Lo que significa algo tiene su color, y no es el de la marca. */
  --aviso: #8a5a00;
  --falla: #b3261e;
}

/* Las mismas dos listas que en estilo.css: el sistema y la elección del botón.
   Si cambias una, cambia la otra (pruebas/tema.test.js lo comprueba). */
@media (prefers-color-scheme: dark) {
  :root:not(.claro) {
    --aviso: #e6b865;
    --falla: #f2a29c;
  }
}

:root.oscuro {
  --aviso: #e6b865;
  --falla: #f2a29c;
}

.cierre [hidden] {
  display: none !important;
}

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.prueba {
  margin-top: 2rem;
}

.prueba > .entradilla {
  max-width: 62ch;
}

/* ---------------- la mesa ---------------- */

.prueba-mesa {
  display: grid;
  gap: 1.4rem 2.4rem;
  margin-top: 1.8rem;
  align-items: start;
}

@media (min-width: 52rem) {
  .prueba-mesa {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }

  .prueba-privacidad {
    grid-column: 1 / -1;
  }
}

/* El papel donde se sueltan las facturas: el mismo gesto que la factura de la
   portada, con su esquina doblada. */
.prueba-suelta {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 2.4rem 1.6rem 2.2rem;
  text-align: center;
  cursor: pointer;
  background: var(--papel-2);
  border: 1.5px dashed color-mix(in srgb, var(--sello) 42%, var(--borde));
  border-radius: 0.6rem;
  box-shadow: var(--sombra);
}

.prueba-suelta::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 1.7rem;
  height: 1.7rem;
  /* Lo que queda fuera del papel es el fondo de la sección; la solapa, la tinta. */
  background: linear-gradient(225deg, var(--sello-suave) 50%, color-mix(in srgb, var(--sello) 18%, var(--papel-2)) 50%);
  border-bottom-left-radius: 0.3rem;
}

.prueba-suelta:hover,
.prueba-suelta:focus-within,
.prueba-suelta.es-arrastre {
  border-style: solid;
  border-color: var(--sello);
  background: color-mix(in srgb, var(--sello) 5%, var(--papel-2));
}

.prueba-suelta:focus-within {
  outline: 2px solid var(--sello);
  outline-offset: 3px;
}

.prueba-suelta-icono {
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: var(--sello);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prueba-suelta-titulo {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.prueba-suelta-sub {
  max-width: 34ch;
  font-size: 0.9rem;
  color: var(--niebla);
}

.prueba-suelta-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

/* «Hacer una foto» sólo tiene sentido donde hay cámara a mano: el móvil. Y
   «pegar con Ctrl+V», donde hay teclado. */
.prueba-solo-tactil,
.prueba-solo-raton {
  display: none;
}

@media (pointer: coarse) {
  .prueba-solo-tactil {
    display: inline-flex;
  }
}

@media (hover: hover) and (pointer: fine) {
  .prueba-solo-raton {
    display: inline;
  }
}

/* Con facturas ya en pantalla, la mesa se encoge: lo importante es lo leído. */
.prueba-mesa.es-compacta {
  margin-top: 1.4rem;
}

.prueba-mesa.es-compacta .prueba-suelta {
  grid-auto-flow: column;
  justify-content: start;
  justify-items: start;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.2rem;
  text-align: left;
}

.prueba-mesa.es-compacta .prueba-suelta-icono {
  width: 1.7rem;
  height: 1.7rem;
}

.prueba-mesa.es-compacta .prueba-suelta-titulo {
  font-size: 1.05rem;
}

.prueba-mesa.es-compacta .prueba-suelta-sub,
.prueba-mesa.es-compacta .prueba-privacidad {
  display: none;
}

.prueba-mesa.es-compacta .prueba-suelta-botones {
  margin: 0 0 0 auto;
}

.prueba-mesa.es-ocupada .prueba-suelta,
.prueba-mesa.es-ocupada .prueba-muestras {
  opacity: 0.55;
  pointer-events: none;
}

/* ---------------- las muestras ---------------- */

.prueba-muestras-texto {
  font-size: 0.92rem;
  color: var(--tinta-media);
}

.prueba-muestras-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

/* Tres papeles tirados en la mesa, cada uno a su manera. */
.prueba-muestra {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--tinta-media);
  background: none;
  border: 0;
  cursor: pointer;
}

.prueba-muestra img {
  display: block;
  width: 4rem;
  height: 5.3rem;
  object-fit: cover;
  border: 1px solid var(--borde);
  border-radius: 0.25rem;
  box-shadow: var(--sombra);
  rotate: -3deg;
}

.prueba-muestras-lista li:nth-child(2) .prueba-muestra img {
  rotate: 2.5deg;
}

.prueba-muestras-lista li:nth-child(3) .prueba-muestra img {
  rotate: -1deg;
}

.prueba-muestra-foto {
  position: relative;
  display: block;
}

/* La lupa dice que la foto se abre: sin ella, una miniatura parece un adorno. */
.prueba-muestra-lupa {
  position: absolute;
  right: -0.45rem;
  bottom: -0.35rem;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0.3rem;
  fill: none;
  stroke: var(--sobre-sello);
  stroke-width: 2.2;
  stroke-linecap: round;
  background: var(--sello);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--papel-2);
}

.prueba-muestra:hover .prueba-muestra-lupa {
  background: var(--sello-vivo);
}

.prueba-muestra:hover {
  color: var(--tinta);
}

.prueba-muestra:hover img {
  rotate: 0deg;
  border-color: var(--sello);
}

.prueba-privacidad {
  max-width: 64ch;
  font-size: 0.82rem;
  color: var(--niebla);
}

.prueba-privacidad strong {
  font-weight: 600;
  color: var(--tinta-media);
}

.prueba-privacidad a {
  color: inherit;
}

/* Nunca `display: none`: Turnstile no se ejecuta en un contenedor escondido. */
.prueba-turnstile {
  margin-top: 1rem;
}

/* ---------------- un error de toda la subida ---------------- */

.prueba-error {
  margin-top: 1.4rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--falla) 40%, var(--borde));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--falla) 9%, var(--papel-2));
}

.prueba-error-texto {
  font-weight: 600;
}

.prueba-error-que {
  margin-top: 0.15rem;
  font-size: 0.92rem;
  color: var(--tinta-media);
}

.prueba-error a {
  color: inherit;
}

/* ---------------- las facturas leídas ---------------- */

.lecturas {
  display: grid;
  gap: 1rem;
  margin-top: 1.6rem;
}

.lecturas:empty {
  display: none;
}

.lectura {
  display: grid;
  grid-template-columns: minmax(0, 7.2rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.3rem;
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: 0.7rem;
  box-shadow: var(--sombra);
}

/* En el móvil la miniatura se queda a un lado del nombre y los datos usan todo
   el ancho; con ella al lado, las cifras no cabrían y se partirían. */
@media (max-width: 39.99rem) {
  .lectura {
    grid-template-columns: 4.4rem minmax(0, 1fr);
    grid-template-areas:
      "doc cabecera"
      "facturas facturas";
    gap: 0.9rem 1rem;
    padding: 1rem;
  }

  .lectura-doc {
    grid-area: doc;
  }

  .lectura-cuerpo {
    display: contents;
  }

  .lectura-cabecera {
    grid-area: cabecera;
    align-self: center;
  }

  .lectura-facturas {
    grid-area: facturas;
    margin-top: 0;
  }

  .factura-campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lectura-doc {
  position: relative;
  align-self: start;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 0.3rem;
}

.lectura-miniatura {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lectura-pdf {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46%;
  fill: none;
  stroke: var(--niebla);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La línea de lectura. Quieta, no se ve: sólo existe mientras se lee. */
.lectura-barrido {
  position: absolute;
  inset: 0;
  display: none;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    color-mix(in srgb, var(--sello) 24%, transparent) calc(100% - 2px),
    var(--sello) calc(100% - 2px)
  );
  transform: translateY(-100%);
}

.lectura[data-estado="leyendo"] .lectura-barrido {
  display: block;
}

.lectura-cuerpo {
  min-width: 0;
}

.lectura-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
}

.lectura-nombre {
  min-width: 0;
  overflow: hidden;
  font-size: 0.76rem;
  color: var(--niebla);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lectura-estado {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--niebla);
}

.lectura[data-estado="error"] .lectura-estado {
  color: var(--falla);
}

.lectura-facturas {
  display: grid;
  gap: 1.4rem;
  margin-top: 0.7rem;
}

.lectura-error {
  font-size: 0.94rem;
  color: var(--tinta-media);
}

.lectura-error b {
  display: block;
  color: var(--tinta);
  font-weight: 600;
}

/* ---------------- una factura ---------------- */

.factura-leida + .factura-leida {
  padding-top: 1.4rem;
  border-top: 1px dashed var(--borde);
}

.factura-campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem 1.3rem;
  margin: 0;
}

.factura-fila {
  min-width: 0;
}

.factura-fila[data-clave="proveedor"] {
  grid-column: span 2;
}

.factura-campos dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--niebla);
}

.factura-campos dd {
  margin: 0.1rem 0 0;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

.factura-campos dd.es-cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.factura-campos dd.es-fuerte {
  font-weight: 600;
}

/* Lo que no está en el papel se deja vacío, y se ve que está vacío: es la
   promesa de todo esto. */
.factura-campos dd.es-vacio {
  font-size: 0.86rem;
  font-style: italic;
  color: var(--niebla);
}

.factura-veredicto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin-top: 1rem;
}

.factura-chip {
  padding: 0.18em 0.7em;
  font-family: var(--mono);
  font-size: 0.78rem;
  border-radius: 999px;
  color: var(--niebla);
  background: color-mix(in srgb, var(--niebla) 14%, transparent);
}

.factura-chip.es-cuadra {
  color: var(--cuadra);
  background: color-mix(in srgb, var(--cuadra) 14%, transparent);
}

.factura-chip.es-revisa {
  color: var(--aviso);
  background: color-mix(in srgb, var(--aviso) 15%, transparent);
}

.factura-chip.es-falta,
.factura-chip.es-poco_legible {
  color: var(--falla);
  background: color-mix(in srgb, var(--falla) 13%, transparent);
}

.factura-extra {
  font-size: 0.84rem;
  color: var(--niebla);
}

.factura-avisos {
  display: grid;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.factura-avisos li {
  padding-left: 0.8rem;
  font-size: 0.9rem;
  color: var(--tinta-media);
  border-left: 2px solid var(--aviso);
}

.factura-avisos li.es-falta {
  border-left-color: var(--falla);
}

.factura-avisos:empty,
.factura-notas:empty,
.factura-extra:empty {
  display: none;
}

.factura-notas {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--niebla);
}

/* El «¿La das por buena?» de la portada, con el mismo «Sí». */
.factura-revision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--borde);
}

.factura-pregunta {
  font-size: 0.93rem;
  color: var(--tinta-media);
}

.factura-si {
  padding: 0.34rem 1.1rem;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--sobre-sello);
  background: var(--sello);
  border: 0;
  border-radius: 0.45rem;
  cursor: pointer;
}

.factura-si:hover {
  background: var(--sello-vivo);
}

.factura-hecha {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--cuadra);
}

.factura-hecha svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.factura-leida.es-revisada .factura-pregunta,
.factura-leida.es-revisada .factura-si {
  display: none;
}

.factura-leida:not(.es-leida) .factura-revision,
.factura-leida:not(.es-leida) .factura-veredicto {
  display: none;
}

/* ---------------- así llega a tu programa ---------------- */

.programas {
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}

.programas-intro {
  max-width: 66ch;
  font-size: 0.95rem;
  color: var(--tinta-media);
}

.programas-pestanas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 1.2rem;
  padding: 0.25rem;
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: 0.65rem;
}

.programas-pestana {
  padding: 0.45rem 0.95rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tinta-media);
  background: none;
  border: 0;
  border-radius: 0.45rem;
  cursor: pointer;
}

.programas-pestana:hover {
  color: var(--tinta);
}

.programas-pestana[aria-selected="true"] {
  color: var(--sobre-sello);
  background: var(--sello);
}

.fichero {
  margin-top: 1rem;
  overflow: hidden;
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: 0.6rem;
  box-shadow: var(--sombra);
}

.fichero-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding: 0.65rem 1rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--niebla);
  background: color-mix(in srgb, var(--papel) 55%, var(--papel-2));
  border-bottom: 1px solid var(--borde);
}

.fichero-cabecera b {
  color: var(--tinta);
  font-weight: 600;
}

/* El fichero tal cual: una línea por registro, sin partir. Se desliza hacia un
   lado porque un registro de a3 mide 256 posiciones y uno de ContaPlus 1.406. */
.fichero-cuerpo {
  max-height: 15rem;
  margin: 0;
  padding: 0.8rem 1rem;
  overflow: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--tinta);
  white-space: pre;
  tab-size: 4;
  counter-reset: registro;
}

.fichero-linea {
  display: block;
  counter-increment: registro;
}

.fichero-linea::before {
  content: counter(registro);
  display: inline-block;
  width: 1.8rem;
  margin-right: 1rem;
  text-align: right;
  color: var(--niebla);
  user-select: none;
}

.fichero-aparte {
  padding: 0.7rem 1rem 0.2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--niebla);
  border-top: 1px solid var(--borde);
}

.fichero-excluidas {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0.8rem 1rem 1rem;
  list-style: none;
  border-top: 1px solid var(--borde);
}

.fichero-excluidas li {
  padding-left: 0.8rem;
  font-size: 0.88rem;
  color: var(--tinta-media);
  border-left: 2px solid var(--aviso);
}

.fichero-excluidas b {
  color: var(--tinta);
  font-weight: 600;
}

.fichero-vacio {
  padding: 1rem;
  font-size: 0.92rem;
  color: var(--tinta-media);
}

.fichero .tabla-envoltorio {
  margin: 0;
  padding: 0 1rem 0.6rem;
}

.fichero table {
  min-width: 36rem;
  font-size: 0.84rem;
}

.programas-descarga {
  margin-top: 0.9rem;
  max-width: 66ch;
  font-size: 0.9rem;
  color: var(--tinta-media);
}

.programas-descarga:empty {
  display: none;
}

#prueba-descargar {
  margin-top: 0.9rem;
}

/* Bloqueado: se ve el candado y no parece un botón listo para descargar, pero se
   puede pulsar: lleva al formulario, que es lo que lo desbloquea. */
.boton-candado {
  display: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#prueba-descargar.es-bloqueado {
  color: var(--tinta);
  background: var(--papel-2);
  border: 1px dashed color-mix(in srgb, var(--sello) 55%, var(--borde));
}

#prueba-descargar.es-bloqueado:hover {
  background: var(--sello-suave);
}

#prueba-descargar.es-bloqueado .boton-candado {
  display: inline-block;
}

.contacto-excel {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tinta);
}

/* ---------------- hablamos ---------------- */

.contacto {
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}

.contacto h3 {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.2;
}

.contacto-intro {
  max-width: 58ch;
  margin-top: 0.6rem;
  color: var(--tinta-media);
}

.contacto-rejilla {
  display: grid;
  gap: 1rem 1.2rem;
  max-width: 44rem;
  margin-top: 1.4rem;
}

@media (min-width: 40rem) {
  .contacto-rejilla {
    grid-template-columns: 1fr 1fr;
  }
}

.contacto-campo {
  display: grid;
  gap: 0.3rem;
}

.contacto-campo span {
  font-size: 0.84rem;
  color: var(--tinta-media);
}

.contacto-campo span i {
  font-style: normal;
  color: var(--niebla);
}

.contacto-campo input {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: 0.97rem;
  color: var(--tinta);
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
}

.contacto-campo input:hover {
  border-color: color-mix(in srgb, var(--sello) 40%, var(--borde));
}

.contacto-campo input:focus-visible {
  outline: 2px solid var(--sello);
  outline-offset: 1px;
  border-color: var(--sello);
}

.contacto-campo input[aria-invalid="true"] {
  border-color: var(--falla);
}

.contacto-consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 44rem;
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--tinta-media);
  cursor: pointer;
}

.contacto-consentimiento input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--sello);
}

.contacto-error {
  max-width: 44rem;
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: var(--falla);
}

.contacto-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin-top: 1.3rem;
}

.contacto-acciones .nota {
  max-width: 44ch;
  font-size: 0.82rem;
  color: var(--niebla);
}

.contacto-acciones .nota a {
  color: inherit;
}

.contacto-acciones button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.contacto-hecho {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.6rem;
  padding: 1.2rem 1.4rem;
  background: color-mix(in srgb, var(--cuadra) 10%, var(--papel-2));
  border: 1px solid color-mix(in srgb, var(--cuadra) 35%, var(--borde));
  border-radius: 0.7rem;
}

.contacto-hecho svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--cuadra);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------- el visor: una factura en grande ---------------- */

.lectura-doc.es-ampliable {
  cursor: zoom-in;
}

.lectura-doc.es-ampliable:hover {
  border-color: var(--sello);
}

html:has(.visor[open]) {
  overflow: hidden;
}

.visor {
  width: min(62rem, 100% - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  overflow: hidden;
  color: var(--tinta);
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: 0.8rem;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.55);
}

.visor::backdrop {
  background: color-mix(in srgb, var(--tinta) 72%, transparent);
  backdrop-filter: blur(3px);
}

.visor [hidden] {
  display: none !important;
}

.visor-contenido {
  display: grid;
  gap: 0.9rem;
  max-height: calc(100dvh - 1.5rem);
  padding: 1rem 1.1rem 1.1rem;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.visor-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.visor-titulo {
  font-size: 1.25rem;
  line-height: 1.2;
}

.visor-nota {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--tinta-media);
}

.visor-nota:empty {
  display: none;
}

.visor-cerrar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  color: var(--tinta-media);
  background: none;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  cursor: pointer;
}

.visor-cerrar:hover {
  color: var(--tinta);
  border-color: var(--sello);
}

.visor-cerrar svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* El marco aguanta la foto entera a la altura que deja la ventana; al verla al
   100 % se desliza dentro de él. */
.visor-marco {
  min-height: 0;
  overflow: auto;
  text-align: center;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  overscroll-behavior: contain;
}

.visor-imagen {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 12rem);
  width: auto;
  height: auto;
  margin: 0 auto;
  cursor: zoom-in;
}

.visor-marco.es-ampliada .visor-imagen {
  max-width: none;
  max-height: none;
  margin: 0;
  cursor: zoom-out;
}

.visor-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

@media (max-width: 39.99rem) {
  .visor-pie .boton {
    flex: 1 1 10rem;
  }
}

/* ---------------- el movimiento ---------------- */

@media (prefers-reduced-motion: no-preference) {
  .prueba-suelta,
  .prueba-muestra img {
    transition:
      transform 220ms var(--llegada, ease-out),
      rotate 220ms var(--llegada, ease-out),
      border-color 130ms ease,
      background-color 130ms ease;
  }

  .prueba-suelta.es-arrastre {
    transform: translateY(-3px);
    rotate: -0.4deg;
  }

  .prueba-muestra:hover img {
    transform: translateY(-3px);
  }

  .prueba-muestra:active img {
    transform: translateY(-1px) scale(0.97);
  }

  .lectura {
    animation: lectura-entra 420ms var(--llegada, ease-out) both;
  }

  /* El barrido, mientras se lee. La única animación que se repite. */
  .lectura[data-estado="leyendo"] .lectura-barrido {
    animation: barrido 1.5s var(--viaje, ease-in-out) infinite alternate;
  }

  /* Los campos entran en cola, de arriba abajo, y detrás el veredicto. */
  .lectura[data-estado="leida"] .factura-fila {
    animation: campo-entra 380ms var(--llegada, ease-out) both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }

  .lectura[data-estado="leida"] .factura-chip {
    animation: chip-entra 320ms var(--llegada, ease-out) both;
    animation-delay: calc(var(--n, 8) * 55ms + 120ms);
  }

  .lectura[data-estado="leida"] .factura-avisos li,
  .lectura[data-estado="leida"] .factura-extra,
  .lectura[data-estado="leida"] .factura-revision {
    animation: campo-entra 380ms var(--llegada, ease-out) both;
    animation-delay: calc(var(--n, 8) * 55ms + 260ms);
  }

  /* El «Sí.» se estampa, como un sello. */
  .factura-leida.es-revisada .factura-hecha {
    animation: sello 360ms var(--llegada, ease-out) both;
  }

  .factura-si:active {
    scale: 0.96;
  }

  /* El fichero sale como el papel de una impresora: de arriba abajo. */
  .fichero-cuerpo,
  .fichero .tabla-envoltorio {
    animation: papel-sale 520ms var(--llegada, ease-out) both;
  }

  .programas,
  .contacto,
  .contacto-hecho {
    animation: campo-entra 480ms var(--llegada, ease-out) both;
  }

  .visor[open] {
    animation: visor-entra 260ms var(--llegada, ease-out) both;
  }

  .visor[open]::backdrop {
    animation: velo-entra 260ms ease-out both;
  }

  @keyframes visor-entra {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.98);
    }
  }

  @keyframes velo-entra {
    from {
      opacity: 0;
    }
  }

  @keyframes lectura-entra {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  @keyframes barrido {
    to {
      transform: translateY(0);
    }
  }

  @keyframes campo-entra {
    from {
      opacity: 0;
      transform: translateY(5px);
    }
  }

  @keyframes chip-entra {
    from {
      opacity: 0;
      transform: scale(0.88);
    }
  }

  @keyframes sello {
    from {
      opacity: 0;
      transform: scale(1.6);
    }
  }

  @keyframes papel-sale {
    from {
      clip-path: inset(0 0 100% 0);
    }
    to {
      clip-path: inset(0);
    }
  }
}