/* ============================================================================
   Liquidaria — Hoja de estilos principal
   Sistema de gestión de consorcios y liquidación de expensas (CABA, Ley 941)

   Identidad visual alineada al prototipo original («Consorcia»): header
   superior claro con logo+marca, barra lateral BLANCA con navegación
   agrupada por secciones e íconos, tarjetas con datos en IBM Plex Mono,
   colores de estado (éxito/alerta/peligro) y tipografía IBM Plex
   (Sans para UI, Serif para la marca y el documento legal, Mono para
   cifras y contadores). Sin CDNs: se declara la familia preferida con
   degradado a fuentes del sistema si IBM Plex no está instalada.

   Convención de nombres: clases en español.
   ========================================================================== */

/* ── Tipografía autohospedada (IBM Plex) ──────────────────────────────────── */
/* Los archivos .woff2 se sirven desde el propio dominio: sin CDNs ni pedidos a
   terceros. Es el subset LATINO (U+0000–00FF más puntuación general), que
   alcanza para el español —incluye á é í ó ú ñ ü « » ° § y el guion largo—.
   IBM Plex Sans es una fuente VARIABLE: un solo archivo cubre los pesos
   100–700, por eso se declara con rango de font-weight. */

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-var.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-serif-600.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ── Variables de diseño ──────────────────────────────────────────────────── */

:root {
    /* Paleta institucional */
    --color-primario:        #123a5e;
    --color-primario-hover:  #0c2942;
    --color-oscuro:          #0c2942;
    --color-fondo:           #eceee9;
    --color-superficie:      #ffffff;
    --color-borde:           #e6e3db;
    --color-borde-suave:     #eef0ec;
    --color-acento-legal:    #8a6a1f;

    /* Estados (calcados del prototipo) */
    --color-exito:           #1f7a4d;
    --color-exito-texto:     #1f6b43;
    --color-alerta:          #b0791b;
    --color-alerta-texto:    #8a6410;
    --color-peligro:         #b3261e;
    --color-peligro-texto:   #a02d22;
    --color-peligro-hover:   #96201a;

    /* Texto */
    --texto-principal:       #16202b;
    --texto-secundario:      #5f6b76;
    --texto-terciario:       #7a8590;
    --texto-tenue:           #a2a89f;
    --texto-invertido:       #ffffff;
    --texto-invertido-suave: #c7d3dd;

    /* Fondos derivados (tintes suaves para badges, alertas, chips) */
    --tinte-exito:           #e5f1ea;
    --tinte-alerta:          #f6edd6;
    --tinte-peligro:         #fbe7e4;
    --tinte-info:            #e9eff5;

    /* Métricas */
    --radio:                 14px;
    --radio-chico:           9px;
    --radio-grande:          16px;
    --sombra-tarjeta:        0 1px 2px rgba(16, 32, 46, 0.04);
    --sombra-flotante:       0 12px 32px rgba(16, 32, 46, 0.16);
    --ancho-lateral:         252px;
    --alto-header:           58px;
    --ancho-maximo:          1240px;
    /* Ancho máximo del «shell» (barra lateral + contenido). El header usa el
       mismo valor para alinear su contenido con el cuerpo en monitores
       anchos; si se cambia uno hay que cambiar el otro, por eso es variable. */
    --ancho-shell:           1600px;

    /* Tipografía: preferencia IBM Plex, degradado a fuentes del sistema */
    --fuente-ui:    'IBM Plex Sans', system-ui, -apple-system, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-serif: 'IBM Plex Serif', Georgia, "Times New Roman", Times, serif;
    --fuente-mono:  'IBM Plex Mono', ui-monospace, "Cascadia Mono", Consolas,
                    Menlo, monospace;
}

/* ── Reset mínimo y base ──────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fuente-ui);
    font-size: 15px;
    line-height: 1.55;
    color: var(--texto-principal);
    background-color: var(--color-fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 0.5rem;
    line-height: 1.25;
    color: var(--texto-principal);
    font-weight: 650;
}

h1 { font-size: 1.5rem; letter-spacing: -0.015em; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }

p {
    margin: 0 0 0.75rem;
}

a {
    color: var(--color-primario);
    text-decoration: none;
}

a:hover {
    color: var(--color-primario-hover);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-borde);
    margin: 1.25rem 0;
}

code {
    font-family: var(--fuente-mono);
    font-size: 0.85em;
    background: var(--tinte-info);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

button {
    font-family: inherit;
}

input, select, textarea {
    font-family: inherit;
}

/* <details>/<summary> usado como panel plegable (p.ej. "Nuevo reclamo"):
   se le quita el marcador nativo para que el summary pueda estilizarse
   como un botón (.btn) sin el triángulo de disclosure del navegador. */
