/* «La libreta»: compras, pérdidas, recuentos y correcciones, más la carta y
 * los socios.
 *
 * Antes se llamaba «Apuntar y arquear». «Arquear» no lo dice nadie —y encima
 * la propia navegación de las otras dos pantallas ya la llamaba solo
 * «Apuntar»—, así que la pantalla pasa a llamarse por lo que es. Los nombres
 * internos (`/api/arqueos`, `data-panel="arqueo"`) no se han tocado: están en
 * producción y no se ven.
 *
 * Esta pantalla se usa de pie junto a una mesa, con las dos manos y sin prisa
 * — al revés que «Me sirvo». Por eso aquí sí caben formularios largos y
 * tablas, y por eso las seis pestañas se pueden enseñar todas a la vez en vez
 * de esconderlas en un desplegable.
 */

main { padding: var(--s-4); max-width: 46rem; margin: 0 auto; }

.aviso-sesion {
  padding: var(--s-4); margin-bottom: var(--s-4);
  background: var(--brasa-suave); border: 1px solid #e8c4b8; border-radius: var(--r-lg);
}

/* ── Las pestañas ────────────────────────────────────────────────────────
   Eran seis botones idénticos envueltos en dos filas, y no son seis cosas
   iguales: cuatro son asientos del libro y dos son ajustar la casa. Se
   agrupan y el grupo se dice, que es lo que hace que se encuentren sin
   leerlos todos. */
