/* =============================================================================
   Sistema visual
   =============================================================================
   Sobrio y claro. Un fondo claro, una sola familia tipográfica, mucho espacio
   en blanco y filas altas. Nada decorativo: los números que importan son pocos
   y tienen que leerse de un vistazo.

   Tres reglas que no son estéticas sino de uso, porque la usa alguien que no
   está cómodo con lo digital:

     - Cuerpo de 17px para arriba y 44px de alto mínimo en cualquier cosa que
       se toque. Se usa desde el celular.
     - Los estados llevan color Y palabra. El color acompaña al texto, nunca
       lo reemplaza: alguien que no distingue rojo de verde tiene que poder
       usar esto igual.
     - Un solo color de acento, y usado poco. Si todo resalta, nada resalta.
   ========================================================================== */

:root {
  color-scheme: light;

  --fondo:        #faf9f7;
  --fondo-hondo:  #f1ede6;   /* entrar, y el fondo de las secciones */
  --superficie:   #ffffff;
  --superficie-2: #f7f5f1;
  --borde:        #e6e1d9;
  --borde-fuerte: #d3ccc0;

  --texto:        #1b1916;
  --texto-suave:  #635d54;
  --texto-tenue:  #8b8478;

  /* El único color de marca. Se usa para lo que se toca: botones, links, foco.
     Nunca para decir si algo está bien o mal — de eso se ocupan los estados. */
  --acento:       #0f5c52;
  --acento-vivo:  #14776a;
  --acento-suave: #e8f2f0;
  --sobre-acento: #ffffff;

  /* Estados. Siempre acompañados de la palabra.
     El verde de "al día" es más claro y más vivo que el acento a propósito: si
     se parecen, la pantalla queda toda del mismo color y nada resalta. */
  --debe:         #b3401a;   /* naranja fuerte: hay demora */
  --debe-fondo:   #fdf1ea;
  --debe-borde:   #eecab4;
  --alerta:       #855a10;   /* ámbar: está esperando el pago */
  --alerta-fondo: #fdf7e8;
  --alerta-borde: #edddb4;
  --bien:         #2c7d51;
  --bien-fondo:   #edf7f0;
  --bien-borde:   #c2e2ce;

  --radio:        14px;
  --sombra:       0 1px 2px rgba(27, 25, 22, .05), 0 1px 8px rgba(27, 25, 22, .04);
  --sombra-alta:  0 1px 2px rgba(27, 25, 22, .04), 0 12px 32px -12px rgba(27, 25, 22, .14);
  --ancho:        min(1120px, 100% - 2rem);
}

/* Modo noche.
   No es el modo claro con los colores dados vuelta: el fondo es un gris cálido
   y no negro, las superficies suben en vez de bajar, y el acento se aclara
   porque el teal oscuro sobre fondo oscuro no se lee. Los estados también se
   aclaran: un rojo #a3271b sobre negro no llega al contraste mínimo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { color-scheme: dark;

    --fondo:        #171614;
    --fondo-hondo:  #121110;
    --superficie:   #211f1d;
    --superficie-2: #2a2724;
    --borde:        #34302c;
    --borde-fuerte: #453f39;

    --texto:        #f2eee7;
    --texto-suave:  #aca69c;
    --texto-tenue:  #837c72;

    --acento:       #4fb3a1;
    --acento-vivo:  #6ac6b5;
    --acento-suave: #1c322f;
    --sobre-acento: #0c211e;

    --debe:         #ff9a5e;
    --debe-fondo:   #2e1e13;
    --debe-borde:   #5c3a22;
    --alerta:       #eec96a;
    --alerta-fondo: #2b2617;
    --alerta-borde: #55482a;
    --bien:         #6cd3a0;
    --bien-fondo:   #16281f;
    --bien-borde:   #2b4a38;

    --sombra:       0 1px 2px rgba(0, 0, 0, .4);
    --sombra-alta:  0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
  }
}

/* Y lo mismo cuando se elige a mano, que gana sobre lo que diga el sistema. */
:root[data-tema="oscuro"] { color-scheme: dark;

  --fondo:        #171614;
  --fondo-hondo:  #121110;
  --superficie:   #211f1d;
  --superficie-2: #2a2724;
  --borde:        #34302c;
  --borde-fuerte: #453f39;

  --texto:        #f2eee7;
  --texto-suave:  #aca69c;
  --texto-tenue:  #837c72;

  --acento:       #4fb3a1;
  --acento-vivo:  #6ac6b5;
  --acento-suave: #1c322f;
  --sobre-acento: #0c211e;

  --debe:         #ff9a5e;
  --debe-fondo:   #2e1e13;
  --debe-borde:   #5c3a22;
  --alerta:       #eec96a;
  --alerta-fondo: #2b2617;
  --alerta-borde: #55482a;
  --bien:         #6cd3a0;
  --bien-fondo:   #16281f;
  --bien-borde:   #2b4a38;

  --sombra:       0 1px 2px rgba(0, 0, 0, .4);
  --sombra-alta:  0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* Los montos se leen en columna: sin cifras tabulares no se alinean. */
.monto, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

h1 { font-size: 1.55rem; font-weight: 650; letter-spacing: -.015em; margin: 0 0 .2rem; }
h2 { font-size: 1.15rem; font-weight: 620; margin: 0 0 .75rem; }
p  { margin: 0 0 .75rem; }
a  { color: var(--acento); text-underline-offset: 3px; }

/* --- estructura ---------------------------------------------------------- */

.barra {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}
.barra-interior {
  width: var(--ancho); margin: 0 auto;
  min-height: 60px; display: flex; align-items: center; gap: 1rem;
}
/* El logo. Es el atajo al inicio: se toca y vuelve, como en cualquier sitio.
   El nombre no va al lado porque ya lo dice el menú. */
.marca {
  text-decoration: none; margin-right: .8rem; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--acento); color: var(--sobre-acento);
  display: inline-grid; place-items: center;
}
.marca:hover { background: var(--acento-vivo); }
.marca svg { width: 19px; height: 19px; }
.quien {
  color: var(--texto-suave); font-size: .95rem; text-decoration: none;
  padding: .4rem .6rem; border-radius: 8px;
}
.quien:hover { background: var(--superficie-2); color: var(--texto); }

