/**
 * Lo poco que el tema no trae.
 *
 * Nada de esto escribe un color a mano: todo sale de los tokens `--mdb-*` del
 * tema. Cambiar la marca tiene que mover esta aplicación entera sin tocar este
 * archivo, y en cuanto alguien escriba aquí un `#0a4570` deja de ser verdad.
 */

/* ── La pantalla de entrar ────────────────────────────────────────────────── */

.acceso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.acceso-caja {
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.acceso-caja .page-panel {
  width: 100%;
}

/* ── Las cifras del panel ─────────────────────────────────────────────────── */

.tarjetas-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.tarjeta-cifra {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tarjeta-cifra .rotulo {
  color: var(--mdb-secondary-color);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* La cifra ocupa el ancho que le den, y el tema la encoge sola si no cabe.
   Sin `min-width: 0` el hijo de una rejilla se niega a encoger por debajo de
   su contenido y el número desborda la tarjeta antes de que nadie lo mida. */
.tarjeta-cifra .company-cifra {
  min-width: 0;
  display: block;
}

.tarjeta-cifra .apunte {
  color: var(--mdb-secondary-color);
  font-size: 0.8125rem;
}

/* ── El plan de pagos ─────────────────────────────────────────────────────── */

/* Los importes se leen comparándolos entre sí, así que van alineados a la
   derecha y con cifras de ancho fijo: en proporcional, un 1 ocupa menos que un
   8 y las columnas de miles dejan de alinearse por sí solas. */
.tabla-plan td.importe,
.tabla-plan th.importe {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Las cuotas que ya pasaron se atenúan para que la vista caiga en la que toca
   cobrar. No se ocultan: la primera pregunta de un cliente es por una vieja. */
.tabla-plan tr.cerrada td {
  opacity: 0.72;
}

/* La cuota en la que se está: una barra en el borde, no un fondo de color.
   Un fondo compite con las etiquetas de estado que ya lleva la fila dentro. */
.tabla-plan tr.actual td:first-child {
  box-shadow: inset 3px 0 0 0 var(--mdb-primary);
}

/* ── La ficha del cliente ─────────────────────────────────────────────────── */

.ficha-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 1.5rem;
}

.ficha-datos dt {
  color: var(--mdb-secondary-color);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.125rem;
}

.ficha-datos dd {
  margin: 0;
  font-weight: 500;
}

/* ── Impresión ────────────────────────────────────────────────────────────── */

/* El marco lo esconde el tema. Aquí solo el encabezado del recibo, que en
   pantalla no pinta nada y en el papel es lo que dice de qué es el papel. */
.solo-impreso {
  display: none;
}

@media print {
  .solo-impreso {
    display: block;
  }
}

/* ── La cara de un cliente ────────────────────────────────────────────────── */

.avatar-cliente {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  /* Recortada al círculo y centrada: una foto de carné y una apaisada tienen
     que verse igual de redondas, y `object-fit` es lo que evita el ovalado. */
  object-fit: cover;
  background: var(--mdb-secondary-bg, #eef1f4);
}

.avatar-cliente-grande {
  width: 4.5rem;
  height: 4.5rem;
}

.avatar-cliente-iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mdb-primary);
  font-weight: 600;
  /* Las iniciales encogen con el círculo; sin esto, dos letras en el avatar
     grande se ven del mismo tamaño que en el de la lista. */
  font-size: 0.875rem;
}

.avatar-cliente-grande.avatar-cliente-iniciales {
  font-size: 1.5rem;
}

/* ── Documentos ───────────────────────────────────────────────────────────── */

.lista-adjuntos,
.lista-vinculos {
  list-style: none;
  padding: 0;
  margin: 0;
}

.adjunto,
.vinculo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mdb-border-color, #e5e7eb);
}

.adjunto:last-child,
.vinculo:last-child {
  border-bottom: 0;
}

.adjunto > .min-w-0,
.vinculo > .min-w-0 {
  flex: 1;
  min-width: 0;
}

/* La miniatura del archivo. Cuadrada y del mismo tamaño para todos, sea una
   foto o el icono de un PDF: una lista donde cada fila mide distinto se lee
   peor que una donde todas miden igual. */
.adjunto-vista {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--mdb-secondary-bg, #eef1f4);
  color: var(--mdb-secondary-color);
}

.adjunto-vista img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adjunto-acciones {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}