summary {
    list-style: none;
    cursor: pointer;
}

summary::-webkit-details-marker,
summary::marker {
    display: none;
    content: "";
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #cdd2cc;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes pulso {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.animado {
    animation: fadeUp 0.3s ease both;
}

/* ── Header superior (marca, selector de edificio, usuario) ──────────────── */

.encabezado-app {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    /* El header ocupa todo el ancho de la ventana (para que la línea inferior
       y el fondo lleguen a los bordes), pero su CONTENIDO se alinea con el
       shell centrado de abajo. Sin esto, en un monitor de 2200px el logo
       quedaba a 26px del borde mientras la barra lateral empezaba a 295px:
       casi 270px de desalineación. El max() elige el padding normal en
       pantallas chicas y el centrado en las grandes. */
    padding: 0 max(clamp(14px, 3vw, 26px), calc((100% - var(--ancho-shell)) / 2));
    min-height: var(--alto-header);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-borde);
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    text-decoration: none;
    color: inherit;
}

.marca:hover {
    text-decoration: none;
}

.marca-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--color-primario);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(18, 58, 94, 0.28);
    flex: none;
}

.marca-texto {
    line-height: 1.05;
}

.marca-enlace {
    display: block;
    font-family: var(--fuente-serif);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--texto-principal);
}

.marca-bajada {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--texto-tenue);
    text-transform: uppercase;
    margin-top: 2px;
}

.encabezado-app-derecha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 0;
}

/* Selector de edificio activo (multi-consorcio) — select nativo estilizado */
.selector-edificio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 6px 10px 6px 12px;
    color: var(--texto-secundario);
}

.selector-edificio select {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-principal);
    outline: none;
    max-width: 210px;
    cursor: pointer;
}

.badge-uf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tinte-info);
    border: 1px solid #d5e0ea;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-primario);
}

.usuario-sesion {
    display: flex;
    align-items: center;
    gap: 9px;
}

.usuario-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primario);
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    flex: none;
}

.usuario-datos {
    line-height: 1.2;
}

.usuario-nombre {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--texto-principal);
}

.usuario-rol {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--texto-terciario);
    text-transform: capitalize;
}

.formulario-logout {
    margin: 0;
}

.btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--color-borde);
    background: #ffffff;
    color: var(--texto-secundario);
    cursor: pointer;
}

.btn-icono:hover {
    background: var(--color-fondo);
}

/* ── Cuerpo: barra lateral + contenido ─────────────────────────────────────── */

.cuerpo-app {
    display: flex;
    align-items: flex-start;
    max-width: var(--ancho-shell);
    margin: 0 auto;
}

.barra-lateral {
    position: sticky;
    top: var(--alto-header);
    align-self: flex-start;
    width: var(--ancho-lateral);
    flex: 0 0 var(--ancho-lateral);
    height: calc(100vh - var(--alto-header));
    background: #ffffff;
    border-right: 1px solid var(--color-borde);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.navegacion {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 14px 12px;
    flex: 1;
}

.navegacion-etiqueta {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    padding: 14px 12px 5px;
}

.navegacion-etiqueta:first-child {
    padding-top: 2px;
}

.navegacion-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.navegacion-enlace {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--radio-chico);
    color: var(--texto-secundario);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.navegacion-enlace:hover {
    background: #f0f2ee;
    color: var(--texto-principal);
    text-decoration: none;
}

.navegacion-enlace.activo {
    background: var(--tinte-info);
    color: var(--color-primario);
    font-weight: 600;
}

.navegacion-enlace svg {
    flex: none;
}

.navegacion-badge {
    margin-left: auto;
    background: var(--color-alerta);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
    font-family: var(--fuente-mono);
}

.navegacion-badge-info {
    background: var(--color-primario);
}

/* Tarjeta promocional al pie de la barra lateral (solo escritorio) */
.promo-legal {
    margin: auto 12px 14px;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(160deg, var(--color-primario), var(--color-oscuro));
    color: #ffffff;
}

.promo-legal-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    opacity: 0.85;
}

.promo-legal-texto {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 7px;
    opacity: 0.9;
}

/* ── Contenido principal ──────────────────────────────────────────────────── */

.zona-principal {
    flex: 1;
    min-width: 0;
    padding: clamp(16px, 2.6vw, 30px);
}

.contenedor {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
}

