/* AUTOFACTURAS en el navegador.

   La regla, de Andrés (9/9/2026): «lo que estoy dispuesto a perder es
   que todo se vea como Windows native, pero los colores y el diseño y
   la lógica no».

   Así que aquí NO se imita el tema nativo: no hay biseles, ni el gris de
   control, ni relieves hundidos y levantados. El acabado es de web:
   bordes finos, esquinas apenas redondeadas y una sombra suave solo
   donde algo flota de verdad.

   Lo que sí se respeta al pie de la letra:
   - Los colores. Salen de estilo.css, que es la paleta de la casa.
     Nunca un #RRGGBB suelto aquí.
   - Los cuerpos de letra y el alto de fila, también de allí.
   - La ubicación y el orden de cada control, que los ponen las
     plantillas y no este archivo.

   Es para computadora. Teléfono y tableta quedaron descartados el
   9/9/2026, así que no hay reglas de pantalla angosta: cuando la
   ventana no da, se desplaza de lado, que es lo que hace el escritorio
   (véase gestion_pdf._construir_filtros). */
/* estilo.css se enlaza aparte desde la plantilla, no con @import:
   con el import el navegador se quedaba con la copia vieja de los
   colores y los pasos dados salían sin fondo. */

:root {
  /* LA LETRA.
     `estilo.css` trae los cuerpos del escritorio, que son los de
     Windows: la tabla a 8 puntos y el texto a 9. En una ventana de Tk,
     a un palmo de la cara, eso se lee; en una página web se ve
     diminuto, y Andrés lo dijo el 9/9/2026: «se ve muy aburrido y
     pequeñas las letras».

     Así que la web sube un escalón. Se hace AQUÍ, en un solo sitio y
     partiendo de lo que manda el escritorio, para que la proporción
     entre unos y otros siga siendo la suya: la tabla sigue siendo el
     cuerpo más chico y la marca el más grande. Lo que cambia es la
     escala entera, no el criterio.

     El 10/9/2026 se bajó un punto a TODA la escala y Andrés lo mandó
     deshacer: «el único cambio de letra que pedí fue en áreas
     específicas». Así que la escala general vuelve a la suya, y lo que
     baja es solo lo que él señaló con un pantallazo: las cuatro sumas
     del encabezado y los renglones de los menús. */
  --letra-tabla: 12px;      /* era 10,67 */
  --letra-cuerpo: 14px;     /* era 12 */
  --letra-casilla: 15px;    /* era 13,33 */
  --letra-titulo: 19px;     /* era 14,67 */
  --letra-numero: 24px;
  --letra-marca: 28px;
  --letra-cifra: 34px;

  /* Los tonos de superficie del acabado web. Se derivan de la paleta:
     un gris con una pizca del azul de la casa, que al lado del marino
     no se ve sucio como se vería un gris puro. */
  /* --lienzo, --chrome, --linea y --linea-fuerte viven en estilo.css. */

  /* El verde pastel de «aquí estoy»: el botón de la pantalla que se
     está mirando. Andrés, 11/9/2026: «la pestaña en la que esté que
     marque su botón en verde pastel tenue». Tenue de verdad: el
     texto sigue siendo el azul de la casa, así que tiene que ser un
     fondo que no le quite contraste. */
  /* --verde-pastel y --verde-pastel-linea viven en estilo.css. */

  --radio: 4px;
  /* Tres escalones de profundidad y ninguno mas:
       apoyada   lo que descansa sobre el fondo (tablas, barras)
       tarjeta   lo que tiene cuerpo propio (cuadros de grupo, fichas)
       flotante  lo que esta POR ENCIMA (menus, dialogos, la seccion
                 que se puede abrir cuando el raton esta encima)
     Cada una lleva dos sombras: una corta y marcada que pega la pieza
     al fondo, y una larga y suave que la despega. Con una sola queda
     plana, que es lo que habia. */
  --sombra-apoyada: 0 1px 2px rgba(2, 34, 96, .10),
                    0 2px 6px rgba(2, 34, 96, .06);
  --sombra-tarjeta: 0 1px 2px rgba(2, 34, 96, .12),
                    0 4px 12px rgba(2, 34, 96, .09);
  --sombra-flotante: 0 2px 4px rgba(2, 34, 96, .16),
                     0 12px 32px rgba(2, 34, 96, .18);
}

* { box-sizing: border-box; }

/* El atributo `hidden` tiene que ganarle a cualquier display de
   clase, o lo que se esconde con JavaScript sale a la vista. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; height: 100%; }

/* La ventana: encabezado, barra, cuerpo y pie, con el cuerpo llevándose
   lo que sobra. El desplazamiento vive dentro de la tabla y del lienzo,
   no en la página, igual que en una ventana de escritorio. */
body {
  background: var(--chrome);
  color: var(--texto);
  font-family: var(--familia);
  font-size: var(--letra-cuerpo);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body > * { flex: 0 0 auto; }

a { color: var(--verde); }

/* ------------------------------------------------------------ menú de arriba
   Archivo · Ver · Módulos · Herramientas · Ayuda, los mismos cinco y en
   el mismo orden que en la ventana principal del escritorio. */
.menu-barra {
  display: flex;
  margin: 0;
  padding: 0 6px;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  position: relative;
  z-index: 40;
  box-shadow: 0 1px 0 rgba(2, 34, 96, .04);
}

.menu-barra > li { list-style: none; position: relative; }

/* El saludo de la esquina, al final de la barra de menús. Andrés,
   11/9/2026: rojo, en cursiva y con el emoticono de la hora. `auto` a la
   izquierda: se va al extremo derecho sin sacar a los menús de su sitio,
   que es lo que había que respetar. El emoticono va a tamaño normal: en
   cursiva se deforma y en rojo no se pinta, así que se saca de los dos. */
.menu-barra > li.saludo-esquina {
  margin-left: auto;
  padding: 5px 12px;
  /* Fue vino (11/9/2026) y desde el 13/9 es amarillo: Andrés, «EL SALUDO
     DE ARRIBA A LA DERECHA EN AMARILLO». El amarillo de la paleta, que
     es el que se lee sobre el blanco. */
  color: var(--amarillo);
  font-style: italic;
  font-weight: 600;
  white-space: nowrap;
  align-self: center;
}

/* El emoticono NO es un título de menú, aunque sea un <span> hijo de un
   <li> de esta barra: sin esto se lleva el `display: block` de arriba, se
   va a un renglón suyo y estira la barra de 28 a 57 píxeles. */
.menu-barra > li.saludo-esquina > span.emoji {
  display: inline;
  padding: 0;
  font-style: normal;
  /* Con la fuente de emoticonos a color del sistema, no con la del texto,
     que los pinta en un solo color y «como hechos a mano». */
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 15px;
}

/* --- La columna de condominios del parte, plegada -----------------------
   Con treinta y dos condominios la lista seguida medía cuatrocientos
   píxeles de alto y una sola persona llenaba la pantalla. Andrés,
   11/9/2026: «mejorar presentación de la columna de condominios
   asignados». Cerrada dice cuántos son; abierta, cuál es cuál. */
td.condominios { white-space: normal; vertical-align: top; }

td.condominios summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px 1px 4px;
  border-radius: 999px;
  color: var(--verde-marca);
}

td.condominios summary::-webkit-details-marker { display: none; }

/* El triangulito, dibujado: así gira al abrir y no depende del que cada
   navegador ponga por su cuenta. */
td.condominios summary::before {
  content: "▸";
  display: inline-block;
  transition: transform .12s ease;
  color: var(--gris);
}

td.condominios details[open] summary::before { transform: rotate(90deg); }
td.condominios summary:hover { background: var(--franja); }

td.condominios .fincas {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
  max-width: 620px;
}

td.condominios .finca {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 1px 7px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--chrome);
  font-size: 11px;
  line-height: 1.6;
}

td.condominios .finca b { color: var(--verde-marca); }
td.condominios .vacio { color: var(--gris-apagado); }

.menu-barra > li > span {
  display: block;
  padding: 5px 11px;
  cursor: default;
  user-select: none;
  color: var(--texto);
  border-radius: var(--radio) var(--radio) 0 0;
}

.menu-barra > li:hover > span { background: var(--franja); color: var(--verde-marca); }

.menu-barra ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 270px;
  margin: 0;
  padding: 4px;
  background: var(--blanco);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
  z-index: 50;
}

.menu-barra > li:hover ul { display: block; }
.menu-barra ul li { list-style: none; }

.menu-barra ul a {
  display: block;
  /* Un punto menos que el cuerpo, como en el escritorio: allá la barra
     va a 11 y los desplegables a 9 (interfaz._menu_nativo). */
  font-size: 13px;
  padding: 4px 12px;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 3px;
}

.menu-barra ul a:hover { background: var(--franja); color: var(--verde-marca); }

/* La rayita que separa los grupos de cada menu. Estaba en el gris más
   claro de la casa y sobre blanco no se veía: quedaba un hueco sin más
   (Andrés, 10/9/2026: «poner rayita»). Con el gris fuerte se lee, que es
   para lo que está: decir dónde acaba un grupo de opciones. */
.menu-barra ul hr {
  border: 0;
  border-top: 1px solid var(--linea-fuerte);
  margin: 5px 8px;
}

/* El <li> que solo lleva la raya no se pinta al pasar por encima: no es
   una opción que se pueda pulsar. */
.menu-barra ul li:has(> hr) { pointer-events: none; }

/* ----------------------------------------------------------- el encabezado
   Marca a la izquierda, lo de en medio, el registro a la derecha y el
   logotipo de la casa al final. El mismo orden que en el escritorio. */
.encabezado {
  display: flex;
  align-items: center;
  gap: var(--espacio-marco);
  padding: 9px 16px;
  background: var(--blanco);
  position: relative;
  z-index: 6;
}

.marca { display: flex; align-items: center; gap: 11px; }
/* 15% mayor que los 54px que tenia. Andres, 11/9/2026:
   «LOGO SICSA 15% MAS GRANDE». */
.marca img { height: 62px; width: auto; }

.marca-modulo {
  font-size: var(--letra-titulo);
  font-weight: 700;
  color: var(--verde-marca);
  line-height: 1.25;
}

.marca-razon { color: var(--gris); line-height: 1.4; }

.marca-lema {
  color: var(--vino);
  font-style: italic;
  font-size: var(--letra-tabla);
  line-height: 1.4;
}

/* Las rayas del encabezado: rojas y de dos puntos, las mismas que
   separan los grupos de la barra de herramientas. Andrés, 11/9/2026:
   «HACER LA RAYA ROJA Y MÁS GRUESA».

   De un punto y en gris claro no se veían: eran una junta, no una
   separación, y el logotipo de la casa parecía pegado al último dato del
   encabezado. Con el mismo rojo de `.raya-barra` —y su misma opacidad—
   el programa entero separa con una sola raya, no con dos distintas. */
.raya-vertical {
  align-self: stretch;
  width: 2px;
  background: var(--rojo);
  opacity: .55;
  border-radius: 1px;
  margin: 4px 0;
}

.encabezado-centro { flex: 1 1 auto; text-align: center; color: var(--verde-marca); }
/* Un punto menos que el cuerpo (Andrés, 10/9/2026): la frase acompaña,
   no compite con el trabajo. */
.lema-del-dia { font-style: italic; font-size: 13px; }

.lema-autor {
  display: block;
  color: var(--gris);
  font-size: var(--letra-tabla);
  margin-top: 3px;
}
/* Una fecha del pais no es una cita: sin cursiva y en negrita. */
.lema-del-dia.efemeride { font-style: normal; font-weight: 600; }

/* El cumpleaños de quien está trabajando, en la franja: con fiesta.
   Andrés, 13/9/2026: «CUMPLEAÑOS MÁS ENÉRGICO, la frase se ve fría y
   triste, quiero muestre más energía y alegría». Grande, en el naranja
   del primer globo, sin comillas ni raya de autor, y latiendo despacio. */
.lema-fiesta {
  display: inline-block;
  font-weight: 800;
  font-size: 19px;
  color: var(--globo-1);
  letter-spacing: .01em;
  animation: latir 2.4s ease-in-out infinite;
}
.lema-fiesta-abajo {
  display: block;
  color: var(--verde-marca);
  font-weight: 600;
  font-size: 13px;
  margin-top: 3px;
}
@keyframes latir {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .lema-fiesta { animation: none; }
}

/* El registro de actividad: rótulo en versales y pares de dato y valor. */
/* Sin ancho mínimo: con 250 px, «Usuario» y «ANDRÉS S» quedaban en las
   dos puntas del encabezado y no se leían como una pareja (Andrés,
   10/9/2026: «no tan separado»). */
.registro { min-width: 0; }

.rotulo-registro {
  color: var(--gris);
  font-size: var(--letra-tabla);
  letter-spacing: .5px;
  margin-bottom: 4px;
}

.registro dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 12px;
  margin: 0;
  font-size: var(--letra-tabla);
  white-space: nowrap;
}

.registro dt { color: var(--gris); }
.registro dd { margin: 0; text-align: left; font-variant-numeric: tabular-nums; }

/* El logotipo de la casa, del alto del de SICSA. Andrés, 11/9/2026,
   rodeándolo en rojo: «AUMENTAR A MISMO TAMAÑO QUE LOGO SICSA». Son las
   dos marcas del encabezado —de quién es el programa y quién lo hizo— y
   con una al doble que la otra no se leían como pareja.

   28 → 35 → 38,5 → 62 → 55,8 px: el de SICSA menos un 10 %, que es lo
   que pidió al verlos iguales («10 % menos logo de TRIA»). Es un SVG:
   crece sin perder nitidez, y el encabezado no se hace más alto porque
   su altura la manda el de SICSA. */
.logo-ava { height: 55.8px; width: auto; }

/* Las cuatro sumas del área de trabajo, en el encabezado y con el
   tamaño que quedó aprobado: un 25 % menor que el original. */
.sumas { display: flex; align-items: flex-start; gap: 18px; }
.suma { text-align: center; }

.suma .rotulo {
  display: block;
  color: var(--gris);
  /* Subió seis puntos el 9/9/2026 («no se leía»), bajó dos el 10/9 y
     otros dos el 11/9: las cuatro sumas pesaban más que el trabajo que
     hay debajo. */
  font-size: 9px;
  letter-spacing: .3px;
  white-space: nowrap;
}

.suma .cifra {
  display: block;
  margin-top: 3px;
  /* Dos puntos menos, con su rótulo (Andrés, 11/9/2026). */
  font-size: 12px;
  font-weight: 700;
  color: var(--verde-marca);
  font-variant-numeric: tabular-nums;
}

.suma.vacia .cifra { color: var(--gris-suave); font-weight: 400; }

/* Bajo el encabezado, una raya del color de la casa en vez de las tres
   rayas grises del degradado de Tk. */
.sombra-encabezado { height: 2px; background: var(--verde); opacity: .5; }

/* -------------------------------------------------- la barra de herramientas
   Los diez botones de la ventana principal, en una fila y en su orden.
   Si la ventana no da, se desplaza de lado; nunca se parte en dos
   renglones ni se reordena. */
/* Un 10 % más baja, en TODAS las pantallas (Andrés, 11/9/2026: «en
   todas las vistas hacer esta barra un 10 % menor y ajustar»). Se
   encoge el relleno y el alto de los botones, no la letra: los rótulos
   se siguen leyendo igual. */
.barra {
  display: flex;
  gap: 5px;
  padding: 6px 12px;
  background: var(--chrome);
  border-bottom: 1px solid var(--linea-fuerte);
  box-shadow: var(--sombra-apoyada);
  position: relative;
  z-index: 5;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* La rayita que separa los grupos de la barra. Roja, como la marcó
   Andrés (11/9/2026): es la única cosa roja de la barra y por eso se ve
   sin mirarla. Angosta y sin crecer: separa, no ocupa. */
.raya-barra {
  flex: 0 0 auto;
  align-self: stretch;
  width: 2px;
  margin: 2px 3px;
  background: var(--rojo);
  border-radius: 1px;
  opacity: .55;
}

.barra a {
  flex: 1 0 auto;
  min-width: 128px;
  text-align: center;
  padding: 5px 10px;
  background: var(--blanco);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  color: var(--verde-tinta);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--sombra-tarjeta);
}

.barra a {
  transition: box-shadow .12s ease, transform .12s ease;
}

.barra a:hover {
  background: var(--franja);
  border-color: var(--verde);
  box-shadow: var(--sombra-tarjeta);
  transform: translateY(-1px);
}

.barra a:active { transform: none; box-shadow: none; }

/* «Procesar facturas» y «Área de trabajo» en negrita: son los dos de
   todos los días y los otros ocho son ocasionales. */
.barra a.principal { font-weight: 700; color: var(--verde-marca); }
/* La pantalla en la que uno está, en verde pastel. Antes llevaba el
   mismo azul pálido que el boton al pasar el raton por encima, y no se
   distinguía «dónde estoy» de «dónde voy si pulso». */
.barra a.aqui {
  font-weight: 700;
  color: var(--verde-marca);
  background: var(--verde-pastel);
  border-color: var(--verde-pastel-linea);
}

/* -------------------------------------------------------------- el cuerpo */
/* El cuerpo y el pie llevan `order` porque en el HTML el pie va
   ANTES: así llega de los primeros y se pinta enseguida, en vez de
   esperar a que el navegador lea las 302 filas del área de trabajo
   (Andrés, 11/9/2026: «esa barra tarda en aparecer»). Lo demás
   —menús, encabezado, barra— se queda en 0 y sale antes que los dos. */
.cuerpo { order: 5; }
.pie { order: 9; }

.cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 0;
  overflow: hidden;
}

/* El cuadro de grupo. En Windows es un marco con el título metido en el
   borde; aquí es una tarjeta con su título encima, que dice lo mismo. */
.grupo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-tarjeta);
  margin: 0;
  padding: 10px 12px 12px;
}

.grupo > legend {
  color: var(--verde-marca);
  font-weight: 700;
  font-size: var(--letra-tabla);
  letter-spacing: .3px;
  padding: 0 6px;
  margin-left: 2px;
}

/* La superficie de contenido, con la marca de agua detrás. */
.lienzo {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--lienzo);
  padding: var(--espacio-marco);
  position: relative;
}

