:root {
  /* La paleta del PDF, la misma que `src/reportes/reportador.py`: la pantalla
     tiene que verse como el reporte que recibe el propietario. */
  --azul: #0A2640;         /* banda de meses, titulos, netos */
  --dorado: #F1C777;       /* la fila Total general */
  --celeste: #BACAD7;      /* la banda con el nombre de cada casa */
  --celeste-suave: #E4EAF0;/* la fila Neto de la casa */
  --tinta: #1a1a1a;        /* el texto */
  --gris-linea: #bbbbbb;   /* las lineas finas de los subtotales */

  --gris: #6b7280;
  --borde: #e5e7eb;
  --fondo: #f9fafb;
  --papel: #ffffff;
  --acento: var(--azul);
  --rojo: #b91c1c;
  --verde: #047857;

  --falta-fondo: #fee2e2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 3rem;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

main, .cabecera { max-width: 1120px; margin-inline: auto; }

/* Como el encabezado del PDF: el titulo en azul con el nombre del propietario
   abajo en gris, y el logo al costado derecho. */
.cabecera {
  padding: 2.5rem 0 1.75rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
}
.cabecera-texto { min-width: 0; }
.cabecera h1 {
  margin: 0 0 .2rem; font-size: 1.6rem; letter-spacing: -.01em;
  color: var(--azul);
}
.cabecera-sub { margin: 0; color: var(--gris); }
.cabecera-logo { flex-shrink: 0; height: 30px; width: auto; margin-top: .35rem; }

/* --- ranuras de carga --- */
.ranuras {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.ranura {
  position: relative;
  display: flex; align-items: flex-start; gap: .9rem;
  background: var(--papel);
  border: 2px dashed #64748b;
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ranura:hover, .ranura:focus-visible { border-color: var(--acento); outline: none; }
.ranura.encima { border-color: var(--acento); background: #f1f5f9; }
.ranura.cargada { border-style: solid; border-color: var(--verde); background: #f6fffb; }

.ranura-numero {
  flex-shrink: 0;
  width: 26px; height: 26px; margin-top: .1rem;
  border-radius: 50%;
  background: #e5e7eb; color: var(--gris);
  font-size: .82rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ranura.cargada .ranura-numero { background: var(--verde); color: #fff; }
/* Con archivo cargado el numero de paso deja lugar al tilde. */
.ranura.cargada .ranura-numero > span { display: none; }
.ranura.cargada .ranura-numero::after { content: '✓'; font-size: .8rem; }

.ranura-cuerpo { min-width: 0; }
.ranura-titulo { margin: 0; font-weight: 700; font-size: 1rem; }
.ranura-desc { margin: .1rem 0 .5rem; font-size: .85rem; color: var(--gris); }
.ranura-archivo {
  margin: 0; font-size: .85rem; color: var(--gris);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ranura.cargada .ranura-archivo { color: var(--verde); font-weight: 600; }

.quitar {
  position: absolute; top: .6rem; right: .6rem;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--borde); border-radius: 50%;
  background: var(--papel); color: var(--gris);
  font-size: 1rem; line-height: 1; font-family: inherit; cursor: pointer;
}
.quitar:hover { background: var(--falta-fondo); color: var(--rojo); border-color: var(--rojo); }

/* --- botones --- */
/* La regla base de todos los botones de accion. `.secundario` es un modificador
   de color que se apoya encima: un boton que lleve esa clase y no este aca
   pierde el padding, el radio y la tipografia, y se ve como un boton nativo
   pelado al lado de los demas. */
/* `.secundario` entra en la regla base porque los botones de preset y los de
   descargar PDF se crean desde el JS y no tienen id: sin esto salen como un
   boton nativo pelado al lado de los demas. */
#generar, #entrar, #empezar-de-nuevo, #publicar, .secundario {
  margin-top: 1.25rem; padding: .7rem 1.5rem;
  background: var(--acento); color: #fff;
  border: 1px solid var(--acento); border-radius: 9px;
  font-size: .95rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
#generar:hover:not(:disabled), #entrar:hover:not(:disabled),
#publicar:hover:not(:disabled) { background: #0A2640; }
#generar:disabled, #entrar:disabled, #publicar:disabled {
  opacity: .4; cursor: not-allowed;
}

/* --- publicar para los propietarios --- */
/* No lleva `.secundario`: publicar no es un boton de apoyo. Pero tampoco esta
   arriba de todo, porque lo normal es mirar el reporte y recien despues
   decidir. */
#zona-publicar { margin: 1.5rem 0; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
/* `display: flex` le gana al atributo `hidden`: sin esto, los botones que no
   aplican en la pantalla de lo publicado se siguen viendo. */
#zona-publicar[hidden] { display: none; }
#control.secundario { margin-top: 0; }
#publicar { margin-top: 0; }
.publicar-estado { flex-basis: 100%; margin: .2rem 0 0; font-size: .9rem; color: var(--gris); }
/* Lo que salio mal se lee distinto de lo que salio bien: un "se publicaron 40
   de 93" en gris claro se lee como un avance mas. */
.publicar-estado.alerta {
  color: #8a4b00; background: #fff4e5; border: 1px solid #f0c58a;
  border-radius: .5rem; padding: .6rem .9rem; font-weight: 600;
}

/* Va con el id adelante porque la regla base tambien selecciona por id, y un
   selector de clase nunca le gana: sin esto `.secundario` no pinta nada en
   #empezar-de-nuevo y los botones salen identicos. */
#empezar-de-nuevo.secundario, .secundario {
  background: transparent; color: var(--tinta); border-color: var(--borde);
}
#empezar-de-nuevo.secundario:hover:not(:disabled),
.secundario:hover:not(:disabled) { background: #f3f4f6; }
.secundario:disabled { opacity: .4; cursor: not-allowed; }

.nota { font-size: .9rem; opacity: .75; text-align: center; }

/* --- progreso --- */
#paso-progreso { text-align: center; margin: 2rem 0; }
#progreso-texto { margin: 0 0 .75rem; color: var(--gris); }
#progreso-barra { width: 100%; max-width: 32rem; height: 1rem; }

/* --- resultado --- */
#paso-resultado { padding-top: 1.5rem; }
#resultado-titulo { margin: 0; font-size: 1.05rem; font-weight: 600; }

#avisos {
  margin-top: 1.5rem;
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: 12px; padding: .85rem 1.1rem;
}
#avisos summary { cursor: pointer; font-size: .9rem; color: var(--gris); }
#cuadre { white-space: pre-wrap; font-size: .85rem; overflow-x: auto; }

#empezar-de-nuevo { display: block; }

@media (max-width: 640px) {
  .cabecera { padding-top: 1.75rem; }
  .cabecera h1 { font-size: 1.3rem; }
}

/* El titulo cuando el lote salio con algo raro: tiene que verse distinto de
   un "listo" comun, o se lee igual que un exito. */
#resultado-titulo.alerta {
  color: #8a4b00;
  background: #fff4e5;
  border: 1px solid #f0c58a;
  border-radius: .5rem;
  padding: .75rem 1rem;
  font-weight: 600;
}

/* --- el selector de meses y las tablas en pantalla --- */

#filtro-empresa { margin: 1rem 0 1.5rem; }
#filtro-empresa select {
  font-family: inherit; font-size: .95rem; padding: .5rem .7rem;
  border: 1px solid var(--borde); border-radius: 7px; max-width: 100%;
}
.nota-vista { font-size: .8rem; opacity: .7; margin: .4rem 0 0; }

#filtro-meses { margin: 1rem 0 1.5rem; }
.filtro-titulo { display: block; font-size: .9rem; font-weight: 600; margin: 0 0 .5rem; }
#meses-casillas { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-bottom: .75rem; }
#meses-casillas label { font-size: .85rem; cursor: pointer; }
#meses-casillas[hidden] { display: none; }
.filtro-botones { display: flex; gap: .5rem; }
.filtro-botones button { margin-top: 0; padding: .4rem 1rem; font-size: .85rem; }

.empresa-bloque { margin-bottom: 2.5rem; }

/* --- descargas del portal --- */
/* Separadas de la ultima tabla y con los colores de la marca: son la accion
   principal del propietario una vez que miro los numeros. */
.descargas {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--borde);
}
.descarga {
  padding: .7rem 1.4rem; border-radius: 9px; border: 1px solid transparent;
  font-size: .95rem; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: filter .15s, transform .15s;
}
.descarga-pdf { background: var(--azul); color: #fff; }
.descarga-excel { background: var(--dorado); color: var(--azul); }
.descarga:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.descarga:disabled { opacity: .4; cursor: not-allowed; }
.empresa-nombre {
  font-size: 1.15rem; font-weight: 700; margin: 0 0 .75rem;
  color: var(--azul);
}

/* La banda celeste con el nombre de la casa, del ancho de la tabla, como en el
   PDF. Pegada a la tabla que encabeza: sin margen abajo. */
.casa-nombre {
  font-size: .9rem; font-weight: 700; margin: 1.4rem 0 0;
  padding: .45rem .7rem;
  background: var(--celeste); color: var(--azul);
}

/* La tabla no se achica: se desplaza. Una pantalla no tiene borde de hoja,
   asi que no hay razon para bajar la letra como si fuera una hoja. */
/* El tope de alto es lo que hace que el `thead` sticky de mas abajo sirva de
   algo. `overflow-x: auto` ya convierte a esta caja en scrollport de los DOS
   ejes -el CSS no deja tener uno solo: `overflow-y: visible` computa a `auto` y
   `clip` computa a `hidden`-, asi que el `top: 0` del encabezado se resuelve
   contra esta caja y no contra la ventana. Sin un alto que la caja pueda
   desbordar, la caja nunca scrollea en vertical y el encabezado nunca se pega:
   se va para arriba junto con la tabla.
   Las tablas mas bajas que este tope siguen igual que antes -clientHeight ==
   scrollHeight, no scrollean, la rueda pasa de largo a la pagina-; solo las
   casas con muchos rubros, que son justo las que perdian el mes de vista,
   scrollean adentro. */
.scroll-x { overflow-x: auto; max-height: 80vh; }
/* `fixed` con anchos explicitos, y no el auto de siempre: es lo que hace que
   la tabla de cada casa y la del resumen tengan los meses en la MISMA
   posicion. Con el layout automatico cada tabla se ajusta a su propio
   contenido -"Honorarios de administracion" es mas largo que "Total
   ingresos"- y las columnas bailan de un bloque al otro. Es el mismo motivo
   por el que el PDF fija los anchos en `_anchos_columna`. */
.scroll-x table {
  border-collapse: collapse; white-space: nowrap;
  table-layout: fixed; width: 100%;
}
/* Los anchos van en `thead`, que es de donde `table-layout: fixed` los toma.
   Ojo: `fixed` solo funciona si la tabla tiene un ancho definido. Con
   `width: auto` el navegador vuelve a medir el contenido de cada tabla
   -"Honorarios de administracion" es mas largo que "Total ingresos"- y la de
   una casa y la del resumen terminan con los meses en posiciones distintas.
   Con `width: 100%` todas las tablas de un propietario tienen la misma caja y
   la misma cantidad de columnas, asi que caen en la misma grilla. Cuando los
   anchos declarados no entran (doce meses), la tabla crece y se desplaza. */
.scroll-x thead th:first-child { width: 15rem; }
.scroll-x thead th:not(:first-child) { width: 7rem; }
.scroll-x th, .scroll-x td {
  padding: .3rem .7rem; text-align: center; font-size: .85rem;
}
/* La linea de cada fila es su propio `border-top`, no el `border-bottom` de la
   de arriba. Con `border-collapse` las dos caen en el mismo lugar y gana la de
   la fila de arriba, asi que la linea fina de los subtotales no se veria nunca:
   la ganaria la linea clara del concepto anterior. Siendo border-top, cada fila
   manda sobre su propia linea.
   Y va sin `tbody` adelante -las celdas del encabezado son `th`, no `td`, asi
   que igual no las alcanza-: con `tbody` este selector le ganaria por
   especificidad al color de linea de los subtotales de mas abajo. */
.scroll-x td { border-top: 1px solid var(--borde); }

/* La primera columna queda fija. Sin esto, con doce meses uno llega a octubre
   y ya no sabe si la fila que mira es Seguro o Honorarios.
   El fondo NO puede ser transparente: es lo unico que tapa las columnas de
   meses cuando pasan por abajo. Cada fila de color repite mas abajo su color en
   esta celda, por la misma razon. */
/* Sin `font-weight` aca: este selector le gana en especificidad a las reglas
   por tipo de fila de mas abajo, y un `font-weight: 400` dejaria la primera
   celda de cada fila de seccion en redonda mientras el resto va en negrita. */
.scroll-x th:first-child, .scroll-x td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--papel); text-align: left;
  /* El borde y la sombra no son decoracion: sin ellos, el numero que se esta
     cortando al pasar por debajo queda pegado al nombre del concepto y se lee
     como si fuera parte de la etiqueta ("Honorarios de administracion 50.00").
     Con un borde, el corte se lee como un borde. */
  border-right: 1px solid var(--gris-linea, #bbb);
  box-shadow: 3px 0 5px -3px rgba(10, 38, 64, .25);
}

/* Y el encabezado queda fijo al bajar. En una casa con muchos rubros uno se
   va para abajo y pierde de vista que mes es cada columna.
   Es la banda azul de meses del PDF. */
.scroll-x thead th {
  font-weight: 700;
  background: var(--azul); color: #fff;
  position: sticky; top: 0; z-index: 2;
}
/* La esquina donde se cruzan las dos stickies necesita ganarle a las dos, o el
   mes de la primera columna se dibuja encima del rotulo de la fila. Y va con el
   mismo azul: si quedara blanca se veria un hueco en la banda. */
.scroll-x thead th:first-child { z-index: 3; background: var(--azul); color: #fff; }

/* --- los tipos de fila, con los colores del PDF --------------------------- */

/* Los conceptos van con sangria, como en el PDF; los rotulos de estructura
   -secciones, subtotales, movimientos y cierres- quedan al margen. */
.fila-concepto td:first-child { padding-left: 1.7rem; }

.fila-seccion td { font-weight: 700; color: var(--azul); }
.fila-subtotal td { font-style: italic; border-top-color: var(--gris-linea); }
.fila-neto-casa td, .fila-neto-casa td:first-child {
  font-weight: 700; color: var(--azul); background: var(--celeste-suave);
}
.fila-total-general td, .fila-total-general td:first-child {
  font-weight: 700; color: var(--azul); background: var(--dorado);
}
.fila-saldo-final td, .fila-saldo-final td:first-child {
  font-weight: 700; color: #fff; background: var(--azul);
}

/* --- la pantalla de accesos (admin.html) ---------------------------------
   Todo lo de abajo va colgado de ids y clases que solo existen en admin.html,
   asi que no alcanza a la pagina de reportes, que comparte esta hoja. */

.oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- el estado de la carga --- */
#estado-carga { padding: 1.5rem 0; }
#estado-texto { margin: 0; color: var(--gris); }
/* El fallo se ve distinto de un "cargando": mismo tratamiento que el titulo de
   una corrida con problemas en la pagina de reportes. */
#estado-texto.estado-error {
  color: #8a4b00; background: #fff4e5;
  border: 1px solid #f0c58a; border-radius: .5rem;
  padding: .85rem 1.1rem; font-weight: 600;
}

.contador { margin: 0 0 .9rem; font-weight: 600; color: var(--azul); }

.vacio {
  background: var(--papel); border: 1px solid var(--borde);
  border-left: 4px solid var(--celeste);
  border-radius: 10px; padding: .9rem 1.1rem;
  font-size: .9rem; color: var(--gris);
}
.vacio a { color: var(--azul); }

/* --- la tabla de accesos --- */
/* Reusa `.scroll-x` de la pagina de reportes -el thead pegado, la primera
   columna fija y el tope de alto-, pero acá el contenido es texto y no numeros:
   va a la izquierda. Con el id adelante para ganarle al `text-align: right` de
   `.scroll-x th`, que es un selector de clase. */
#tabla-accesos { width: 100%; }
#tabla-accesos th, #tabla-accesos td {
  text-align: left; padding: .45rem .7rem; vertical-align: middle;
}
.celda-empresa { font-weight: 600; color: var(--azul); }

#tabla-accesos .celda-mail {
  font-family: inherit; font-size: .85rem;
  padding: .35rem .5rem; min-width: 16rem; max-width: 100%;
  border: 1px solid var(--borde); border-radius: 6px;
  background: var(--papel); color: var(--tinta);
}
#tabla-accesos .celda-mail:focus-visible { outline: 2px solid var(--acento); outline-offset: 0; }
#tabla-accesos .celda-mail:disabled { opacity: .5; }
#tabla-accesos .celda-mail::placeholder { color: #6b7280; font-style: italic; }