.contenedor-angosto {
    max-width: 440px;
    width: 100%;
}

/* Encabezado de página dentro del contenido */
.encabezado-pagina {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.encabezado-pagina p,
.encabezado-pagina .subtitulo {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 0.9rem;
}

.rotulo-superior {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-acento-legal);
    display: block;
    margin-bottom: 7px;
}

/* Título de página/tarjeta con ícono a la izquierda (unidades, personal,
   consorcios) — reutiliza el chip .fila-clicable-icono como avatar. */
.titulo-con-icono {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */

.tarjeta {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-tarjeta);
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.25rem;
}

.tarjeta > h2:first-child,
.tarjeta > h3:first-child {
    margin-top: 0;
}

.tarjeta-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.tarjeta-encabezado h2,
.tarjeta-encabezado h3 {
    margin: 0;
}

/* Ícono inline delante de un título de tarjeta (h2/h3), calcado del uso de
   svg+texto del prototipo. Basta con anteponer icono() dentro del heading. */
h2 svg,
h3 svg {
    vertical-align: -3px;
    margin-right: 7px;
    flex: none;
}

.tarjeta-destacada {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 1px var(--color-primario), var(--sombra-tarjeta);
}

.tarjeta-lateral {
    background: var(--tinte-info);
}

.tarjeta-error {
    text-align: center;
    padding: 2.5rem 2rem;
}

.tarjeta-acciones {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.tarjeta-login .tarjeta-titulo {
    text-align: center;
    margin-bottom: 1.25rem;
}

/* Tarjeta clicable tipo "fila de lista" (cobranza por edificio, actividad) */
.tarjeta-lista {
    padding: 0;
    overflow: hidden;
}

.tarjeta-lista-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-borde-suave);
}

.tarjeta-lista-cabecera h2 {
    margin: 0;
    font-size: 14.5px;
}

.fila-clicable {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border: 0;
    border-top: 1px solid var(--color-borde-suave);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

.fila-clicable:first-child {
    border-top: 0;
}

.fila-clicable:hover {
    background: #f7f8f4;
    text-decoration: none;
}

.fila-clicable-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex: none;
    overflow: hidden;
}

.fila-clicable-icono-info      { background: var(--tinte-info); color: var(--color-primario); }
.fila-clicable-icono-alerta    { background: var(--tinte-alerta); color: var(--color-alerta-texto); }
.fila-clicable-icono-peligro   { background: var(--tinte-peligro); color: var(--color-peligro-texto); }
.fila-clicable-icono-exito     { background: var(--tinte-exito); color: var(--color-exito-texto); }

/* Variante con texto corto (p.ej. UF) en vez de ícono SVG, en mono */
.fila-clicable-icono-mono {
    font-family: var(--fuente-mono);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    padding: 0 2px;
}

/* display:block es imprescindible: en las vistas estos elementos son <span>
   (para poder anidarlos dentro de <a> o <button>). Sin él, el título y el
   detalle se renderizan en la misma línea, uno pegado al otro. */
.fila-clicable-texto {
    display: block;
    flex: 1;
    min-width: 0;
}

.fila-clicable-titulo {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-principal);
}

.fila-clicable-detalle {
    display: block;
    font-size: 11.5px;
    color: var(--texto-terciario);
    margin-top: 1px;
}

.fila-clicable-flecha {
    flex: none;
    color: #c0c5bf;
}

/* ── KPIs / tarjetas de indicadores ───────────────────────────────────────── */