/* El menú. Son dos lugares: no hace falta nada más elaborado. */
.menu {
  display: flex; gap: .15rem; margin-right: auto;
  overflow-x: auto; scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 .7rem;
  white-space: nowrap; flex: none;
  border-radius: 9px; text-decoration: none; font-weight: 600;
  color: var(--texto-suave);
}
.menu a:hover { background: var(--superficie-2); color: var(--texto); }
/* Dónde estoy: no alcanza con el color, lleva también el subrayado. */
.menu a[aria-current="page"] {
  color: var(--acento); background: var(--acento-suave);
  box-shadow: inset 0 -2px 0 var(--acento);
}

/* --- la planilla del mes ---------------------------------------------------
   Servicios en filas, unidades en columnas, como la lleva Patricia en papel.
   Ahí se ve de un vistazo qué falta cargar y cuánto le toca a cada uno. */

.planilla-envuelta {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.planilla { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: .95rem; }
.planilla th, .planilla td {
  padding: .65rem .8rem; text-align: right; border-bottom: 1px solid var(--borde);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.planilla thead th {
  font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-tenue); background: var(--superficie-2);
  position: sticky; top: 0;
}
.planilla th:first-child, .planilla td:first-child { text-align: left; }
.planilla tbody tr:last-child td { border-bottom: 0; }
.planilla .servicio { font-weight: 640; }
.planilla .vto { font-size: .85rem; color: var(--texto-suave); font-weight: 400; }
.planilla .fraccion { display: block; font-size: .78rem; color: var(--texto-tenue); }
.planilla .falta { color: var(--texto-tenue); }
.planilla tfoot td {
  border-top: 2px solid var(--borde-fuerte); border-bottom: 0;
  font-weight: 700; padding-top: .8rem;
}
.planilla .directo { color: var(--texto-tenue); font-size: .85rem; }

/* Entre quiénes se divide una factura: una fila por contrato, para tildar. */
.reparto-lista { display: flex; flex-direction: column; gap: .1rem; }
.reparto-fila {
  display: flex; gap: .75rem; align-items: center;
  padding: .6rem .7rem; border-radius: 9px; cursor: pointer;
  min-height: 48px;
}
.reparto-fila:hover { background: var(--superficie-2); }
.reparto-fila.elegido { background: var(--acento-suave); }
.reparto-fila .cuando { font-size: .87rem; }
.reparto-total {
  display: flex; gap: 1rem; align-items: baseline;
  border-top: 1px solid var(--borde); margin-top: .6rem; padding-top: .6rem;
}

/* La factura repartida entre los inquilinos. */
.reparto { display: flex; flex-direction: column; gap: .1rem; }
.reparto > div { display: flex; gap: 1rem; padding: .2rem 0; }
.reparto .quien-paga { flex: 1; }
.reparto .cuanto { font-weight: 600; font-variant-numeric: tabular-nums; }

main { width: var(--ancho); margin: 0 auto; padding: 1.15rem 0 4rem; }

/* Cambiar entre día y noche. El ícono solo no alcanza: lleva su texto. */
.tema { display: inline-flex; align-items: center; gap: .45rem; }
.tema svg { width: 17px; height: 17px; }
.encabezado { margin-bottom: 1rem; }
.encabezado .bajada { color: var(--texto-suave); margin: 0; }

.seccion { margin-top: 1.6rem; }
.seccion > h2 { color: var(--texto-suave); font-size: .85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .6rem; }

/* --- la grilla de alquileres ---------------------------------------------
   Cada alquiler es un cuadrado. Todos miden lo mismo aunque tengan distinta
   cantidad de datos, porque una grilla despareja se lee peor que una prolija:
   los botones van pegados abajo con margin-top:auto y el bloque del monto se
   estira para ocupar lo que sobre. */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}