/* ------------------------------------------------------- la marca de agua
   TRIA TECH en TODA pantalla, SIEMPRE. Andrés, 10/9/2026: «el logo de
   agua siempre debe verse sin importar la pantalla que esté».

   Iba pintada DETRÁS del contenido, y por eso desaparecía justo en las
   pantallas donde se pasa el día: una tabla llena de filas blancas la
   tapaba entera. Ahora va por ENCIMA, pegada a la ventana y no a la
   página, con una opacidad tan baja que no estorba la lectura pero se
   ve en cualquier pantalla y también con la tabla llena.

   `pointer-events: none` es lo que hace que se pueda pulsar a través de
   ella: sin eso, taparía media pantalla de botones. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  /* Mas abajo: Andres, 11/9/2026, «en todas las pantallas que este el
     logo de agua bajarlo a esa altura que marque». De 58 % a 72 %,
     que es donde puso la raya, y de 72 % a 73 % ese mismo dia: «marca
     agua tria bajar un 1 %». Al ser `fixed` vale para todas. */
  background: url("/estaticos/img/tria.svg") center 73% / auto 58% no-repeat;
  /* Otro punto menos: .05 -> .04 el 10/9/2026 y .04 -> .03 el 11/9.
     Se sigue viendo en toda pantalla, que es la regla, pero ya no se
     nota por detras de las tablas claras. */
  opacity: .03;
  pointer-events: none;
  z-index: 3;
}

/* La pantalla de entrar y la de bienvenida llevan lo suyo y no la
   necesitan: ahí el logotipo está a tamaño real y en primer plano. */
body.entrada::after,
body.bienvenida-cuerpo::after { display: none; }

.lienzo > * { position: relative; z-index: 1; }

/* Los encabezados de TODA lista se quedan quietos al bajar con la rueda,
   y SIN barra propia de la tabla. Andrés, 14/9/2026: «todos los
   encabezados de columnas deben estar estáticos y no moverse con el
   scroll», y al ver una tabla con su propia barra: «esa subbarra no».
   Es lo que ya hacía Quién puede qué desde el 13/9: el marco de la
   tabla no recorta ni desplaza; el que baja (y corre de lado, si la
   tabla es ancha) es el lienzo, y el encabezado —`sticky` en cada
   `th`— se pega al borde de arriba del lienzo. El Área de trabajo
   conserva su tabla con barra propia: allí la banda de filtros y la
   suma de lo marcado tienen que quedarse a la vista. */
.lienzo > .tabla-marco, .lienzo > form > .tabla-marco, .lienzo > div > .tabla-marco { overflow: visible; }
/* El `sticky` se mide desde el borde INTERIOR del lienzo (su padding
   de --espacio-marco): con `top: 0` el encabezado quedaba 12 px por
   debajo del borde y se veía asomar la fila de arriba (Andrés,
   14/9/2026: «al dar scroll se ve mal los encabezados»). Se sube esos
   12 px para que pegue al borde. */
.lienzo .tabla thead th, .lienzo .tabla-permisos thead { top: calc(-1 * var(--espacio-marco)); }
body.area-trabajo .tabla-marco { overflow: auto; }
body.area-trabajo .tabla thead th { top: 0; }

.dice { color: var(--verde-marca); font-weight: 700; font-style: italic; margin: 6px 0; }

/* ------------------------------------------------------------- los filtros
   Dos filas de siete y una tercera con la búsqueda y el zócalo. La
   rejilla NO se reacomoda cuando la ventana viene angosta: conserva sus
   tres filas y aparece una barra de desplazamiento, porque reacomodarla
   le quita altura a los resultados. Es la decisión del escritorio. */
/* Los formularios del área de trabajo no son cajas más: son parte del
   armazón. El que envuelve la tabla tiene que estirarse como se
   estiraría la tabla, o la tabla crece hacia abajo y se sale de la
   ventana. */
.cuerpo > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cuerpo > form#bloque { flex: 1 1 auto; }
.cuerpo > form#filtros { flex: 0 0 auto; }

/* Los que solo llevan un cuadro son diálogos, no piezas de la
   pantalla: no ocupan sitio en el armazón. */
.cuerpo > form#dar-paso,
.cuerpo > form#poner-nota { display: contents; }

/* La banda de filtros va apretada (Andrés, 10/9/2026: «no utilizar tanta
   altura»). Cada punto que se le quita aquí es un punto que gana la
   tabla, que es a lo que se viene: catorce campos ocupaban casi un
   tercio de la pantalla para algo que se toca una vez y se deja quieto.
   Se aprieta el aire, NO la letra: los rótulos y los campos siguen del
   tamaño que manda `estilo.py`. */
/* Un punto más baja cada vez que Andrés lo pide (10/9/2026 tres veces,
   11/9/2026 la cuarta: «un poco más pequeña esa área»): lo que se le
   quita a los filtros lo gana la tabla, que es a lo que se viene a esta
   pantalla. Se aprieta el AIRE, nunca la letra. */
.grupo.filtros-grupo {
  flex: 0 0 auto;
  margin-bottom: 2px;
  padding: 0 12px 2px;
}

.filtros-grupo > legend { margin-bottom: 0; }

.filtros-grupo input, .filtros-grupo select { padding: 0 6px; min-height: 20px; }
/* Los rótulos de los filtros, pegados a su campo: con catorce campos,
   un punto de interlineado en cada uno son catorce puntos de tabla. */
.rejilla-filtros label, .fila-buscar label { line-height: 1.05; }

.filtros-grupo > .rejilla-filtros,
.filtros-grupo > .fila-buscar { min-width: 1180px; }

.filtros-grupo { overflow-x: auto; scrollbar-width: thin; }

.rejilla-filtros {
  display: grid;
  /* Ocho filtros en UNA fila desde el 13/9/2026 (Andrés quitó las tres
     fechas, los tres montos y la cédula). Sin aire entre renglones: cada
     punto que se le quita aquí lo gana la tabla; lo pidió tres veces el
     10/9/2026 y dos más el 11/9. */
  grid-template-columns: repeat(8, 1fr);
  gap: 0 10px;
}

.rejilla-filtros label,
.fila-buscar label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  line-height: 1.2;
  color: var(--gris);
  font-size: var(--letra-tabla);
  /* Los rótulos en negrita (Andrés, 14/9/2026: «poner encabezados en
     negrita», señalando esta banda); lo que se escribe dentro, no. */
  font-weight: 700;
  letter-spacing: .3px;
  min-width: 0;
}

.fila-buscar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 1px;
}

.fila-buscar > label:first-child { flex: 1 1 auto; }

/* El grupo de botones de la fila de búsqueda. En Windows se apoyan en un
   zócalo hundido; aquí se agrupan con un fondo suave, que hace lo mismo:
   que se lean como una barra de acciones y no como texto suelto. */
.zocalo {
  flex: 2 1 auto;
  display: flex;
  gap: 6px;
  padding: 2px;
  background: var(--chrome);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.zocalo > * { flex: 1 1 0; }

/* --------------------------------------------------------------- controles */
input[type=text], input[type=search], input[type=password], input[type=email],
input[type=date], input[type=time], input[type=number], select, textarea {
  font-family: inherit;
  font-size: var(--letra-cuerpo);
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 4px 7px;
  min-width: 0;
  width: 100%;
}

textarea { line-height: 1.5; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--cian-tenue);
  outline-offset: -1px;
  border-color: var(--verde);
}

input[type=checkbox], input[type=radio] { accent-color: var(--verde); margin: 0 5px 0 0; width: auto; }

/* Todo desplegable con el campo blanco: Andrés, «en esos y en todos los
   del programa el fondo debe ser blanco». */
select { background: var(--blanco); height: 27px; }

/* --------------------------------------------------------------- botones */
.boton, button {
  font-family: inherit;
  font-size: var(--letra-cuerpo);
  color: var(--verde-tinta);
  background: var(--blanco);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 4px 14px;
  min-height: 27px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.boton, button {
  box-shadow: 0 1px 1px rgba(2, 34, 96, .07);
  transition: box-shadow .12s ease, background .12s ease;
}

.boton:hover, button:hover {
  background: var(--franja);
  border-color: var(--verde);
  box-shadow: var(--sombra-apoyada);
}
.boton:active, button:active { background: var(--cian-tenue); box-shadow: none; }

/* Tres variantes y ninguna más, como en DISEÑO.md sección 7. */
.boton.principal, button.principal {
  font-weight: 700;
  color: var(--blanco);
  background: var(--verde);
  border-color: var(--verde-pulsado);
  box-shadow: 0 1px 2px rgba(2, 34, 96, .25);
}

.boton.principal:hover, button.principal:hover {
  background: var(--verde-pulsado);
  border-color: var(--verde-pulsado);
}

.boton.terciario { border-color: transparent; background: transparent; }
.boton.terciario:hover { border-color: var(--linea-fuerte); background: var(--franja); }
.boton.peligro { color: var(--rojo); }
.boton.peligro:hover { background: var(--fondo-paso-rechazar); border-color: var(--rojo); }

.boton[disabled], button[disabled], .boton.apagado {
  color: var(--gris-apagado);
  background: var(--chrome);
  border-color: var(--linea);
  cursor: default;
  box-shadow: none;
}

.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- la tabla
   Las diecisiete columnas se quedan todas y en su orden. Si no caben, la
   tabla se desplaza de lado dentro de su propio marco y las tres
   primeras se quedan pegadas a la izquierda, como en Excel. */
.tabla-marco {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--lienzo);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  box-shadow: var(--sombra-apoyada);
}

.tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--letra-tabla);
}

/* La de facturas manda sus anchos con su <colgroup>: `fixed` es lo que
   hace que el navegador los respete en vez de repartir a su gusto. Así
   las diecisiete columnas caben al 100 % de zoom. */
.tabla-facturas { table-layout: fixed; }

/* Y las celdas del circuito se aprietan un punto: son botones cortos y
   no necesitan el mismo aire que una columna de texto. */
.tabla-facturas td, .tabla-facturas th { padding-left: 4px; padding-right: 4px; }
.tabla-facturas td .boton { padding: 2px 2px; }

.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--franja);
  color: var(--verde-marca);
  font-weight: 700;
  letter-spacing: .3px;
  text-align: left;
  padding: 6px 7px;
  white-space: nowrap;
  border-bottom: 1px solid var(--linea-fuerte);
  box-shadow: 0 2px 4px rgba(2, 34, 96, .08);
}

.tabla tbody td {
  height: var(--alto-fila);
  padding: 0 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--linea);
}

.tabla tbody tr:nth-child(even) { background: var(--chrome); }
.tabla tbody tr:hover { background: var(--cian-suave); }
.tabla tbody tr.elegida { background: var(--seleccionado); }

/* Las dos primeras columnas, pegadas a la izquierda al desplazar.
   Son dos y no tres: para congelar tambien CONDOMINIO habria que
   moverlo al principio, y el orden de las columnas no se toca. */
.tabla .fija-1, .tabla .fija-2 { position: sticky; z-index: 2; }
.tabla .fija-1 { left: 0; }
.tabla .fija-2 { left: 34px; }
.tabla thead .fija-1, .tabla thead .fija-2 { z-index: 4; background: var(--franja); }
.tabla tbody tr:nth-child(odd) .fija-1,
.tabla tbody tr:nth-child(odd) .fija-2 { background: var(--lienzo); }
.tabla tbody tr:nth-child(even) .fija-1,
.tabla tbody tr:nth-child(even) .fija-2 { background: var(--chrome); }
.tabla tbody tr:hover .fija-1,
.tabla tbody tr:hover .fija-2 { background: var(--cian-suave); }
.tabla .fija-2 { box-shadow: 1px 0 0 var(--linea-fuerte); }

/* La fila de totales, pegada al pie de su tabla y con peso propio:
   una suma no es una fila más (Andrés, 9/9/2026: «totalizar ambos
   cuadros sus columnas»). */
.tabla tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--franja);
  color: var(--verde-marca);
  font-weight: 700;
  padding: 6px 7px;
  border-top: 2px solid var(--linea-fuerte);
  box-shadow: 0 -2px 4px rgba(2, 34, 96, .08);
  white-space: nowrap;
}

/* Cómo se alinea cada dato, según DISEÑO.md sección 6. */
.tabla .centro { text-align: center; }
.tabla .importe, .tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Sin negrita (Andrés, 10/9/2026). Con doscientas filas seguidas, una
   columna entera en negrita no destaca nada: solo pesa. */
.tabla .condominio { font-weight: 400; }

.tabla td .boton, .tabla td button {
  width: 100%;
  min-height: 21px;
  padding: 2px 6px;
  font-size: var(--letra-tabla);
}

/* Los botones de «falta hacer esto»: en ámbar y del tamaño de su texto.
   Andrés, 11/9/2026, viendo la pantalla de asignación: «botones en
   amarillo».

   Dos cosas de una vez. El color, porque no son acciones cualquiera sino
   tareas pendientes, y el ámbar es el de «esto falta» en toda la casa.
   Y el ANCHO, porque la regla de arriba —`width: 100%`, que es la que
   hace que los seis botones del circuito llenen su celda— estiraba
   «Asignar» de lado a lado de la columna. Es la cuarta vez que esa misma
   regla estira algo que no debía; aquí se le dice que no. */
.tabla td .boton.falta {
  width: auto;
  color: var(--ambar);
  border-color: var(--ambar);
  background: var(--fondo-aviso);
  font-weight: 600;
}
.tabla td .boton.falta:hover {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--blanco);
}

/* Y el texto de al lado, en el mismo tono: «sin administrador» y «usa el
   general» no son datos, son huecos. */
.tabla .falta { color: var(--ambar); font-size: var(--letra-tabla); }

/* Elegir a quién se le da un condominio, en el propio renglón. El
   desplegable y el botón en FILA —`row` dicho, que es la quinta vez que
   ese olvido apila lo que iba al lado— y con el desplegable llevándose
   el ancho, que es donde están los nombres largos. */
.dar-condominio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

/* El nombre de quien lleva el condominio, con su equis pegada. */
.lleva { white-space: nowrap; }

/* Los dos modos de la corrida, uno debajo del otro con su campo
   sangrado. Andrés, 11/9/2026: «darme opción que sea cada cierta
   cantidad de horas». Sangrar el campo deja claro de qué opción cuelga;
   sin eso, la hora parecía de las dos. */
.modo-corrida {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 2px;
}
.modo-corrida .modo {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-transform: none;
  font-size: 13px;
  color: var(--texto);
  letter-spacing: 0;
  cursor: pointer;
}
.modo-corrida .modo input { width: 15px; height: 15px; accent-color: var(--verde); }
.modo-campos {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 6px 23px;
}
.modo-campos .ayuda { max-width: 320px; }

/* El nombre del condominio: en una línea mientras quepa, y si no cabe,
   con puntos suspensivos y el nombre entero en el globo del ratón. Vale
   más una tabla de veintiocho renglones iguales con un nombre recortado
   que veintisiete de una línea y uno de dos. */
/* ------------------------------------------------- la ventana de avisos
   Andrés, 11/9/2026: «usar esa área para avisos de todo tipo... ahí será
   la ventana de avisos».

   Tres colores y ninguno más: rojo suave lo que impide trabajar, ámbar lo
   que hay que hacer, gris lo que solo hay que saber. Si todo fuera rojo,
   en dos días no se leería ninguno. */
.ventana-avisos {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.aviso-linea {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--linea);
  border-left-width: 4px;
  border-radius: var(--radio);
  background: var(--lienzo);
}

.aviso-texto { flex: 1 1 auto; min-width: 0; }
.aviso-linea .boton { flex: 0 0 auto; }

.aviso-linea.error { border-left-color: var(--rojo-suave); background: var(--fondo-rojo-suave); }
.aviso-linea.error b { color: var(--rojo-suave); }
.aviso-linea.falta { border-left-color: var(--ambar); background: var(--fondo-aviso); }
.aviso-linea.falta b { color: var(--ambar); }
.aviso-linea.novedad { border-left-color: var(--linea-fuerte); }
.aviso-linea.novedad b { color: var(--verde-marca); }

.tabla td.condominio-largo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

/* El «+» de añadir otro administrador: cerrado ocupa una letra, y solo
   al abrirlo aparece el desplegable. Así el renglón de un condominio que
   ya tiene dueño mide UNA línea, que es lo que tenía que medir desde el
   principio (Andrés, 11/9/2026: «quedó feo», y tenía razón). */
.anadir-otro { display: inline-block; vertical-align: middle; }
.anadir-otro > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  width: 16px;
  text-align: center;
  border-radius: var(--radio);
  color: var(--gris-apagado);
  font-size: 13px;
  line-height: 15px;
}
.anadir-otro > summary::-webkit-details-marker { display: none; }
.anadir-otro > summary:hover { background: var(--franja); color: var(--verde-marca); }
.anadir-otro[open] > summary { color: var(--verde-marca); }
.anadir-otro[open] .dar-condominio { margin-top: 3px; }
/* El desplegable, a su tamaño y no al de la columna. Estirado de lado a
   lado, un renglón sin administrador gritaba más que los veinticinco que
   sí lo tenían, y la columna se veía descuadrada. Y con 22 píxeles de alto
   el texto salía cortado por abajo. */
.dar-condominio select {
  flex: 0 1 250px;
  min-width: 0;
  height: 24px;
  padding: 0 4px;
  font-size: var(--letra-tabla);
}
.tabla td .dar-condominio .boton { flex: 0 0 auto; width: auto; }

/* La equis de quitarle un condominio a alguien: pequeña y callada. No
   es una acción de todos los días y no tiene por qué competir con el
   nombre que está al lado. */
.en-linea { display: inline; }
.tabla td .boton.quitar-suave {
  width: auto;
  min-height: 0;
  padding: 0 5px;
  margin-left: 2px;
  border-color: transparent;
  background: transparent;
  color: var(--gris-apagado);
  font-size: 12px;
}
.tabla td .boton.quitar-suave:hover {
  color: var(--rojo);
  border-color: var(--rojo);
  background: var(--fondo-paso-rechazar);
}

/* Una casilla con nota lleva su triangulito rojo en la esquina, como
   un comentario de Excel. La nota sale al dejar el raton encima. */
.tabla td.casilla-circuito { position: relative; }

.tabla td.con-nota::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  border-top: 6px solid var(--rojo);
  border-left: 6px solid transparent;
  pointer-events: none;
}

