/* ==========================================================================
   masc24h

   Paleta, tipografia y patrones trasladados de la maqueta del Modulo 1
   (docs/maquetas/M1_Acceso_Maqueta.html).

   Es una piel provisional: la EF-M1 deja el estilo visual pendiente de definir
   —«las maquetas fijan comportamiento, no diseno»— y el logotipo, los colores
   definitivos y la tipografia se decidiran aparte. Mientras tanto, esto evita
   que las pantallas salgan sin formato y fija los patrones que ya estan
   acordados: panel, campo, casilla, aviso y boton.
   ========================================================================== */

:root {
  /* Tinta: el azul del texto y de las acciones principales. */
  --tinta:    #16224A;
  --tinta-2:  #33416E;
  --tinta-10: #EEF0F6;

  /* Lacre: la marca y los errores. Es el rojo del sello. */
  --lacre:    #A02A22;
  --lacre-10: #F8EEED;

  /* Ambar para lo que pide atencion sin ser un error; verde para lo resuelto. */
  --ambar:    #8A5D0B;
  --ambar-10: #FBF3E4;
  --verde:    #1E5C3A;
  --verde-10: #EAF2EC;

  --papel:    #FAF9F6;
  --blanco:   #FFFFFF;
  --filete:   #E3E0D9;
  --filete-2: #F0EEE9;
  --gris:     #6B675F;
  --gris-2:   #918C83;

  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radio: 6px;
  --radio-chico: 4px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------------------------------------------------- cabecera ----- */

/* El fondo y el filete llegan de borde a borde; el contenido se centra dentro,
   alineado con el del cuerpo. */
.site-header {
  background: var(--blanco);
  border-bottom: 1px solid var(--filete);
}

.site-header-in {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 20px;
}

/* Separador elastico: empuja a la derecha lo que venga detras. */
.sp { flex: 1; }

.brand {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--tinta);
  text-decoration: none;
  flex: none;
}

.vuelta {
  font-size: 13px;
  color: var(--gris);
  text-decoration: none;
  border-bottom: 1px solid var(--filete);
  flex: none;
}

.vuelta:hover {
  color: var(--tinta);
  border-bottom-color: var(--gris-2);
}

.sesion {
  font-size: 13px;
  color: var(--tinta);
  font-weight: 600;
}

.salir { display: inline; margin: 0; }

/* ------------------------------------------------------------ cuerpo ----- */

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 4px;
}

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  margin: 0 0 4px;
}

.lead {
  margin: 0 0 20px;
  color: var(--gris);
  font-size: 13.5px;
  max-width: 72ch;
}

p { max-width: 72ch; }

/* ------------------------------------------------------------ panel ------ */

.panel {
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: var(--blanco);
  padding: 20px 22px;
  margin-bottom: 18px;
}

.panel .lead { margin-bottom: 18px; }

/* Los dos paneles del acceso: iniciar sesion y crear cuenta. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Las pantallas de una sola columna no ocupan todo el ancho: un formulario
   de 1000px de ancho se lee mal. */
.acceso > .panel,
.area > .panel { max-width: 560px; }

.duo > .panel { max-width: none; margin-bottom: 0; }

@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- formulario ----- */

.campo { display: block; margin: 0 0 14px; max-width: none; }

.campo label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gris);
  margin-bottom: 4px;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--filete);
  border-radius: var(--radio-chico);
  font: inherit;
  font-size: 14px;
  background: var(--blanco);
  color: var(--tinta);
}

select { appearance: auto; }

input:focus, select:focus {
  border-color: var(--tinta-2);
  outline: none;
}

input:disabled {
  background: var(--filete-2);
  color: var(--gris);
  cursor: not-allowed;
}

.ayuda {
  display: block;
  font-size: 11.5px;
  color: var(--gris-2);
  margin-top: 4px;
  line-height: 1.45;
}

.error {
  display: block;
  font-size: 12px;
  color: var(--lacre);
  margin-top: 4px;
  line-height: 1.45;
}

/* El campo con error se senala tambien en el borde, no solo con el texto. */
.campo:has(.error) input,
.campo:has(.error) select { border-color: var(--lacre); background: var(--lacre-10); }

/* La casilla es el propio label: la marca y su texto, uno al lado del otro.
   El texto va dentro de un span y no suelto, porque en un contenedor flex cada
   nodo de texto y cada enlace se convertirian en elementos independientes y la
   frase saldria troceada. */