.grilla-kpi {
    display: grid;
    /* 160px permite que los cuatro indicadores entren en una sola fila
       también en pantallas medianas (~1024px), en vez de dejar uno suelto
       en un segundo renglón. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.kpi {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-tarjeta);
    padding: 17px 18px;
}

.kpi h2 {
    font-size: 12px;
    color: var(--texto-secundario);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    margin: 0;
}

.kpi-valor {
    display: block;
    font-family: var(--fuente-mono);
    font-size: 27px;
    font-weight: 600;
    color: var(--texto-principal);
    letter-spacing: -0.02em;
    margin: 6px 0 4px;
    font-variant-numeric: tabular-nums;
    /* Un importe como "$ 3.190.500,00" no debe partirse después del signo
       ni desbordar la tarjeta en pantallas angostas. */
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Los importes son mucho más largos que un porcentaje o un contador, así que
   usan un cuerpo menor para entrar cómodos en la misma tarjeta. */
.kpi-valor-importe {
    font-size: 21px;
    letter-spacing: -0.01em;
}

@media (max-width: 1200px) {
    .kpi-valor { font-size: 23px; }
    .kpi-valor-importe { font-size: 18px; }
}

.kpi .detalle {
    display: block;
    font-size: 11.5px;
    color: var(--texto-terciario);
    margin-top: 0.2rem;
}

.kpi a {
    font-size: 11.5px;
    font-weight: 600;
}

.kpi.kpi-peligro .kpi-valor { color: var(--color-peligro-texto); }
.kpi.kpi-exito   .kpi-valor { color: var(--color-exito-texto); }
.kpi.kpi-alerta  .kpi-valor { color: var(--color-alerta-texto); }
.kpi.kpi-legal   .kpi-valor { color: var(--color-acento-legal); }

/* Barra de progreso fina (recaudación, ocupación) */
/* display:block es necesario porque en las vistas la barra se arma con
   <span> (para poder anidarla dentro de un <button>): sin él quedaría en
   línea y la altura no se aplicaría. */
.barra-progreso {
    display: block;
    height: 6px;
    border-radius: 99px;
    background: #eceee9;
    overflow: hidden;
}

.barra-progreso-relleno {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--color-exito);
}

/* ── Tablas ───────────────────────────────────────────────────────────────── */

.tabla-envoltorio,
.tabla-envoltura {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tabla th,
.tabla td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-borde);
}

.tabla thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-secundario);
    background: var(--color-fondo);
    border-bottom: 2px solid var(--color-borde);
    white-space: nowrap;
}

.tabla tbody tr:nth-child(even) {
    background: #fafaf7;
}

.tabla tbody tr:hover {
    background: var(--tinte-info);
}

.tabla tfoot td {
    font-weight: 700;
    color: var(--texto-principal);
    background: var(--color-fondo);
    border-top: 2px solid var(--color-borde);
    border-bottom: 0;
}

.tabla-fija thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

.tabla .numero,
.tabla .num,
.celda-importe,
.texto-derecha {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--fuente-mono);
    white-space: nowrap;
}

.celda-acciones {
    text-align: right;
    white-space: nowrap;
}

.tabla-titulo {
    display: block;
    caption-side: top;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--texto-secundario);
    padding-bottom: 0.5rem;
}

.fila-total td,
.fila-total th {
    font-weight: 700;
    color: var(--texto-principal);
    background: var(--color-fondo);
    border-top: 2px solid var(--color-borde);
}

.sin-datos {
    text-align: center;
    color: var(--texto-secundario);
    padding: 1.5rem 1rem !important;
    font-style: italic;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-chico);
    background: var(--color-superficie);
    color: var(--texto-principal);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn:hover {
    background: var(--color-fondo);
    text-decoration: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 2px;
}

.btn-primario {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(18, 58, 94, 0.22);
}

.btn-primario:hover {
    background: var(--color-primario-hover);
    border-color: var(--color-primario-hover);
}

.btn-peligro {
    background: var(--color-peligro);
    border-color: var(--color-peligro);
    color: #ffffff;
}

.btn-peligro:hover {
    background: var(--color-peligro-hover);
    border-color: var(--color-peligro-hover);
}

.btn-secundario {
    background: var(--color-superficie);
    border-color: var(--color-borde);
    color: var(--texto-secundario);
}

.btn-secundario:hover {
    background: var(--color-fondo);
    color: var(--texto-principal);
}

.btn-chico {
    padding: 0.28rem 0.65rem;
    font-size: 0.8rem;
}

.btn-bloque {
    display: flex;
    width: 100%;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.acciones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.acciones form {
    display: inline;
    margin: 0;
}

.pestanas {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* ── Badges (estados) — paleta calcada del prototipo ──────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.16rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: var(--tinte-info);
    color: var(--color-primario);
}

.badge-exito {
    background: var(--tinte-exito);
    color: var(--color-exito-texto);
}

.badge-alerta {
    background: var(--tinte-alerta);
    color: var(--color-alerta-texto);
}

.badge-peligro {
    background: var(--tinte-peligro);
    color: var(--color-peligro-texto);
}

/* Estados de la expensa / pago (badge-<?= $estado ?> generado dinámicamente) */
.badge-pendiente,
.badge-parcial {
    background: var(--tinte-alerta);
    color: var(--color-alerta-texto);
}

.badge-pagada,
.badge-aprobado {
    background: var(--tinte-exito);
    color: var(--color-exito-texto);
}

.badge-vencida,
.badge-rechazado {
    background: var(--tinte-peligro);
    color: var(--color-peligro-texto);
}

/* ── Formularios ──────────────────────────────────────────────────────────── */

.formulario {
    max-width: 640px;
}

.formulario-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 1.25rem;
}