/* Un paso ya dado va en VERDE y el rechazo en ROJO: con doscientas
   filas delante, lo que hay que ver de un vistazo es si la factura
   avanza o si se paró. Andrés, 9/9/2026: «los botones que ya están
   presionados los quiero en verde, pero si es rechazado en rojo».
   Fondo de color y letra oscura encima, que se lee sin esfuerzo. */
/* Sin negrita (Andrés, 10/9/2026): con el fondo verde ya se ve cuál está
   dado, y doscientas filas en negrita pesan más que el trabajo. */
.tabla td .boton.dado,
.tabla td span.boton.dado {
  background: var(--fondo-paso-aprobar);
  border-color: var(--verde-paso);
  color: var(--verde-tinta);
  font-weight: 400;
  opacity: 1;
}

.tabla td .boton.rechazado,
.tabla td span.boton.rechazado {
  background: var(--fondo-paso-rechazar);
  border-color: var(--rojo-rechazar);
  color: var(--vino);
  font-weight: 400;
  opacity: 1;
}

/* Un paso dado sigue apagado —ya no se puede volver a dar— pero el
   apagado no le puede comer el color: el gris de «apagado» ganaba y
   todos los pasos dados se veían iguales. */
.tabla td .boton.dado.apagado { background: var(--fondo-paso-aprobar); }
.tabla td .boton.rechazado.apagado { background: var(--fondo-paso-rechazar); }

.tabla tr.nota-credito td { background: var(--nota-credito); }
.tabla tr.nota-debito td { background: var(--nota-debito); }

.franja {
  background: var(--franja);
  padding: 5px 8px;
  font-weight: 700;
  color: var(--verde-marca);
  font-size: var(--letra-tabla);
  letter-spacing: .4px;
}

/* El renglón de arriba de «Estado actual»: a la izquierda de qué va la
   pantalla y a la derecha, fijo, cuándo se procesó por última vez
   (Andrés, 11/9/2026: «colocar ahí fijo el dato en día y hora de la
   última vez que se corrió el proceso de procesar facturas»).

   Los dos en la misma línea y no uno debajo del otro: es el hueco que él
   señaló, y un renglón más arriba es un renglón menos de tabla. */
.franja-estado {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
}

.corrida-fija {
  margin: 0;
  color: var(--gris);
  font-size: var(--letra-tabla);
  letter-spacing: .4px;
  white-space: nowrap;
}

.corrida-fija b {
  color: var(--verde-marca);
  font-variant-numeric: tabular-nums;
}

/* Estado actual, en dos columnas: la situación general a la izquierda y
   los pendientes por condominio a la derecha. Andrés marcó en rojo esa
   mitad derecha vacía el 9/9/2026. Cada columna se desplaza por su
   cuenta, así que ninguna de las dos obliga a bajar por la otra. */
.estado-en-dos {
  display: grid;
  grid-template-columns: minmax(560px, 1fr) minmax(520px, 1fr);
  gap: 18px;
  align-items: start;
  height: 100%;
  min-height: 0;
}

.estado-en-dos > section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}

/* Que NO se corte, de verdad esta vez.

   El problema no era la altura de las tablas: era que encima de ellas va
   un renglón de texto, y con `height: 100%` la rejilla pedía la pantalla
   ENTERA además de ese renglon. Lo que sobraba se salía por abajo y la
   fila del TOTAL quedaba partida (Andrés, 10/9/2026, dos veces: «sale
   cortado», «se sigue cortando»). Topes en `vh` no lo arreglan: hay que
   repartir el alto, no adivinarlo.

   Así que en esta pantalla el lienzo reparte: el texto ocupa lo suyo y
   la rejilla se queda con lo que sobre; dentro, cada tabla se desplaza
   por su cuenta y su TOTAL se ve siempre. */
body.pantalla-estado .lienzo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.pantalla-estado .estado-en-dos {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

body.pantalla-estado .estado-en-dos > section {
  height: 100%;
  max-height: none;
}

body.pantalla-estado .estado-en-dos .tabla-marco {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* La de la izquierda son siete renglones y ya: se queda del alto que
   necesita. Estirada dejaba un recuadro blanco enorme debajo del TOTAL
   (Andrés, 10/9/2026: «quitar ese recuadro que le marqué»). La que se
   estira es la de la derecha, que es la larga. */
body.pantalla-estado .estado-en-dos > section:first-child {
  height: auto;
  max-height: 100%;
}

body.pantalla-estado .estado-en-dos > section:first-child .tabla-marco {
  flex: 0 0 auto;
}

.estado-en-dos h2 {
  margin: 0 0 8px;
  font-size: var(--letra-casilla);
  color: var(--verde-marca);
  letter-spacing: .3px;
}

/* «POR IDENTIFICAR» no es un condominio: son facturas que nadie supo a
   quién cargar. Se marca para que no se lea como uno más. */
.tabla tbody tr.sin-identificar td { background: var(--fondo-aviso); }
.tabla tbody tr.sin-identificar a { color: var(--ambar); font-weight: 700; }

/* La barra de manejo en volumen, que sale al pulsar su botón. */
.barra-volumen {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--franja);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
}

.barra-volumen label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--letra-tabla);
  color: var(--gris);
  min-width: 200px;
}

.rotulo-volumen {
  font-weight: 700;
  font-size: var(--letra-tabla);
  color: var(--verde-marca);
  letter-spacing: .4px;
  padding-bottom: 6px;
}

/* -------------------------------------------------------- la barra de estado
   A la izquierda lo que pasa, a la derecha los mandos. El mismo reparto
   que en el escritorio. */
.pie {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--blanco);
  border-top: 1px solid var(--linea-fuerte);
  box-shadow: 0 -2px 6px rgba(2, 34, 96, .07);
  position: relative;
  z-index: 5;
  font-size: var(--letra-tabla);
}

.celda-estado {
  /* Ya no se estira: el hueco lo hace el separador que va después de la
     barra de «está pensando», para que la barra quede PEGADA al estado,
     como en el pie del escritorio, y no en mitad del pie. */
  flex: 0 1 auto;
  max-width: 55%;
  color: var(--gris);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Un poco más grandes (Andrés, 10/9/2026): con el cuerpo de la
   tabla quedaban por debajo de todo lo demás del pie. */
.pie .boton { font-size: var(--letra-cuerpo); min-height: 27px; padding: 4px 13px; }

.casilla-pie { display: flex; align-items: center; margin: 0; }

.casilla-pie label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gris);
  white-space: nowrap;
  cursor: pointer;
}

/* El cuadro que pide la imputacion o el motivo antes de dar un paso.
   Es el equivalente del dialogo modal del escritorio: se contesta ahi
   mismo y la lista no se mueve. */
.cuadro {
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
  padding: 18px 20px;
  min-width: 420px;
  background: var(--blanco);
  color: var(--texto);
  font-family: var(--familia);
  font-size: var(--letra-cuerpo);
}

.cuadro::backdrop { background: rgba(2, 34, 96, .28); }

.cuadro h2 {
  margin: 0 0 4px;
  font-size: var(--letra-casilla);
  color: var(--verde-marca);
}

.cuadro label { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; }

/* La barra del crédito del asistente: verde mientras sobra, ámbar a
   partir de la mitad y roja a partir del 90 %. */
.barra-credito {
  height: 10px;
  background: var(--chrome);
  border: 1px solid var(--linea-fuerte);
  border-radius: 5px;
  overflow: hidden;
  margin: 6px 0;
}

.barra-credito span {
  display: block;
  height: 100%;
  background: var(--verde-ok);
}

.barra-credito span.media { background: var(--ambar); }
.barra-credito span.alta { background: var(--rojo); }

/* Las opciones que ofrece Dali: botones para contestar de un clic. */
.opciones-dali {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.opciones-dali .boton { border-color: var(--cian); }
.opciones-dali .boton:hover { background: var(--cian-tenue); }

/* -------------------------------------------------------------- los avisos */
.avisos { padding: 8px 12px 0; }

.aviso {
  padding: 7px 11px;
  margin-bottom: 5px;
  border: 1px solid var(--ambar);
  border-left-width: 3px;
  border-radius: var(--radio);
  box-shadow: var(--sombra-apoyada);
  background: var(--fondo-aviso);
  color: var(--texto);
}

/* Sin fondo de color (Andrés, 10/9/2026): basta el filo de la
   izquierda para decir si salió bien o mal. */
.aviso.success { border-color: var(--linea); border-left: 4px solid var(--verde-ok); background: var(--blanco); }
.aviso.error { border-color: var(--linea); border-left: 4px solid var(--rojo); background: var(--blanco); }

/* El rojo de los avisos que están SIEMPRE puestos —los condominios sin
   administrador y sin catálogo propio—, un tono más suave. Andrés,
   11/9/2026: «quiero me salga en rojo no muy fuerte».

   Y tiene razón de sobra: el rojo fuerte es el de «esto acaba de fallar»,
   y se gasta si está puesto todo el día. Estos son recordatorios de una
   tarea pendiente, no errores: se ven, se leen, y no gritan. */
/* --rojo-suave y --fondo-rojo-suave viven en estilo.css, con la paleta. */

.aviso.error.pendiente {
  border-left-color: var(--rojo-suave);
  background: var(--fondo-rojo-suave);
  color: var(--texto);
}
.aviso.error.pendiente b { color: var(--rojo-suave); }

/* ---------------------------------------------------------- la portada
   Fondo blanco: es la única pantalla del programa que no va sobre el
   gris de trabajo. */
/* La portada se desplaza entera y no corta la última fila de tarjetas
   (Andrés, 9/9/2026: «no quiero se corte abajo»). El encabezado y el
   pie se quedan fijos; lo que rueda es la rejilla. */
body.portada { background: var(--blanco); overflow: hidden; }
body.portada > .secciones { min-height: 0; }

.portada-encabezado {
  display: flex;
  align-items: center;
  gap: var(--espacio-marco);
  padding: 14px 24px;
  background: var(--blanco);
}

.portada-encabezado .marca-modulo { font-size: var(--letra-marca); }

/* Los cinco colores de los globitos. Van aquí y no sueltos en la
   plantilla porque el sistema de diseño lo manda: «ningún #RRGGBB escrito
   suelto» (DISEÑO.md, sección 1). Y porque así se cambian en un sitio.
   No salen de la paleta de la casa a propósito: la paleta es marino y
   gris, y unos globos de cumpleaños en marino y gris no son globos. */
/* --globo-1 … --globo-5 viven en estilo.css, con la paleta. */

/* Los globitos de quien cumple años, en el hueco que Andrés marcó el
   11/9/2026: entre la frase del día y el saludo. Ocupan el alto del
   encabezado y ni un píxel más, para no mover nada de sitio: el resto
   del año ese hueco está vacío y la pantalla tiene que verse igual.
   Se mecen despacio, como globos de verdad, y cada uno a su ritmo para
   que no parezcan un metrónomo. */
.globos { flex: 0 0 auto; height: 62px; display: flex; align-items: center; }
.globos svg { height: 62px; width: auto; overflow: visible; }
.globo { transform-origin: 50% 100%; animation: flotar 4.6s ease-in-out infinite; }
/* Los cinco, con su compás y su desfase: si dos coinciden se nota, porque
   los globos de verdad no se mecen a la vez. El primero lleva los valores
   de `.globo` y se escribe igual, para que los cinco se lean seguidos. */
.globo.g1 { animation-duration: 4.6s; animation-delay: 0s; }
.globo.g2 { animation-duration: 5.4s; animation-delay: -.9s; }
.globo.g3 { animation-duration: 4.1s; animation-delay: -2.2s; }
.globo.g4 { animation-duration: 5.9s; animation-delay: -1.4s; }
.globo.g5 { animation-duration: 4.8s; animation-delay: -3.1s; }

@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-5px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .globo { animation: none; }
}

.saludo { text-align: right; }
.saludo b { color: var(--verde-marca); font-size: var(--letra-casilla); }
.saludo div { color: var(--gris); }

.desarrollado { text-align: center; color: var(--gris); font-size: var(--letra-tabla); }
/* `margin: auto` a los lados y no solo arriba: en bloque, la imagen se
   quedaba pegada a la izquierda mientras el rótulo iba centrado, y el
   logotipo salía descolgado del texto que lo anuncia. */
/* 35 -> 42: un 20 % mas, a peticion de Andres (11/9/2026). */
.desarrollado img { display: block; margin: 5px auto 0; height: 42px; }

/* El aviso de quién cumple años hoy, en la portada. Con su filo verde
   y su globo: es la única cosa de esta pantalla que no habla de
   trabajo, y tiene que notarse sin gritar. */
.cumple-aviso {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 18px 0;
  padding: 9px 14px;
  background: var(--franja);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde-marca);
  border-radius: var(--radio);
}
.cumple-globo { font-size: 22px; line-height: 1; }
.cumple-globo.grande { font-size: 44px; text-align: center; margin-bottom: 4px; }

/* La ventanita del saludo, centrada y sin nada más: se lee, se cierra y
   a trabajar. */
.cuadro-cumple { text-align: center; max-width: 420px; }
/* El título en el naranja de fiesta (Andrés, 13/9/2026: «más energía y alegría»). */
.cuadro-cumple h2 { color: var(--globo-1); font-size: 22px; margin: 0 0 8px; }
.cuadro-cumple p { margin: 0; color: var(--texto); line-height: 1.5; }

.raya-portada { height: 1px; background: var(--verde-marca); opacity: .35; }

/* La banda «SECCIONES DEL SISTEMA», que Andrés pidió más oscura. */
.banda-secciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--franja-oscura);
  color: var(--verde-marca);
  padding: 6px 14px;
  margin: 14px 18px 0;
  border-radius: var(--radio);
  font-size: var(--letra-tabla);
  font-weight: 700;
  letter-spacing: .6px;
}

.banda-secciones span:last-child { font-weight: 400; }

.banda-secciones .firma-plataforma {
  margin-left: 16px;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--gris);   /* de la paleta: DISEÑO.md no admite colores sueltos */
}
.banda-secciones .firma-plataforma strong { color: var(--verde-marca); }

.secciones {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  /* CINCO columnas, no cuatro. Son quince secciones: en cuatro
     columnas la última fila se quedaba con tres tarjetas y un hueco a
     la derecha, y en cinco entran justas —tres filas de cinco— sin que
     sobre ni falte sitio. Andrés, 11/9/2026: «no quiero el espacio
     vacío, redistribuir tamaño para que todo quede lleno».

     El día que las secciones dejen de ser quince habrá que volver a
     mirar esto: el número de columnas está atado al de secciones. */
  grid-template-columns: repeat(5, 1fr);
  /* `1fr` en las filas: se reparten el alto que queda. En una ventana
     baja las tarjetas se hacen más bajas; nunca se corta la última. */
  grid-auto-rows: minmax(104px, 1fr);
  gap: 14px;
  padding: 14px 18px 16px;
  position: relative;
}

/* Una sección que se pulsa: tarjeta con su sombra. La que está abierta
   lleva el raíl del color de la casa a la izquierda. */
/* La tarjeta: tres cosas y nada más —símbolo, nombre y estado—, cada
   una en su renglón y con su aire. Con cuatro se montaban. `overflow:
   hidden` es el cinturón: si algún día entra algo más largo, se corta
   antes que encabalgarse. */
.seccion {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
  padding: 10px 14px;
  text-align: center;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.seccion h2 {
  margin: 0;
  font-size: var(--letra-casilla);
  font-weight: 700;
  color: var(--verde-tinta);
  letter-spacing: .4px;
  line-height: 1.2;
}

/* El símbolo de la sección: es lo primero que ve el ojo y lo que
   distingue una tarjeta de la de al lado. */
.seccion .simbolo { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.seccion h2, .seccion .estado, .seccion .boton { flex: 0 0 auto; }

/* Lo que le espera a uno dentro («2 por aprobar»), bajo el nombre.
   Andrés, 13/9/2026: que la tarjeta diga cuánto le espera a esa persona. */
.seccion .resumen {
  color: var(--verde-marca);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  flex: 0 0 auto;
}

/* El estado, como una pastilla y no como una línea más de texto. */
.seccion .estado {
  color: var(--gris);
  font-size: 11px;
  letter-spacing: .5px;
  background: var(--chrome);
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  padding: 1px 10px;
}

/* La que se puede abrir: raíl de la casa, ground apenas teñido y su
   símbolo a todo color. Las demás, en gris, para que la disponible
   salte a la vista. */
.seccion.abierta {
  border-left: 4px solid var(--verde);
  background: linear-gradient(180deg, var(--cian-suave) 0%, var(--blanco) 55%);
}

.seccion.abierta h2 { color: var(--verde-marca); }

/* Los módulos que aún no abren, APAGADOS enteros: fondo gris claro, el
   símbolo sin color y el nombre en gris, sin sombra. Andrés, 13/9/2026:
   «en gris los módulos que aún no están activos», y eligió «tarjeta
   entera apagada». (El 11/9 había pedido «a color los dibujos» porque
   en gris al 45 % la portada entera se veía apagada; ahora las activas
   —blancas, a color y con su raíl verde— son las que saltan a la vista.) */
.seccion:not(.abierta):not(.dali) {
  background: var(--chrome);
  box-shadow: none;
}
.seccion:not(.abierta):not(.dali) .simbolo { filter: grayscale(1); opacity: .5; }
.seccion:not(.abierta):not(.dali) h2 { color: var(--gris-apagado); }
.seccion:not(.abierta):not(.dali) .estado { background: var(--blanco); }
.seccion { transition: box-shadow .14s ease, transform .14s ease; }

.seccion.abierta:hover, .seccion.dali:hover {
  box-shadow: var(--sombra-flotante);
  border-color: var(--verde);
  transform: translateY(-2px);
}

.seccion.sin-acceso { background: var(--chrome); }
.seccion.sin-acceso .estado { color: var(--rojo); }

/* Dali en el hueco de la última fila. No es una sección más: es el
   asistente, y por eso lleva el cian de la casa en vez del marino. */
.seccion.dali { border-left: 4px solid var(--cian); }
.seccion.dali h2 { color: var(--verde-marca); }
.seccion.dali { background: linear-gradient(180deg, var(--cian-suave) 0%, var(--blanco) 55%); }
.seccion.dali:hover { box-shadow: var(--sombra-flotante); border-color: var(--cian); }

.pie-portada {
  text-align: center;
  padding: 14px;
  border-top: 1px solid var(--linea);
  color: var(--verde-marca);
  font-style: italic;
}

.pie-portada .autor { color: var(--gris); font-style: normal; margin-left: 8px; }

/* ---------------------------------------------------------- formularios */
.formulario { display: flex; flex-direction: column; gap: 9px; max-width: 580px; }
.formulario label { display: flex; flex-direction: column; gap: 3px; }

.formulario h2, .tarjeta h2 {
  margin: 0 0 6px;
  font-size: var(--letra-tabla);
  font-weight: 700;
  color: var(--verde-marca);
  letter-spacing: .5px;
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
  padding: 14px;
}

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

/* Tarjetas en rejilla: una por condominio en «Órdenes de pago». El alto lo
   pone el contenido —nunca una altura fija, que fue lo que montó unas
   cosas encima de otras— y las columnas se llenan sin dejar huecos. */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  align-items: start;
  margin: 10px 0 4px;
}
.tarjetas .tarjeta { display: flex; flex-direction: column; gap: 6px; }
.tarjeta h3 {
  margin: 0;
  font-size: var(--letra-cuerpo);
  font-weight: 700;
  color: var(--texto);
  line-height: 1.3;
}
/* El filo verde de la izquierda, como el `tk.Frame(bg=VERDE, width=4)` de
   la ventana del escritorio. */
.tarjeta.con-filo { border-left: 4px solid var(--verde-marca); padding-left: 14px; }
.tarjeta .acciones { margin-top: 4px; }

.ayuda { color: var(--gris); font-size: var(--letra-tabla); }
.error-campo { color: var(--rojo); font-size: var(--letra-tabla); }
.dato-suelto { margin: 3px 0; }

.rotulo-grupo {
  margin: 12px 0 6px;
  font-size: var(--letra-tabla);
  color: var(--gris);
  letter-spacing: .5px;
}

.rejilla-casillas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 14px; }
.casilla { display: flex; align-items: center; gap: 5px; }
.casilla.del-nivel span { color: var(--verde-ok); }

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: var(--letra-tabla);
  border: 1px solid;
}