.casilla {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--gris);
  line-height: 1.5;
  margin: 0;
  max-width: none;
  cursor: pointer;
}

.casilla > span {
  /* El texto fluye como un parrafo normal: se envuelve, no se reparte. */
  display: block;
  text-align: left;
}

.casilla-campo { margin: 0 0 11px; max-width: none; }

.casilla input[type="checkbox"] {
  margin: 2px 0 0;
  accent-color: var(--tinta);
  flex: none;
  width: 15px;
  height: 15px;
}

.casilla a { color: var(--tinta-2); }

/* Requisitos de la contrasena, los que la maqueta ensena mientras se escribe. */
.requisitos {
  list-style: none;
  margin: -8px 0 14px;
  padding: 0;
  font-size: 12px;
  color: var(--gris-2);
}

.requisitos li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 3px;
}

.requisitos li::before {
  content: "·";
  position: absolute;
  left: 6px;
  font-weight: 700;
}

/* ----------------------------------------------------------- botones ----- */

.btn, .btn-principal, button[type="submit"] {
  display: inline-block;
  border: 1px solid var(--filete);
  background: var(--blanco);
  color: var(--tinta);
  border-radius: var(--radio-chico);
  padding: 9px 17px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn:hover, button[type="submit"]:hover { border-color: var(--gris-2); }

.btn-principal, button.btn-principal[type="submit"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
  width: 100%;
  padding: 11px 17px;
  font-size: 15px;
}

.btn-principal:hover { background: var(--tinta-2); border-color: var(--tinta-2); }

/* En una fila de acciones los botones no ocupan todo el ancho, solo el de su
   texto. El selector del submit lleva etiqueta y atributo porque asi es el de
   arriba, que pone el 100%: con menos peso no lo gana. */
.acciones .btn-principal,
.acciones .btn,
.acciones button.btn-principal[type="submit"] { width: auto; }

/* Una sola accion, al final de la linea. */
.acciones.derecha { justify-content: flex-end; }

button:disabled, .btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.enlace {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--tinta-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.enlace:hover { color: var(--lacre); }

a { color: var(--tinta-2); text-underline-offset: 2px; }
a:hover { color: var(--lacre); }

.acciones {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
  max-width: none;
}

.acciones form { margin: 0; }

/* ------------------------------------------------------------ avisos ----- */

.msg {
  border-radius: var(--radio-chico);
  padding: 11px 14px;
  font-size: 13px;
  margin: 14px 0 0;
  line-height: 1.5;
  max-width: 72ch;
}

.msg b { font-weight: 600; }

/* Rojo lo que ha fallado, ambar lo que pide atencion, verde lo resuelto y
   tinta lo meramente informativo. Se recogen tambien los nombres que pone
   Django a sus mensajes. */
.msg-mal, .msg-error {
  background: var(--lacre-10);
  border-left: 2px solid var(--lacre);
  color: var(--lacre);
}

.msg-ojo, .msg-warning {
  background: var(--ambar-10);
  border-left: 2px solid var(--ambar);
  color: var(--ambar);
}

.msg-bien, .msg-success {
  background: var(--verde-10);
  border-left: 2px solid var(--verde);
  color: var(--verde);
}

.msg-info, .msg-debug {
  background: var(--tinta-10);
  border-left: 2px solid var(--tinta);
  color: var(--tinta-2);
}

.pie-legal {
  border-top: 1px solid var(--filete-2);
  margin-top: 18px;
  padding-top: 13px;
  font-size: 11.5px;
  color: var(--gris-2);
  line-height: 1.55;
  max-width: none;
}

.pie-legal a { color: var(--gris); }

/* --------------------------------------------------------- pie de pagina - */

.site-footer {
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px 20px 30px;
  border-top: 1px solid var(--filete);
  color: var(--gris-2);
  font-size: 12px;
}

.site-footer code {
  font-family: var(--mono);
  font-size: 11.5px;
}

@media (max-width: 620px) {
  main { padding: 22px 16px 48px; }
  .panel { padding: 17px 16px; }
  .site-header-in { gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
}

/* ------------------------------------------------------------- marca ----- */
/* Las dos piezas del logo de la web publica (home.css), en la altura que tenia
   aqui la marca: el iso a 32 px y la palabra en la misma proporcion que alli
   (24 a 52), con el hueco reducido igual. */

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand img { display: block; width: auto; flex: none; }
.brand .pal { height: 15px; }
.brand .iso { height: 32px; }

/* ------------------------------------------------------------- tablas ---- */
/* El grid de pedidos. Se desplaza dentro de su caja para que el cuerpo de la
   pagina no se mueva de lado en una pantalla estrecha. */

.tabla { overflow-x: auto; margin: 4px 0 16px; }

.tabla table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 14px;
}

.tabla th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gris-2);
  padding: 0 12px 7px 0;
  border-bottom: 1px solid var(--filete);
  white-space: nowrap;
}