.grilla {
    display: grid;
    gap: 1.25rem;
}

.grilla-dos {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
}

/* Colapsa a una columna en 1150px, no en 900px.
   El ancho útil NO es el de la ventana: hay que descontarle la barra lateral
   (252px) más los márgenes. A 950px de ventana el contenido queda en 639px y
   la columna derecha en 238px, con apenas 128px para el texto — las tarjetas
   de «Requiere tu atención» se partían en varias líneas. Por debajo de
   1150px conviene una sola columna a ancho completo. */
@media (max-width: 1150px) {
    .grilla-dos {
        grid-template-columns: 1fr;
    }
}

.campo {
    margin-bottom: 1rem;
}

.campo label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texto-principal);
    margin-bottom: 0.3rem;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="month"],
.campo input[type="file"],
.campo select,
.campo textarea {
    display: block;
    width: 100%;
    padding: 0.5rem 0.7rem;
    font: inherit;
    font-size: 0.92rem;
    color: var(--texto-principal);
    background: var(--color-superficie);
    border: 1px solid #c9cbc2;
    border-radius: var(--radio-chico);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo textarea {
    resize: vertical;
    min-height: 90px;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(18, 58, 94, 0.15);
}

.campo .ayuda {
    display: block;
    font-size: 0.78rem;
    color: var(--texto-secundario);
    margin-top: 0.25rem;
}

.campo.con-error input,
.campo.con-error select,
.campo.con-error textarea {
    border-color: var(--color-peligro);
}

.campo .error {
    display: block;
    font-size: 0.8rem;
    color: var(--color-peligro-texto);
    margin-top: 0.25rem;
}

.lista-errores {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem 0.75rem 2rem;
    background: var(--tinte-peligro);
    border: 1px solid rgba(179, 38, 30, 0.3);
    border-radius: var(--radio-chico);
    color: var(--color-peligro-texto);
    font-size: 0.88rem;
}

.alerta-lista {
    margin: 0.4rem 0 0;
    padding-left: 1.25rem;
}

/* Sistema de campos con clases planas (login, portal/informar_pago) */

.campo-etiqueta {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texto-principal);
    margin-bottom: 0.3rem;
}

.campo-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.7rem;
    font: inherit;
    font-size: 0.92rem;
    color: var(--texto-principal);
    background: var(--color-superficie);
    border: 1px solid #c9cbc2;
    border-radius: var(--radio-chico);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.campo-control {
    resize: vertical;
    min-height: 90px;
}

.campo-control:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(18, 58, 94, 0.15);
}

.campo-con-error .campo-control {
    border-color: var(--color-peligro);
}

.campo-error {
    display: block;
    font-size: 0.8rem;
    color: var(--color-peligro-texto);
    margin-top: 0.25rem;
}

.campo-ayuda {
    display: block;
    font-size: 0.78rem;
    color: var(--texto-secundario);
    margin-top: 0.25rem;
}

.campo-acciones {
    margin-top: 1.5rem;
}

/* ── Alertas (mensajes flash) ─────────────────────────────────────────────── */

/* IMPORTANTE: display es "block", NO "flex".
   En un contenedor flex cada nodo de texto suelto se convierte en un ítem
   independiente, así que una alerta como
       «… se calculan al momento de <strong>emitir</strong>.»
   se partía en tres ítems y el `gap` abría huecos alrededor de «emitir».
   Para el caso puntual de ícono + texto existe .alerta-con-icono. */
.alerta {
    display: block;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radio-chico);
    border: 1px solid var(--color-borde);
    background: var(--tinte-info);
    color: var(--texto-principal);
    font-size: 0.92rem;
}

/* Último párrafo o lista sin margen inferior: evita el hueco sobrante
   cuando la alerta contiene bloques en vez de texto suelto. */
.alerta > p:last-child,
.alerta > ul:last-child {
    margin-bottom: 0;
}