/* El cuadrado entero se pinta según cómo viene el pago: se ve de lejos y sin
   leer nada. El color nunca va solo — la etiqueta dice la palabra — pero el
   color es lo que hace que la pantalla se entienda de un vistazo.

     verde     el mes corriente está pagado
     ámbar     esperando el pago, todavía no vencido
     naranja   hay demora */
.tarjeta {
  display: flex; flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.05rem 1.15rem 1.15rem;
  min-height: 18rem;
}
.tarjeta.debe   { background: var(--debe-fondo);   border-color: var(--debe-borde); }
.tarjeta.alerta { background: var(--alerta-fondo); border-color: var(--alerta-borde); }
.tarjeta.bien   { background: var(--bien-fondo);   border-color: var(--bien-borde); }

/* Sobre un cuadrado pintado, las líneas y los botones tienen que teñirse
   también: un borde gris sobre fondo ámbar se ve como un error. */
.tarjeta.debe   .tarjeta-plazos { border-top-color: var(--debe-borde); }
.tarjeta.alerta .tarjeta-plazos { border-top-color: var(--alerta-borde); }
.tarjeta.bien   .tarjeta-plazos { border-top-color: var(--bien-borde); }
.tarjeta .etiqueta { background: transparent; padding-left: 0; }
/* El estado y, si la hay, la aclaración de que no es un alquiler. */
.tarjeta-estado { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.tarjeta .boton.secundario { background: var(--superficie); }

/* Y el nombre de la unidad, un renglón fijo por el mismo motivo. */
.tarjeta-unidad {
  font-size: 1.2rem; font-weight: 640; letter-spacing: -.015em;
  margin: .75rem 0 .15rem; min-height: 1.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Se reservan siempre dos renglones para los inquilinos, haya uno o tres.
   Sin esto, un nombre largo empuja el importe hacia abajo y ese cuadrado queda
   desalineado con los demás: la columna de números deja de leerse de un saque. */
.tarjeta-quien {
  color: var(--texto-suave); font-size: .95rem; margin: 0;
  min-height: 2.95rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.tarjeta-plata { margin: .9rem 0 .85rem; }
.tarjeta-plata .rotulo {
  display: block; font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-tenue);
}
.tarjeta-plata .numero {
  display: block; font-size: 1.75rem; font-weight: 650; letter-spacing: -.025em;
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.tarjeta.debe .tarjeta-plata .numero { color: var(--debe); }
.tarjeta-plata .nota { display: block; color: var(--texto-suave); font-size: .9rem; margin-top: .15rem; }

/* Los plazos: cuándo vence, hasta cuándo el contrato, cuándo ajusta. */
.tarjeta-plazos {
  margin: 0 0 1.15rem; padding-top: .9rem;
  border-top: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .9rem;
}
.tarjeta-plazos > div { display: flex; gap: .75rem; }
.tarjeta-plazos dt { color: var(--texto-tenue); flex: none; }
.tarjeta-plazos dd { margin: 0 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }

/* El detalle de lo que paga este mes, plegado dentro de la tarjeta. */
.tarjeta-detalle { margin: 0 0 .9rem; font-size: .93rem; }
.tarjeta-detalle > summary {
  cursor: pointer; font-weight: 600; color: var(--texto-suave);
  min-height: 34px; display: flex; align-items: center; gap: .35rem;
  list-style: none;
}
.tarjeta-detalle > summary::-webkit-details-marker { display: none; }
.tarjeta-detalle > summary::before { content: "▸"; font-size: .8em; transition: transform .12s }
.tarjeta-detalle[open] > summary::before { transform: rotate(90deg); }
.tarjeta-detalle[open] > summary { color: var(--texto); }
.tarjeta-detalle .renglones { padding: .35rem 0 0 1rem; }
.tarjeta-detalle .renglones > div {
  display: flex; gap: .75rem; padding: .18rem 0; font-variant-numeric: tabular-nums;
}
.tarjeta-detalle .renglones .que { flex: 1; min-width: 0; }
.tarjeta-detalle .cuenta-pago {
  margin-top: .5rem; padding: .55rem .7rem; border-radius: 8px;
  background: var(--superficie-2); white-space: pre-line;
  font-size: .87rem; color: var(--texto-suave);
}

.tarjeta-acciones { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
.tarjeta-acciones .boton { width: 100%; }

/* --- filas anchas (la ficha de arriba del detalle) ----------------------- */

.lista { display: flex; flex-direction: column; gap: .75rem; }

.fila {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.15rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem 1.25rem;
  align-items: center;
}
.fila.debe { border-left: 4px solid var(--debe); }
.fila.al-dia { border-left: 4px solid var(--bien); }
.fila .dato { grid-column: 1; }

.plata { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; }
.plata.debe { color: var(--debe); }
.cuando { color: var(--texto-suave); font-size: .95rem; }

.acciones { grid-column: 2; display: flex; flex-direction: column; gap: .5rem; }

/* --- etiquetas de estado: color Y palabra -------------------------------- */

.etiqueta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 600; line-height: 1;
  padding: .4rem .6rem; border-radius: 7px; white-space: nowrap;
}
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etiqueta.debe    { color: var(--debe);   background: var(--debe-fondo); }
.etiqueta.alerta  { color: var(--alerta); background: var(--alerta-fondo); }
.etiqueta.bien    { color: var(--bien);   background: var(--bien-fondo); }
.etiqueta.neutra  { color: var(--texto-suave); background: var(--superficie-2); }

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

.boton {
  font: inherit; font-weight: 600;
  min-height: 44px; padding: .6rem 1.15rem;
  border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; white-space: nowrap; text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.boton.principal { background: var(--acento); color: var(--sobre-acento); }
.boton.principal:hover { background: var(--acento-vivo); }
.boton.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.boton.secundario:hover { background: var(--superficie-2); }
.boton.discreto { background: transparent; color: var(--texto-suave); padding: .5rem .7rem; }
.boton.discreto:hover { background: var(--superficie-2); color: var(--texto); }
.boton.peligro { background: var(--superficie); color: var(--debe); border-color: var(--debe-borde); }
.boton.peligro:hover { background: var(--debe-fondo); }
.boton:disabled { opacity: .5; cursor: not-allowed; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 8px;
}

/* --- formularios --------------------------------------------------------- */

.campo { display: block; margin-bottom: 1.1rem; }
.campo > span { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .95rem; }
.campo .ayuda { font-weight: 400; color: var(--texto-suave); font-size: .9rem; }

input, select, textarea {
  font: inherit; width: 100%; min-height: 48px;
  padding: .6rem .8rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte); border-radius: 10px;
  color: var(--texto);
}
input.monto-grande { font-size: 1.35rem; font-weight: 640; }

/* --- entrar --------------------------------------------------------------
   Es la primera pantalla que se ve y la única que ve alguien que todavía no
   entró. Va centrada y en una tarjeta para que se lea como una sola cosa
   terminada, en vez de texto suelto flotando arriba de un vacío. */

.entrada {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 1.5rem;
  /* Un fondo un punto más profundo que el resto del sistema. No es decoración:
     es lo que hace que la tarjeta blanca se despegue. Probé un degradado en el
     color de acento y sobre este fondo cálido se desatura en un gris sucio. */
  background: var(--fondo-hondo);
}

.entrada-caja {
  width: min(26rem, 100%);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: 2.5rem 2rem 2rem;
  box-shadow: var(--sombra-alta);
}

.entrada-marca {
  width: 54px; height: 54px; border-radius: 15px;
  background: var(--acento); color: var(--sobre-acento);
  display: grid; place-items: center;
  margin-bottom: 1.35rem;
}

.entrada h1 { font-size: 1.7rem; margin-bottom: .3rem; }
.entrada-bajada { color: var(--texto-suave); margin-bottom: 1.85rem; }
.entrada .campo { margin-bottom: 1.15rem; }
.entrada-boton { width: 100%; min-height: 50px; font-size: 1.05rem; margin-top: .35rem; }

.entrada-pie {
  margin: 1.6rem 0 0; padding-top: 1.15rem;
  border-top: 1px solid var(--borde);
  color: var(--texto-tenue); font-size: .9rem; line-height: 1.5;
}

/* Ver la contraseña. Sin esto, alguien que escribe con el pulgar en el celular
   no tiene forma de saber por qué no entra. */
.campo-con-boton { display: block; position: relative; }
.campo-con-boton input { padding-right: 5.5rem; }

.ver-clave {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--acento); background: transparent; border: 0;
  min-height: 38px; padding: 0 .7rem; border-radius: 8px; cursor: pointer;
}
.ver-clave:hover { background: var(--acento-suave); }

/* Dos campos por fila cuando hay lugar. */
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .dos-columnas { grid-template-columns: 1fr; } }

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

.aviso { padding: .8rem 1rem; border-radius: 10px; margin-bottom: .9rem; border: 1px solid; }
.aviso.error { color: var(--debe); background: var(--debe-fondo); border-color: var(--debe-borde); }
.aviso.atencion { color: var(--alerta); background: var(--alerta-fondo); border-color: var(--alerta-borde); }
.aviso.ok { color: var(--bien); background: var(--bien-fondo); border-color: var(--bien-borde); }
.aviso p:last-child { margin-bottom: 0; }

/* --- vacío --------------------------------------------------------------- */

.vacio {
  text-align: center; padding: 3.5rem 1.5rem;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.vacio .grande { font-size: 1.45rem; font-weight: 640; margin-bottom: .35rem; }
.vacio p { color: var(--texto-suave); margin: 0; }

/* --- meses del estado de cuenta ------------------------------------------ */

.mes {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
}
.mes + .mes { margin-top: .6rem; }
.mes-cabecera {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.15rem; width: 100%; text-align: left;
  font: inherit; background: none; border: 0; cursor: pointer; min-height: 60px;
}
.mes-cabecera:hover { background: var(--superficie-2); }
.mes-cabecera .nombre { font-weight: 600; }
.mes-cabecera .importe { margin-left: auto; font-weight: 640; font-size: 1.1rem; }
.mes-cuerpo { padding: 0 1.15rem 1.15rem; border-top: 1px solid var(--borde); }

.renglon { display: flex; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--borde); }
.renglon:last-child { border-bottom: 0; }
.renglon .que { flex: 1; }
.renglon .cuanto { font-weight: 600; }
.renglon.anulado { color: var(--texto-tenue); text-decoration: line-through; }

/* --- la ficha del contrato ------------------------------------------------
   Antes era una lista larga de dato y valor con el valor pegado al borde
   derecho: había que barrer media pantalla con la vista para unir cada par.
   Ahora son casilleros chicos, cada uno con su rótulo arriba y su valor
   abajo, que se leen de un vistazo y se acomodan solos según el ancho. */

.datos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: .5rem;
}
/* Todos los casilleros iguales. Probé alternar el fondo y, como envuelven según
   el ancho, el damero sale distinto en cada pantalla y parece un error. */
