/* ===== HOJA DE COBROS (Juan, 05-10-2026) · web/hoja.js =====================================================
   Como la hoja de cobros del Excel de la oficina: la barra verde azulada con la dirección del piso, la columna
   del nombre en azul claro, el ingreso final en rosa claro y el total del piso debajo. Mejorado: el color de
   «Falta» lo pone el estado (verde cobrado, rojo vencido, azul «dice que pagó»), no la mano.
   Solo tokens (web/tokens.css): ni un hexadecimal suelto. */

.hoja{display:grid;gap:var(--esp-3)}
.hoja-piso{padding:0;overflow:hidden;border:1px solid var(--color-borde)}
.hoja-piso[hidden]{display:none}
.hoja-piso-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2) var(--esp-4);
  padding:var(--esp-3) var(--esp-4);background:var(--cal-mes-actual-oscuro);color:var(--texto-sobre-accion);cursor:pointer;list-style:none}
.hoja-piso-cab::-webkit-details-marker{display:none}
.hoja-piso-cab:focus-visible{outline:none;box-shadow:var(--anillo-foco-interior)}
.hoja-piso-nombre{display:grid;gap:2px;min-width:0}
.hoja-piso-nombre strong{font-size:var(--texto-14);letter-spacing:.01em}
.hoja-piso-nombre small{font-size:var(--texto-12);color:var(--cal-anio-subtitulo)}
.hoja-piso-cab .hoja-falta{display:inline-block;padding:2px var(--esp-2);border-radius:var(--radio-s);font-size:var(--texto-13);font-weight:var(--peso-negrita);white-space:nowrap}
.hoja-piso-cab .hoja-falta small{display:inline;font-weight:var(--peso-normal)}

.hoja-tabla{width:100%;border-collapse:collapse;font-size:var(--texto-13);font-variant-numeric:tabular-nums;table-layout:fixed;min-width:0}
/* Las mismas columnas en todos los pisos, como en el Excel: se leen de arriba abajo sin que bailen */
.hoja-tabla thead th:first-child{width:56px}
.hoja-tabla thead .c-det{width:84px}
.hoja-tabla thead .c-det:nth-of-type(5){width:150px}
.hoja-tabla thead .c-tot{width:124px}
.hoja-tabla thead .c-falta{width:200px}
.hoja-tabla thead .c-acc{width:152px}
.hoja-tabla td,.hoja-tabla th{overflow-wrap:anywhere}
.hoja-tabla th,.hoja-tabla td{padding:var(--esp-2) var(--esp-2);border-bottom:1px solid var(--color-borde);vertical-align:top;text-align:left}
.hoja-tabla thead th{font-size:var(--texto-12);color:var(--texto-secundario);font-weight:var(--peso-negrita);background:var(--gris-050);white-space:nowrap}
.hoja-tabla tbody th{font-weight:var(--peso-negrita);white-space:nowrap;color:var(--texto-principal)}
.hoja-tabla .num{text-align:right;white-space:nowrap}
.hoja-tabla td small{display:block;color:var(--texto-secundario);font-size:var(--texto-12);white-space:normal}
.hoja-tabla td.hoja-quien{background:var(--excel-plataforma-legend)}
.hoja-tabla td.hoja-quien small{color:var(--excel-plataforma-texto)}
.hoja-tabla td.hoja-extras small{max-width:16em;margin-left:auto}
.hoja-tabla tbody td.c-tot{background:var(--excel-sinpagar-legend)}
.hoja-total{background:none;border:0;padding:0;font:inherit;font-weight:var(--peso-negrita);color:var(--texto-principal);cursor:pointer;text-decoration:underline;text-decoration-color:var(--gris-control);text-underline-offset:3px}
.hoja-total:hover{text-decoration-color:currentColor}
.hoja-acciones{white-space:nowrap;text-align:right}
.hoja-acciones .button+.button{margin-left:var(--esp-1)}
.hoja-mas{min-width:32px;justify-content:center}
.hoja-tenue{color:var(--texto-tenue)}
.hoja-libre th,.hoja-libre td,.hoja-tabla tbody .hoja-libre td.c-tot{background:var(--gris-050);color:var(--texto-tenue)}
.hoja-pie th,.hoja-pie td{border-top:2px solid var(--texto-principal);border-bottom:0;font-weight:var(--peso-negrita);background:var(--color-superficie)}