.pill.aprobada { background: var(--fondo-paso-aprobar); border-color: var(--verde-paso); }
.pill.rechazada { background: var(--fondo-paso-rechazar); border-color: var(--rojo-rechazar); }
.pill.pendiente { background: var(--fondo-aviso); border-color: var(--ambar); }

/* ------------------------------------------------------------ la entrada */
body.entrar { align-items: center; justify-content: center; background: var(--chrome); }

.cuadro-entrar {
  width: 400px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
  padding: 26px;
  text-align: center;
}

.cuadro-entrar img { height: 80px; margin-bottom: 8px; }

.cuadro-entrar h1 {
  margin: 0 0 3px;
  font-size: var(--letra-titulo);
  color: var(--verde-marca);
}

.cuadro-entrar form { margin-top: 16px; text-align: left; }

/* --------------------------------------------------------- desplazamiento */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--chrome); }
::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 6px; border: 3px solid var(--chrome); }
::-webkit-scrollbar-thumb:hover { background: var(--gris-suave); }

/* La hoja, SIEMPRE HORIZONTAL. Andrés, 11/9/2026, con el cuadro de
   imprimir del navegador abierto: «siempre abrir en horizontal en diseño
   de impresión».

   No es capricho: los papeles de este programa son tablas anchas
   —condominio, proveedor, número, moneda, monto— y en vertical no
   caben; el navegador las encoge hasta que no se leen. Con esto, el
   cuadro de imprimir ya sale en «Horizontal» y no hay que acordarse de
   cambiarlo en cada impresión.

   Va en `@page` y no dentro de un `@media print`: `@page` YA es solo
   para el papel, y algunos navegadores no lo miran si se les anida.
   Quien necesite una hoja vertical la cambia en el cuadro, como
   siempre. */
@page {
  size: landscape;
  margin: 12mm 10mm;
}

/* Al imprimir, ni barras ni menús: solo el contenido. */
@media print {
  .menu-barra, .barra, .pie, .sombra-encabezado, .filtros-grupo { display: none; }
  body { background: var(--blanco); overflow: visible; }
  /* Al imprimir, la marca de agua fuera: gasta tinta y no aporta. */
  body::after { display: none; }
}

/* ------------------------------------------------------- la pantalla de entrar
   La ventana `interfaz.VentanaEntrada` del escritorio: cabecera centrada
   con el logotipo de SICSA y la razón social, la banda de color, y el
   cuerpo con los dos campos alineados a la izquierda.

   Esta pantalla NO tenía ni una línea de CSS: sus clases estaban en la
   plantilla y aquí no existían, así que el logotipo salía al tamaño que
   el navegador quisiera —una mancha azul de lado a lado— y los campos
   quedaban sueltos. Andrés, 10/9/2026: «la pagina para loguear sale
   horrible». */
body.entrada {
  background: radial-gradient(1200px 700px at 15% 10%, var(--entrada-luz) 0%, var(--marino) 45%, var(--entrada-sombra) 100%);
}
body.entrada .cuerpo { align-items: center; justify-content: center; }
/* El fieldset trae min-inline-size: min-content; sin quitarlo, en una
   ventana angosta la tarjeta se sale por la derecha. */
body.entrada .grupo { flex: 0 0 auto; min-inline-size: 0; max-width: 100%; border: 0; box-shadow: none; background: none; }
body.entrada .grupo > legend { display: none; }
body.entrada .lienzo { display: flex; justify-content: center; background: none; }
/* Dos trazos diagonales apenas visibles, para que el fondo no sea plano. */
body.entrada .cuerpo::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 55%, rgba(2, 226, 253, .06) 55%, rgba(2, 226, 253, .06) 62%, transparent 62%),
    linear-gradient(115deg, transparent 70%, rgba(255, 255, 255, .04) 70%, rgba(255, 255, 255, .04) 74%, transparent 74%);
}

/* La tarjeta: dos paneles, la marca y el acceso. */
.entrada-marco {
  position: relative;
  width: 880px;
  max-width: 94vw;
  min-height: 470px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--blanco);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.entrada-marca-panel {
  padding: 46px 44px 34px;
  background: var(--entrada-panel);
  border-right: 1px solid var(--entrada-panel-borde);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.entrada-sicsa { height: 110px; width: auto; }

.entrada-marca {
  margin-top: 26px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--marino);
}

.entrada-razon { color: var(--entrada-texto-suave); font-size: 14px; margin-top: 4px; }
.entrada-lema { color: var(--vino); font-style: italic; font-size: 15px; margin-top: 10px; }

.entrada-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 46px 48px 30px;
}

.entrada-cuerpo h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--marino);
}

.entrada-cuerpo > .ayuda { margin: 0 0 26px; color: var(--entrada-texto-suave); font-size: 13px; line-height: 1.5; }

.entrada-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--entrada-texto-suave);
  position: relative;
}

.entrada-campo input {
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--texto);
  padding: 12px 14px;
  border: 1.5px solid var(--entrada-campo-borde);
  border-radius: 10px;
  background: var(--entrada-campo);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.entrada-campo.con-ojo input { padding-right: 84px; }
.entrada-campo input:focus {
  border-color: var(--marino-medio);
  box-shadow: 0 0 0 4px rgba(10, 62, 134, .12);
  background: var(--blanco);
}

.entrada-ojo {
  position: absolute;
  right: 12px;
  bottom: 11px;
  border: 0;
  background: none;
  color: var(--entrada-texto-tenue);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  cursor: pointer;
}

.entrada-aviso { margin: -8px 0 12px; color: var(--rojo); font-size: 13px; }
.entrada-dicho { margin: -8px 0 12px; color: var(--marino); font-size: 13px; }

/* La pregunta al tercer fallo seguido. */
.entrada-pregunta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--entrada-campo-borde);
  border-left: 4px solid var(--vino);
  border-radius: 10px;
  background: var(--entrada-panel);
  font-size: 13px;
  color: var(--entrada-texto-suave);
  line-height: 1.45;
}
.entrada-pregunta b { color: var(--marino); font-size: 15px; }
.entrada-pregunta button {
  align-self: flex-start;
  margin-top: 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--blanco);
  background: var(--vino);
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
}
.entrada-pregunta button:hover { filter: brightness(1.1); }

.entrada-entrar {
  margin-top: 6px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--blanco);
  background: linear-gradient(180deg, var(--marino-medio) 0%, var(--marino) 100%);
  border: 0;
  border-radius: 10px;
  padding: 13px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(2, 34, 96, .28);
}
.entrada-entrar:hover { filter: brightness(1.08); }

.entrada-olvido {
  margin: 16px auto 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--marino-medio);
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
  padding: 0;
}

.entrada-pie {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--entrada-texto-tenue);
  font-size: 11px;
}
.entrada-pie img { height: 40px; width: auto; vertical-align: middle; margin-left: 8px; }

/* En un teléfono, los dos paneles uno sobre otro. */
@media (max-width: 720px) {
  .entrada-marco { grid-template-columns: 1fr; min-height: 0; }
  .entrada-marca-panel { padding: 28px 24px 20px; border-right: 0; border-bottom: 1px solid var(--entrada-panel-borde); }
  .entrada-sicsa { height: 76px; }
  .entrada-cuerpo { padding: 26px 24px 20px; }
}

/* --------------------------------------------- el resumen por condominio
   La hoja que sale por impresora: membrete arriba con los dos logotipos,
   las secciones con su tabla y su total, y el pie. Es lo que el
   escritorio dibuja con `resumen_condominio.py`; aquí lo dibuja el
   navegador, y por eso hay que decirle las medidas.

   Esto tampoco tenía CSS: el logotipo de la casa, que es un SVG sin
   medidas propias, se estiraba de lado a lado y tapaba la hoja entera
   (Andrés, 10/9/2026, viéndolo: «horrible»). */
.hoja {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
  padding: 22px 26px 18px;
  max-width: 900px;
}

.hoja-cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--verde-marca);
}

/* Los dos con alto fijo: ninguna de las dos imágenes trae medidas
   propias, y sin esto crecen hasta donde les deje el contenedor. */
.hoja-logo { height: 54px; width: auto; }
.hoja-marca { height: 30px; width: auto; margin-left: auto; }

.hoja-cabecera > div { flex: 1 1 auto; min-width: 0; }

.hoja-cabecera h1 {
  margin: 0;
  font-size: var(--letra-titulo);
  font-weight: 700;
  color: var(--verde-marca);
  letter-spacing: .5px;
}

.hoja-sub { color: var(--gris); font-size: var(--letra-tabla); margin-top: 3px; }

.hoja-seccion {
  margin: 16px 0 5px;
  font-size: var(--letra-tabla);
  font-weight: 700;
  color: var(--verde-marca);
  letter-spacing: .5px;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 3px;
}

.hoja-seccion span { color: var(--gris); font-weight: 400; }

.hoja .tabla { width: 100%; }
.hoja .tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.hoja .tabla tfoot td { border-top: 1px solid var(--linea-fuerte); }

.hoja-pie {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid var(--linea);
  color: var(--gris-suave);
  font-size: var(--letra-tabla);
  text-align: center;
}

/* Al imprimir, la hoja es la página: sin marco, sin sombra y sin lo que
   solo sirve en pantalla. */
@media print {
  .no-imprimir { display: none; }
  .hoja { border: 0; box-shadow: none; padding: 0; max-width: none; }

  /* En la hoja impresa NO va nada del programa. Andrés, 10/9/2026, sobre
     el desplegable de condominio y los botones «Ver» e «Imprimir»: «eso
     no debe aparecer en la impresión».

     La hoja lleva su propio membrete —el logotipo de SICSA, el de TRIA
     TECH, el condominio, la fecha y quién la sacó—, así que el
     encabezado del programa, su marco y su rótulo sobran: repiten lo
     mismo y gastan el alto de la primera página.

     «Nada de eso, solo el logo TRIA» (10/9/2026). El encabezado entero
     se va —marca de SICSA, título, frase del día, usuario y nivel— y el
     logotipo de TRIA TECH se sigue viendo arriba a la derecha porque la
     hoja lleva el suyo propio, en ese mismo sitio. Dejando además el
     del encabezado saldría dos veces, uno debajo del otro. */
  .encabezado { display: none; }
  .grupo { border: 0; box-shadow: none; padding: 0; margin: 0; }
  .grupo > legend { display: none; }
  .lienzo { padding: 0; overflow: visible; }
  main.cuerpo { padding: 0; overflow: visible; }
}

/* ===========================================================================
   LO QUE ESTABA SIN DISEÑAR
   ---------------------------------------------------------------------------
   El 10/9/2026 salió que 34 clases usadas en las plantillas no tenían ni
   una regla aquí: pantallas enteras sin diseño, no mal diseñadas. Se
   comprueba solo, en `facturas/pruebas_presentacion.py`.
   =========================================================================== */

/* ------------------------------------------------ la banda de filtros corta
   La que llevan las pantallas de una sola búsqueda: manual, preguntas,
   diario, imputaciones, verificar, mis tokens, resumen. */
.filtros {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-apoyada);
}

.filtros label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--gris);
  font-size: var(--letra-tabla);
  letter-spacing: .3px;
  font-weight: 700;
}
/* Los rótulos de todas las bandas de filtros van en negrita (14/9/2026);
   los campos y las listas dentro, con su peso normal. */
.rejilla-filtros label input, .rejilla-filtros label select,
.fila-buscar label input, .filtros label input, .filtros label select,
.mandos label input, .mandos label select { font-weight: 400; }

.filtros input, .filtros select { min-width: 220px; }
.filtros .acciones { display: flex; gap: 6px; }

/* --------------------------------------------------- la ficha de una factura
   Pares de rótulo y dato en dos columnas. El rótulo pequeño encima y el
   dato debajo, que es como se leen los datos de una ficha. */
.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 18px;
}

.dato { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.dato .rotulo {
  color: var(--gris);
  font-size: var(--letra-tabla);
  letter-spacing: .3px;
}

.dato .valor { color: var(--texto); overflow-wrap: anywhere; }

/* Los sellos del circuito, uno por paso. */
.sellos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.sello {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde-paso);
  border-radius: var(--radio);
  box-shadow: var(--sombra-apoyada);
  padding: 9px 12px;
}

.sello .titulo {
  font-weight: 700;
  color: var(--verde-marca);
  font-size: var(--letra-tabla);
  letter-spacing: .3px;
}

.sello .token {
  display: block;
  margin: 3px 0;
  font-family: var(--familia-tabular);
  font-size: var(--letra-cuerpo);
  letter-spacing: .5px;
  color: var(--texto);
}

.sello .firma { color: var(--gris); font-size: var(--letra-tabla); }

/* Los comentarios de las casillas. */
.rejilla-comentarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.comentario-casilla {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-apoyada);
  padding: 9px 12px;
  position: relative;
}

/* El triangulito rojo de la esquina, como un comentario de Excel. */
.comentario-casilla .triangulo {
  position: absolute;
  top: 0;
  right: 0;
  border-top: 8px solid var(--rojo);
  border-left: 8px solid transparent;
}

/* Una celda que solo lleva un botón: sin el aire de una celda de dato. */
.celda-boton { padding: 2px 4px; white-space: nowrap; }
.paso-form { display: inline; }

/* Una celda con DOS mandos —«Ver el PDF» y «Mandar por correo»—. La
   regla general de las tablas (`.tabla td button { width: 100% }`)
   sirve cuando el boton es el unico de su celda; con dos, el segundo
   pide el ancho entero, se sale por la derecha y se queda sin rotulo:
   un recuadro vacio. Aqui cada uno ocupa lo suyo. */
/* En «Qué ve en el menú», el renglón que su nivel no le permite: se
   enseña igual —para que se vea que no aparece por la casilla y no
   porque alguien se lo apagara— pero apagado. */
.casilla.sin-casilla span { color: var(--gris); font-style: italic; }

/* La barra de «mandar TODO de una vez», encima de la tabla de
   condominios. Con su filo, para que se lea como lo que es: la salida
   rapida, y no un renglon mas de la lista. */
.barra-todo {
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--franja);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde-marca);
  border-radius: var(--radio);
}
.barra-todo .ayuda { margin: 0; }

.tabla td.dos-mandos { white-space: nowrap; }
.tabla td.dos-mandos .boton,
.tabla td.dos-mandos button { width: auto; max-width: 100%; }
.tabla td.dos-mandos .paso-form { margin-left: 6px; }

/* Debajo del boton del circuito, en la ficha: quien dio el paso y
   cuando. Solo sale en los pasos DADOS; los que aun no tocan lo dicen
   en el globo del raton. Va acotada de ancho porque si no cada celda
   se estira con la frase y la tabla se sale de la pantalla, que es la
   premisa de Andres: que se vea de una vista, sin barra de lado. */
/* El circuito de la ficha. Aqui el boton del paso comparte celda con
   el campo que hay que escribir antes —la imputacion, el motivo del
   rechazo, el numero de deposito—, y la regla general de las tablas
   (`.tabla td button { width: 100% }`) lo sacaba de la celda y lo
   montaba encima de la columna de al lado. Aqui ocupa lo suyo. */
.tabla.circuito td .boton,
.tabla.circuito td button { width: auto; max-width: 100%; }
.tabla.circuito td input { vertical-align: middle; }

.quien-lo-dio {
  font-size: 11px; color: var(--gris); line-height: 1.25;
  max-width: 190px; margin: 3px auto 0; white-space: normal;
}
.boton.chico { padding: 1px 8px; font-size: var(--letra-tabla); }

/* -------------------------------------------- la barra de agregar o corregir
   La de «Imputaciones contables», con su rótulo delante. */
.barra-bloque {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: var(--franja);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.barra-bloque label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--gris);
  font-size: var(--letra-tabla);
}

.rotulo-bloque {
  align-self: center;
  font-weight: 700;
  color: var(--verde-marca);
  font-size: var(--letra-tabla);
  letter-spacing: .5px;
  white-space: nowrap;
}

/* --------------------------------------------------------- la tabla de permisos
   Volteada: los permisos en filas y las personas en columnas (Andrés, en
   el escritorio: «así no debo pasar por cada persona»). */
.tabla-permisos th, .tabla-permisos td { white-space: nowrap; }