/* Variante para alertas que anteponen un ícono al texto. */
.alerta-con-icono {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.alerta-con-icono > svg {
    flex: none;
    margin-top: 2px;
}

.alerta-exito {
    background: var(--tinte-exito);
    border-color: rgba(31, 122, 77, 0.3);
    color: var(--color-exito-texto);
}

.alerta-error {
    background: var(--tinte-peligro);
    border-color: rgba(179, 38, 30, 0.3);
    color: var(--color-peligro-texto);
}

/* ── Referencias legales (acento dorado) ──────────────────────────────────── */

.nota-legal {
    font-size: 0.8rem;
    color: var(--color-acento-legal);
    border-left: 3px solid var(--color-acento-legal);
    padding: 0.4rem 0 0.4rem 0.75rem;
    margin: 0.75rem 0;
    background: var(--tinte-alerta);
    border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
}

/* ── Página de login ──────────────────────────────────────────────────────── */

.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(18, 58, 94, 0.16), transparent 60%),
        var(--color-fondo);
}

.tarjeta-login {
    width: 100%;
    max-width: 400px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-flotante);
    padding: 2rem 2rem 1.75rem;
}

.tarjeta-login .formulario {
    max-width: none;
}

.marca-centrada {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    margin-bottom: 1.5rem;
}

.marca-centrada .marca-enlace {
    font-size: 1.3rem;
}

/* Pie de página genérico (layout y página de error) */
.pie {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-borde);
}

.pie-leyenda {
    margin: 0;
    font-size: 0.78rem;
    color: var(--texto-secundario);
}

.pie-login {
    margin-top: 1.25rem;
    padding-top: 0;
    border-top: 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--texto-secundario);
}

/* ── Documento de liquidación (modelo «Mis Expensas») ─────────────────────── */

.imprimible {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-tarjeta);
    padding: 2rem 2.25rem;
    max-width: 960px;
    margin: 0 auto 1.5rem;
}

.imprimible h1,
.imprimible h2,
.imprimible h3 {
    font-family: var(--fuente-serif);
    color: var(--texto-principal);
}

.imprimible h1 {
    font-size: 1.5rem;
}

.imprimible h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--color-borde);
    padding-bottom: 0.3rem;
    margin-top: 1.75rem;
}

.imprimible h2 svg {
    flex: none;
    opacity: 0.5;
}

.documento-encabezado {
    border-bottom: 3px double var(--color-oscuro);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}

.documento-pie {
    border-top: 2px solid var(--color-borde);
    margin-top: 1.75rem;
    padding-top: 0.75rem;
    text-align: center;
}

.leyenda-normativa {
    font-size: 0.75rem;
    color: var(--color-acento-legal);
    border: 1px solid rgba(138, 106, 31, 0.35);
    border-radius: var(--radio-chico);
    background: var(--tinte-alerta);
    padding: 0.5rem 0.75rem;
    margin: 1rem 0;
    text-align: center;
}

.lista-datos {
    display: grid;
    grid-template-columns: minmax(180px, 320px) 1fr;
    gap: 0.3rem 1rem;
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
}

.lista-datos dt {
    font-weight: 600;
    color: var(--texto-secundario);
}

.lista-datos dd {
    margin: 0;
    color: var(--texto-principal);
}