.dato-chico {
  padding: .7rem .85rem;
  border-radius: 10px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  min-height: 4.4rem;
  display: flex; flex-direction: column; justify-content: center;
}
.dato-chico dt {
  font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-tenue); margin-bottom: .2rem;
}
.dato-chico dd {
  margin: 0; font-weight: 640; font-variant-numeric: tabular-nums;
  font-size: 1.02rem;
}
.dato-chico dd.suave { font-weight: 500; color: var(--texto-suave); }

/* El encabezado del contrato: la unidad, quién vive y qué pasa con la plata. */
.cabecera-contrato {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--borde-fuerte);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.1rem 1.25rem;
}
.cabecera-contrato.debe   { border-left-color: var(--debe); }
.cabecera-contrato.alerta { border-left-color: var(--alerta); }
.cabecera-contrato.bien   { border-left-color: var(--bien); }
.cabecera-contrato .quienes { flex: 1 1 14rem; min-width: 0; }
.cabecera-contrato h1 { margin-bottom: .1rem; }
.cabecera-contrato .estado-plata { flex: 0 0 auto; }
.cabecera-contrato .acciones-contrato { flex: 0 0 auto; display: flex; gap: .5rem; }

/* Listas de dato y valor, a dos columnas. Se usan en la ficha del contrato y
   en la cuenta del ajuste. */