/* La tabla se reparte el ancho que hay y no el que pidan los nombres.
   Con siete personas, los nombres largos —«ABIMELETH SALAZAR», «ING.
   PABLO VALVERDE»— estiraban la tabla hasta 1.323 puntos y se llevaban
   por delante la barra de botones: «Reporte en PDF» se salia por la
   derecha de la pantalla. Los nombres caben en dos renglones y las
   columnas solo tienen que albergar una palomita.

   Es la premisa de Andres (10/9/2026): «siempre tratar que se vea en
   una vista para evitar scroll». */
/* El buscador de Quién puede qué (Andrés, 13/9/2026) y el de toda lista
   (14/9/2026, base.html lo pone solo): filtran en pantalla. */
.buscar-permisos, .buscar-lista { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 8px; flex: 0 0 auto; }
.buscar-permisos label, .buscar-lista label { display: flex; flex-direction: column; gap: 3px; color: var(--gris); font-size: var(--letra-tabla); font-weight: 700; letter-spacing: .3px; }
.buscar-permisos input, .buscar-lista input { width: 260px; font-weight: 400; }
.tabla-permisos { table-layout: fixed; width: 100%; }
.tabla-permisos thead th { white-space: normal; word-break: break-word; }

/* La primera columna se queda quieta al desplazar de lado: sin ella no
   se sabe de qué permiso es cada palomita. */
.tabla-permisos .permiso-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--blanco);
  text-align: left;
  white-space: normal;
  /* Con `table-layout: fixed` el ancho lo manda esta linea y no el
     contenido: si no se le dice, la columna de los nombres se encoge y
     cada permiso se parte en dos renglones, que es alto de pantalla
     tirado. */
  width: 240px;
  min-width: 240px;
}

/* «A quién le llega cada cosa»: de dónde le viene a cada correo lo que
   le llega hoy —de la casilla o de lo escrito a mano— y, debajo, cuándo
   sale ese correo. Van en cuerpo menor: lo que se busca es la dirección,
   no la explicación. */
/* El renglón de escribir direcciones: el campo se lleva el ancho y el
   botón lo suyo. `flex-direction: row` DICHO, que es la tercera vez que
   el mismo olvido apila lo que iba en fila. */
.forma-destino {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.forma-destino input { flex: 1 1 auto; min-width: 0; }
.forma-destino .boton { flex: 0 0 auto; }

.de-donde {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--gris);
  white-space: nowrap;
}
.renglon-pista td {
  border-top: 0;
  padding-top: 0;
  font-size: 11.5px;
  color: var(--gris);
}
/* Un enlace `directo` dentro de una tabla se abre con UN clic (la fecha
   de un aviso abre su correo); se ve como enlace, no como botón. */
.tabla td a.directo { color: var(--verde-marca); text-decoration: underline dotted; }
.tabla td a.directo:hover { text-decoration: underline; }
/* El correo que se mandó, tal cual, en su marco (Comunicaciones › fecha). */
.correo-datos { margin-bottom: 12px; }
.correo-datos .dato { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--linea); }
.correo-datos .dato .rotulo { flex: 0 0 110px; color: var(--gris); font-size: 11px; letter-spacing: .3px; padding-top: 2px; }
.correo-visto { background: var(--blanco); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); box-shadow: var(--sombra-apoyada); padding: 18px 22px; max-width: 760px; overflow-x: auto; }
/* «A quién le llega cada cosa», ordenada (13/9/2026): un renglón por
   correo, con la explicación debajo del nombre y una dirección por línea. */
.tabla.destinos td { white-space: normal; vertical-align: top; padding-top: 7px; padding-bottom: 7px; height: auto; }
.tabla.destinos td.que-se-manda b { display: block; color: var(--texto); }
.tabla.destinos td.que-se-manda .detalle { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--gris); }
.tabla.destinos td.a-quien .ficha-correo { display: flex; align-items: center; gap: 2px; line-height: 1.4; }
.tabla.destinos td.a-quien .direccion { font-family: var(--familia-tabular); font-size: 12px; }
.tabla.destinos td.a-quien .en-linea .boton.quitar-suave { font-size: 10.5px; padding: 0 6px; margin-left: 6px; text-decoration: underline; }
.tabla.destinos td.a-quien .pill { display: inline-block; margin-top: 4px; font-size: 9.5px; }
.tabla.destinos td.dos-mandos { white-space: normal; }
.tabla.destinos .forma-destino { margin-top: 1px; }

/* La columna del número, en la tabla de permisos: estrecha y quieta a
   la izquierda, igual que la de los nombres. Andrés, 10/9/2026: «toda
   lista debe tener una columna de numeración». */
.tabla-permisos .num-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--blanco);
  width: 38px;
  color: var(--gris);
}
.tabla-permisos thead .num-col { background: var(--franja); }
.tabla-permisos .permiso-col { left: 38px; }

.tabla-permisos thead .permiso-col { background: var(--franja); }

/* El encabezado, quieto de verdad. Andrés, 11/9/2026: «bloquear el
   encabezado para que no se mueva con el scroll vertical; también
   bloquear la izquierda para que no se mueva cuando me desplace a la
   derecha».

   La izquierda ya estaba congelada (`num-col` y `permiso-col`), y el
   encabezado también —pero mal: esta tabla tiene DOS renglones de
   encabezado, el de los nombres y el de los niveles, y cada `th` llevaba
   su propio `top: 0`. Al desplazar, los dos se pegaban arriba y el de
   los niveles tapaba al de los nombres.

   Se pega el THEAD entero, que se mueve como un bloque y respeta sus dos
   renglones; a los `th` se les quita el `top` propio y se les deja el
   `sticky` solo para lo suyo, que es quedarse a la izquierda. */
.tabla-permisos thead { position: sticky; top: 0; z-index: 5; }
/* Hasta el 14/9/2026 este marco iba con `overflow: visible` para que el
   `sticky` mirara al lienzo, que era el que desplazaba. Desde que toda
   lista desplaza DENTRO de su marco (véase `.lienzo:has(> .tabla-marco)`),
   ese truco sobraba y estorbaba: el encabezado se quedaba un renglón
   por debajo del borde (Andrés, 14/9/2026: «al dar scroll se ve mal los
   encabezados»). El marco vuelve a recortar y desplazar, como los demás. */
.tabla-permisos thead th { top: auto; }
.tabla-permisos tr.nivel th { background: var(--franja); color: var(--gris); font-weight: 400; }
/* Los renglones de «Entrar a la sección…» iban con franja celeste y en
   negrita, y en pantalla se leían como si fueran otra tabla. Andrés,
   11/9/2026: «todo con mismo diseño por favor, sin esa parte celeste
   diferente». Son permisos como los demás y se ven como los demás. */
.tabla-permisos tr.fila-seccion td { background: inherit; font-weight: inherit; }
.tabla-permisos .si { color: var(--verde-tinta); font-weight: 700; }
.tabla-permisos .no { color: var(--gris-suave); }

/* ------------------------------------------------------------- manual y FAQ
   Temas que se abren y se cierran. Cerrados de entrada: la lista entera
   se recorre con la vista en un momento, y se abre solo lo que interesa. */
.ayuda-lista { display: flex; flex-direction: column; gap: 6px; max-width: 900px; }

.ayuda-tema {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-apoyada);
  padding: 8px 12px;
}

.ayuda-tema > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--verde-marca);
  list-style-position: outside;
}

.ayuda-tema[open] > summary { margin-bottom: 6px; }

.ayuda-cuerpo { color: var(--texto); max-width: 68ch; }
.ayuda-cuerpo p { margin: 0 0 8px; }

/* ------------------------------------------------------------- la bitácora
   El renglón a renglón de lo que fue pasando en una corrida. */
.bitacora {
  max-height: 260px;
  overflow: auto;
  padding: 8px 10px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  /* La letra del programa, no la de ancho fijo: esto se lee como el
     cuadro de arriba y no como la salida de una consola (Andrés,
     10/9/2026: «ese tipo de letra en Detalle no, usar la del cuadro de
     arriba»). */
  font-size: var(--letra-tabla);
  line-height: 1.6;
  color: var(--texto);
}

.bitacora > div { padding: 1px 0; }

/* --------------------------------------------------------- la charla de Dali
   Los mismos colores y el mismo reparto que `ventana_asistente`: lo suyo
   a la izquierda, lo de uno a la derecha. */
.charla {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-apoyada);
}

.burbuja {
  max-width: 74%;
  padding: 8px 13px;
  border-radius: 13px;
  border: 1px solid var(--borde-asistente);
  background: var(--fondo-asistente);
  align-self: flex-start;
}

.burbuja.yo {
  align-self: flex-end;
  background: var(--fondo-persona);
  border-color: var(--borde-persona);
}

.burbuja .quien {
  color: var(--gris);
  font-size: var(--letra-tabla);
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 2px;
}

.burbuja .texto { color: var(--texto); overflow-wrap: anywhere; }

.preguntar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.preguntar input[type=text], .preguntar textarea { flex: 1 1 auto; }

.a-fondo {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--gris);
  font-size: var(--letra-tabla);
  white-space: nowrap;
}

/* -------------------------------------------------------------- lo suelto */
.marca-persona { font-weight: 700; color: var(--verde-marca); }

/* --------------------------------------- filtrar y ordenar por el encabezado
   Como en la ventana de facturas del escritorio: se pulsa el encabezado
   y se abre el cuadro con las casillas de cada valor. Faltaba entero, y
   es lo que se usa a diario para acotar una lista de trescientas filas. */
.tabla th.filtrable { cursor: pointer; user-select: none; }

/* El tirador del ancho de cada columna (Andrés, 13/9/2026: «ajustar
   columnas a mano»): una franja invisible en el borde derecho del
   encabezado que se ilumina al pasar el ratón y mientras se arrastra.
   No se guarda: al salir, los anchos de fábrica. */
.tabla thead th .tirador {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 4;
  border-radius: 2px;
}
.tabla thead th .tirador:hover, .tabla thead th .tirador.activo { background: var(--cian); opacity: .8; }
body.ajustando-columna, body.ajustando-columna * { cursor: col-resize !important; user-select: none; }
.tabla th.filtrable:hover { background: var(--franja); color: var(--verde-marca); }

/* La columna filtrada se marca: si no, no hay forma de saber por qué la
   lista enseña menos de lo que debería. */
.tabla th.filtrada { color: var(--verde-marca); }
/* El simbolito del filtro: apagado en toda columna que se puede
   filtrar, encendido en las que lo tienen puesto. Andrés, 11/9/2026:
   «poner filtros en cada encabezado y el simbolito». Apagado se ve poco
   a propósito —son nueve columnas y no puede parecer un sarpullido—,
   pero al pasar el ratón por el encabezado se nota. */
/* La IP del diario. Andrés, 11/9/2026: «me parece que la IP debe ser
   más larga». En la laptop pone «127.0.0.1» y cabe de sobra; en el
   servidor será la de cada quien, y una IPv6 entera mide el doble. Con
   cifras de ancho fijo, además, las columnas de puntos se alinean. */
.tabla td.ip {
  font-variant-numeric: tabular-nums;
  font-size: var(--letra-tabla);
  white-space: nowrap;
}

.marca-orden { font-size: 9px; margin-left: 3px; opacity: .75; }
.marca-filtro {
  font-size: 9px;
  margin-left: 4px;
  opacity: .3;
  letter-spacing: -1px;
}
.tabla th.filtrable:hover .marca-filtro { opacity: .8; }
.marca-filtro.puesta { opacity: 1; color: var(--verde-marca); }

.buscador-lista {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 8px;
}

.buscador-lista label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--gris);
  font-size: var(--letra-tabla);
  letter-spacing: .3px;
}

.buscador-lista input { min-width: 340px; }
.buscador-lista .ayuda { align-self: center; }

.cuadro-filtro { width: 340px; max-width: 92vw; }

/* Solo el buscador de arriba, no cada valor de la lista: con «label» a
   secas esta regla alcanzaba también a las casillas y las dejaba con la
   marca encima del texto y todo centrado. */
.cuadro-filtro > label { display: flex; flex-direction: column; gap: 3px; }

.cuadro-filtro > label > span {
  color: var(--gris);
  font-size: var(--letra-tabla);
}

/* La lista de valores se desplaza por dentro: un condominio puede tener
   ochenta proveedores distintos y el cuadro no puede crecer sin fin. */
.filtro-valores {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 4px 6px;
  background: var(--blanco);
}

.cuadro-filtro .filtro-valor {
  display: flex;
  /* En fila, dicho a propósito: `.cuadro label` los pone en columna
     —que es lo que quieren los campos de un diálogo— y aquí la casilla
     va AL LADO de su texto, no encima. */
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 2px 2px;
  font-size: var(--letra-tabla);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filtro-valor:hover { background: var(--franja); }

.filtro-orden {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--linea);
}

/* ----------------------------------------------- la barra de «está pensando»
   En el pie y junto al estado, como la Progressbar indeterminada del
   escritorio (`interfaz._mostrar_pensando`, 140 px). Sin ella, entre que
   se pulsa y llega la pantalla no pasa nada visible y uno vuelve a
   pulsar. Andrés, 10/9/2026: «en todas las pantallas quiero una barra
   para que la gente sepa que el programa está pensando». */
.pensando-texto { color: var(--verde-marca); }

/* Ocupa todo el hueco que hay entre el estado y los mandos del pie
   (Andrés, 10/9/2026: «ocupar todo ese espacio»): una barra de 140 px
   perdida en una franja de mil se lee como un adorno, y estirada se lee
   como lo que es, el programa trabajando. El 100 de crecimiento le gana
   al separador, que es 1: le queda a él lo que sobre. */
.pensando {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  flex: 100 1 auto;
  min-width: 0;
  color: var(--verde-marca);
  font-size: var(--letra-tabla);
  white-space: nowrap;
}

.pensando-barra {
  display: block;
  position: relative;
  flex: 1 1 auto;
  min-width: 140px;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--linea);
}

/* Indeterminada: no dice cuánto falta —no se sabe— sino que algo se
   está haciendo, que es lo que hace falta saber. */
.pensando-barra > span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: var(--verde);
  animation: pensando 1s linear infinite;
}