@media (max-width: 600px) {
    .lista-datos {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .lista-datos dd {
        margin-bottom: 0.5rem;
    }
}

.lista-datos-horizontal {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.3rem;
}

.lista-datos-horizontal dt {
    font-weight: 600;
    color: var(--texto-secundario);
}

.lista-datos-horizontal dt::after {
    content: ":";
}

.lista-datos-horizontal dd {
    margin: 0 1.5rem 0 0;
    color: var(--texto-principal);
}

.dato-cbu {
    font-family: var(--fuente-mono);
    font-size: 0.85rem;
    word-break: break-all;
}

/* Cifra o código breve en línea (UF, CUIT, CUIL, contadores de tarjeta) */
.dato-mono {
    font-family: var(--fuente-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dato-importe {
    font-family: var(--fuente-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--texto-principal);
    font-variant-numeric: tabular-nums;
}

.importe-principal {
    font-size: 1.15rem;
    margin: 0 0 1rem;
}

.importe-principal strong {
    font-family: var(--fuente-mono);
    font-size: 1.3rem;
    color: var(--texto-principal);
    font-variant-numeric: tabular-nums;
}

.acciones-documento {
    max-width: 960px;
    margin: 0 auto 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ── Impresión ────────────────────────────────────────────────────────────── */

/* Hoja A4 vertical con márgenes propios. Sin esto el navegador puede salir
   en horizontal (como pasa por defecto en algunos diálogos de impresión) y el
   documento legal queda desparramado en más páginas de las necesarias.
   NOTA: los encabezados/pies que agrega el navegador (fecha, título, URL,
   "1/4") NO se pueden quitar por CSS; para una salida limpia hay que usar el
   botón «Descargar PDF», que genera el documento en el servidor. */
@page {
    size: A4 portrait;
    margin: 14mm 12mm;
}

@media print {
    body {
        background: #ffffff;
        font-size: 10pt;
        color: #000000;
    }

    .encabezado-app,
    .barra-lateral,
    .acciones-documento,
    .alerta,
    .btn,
    .pie,
    .no-imprimir {
        display: none !important;
    }

    /* Sin barra lateral, el cuerpo deja de ser una grilla de dos columnas. */
    .cuerpo-app {
        display: block;
    }

    .zona-principal {
        padding: 0;
    }

    .contenedor {
        max-width: none;
    }

    /* La cabecera de cada tabla se repite al cortar entre páginas. */
    .tabla thead {
        display: table-header-group;
    }

    /* Un título no debe quedar solo al final de una página. */
    .imprimible h1,
    .imprimible h2,
    .imprimible h3 {
        break-after: avoid;
        page-break-after: avoid;
    }

    .imprimible section {
        break-inside: auto;
    }

    .imprimible {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        max-width: none;
        margin: 0;
    }

    .imprimible h2 {
        break-after: avoid;
    }

    .tabla thead th {
        background: #ffffff;
        position: static;
    }

    .tabla tbody tr:nth-child(even),
    .tabla tbody tr:hover {
        background: #ffffff;
    }

    .tabla-envoltorio,
    .tabla-envoltura {
        overflow: visible;
    }

    tr,
    .kpi {
        break-inside: avoid;
    }

    a {
        color: inherit;
        text-decoration: none;
    }
}

/* ── Responsive: < 900px la barra lateral colapsa a barra inferior fija ───── */

@media (max-width: 900px) {
    .cuerpo-app {
        display: block;
        padding-bottom: 74px;
    }

    .barra-lateral {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 50;
        width: 100%;
        height: auto;
        border-right: 0;
        border-top: 1px solid var(--color-borde);
        box-shadow: 0 -2px 14px rgba(16, 32, 46, 0.09);
    }

    .navegacion {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        padding: 8px 10px;
    }

    .navegacion-etiqueta {
        display: none;
    }

    .navegacion-lista {
        flex-direction: row;
        gap: 4px;
    }

    .navegacion-enlace {
        flex-direction: column;
        gap: 3px;
        padding: 6px 10px;
        font-size: 10.5px;
        white-space: nowrap;
        text-align: center;
    }

    .navegacion-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        margin-left: 0;
    }

    .promo-legal {
        display: none;
    }

    .zona-principal {
        padding: 16px 14px 32px;
    }

    .encabezado-app-derecha .selector-edificio span,
    .marca-bajada {
        display: none;
    }

    .usuario-datos {
        display: none;
    }

    .imprimible {
        padding: 1.25rem 1rem;
    }

    .tabla-fija thead th {
        position: static;
    }
}

/* ── Utilidades ───────────────────────────────────────────────────────────── */

.texto-secundario {
    color: var(--texto-secundario);
    font-size: 0.88rem;
}

.texto-centrado {
    text-align: center;
}

.margen-superior {
    margin-top: 1.25rem;
}

.sin-margen {
    margin: 0;
}

.nota {
    font-size: 0.85rem;
    color: var(--texto-secundario);
    margin: 0.75rem 0;
}

.texto-vacio {
    color: var(--texto-secundario);
    font-style: italic;
    padding: 0.5rem 0;
}

.oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pagina-error {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--color-fondo);
    text-align: center;
}

.codigo-error {
    font-size: 4rem;
    font-weight: 800;
    color: var(--color-primario);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.mensaje-error {
    color: var(--texto-secundario);
    margin-bottom: 1.5rem;
}

/* ── v2: Grilla de tarjetas (dashboard y listado de consorcios) ───────────── */

.grilla-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.grilla-tarjetas .tarjeta {
    margin-bottom: 0;
}

.tarjeta-consorcio-activa {
    border-color: var(--color-exito);
    box-shadow: 0 0 0 1px var(--color-exito), var(--sombra-tarjeta);
}

.tarjeta-multiconsorcio {
    padding: 0.75rem 1.4rem;
    background: var(--tinte-info);
}

/* ── v2: Doble aprobación de visibilidad (reclamos → encargado) ───────────── */

.aprobaciones-lista {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 0.9rem;
    padding: 0;
}

.aprobaciones form {
    margin: 0;
}

/* ── v2: Hilo de mensajes de un reclamo ───────────────────────────────────── */

/* Chip cuadrado con la UF en mono (lista de reclamos y encabezado de hilo);
   si el reclamo no tiene UF asociada, se usa con un ícono en vez de texto. */
.avatar-uf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    background: var(--tinte-info);
    color: var(--color-primario);
    font-family: var(--fuente-mono);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 3px;
}

/* Encabezado del hilo: avatar UF + asunto/categoría + badge de estado */
.hilo-encabezado {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hilo-encabezado-texto {
    flex: 1;
    min-width: 0;
}

.hilo-encabezado-titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--texto-principal);
}

.hilo-encabezado-detalle {
    font-size: 12px;
    color: var(--texto-secundario);
    margin-top: 2px;
}

.chat {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.chat-mensaje {
    max-width: 80%;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radio-chico);
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
}

.chat-mensaje p {
    margin: 0;
    font-size: 0.92rem;
}

.chat-mensaje-admin {
    align-self: flex-start;
    background: var(--tinte-info);
    border-color: #d5e0ea;
}

.chat-mensaje-propietario {
    align-self: flex-end;
    background: var(--color-fondo);
}

.chat-autor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}