.datos { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.5rem; margin: 0; }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.datos .resultado { border-top: 1px solid var(--borde-fuerte); margin-top: .45rem; padding-top: .55rem; font-weight: 650; }

/* La cuenta del ajuste: es lo que se le muestra al inquilino si discute. */
.cuenta {
  margin-top: .8rem; padding: .9rem 1rem;
  background: var(--acento-suave); border-radius: 10px;
  font-size: .95rem;
}
.cuenta summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.cuenta[open] summary { margin-bottom: .6rem; }

/* La ficha de datos del contrato, en tarjeta propia. */
.ficha {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 1.15rem 1.25rem;
}
.ficha + .ficha { margin-top: .75rem; }

/* --- panel deslizante (el cobro) ----------------------------------------- */

dialog.panel {
  border: 0; padding: 0; background: transparent;
  width: min(560px, 100%); max-height: 92vh; margin: auto auto 0;
}
dialog.panel::backdrop { background: rgba(10, 9, 8, .55); }
.panel-caja {
  background: var(--superficie);
  border-radius: 16px 16px 0 0;
  padding: 1.5rem 1.5rem 1.75rem;
  max-height: 92vh; overflow-y: auto;
}
.panel-cabecera { display: flex; align-items: start; gap: 1rem; margin-bottom: 1.25rem; }
.panel-cabecera h2 { margin: 0; }
.panel-cabecera .sub { color: var(--texto-suave); font-size: .95rem; }
.panel-pie { display: flex; gap: .75rem; margin-top: 1.5rem; }
.panel-pie .boton { flex: 1; }