@keyframes pensando {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* Se mueve SIEMPRE, aunque Windows tenga las animaciones apagadas
   (Andrés, 10/9/2026: «quiero se mueva la barra para que se connote que
   está trabajando y no está pegado»). Es lo único que dice que el
   programa sigue vivo: quieta, se lee como trabada. */

/* ------------------------------------------- los enlaces dentro de una tabla
   Sin subrayado y del color del texto: una tabla con doscientas filas de
   texto azul subrayado se lee como un formulario web, no como la tabla
   de un programa. En el escritorio no hay tal cosa —es un Treeview— y se
   abre con doble clic, que es lo que se hace aquí.
   Andrés, 10/9/2026: «quitar ese subrayado y color pero sí dejar el
   vínculo al doble clic».

   Los botones de la fila —Abrir PDF, Abrir XML, los del circuito— no
   entran: esos son botones y se pulsan una vez, como siempre. */
.tabla td a:not(.boton) {
  color: inherit;
  text-decoration: none;
  cursor: default;
}

/* Al pasar por encima sí se nota que la fila lleva a alguna parte, sin
   pintarla de azul. */
.tabla tbody tr:hover td a:not(.boton) { color: var(--verde-marca); }
.tabla tbody tr.abrible:hover { background: var(--franja); cursor: pointer; }

/* La flechita de ordenar en los encabezados del área de trabajo. Gris y
   quieta mientras no se usa; marcada en la columna por la que se está
   ordenando, para que se sepa por qué la lista está en ese orden. */
.tabla th.ordenable { cursor: pointer; user-select: none; }
.tabla th.ordenable:hover { background: var(--franja); color: var(--verde-marca); }
.tabla th .flecha { margin-left: 4px; font-size: 9px; opacity: .45; }
.tabla th.ordenable:hover .flecha { opacity: .9; }


/* ------------------------------------------ el filtro que está actuando
   Amarillo pastel (Andrés, 10/9/2026). Con catorce campos delante, un
   filtro puesto y sin marcar hace creer que la lista perdió facturas. */
.rejilla-filtros label.puesto > select,
.rejilla-filtros label.puesto > input,
.fila-buscar label.puesto > input {
  background: var(--nota-credito);
  border-color: var(--ambar);
  font-weight: 700;
}

.rejilla-filtros label.puesto,
.fila-buscar label.puesto { color: var(--ambar); font-weight: 700; }

/* --------------------------------------------- la ventanita de los avisos
   En el centro y delante, como el `messagebox` del escritorio. La franja
   de arriba los dejaba pasar sin que nadie los leyera, y con cuatro
   errores seguidos empujaba la tabla media pantalla hacia abajo. */
.cuadro-avisos { min-width: 420px; max-width: 640px; }
.cuadro-avisos .avisos { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.cuadro-avisos .aviso { margin: 0; }

/* Una tabla que NO se desplaza de lado: lo que no cabe en una celda se
   corta con puntos suspensivos y el texto entero sale al posar el ratón.
   Andrés, 10/9/2026: «no quiero barra horizontal, quiero que todo se vea
   en la vista». Se usa donde el dato largo es UNO —el nombre del
   condominio— y las demás columnas son cifras de largo conocido. */
.tabla.sin-barra { table-layout: fixed; width: 100%; }
.tabla.sin-barra .recortada {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}
.tabla-marco:has(> .tabla.sin-barra) { overflow-x: hidden; }

/* El área de trabajo abre al 100 %. Fue al 90 % desde el 10/9/2026
   —«quiero el área de trabajo se abra siempre al 90 %»— porque con
   dieciséis columnas no entraba de otra manera. Con la banda de filtros
   ya apretada a noventa y nueve puntos, cabe al natural, y así la letra
   se lee sin forzar la vista. Andrés, 11/9/2026: «mejor que abra al
   100 %».

   Si algún día hubiera que volver a encogerla: `zoom` y no
   `transform: scale`. Zoom rehace la disposición de verdad —los anchos,
   el desplazamiento y los clics quedan donde se ven—; `scale` solo
   estira el dibujo y deja los clics desplazados. */
body.area-trabajo { zoom: 1; }

/* El área de trabajo, apretada por arriba. Aquí conviven la barra de
   los diez botones y la banda de catorce filtros, y entre las dos se
   llevaban doscientos puntos de los que vive la tabla, que es a lo que
   se viene. Andrés, 11/9/2026: «compactar en altura para no quitarle
   tanto espacio a la pantalla de resultados».

   Se aprieta el AIRE —relleno, interlineado, altura de los campos—, no
   la letra: los rótulos y los datos siguen del tamaño que manda
   `estilo.py` y se leen igual. Y solo en esta pantalla: las demás no
   tienen el problema. */
/* La BARRA no se toca aquí: es la misma de todas las pantallas y tiene
   que verse igual en todas. Andrés, 11/9/2026: «en la vista de área de
   trabajo esa barra no debe cambiar de tamaño, debe ser la misma de
   todas las vistas». El alto que hace falta se le quita a los filtros,
   que es lo de abajo. */

/* El rótulo «Filtros» del marco: fuera. Dieciséis puntos para decir lo
   que ya se ve —catorce campos de filtrar son catorce campos de
   filtrar—, y esos dieciséis son media fila de la tabla. */
body.area-trabajo .filtros-grupo > legend { display: none; }

/* LA BANDA DE FILTROS, CON UN SOLO RITMO.
   ---------------------------------------------------------------
   Tres renglones iguales: rótulo arriba, campo debajo, y todo lo que
   sea un control —campos, desplegables y los cinco botones— midiendo
   EXACTAMENTE lo mismo. Antes cada cosa media una altura distinta
   —campos de 21, botones de 27— y por eso «quedó muy mal
   dimensionado» (Andrés, 11/9/2026): no era que fuera alto, era que
   nada estaba a la misma altura que su vecino.

   Una sola medida, `--alto-filtro`, manda sobre todos: cambiándola
   sube o baja la banda entera sin que nada se descuadre. */
body.area-trabajo .filtros-grupo {
  /* Reducido en proporción para que las TRES filas —los catorce campos
     y la de buscar con sus cinco botones— quepan en el alto que antes
     ocupaban dos. Andrés, 11/9/2026: «todo debe caber en esa área que
     marqué; reducirlo proporcionalmente para que quede ahí».

     Se baja TODO a la vez —la altura de los controles, el interlineado
     de los rótulos y el aire entre filas—, que es lo que quiere decir
     «en proporción»: encoger solo una cosa es lo que descuadraba la
     banda. */
  --alto-filtro: 23px;
  padding: 3px 12px 4px;
  margin-bottom: 3px;
}

/* El hueco entre la barra y los filtros, aprovechado. Andrés,
   11/9/2026: «aprovechar ese espacio de la raya para hacer un poco más
   alta el área de filtrado». Eran nueve puntos de nada entre dos cosas
   que van juntas; ahora se los queda la banda, que los usa en respirar
   —campos un punto más altos y un punto más de aire entre filas— sin
   quitarle ni uno a la tabla. */
body.area-trabajo main.cuerpo { padding-top: 2px; }

body.area-trabajo .filtros-grupo input,
body.area-trabajo .filtros-grupo select,
body.area-trabajo .zocalo > * {
  min-height: 0;
  height: var(--alto-filtro);
  line-height: calc(var(--alto-filtro) - 2px);
  padding: 0 8px;
  /* Un punto menos que el cuerpo, a petición de Andrés (11/9/2026):
     «reducir un punto el tamaño de la letra de los encabezados y lo que
     aparece adentro de la casilla del filtro». Es la única pantalla
     donde se toca la letra, y se toca solo en la banda de filtros: la
     tabla —que es lo que se lee— se queda como está. */
  font-size: calc(var(--letra-cuerpo) - 1px);
}

/* Los rótulos, a su tamaño de siempre y pegados a su campo: el aire se
   quita ENTRE renglones, no dentro de uno. */
body.area-trabajo .rejilla-filtros label,
body.area-trabajo .fila-buscar label {
  gap: 0;
  line-height: 1.1;
  font-size: calc(var(--letra-tabla) - 1px);
}

body.area-trabajo .rejilla-filtros { gap: 4px 10px; }
body.area-trabajo .fila-buscar { margin-top: 4px; align-items: flex-end; }

/* La tercera fila va sin rótulo: «BUSCAR» encima de un campo que ya
   dice «factura, proveedor, condominio, descripción» es un renglón de
   alto para no decir nada nuevo. */
body.area-trabajo .fila-buscar > label > span:first-child,
body.area-trabajo .fila-buscar > label { line-height: 0; }
body.area-trabajo .fila-buscar > label { font-size: 0; }
body.area-trabajo .fila-buscar > label input { font-size: calc(var(--letra-cuerpo) - 1px); }

/* El zócalo, sin marco propio: sus botones ya se alinean con los campos
   y el recuadro solo añadía dos puntos y una raya de más. */
/* Los campos de fecha: SOLO el calendario mientras están vacíos.
   Andrés, 11/9/2026: «quitar esas letras, dejar solo el calendario». El
   navegador escribe «dd/mm/aaaa» dentro de todo <input type="date">
   vacío, y con el rótulo encima diciendo DESDE eso es decir dos veces
   lo mismo y llenar la banda de letra gris.

   Se esconde lo ESCRITO, no el campo: el botón del calendario sigue
   ahí, y en cuanto hay una fecha puesta se ve como cualquier otro dato.
   La clase la pone y la quita el guion de `lista.html`. */
body.area-trabajo input[type="date"].vacio::-webkit-datetime-edit { opacity: 0; }
body.area-trabajo input[type="date"].vacio:focus::-webkit-datetime-edit { opacity: 1; }
body.area-trabajo input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  padding: 0;
}
body.area-trabajo input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

body.area-trabajo .zocalo {
  padding: 0;
  background: none;
  border: 0;
  gap: 6px;
}

/* Las dos columnas de nombres largos, un punto más pequeñas (Andrés,
   10/9/2026): son las dos que más letra llevan y las que se cortaban. */
.tabla-facturas .condominio,
.tabla-facturas td:nth-child(6) { font-size: 11px; }

/* El encabezado no se parte nunca: si no cabe con su flechita, es que
   la columna está mal medida, y eso se arregla en el ancho, no dejando
   que el rótulo se caiga a dos renglones. */
.tabla-facturas thead th { white-space: nowrap; }

/* La ficha corta que sale en los cuadros que preguntan una por una: de
   qué factura se está hablando. Sin ella hay que decidir a ciegas,
   diecinueve cuadros iguales uno detrás de otro. */
.ficha-corta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 10px;
  padding: 8px 10px;
  background: var(--franja);
  border-radius: var(--radio);
  font-size: var(--letra-tabla);
}
.ficha-corta > div { display: flex; gap: 8px; }
.ficha-corta .rotulo { flex: 0 0 96px; color: var(--gris); }
.ficha-corta .valor { color: var(--texto); overflow-wrap: anywhere; }

/* La barra de desplazamiento de lado, SIEMPRE a la vista en las tablas
   anchas (Andrés, 10/9/2026). Fina y escondida, uno no sabe que hay más
   columnas a la derecha: la tabla parece cortada, no desplazable. */
.tabla-marco { scrollbar-width: auto; }
.tabla-marco::-webkit-scrollbar { height: 12px; width: 12px; }
.tabla-marco::-webkit-scrollbar-track { background: var(--chrome); }
.tabla-marco::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte);
  border-radius: 6px;
  border: 2px solid var(--chrome);
}
.tabla-marco::-webkit-scrollbar-thumb:hover { background: var(--gris-suave); }

/* La lista de condominios de una persona: casillas, no cédulas escritas
   a mano. Se desplaza por dentro —hay treinta y cinco— y cada renglón
   lleva el nombre delante y la cédula detrás, que es como se reconocen. */

/* Lo que salió bien, dicho al pie y en verde unos segundos. No abre
   ninguna ventana: aceptar «Factura aprobada» veinte veces seguidas es
   veinte clics que no hacen nada. */
.celda-estado.dicho { color: var(--verde-ok); font-weight: 700; max-width: 70%; }

/* El botón que está trabajando parpadea en ámbar (Andrés, 10/9/2026).
   Con una corrida que tarda, lo único que dice que el programa sigue
   vivo es la barra del pie; el botón que se pulsó se queda igual y uno
   vuelve a pulsarlo. */
.barra a.trabajando, .boton.trabajando {
  animation: parpadeo 1s ease-in-out infinite;
  border-color: var(--ambar);
}

@keyframes parpadeo {
  0%, 100% { background: var(--blanco); color: var(--texto); }
  50%      { background: var(--nota-credito); color: var(--ambar); }
}

/* El plan: lo que va a pasar, con filo ámbar porque hay que leerlo
   antes de decir que sí. */
.plan-dali { border-left: 4px solid var(--ambar); margin: 10px 0 14px; }
.plan-dali .acciones { margin-top: 10px; }

.ordenes-dali {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}

.orden-dali {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 11px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--verde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-apoyada);
  text-decoration: none;
  color: var(--texto);
}

/* Las que CAMBIAN datos se marcan: no es lo mismo abrir una pantalla
   que aprobar veinte facturas. */
.orden-dali.hace { border-left-color: var(--ambar); }
.orden-dali:hover { background: var(--franja); }
.orden-dali .que { font-weight: 700; color: var(--verde-marca); font-size: var(--letra-tabla); }
.orden-dali .como { color: var(--gris); font-size: var(--letra-tabla); font-style: italic; }

/* ------------------------------------------------------- la bienvenida
   La ventana que el escritorio enseña al abrir, antes de las secciones.
   Blanca, centrada, con su franja de color arriba y una barra que
   avanza: explica la espera en vez de dejar la pantalla quieta. */
body.bienvenida-cuerpo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--chrome);
  overflow: hidden;
  cursor: pointer;
}

.bienvenida {
  width: 420px;
  max-width: 92vw;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
  overflow: hidden;
  text-align: center;
}

/* El cian del logotipo: es lo que le da aire de presentación y no de
   aviso del sistema. */
.bienvenida-franja { height: 6px; background: var(--cian); }

.bienvenida-dentro { padding: 30px 46px 26px; }
/* Un 20 % más grande el 10/9/2026, a petición de Andrés, dos veces:
   72 -> 86,4 -> 103,7 px.
   Es un SVG, así que crece sin perder nitidez. */
.bienvenida-logo { height: 103.7px; width: auto; }

.bienvenida-raya {
  height: 1px;
  background: var(--linea);
  margin: 26px 0 18px;
}

/* Un punto mas grande (Andrés, 10/9/2026): en la ventana de bienvenida
   la marca es lo que se lee, y al lado del logotipo ya crecido se quedaba
   chica. */
.bienvenida-marca {
  font-size: 24px;
  font-weight: 700;
  color: var(--verde-marca);
  letter-spacing: .5px;
}

.bienvenida-razon {
  color: var(--gris);
  font-size: var(--letra-cuerpo);
  line-height: 1.5;
  margin-top: 3px;
}

.bienvenida-credito {
  color: var(--gris-suave);
  font-size: var(--letra-tabla);
  margin: 16px 0 14px;
}

.bienvenida-barra {
  position: relative;
  width: 230px;
  height: 3px;
  margin: 0 auto;
  background: var(--linea);
  border-radius: 2px;
  overflow: hidden;
}

/* Avanza de verdad, de vacía a llena en los cuatro segundos que dura. */
.bienvenida-barra > span {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--cian);
  animation: bienvenida-avanza 4s linear forwards;
}

@keyframes bienvenida-avanza {
  to { right: 0; }
}

/* --------------------------------------------------------------- la hora
   La hora se pone con las flechas y NO se escribe. Andrés, 10/9/2026:
   «no permitir digitar hora sino con flecha arriba y abajo». Escribiendo
   salían cosas como «0:00», que no es una hora de este programa, y eso
   no se descubría hasta el día en que el aviso no salía.

   Lo que se ve no es un campo de texto: son dos números y dos flechas,
   así que teclear ahí no hace nada. El valor de verdad viaja en un campo
   escondido, ya en formato HH:MM, que es lo que espera `hora_valida`.

   Con el teclado: arriba y abajo cambian la parte marcada, izquierda y
   derecha saltan de la hora a los minutos. */
.reloj {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--lienzo);
  overflow: hidden;
  line-height: 1;
}

.reloj-cara {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--letra-cuerpo);
  font-family: var(--familia-tabular);
  cursor: default;
  user-select: none;
  outline: 0;
}

.reloj-parte {
  padding: 1px 3px;
  border-radius: 3px;
}

/* La parte que cambian las flechas va marcada: sin esto no se sabe si
   se va a mover la hora o los minutos. */
.reloj-cara:focus .reloj-parte.puesta {
  background: var(--verde-marca);
  color: var(--blanco);
}

.reloj-cara:not(:focus) .reloj-parte.puesta { background: var(--franja); }

.reloj-flechas {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--linea);
}

.reloj-flecha {
  flex: 1 1 0;
  width: 20px;
  padding: 0;
  border: 0;
  background: var(--chrome);
  color: var(--verde-marca);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}

.reloj-flecha:hover { background: var(--franja); }
.reloj-flecha + .reloj-flecha { border-top: 1px solid var(--linea); }

/* ------------------------------------------- la ficha de una factura
   Con jerarquía: de quién es y por cuánto, primero y grande; los demás
   datos debajo, en cuerpo menor. Antes eran once casillas iguales en
   cinco columnas, y el monto —lo único que se mira siempre— se leía
   igual que «Tipo». Andrés, 10/9/2026: «diseñar mejor esta ventana». */
.ficha-factura { padding: 0; margin-bottom: 14px; overflow: hidden; }

.factura-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  padding: 13px 18px;
  background: var(--franja);
  border-bottom: 1px solid var(--linea);
}

.factura-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.factura-quien .nombre {
  font-size: var(--letra-titulo);
  line-height: 1.18;
  color: var(--verde-marca);
  text-wrap: balance;
}

.factura-plata {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  text-align: right;
}

.factura-plata .cifra {
  font-size: var(--letra-numero);
  font-family: var(--familia-tabular);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--verde-marca);
}

.factura-cabeza .rotulo {
  color: var(--gris);
  font-size: var(--letra-tabla);
  letter-spacing: .4px;
  text-transform: uppercase;
}

.factura-cabeza .pista { color: var(--gris); font-size: var(--letra-tabla); }

.ficha.menuda { padding: 12px 18px; gap: 9px 22px; }
.dato.aviso .valor { color: var(--rojo); }

/* El token, en la letra de ancho fijo que le toca: `--tabular` no existe
   —es `--familia-tabular`— y por esa erre de menos los códigos salían en
   la letra corriente, donde un cero y una o se parecen. */
.sello .token, .verificado .token { font-family: var(--familia-tabular); }

/* El token, a la izquierda y en letra de ancho fijo (Andrés, 10/9/2026:
   «columna token, alinear izquierda»). Iba con la clase de los numeros,
   que los pega a la derecha: un codigo no es una cifra, no se compara
   por la unidad sino por el principio. */
.token-celda {
  text-align: left;
  font-family: var(--familia-tabular);
  letter-spacing: .2px;
}

/* Un token anulado se senala solo, sin gastar una columna en decir que
   los otros 122 estan bien. */
.token-celda.anulado { color: var(--rojo); text-decoration: line-through; }

/* La respuesta de Dali: una lista corta, no una tabla. */
.lista-dali { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; }
.lista-dali li { color: var(--texto); }

/* ===================================================== Dali, el salchicha
   Andrés, 10/9/2026: «quiero que me acompañe en las pantallas que esté
   navegando yo… arriba a la derecha… que muestre emociones, personalidad
   propia y rasgos de que es un perrito salchicha amigo de todos en la
   oficina».

   Va flotando sobre el trabajo, no dentro de él: así no le quita sitio a
   la tabla ni se pierde al cambiar de pantalla. Y arranca cerrado, en un
   botón pequeño: un perro que se sienta al lado no es un perro que se
   sube a la mesa. */


/* El boton va DENTRO del encabezado, en el hueco entre la frase del dia
   y el registro de actividad: flotando sobre la esquina tapaba ese
   registro (Andrés, 10/9/2026). */
.dali-llamador {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 7px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 20px;
  background: var(--lienzo);
  box-shadow: var(--sombra-apoyada);
  color: var(--verde-marca);
  font-size: var(--letra-cuerpo);
  font-weight: 600;
  cursor: pointer;
}

.dali-llamador:hover { background: var(--franja); }
.dali-llamador.escondido { display: none; }
.dali-mini { display: block; width: 40px; }
.dali-mini .dali-perro { display: block; width: 100%; height: auto; }

.dali-flota {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 41;
  width: 310px;
  max-width: calc(100vw - 24px);
  background: var(--lienzo);
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(2, 34, 96, .18);
  overflow: hidden;
}

/* Llega detrás de uno, como quien entra a la oficina cuando ya está
   trabajando. Se ve una vez y no molesta más. */
.dali-flota.llegando { animation: dali-llega .55s ease-out; }

@keyframes dali-llega {
  from { transform: translateX(34px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.dali-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--franja);
  border-bottom: 1px solid var(--linea);
}

.dali-retrato { display: block; width: 74px; flex: 0 0 auto; }
.dali-retrato .dali-perro { display: block; width: 100%; height: auto; }

.dali-quien { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.dali-quien b { color: var(--verde-marca); font-size: var(--letra-casilla); }
.dali-oficio { color: var(--gris); font-size: var(--letra-tabla); }

.dali-cerrar {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--gris);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.dali-cerrar:hover { color: var(--rojo); }

/* Lo que dice. Es un bocadillo, no un renglón de estado: lo que habla un
   compañero se lee distinto de lo que informa un programa. */
.dali-globo {
  position: relative;
  margin: 12px 10px 6px;
  padding: 8px 11px;
  background: var(--chrome);
  border: 1px solid var(--linea);
  border-radius: 10px 10px 10px 2px;
  color: var(--texto);
  font-size: var(--letra-cuerpo);
  line-height: 1.45;
}

.dali-charla {
  margin: 0 10px 8px;
  max-height: 210px;
  overflow: auto;
  font-size: var(--letra-cuerpo);
}

.dali-linea {
  padding: 5px 2px;
  border-bottom: 1px solid var(--linea);
  line-height: 1.4;
}

.dali-linea:last-child { border-bottom: 0; }
.dali-linea a { color: var(--verde-marca); text-decoration: none; font-weight: 600; }
.dali-linea a:hover { text-decoration: underline; }

.dali-pedir {
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--linea);
}

.dali-pedir input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-size: var(--letra-cuerpo);
}

.dali-pedir .boton { flex: 0 0 auto; }