/* «Falta»: el estado en color, una sola vez */
.hoja-falta{display:inline-grid;justify-items:end;gap:1px;padding:2px 6px;border-radius:var(--radio-s)}
.hoja-falta strong{display:inline-flex;align-items:center;gap:4px}
.hoja-ok{background:var(--ok-fondo);color:var(--ok-texto)}
.hoja-peligro{background:var(--error-fondo);color:var(--error-texto)}
.hoja-info{background:var(--info-fondo);color:var(--info-texto)}
.hoja-aviso{background:var(--aviso-fondo);color:var(--aviso-texto)}
.hoja-neutro{background:var(--gris-050);color:var(--texto-principal)}
.hoja-tabla .hoja-falta small{color:inherit;opacity:.9}
.hoja-favor{display:block;color:var(--ok-texto);font-size:var(--texto-12)}
p.hoja-aviso{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2);padding:var(--esp-2) var(--esp-3);border-radius:var(--radio-m);margin:0 0 var(--esp-3)}

.hoja-buscar{display:block;margin:0 0 var(--esp-3)}
.hoja-buscar input{width:100%;max-width:360px}
.hoja-sin-nadie{margin-top:var(--esp-3);font-size:var(--texto-13)}

/* Diálogos: sugerencias y reparto */
.hoja-chips{display:flex;flex-wrap:wrap;gap:var(--esp-1);margin-bottom:var(--esp-2)}
.hoja-modo{border:0;padding:0;margin:var(--esp-2) 0;display:grid;gap:var(--esp-1)}
.hoja-modo legend{font-size:var(--texto-13);font-weight:var(--peso-negrita);margin-bottom:var(--esp-1)}
.hoja-modo small{color:var(--texto-secundario);font-weight:var(--peso-normal)}
.hoja-quien-paga{cursor:pointer}
.hoja-quien-paga span{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-1) var(--esp-2)}
.hoja-quien-paga small{flex-basis:100%;margin-left:calc(var(--casilla) + var(--esp-2))}
.hoja-quien-paga input{width:var(--casilla);height:var(--casilla);accent-color:var(--color-accion)}

/* Tableta: fuera alquiler, gastos y extras (el total y su desglose siguen a un clic) */
@media (max-width:1080px){
  .hoja-tabla .c-det{display:none}
  .hoja-tabla thead .c-falta{width:170px}
  .hoja-tabla thead .c-acc{width:152px}
}
/* Móvil: cada fila, una tarjeta: habitación · nombre · botones, y debajo lo que falta (el total, en el desglose) */
@media (max-width:560px){
  .hoja-tabla{table-layout:auto;min-width:0}   /* las tablas del CRM piden 760 px: aquí cada fila es una tarjeta */
  .hoja-tabla thead{display:none}
  .hoja-tabla th{position:static;box-shadow:none}
  .hoja-tabla tbody tr,.hoja-tabla tfoot tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--esp-1) var(--esp-2);
    align-items:start;padding:var(--esp-2) var(--esp-3);border-bottom:1px solid var(--color-borde);background:var(--color-superficie)}
  .hoja-tabla tbody tr[hidden]{display:none}
  .hoja-tabla th,.hoja-tabla td{padding:0;border:0;background:none}
  .hoja-tabla td.hoja-quien{background:none;min-width:0;grid-column:2;grid-row:1}
  .hoja-tabla tbody td.c-tot{display:none}
  .hoja-tabla tbody td.c-falta{grid-column:2;grid-row:2;text-align:left}
  .hoja-tabla .hoja-falta{justify-items:start}
  .hoja-tabla tbody td.c-acc{grid-column:3;grid-row:1 / 3;align-self:center}
  .hoja-libre td{display:none}
  .hoja-libre td.hoja-libre-texto{display:block;grid-column:2 / 4}
  .hoja-pie th[colspan]{grid-column:1 / 3}
  .hoja-pie td.c-tot{grid-column:3;grid-row:1}
  .hoja-pie td.c-falta{display:none}
  .hoja-pie td.c-acc{grid-column:1 / 4;justify-self:end}
  .hoja-pie{border-top:2px solid var(--texto-principal)}
}