.tabla td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--filete-2);
  vertical-align: top;
}

.tabla tr:last-child td { border-bottom: 0; }
.tabla .mono { font-family: var(--mono); font-size: 13px; white-space: nowrap; }

/* ------------------------------------------------- selector de localidad --- */

/* El codigo postal y la poblacion se eligen juntos, en una sola casilla. La
   lista se despliega por encima del resto del formulario, de modo que el
   contenedor es el origen de coordenadas y no puede recortar nada. */
.localidad {
  display: block;
  position: relative;
}

.localidad-lista {
  display: block;
  position: absolute;
  z-index: 20;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-radius: var(--radio-chico);
  box-shadow: 0 6px 20px rgba(22, 34, 74, .12);
}

/* El display:block de arriba pisa al atributo hidden, que el navegador aplica
   con un display:none de menos prioridad. Sin esto el recuadro vacio se veia
   siempre bajo la casilla. */
.localidad-lista[hidden] { display: none; }

.localidad-lista > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--radio-chico);
  font-size: 14px;
  cursor: pointer;
}

.localidad-lista > span.es-activa,
.localidad-lista > span:hover { background: var(--tinta-10); }

.localidad-lista b {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-2);
}

.localidad-poblacion { flex: 1; }

.localidad-provincia {
  font-size: 12px;
  color: var(--gris-2);
  white-space: nowrap;
}

/* El aviso de «sin coincidencias» no se elige ni se resalta. */
.localidad-lista .localidad-vacia {
  color: var(--gris-2);
  font-size: 13px;
  cursor: default;
}

.localidad-lista .localidad-vacia:hover { background: none; }

/* ------------------------------------------------ pasos del asistente ---- */

/* Indicador P1-P5 del asistente de pedido, trasladado de la maqueta P1-P4. El
   paso actual lleva el filete de lacre; los recorridos, la tinta; los que aun
   no se pueden abrir, atenuados. */
.pasos {
  display: flex;
  margin: 8px 0 24px;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: var(--blanco);
  overflow: hidden;
}

.paso {
  flex: 1;
  position: relative;
  padding: 11px 12px;
  border-left: 1px solid var(--filete-2);
  color: var(--gris-2);
  text-decoration: none;
}

.paso:first-child { border-left: 0; }

.paso .k {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
}

.paso .l {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}

a.paso:hover { background: var(--filete-2); }

.paso.hecho { color: var(--gris); }
.paso.hecho .l { color: var(--tinta); }

.paso.act { background: var(--tinta-10); color: var(--tinta-2); }

.paso.act::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--lacre);
}

.paso.fuera { opacity: .45; cursor: not-allowed; }

/* En pantalla estrecha quedan solo P1...P5: los cinco nombres no caben. */
@media (max-width: 760px) {
  .paso { text-align: center; }
  .paso .l { display: none; }
}

/* ------------------------------------------------- botonera del cliente --- */

/* Nuevo pedido, Mis pedidos y Mi cuenta, como en la maqueta P1-P4. El boton de
   la pantalla en la que se esta va en tinta. */
.botonera {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 20px;
}

.botonera .bt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--filete);
  border-radius: 5px;
  background: var(--blanco);
  color: var(--tinta);
  font-size: 13.5px;
  line-height: 1.2;
  text-decoration: none;
}

.botonera .bt:hover { border-color: var(--gris-2); }

.botonera .bt.on {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}

.botonera .pt {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gris-2);
  border: 1px solid var(--filete);
  border-radius: 9px;
  padding: 0 6px;
}