.pestanas { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
.grupo-pestanas .epigrafe { margin-bottom: var(--s-2); }
.fila-pestanas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
@media (min-width: 620px) {
  .pestanas { grid-template-columns: 2fr 1fr; align-items: start; }
  .fila-pestanas { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
}
.fila-pestanas .btn { padding: 0 var(--s-2); }
/* La elegida se rellena del azul de la casa, y además PIERDE EL CANTO: deja de
   sobresalir porque ya está apretada, igual que la tecla que se queda hundida
   en un mando antiguo. Con seis botones a la vista, saber en cuál estás no
   puede depender de leer los títulos. */
.fila-pestanas .activa {
  background: var(--casa); border-color: var(--casa-hondo); color: var(--papel);
  border-bottom-width: 2px; transform: translateY(2px);
}
/* Y ya apretada no se vuelve a hundir al pulsarla: no lleva a ninguna parte. */
.fila-pestanas .activa:active { transform: translateY(2px); }

/* ── Los paneles ─────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-lg);
  /* La franja azul de arriba ata el panel a la pestaña que lo abrió: las dos
     del mismo color, una encima de la otra. Sin ella, pulsar una pestaña
     cambia un formulario que está trescientos píxeles más abajo y no se ve
     que haya pasado nada. De sombra interior y no de `border-top`: un borde
     grueso arriba y fino a los lados se abre en diagonal en la esquina
     redondeada y la franja parece salirse de la tarjeta. */
  box-shadow: inset 0 5px 0 var(--casa);
  padding: var(--s-5);
}
.titulo-panel { font-size: 1.3rem; letter-spacing: -.01em; margin-bottom: var(--s-1); }
.epigrafe-suelto { margin-top: var(--s-6); }

form { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
form .nota { margin: calc(var(--s-2) * -1) 0 0; }
/* Unidades y precio son dos cifras cortas: en una fila cada una se pierde una
   pantalla entera de alto por nada.
   `minmax(0, 1fr)` y no `1fr`: un `<input>` trae de fábrica un ancho mínimo de
   unos veinte caracteres, y en una columna `1fr` —cuyo mínimo es `auto`— eso
   no encoge y desborda la página entera en horizontal. Medido: 568 px de
   contenido en una pantalla de 388. */
.pareja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.pareja input { width: 100%; min-width: 0; }
.botonera { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.botonera .btn { flex: 1 1 10rem; }

/* La casilla del recuento: ancha, y el marcador de posición dice qué
   significa dejarla vacía. */
#recuento input { width: 6.5rem; min-height: 48px; font-size: .95rem; }
/* Lo que se teclea es una cifra y va en monoespaciada; el marcador de posición
   es una frase y va en la de las personas. En monoespaciada no cabía y se leía
   «sin con». */
#recuento input::placeholder { font-family: var(--gente); font-size: .82rem; font-style: italic; }

/* Lo que salió del recuento. El filete azul de la izquierda lo despega del
   formulario que hay encima: es la RESPUESTA, no un campo más. */
.resultado {
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  background: var(--casa-suave); border: 1px solid var(--casa-tenue);
  border-left: 6px solid var(--casa); border-radius: var(--r-md);
}
.resultado-titulo { font-size: 1.15rem; font-weight: 700; margin: 0 0 var(--s-2); }
.resultado ul { margin: 0 0 var(--s-2); padding-left: var(--s-5); }
.resultado li { font-size: .95rem; }

/* ── Corregir: el libro, no una tabla ────────────────────────────────────
   Aquí es donde la promesa del proyecto se ve o no se ve. Un apunte corregido
   se TACHA y su contrario queda debajo, en el mismo renglón: antes la tabla
   ponía «corregido» en una celda gris y el apunte contrario se iba a otra
   fila cualquiera, así que la promesa era cierta y no se notaba. */
.libreta { margin-top: var(--s-4); }
/* Dos filas y no tres: la fecha con su importe arriba, y lo que pasó con su
   botón abajo. Con el botón en una tercera fila para él solo, cada asiento
   medía siglo y medio de alto y treinta asientos no cabían en ningún sitio. */
.renglon-cuando {
  grid-column: 1; grid-row: 1;
  font-family: var(--maquina); font-size: .74rem;
  color: var(--tinta-suave); letter-spacing: -.02em;
}
.renglon-dinero { grid-column: 2; grid-row: 1; text-align: right; }
.renglon-que { grid-column: 1; grid-row: 2; }
.renglon-uds { font-family: var(--maquina); color: var(--tinta-suave); font-weight: 400; white-space: nowrap; }
.renglon-nota { font-style: italic; }
/* El contrario: colgado del apunte que corrige, con su sangría. */
.contrario {
  grid-column: 1 / -1;
  margin-top: var(--s-2); padding: var(--s-2) 0 0 var(--s-3);
  border-left: 2px solid var(--linea);
  font-size: .84rem; color: var(--tinta-suave);
}
.renglon .btn { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }

/* El motivo de la corrección se pide EN el renglón. Antes lo pedía un
   `prompt()` del navegador, que no dice de qué apunte habla: se veía la
   pregunta sin ver la línea que se estaba corrigiendo. */
.motivo { grid-column: 1 / -1; display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.motivo input { flex: 1 1 12rem; min-height: 48px; font-size: .95rem; }
.motivo .btn { min-height: 48px; }

/* ── Tablas de la carta y los socios ─────────────────────────────────── */
.acciones {
  /* En una sola línea: si se envuelven, cada fila crece a tres alturas y la
     tabla se vuelve ilegible en móvil. La tabla ya se desplaza en horizontal. */
  display: flex; gap: var(--s-2); flex-wrap: nowrap; align-items: center;
}
.acciones .btn { min-height: 44px; padding: 0 var(--s-3); font-size: .85rem; white-space: nowrap; }
tr.retirado td { opacity: .55; }

/* La primera columna se queda quieta al desplazar la tabla. Sin esto, para
   llegar a «Retirar» hay que arrastrar hasta perder de vista el nombre del
   artículo, y se acaba pulsando el botón de otra fila — que es el mismo fallo
   que el `confirm()` del navegador, tapar aquello sobre lo que se decide. */
#articulos th:first-child, #articulos td:first-child,
#socios th:first-child, #socios td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--papel);
  padding-right: var(--s-4);
  box-shadow: 1px 0 0 var(--linea);
}
/* Confirmar borrar se hace en la propia fila, no con un `confirm()`: el
   diálogo del navegador tapa justo la fila por la que pregunta. */
.confirmar-borrado { display: flex; gap: var(--s-2); align-items: center; }
.confirmar-borrado span { font-size: .85rem; font-weight: 700; color: var(--brasa); }
.pin-nuevo { display: flex; gap: var(--s-2); align-items: center; }
.pin-nuevo input { width: 9rem; min-height: 44px; font-size: .9rem; }