@media (min-width: 640px) {
  dialog.panel { margin: auto; }
  .panel-caja { border-radius: 16px; }
}

/* --- subir la factura -----------------------------------------------------
   La zona de arrastre es también un botón: en el celular no se arrastra nada
   y hay que poder tocarla para abrir la cámara o los archivos. */

.soltar {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  width: 100%; padding: 1.6rem 1rem; margin-bottom: 1.15rem;
  border: 2px dashed var(--borde-fuerte); border-radius: var(--radio);
  background: var(--superficie-2); color: var(--texto-suave);
  font: inherit; text-align: center; cursor: pointer;
}
.soltar:hover, .soltar.encima {
  border-color: var(--acento); background: var(--acento-suave); color: var(--acento);
}
.soltar strong { color: var(--texto); font-size: 1.02rem; }
.soltar.encima strong { color: var(--acento); }
.soltar small { font-size: .88rem; }

/* El texto que se le manda al inquilino, tal cual va a llegarle. */
.previo {
  font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; word-break: break-word;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 10px; padding: 1rem; margin: 0 0 1.15rem;
  max-height: 18rem; overflow-y: auto;
}

/* --- imprimir ------------------------------------------------------------
   El PDF sale de imprimir la liquidación: el navegador ya sabe hacer PDF y
   agregar una librería para esto sería cargar 300 KB para nada. */

@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .barra, .tarjeta-acciones, .acciones, .acciones-contrato,
  .boton, dialog.panel .panel-cabecera, .panel-pie, #pagos { display: none !important; }
  dialog.panel, dialog.panel::backdrop { position: static; background: #fff; }
  .panel-caja { box-shadow: none; max-height: none; padding: 0; }
  .previo { border: 0; background: #fff; padding: 0; max-height: none; font-size: 11pt; }
  .no-imprimir { display: none !important; }
  a[href]::after { content: ""; }
}

/* --- utilidades ---------------------------------------------------------- */

.oculto { display: none !important; }
.cargando { color: var(--texto-suave); padding: 2rem 0; text-align: center; }
.pie-nota { color: var(--texto-tenue); font-size: .9rem; margin-top: 2.5rem; }

@media (max-width: 560px) {
  .fila { grid-template-columns: 1fr; }
  .acciones { grid-column: 1; margin-top: .9rem; }
  .plata { font-size: 1.35rem; }
  .barra-interior .quien { display: none; }   /* el nombre cede lugar a los botones */
  .menu { margin-right: auto; }
}

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

/* Los servicios que faltan cargar este mes, uno al lado del otro. */
.pendientes-fila { display: flex; flex-wrap: wrap; gap: .5rem; }
.pendientes-fila .boton { flex: 0 0 auto; }