.botonera .bt.on .pt { color: #fff; border-color: rgba(255, 255, 255, .45); }

/* ---------------------------------------------------------- mis pedidos --- */

/* Listado de pedidos, trasladado de la maqueta P1-P4: fecha, expediente con su
   referencia y destinatario, importe, estado y acciones. */
.area > .panel:has(.pedidos) { max-width: none; }

.ped {
  display: grid;
  grid-template-columns: 88px 1fr 96px 150px 118px;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--filete-2);
  font-size: 13px;
}

.ped:first-child { border-top: 0; }

.ped .fch {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--gris-2);
  line-height: 1.35;
}

.ped .ref b { display: block; font-size: 13.5px; font-weight: 600; }
.ped .ref small { display: block; color: var(--gris-2); font-size: 11.5px; }

.ped .imp { font-family: var(--mono); font-size: 13px; text-align: right; }

.ped .acc { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.ped .acc a {
  border: 1px solid var(--filete);
  background: var(--blanco);
  border-radius: 3px;
  padding: 5px 9px;
  font-size: 12px;
  color: var(--tinta);
  text-decoration: none;
}

.ped .acc a:hover { border-color: var(--gris-2); }

.ped-vacio { margin: 0; color: var(--gris); font-size: 13.5px; }

/* «Mostrar más», tras el ultimo pedido. */
.ped-mas {
  display: flex;
  justify-content: center;
  padding-top: 14px;
  border-top: 1px solid var(--filete-2);
}

.ped-mas .btn { width: auto; }

.ped:focus { outline: none; background: var(--tinta-10); }

/* Etiqueta de estado. El color lo da Estados.estilo_cliente. */
.est {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.est.pagado { background: var(--tinta-10); color: var(--tinta-2); }
.est.pend   { background: var(--ambar-10); color: var(--ambar); }
.est.borr   { background: var(--filete-2); color: var(--gris); }
.est.fin    { background: var(--filete-2); color: var(--gris-2); }
.est.canc   { background: var(--filete-2); color: var(--gris-2); text-decoration: line-through; }

@media (max-width: 860px) {
  .ped { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .ped .imp { text-align: left; }
  .ped .acc { justify-content: flex-start; }
}

/* ------------------------------------------------------ P2 · carátula ----- */

/* Editor a la izquierda, espejo de la hoja a la derecha, como en la maqueta. */
.caratula {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
}

.caratula > .panel { max-width: none; margin-bottom: 0; }

@media (max-width: 900px) {
  .caratula { grid-template-columns: 1fr; }
}

.barra-formato {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--filete);
  border-bottom: 0;
  border-radius: var(--radio-chico) var(--radio-chico) 0 0;
  background: var(--filete-2);
}

.barra-formato button {
  width: 30px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  border-radius: 3px;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--tinta);
}

.barra-formato button:hover { background: var(--blanco); border-color: var(--filete); }
.barra-formato .sep { width: 1px; margin: 3px 4px; background: var(--filete); }

.editor,
.editor-caja textarea {
  width: 100%;
  min-height: 230px;
  padding: 14px 16px;
  border: 1px solid var(--filete);
  border-radius: 0 0 var(--radio-chico) var(--radio-chico);
  background: var(--blanco);
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
}

/* Sin JavaScript no hay barra, asi que el area de texto va redondeada entera. */
.editor-caja textarea { border-radius: var(--radio-chico); }

.editor:focus { outline: none; border-color: var(--tinta-2); }
.editor p { margin: 0 0 10px; }
.editor ul, .editor ol { margin: 0 0 10px; padding-left: 22px; }
.editor li { margin-bottom: 4px; }

/* La hoja se maqueta en milimetros —las medidas de imprenta— y se reduce hasta
   el ancho disponible. Medir el reparto se hace sobre la hoja sin reducir. */
.hojas { display: grid; gap: 16px; }

.cara { margin: 0; }

.cara figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--gris-2);
}

.cara figcaption b { font-weight: 600; color: var(--gris); }

.marco {
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border: 1px solid var(--filete);
  background: var(--blanco);
}

.hoja {
  position: absolute;
  top: 0;
  left: 0;
  width: 210mm;
  height: 297mm;
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  color: var(--tinta);
  font-size: 11pt;
  line-height: 1.45;
  overflow: hidden;
}

.hoja .tercio {
  position: relative;
  height: 99mm;
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 8mm;
  padding: 15mm 20mm 0;
  border-bottom: 1px dashed var(--filete);
}