/* ------------------------------------------------- los ánimos de Dali
   Los colores salen de la foto que mandó Andrés el 10/9/2026: salchicha
   chocolate arlequín, con las manchas más claras encima del chocolate,
   las motas tostadas de encima de los ojos, el pecho blanco y la nariz
   color hígado —la de los chocolate, que no es negra—.

   Cada gesto es una pieza del dibujo. La cara la pone UNA sola clase en
   el <svg> y aquí se dice qué hace cada pieza en cada ánimo. */
.dali-perro { overflow: visible; }

/* Un trazo fino alrededor de las piezas grandes: sin el, a tamano de
   ventanita el cuerpo, la cabeza y las orejas se funden en una mancha
   marron. Con el, se lee de lejos, que es como se va a mirar. */
.dali-cuerpo, .dali-testa, .dali-oreja, .dali-hocico, .dali-pata,
.dali-pecho, .dali-mota {
  stroke: var(--dali-trazo);
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.dali-cuerpo, .dali-testa { fill: var(--dali-pelaje); }
.dali-oreja { fill: var(--dali-oreja); transform-box: fill-box; transform-origin: top center;
              transition: transform .25s ease; }
.dali-hocico, .dali-pata, .dali-mota { fill: var(--dali-pelaje-claro); }
.dali-pecho { fill: var(--dali-pecho); }
.dali-nariz { fill: var(--dali-nariz); }
.dali-blanco { fill: var(--dali-ojo-blanco); }
.dali-iris-celeste { fill: var(--dali-iris-celeste); }
.dali-iris-cafe { fill: var(--dali-iris-cafe); }
.dali-pupila { fill: var(--dali-pupila); }
.dali-brillo { fill: var(--blanco); opacity: .92; }
.dali-collar { fill: var(--verde-marca); }
.dali-chapa { fill: var(--dali-chapa); }

.dali-boca {
  fill: none;
  stroke: var(--dali-boca);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.dali-cabeza { transform-box: fill-box; transform-origin: center;
               transition: transform .3s ease; }
.dali-lengua { fill: var(--dali-lengua); opacity: 0; transition: opacity .2s ease; }

.dali-ceja, .dali-parpado {
  fill: none;
  stroke: var(--dali-boca);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
}

.dali-cola {
  fill: none;
  stroke: var(--dali-pelaje);
  stroke-width: 8;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: left center;
  animation: dali-cola 1.1s ease-in-out infinite alternate;
}

@keyframes dali-cola {
  from { transform: rotate(-11deg); }
  to   { transform: rotate(15deg); }
}

/* Contento: saca la lengua, entorna los ojos y menea rápido. Es lo que
   hace cuando acierta. */
.dali-perro.contento .dali-lengua { opacity: 1; }
.dali-perro.contento .dali-parpado { opacity: 1; }
.dali-perro.contento .dali-cola { animation-duration: .32s; }

/* Pensando: una oreja arriba y las cejas puestas. */
.dali-perro.pensando .dali-oreja-izq { transform: rotate(-17deg); }
.dali-perro.pensando .dali-ceja { opacity: 1; }
.dali-perro.pensando .dali-cola { animation-duration: 1.8s; }

/* Perdido: ladea la cabeza, que es lo que hace un perro al que le dicen
   algo que no entiende. */
.dali-perro.perdido .dali-cabeza { transform: rotate(12deg); }
.dali-perro.perdido .dali-ceja { opacity: 1; }
.dali-perro.perdido .dali-cola { animation-duration: 2.6s; }

/* Atento: las dos orejas arriba, esperando. */
.dali-perro.atento .dali-oreja { transform: rotate(-8deg); }

/* Corriendo: va camino de la pantalla que le pidieron. */
.dali-perro.corriendo { animation: dali-trote .28s linear infinite alternate; }
.dali-perro.corriendo .dali-cola { animation-duration: .25s; }
.dali-perro.corriendo .dali-lengua { opacity: 1; }

@keyframes dali-trote {
  from { transform: translateY(0); }
  to   { transform: translateY(-2px); }
}

/* Si en el equipo están apagadas las animaciones, Dali se queda quieto:
   la cara sigue diciendo lo mismo sin marear a nadie. */
@media (prefers-reduced-motion: reduce) {
  .dali-cola, .dali-perro.corriendo, .dali-flota.llegando { animation: none; }
}

/* -------------------------------------------------- Dali, vivo
   Andrés, 10/9/2026: «debe ser animado, en mi imaginación está el
   recuerdo del clip que tenía Word, quiero algo así pero con Dali».

   Lo que hacía aquel clip y hace que una figura parezca viva no son los
   saltos: es que NUNCA está del todo quieta. Parpadea, mira a los lados,
   respira, sacude una oreja cada tanto. Eso es lo de aquí abajo, y cada
   cosa va en su propia pieza para que no se estorben entre ellas ni con
   las caras que pone cuando trabaja.

   Todo tiene ciclos largos y distintos —6, 9, 13, 17 segundos— para que
   no caigan a la vez: si coincidieran, se leería como un bucle. */

/* Respira, y cada tanto se acomoda. Va en el grupo de fuera para no
   pelearse con el ladeo de cabeza de «no entendí». */
.dali-todo {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: dali-vive 17s ease-in-out infinite;
}

@keyframes dali-vive {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  22%      { transform: translateY(-1px) rotate(0deg); }
  44%      { transform: translateY(0) rotate(0deg); }
  /* El gesto de cada tanto: se acomoda y vuelve. */
  68%      { transform: translateY(-1.5px) rotate(-2.5deg); }
  74%      { transform: translateY(0) rotate(1.5deg); }
  80%      { transform: translateY(0) rotate(0deg); }
}

/* Parpadea. Dos veces seguidas de vez en cuando, como los perros. */
.dali-ojos {
  transform-box: fill-box;
  transform-origin: center;
  animation: dali-parpadeo 6.4s ease-in-out infinite;
}

@keyframes dali-parpadeo {
  0%, 90%, 100% { transform: scaleY(1); }
  92%           { transform: scaleY(.08); }
  94%           { transform: scaleY(1); }
  96%           { transform: scaleY(.08); }
  98%           { transform: scaleY(1); }
}

/* Y mira alrededor: es lo que más lo hace parecer despierto. */
.dali-pupilas {
  transform-box: fill-box;
  transform-origin: center;
  animation: dali-mira 9.3s ease-in-out infinite;
}

@keyframes dali-mira {
  0%, 54%, 100% { transform: translateX(0); }
  60%           { transform: translateX(2.2px); }
  70%           { transform: translateX(2.2px); }
  76%           { transform: translateX(-2.2px); }
  84%           { transform: translateX(-2.2px); }
  90%           { transform: translateX(0); }
}

/* Una oreja se sacude cada tanto. Solo cuando no está poniendo cara:
   si está atento o pensando, las orejas tienen otra cosa que hacer. */
.dali-perro:not(.pensando):not(.atento):not(.corriendo) .dali-oreja-der {
  animation: dali-sacude 13.7s ease-in-out infinite;
}

@keyframes dali-sacude {
  0%, 86%, 100% { transform: rotate(0deg); }
  88%           { transform: rotate(-7deg); }
  91%           { transform: rotate(5deg); }
  94%           { transform: rotate(-3deg); }
  97%           { transform: rotate(0deg); }
}

/* Cuando llega, entra dando un brinco: es el «aquí estoy» de un perro
   que viene detrás de uno. */
.dali-flota.llegando .dali-todo { animation: dali-brinca .6s ease-out; }

@keyframes dali-brinca {
  0%   { transform: translateY(10px) scale(.9); }
  45%  { transform: translateY(-4px) scale(1.04); }
  70%  { transform: translateY(1px) scale(.99); }
  100% { transform: translateY(0) scale(1); }
}

/* El bocadillo aparece de golpe, como el del clip aquel, y lleva su
   piquito apuntando al perro. */
.dali-globo { animation: dali-globo .22s ease-out; }
.dali-globo::before {
  content: "";
  position: absolute;
  left: 22px;
  top: -7px;
  width: 12px;
  height: 12px;
  background: var(--chrome);
  border-left: 1px solid var(--linea);
  border-top: 1px solid var(--linea);
  transform: rotate(45deg);
}

@keyframes dali-globo {
  from { transform: scale(.94); opacity: .4; }
  to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dali-todo, .dali-ojos, .dali-pupilas, .dali-oreja-der, .dali-globo {
    animation: none;
  }
}

/* ------------------------------------------- la ventanita, donde uno quiera
   Andrés, 10/9/2026: «Dali abre donde dijimos, pero quiero poder moverlo
   donde yo quiera tambien». Se arrastra por la cabecera y el navegador se
   acuerda de donde lo dejaron, tambien de una pantalla a la siguiente. */
.dali-cabecera { cursor: grab; user-select: none; }
.dali-flota.llevandolo { box-shadow: 0 14px 34px rgba(2, 34, 96, .28); }
.dali-flota.llevandolo .dali-cabecera { cursor: grabbing; }
.dali-cerrar { cursor: pointer; }

/* Lo que va a grabar, mandar o registrar. Sale con su «Si, hagalo» y no
   se hace hasta que se pulsa: la decision final es de quien trabaja, no
   de Dali (Andrés, 10/9/2026). */
.dali-confirmar {
  margin: 0 10px 8px;
  padding: 9px 11px;
  border: 1px solid var(--ambar);
  border-left: 4px solid var(--ambar);
  border-radius: var(--radio);
  background: var(--fondo-aviso, var(--chrome));
}

.dali-aviso {
  margin: 0 0 8px;
  font-size: var(--letra-cuerpo);
  line-height: 1.45;
  color: var(--texto);
}

.dali-confirmar .acciones { margin: 0; gap: 6px; }
.dali-confirmar .boton { font-size: var(--letra-tabla); padding: 4px 10px; }

/* Lo que contesta Dali en su pantalla. Se lee como lo que dice alguien,
   no como un renglon de estado. */
.dicho-dali {
  margin: 6px 0 0;
  font-size: var(--letra-cuerpo);
  line-height: 1.55;
  color: var(--texto);
}
.respuesta-dali .dali-confirmar { margin: 12px 0 0; }

/* ------------------------------------------------------ la charla con Dali
   Andrés, 10/9/2026: «en ambas debe verse como un chat con Dali». Lo que
   uno dice va a la derecha; lo que contesta Dali, a la izquierda y con su
   cara al lado —pequeña: el perro acompaña la conversación, no la tapa—. */
.charla-dali {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 56vh;
  overflow-y: auto;
  padding: 4px 2px 10px;
}

.turno { display: flex; align-items: flex-start; gap: 10px; }
.turno.mio { justify-content: flex-end; }

.turno .cara { flex: 0 0 auto; width: 46px; }
.turno .cara .dali-perro { display: block; width: 100%; height: auto; }

.turno .dicho {
  max-width: 72%;
  padding: 9px 13px;
  border-radius: 12px;
  background: var(--chrome);
  border: 1px solid var(--linea);
  font-size: var(--letra-cuerpo);
  line-height: 1.5;
}

.turno.de-dali .dicho { border-radius: 12px 12px 12px 3px; }

.turno.mio .dicho {
  background: var(--verde-marca);
  border-color: var(--verde-marca);
  color: var(--blanco);
  border-radius: 12px 12px 3px 12px;
}

.turno .dicho b {
  display: block;
  color: var(--verde-marca);
  font-size: var(--letra-tabla);
  letter-spacing: .3px;
  margin-bottom: 2px;
}

.turno .dicho p { margin: 0; }
.turno .dicho .lista-dali { margin: 6px 0 0; }

/* La caja de escribir, debajo de la charla y del ancho de la pantalla. */
.pedir-dali {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linea);
}

.pedir-dali input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 11px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-size: var(--letra-cuerpo);
}

/* Los condominios que no lleva nadie: plegados, que no estorben cuando
   no los hay, y a un clic cuando sí. */
.sin-dueno { margin: -4px 0 12px; }
.sin-dueno > summary {
  cursor: pointer;
  color: var(--verde-marca);
  font-size: var(--letra-cuerpo);
  font-weight: 600;
}
.sin-dueno > summary:hover { text-decoration: underline; }

/* ------------------------------------------------ la ficha de una persona
   Todo en UNA vista, sin bajar: es la premisa de esta casa (Andrés,
   10/9/2026: «la premisa es siempre tratar que se vea en una vista para
   evitar scroll»). Antes la tarjeta de la cuenta se quedaba estrecha —el
   `max-width` de los formularios— y entre ella y SITUACIÓN quedaba media
   pantalla en blanco con el logotipo de fondo asomando.

   Tres bloques en fila: los datos de la cuenta, los condominios (que es
   el control que de verdad se usa) y la situación. Debajo, los permisos.  */
.ficha-persona {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 12px;
  align-items: start;
}

@media (max-width: 1150px) {
  .ficha-persona { grid-template-columns: 1fr; }
}

/* Dentro de la ficha los formularios ocupan lo suyo: el tope de 580 px
   de los formularios corrientes aquí deja la tarjeta a media asta. */
.ficha-persona .formulario { max-width: none; }

/* La cuenta y los condominios, uno al lado del otro. */
.datos-persona {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 10px 16px;
  /* `stretch` y no `start`: así la banda de condominios llega hasta
     abajo del todo, a la altura de «Guardar la ficha», en vez de
     quedarse arriba con el hueco debajo. */
  align-items: stretch;
}

/* La banda se reparte su alto: el buscador arriba y la lista con todo
   lo que quede. */
.datos-persona > .banda-condominios {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.datos-persona > .banda-condominios #id_condominios { flex: 1 1 auto; }

.datos-persona > h2 { grid-column: 1 / -1; }
.datos-persona > .acciones { grid-column: 1 / -1; margin: 2px 0 0; }

@media (max-width: 900px) {
  .datos-persona { grid-template-columns: 1fr; }
}

/* Los datos cortos, uno debajo de otro y apretados. */
.campos-cortos { display: flex; flex-direction: column; gap: 7px; }
.campos-cortos > label.ancho { grid-column: auto; }
.campos-cortos .ayuda { font-size: 11px; line-height: 1.3; }

/* Los condominios: sin borde de sección, que ya va en su columna. */
.banda-condominios { margin: 0; padding: 0; border: 0; }

.cabeza-condominios {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.cabeza-condominios .rotulo {
  color: var(--gris);
  font-size: var(--letra-tabla);
  letter-spacing: .3px;
  white-space: nowrap;
}

.cabeza-condominios input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 9px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-size: var(--letra-tabla);
}

.cuenta-condominios {
  color: var(--verde-marca);
  font-size: var(--letra-tabla);
  font-weight: 600;
  white-space: nowrap;
}

/* Django pinta las casillas dentro de un <div>; se reparten en columnas
   para que quepan de un vistazo y sin que la página crezca. */
.formulario #id_condominios,
#id_condominios {
  list-style: none;
  columns: 3;
  column-gap: 18px;
  /* Todo el alto de la columna de al lado, no 208 puntos. Andrés,
     11/9/2026: «para condominios usar toda esa área». Son veintiocho y
     subiendo: en 208 puntos se veían nueve y había que desplazarse
     dentro de una caja que tenía media ficha vacía debajo.

     El suelo es por si la columna de la cuenta se encogiera un día: la
     lista no puede quedarse en una rendija. */
  max-height: none;
  min-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--lienzo);
}

@media (max-width: 1400px) { #id_condominios { columns: 2; } }

/* `flex-direction: row` DICHO, no dado por hecho: los formularios ponen
   sus etiquetas en columna —rótulo encima, campo debajo— y sin esta
   línea la casilla se iba encima del nombre y centrada (Andrés,
   10/9/2026: «esa parte no me gustó»). Es la segunda vez que este mismo
   olvido rompe esta misma lista. */
.formulario #id_condominios label,
#id_condominios label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  break-inside: avoid;
  padding: 2px 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--texto);
  text-transform: none;
  letter-spacing: 0;
}

.formulario #id_condominios input,
#id_condominios input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

/* La situación, en su columna y compacta. */
.ficha-persona > .tarjeta .acciones { flex-wrap: wrap; gap: 6px; }
.ficha-persona > .tarjeta .ayuda { font-size: 11px; line-height: 1.35; }

/* Y los permisos de abajo, más apretados: son cuarenta casillas y tienen
   que caber sin empujar la página. */
.rejilla-casillas { gap: 2px 14px; }
.rejilla-casillas .casilla { padding: 1px 0; font-size: 11.5px; }
.rotulo-grupo { margin: 8px 0 3px; }

/* Los condominios que no lleva nadie: plegados, que no estorben cuando
   no los hay, y a un clic cuando sí. */
.sin-dueno { margin: -4px 0 12px; }
.sin-dueno > summary {
  cursor: pointer;
  color: var(--verde-marca);
  font-size: var(--letra-cuerpo);
  font-weight: 600;
}
.sin-dueno > summary:hover { text-decoration: underline; }

/* Lo que NO se toca al empezar de cero. */
.lista-conserva { margin: 8px 0 0; padding-left: 18px; line-height: 1.55; }
.lista-conserva li { margin-bottom: 4px; color: var(--texto); }

/* La ficha entera en una vista: el lienzo reparte el alto, y lo que
   sobra se lo queda el cuadro de las casillas, que se desplaza por
   dentro. Los botones de guardar no se van nunca de la pantalla. */
body.pantalla-ficha .lienzo {
  display: flex;
  flex-direction: column;
  /* `auto` y no `hidden`. Con `hidden`, lo que no cabia no se veia
     —ni bajando— y en una ventana de 800 de alto los dos cuadros de
     abajo quedaban en una raya de 29 puntos. Que quepa en una vista es
     la premisa; esconder lo que no cabe no es cumplirla. */
  overflow: auto;
}

/* La ficha de arriba mide lo que mide y no se encoge: son campos de
   escribir, no una lista. Encogerla no la hacia mas pequeña —lo de
   dentro no cabe— sino que la sacaba de su caja y la pintaba ENCIMA de
   los dos cuadros de abajo. Si la ventana viene corta, lo que se hace
   es bajar; para eso el lienzo se desplaza. */
body.pantalla-ficha .ficha-persona { flex: 0 0 auto; }

/* Los dos cuadros de la ficha, uno al lado del otro: «qué puede hacer»
   y «qué ve en el menú». Uno debajo del otro no cabian en la pantalla y
   habia que bajar media ventana para llegar al segundo.

   `flex-direction: row` va DICHO. Aqui dentro manda una columna —la
   ficha entera la reparte de arriba abajo— y sin esta linea los dos
   cuadros se apilan otra vez sin que se vea por que. */