.codigo-si { color: var(--verde); font-weight: 600; }
.codigo-no { color: var(--gris); }

/* Sin mail es PENDIENTE, no error: puede ser un propietario nuevo del mes. El
   ambar dice "falta esto" donde el rojo diria "algo se rompio".
   Va con el `td:first-child` repetido porque la primera columna de `.scroll-x`
   es sticky con fondo propio, y sin esto la franja se cortaria justo ahi. */
#tabla-accesos .fila-pendiente td,
#tabla-accesos .fila-pendiente td:first-child { background: #fffaf0; }
#tabla-accesos .fila-pendiente .celda-empresa { box-shadow: inset 3px 0 0 var(--dorado); }

/* Los botones de fila llevan `.secundario`, que trae un margen pensado para un
   boton al final de una seccion. En una celda ese margen desalinea la fila. */
#tabla-accesos .en-fila {
  margin-top: 0; padding: .35rem .8rem; font-size: .8rem; white-space: nowrap;
}

.mensaje { margin: .9rem 0 0; font-size: .9rem; padding: .6rem .85rem; border-radius: 8px; }
.mensaje-ok { color: var(--verde); background: #f6fffb; border: 1px solid #b6e3ce; }
.mensaje-mal { color: #8a4b00; background: #fff4e5; border: 1px solid #f0c58a; }

/* --- el cartel del codigo generado --- */
/* El unico bloque en azul pleno de la pantalla: es lo unico que hay que leer
   entero antes de seguir, y la unica vez que este codigo existe en texto. */
.cartel {
  margin: 1.5rem 0 2rem; padding: 1.4rem 1.6rem;
  background: var(--azul); color: #fff;
  border-radius: 14px;
}
.cartel h2 { margin: 0 0 .9rem; font-size: 1.05rem; font-weight: 700; }

.codigo-caja { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.codigo-texto {
  /* Seleccionable de un clic: se dicta por telefono o se pega en un WhatsApp. */
  user-select: all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.9rem; font-weight: 700; letter-spacing: .12em;
  background: var(--papel); color: var(--azul);
  padding: .5rem .9rem; border-radius: 10px;
}
/* `.secundario` viene transparente con texto oscuro, que sobre el azul del
   cartel queda ilegible. */
.cartel .secundario {
  margin-top: 0; color: #fff; border-color: rgba(255, 255, 255, .55);
}
.cartel .secundario:hover:not(:disabled) { background: rgba(255, 255, 255, .15); }

.cartel-titulo { margin: 1.3rem 0 .35rem; font-size: .9rem; opacity: .85; }
.cartel-sociedades {
  margin: 0; padding: .6rem .9rem .6rem 2rem;
  background: rgba(255, 255, 255, .1); border-radius: 10px;
}
.cartel-sociedades li { font-weight: 700; padding: .1rem 0; }

.cartel-revisar { margin: .9rem 0 0; font-size: .9rem; }
.cartel-aviso {
  margin: 1rem 0 0; padding: .8rem 1rem;
  background: var(--dorado); color: #3d2600;
  border-radius: 10px; font-size: .88rem; font-weight: 600;
}

/* --- importar --- */
.importar-caja {
  margin-top: 2.5rem; padding: 1.3rem 1.5rem;
  background: var(--papel); border: 1px solid var(--borde); border-radius: 14px;
}
.importar-caja h2 { margin: 0 0 .4rem; font-size: 1rem; color: var(--azul); }
.nota-importar { margin: 0 0 .8rem; font-size: .85rem; color: var(--gris); }
#importar-texto {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem; padding: .6rem .7rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--fondo); color: var(--tinta); resize: vertical;
}
#importar-boton {
  margin-top: .9rem; padding: .6rem 1.4rem;
  background: var(--acento); color: #fff;
  border: 1px solid var(--acento); border-radius: 9px;
  font-size: .9rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
#importar-boton:hover:not(:disabled) { background: #0A2640; }
#importar-boton:disabled { opacity: .4; cursor: not-allowed; }

/* Lo que la importacion NO guardo. Sale con el listado completo, fila por fila:
   una importacion que escribe lo que matchea y se calla el resto es peor que
   cargar a mano, porque deja creer que quedo todo. */
.rechazadas {
  margin-top: 1rem; padding: .9rem 1.1rem;
  background: #fff4e5; border: 1px solid #f0c58a; border-radius: 10px;
}
.rechazadas-titulo { margin: 0 0 .3rem; font-weight: 700; color: #8a4b00; font-size: .9rem; }
.rechazadas-nota { margin: 0 0 .6rem; font-size: .82rem; color: #8a4b00; }
.rechazadas ul { margin: 0; padding-left: 1.3rem; }
.rechazadas li {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; padding: .12rem 0; overflow-wrap: anywhere;
}

/* --- el enlace a la pantalla de accesos, en la pagina de reportes --- */
.pie-admin { margin: 2.5rem 0 0; text-align: center; font-size: .82rem; }
.pie-admin a { color: var(--gris); }
.pie-admin a:hover { color: var(--azul); }

@media (max-width: 640px) {
  .codigo-texto { font-size: 1.4rem; }
  .cartel, .importar-caja { padding-inline: 1rem; }
}

/* --- el portal del inversor (portal.html) ---------------------------------
   Las tablas, el filtro de meses y los colores de cada tipo de fila son los de
   mas arriba, sin tocar: el inversor tiene que ver lo mismo que ve el equipo y
   lo mismo que dice el PDF que recibe. Lo unico que se agrega acá es la entrada
   y las solapas, que son de esta pantalla. */

/* Angosta a proposito: son dos campos y un boton, y un formulario del ancho de
   la pagina hace buscar donde empieza. */
.entrada-caja {
  max-width: 26rem; margin: 1rem 0 0;
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 1.5rem;
}
.entrada-caja h2 { margin: 0 0 1rem; font-size: 1.05rem; color: var(--azul); }

.campo { margin-bottom: .9rem; }
.campo label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.campo input {
  width: 100%; font-family: inherit; font-size: .95rem; padding: .55rem .7rem;
  border: 1px solid var(--borde); border-radius: 7px;
  background: var(--papel); color: var(--tinta);
}
.campo input:focus-visible { outline: 2px solid var(--acento); outline-offset: 0; }

#entrar { display: block; width: 100%; }

/* El periodo publicado, arriba de todo: el dueño tiene que poder ver de que
   meses es lo que esta mirando sin abrir el PDF. */
.periodo { margin: 0 0 1.2rem; font-weight: 600; color: var(--azul); }

/* Una solapa por sociedad, y nada que las sume. La activa va en azul pleno:
   estando mirando un balance, cual de las sociedades es tiene que leerse de una
   sin comparar bordes. */
.solapas {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 1.2rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--borde);
}
/* No lleva `.secundario` -que arrastra el margen de un boton de fin de
   seccion-, asi que repite la base de los botones acá. */
.solapa {
  padding: .5rem 1.1rem;
  background: transparent; color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 9px;
  font-size: .9rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.solapa:hover:not(:disabled) { background: #f3f4f6; }
.solapa.activa { background: var(--azul); color: #fff; border-color: var(--azul); }
.solapa:disabled { opacity: .4; cursor: not-allowed; }

/* --- el ultimo lote publicado --- */
/* Arriba de las ranuras de carga: quien vuelve a entrar a revisar no tiene por
   que volver a cargar los Excel. */
.publicado {
  margin-bottom: 1.5rem; padding: 1rem 1.25rem;
  background: var(--celeste-suave); border: 1px solid var(--celeste);
  border-radius: .75rem;
}
.publicado-texto { margin: 0 0 .6rem; font-size: .95rem; color: var(--azul); font-weight: 600; }
.publicado .secundario { margin-top: 0; }

/* --- la calculadora de rentabilidad --- */
.dialogo {
  width: min(76rem, 96vw); max-width: 96vw; max-height: 90vh; overflow: auto;
  border: 1px solid var(--borde); border-radius: .9rem; padding: 1.5rem;
  color: var(--tinta);
}
.dialogo::backdrop { background: rgba(10, 38, 64, .55); }
.dialogo h2 { margin: 0 0 .25rem; font-size: 1.3rem; color: var(--azul); }
.dialogo-sub { margin: 0 0 1.1rem; font-size: .9rem; color: var(--gris); }
.dialogo-cerrar { display: flex; justify-content: flex-end; margin: -0.5rem -0.5rem 0 0; }
.dialogo .cerrar {
  background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: var(--gris); cursor: pointer; padding: .2rem .5rem;
}
/* Ocho columnas en un dialogo de telefono: se reparten el ancho y los titulos
   pueden partirse en dos renglones antes que cortarse. */
#tabla-rentabilidad { border-collapse: collapse; width: 100%; min-width: 620px; table-layout: fixed; }
#tabla-rentabilidad th, #tabla-rentabilidad td { padding: .4rem .35rem; text-align: center; font-size: .85rem; overflow-wrap: anywhere; }
#tabla-rentabilidad th { white-space: normal; line-height: 1.25; }
/* Los nombres de casa van a la izquierda: son texto. Los numeros, centrados. */
#tabla-rentabilidad td:first-child { text-align: left; }
#tabla-rentabilidad thead th { background: var(--azul); color: #fff; font-size: .8rem; }
#tabla-rentabilidad tbody tr:nth-child(even) { background: #fafbfc; }
#tabla-rentabilidad input {
  width: 100%; min-width: 0; padding: .25rem .3rem; text-align: right; font-size: .85rem;
  border: 1px solid var(--borde); border-radius: .4rem; font-family: inherit;
}
#tabla-rentabilidad input { text-align: center; }
#tabla-rentabilidad .fila-total td { font-weight: 500; color: var(--tinta); border-top: 1px solid var(--borde-fuerte, #9aa3ad); }
#tabla-rentabilidad thead tr:last-child th { background: var(--azul); color: #fff; font-weight: 500; }
#tabla-rentabilidad td.cargable { background: #FBEFC9; }
#tabla-rentabilidad td.cargable input { background: transparent; }
.nota-faltan { font-size: .85rem; color: #854F0B; margin: .6rem 0 0; }
#tabla-rentabilidad .sin-inversion { color: var(--gris); }

/* --- el acceso a todas las sociedades --- */
.admin-alta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.admin-alta input {
  flex: 1 1 18rem; padding: .55rem .7rem; font: inherit;
  border: 1px solid var(--borde); border-radius: .5rem;
}
.admin-alta button { margin-top: 0; }
#admin-lista li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .4rem; }
#admin-lista .secundario { margin-top: 0; padding: .3rem .8rem; font-size: .85rem; }

/* El selector de sociedad del portal, cuando son demasiadas para solapas. */
.filtro-sociedad { margin-bottom: 1.25rem; }
.filtro-sociedad select {
  width: min(28rem, 100%); padding: .55rem .7rem; font: inherit;
  border: 1px solid var(--borde); border-radius: .5rem; background: #fff;
}

/* El boton de la calculadora, en el portal: distinto de las descargas. */
/* El boton de la calculadora va a la altura de los filtros, a la derecha. */
.filtro-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.filtro-cabecera .boton-rentabilidad { margin-top: 0; background: var(--azul); color: #fff; border-color: var(--azul); font-size: 1rem; font-weight: 500; padding: .75rem 1.4rem; border-radius: 10px; }
.filtro-cabecera .boton-rentabilidad:hover:not(:disabled) { background: #0A2640; }

/* --- el reporte por casa: que entre en la pantalla, con zoom para acercarse.
   Solo en computadora; en celular queda la tabla como estaba. --- */
.zoom-barra { display: none; }
@media (min-width: 900px) {
  .zoom-barra { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; margin: 0 0 .5rem; }
  .zoom-rotulo { font-size: .8rem; color: var(--text-secondary, #5a6470); margin-right: .2rem; }
  .zoom-actual { min-width: 4.2rem; text-align: center; font-size: .85rem; font-weight: 500; }
  .zoom-boton {
    font: inherit; font-size: .9rem; min-width: 2.2rem; height: 2rem; padding: 0 .6rem;
    border-radius: 8px; border: 1px solid var(--borde); background: #fff; color: var(--tinta); cursor: pointer;
  }
  .zoom-boton:hover:not(:disabled) { background: #f3f4f6; }
  .zoom-boton:disabled { opacity: .4; cursor: not-allowed; }
  .casas-zoom .scroll-x table { font-size: calc(13px * var(--escala, 1)); }
  .casas-zoom .scroll-x th,
  .casas-zoom .scroll-x td { padding: calc(4px * var(--escala, 1)) calc(5px * var(--escala, 1)); }
  .casas-zoom:not(.ajustado) .scroll-x table {
    width: calc(100% * var(--escala, 1)); min-width: calc(100% * var(--escala, 1));
  }
  .casas-zoom.ajustado .scroll-x table { width: 100%; table-layout: fixed; }
  .casas-zoom.ajustado .scroll-x thead th { width: auto; white-space: normal; line-height: 1.2; }
  .casas-zoom.ajustado .scroll-x thead th:first-child { width: 24%; }
}

.admin-clave { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--borde); }
.admin-clave .admin-alta input { flex: 1 1 12rem; }