.hoja .remite { max-width: 44%; }
.hoja .destinatario { max-width: 52%; margin-top: 25mm; }

.hoja .zona-localizador {
  margin-top: 4mm;
  padding: 4mm 3mm;
  border: 1px dashed var(--lacre);
  border-radius: 1mm;
  color: var(--lacre);
  font-size: 8pt;
  text-align: center;
}

.hoja .marca-tercio {
  position: absolute;
  right: 5mm;
  top: 4mm;
  font-family: var(--mono);
  font-size: 7pt;
  color: var(--gris-2);
}

.hoja .cuerpo { flex: 1; padding: 12mm 20mm 20mm; overflow: hidden; }
.hoja.reverso .cuerpo { padding: 20mm; }
.hoja .cuerpo p { margin: 0 0 3.5mm; }
.hoja .cuerpo ul, .hoja .cuerpo ol { margin: 0 0 3.5mm; padding-left: 7mm; }
.hoja .cuerpo li { margin-bottom: 1.6mm; }

.ocupacion { margin: 12px 0; font-size: 11.5px; color: var(--gris-2); }

/* Previsualizacion a tamano real, sobre el resto de la pantalla. */
.lupa {
  position: fixed;
  inset: 0;
  z-index: 70;
  padding: 18px;
  overflow: auto;
  background: rgba(22, 34, 74, .55);
}

.lupa-caja { width: min(760px, 92vw); margin: 0 auto; }

.lupa-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #fff;
  font-size: 13px;
}

.lupa-barra b { font-weight: 600; }
.lupa-hojas { display: grid; gap: 16px; }
.lupa .cara figcaption { color: rgba(255, 255, 255, .8); }
.lupa .cara figcaption b { color: #fff; }

.acciones .sp { flex: 1; }

/* --------------------------------------------------- P3 · documentos ------ */

.documentos {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
}

.documentos > .panel { max-width: none; margin-bottom: 0; }

@media (max-width: 900px) {
  .documentos { grid-template-columns: 1fr; }
}

.doc {
  display: grid;
  grid-template-columns: 34px 1fr 78px 96px 30px;
  gap: 11px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--filete-2);
}

.doc:first-child { border-top: 0; }
.doc form { margin: 0; }

.doc { cursor: grab; }
.doc.arrastrando { opacity: .45; }
.doc.encima { box-shadow: inset 0 2px 0 var(--lacre); }

.doc .ord { font-family: var(--mono); font-size: 12px; color: var(--gris-2); text-align: center; }
.doc .ord .numero { display: block; }

/* Las flechas son la via del teclado y la de quien no tenga JavaScript. */
.doc .flechas { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
.doc .flechas form { margin: 0; }

.doc .flechas button {
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
  color: var(--gris-2);
}

.doc .flechas button:hover:not(:disabled) { color: var(--tinta); }
.doc .flechas button:disabled { opacity: .3; }

.doc .nm { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.doc .nm small { display: block; color: var(--gris-2); font-size: 11.5px; }

.doc .pg { font-family: var(--mono); font-size: 12.5px; color: var(--gris); text-align: right; }

.doc .cara label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gris); }
.doc .cara input { accent-color: var(--tinta); }

.doc .quitar {
  border: 0;
  background: none;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: var(--gris-2);
}

.doc .quitar:hover { color: var(--lacre); }

.doc-vacio { margin: 0; color: var(--gris); font-size: 13.5px; }

.zona-subida {
  margin-top: 14px;
  padding: 18px;
  border: 1.5px dashed var(--filete);
  border-radius: var(--radio);
  text-align: center;
  color: var(--gris-2);
  font-size: 13px;
}

.zona-titulo { margin: 0 0 12px; }

/* Oculto a la vista, no a los lectores de pantalla ni al teclado. */
.fichero-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.zona-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.zona-subida .btn { width: auto; cursor: pointer; }