/* El renglón de «Estado actual» que está en cero. Se ve igual que los
   demás —es la misma tabla— pero apagado, y al pulsarlo dice que no hay
   nada en vez de abrir un área de trabajo vacía. Es un <button> y no un
   enlace justamente por eso: no lleva a ninguna parte. */
/* Lo que hizo una corrida que no trajo nada, contado en renglones y no
   en una tabla de columnas vacias. */
.lista-corrida { margin: 0; padding-left: 18px; line-height: 1.5; color: var(--gris); }
.lista-corrida li { margin-bottom: 2px; }

.tabla td button.renglon-vacio {
  width: auto;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  color: var(--gris);
  cursor: pointer;
  font: inherit;
  text-align: left;
  /* Los <button> no parten el renglon (`.boton, button` pone
     `nowrap`). Sin esto, el rotulo mas largo estiraba la columna
     DETALLE y dejaba CANTIDAD fuera de la vista. Aqui es texto de una
     tabla, no un boton: parte como partia el enlace. */
  white-space: normal;
}
.tabla td button.renglon-vacio:hover {
  background: none;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.dos-paneles {
  display: flex;
  flex-direction: row;
  gap: 18px;
  /* `0 0 auto`: mide lo que mide su contenido. Con `1 1 auto` se
     quedaba con el alto que sobrara —320 puntos para 610 de casillas—
     y lo de dentro se salía de la caja sin que hubiera manera de
     bajarlo. Lo que se desplaza es la página. */
  flex: 0 0 auto;
}
.dos-paneles > section {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  /* Sin suelo ni techo: cada cuadro mide lo que mide y la página se
     desplaza. Los dos van a la par porque son columnas de la misma
     rejilla. */
  min-height: 0;
}
/* A media anchura, tres columnas de casillas dejan los rotulos en dos
   renglones cada uno. Con dos se leen. */
.dos-paneles .rejilla-casillas { grid-template-columns: repeat(2, 1fr); }
.dos-paneles h2 { margin-top: 12px; }

/* Los dos cuadros de abajo NO se desplazan por dentro: crecen lo que
   tengan que crecer y la que se desplaza es la página.

   Se intentó al revés —cada cuadro con su propia barra, para que todo
   cupiera en una vista— y con cincuenta y cuatro permisos y treinta y
   ocho renglones de menú lo que salía era una rendija de tres filas con
   media ficha en blanco debajo. Andrés, 11/9/2026: «eso queda mal, pues
   no me deja bajar más y ver todo». Entre una vista que no deja ver y
   una rueda de ratón, la rueda. */
body.pantalla-ficha .forma-casillas {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

body.pantalla-ficha .casillas-marco {
  flex: 0 0 auto;
  overflow: visible;
  max-height: none;
  padding-right: 4px;
}

body.pantalla-ficha .forma-casillas > .acciones {
  flex: 0 0 auto;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linea);
}

/* Los dos cuadros de la corrida, uno al lado del otro: el resumen y el
   detalle. Antes el detalle iba debajo y la mitad derecha de la pantalla
   quedaba en blanco (Andrés, 10/9/2026). */
.corrida-en-dos {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(420px, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}

@media (max-width: 1000px) { .corrida-en-dos { grid-template-columns: 1fr; } }

.corrida-en-dos h2 {
  margin: 0 0 8px;
  font-size: var(--letra-casilla);
  color: var(--verde-marca);
}

.corrida-en-dos .tabla-marco { max-height: 46vh; }

/* Los renglones que no son una factura —«Hay 382 correos de los últimos
   7 días»— se leen como lo que son: un aviso, no un dato. */
.renglon-aviso { color: var(--gris); font-style: italic; }

/* ------------------------------------------------ CAJA CHICA: la libreta
   Andrés, 13/9/2026, mirando la sección: «es muy complicado y poco
   intuitiva, necesito algo sencillo que sea entendible por cualquiera».
   Para quien anota gastos, la caja es UNA tarjeta: cuánto tiene, qué le
   falta hacer y tres botones. Nada de tablas de nueve columnas. */
.libretas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 14px;
  align-items: start;
}

.libreta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.libreta h2 { margin: 0; font-size: 15px; color: var(--verde-tinta); letter-spacing: .3px; }
.libreta .quien { color: var(--gris); font-size: var(--letra-tabla); }

.libreta-saldo .rotulo { display: block; color: var(--gris); font-size: 10px; letter-spacing: .5px; }
.libreta-saldo .saldo {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--verde-marca);
  font-variant-numeric: tabular-nums;
}
.libreta-saldo .de { color: var(--gris); font-size: var(--letra-tabla); }

/* Lo que le falta hacer, en una frase. */
.libreta-estado { margin: 0; color: var(--texto); line-height: 1.45; }
.libreta-estado.atencion { color: var(--ambar); font-weight: 700; }

/* Los botones grandes de la libreta y de las pantallas de un solo paso. */
.acciones-grandes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.acciones-grandes .boton { min-height: 38px; padding: 0 18px; font-size: 13px; }

/* El camino de una rendición de cuentas, en tres pasos: enviada,
   aprobada, fondo repuesto. Se ve de un vistazo dónde está. */
.pasos { display: flex; gap: 6px; margin: 4px 0 12px; }
.paso {
  flex: 1 1 0;
  text-align: center;
  padding: 7px 8px 5px;
  border-top: 4px solid var(--linea);
  color: var(--gris);
  font-size: var(--letra-tabla);
  letter-spacing: .3px;
}
.paso.hecho { border-top-color: var(--verde-ok); color: var(--texto); }
.paso.actual { border-top-color: var(--ambar); color: var(--texto); font-weight: 700; }
.paso.malo { border-top-color: var(--rojo); color: var(--rojo); font-weight: 700; }

/* Una explicación corta bajo el título de una pantalla: qué es esto y
   qué se hace aquí, en una línea. */
.que-es-esto { margin: 0 0 12px; color: var(--gris); line-height: 1.45; max-width: 900px; }

/* Los gastos, como renglones de una libreta: qué compró y cuánto, y
   debajo, en gris, lo demás. */
.tabla td .menudo { display: block; color: var(--gris); font-size: 11px; margin-top: 1px; }

/* ------------------------------------------ CAJA CHICA: el área de trabajo
   La ventana que Andrés aprobó en maqueta el 13/9/2026: los mandos
   arriba (condominio, Registrar, VER, Excel, imprimir, correo), el estado
   de cuenta con un desplegable «Acción ▾» por renglón, y los sellos de
   cada línea. */
.mandos, .lienzo > form.mandos, .cuerpo form.mandos {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.mandos label { display: flex; flex-direction: column; gap: 3px; color: var(--gris); font-size: var(--letra-tabla); font-weight: 700; letter-spacing: .3px; }
/* El buscador de la caja chica (14/9/2026): el campo con su Borrar al lado. */
.mandos label.buscador .con-boton { display: flex; gap: 4px; align-items: center; }
.mandos label.buscador input[type="search"] { width: 210px; }
.mandos select { min-width: 200px; height: 30px; font-size: 13px; }
.mandos .condominio-fijo { display: inline-flex; align-items: center; height: 30px; font-size: 13px; color: var(--texto); font-weight: 700; }
.mandos .separador { flex: 1 1 auto; }
.mandos > .boton { align-self: flex-end; min-height: 30px; }
.mandos .desplegable > summary.boton { min-height: 30px; padding: 0 18px; display: inline-flex; align-items: center; }

/* Un desplegable hecho con <details>: el botón es el summary y la lista
   flota debajo. Sirve para Registrar ▾ y para Acción ▾. */
.desplegable, .accion { position: relative; display: inline-block; }
.desplegable > summary, .accion > summary { list-style: none; cursor: pointer; user-select: none; }
.desplegable > summary::-webkit-details-marker, .accion > summary::-webkit-details-marker { display: none; }
.desplegable > .opciones, .accion > .lista {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 250px;
  background: var(--blanco);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
  z-index: 30;
  padding: 4px;
  text-align: left;
}
.accion > .lista { left: auto; right: 0; min-width: 190px; }
.desplegable > .opciones a, .desplegable > .opciones .apagada, .accion > .lista a, .accion > .lista button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px;
  color: var(--texto);
  text-decoration: none;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  min-height: 0;
  box-shadow: none;
}
.desplegable > .opciones a:hover, .accion > .lista a:hover, .accion > .lista button:hover { background: var(--franja); }
.desplegable > .opciones small { display: block; color: var(--gris); font-size: 11px; }
.desplegable > .opciones .apagada { color: var(--gris-apagado); cursor: default; }
.accion > .lista button.peligro { color: var(--rojo); }
.accion > summary.boton.menu { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; font-size: 11px; width: auto; margin: 0; }
/* Registrar ▾ flota por encima de la tabla. Cada hijo del lienzo es su
   propio contexto de apilado con z-index 1 (`.lienzo > *`), y el marco de
   la tabla, que viene después, tapaba la lista (13/9/2026: Andrés dio
   clic y «no sirve»). Los mandos van por encima. */
.lienzo > form.mandos, .cuerpo form.mandos { z-index: 5; }
/* Acción ▾ despliega DENTRO del renglón. Las celdas recortan lo que
   sobresale (overflow hidden de toda tabla) y el marco también, así que
   una lista flotante no se veía. La lista va en el flujo, debajo del
   botón, y el renglón crece mientras esté abierta. */
.tabla td.acciones-fila > .accion[open] { display: block; }
.tabla td.acciones-fila > .accion > .lista { position: static; margin: 4px 0 2px auto; width: 190px; }

/* El estado de cuenta: once columnas que tienen que caber en una
   pantalla de 1366; el detalle, el proveedor y la imputación parten
   renglón, y las cifras no. */
.tabla.estado-cuenta { table-layout: auto; width: 100%; }
.tabla.estado-cuenta td, .tabla.estado-cuenta th { font-size: 12px; padding-top: 3px; padding-bottom: 3px; }
.tabla.estado-cuenta td { white-space: normal; vertical-align: top; }
.tabla.estado-cuenta td.importe, .tabla.estado-cuenta td.centro { white-space: nowrap; }
.tabla.estado-cuenta td .menudo { white-space: normal; }
.tabla.estado-cuenta td.vale { color: var(--ambar); font-weight: 700; }
.tabla.estado-cuenta td.ingreso { color: var(--verde-ok); font-weight: 700; }
/* La línea entre las cuatro cifras —INGRESOS | GASTOS | VALES | SALDO—,
   de arriba abajo, encabezado incluido. Andrés, 14/9/2026: «agregar
   líneas rojas como la foto», luego «tono rojo pastel», y al final «las
   líneas divisorias mejor de color gris». */
.tabla.estado-cuenta th.raya, .tabla.estado-cuenta td.raya { border-left: 2px solid var(--linea-fuerte); }
/* Y la que cierra las cifras después de SALDO (Andrés, 14/9/2026 por la
   noche: «agregar líneas»). */
.tabla.estado-cuenta th.raya-fin, .tabla.estado-cuenta td.raya-fin { border-right: 2px solid var(--linea-fuerte); }
/* La columna TIPO (Andrés, 14/9/2026): la palabra corta de cada movimiento. */
.tabla.estado-cuenta td.tipo { color: var(--gris); font-size: 10.5px; letter-spacing: .3px; white-space: nowrap; }
/* La pastilla con los sellos en el globo del ratón (Andrés, 14/9/2026:
   «no quiero filas más anchas que las otras… que todo ese detalle se
   muestre al colocar el mouse sobre el banner»). */
.tabla.estado-cuenta .pill[title] { cursor: help; }
.tabla.estado-cuenta tr.fila-reposicion td { background: var(--fondo-aviso); }
.tabla.estado-cuenta tr.gris td { color: var(--gris-apagado); }
.tabla.estado-cuenta tr.gris td.vale { color: var(--gris-apagado); font-weight: 400; text-decoration: line-through; }
.sumas .cifra.gastado { color: var(--rojo); }

/* Las tres cifras en la banda de mandos (Andrés, 14/9/2026: «mover de
   lugar a donde marqué»), en el hueco entre el buscador y los botones. */
.mandos .sumas.en-mandos { flex: 1 1 auto; justify-content: center; align-self: flex-end; padding-bottom: 2px; }

/* «Ver historial» (Andrés, 14/9/2026 por la noche): los sellos de la
   línea, del primero al último, desplegados dentro del renglón como
   Acción ▾. */
.tabla td.acciones-fila > .historial > .lista.historia { width: 380px; padding: 4px 8px; }
.sello-historia {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1px 10px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--linea);
  font-size: 11px;
  color: var(--texto);
  text-align: left;
  white-space: normal;
}
.sello-historia:last-child { border-bottom: 0; }
.sello-historia .cuando { color: var(--gris); white-space: nowrap; }
.sello-historia .que { font-weight: 600; }
.sello-historia .quien { color: var(--gris); white-space: nowrap; }
.sello-historia .token { grid-column: 2 / -1; font-family: var(--familia-tabular); color: var(--gris); letter-spacing: .3px; }
.sello-historia.anulado .que { color: var(--rojo); text-decoration: line-through; }

/* La banda de mandos y el encabezado se quedan quietos; la lista es la
   que se desplaza (Andrés, 14/9/2026 por la noche: «todo ese debe estar
   fijo para poder hacer scroll en la lista de abajo»). El lienzo deja de
   desplazarse y el marco de la tabla toma la barra, como el Área de
   trabajo de AUTOFACTURAS. */
body.caja-tablero .lienzo { display: flex; flex-direction: column; overflow: hidden; }
body.caja-tablero .lienzo > * { flex: 0 0 auto; }
body.caja-tablero .lienzo > .tabla-marco { flex: 1 1 auto; min-height: 0; overflow: auto; }
body.caja-tablero .tabla thead th { top: 0; }

/* Los sellos de cada línea, en cuatro columnas (Andrés, 13/9/2026: «EN
   COLUMNAS SEPARADAS»): TOKEN · QUIÉN · ACCIÓN · FECHA. Un renglón por
   sello en cada celda, con la misma altura, para que los cuatro queden
   alineados; nada parte renglón. Desde el 14/9/2026 por la noche solo lo
   usan Detalle cajas activas y los movimientos, no el área de trabajo. */
.tabla td.sellos-linea, .tabla th.sellos-linea { white-space: nowrap; font-size: 10.5px; color: var(--gris); line-height: 1.3; padding-left: 5px; padding-right: 5px; }
.tabla th.sellos-linea { font-size: 11px; }
.sello-linea { display: block; line-height: 1.5; height: 1.5em; }
.sello-linea .token { font-family: var(--familia-tabular); color: var(--texto); letter-spacing: .3px; }
.sello-linea.anulado { text-decoration: line-through; }

/* La celda de las acciones: la pastilla, «Ver factura» y Acción ▾ en
   fila; debajo, si hace falta, el cuadro de la razón o del reintegro. */
.tabla td.acciones-fila { white-space: normal; min-width: 210px; text-align: right; }
.tabla td.acciones-fila > .boton, .tabla td.acciones-fila > .accion { display: inline-flex; vertical-align: middle; margin: 1px 2px; }
/* La pastilla del estado (REINTEGRADA, VALE ABIERTO…) va DEBAJO del
   botón Acción ▾, en su propio renglón (Andrés, 13/9/2026). */
.tabla td.acciones-fila > .pill { display: flex; width: max-content; margin: 3px 2px 2px auto; }
.tabla td.acciones-fila > .boton { align-items: center; min-height: 22px; padding: 0 8px; font-size: 11px; width: auto; }
.tabla td.acciones-fila .razon {
  display: block;
  margin: 6px 0 2px auto;
  width: 260px;
  background: var(--blanco);
  border: 1px solid var(--rojo);
  border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
  padding: 8px 10px;
  text-align: left;
}
.tabla td.acciones-fila .razon.reintegro { border-color: var(--verde-ok); }
.tabla td.acciones-fila .razon b { display: block; color: var(--rojo); font-size: 12px; margin-bottom: 4px; }
.tabla td.acciones-fila .razon.reintegro b { color: var(--verde-ok); }
.tabla td.acciones-fila .razon b.suave { color: var(--verde-ok); }
.tabla td.acciones-fila .razon.nota { border-color: var(--verde-ok); }
/* Sugerencias sobre el programa (14/9/2026): la caja para escribir y la lista. */
.dos-columnas.sugerencias { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 14px; align-items: start; }
.sugerencia { border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px 12px; margin: 0 0 8px; background: var(--blanco); }
.sugerencia.estado-hecha { border-left: 4px solid var(--verde-ok); }
.sugerencia.estado-descartada { opacity: .7; }
.sugerencia.estado-nueva { border-left: 4px solid var(--cian); }
.sugerencia.estado-aceptada { border-left: 4px solid var(--ambar); }
.sugerencia-cabeza { display: flex; gap: 8px; align-items: center; color: var(--gris); font-size: var(--letra-tabla); }
.sugerencia-texto { margin: 6px 0; white-space: pre-wrap; }
.sugerencia-respuesta { margin: 4px 0 0; padding: 6px 10px; background: var(--franja); border-radius: var(--radio); }
.sugerencia-decidir { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.sugerencia-decidir input[type="text"] { flex: 1 1 auto; }
/* Los Históricos de corridas: la que falló, con su fila teñida. */
.tabla tr.con-fallo td { background: var(--fondo-rojo-suave); }
/* La batería de pruebas, en Revisión del sistema (solo el programador). */
.tarjeta.bateria .acciones { display: flex; gap: 8px; align-items: center; }
.tarjeta.bateria .acciones form { display: inline; }
/* Cerrar caja chica: la diferencia y los vales, en rojo cuando falta. */
.dato .valor.falta { color: var(--rojo); }
.tabla td.acciones-fila .razon input, .tabla td.acciones-fila .razon select { width: 100%; height: 24px; font-size: 12px; box-sizing: border-box; }
.tabla td.acciones-fila .razon label { display: block; color: var(--gris); font-size: 10px; margin-top: 4px; }
.tabla td.acciones-fila .razon .fila { display: flex; gap: 4px; margin-top: 6px; justify-content: flex-end; }
.tabla td.acciones-fila .razon .boton { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; font-size: 11px; width: auto; }