/* ============================================================
   Administración de Alquileres — Hoja de estilos base
   Copiada del NP tal cual (D9: el estilo visual del NP, sin diseño
   propio). Los valores de acá NO se cambian por pantalla: toda
   pantalla nueva los hereda. Las maquetas aprobadas están en
   docs/maquetas/.
   Letra escalable = zoom nativo del navegador: todo en rem.
   ============================================================ */
:root {
  --azul: #217fb7;          /* acento principal (el azul del NP, D9) */
  --azul-naval: #0d2438;    /* azul oscuro naval — encabezado, títulos de caja, botón principal */
  --azul-oscuro: #164569;
  --fondo: #f4f5f7;         /* grisado de fondo general */
  --blanco: #ffffff;
  --borde: #cdd3d9;
  /* Negro puro (docs/05 §3, regla 12): un gris oscuro se lee flojo con mucha luz. */
  --texto: #000000;
  --texto-suave: #6a737d;
  --verde: #1a7f37;
  --rojo: #b42318;
  --amarillo-suave: #fff8e1;
  /* El color del foco por teclado (ver «Dónde está parado el teclado», abajo). Tiene que
     estar definido: usada sin definir, el navegador ignora la declaración y el foco no se marca. */
  --foco: #e0b400;
  font-size: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Segoe UI", system-ui, sans-serif; background: var(--fondo); color: var(--texto); }

/* ====== El tamaño de la letra (A− A A+) ======
   Todo el sistema está dimensionado en `rem`, o sea relativo a la raíz: los
   valores en `px` que quedan son bordes, radios y sombras, que NO tienen que
   crecer (un borde de 1px sigue siendo un borde). Por eso alcanza con mover el
   `font-size` del `html` y escala la pantalla entera sin tocar una regla más.
   El JavaScript de `base.html` lo escribe; acá sólo vive el default. */
html { font-size: 100%; }

/* ===== Todo campo hereda la letra del sistema =====
   Un campo sin clase propia sale con el tamaño que el navegador le da por
   defecto a un `<input>` (13,3 px cuando todo lo demás está en 16), y con A+ el
   resto de la pantalla crece y él no. O sea que justo donde la persona escribe,
   la letra no se podría agrandar — que es lo contrario de para qué existe el
   control A− A A+.
   Se arregla en el mecanismo y no en la pantalla: un campo nunca elige su cuerpo
   de letra por omisión. Lo que quiera otro tamaño lo declara (los `.btn`, el
   control A− A A+) y sigue mandando, porque esta regla no lleva `!important`. */
input, select, textarea { font-family: inherit; font-size: inherit; }

.tamano-letra { display: flex; gap: 2px; }
.btn-letra {
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 5px;
  padding: .15rem .45rem; cursor: pointer; line-height: 1.2;
  font-family: inherit; font-weight: 600;
}
/* Los tres en el MISMO cuerpo, sin escalar con la preferencia: si el «A−»
   creciera junto con el resto, achicar desde la letra más grande sería apuntarle
   a un botón que se mueve. El control tiene que quedarse quieto. */
.btn-letra { font-size: 13px; }
.btn-letra:hover { background: rgba(255, 255, 255, .22); }
.btn-letra[disabled] { opacity: .4; cursor: default; }
/* El control vive DENTRO del bloque `.derecha`, que ya tiene su
   `margin-left:auto`: no hace falta empujar nada. */

/* ====== Barra del encabezado (idéntica en TODAS las pantallas) ====== */
.barra-superior {
  background: var(--azul-naval); color: #fff;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: .8rem 1.25rem;
  position: sticky; top: 0;
  /* Por ENCIMA del velo de la ficha flotante (z-index 30) y por debajo de la
     ventana de confirmación (50): con una ficha abierta se tiene que poder
     apretar el nombre del sistema y el botón de salir, que es justo cuando más
     se necesitan. Las flotantes empiezan DEBAJO de la barra. La confirmación sí
     la tapa: mientras se pregunta algo, la barra no tiene que responder. */
  z-index: 40;
}
/* Sin logo (D9): en su lugar, el nombre del sistema en texto (docs/maquetas, «marca»). */
.barra-superior .logo {
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem;
  letter-spacing: .3px; white-space: nowrap;
}
.barra-superior h1 { font-size: 1.45rem; font-weight: 600; color: #fff; }
/* Los datos que van al lado del título (bloque barra_cabecera): listas y textos
   sobre el azul naval. */
.barra-superior .en-barra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.barra-superior .en-barra select { font-family: inherit; font-size: 1rem; padding: .2rem .45rem; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.barra-superior .en-barra select option { color: #000; }
.barra-superior .en-barra select:disabled { opacity: .75; }
.barra-superior .en-barra .contexto { color: #9fc3de; font-size: .95rem; }
.barra-superior .en-barra .contexto b { color: #fff; }
/* La salida de la pantalla con el mouse: mismo molde que cualquier botón del
   sistema (esquinas redondeadas, sin emojis), pero sobre la franja navy — de
   ahí el contorno claro en vez del fondo blanco.
   `nowrap` para que el cartel no se parta al medio: si no entra, la barra lo
   baja de línea entera (ya es flex-wrap), que es lo que hace falta en el
   celular y con el zoom grande. */
.barra-superior .btn-volver {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 6px;
  padding: .35rem .8rem; font-size: .95rem; font-family: inherit;
  white-space: nowrap; cursor: pointer;
}
.barra-superior .btn-volver:hover { background: rgba(255, 255, 255, .28); }
.barra-superior .derecha { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.usuario { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: #fff; text-decoration: none; }
.circulo {
  background: var(--azul); color: #fff; border-radius: 50%; width: 1.9rem; height: 1.9rem;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem;
}
/* Menú desplegable del círculo de iniciales (todas las opciones del usuario) */
.menu-usuario { position: relative; }
.circulo-boton { background: none; border: none; cursor: pointer; padding: 0; display: block; }
.circulo-boton:hover .circulo { background: var(--azul-oscuro); outline: 2px solid var(--azul); }
.circulo-ub { outline: 2px solid #e0b400; }  /* en modo UB, el círculo se marca en amarillo */
.menu-desplegable {
  display: none; position: absolute; right: 0; top: calc(100% + .5rem);
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(13,36,56,.25);
  min-width: 17rem; z-index: 40; overflow: hidden; padding: .3rem 0;
}
.menu-desplegable.abierto { display: block; }
/* El menú del círculo entra en la pantalla y se desplaza: con la letra grande en
   un celular puede medir más que la pantalla, y sin esto no se podía bajar y se
   cortaba por la izquierda. */
#menuUsuario {
  max-height: calc(100vh - var(--alto-barra, 4.2rem) - .5rem); overflow-y: auto;
  max-width: calc(100vw - 16px);
}
@media (max-width: 640px) {
  #menuUsuario { position: fixed; left: 8px; right: 8px; top: calc(var(--alto-barra, 4.2rem) + 4px);
                 min-width: 0; max-width: none; }
}
/* Con el menú abierto, la barra pasa por encima de cualquier ventana flotante. */
.barra-superior.con-menu { z-index: 90; }
.menu-encabezado {
  padding: .5rem .9rem; font-size: .85rem; font-weight: 700; color: var(--texto-suave);
  border-bottom: 1px solid #e6eaee; margin-bottom: .3rem;
}
.item-menu {
  display: block; width: 100%; text-align: left;
  padding: .5rem .9rem; font-size: .95rem; color: var(--texto);
  background: none; border: none; cursor: pointer; text-decoration: none;
  font-family: inherit;
}
.item-menu:hover { background: #f0f6fb; color: var(--azul-oscuro); }
.menu-separador { border-top: 1px solid #e6eaee; margin: .3rem 0; }

/* ====== Contenido ====== */
/* Los anchos máximos van en PÍXELES, no en rem: al achicar la letra con el
   zoom, la ventana/tabla NO se achica con ella — mantiene su lugar en pantalla
   y entra MÁS información en el mismo espacio. */
.contenido { padding: 1.25rem; max-width: 1088px; margin: 0 auto; }
.barra-acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; justify-content: flex-end; }

/* ====== Botones (esquinas redondeadas, SIN emojis) ====== */
.btn {
  border: 1px solid var(--borde); background: var(--blanco); color: var(--texto);
  padding: .45rem .9rem; border-radius: 6px; cursor: pointer; font-size: .95rem;
  text-decoration: none; display: inline-block;
}
/* `hidden` tiene que esconder, siempre. Cualquier regla nuestra que declare un
   `display` —`.btn` es `inline-block`— le gana a la del navegador, que es de la
   hoja del propio navegador y por lo tanto la más débil de todas. Resultado: un
   botón marcado `hidden` se seguía viendo. Vale para todo el sistema. */
[hidden] { display: none !important; }
.btn:hover { background: #eef1f4; }
/* Submit invisible que fija qué hace Enter en un formulario con varios
   botones (el navegador dispara siempre el primero). No se ve ni se tabula. */
.submit-por-defecto { position: absolute; width: 0; height: 0; padding: 0; border: 0; opacity: 0; }
.btn-primario { background: var(--azul-naval); border-color: var(--azul-naval); color: #fff; font-weight: 600; }
.btn-primario:hover { background: var(--azul-oscuro); }
/* Un botón apagado tiene que VERSE apagado: si no, parece apretable, y quien lo
   aprieta cree que la pantalla no anda. Va una sola vez para todo el sistema;
   el hover no lo despierta. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--blanco); }
.btn-primario:disabled:hover, .btn-primario[disabled]:hover { background: var(--azul-naval); }
/* Misma tipografía que cualquier botón: solo cambia el color. */
.btn-excel { color: var(--verde); }
.btn-peligro { color: var(--rojo); }

/* ====== Cajas: separación mínima 2px; título de caja navy redondeado ====== */
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; margin-bottom: 2px; }
.tarjeta h3 {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave);
  background: #eef1f4; border-bottom: 1px solid var(--borde); padding: .5rem .8rem; font-weight: 600;
}
.cuerpo-tarjeta { padding: 1rem; }
.descripcion { color: var(--texto-suave); margin-bottom: 1rem; max-width: 46rem; font-size: .95rem; }

/* Título de caja: navy redondeado — estándar para TODAS las cajas/ventanas */
.titulo-caja {
  background: var(--azul-naval); color: #fff;
  border-radius: 8px; padding: .55rem .9rem;
  font-size: 1.05rem; font-weight: 600; margin: .9rem 0 2px;
  display: flex; align-items: center; gap: .6rem;
}
.titulo-caja:first-of-type { margin-top: 0; }
.titulo-caja { scroll-margin-top: 5.5rem; }  /* los anclajes no quedan tapados por la barra fija */
.titulo-caja a { color: #dcecf7; text-decoration: none; }
.titulo-caja .acciones-titulo { margin-left: auto; display: flex; gap: .45rem; align-items: center; flex: 0 0 auto; }
/* Lo mismo para `.derecha`, que varias pantallas usan con el mismo fin (un
   contador o un botón a la derecha del título). Estaba definido SÓLO para la
   barra de arriba, así que adentro de un título de caja era un `<span>` común:
   sin `margin-left: auto` no se iba a la derecha, y sin `display: flex` sus
   hijos se apilaban uno sobre otro. */
.titulo-caja .derecha { margin-left: auto; display: flex; gap: .45rem; align-items: center; flex: 0 0 auto; }
/* Un nombre larguísimo sin espacios no puede empujar ‹ › × fuera de la
   pantalla: el título corta donde haga falta y los botones quedan. */
.titulo-caja { overflow-wrap: anywhere; min-width: 0; }
.titulo-caja .cerrar {
  margin-left: auto; background: none; border: none;
  font-size: 1.2rem; cursor: pointer; color: #cfe3f5; line-height: 1;
}
.titulo-caja .cerrar:hover { color: #fff; }
/* Flechas para recorrer el listado desde adentro de la ficha. */
.nav-ficha {
  background: none; border: 1px solid rgba(255,255,255,.4); border-radius: 6px;
  color: #dcecf7; font-size: 1rem; line-height: 1; padding: .1rem .5rem;
  cursor: pointer; text-decoration: none;
}
.nav-ficha:hover { background: var(--azul-oscuro); color: #fff; }
.nav-ficha.inactiva { opacity: .35; pointer-events: none; }

/* ====== Formularios ====== */
.fila-campos { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; align-items: center; }
.fila-campos:last-child { margin-bottom: 0; }
.campo { flex: 1; min-width: 11rem; }
.campo label { display: block; font-size: .8rem; font-weight: 600; color: var(--texto-suave); margin-bottom: .25rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .4rem .55rem; border: 1px solid var(--borde); border-radius: 6px;
  font-size: .95rem; font-family: inherit; background: #fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
.campo textarea { resize: vertical; min-height: 4rem; }
/* Una casilla no se estira al ancho del campo: quedaría lejos de su «Sí». */
.campo input[type="checkbox"], .campo input[type="radio"] { width: auto; }
/* Observaciones internas, en amarillo. Con `.campo .obs` también: `.campo textarea`
   (fondo blanco) le ganaba por especificidad y nunca se veían amarillas. */
.obs, .campo .obs { background: var(--amarillo-suave); }
/* Los botones de acción de una ventana (Guardar/Aceptar/Cancelar) van
   abajo a la DERECHA. */
.acciones-formulario { display: flex; gap: .6rem; margin-top: 1rem; justify-content: flex-end; }
.check-activo { display: flex; align-items: center; gap: .4rem; font-size: .95rem; }

/* Un registro anulado NO se esconde (para eso se anula en vez de borrar). Se
   atenúa y se tacha el importe: se lee que estuvo, y se ve que ya no cuenta. */
.fila-anulada { opacity: .55; }
.fila-anulada .col { text-decoration: line-through; }

/* La fila del listado que se está editando abajo (listado primero, ficha
   después). Sin esta marca, corregir un renglón se hace a ciegas: el
   formulario muestra unos datos y no se sabe de cuál fila salieron. */
.fila-elegida { background: #e8f1fa; }
.fila-elegida td:first-child { box-shadow: inset 3px 0 0 var(--azul); }

/* ====== Grillas ====== */
.desliza { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .32rem .5rem; font-size: .95rem; white-space: nowrap; }
/* El encabezado sube de contraste junto con el negro puro (docs/05 §3, regla 12):
   el gris suave sobre gris claro era lo primero que se perdía con luz de frente. */
thead th {
  background: #dde5ec; color: var(--azul-naval); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .3px; border-bottom: 2px solid #9fb0bf;
  text-align: left;
}
tbody tr { border-bottom: 1px solid #e6eaee; }
tbody tr:last-child { border-bottom: none; }
tbody tr[onclick] { cursor: pointer; }
tbody tr[onclick]:hover { background: #f0f6fb; }
.link { color: var(--azul); font-weight: 600; text-decoration: none; }
/* Un botón que se ve como enlace: sale como Esc en vez de navegar. */
button.boton-enlace { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
.texto-problema { color: var(--rojo); font-weight: 600; }
/* Importes y cantidades: siempre a la derecha, con dígitos de ancho parejo
   para que las columnas se lean de un vistazo. */
td.col, th.col { text-align: right; font-variant-numeric: tabular-nums; }
.linea-azul td { border-top: 2px solid var(--azul); }
.fila-total td { background: #f0f6fb; font-weight: 700; border-top: 2px solid var(--azul); font-size: 1rem; }
.pie-tabla {
  padding: .5rem .8rem; font-size: .85rem; color: var(--texto-suave);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  border-top: 1px solid #e6eaee;
}

/* ====== Chips de estado ====== */
.estado {
  display: inline-block; padding: .05rem .5rem; border-radius: 10px;
  font-size: .78rem; font-weight: 600;
}
.estado.activo { background: #e2f5e9; color: var(--verde); }
.estado.inactivo { background: #f1f1f1; color: var(--texto-suave); }
.estado.pendiente { background: var(--amarillo-suave); color: #7a6414; }
.estado.problema { background: #fde8e6; color: var(--rojo); }
.estado.sa { background: #e8f1fa; color: var(--azul-oscuro); }
.estado.negado { background: #fde8e6; color: var(--rojo); }  /* el "No" bien distinto del "Sí" */
.tabla-estado td:first-child { font-weight: 600; width: 40%; }

/* ====== Árboles en grillas: +/− por rama, grisado por nivel ====== */
.alternar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; margin-right: .35rem;
  border: 1px solid var(--borde); border-radius: 4px; background: var(--blanco);
  font-size: .8rem; font-weight: 700; color: var(--texto-suave); cursor: pointer;
  line-height: 1;
}
.alternar:hover { background: #eef1f4; color: var(--texto); }
.alternar-hueco { display: inline-block; width: 1.5rem; }
.fila-nivel-1 td { background: #f7f8f9; }
.fila-nivel-2 td { background: #eff1f4; }
.fila-nivel-3 td { background: #e7eaee; }

/* Permisos: TODA la línea en grisado verde (Sí) o rojo (No), más notorio
   cuanto más profundo el nivel — igual criterio que el grisado gris. */
.fila-si-0 td { background: #f1faf4; }
.fila-si-1 td { background: #e6f6ec; }
.fila-si-2 td { background: #daf1e3; }
.fila-si-3 td { background: #cdecd9; }
.fila-no-0 td { background: #fdf3f2; }
.fila-no-1 td { background: #fceae8; }
.fila-no-2 td { background: #fae0dd; }
.fila-no-3 td { background: #f8d6d2; }
/* El tercer estado de una rama: algunos hijos sí y otros no. La rama no lleva
   permiso adentro, así que su color se calcula de sus hijos (pintada a mano,
   una rama en rojo con hijos en verde se leía al revés), y este es el caso
   del medio. */
.fila-algo-0 td { background: #fdf8ec; }
.fila-algo-1 td { background: #fbf2dc; }
.fila-algo-2 td { background: #f8ebcb; }
.fila-algo-3 td { background: #f5e4ba; }
.estado.parcial { background: #f5e4ba; color: #7a6414; }
.descripcion-celda { color: var(--texto-suave); white-space: normal; }
.celda-vacia { color: var(--texto-suave); white-space: normal; padding: 1rem; }
.tabla-estado td { padding: .55rem .8rem; white-space: normal; }

/* ====== Avisos y errores ====== */
.caja-aviso {
  background: #e2f5e9; border: 1px solid #b5e3c4; color: var(--verde);
  border-radius: 6px; padding: .6rem .9rem; margin-bottom: 1rem; font-size: .95rem;
}
/* El aviso de la cortina por inactividad se ve igual que un error, pero no es
   uno: no comparte la clase para que en una pantalla siga habiendo un solo
   «caja-error», que es el de la ficha. */
.caja-error, .aviso-clave {
  background: #fde8e6; border: 1px solid #f2c1bc; color: var(--rojo);
  border-radius: 6px; padding: .6rem .9rem; margin-bottom: 1rem; font-size: .95rem;
}
/* El error, sin correr la pantalla de lugar: flota como una ventana emergente.
   Un cartel metido en el flujo empuja todo hacia abajo y encima hay que ir a
   buscar qué campo estaba mal. Flotando, la ficha queda donde estaba y el foco
   puede ir derecho al campo. */
/* Arranca DEBAJO del título de la ficha, no encima: con la letra grande tapaba
   el nombre de lo que se estaba cargando. `--alto-barra` es el alto de la barra
   si alguien lo mide (hoy no lo mide nadie y vale el valor de arranque); los
   3,4rem son el título. El JavaScript de base.html lo vuelve a ubicar debajo del
   título medido. */
.caja-error.flotante {
  position: fixed; top: calc(var(--alto-barra, 4.2rem) + 3.4rem);
  left: 50%; transform: translateX(-50%);
  z-index: 120; max-width: 42rem; width: calc(100% - 2rem); margin: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  display: flex; align-items: flex-start; gap: .7rem;
}
.caja-error.flotante .cerrar {
  border: none; background: none; color: inherit; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 .15rem; margin-left: auto;
}
/* Y el campo que causó el error queda marcado: sin la marca, el mensaje dice
   qué pasa pero no dónde. */
.campo-con-error input, .campo-con-error select, .campo-con-error textarea,
input.campo-con-error, select.campo-con-error, textarea.campo-con-error {
  border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(198, 40, 40, .18);
}

/* ====== La cortina por inactividad ======
   Tapa TODO y no deja leer nada de lo que había debajo — que es para lo que
   existe. Va por encima de cualquier otra cosa de la pantalla, incluida la
   ventana de confirmación: si algo quedó preguntando, tampoco se tiene que
   poder leer. */
.velo-inactividad {
  position: fixed; inset: 0; z-index: 200;
  background: var(--azul-naval);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.velo-inactividad .ventana-chica { margin: 0; }

/* Alerta que AVISA pero no frena (un dato raro que conviene mirar). Ni verde
   ni roja: amarilla, para que se note que es una advertencia y no un error. */
.caja-alerta {
  background: var(--amarillo-suave); border: 1px solid #e8d48a; color: #7a6414;
  border-radius: 6px; padding: .6rem .9rem; margin-bottom: 1rem; font-size: .95rem;
}
.caja-alerta ul { margin: 0; padding-left: 1.1rem; }

/* ====== Pantallas de acceso (login y ventanas de clave) ======
   Fondo gris, sin logo (D9), y una ventana chica centrada con su título navy. */
.fondo-acceso::before {
  content: ""; position: fixed; inset: 4.4rem 0 0 0; pointer-events: none;
}
.ventana-chica { position: relative; width: 100%; max-width: 24rem; margin: 3rem auto 0; }
.ventana-chica .tarjeta { margin-bottom: 0; }

/* ====== Ficha como ventana flotante sobre el listado (docs/05 §4) ======
   La ventana comienza DEBAJO de la barra de encabezado: dos títulos navy
   pegados se confunden. */
.velo {
  display: none; position: fixed; inset: 0;
  background: rgba(20,30,40,.45); z-index: 30;
  overflow-y: auto;
  /* Arriba deja el alto de la barra. `--alto-barra` es ese alto si alguien lo
     mide (en el celular la barra se parte en dos renglones); hoy no lo mide
     nadie y valen los 6rem de arranque. */
  padding: calc(var(--alto-barra, 6rem)) 1rem 2rem;
}
.velo.abierto { display: block; }

/* ====== Ventana de confirmación propia (centrada, docs/05 §5) ====== */
.velo-centrado {
  display: none; position: fixed; inset: 0;
  background: rgba(20,30,40,.45); z-index: 50;
  align-items: center; justify-content: center; padding: 1rem;
}
.velo-centrado.abierto { display: flex; }
.ventana-confirmar { width: 100%; max-width: 26rem; }
.ventana-confirmar .tarjeta { margin-bottom: 0; }
/* Un aviso con una TABLA adentro necesita otro ancho: con 26rem la tabla no
   entraba, y como la tarjeta recorta, lo que sobraba no se podía ni ver ni
   desplazar (los datos salían cortados contra el borde).
   Se ensancha en `rem` para que acompañe a la letra (misma razón que la
   ficha, abajo). */
.ventana-confirmar.ancha { max-width: 58rem; }
.ventana-confirmar.ancha #textoConfirmar { max-height: 60vh; overflow: auto; }
.ventana-confirmar.ancha table { width: 100%; border-collapse: collapse; }
.ventana-confirmar.ancha th, .ventana-confirmar.ancha td { padding: .25rem .45rem; }
/* El ancho de una ficha flotante, en `rem`. En `px` fijos, con la letra
   agrandada (A− A A+) el texto crecía y la ventana no: el contenido se apretaba
   y aparecía scroll de costado. En `rem` la ventana acompaña a la letra, y el
   zoom del navegador sigue funcionando igual. */
.ficha { max-width: 46rem; margin: 0 auto; }
.ficha .tarjeta { margin-bottom: 0; }
/* La ficha ancha: la que lleva grillas (unidades, documentos, coeficientes) que
   no entran en el ancho común sin cortar. */
.ficha.ficha-ancha { max-width: 65rem; }

/* ====== Cargar algo nuevo sin salir de acá ======
   Ctrl+Ins (o el botón derecho) sobre un campo que elige de una lista abre la
   ficha de alta de esa entidad adentro de esta ventana. La ficha es LA MISMA
   pantalla del ABM, traída en un iframe: no hay una segunda versión que
   mantener. Por encima de la ficha flotante (30) y por debajo de la
   confirmación (50), que puede abrirse sobre ella. */
.velo-ventana {
  display: none; position: fixed; inset: 0;
  background: rgba(20,30,40,.45); z-index: 40;
  align-items: center; justify-content: center; padding: 1rem;
}
.velo-ventana.abierto { display: flex; }
.ventana-alta {
  width: 100%; max-width: 780px; height: 100%; max-height: 90vh;
  display: flex; flex-direction: column;
}
.ventana-alta .titulo-caja { flex: 0 0 auto; }
/* El marco de la ficha: el iframe ocupa todo lo que queda y hace su propio
   scroll, así la pantalla de atrás nunca se mueve. */
.ventana-alta iframe {
  flex: 1 1 auto; width: 100%; border: none; background: var(--fondo, #fff);
  border-radius: 0 0 8px 8px; min-height: 12rem;
}

/* El MISMO ABM, visto adentro de la ventana: se le esconde la barra de arriba
   y poco más. El listado se ve, porque la ventana también es el buscador
   grande y el lugar donde se entra a corregir (docs/05 §3, «Elegir un registro
   entre muchos» y «Alta al vuelo»). Se resuelve acá, con cuatro reglas, en vez
   de con un `{% if %}` en cada plantilla de ABM. */
.en-ventana .barra-superior { display: none; }
/* Una pantalla incrustada como sección de otra: sin la barra de arriba —la
   tiene la de afuera— y con el margen justo para ver su borde. */
.incrustado .barra-superior { display: none; }
.incrustado .contenido { padding: .25rem .3rem; }
.en-ventana .contenido { padding-top: 0; }
/* Con una ficha abierta, el listado de atrás se esconde: la ficha es la
   pantalla entera (adentro de la ventana no flota). Sin ficha, el listado ES
   lo que se vino a ver. El `:has()` evita tener que avisarle a la pantalla
   desde el JavaScript —y el parpadeo de mostrar el listado y esconderlo. */
.en-ventana:has(.contenido .velo) .contenido > *:not(.velo):not(.barra-ventana) {
  display: none;
}
/* Exportar a Excel desde una ventana que se abrió para elegir algo es ruido
   (y una descarga adentro de un marco). */
.en-ventana .btn-excel { display: none; }
/* Lo que llega a la ventana y NO es una pantalla del sistema —«no tenés
   permiso», «algo salió mal»— se muestra igual: una ventana en blanco no le
   dice nada a nadie. La clase la pone base.html. */
.en-ventana.sin-ficha .contenido > * { display: block; }
/* La salida del ABM adentro de la ventana, con el mouse: la barra de arriba
   no está, así que el «← Volver a …» va acá. */
.barra-ventana { margin-bottom: .8rem; }
/* Adentro de la ventana, la fila del listado ES el botón de elegir. */
.en-ventana .fila-elegible { cursor: pointer; }
.en-ventana .col-elegir { width: 2.2rem; text-align: center; }
/* Adentro de la ventana la ficha ya NO flota: es la pantalla entera. Queda
   `relative` con `inset: auto` (y no `static`) solo para no pisar la regla de
   la barra con mucho zoom, que se apoya en el orden de este archivo. */
.en-ventana .velo {
  display: block; position: relative; inset: auto;
  background: none; padding: 0; overflow: visible;
}
.en-ventana .ficha { max-width: none; }
/* El título de la ficha lo pone la ventana de afuera: adentro sería el
   segundo navy pegado al otro. */
.en-ventana .ficha > .titulo-caja { display: none; }

/* Menú del botón derecho, propio del sistema (nunca el del navegador). */
.menu-contextual {
  display: none; position: absolute; z-index: 60;
  background: #fff; border: 1px solid var(--borde);
  border-radius: 6px; box-shadow: 0 4px 14px rgba(20,30,40,.22);
  padding: .25rem; min-width: 15rem;
}
.menu-contextual.abierto { display: block; }
.menu-contextual button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: .5rem .7rem; font: inherit; font-size: .95rem; cursor: pointer;
  border-radius: 4px; color: var(--texto, inherit);
}
.menu-contextual button:hover, .menu-contextual button:focus {
  background: var(--azul-suave, #eef3f8); outline: none;
}
.menu-contextual .atajo { color: #667; font-size: .85rem; margin-left: .6rem; }
.subtitulo {
  font-size: .95rem; font-weight: 600; margin: 1.2rem 0 .5rem;
  border-top: 2px solid var(--azul); padding-top: 1rem;  /* línea azul divisoria */
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
/* Botón chico pegado al subtítulo (ej. "+ Agregar" de una grilla de carga). */
.subtitulo .btn { padding: .2rem .6rem; font-size: .85rem; font-weight: 400; }

/* Grillas de carga (contactos, unidades, coeficientes): las cajas de texto
   adentro de la grilla llevan el MISMO formato que cualquier campo (borde
   redondeado, foco azul). */
.tabla-carga td { padding: .32rem .3rem; }
.tabla-carga td input, .tabla-carga td select {
  width: 100%; min-width: 7rem; padding: .4rem .55rem; border: 1px solid var(--borde);
  border-radius: 6px; font-size: .95rem; font-family: inherit; background: #fff;
}
.tabla-carga td input:focus, .tabla-carga td select:focus {
  outline: 2px solid var(--azul); border-color: var(--azul);
}
/* Una grilla de carga que además es lista estándar: el ancho lo manda la
   columna, que se arrastra. Con el piso de 7rem de la grilla común, cinco
   campos empujaban la tabla más allá de la ficha y aparecía un scroll de
   costado sin motivo. */
.tabla-listado.tabla-carga td input:not([type="checkbox"]),
.tabla-listado.tabla-carga td select { min-width: 0; }
.tabla-carga td input[type="checkbox"] { width: auto; min-width: 0; }
.valor-solo-lectura { padding: .45rem 0; }

/* ---- La lista que se despliega y se achica al escribir ----
   Flota sobre todo (también sobre las fichas flotantes) y se ubica debajo de
   la caja que la abrió, o arriba si abajo no hay lugar. La flechita dice que
   es una lista: se toca y se despliega. */
input.caja-buscable {
  padding-right: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
}
.lista-desplegable {
  position: fixed; z-index: 5000; background: #fff; color: #000;
  border: 1px solid var(--borde); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  max-height: 16rem; max-width: min(34rem, 96vw); overflow-y: auto; font-size: .95rem;
}
.lista-desplegable-opcion {
  padding: .35rem .65rem; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lista-desplegable-opcion.elegida { font-weight: 600; }
.lista-desplegable-opcion.resaltada, .lista-desplegable-opcion:hover { background: #e3eefa; }
.lista-desplegable-vacia { padding: .35rem .65rem; color: #555; font-style: italic; }
/* Quitar una fila: una cruz roja compacta, no un botonazo. */
.quitar {
  color: var(--rojo); background: none; border: none; cursor: pointer;
  font-size: .9rem; padding: .2rem .4rem;
}
.quitar:hover { font-weight: 700; }
/* ====== Campos de importes ======
   Números a la derecha con ancho de dígito parejo. */
input.campo-num {
  width: 100%; min-width: 5rem; text-align: right; padding: .4rem .55rem;
  border: 1px solid var(--borde); border-radius: 6px;
  font-size: .95rem; font-family: inherit; font-variant-numeric: tabular-nums;
}
input.campo-num:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
input.campo-num.chica { width: 6rem; min-width: 0; }
td.centro, th.centro { text-align: center; }
.etiq { font-size: .78rem; color: var(--texto-suave); }
/* La marca de color de un tipo (el nombre del tipo sobre su color). Los colores
   los da la parametrización. */
.marca-comprobante { display: inline-block; padding: 0 .4rem; border-radius: 4px; font-weight: 600;
  font-size: .92em; line-height: 1.4; white-space: nowrap; }
/* Tilde alineada con la altura de los campos de al lado. */
.check-inline { display: flex; align-items: center; gap: .4rem; font-size: .95rem; height: 2.35rem; }
.check-inline label { font-weight: 400; color: var(--texto); margin: 0; }

.fila-botones { display: flex; gap: .6rem; flex-wrap: wrap; }
/* Par de botones pegados (un interruptor de dos posiciones). */
.grupo-boton { display: inline-flex; }
.grupo-boton .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Con mucho zoom la barra fija ocuparía demasiado: cuando pasa del ~20 %
   del alto de la pantalla, deja de estar fija y scrollea con el contenido.
   La barra mide ~4.4rem → umbral: 22rem. */
@media (max-height: 22rem) {
  .barra-superior { position: static; }
  .fondo-acceso::before { inset: 0; }
}

/* ====== Responsive ====== */
@media (max-width: 640px) {
  .contenido { padding: .75rem; }
  .col-opcional { display: none; }
  /* En el celular, la barra va en DOS renglones y nada más: arriba el nombre del
     sistema con «Atrás», el tamaño de la letra y el círculo; abajo el título
     entero. Si el título compartiera renglón con el nombre, empujaría los
     botones a un tercer renglón. Todo lo que no es el nombre ni el bloque de la
     derecha (el título y lo que una pantalla agrega al lado, `barra_cabecera`)
     baja al segundo renglón. */
  .barra-superior { gap: .35rem .6rem; padding: .55rem .8rem; }
  .barra-superior > :not(.logo):not(.derecha) { order: 10; flex: 1 1 100%; }
  .barra-superior h1 { font-size: 1.2rem; }
  .barra-superior .logo { font-size: 1rem; }
  .barra-superior .derecha { gap: .5rem; }
  .barra-superior .btn-volver { padding: .3rem .55rem; }
  .tabla-estado td:first-child { width: auto; }
  .campo { min-width: 100%; }
}

/* ====== Solo lectura (ver sin editar, docs/05 §4) ====== */
/* Un fieldset "plano" agrupa los campos de una ficha sin cambiar su aspecto;
   deshabilitado, deja todo en solo lectura (los botones de acción se ocultan
   aparte: sin permiso no se ven). */
fieldset.plano { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plano:disabled input,
fieldset.plano:disabled select,
fieldset.plano:disabled textarea { background: #f3f4f6; color: #374151; }

/* ====== Dónde está parado el teclado (va ÚLTIMO: le tiene que ganar a
   cualquier regla de foco anterior) ======
   Un botón pintado de azul no es el que aprieta Enter: el azul del botón
   principal es su COLOR, no su foco. El foco es este anillo amarillo con halo:
   no se parece a nada más de la pantalla, así que lo que está marcado así es
   lo que responde a Enter.
   Se usa :focus-visible — con el mouse no aparece, solo al navegar con
   teclado, que es cuando hace falta saberlo. */
.btn:focus-visible,
button:focus-visible,
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible,
input.campo-num:focus-visible,
.tabla-carga td input:focus-visible, .tabla-carga td select:focus-visible,
a.link:focus-visible, .nav-ficha:focus-visible, .item-menu:focus-visible,
.barra-superior .btn-volver:focus-visible,
.alternar:focus-visible, .quitar:focus-visible,
.barra-lista input[type="search"]:focus-visible, input[type="search"]:focus-visible {
  outline: 3px solid #e0b400;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(224, 180, 0, .25);
}

/* ====== Ayudas de pantalla, que se pueden apagar ======
   Los carteles que explican cómo funciona cada pantalla sirven al principio
   y estorban cuando ya te sabés el sistema. Cada usuario los prende o los
   apaga desde el menú de su círculo de iniciales; la preferencia se guarda
   en su ficha, así lo acompaña en cualquier máquina.
   Ojo al escribir pantallas nuevas: la clase «ayuda» es para lo que EXPLICA.
   Un mensaje de "todavía no hay nada cargado" o un aviso de estado NO lleva
   esta clase — si se esconde, la pantalla queda muda. */
body.sin-ayudas .ayuda { display: none; }

/* La fila activa: se marca con el fondo, sin barras de color. */
.fila-activa td { background: #eaf4fb; }
.btn-chico { padding: .1rem .5rem; font-size: .85rem; }

/* El estado de un documento, en rojo y espaciado (lo busca también el
   JavaScript del listado al medir columnas). */
.marca-estado { color: var(--rojo); font-weight: 700; letter-spacing: .08em; }

@media print {
  .barra-superior, .barra-acciones, .sin-imprimir, .velo-centrado { display: none !important; }
  body { background: #fff; }
  .contenido { padding: 0; max-width: none; }
}

/* ============================================================
   EL LISTADO ESTÁNDAR (docs/05 §3)
   ------------------------------------------------------------
   El sistema es, en su mayoría, listados. Esto se escribe UNA vez acá y
   lo hereda toda pantalla de lista.

   Una pantalla se declara listado con el bloque `clases_body` en
   «pantalla-lista» y marcando su tabla con `class="tabla-listado"`. El resto
   —ordenar, anchos, cartelitos, totales— lo arma solo el JavaScript de
   base.html. Las «reglas» que se citan abajo son las de docs/05 §3.
   ============================================================ */

/* ---- Regla 1: una sola zona de scroll, la tabla. La página no scrollea ----
   Dos scrolls peleándose hacen que al bajar por la lista se vayan de pantalla
   los encabezados y los botones. Con la página quieta, lo de arriba y lo de
   abajo no se puede ir a ningún lado. */
body.pantalla-lista { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.pantalla-lista .barra-superior { flex: 0 0 auto; }
/* El listado usa TODO el ancho: el tope de 1088px es para una ficha, que se
   lee mejor angosta; una tabla angosta esconde columnas detrás de un scroll
   horizontal, y con ellas los botones de la derecha. */
body.pantalla-lista .contenido {
  flex: 1 1 auto; min-height: 0; max-width: none;
  /* El `margin: 0 auto` que el contenido trae de las fichas (donde centrar SÍ
     corresponde) hay que apagarlo a mano: en un contenedor flexible, un margen
     `auto` en el eje transversal **anula el estirado** y centra el bloque en su
     tamaño natural. Con él puesto, cuantas menos columnas tenía un listado, más
     angosto se dibujaba. */
  margin: 0; width: 100%;
  display: flex; flex-direction: column; overflow: hidden; padding: .8rem 1rem;
}
/* Lo que va arriba de la tabla (avisos, ayuda, cajas de contexto) no se
   estira, pero SÍ se encoge: hay pantallas con bastante preámbulo, y con la
   página quieta eso empujaba el listado abajo del borde, o sea lo hacía
   desaparecer. Encogiendo, cada caja scrollea adentro suyo y la lista nunca se
   pierde de vista. */
body.pantalla-lista .contenido > * { flex: 0 1 auto; min-height: 0; overflow: auto; }
/* La lista se come todo lo que sobra y tiene piso: por apretada que quede la
   pantalla, siempre se ven unas cuantas filas.
   La base es CERO, no `auto` (D122). Con `auto` la lista partía del alto de la
   tabla entera (miles de píxeles en una cuenta de años) y el navegador, para
   hacerla entrar, encogía a todos en proporción a su tamaño: la tabla perdía un
   92 % y lo de arriba (las cifras, los botones) también, hasta quedar en una
   franja de pocos píxeles. Con base cero, lo de arriba ocupa lo suyo y la lista
   se queda con lo que sobra, nunca menos que su piso. */
body.pantalla-lista .contenido > .tarjeta.lista {
  flex: 1 1 0; min-height: 14rem; margin-bottom: 0; overflow: hidden;
}
body.pantalla-lista .caja-aviso,
body.pantalla-lista .caja-error,
body.pantalla-lista .caja-alerta { margin-bottom: .6rem; }
/* Un aviso no se achica nunca para dejarle lugar a la lista. La regla de arriba
   deja que todo lo que está sobre la tabla ceda alto, con su scroll; con dos
   avisos, la caja verde quedaba aplastada en una franja que no se leía. */
body.pantalla-lista .contenido > .caja-aviso,
body.pantalla-lista .contenido > .caja-error,
body.pantalla-lista .contenido > .caja-alerta { flex: 0 0 auto; overflow: visible; }
/* La ayuda de la pantalla no puede comerse la lista: se le pone techo propio
   y scrollea adentro suyo. */
body.pantalla-lista .tarjeta.ayuda { max-height: 9rem; overflow: auto; margin-bottom: .6rem; }
/* …pero tampoco puede quedar aplastada. La regla de arriba la dejaba con
   `flex: 0 1 auto`, o sea ENCOGIBLE: con una pantalla baja o con zoom, la
   lista —que tiene piso de 14rem— la comprimía hasta dejar una franja de un
   renglón. Con `flex: 0 0 auto` ocupa lo que necesita, hasta su techo de 9rem,
   y adentro scrollea. */
body.pantalla-lista .contenido > .tarjeta.ayuda { flex: 0 0 auto; }
/* El cuadro de «buscar mientras se escribe» que vive en la barra de la lista:
   mismo formato que cualquier campo, no el crudo del navegador. */
.barra-lista input[type="search"] {
  font-family: inherit; font-size: .95rem; padding: .45rem .6rem;
  border: 1px solid var(--borde); border-radius: 6px; background: #fff;
  flex: 1 1 14rem; min-width: 9rem; max-width: 26rem;
}
/* Con el mouse, azul; con el teclado manda la marca ámbar del foco: sin el
   :not, esta regla va después y le ganaba. */
.barra-lista input[type="search"]:focus:not(:focus-visible) { outline: 2px solid var(--azul); border-color: var(--azul); }
/* La ficha flotante SÍ scrollea (es `position: fixed` con su propio overflow),
   así que la página quieta no le hace nada. */

/* La tarjeta que contiene la lista: botones, filtros, tabla y pie, apilados;
   solo la tabla scrollea. */
.tarjeta.lista { display: flex; flex-direction: column; overflow: hidden; }
.tarjeta.lista > .desliza { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tarjeta.lista > .pie-tabla { flex: 0 0 auto; }
.tarjeta.lista > .barra-lista, .tarjeta.lista > .panel-filtros { flex: 0 0 auto; }

/* ---- Regla 2: la barra de botones, siempre a la vista ----
   Vive DENTRO de la tarjeta de la lista, arriba de la tabla: así no se va con
   el scroll y además queda pegada a lo que opera. */
.barra-lista {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding: .5rem .7rem; margin: 0;
  background: var(--blanco); border-bottom: 1px solid var(--borde);
  justify-content: flex-start;
}
.barra-lista .empuja { margin-left: auto; }
.barra-lista .interruptor {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; color: var(--texto-suave); cursor: pointer;
}
.barra-lista .interruptor input { cursor: pointer; }

/* ---- Regla 3: filtros plegados, y los puestos a la vista en cartelitos ----
   La parte de arriba de la pantalla no aparece por defecto. Con el detalle que
   hace la diferencia: un filtro activo tiene que notarse PLEGADO, si no alguien
   mira una lista filtrada creyendo que la ve entera. Para eso están los
   cartelitos amarillos. */
.panel-filtros { display: none; }
.panel-filtros.abierto { display: block; }
.tarjeta.lista > .panel-filtros {
  background: #fafbfc; border-bottom: 1px solid var(--borde); padding: .7rem;
}
.tarjeta.lista > .panel-filtros .tarjeta { margin: 0; border: none; background: none; }
.tarjeta.lista > .panel-filtros .cuerpo-tarjeta { padding: 0; }
.tarjeta.lista > .panel-filtros .fila-campos { margin-bottom: 0; }
.btn.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.chips-filtro { display: inline-flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.chip-filtro {
  background: var(--amarillo-suave); border: 1px solid #e0c86a; border-radius: 20px;
  padding: .1rem .3rem .1rem .6rem; font-size: .82rem;
  display: inline-flex; align-items: center; gap: .3rem; max-width: 22rem;
}
.chip-filtro .texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-filtro button {
  border: none; background: none; cursor: pointer; font-weight: 700;
  color: var(--texto-suave); font-size: 1rem; line-height: 1; padding: 0 .25rem;
}
.chip-filtro button:hover { color: var(--rojo); }

/* ---- La tabla ---- */
/* `fixed` es lo que permite dos cosas: que una referencia larga NO rompa la
   tabla (regla 8) y que el ancho de cada columna se pueda arrastrar (regla 5).
   Sin ancho fijo, el navegador reparte según el contenido y lo que uno
   arrastra se le vuelve a escapar. */
table.tabla-listado { width: 100%; border-collapse: separate; border-spacing: 0; }
/* El ancho fijo lo prende el JavaScript DESPUÉS de medir cuánto ocupa de
   verdad cada columna: si se declarara acá, el navegador repartiría todo en
   partes iguales y la fecha ocuparía lo mismo que el concepto. Sin
   JavaScript la tabla se comporta como siempre (scroll horizontal), que es
   peor pero no rompe nada. */
table.tabla-listado.anchos-fijos { table-layout: fixed; min-width: 100%; }
/* ---- Regla 2: los encabezados, siempre a la vista ---- */
table.tabla-listado thead th {
  position: sticky; top: 0; z-index: 10;
  background: #dde5ec; color: var(--azul-naval); font-weight: 700;
  font-size: .8rem; text-transform: none; letter-spacing: 0;
  border-bottom: 2px solid #9fb0bf; text-align: left;
  padding: .45rem .55rem; white-space: nowrap;
}
table.tabla-listado thead th.col { text-align: right; }
/* ---- Regla 4: ordenar con clic en el título; otro clic invierte ---- */
table.tabla-listado thead th.ordenable { cursor: pointer; user-select: none; }
table.tabla-listado thead th.ordenable:hover { background: #cfdae4; }
table.tabla-listado thead th .envuelto { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; }
table.tabla-listado thead th .flecha { color: var(--azul); font-size: .75rem; margin-left: .25rem; opacity: 0; }
table.tabla-listado thead th.ordenada .flecha { opacity: 1; }
/* ---- Regla 5: el ancho se arrastra, como en Excel ----
   La franja agarrable vive ADENTRO de la celda, pegada a su borde derecho, y
   es hermana del `.envuelto` — no hija. Adentro la recortaba el
   `overflow: hidden` de los títulos largos y quedaba inagarrable; y afuera del
   `th` la taparía la celda siguiente, que también es `sticky`. Los últimos
   11 px de cada columna, que es justo donde uno apunta. */
/* (No hace falta `position: relative` en el `th`: ya es `sticky` por la regla 2
   —y declararle `relative` acá lo desclavaría—, y `sticky` alcanza de sobra
   para ubicar un hijo absoluto.) */
table.tabla-listado thead th .tirador {
  position: absolute; right: 0; top: 0; height: 100%; width: .7rem;
  cursor: col-resize; z-index: 3;
}
/* Se nota al pasar el mouse: sin una marca visible, nadie descubre que la
   columna se puede ensanchar. */
table.tabla-listado thead th .tirador:hover { background: var(--azul); opacity: .35; }
/* Y la línea divisoria dice dónde termina cada columna, que es donde hay que
   apuntar. */
table.tabla-listado thead th + th { border-left: 1px solid #b9c7d3; }
body.arrastrando-columna { cursor: col-resize; user-select: none; }
/* ---- Regla 8: contenido largo, cortado con puntos y legible al pasar el mouse ----
   Una referencia larga no puede llevarse toda la información de la pantalla. */
table.tabla-listado tbody td, table.tabla-listado tfoot td {
  padding: .38rem .55rem; border-bottom: 1px solid #e8ecef;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.tabla-listado tbody tr { border-bottom: none; }
table.tabla-listado tbody tr:hover > td { background: #f6f9fb; }
/* ---- Regla 9: los totales, abajo de sus propias columnas ----
   No en un pie de texto: debajo de la columna que suman, y pegados al fondo
   del marco para que se lean aunque la lista sea larga (regla 2). */
table.tabla-listado tfoot td {
  position: sticky; bottom: 0; z-index: 10;
  background: #dde5ec; color: var(--azul-naval); font-weight: 700;
  border-top: 2px solid #9fb0bf; border-bottom: none;
}
table.tabla-listado tfoot td.col { text-align: right; font-variant-numeric: tabular-nums; }
/* ---- Regla 13: los datos derivados van en itálica ----
   Los que calcula el sistema y nadie carga a mano (el saldo de un inquilino,
   el estado de un contrato). La itálica dice «esto se ve, no se edita». El
   color baja apenas, lo justo para distinguirse sin volverse ilegible. */
table.tabla-listado td.derivada { color: #48535e; font-style: italic; }
/* Lo derivado va en itálica también fuera de los listados (en una grilla de
   carga, lo que el sistema calcula de los otros datos). */
.tabla-carga td.derivada, .derivada { font-style: italic; }
table.tabla-listado th.derivada { font-style: italic; }
/* ---- Regla 16: lo que agrupa no es una fila de datos ----
   Cuando un listado agrupa (un recibo con las cuotas que cobra), el agrupador
   se dibuja como BANDA corrida, sin columnas alineadas, para que nunca se lea
   como un registro de esa tabla. */
table.tabla-listado tr.banda > td {
  background: var(--azul-naval); color: #fff; font-weight: 600;
  padding: .35rem .6rem; font-size: .9rem; white-space: normal;
}
table.tabla-listado tr.banda .total { float: right; font-weight: 400; opacity: .85; }
table.tabla-listado tr.banda a { color: #8fc7ea; }
/* Una fila que cuelga de otra: se corre a la derecha y viaja pegada a su padre
   al ordenar. */
table.tabla-listado tr.fila-hija > td:first-child { padding-left: 1.9rem; }
table.tabla-listado tr.fila-hija > td { font-size: .9rem; color: var(--texto-suave); }

/* ---- Regla 7: lo inactivo o anulado no se muestra por defecto ----
   Las personas, unidades o usuarios inactivos no aparecen por defecto. El
   interruptor lo pone solo el JavaScript cuando encuentra alguna fila marcada;
   sin filas inactivas no aparece ningún control que explicar. */
tr.fila-inactiva { display: none; }
body.ver-inactivos tr.fila-inactiva { display: table-row; }

/* La fila a la que se vuelve al salir de la ficha (regla 6) usa la marca que
   ya existía, `.fila-elegida`. */

/* Adentro de la ventana de «elegir, corregir o cargar» el listado NO toma la
   pantalla entera: es un marco chico dentro de otra pantalla. Se le saca la
   altura completa para que el iframe crezca con su contenido. */
.en-ventana.pantalla-lista, body.en-ventana.pantalla-lista { height: auto; overflow: visible; display: block; }
.en-ventana.pantalla-lista .contenido { overflow: visible; display: block; }
.en-ventana.pantalla-lista .tarjeta.lista { overflow: visible; }
.en-ventana.pantalla-lista .tarjeta.lista > .desliza { overflow: auto; max-height: 60vh; }

/* Adentro de esa misma ventana el buscador NO se pliega: la ventana se abre
   justamente para buscar (es también el buscador grande). Plegar el filtro ahí
   sería esconder la herramienta principal detrás de un botón. */
.en-ventana .panel-filtros { display: block; }
.en-ventana [data-abre-filtros] { display: none; }

/* El círculo de las iniciales es la referencia para ubicar lo que se le pone encima. */
.circulo-boton { position: relative; }

/* En el celular, el cartel de error flotante (`.caja-error.flotante`) va abajo,
   a lo ancho de la pantalla. La regla venía de la ventana flotante de mensajes
   del NP, que acá no existe; se conserva porque hoy es la que ubica al cartel de
   error en el celular. */
@media (max-width: 700px) {
  .flotante {
    left: .5rem !important; right: .5rem !important; top: auto !important; bottom: .5rem !important;
    width: auto !important; height: 70vh !important; box-shadow: 0 4px 16px rgba(13,36,56,.25);
  }
}

/* ===========================================================================
   EL PANEL DEL PIE
   ===========================================================================
   Una caja colapsada en el fondo de la pantalla, que muestra su título y sus
   botones y crece hacia arriba al pasar el mouse; un clic en la barra la deja
   crecida y otro la vuelve a bajar. El JavaScript lo pone base.html; una
   pantalla lo hereda poniéndole la clase `panel-pie`. Vive acá y no en cada
   plantilla para que todas las pantallas que lo usen se vean iguales.

   Tres cosas que sostienen el diseño:
   · **Va al pie, siempre**. El `margin-top:auto` lo empuja al fondo del área de
     trabajo, aunque lo de arriba sea corto: el hueco queda en el medio y el panel no
     cambia de lugar. Lo que se busca con el mouse está siempre donde mismo.
   · **Colapsado se ve el título y los botones.** Lo que hay que apretar nunca se
     esconde; lo que se esconde es el detalle.
   · **El retardo es sólo al abrir** (no al cerrar): pasar por encima de casualidad
     camino a otra cosa no tiene que desplegar nada.
   =========================================================================== */
.panel-pie { flex: 0 0 auto; display: flex; flex-direction: column; margin-top: auto; }
/* Las dos convenciones que usan las pantallas para el cuerpo del panel. */
.panel-pie > .cuerpo, .panel-pie > .panel-cuerpo {
  flex: 0 1 auto; max-height: 0; min-height: 0; overflow: hidden; padding: 0 .8rem;
  transition: max-height .18s ease .35s, padding .18s ease .35s;
}
.panel-pie:hover > .cuerpo, .panel-pie.fijo > .cuerpo, .panel-pie:focus-within > .cuerpo,
.panel-pie:hover > .panel-cuerpo, .panel-pie.fijo > .panel-cuerpo,
.panel-pie:focus-within > .panel-cuerpo {
  /* Hasta la MITAD de la pantalla si hay contenido que lo justifique. El clamp
     hace las dos cosas: nunca pasa de la mitad, y si adentro hay poco, el panel
     crece sólo lo que ocupa lo que tiene. */
  max-height: clamp(8rem, 50vh, 30rem); overflow: auto; padding: .5rem .8rem;
  transition-delay: 0s;
}
/* La barra que se agarra: el título de la caja, cualquiera de las dos formas. */
.panel-pie > .titulo-caja, .panel-pie > h2 { cursor: pointer; }
.panel-pie .fijar { margin-left: .4rem; font-size: .8rem; opacity: .75; }

/* Qué quiere decir cada color: la tabla que abre un botón con data-colores. */
.tabla-colores { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .92rem; text-align: left; }
.tabla-colores td { padding: .3rem .45rem; border-bottom: 1px solid #eef1f4; vertical-align: top; }
.tabla-colores td:first-child { width: 11rem; white-space: nowrap; }
.muestra-color { display: inline-block; padding: .1rem .45rem; border-radius: 4px; }
.boton-colores { min-width: 2rem; justify-content: center; font-weight: 700; }

/* ====== Lo que sale del sistema como archivo ======
   Las clases llevan el prefijo `np-arch-` para que nunca choquen con el nombre
   de una clase de una pantalla. */

/* La nota al pie: «Preparando el Excel…», «No se guardó». No interrumpe —para eso está
   la ventana del sistema—: avisa y se va sola. Por encima de las ventanas del
   sistema (50) y por debajo de la cortina por inactividad (200). */
.np-arch-nota {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70;
  display: flex; align-items: center; gap: .6rem; max-width: min(34rem, calc(100% - 2rem));
  background: var(--blanco); color: var(--texto); border: 1px solid var(--borde);
  border-left: 4px solid var(--azul); border-radius: 8px; padding: .55rem .7rem;
  box-shadow: 0 6px 22px rgba(13,36,56,.18); font-size: .95rem; line-height: 1.35;
}
.np-arch-nota-texto { flex: 1 1 auto; min-width: 0; }
.np-arch-nota-cerrar {
  flex: 0 0 auto; border: 0; background: none; color: var(--texto-suave); cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 0 .2rem;
}
.np-arch-nota-cerrar:hover { color: var(--texto); }

/* El marco donde se carga lo que se imprime: invisible y sin ocupar lugar, pero NO
   `display: none` (con eso el navegador no carga el PDF y no hay nada que imprimir). */
.np-arch-imprimir {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border: 0;
  visibility: hidden; pointer-events: none;
}

/* La ventana de compartir: las dos vías, una debajo de la otra. */
.np-arch-compartir { text-align: left; }
.np-arch-archivos {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .55rem; word-break: break-word;
}
.np-arch-estado { color: var(--texto-suave); font-size: .92rem; }
.np-arch-fila { display: flex; align-items: center; gap: .8rem; }
.np-arch-fila > p { flex: 1 1 auto; margin-bottom: 0 !important; }
.np-arch-fila > .btn { flex: 0 0 auto; }
@media (max-width: 600px) { .np-arch-fila { flex-direction: column; align-items: flex-start; } }
.np-arch-texto { margin-bottom: .6rem; font-size: .95rem; white-space: pre-wrap; }
.np-arch-paso {
  border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .75rem; margin-bottom: .6rem;
  background: #fbfcfd;
}
.np-arch-paso > b { display: block; color: var(--azul-naval); margin-bottom: .25rem; }
.np-arch-paso p { margin-bottom: .45rem; font-size: .95rem; }
.np-arch-no { color: var(--texto-suave); }
.np-arch-chats { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.np-arch-tarjeta {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0;
  padding: .45rem .7rem; border: 1px dashed var(--azul); border-radius: 8px; background: #eef6fc;
  cursor: grab; user-select: none; max-width: 100%;
}
.np-arch-tarjeta:active, .np-arch-tarjeta.arrastrando { cursor: grabbing; opacity: .7; }
.np-arch-tarjeta small { display: block; color: var(--texto-suave); font-size: .82rem; }
.np-arch-tarjeta b { word-break: break-word; }
.np-arch-icono { font-size: 1.5rem; line-height: 1; }

@media print {
  .np-arch-nota { display: none !important; }
}


/* El texto de ejemplo de un campo («4», «12345», «850.000») se puede confundir
   con un valor cargado. Regla de todo el sistema: con las ayudas prendidas, los
   ejemplos se ven MUY suaves y en cursiva, bien distintos de cualquier valor,
   cargado o por defecto; con las ayudas apagadas (`body.sin-ayudas`, el mismo
   interruptor que esconde los textos explicativos) no se muestran.
   Las cajas de búsqueda (`type="search"`, «Buscar por nombre, documento…») son una instrucción y
   no un ejemplo: se quedan. Un campo que necesite que su texto se vea igual lo declara con
   `data-pista`. */
input::placeholder, textarea::placeholder { color: #adb5bd; opacity: 1; font-style: italic; font-weight: 400; }
body.sin-ayudas input:not([type="search"]):not([data-pista])::placeholder,
body.sin-ayudas textarea:not([data-pista])::placeholder { color: transparent; }

/* ====== El inicio (pantalla 1, docs/maquetas/01-inicio.html) ======
   El buscador grande y el menú: una tarjeta por grupo de pantallas. Lo operativo va en
   negrita (docs/05 §13); lo de apoyo (parámetros y usuarios), abajo de una raya y más chico.
   Las clases vienen de docs/maquetas/maquetas.css, con los colores del NP. */
.buscar-grande { display: flex; gap: .5rem; }
.buscar-grande input { flex: 1; font-size: 1.05rem; padding: .6rem .8rem; border: 1px solid var(--borde); border-radius: 6px; }
.menu-inicio { margin-top: 1rem; }
.botones-inicio { display: flex; gap: .5rem; flex-wrap: wrap; }
.botones-inicio .btn.operativa { font-weight: 700; }
.botones-inicio .btn:disabled { opacity: .5; cursor: not-allowed; }
.menu-inicio .titulo-caja.chico { font-size: .9rem; }
.menu-inicio .tarjeta.apoyo .btn { font-size: .85rem; }
.raya-inicio { border: 0; border-top: 2px solid var(--azul); margin: 1rem 0 .6rem; }

/* ====== Contratos (pantallas 9 a 13, etapa 3) ======
   El estado de un contrato en el listado: vigente sin color; por vencer (la alarma de dos meses,
   D21) en ámbar; vencido sin decisión en rojo; cerrado (finalizado, rescindido, prorrogado) en
   gris; por empezar en azul. Un mes sin valor todavía (le toca una actualización, D24) va en gris. */
.estado-contrato.alerta { color: #9a6700; font-weight: 600; }
.estado-contrato.vencido { color: var(--rojo); font-weight: 600; }
.estado-contrato.cerrado { color: #6c757d; }
.estado-contrato.futuro { color: var(--azul); }
tr.cuota-sin-valor td { color: #8a939c; }
details.alta-inquilino, details.marcadores { margin: .4rem 0 .8rem; }
details.alta-inquilino > summary, details.marcadores > summary { cursor: pointer; color: var(--azul); }
#grillaClausulas textarea { width: 100%; min-width: 18rem; }
#grillaClausulas input[type="text"] { width: 100%; }
.vista-contrato { border: 1px solid var(--borde); border-radius: 6px; background: #fff; padding: 1rem 1.4rem;
  max-height: 32rem; overflow: auto; font-family: "Times New Roman", Times, serif; text-align: justify; }
.vista-contrato p { margin: 0 0 .5rem; }
.vista-contrato .vista-titulo { text-align: center; }
.pantalla-completa textarea#textoCompleto { width: 100%; min-height: calc(100vh - 16rem); font-family: "Times New Roman", Times, serif;
  font-size: 1rem; line-height: 1.45; padding: .8rem 1rem; }
input.enlace-descarga { width: 100%; min-width: 16rem; font-family: monospace; font-size: .8rem; }

/* ====== Cuenta corriente y cobranza (pantallas 2, 3 y 20, etapa 4) ======
   Las maquetas 04-cuenta-inquilino y 02-cobranza, con las variables de color de siempre. */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2px; }
.cifra { background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px; padding: .7rem .9rem; }
.cifra .rotulo { font-size: .8rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .3px; }
.cifra .valor { font-size: 1.5rem; font-weight: 700; margin-top: .15rem; }
.cifra .valor.chico { font-size: 1.1rem; }
.cifra .valor.rojo { color: var(--rojo); }
.cifra .valor.verde { color: var(--verde); }
.cifra .detalle { font-size: .85rem; color: var(--texto-suave); }
.barra-acciones.a-la-izquierda { justify-content: flex-start; margin: .6rem 0; }
/* La cuenta (D24): lo que todavía no tiene valor, en gris; la línea negra del fin del contrato;
   el mes en curso, en amarillo; la barra de lo tildado, siempre a la vista abajo. */
table.tabla-cuenta tbody tr.futuro td { color: #9aa3ab; background: #fafbfc; }
table.tabla-cuenta tbody tr.fin-contrato td { border-bottom: 3px solid #000; }
table.tabla-cuenta tbody tr.mes-actual td { background: var(--amarillo-suave); }
table.tabla-cuenta td.tilde, table.tabla-cuenta th.tilde { width: 2rem; text-align: center; }
table.tabla-cuenta td.saldo-negativo { color: var(--rojo); }
table.tabla-cuenta td.saldo-a-favor { color: var(--verde); }
body.solo-difiere table.tabla-cuenta tbody tr:not([data-difiere]) { display: none; }
/* La cabecera de la cuenta (D122): las cifras y los botones no se encogen nunca; la tabla se queda
   con lo que sobra y scrollea adentro de su marco. Si con la letra muy grande no entra todo, la
   página scrollea entera antes que esconder la cabecera. */
body.pantalla-cuenta .contenido { overflow-y: auto; }
body.pantalla-cuenta .contenido > .cifras,
body.pantalla-cuenta .contenido > .barra-acciones { flex: 0 0 auto; overflow: visible; }
/* En el celular, la misma cabecera más apretada, para que la tabla tenga renglones: las cifras de
   a dos, los botones chicos, y fuera los textos que ya explica el «?» de los colores. */
@media (max-width: 640px) {
  body.pantalla-cuenta .cifras { grid-template-columns: 1fr 1fr; }
  body.pantalla-cuenta .cifra { padding: .35rem .55rem; border-radius: 6px; }
  body.pantalla-cuenta .cifra .rotulo { font-size: .68rem; }
  body.pantalla-cuenta .cifra .valor { font-size: 1.1rem; margin-top: 0; }
  body.pantalla-cuenta .cifra .valor.chico { font-size: .9rem; }
  body.pantalla-cuenta .cifra .detalle { font-size: .74rem; }
  body.pantalla-cuenta .barra-acciones { gap: .3rem; margin: .45rem 0; }
  body.pantalla-cuenta .barra-acciones .btn { padding: .25rem .5rem; font-size: .82rem; }
  body.pantalla-cuenta .barra-lista { padding: .35rem .5rem; }
  body.pantalla-cuenta .barra-lista > .etiq { display: none; }
  body.pantalla-cuenta .barra-cobro { padding: .4rem .6rem; gap: .5rem; }
  body.pantalla-cuenta .barra-cobro .tildado .etiq { display: none; }
}
.barra-cobro { flex: 0 0 auto; background: var(--blanco); border-top: 1px solid var(--borde);
  padding: .6rem .9rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.barra-cobro .tildado { flex: 1 1 14rem; }
.barra-cobro .tildado b { font-size: 1.15rem; }
.saldo-negativo { color: var(--rojo); }
.imputacion td.num, .imputacion th.num { text-align: right; white-space: nowrap; }
.imputacion input.aplicar { width: 7rem; text-align: right; }
.titulo-caja .nota { font-weight: 400; font-size: .8rem; color: #dcecf7; margin-left: auto; text-align: right; }
.total-pago { display: flex; justify-content: space-between; align-items: baseline; padding: .6rem .9rem;
  background: #eef1f4; border-radius: 6px; margin-top: .6rem; font-size: 1.05rem; }
.total-pago b { font-size: 1.3rem; }
.recibo-vista { background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px; padding: 1.2rem 1.4rem; max-width: 34rem; }
.recibo-vista .cab { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--azul-naval);
  padding-bottom: .5rem; margin-bottom: .8rem; gap: .6rem; flex-wrap: wrap; }
.recibo-vista .cab h2 { font-size: 1.3rem; }
.recibo-vista .cab .nro { font-weight: 700; color: var(--azul-oscuro); }
.recibo-vista dl { display: grid; grid-template-columns: 9rem 1fr; gap: .25rem .8rem; margin-bottom: .8rem; }
.recibo-vista dt { color: var(--texto-suave); font-size: .9rem; }
.recibo-vista table { width: 100%; border-collapse: collapse; margin-bottom: .6rem; }
.recibo-vista td { padding: .3rem 0; border-bottom: 1px solid #e6eaee; }
.recibo-vista td.num { text-align: right; white-space: nowrap; }
.recibo-vista .total { display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 700; padding-top: .4rem; }
.recibo-vista .letras { font-size: .85rem; color: var(--texto-suave); font-style: italic; }
.recibo-vista .pie { font-size: .8rem; color: var(--texto-suave); margin-top: 1rem; }
.recibo-vista.anulado { opacity: .6; }
@media (max-width: 640px) {
  .titulo-caja .nota { flex-basis: 100%; margin-left: 0; text-align: left; }
  .imputacion input.aplicar { width: 5.5rem; }
  .cifra .valor { font-size: 1.3rem; }
  .recibo-vista dl { grid-template-columns: 7rem 1fr; }
}

/* --- Etapa 5: cuentas de servicios (21), facturas del mes (6), actualizaciones (5), expensas (7) ---
   Lo vencido sin pagar, resaltado (D41). Las grillas de carga son tablas chicas con campos de plata. */
table.tabla-listado tbody tr.fila-vencida td { background: #fde8e6; }
.tabla-cuenta-servicio td.num, .tabla-cuenta-servicio th.num { text-align: right; white-space: nowrap; }
.tabla-cuenta-servicio tr.pago-servicio td { color: var(--verde); }
.tabla-cuenta-servicio tr.estado-vencida td:nth-child(2) { color: var(--rojo); font-weight: 600; }
.tabla-carga-mes td, .tabla-carga-mes th { vertical-align: top; }
.tabla-carga-mes input.campo-num { width: 8rem; text-align: right; }
.tabla-carga-mes input[type="date"] { width: 9.5rem; }
.tabla-carga-mes tr.informativa td { color: var(--texto-suave); }
.tabla-carga-mes .nota-fila { display: block; font-size: .8rem; color: var(--texto-suave); }
.tabla-actualizaciones td.num, .tabla-actualizaciones th.num { text-align: right; white-space: nowrap; }
.tabla-actualizaciones input.campo-num { width: 8.5rem; text-align: right; }
.tabla-actualizaciones tr.atrasada td:first-child { border-left: 4px solid var(--rojo); }
.tabla-actualizaciones .avisos-fila { display: block; font-size: .8rem; color: #7a6414; }
.tabla-expensas td.num, .tabla-expensas th.num { text-align: right; white-space: nowrap; }
.tabla-expensas input.campo-num { width: 7rem; text-align: right; }
.tabla-expensas input.corregido { background: var(--amarillo-suave); }
.tabla-expensas tr.sacado td { opacity: .45; }
.tabla-expensas tr.total td { border-top: 2px solid var(--azul-naval); font-weight: 700; }
.tabla-expensas td.propietario { color: var(--texto-suave); font-style: italic; }
@media (max-width: 640px) {
  .tabla-carga-mes input.campo-num, .tabla-expensas input.campo-num, .tabla-actualizaciones input.campo-num { width: 6rem; }
}

/* --- Etapa 6: el resumen del inicio (1), la consulta global (4) y la rendición (22) ---
   Las clases del tablero vienen de docs/maquetas/maquetas.css, con las variables de color de siempre.
   La tarjeta de un pendiente de pago se llama `tarjeta-pendiente` (en la maqueta, `pendiente`): así no
   choca con el cartelito `.estado.pendiente`. */
.barra-resumen { justify-content: flex-start; margin-top: 1rem; }
#resumenInicio { margin-top: .6rem; }
.avisos { list-style: none; margin: 0; padding: 0; }
.avisos li { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-bottom: 1px solid #e6eaee; flex-wrap: wrap; }
.avisos li:last-child { border-bottom: 0; }
.avisos .texto { flex: 1 1 14rem; }
.avisos .texto b { font-weight: 600; }
.pendientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 2px; }
.tarjeta-pendiente { background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px; padding: .7rem .9rem;
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; }
.tarjeta-pendiente .quien { font-weight: 600; grid-column: 1; }
.tarjeta-pendiente .donde { color: var(--texto-suave); font-size: .9rem; grid-column: 1; }
.tarjeta-pendiente .saldo { grid-column: 2; grid-row: 1; font-size: 1.2rem; font-weight: 700; text-align: right; }
.tarjeta-pendiente .saldo.deuda { color: var(--rojo); }
.tarjeta-pendiente .saldo .ademas { display: block; font-size: .8rem; font-weight: 400; }
.tarjeta-pendiente .atraso { grid-column: 2; grid-row: 2; text-align: right; font-size: .85rem; }
.tarjeta-pendiente .acciones { grid-column: 1 / -1; display: flex; gap: .45rem; margin-top: .35rem; }
.tarjeta-pendiente .acciones .btn { flex: 1; text-align: center; }
.estado.vence { background: var(--amarillo-suave); color: #7a6414; }
.estado.libre { background: #f1f1f1; color: var(--texto-suave); }
/* La consulta global (D34): en el celular se desplaza de costado, pero inmueble y unidad quedan
   siempre a la vista. La segunda columna se corre lo que mide la primera (lo calcula la pantalla). */
@media (max-width: 640px) {
  table.columnas-fijas tbody td:nth-child(-n+2), table.columnas-fijas thead th:nth-child(-n+2) {
    position: sticky; z-index: 5; background: var(--blanco); }
  table.columnas-fijas thead th:nth-child(-n+2) { z-index: 12; background: #dde5ec; }
  table.columnas-fijas tbody td:nth-child(1), table.columnas-fijas thead th:nth-child(1) { left: 0; }
  table.columnas-fijas tbody td:nth-child(2), table.columnas-fijas thead th:nth-child(2) {
    left: var(--ancho-primera, 5rem); box-shadow: 2px 0 0 #dde5ec; }
  .pendientes { grid-template-columns: 1fr; }
}
/* La rendición: tablas de informe (no son listados: no se ordenan), con su fila de total. */
.tabla-rendicion td.num, .tabla-rendicion th.num { text-align: right; white-space: nowrap; }
.tabla-rendicion tr.total td { border-top: 2px solid var(--azul-naval); font-weight: 700; }
.tabla-rendicion td.negativo { color: var(--rojo); }
.resumen-anio { display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.resumen-anio span b { font-weight: 700; }

/* ====== Comunicaciones (pantallas 8, 24 y 25, etapa 7) ======
   La lista para ir mandando uno por uno (D30): la fila cuyo WhatsApp ya se abrió queda en amarillo
   hasta que se marca enviada. */
.acciones-envio { display: inline-flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.acciones-envio form { display: inline; margin: 0; }
tr.abierto td { background: var(--amarillo-suave); }
.texto-envio { white-space: pre-wrap; overflow-wrap: anywhere; }
.etiq.rojo { color: var(--rojo); }
.lista-marcadores code { background: #f1f4f7; padding: 0 .25rem; border-radius: 3px; }
textarea.texto-mensaje { width: 100%; min-height: 9rem; }
.datos-envio { display: grid; grid-template-columns: 8rem 1fr; gap: .3rem .8rem; margin: 0 0 .6rem; }
.datos-envio dt { color: var(--texto-suave); }
.datos-envio dd { margin: 0; }
@media (max-width: 600px) { .datos-envio { grid-template-columns: 1fr; } .datos-envio dt { margin-top: .3rem; } }