/* El foco del campo oculto se pinta en su etiqueta, que es lo que se ve. */
.fichero-oculto:focus-visible + .zona-acciones .btn[for="documento"] {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.elegidos { margin: 12px 0 0; font-size: 12.5px; color: var(--tinta); }

/* El contador: lo que llevas y lo que te queda hasta el limite. */
.hojas-total {
  margin: 0;
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1.1;
  color: var(--tinta);
}

.barrita {
  height: 6px;
  margin: 10px 0 6px;
  border-radius: 3px;
  background: var(--filete-2);
  overflow: hidden;
}

.barrita i { display: block; height: 100%; background: var(--tinta-2); }
.barrita.cerca i { background: var(--ambar); }
.barrita.pasa i { background: var(--lacre); }

.pie-contador { margin: 0 0 12px; font-size: 11.5px; color: var(--gris-2); line-height: 1.45; }

.resumen { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 14px 0; }
.resumen dt { font-size: 12.5px; color: var(--gris); }
.resumen dt small { color: var(--gris-2); }
.resumen dd { margin: 0; font-family: var(--mono); font-size: 12.5px; text-align: right; }

/* -------------------------------------------------------- P4 · coste ------ */

.coste {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
}

.coste > .panel { max-width: none; margin-bottom: 0; }

@media (max-width: 900px) {
  .coste { grid-template-columns: 1fr; }
}

.desglose { width: 100%; border-collapse: collapse; }

.desglose td {
  padding: 11px 0;
  border-bottom: 1px solid var(--filete-2);
  font-size: 13.5px;
  vertical-align: top;
}

.desglose td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--gris-2); }
.desglose td small.avisa { color: var(--ambar); }

.desglose .cifra {
  width: 110px;
  font-family: var(--mono);
  font-size: 13.5px;
  text-align: right;
  white-space: nowrap;
}

.desglose .base td { border-top: 1px solid var(--filete); font-weight: 600; }

.desglose .total td {
  border-bottom: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
}

.resumen dd.texto { font-family: var(--sans); font-size: 12.5px; }

/* Intentos de pago (P5): una linea por operacion con la pasarela. */
.doc.intento { grid-template-columns: 1fr 96px 120px; }


/* -------------------------------------------- P4 · espera del cobro ------- */

/* Mientras se espera la notificacion, el resto de la pantalla queda inerte y
   esto es lo unico vivo. */
.espera {
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--tinta-10);
  border-radius: var(--radio);
  background: var(--tinta-10);
}

.espera-titulo { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--tinta); }

.espera .barrita { background: var(--blanco); }
.espera .barrita i { width: 0; transition: width .2s linear; }

.coste[inert] { opacity: .5; }

/* Pedido a la espera de que la pasarela conteste (RN-M2-21). */
.ped .confirmando { font-size: 11.5px; color: var(--ambar); }

/* ------------------------------------------- P5 · resumen del pedido ------ */

/* El camino recorrido por el pedido: un paso por estado, con su fecha. */
.recorrido { list-style: none; margin: 0 0 20px; padding: 0; }

.recorrido li {
  position: relative;
  padding: 0 0 14px 22px;
  border-left: 2px solid var(--filete);
  font-size: 13px;
  color: var(--gris);
}

.recorrido li:last-child { border-left-color: transparent; padding-bottom: 0; }

.recorrido li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 3px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--filete);
  border-radius: 50%;
  background: var(--blanco);
}

.recorrido li.actual { color: var(--tinta); font-weight: 600; }
.recorrido li.actual::before { border-color: var(--lacre); background: var(--lacre); }

.recorrido .nombre { display: block; }

/* El codigo de envio y el localizador de Correos, debajo del recorrido. */
.seguimiento { margin: -8px 0 20px; font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.seguimiento b { color: var(--tinta); font-weight: 600; letter-spacing: .02em; }
.seguimiento a { color: var(--tinta-2); text-underline-offset: 2px; }
.seguimiento a:hover { color: var(--lacre); }
.recorrido .cuando { font-family: var(--mono); font-size: 11.5px; color: var(--gris-2); }

/* Bloque plegable: se abre y se cierra pulsando su titulo, que lleva pegada a
   su derecha una flecha: abajo cerrado, arriba abierto. Es un <details>, asi
   que no necesita JavaScript y el teclado y los lectores de pantalla lo
   entienden solos; la flecha es adorno y no se lee (el texto tras la barra). */
.plegable summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary h2 { margin: 0; }
.plegable summary::after {
  content: "\25BE";
  content: "\25BE" / "";
  font-size: 16px;
  line-height: 1;
  color: var(--gris-2);
}
.plegable[open] summary::after {
  content: "\25B4";
  content: "\25B4" / "";
}
.plegable[open] summary { margin-bottom: 12px; }
.plegable summary:focus-visible { outline: 2px solid var(--lacre); outline-offset: 3px; }