/* Hora en la esquina inferior de la burbuja, calcada del prototipo */
.chat-hora {
    display: block;
    margin-top: 4px;
    text-align: right;
    font-size: 10.5px;
    color: var(--texto-secundario);
    opacity: 0.75;
}

@media (max-width: 600px) {
    .chat-mensaje {
        max-width: 100%;
    }
}

/* ── v3: Ícono de encabezado de página (chip cuadrado junto al <h1>) ──────── */

.encabezado-pagina-icono {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pagina-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--tinte-info);
    color: var(--color-primario);
    flex: none;
    margin-top: 1px;
}

/* ── v3: Zona de carga de comprobante (input file con vista tipo "dropzone") ── */

.campo-archivo {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px dashed #cdd2cc;
    border-radius: var(--radio-chico);
    padding: 13px 16px;
    background: #f9faf6;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.campo-archivo:hover {
    border-color: var(--color-primario);
    background: var(--tinte-info);
}

.campo-archivo-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-terciario);
    flex: none;
}

.campo-archivo-texto {
    flex: 1;
    min-width: 0;
}

.campo-archivo-titulo {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto-principal);
}

.campo-archivo-ayuda {
    display: block;
    font-size: 11px;
    color: var(--texto-terciario);
    margin-top: 2px;
}

.campo-archivo + input[type="file"] {
    margin-top: 8px;
}

/* ── v4: Panel general — cobranza por edificio y agenda de vencimientos ───── */

/* Título de KPI que lleva un indicador (punto pulsante) al lado */
.kpi-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
}

.punto-pulso {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-alerta);
    animation: pulso 2s infinite;
    flex: none;
}

.detalle-peligro {
    color: var(--color-peligro-texto);
    font-weight: 600;
}

.kpi .barra-progreso {
    margin: 2px 0 7px;
}

/* Fila de edificio: es un <button> dentro de un <form> que activa ese
   consorcio, de modo que se puede cambiar de edificio con un solo clic
   desde el panel (sin JavaScript). */
.tarjeta-lista form {
    margin: 0;
}

.fila-edificio {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border: 0;
    border-top: 1px solid var(--color-borde-suave);
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.14s ease;
}

.fila-edificio:hover {
    background: #f7f8f4;
}

.fila-edificio-activa,
.fila-edificio-activa:hover {
    background: var(--tinte-info);
}

.fila-edificio-sigla {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--tinte-info);
    color: var(--color-primario);
    font-family: var(--fuente-mono);
    font-weight: 600;
    font-size: 12px;
    flex: none;
}

.fila-edificio-activa .fila-edificio-sigla {
    background: var(--color-primario);
    color: #ffffff;
}

.fila-edificio-cuerpo {
    display: block;
    flex: 1;
    min-width: 0;
}

.fila-edificio-titulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.fila-edificio-nombre {
    font-weight: 600;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fila-edificio-pct {
    font-family: var(--fuente-mono);
    font-size: 12.5px;
    font-weight: 600;
    flex: none;
}

.fila-edificio .barra-progreso {
    margin: 6px 0 5px;
}

.fila-edificio-detalle {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: var(--texto-terciario);
}

/* Agenda de próximos vencimientos */
.lista-vencimientos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.lista-vencimientos li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12.5px;
}

.lista-vencimientos-detalle {
    min-width: 0;
    color: var(--texto-principal);
}

.lista-vencimientos-detalle small {
    display: block;
    font-size: 11px;
    color: var(--texto-terciario);
}