/* «El local»: la pantalla abierta. Todos los socios ven exactamente lo mismo.
 *
 * No hay roles en esta aplicación: la red de seguridad son tres propiedades —
 * todo lleva nombre, nada se borra, todo el mundo lo ve. Esta pantalla es la
 * tercera, así que su trabajo es enseñar, no esconder.
 *
 * Orden, y es una decisión: lo que FALTA arriba del todo, porque es lo único
 * que pide que alguien haga algo; el dinero justo después, porque es a lo que
 * se entra; y el libro al final, que es donde se va a comprobar, no a mirar.
 */

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

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
}
.epigrafe-suelto { margin-top: var(--s-5); }

/* ── Lo que falta ────────────────────────────────────────────────────────
   Brasa, no ámbar: el ámbar es del dinero. Y va sobre papel encendido para
   que se distinga de una tarjeta normal sin gritar. */
.faltan {
  background: var(--brasa-suave);
  border: 1px solid #e8c4b8;
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
}
.faltan .epigrafe { color: var(--brasa); }
/* Cada renglón dice el nombre y cuántas quedan, y nada más: el epígrafe ya
   dice que hay que reponerlas, así que repetir «Reponer» en cada línea era
   ocho veces la misma palabra y el doble de alto — con el dinero empujado
   fuera de la pantalla. */
.avisos { list-style: none; margin: 0; padding: 0 0 0 var(--s-4); border-left: 2px solid var(--brasa); }
.avisos li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) 0; font-weight: 700;
}
.avisos li + li { border-top: 1px solid #ecd3c9; }
.avisos .cuantas {
  font-family: var(--maquina); font-variant-numeric: tabular-nums;
  font-size: .85rem; font-weight: 400; color: var(--brasa); white-space: nowrap;
}

/* ── El dinero ───────────────────────────────────────────────────────────
   El bote es el héroe: es acumulado, es de todos, y es la cifra por la que se
   abre esta pantalla. Las tres del periodo son contexto y van pequeñas. */
.cifras { margin: 0 0 var(--s-4); }
.bote { padding-bottom: var(--s-4); border-bottom: 1px solid var(--linea); margin-bottom: var(--s-4); }
.bote dt {
  font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-suave);
}
/* `Intl` mete un espacio duro antes del €, y en monoespaciada a este cuerpo
   eso abre un hueco de medio dedo entre la cifra y su moneda. */
.bote dd { margin: var(--s-1) 0 0; font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1; word-spacing: -.3em; }

/* El periodo NO es otro epígrafe: es una coletilla del que ya hay. Sin
   versales ni interletraje, no compite con el rótulo de la sección. */
#periodo-dicho { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Un bote en negativo no es una cifra más: significa que se compró antes de
   vender, o que falta el saldo inicial. Se dice, no se deja adivinar. */
.bote dd.negativo { color: var(--brasa); }
.bote .nota { margin-top: var(--s-2); }

.periodo-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-4); }
.periodo-cifras dt {
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.periodo-cifras dd { margin: 2px 0 0; font-size: 1.35rem; }
.periodo-cifras div { min-width: 0; }

/* ── El periodo ──────────────────────────────────────────────────────────
   Va DEBAJO de las cifras y no encima: es un ajuste de lo que ya se está
   viendo, no un paso previo que haya que rellenar para ver algo. */
.periodo {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2);
  padding-top: var(--s-4); border-top: 1px solid var(--linea); margin-top: var(--s-4);
}
.periodo label { flex: 0 1 9.5rem; }
.periodo input { font-size: .95rem; }
.periodo .btn { flex: 0 0 auto; }

/* ── Sin sesión ──────────────────────────────────────────────────────────
   Encontrado abriendo la aplicación en un navegador de verdad: cuatro
   secciones vacías parecen un local desierto, no «tienes que entrar». */
.sin-sesion {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-lg);
  /* La franja ciruela de arriba dice de qué pantalla es esta puerta, igual que
     la verde dice que la de entrar es la de «Me sirvo». De sombra interior,
     que es lo que respeta la esquina redondeada. */
  box-shadow: inset 0 6px 0 var(--casa);
  padding: var(--s-6) var(--s-5); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.sin-sesion-titulo { margin: 0; font-size: 1.4rem; font-weight: 700; }
.sin-sesion .btn { margin-top: var(--s-2); min-width: 12rem; }