/*
 * CorredorPro — hoja de estilos única.
 *
 * Sin paso de compilación a propósito: el proyecto se despliega copiando
 * archivos a un hosting compartido, y un `npm run build` olvidado antes de
 * subir es una página rota en producción. Cuando la interfaz crezca lo
 * suficiente para justificarlo, se pasa a Vite; hoy no lo justifica.
 */

:root {
    color-scheme: light dark;

    --tinta:            #14181f;
    --tinta-suave:      #5a6472;
    --tinta-tenue:      #8b95a3;
    --papel:            #f6f7f9;
    --superficie:       #ffffff;
    --borde:            #e2e6ec;
    --borde-fuerte:     #cdd4de;

    --acento:           #1f5f8b;
    --acento-oscuro:    #17486a;
    --acento-tenue:     #eaf2f8;

    --verde:            #1d6f45;
    --verde-tenue:      #e6f4ec;
    --ambar:            #8a5b00;
    --ambar-tenue:      #fdf2dc;
    --rojo:             #a12b2b;
    --rojo-tenue:       #fbeaea;

    --radio:            6px;
    --sombra:           0 1px 2px rgba(20, 24, 31, .06), 0 1px 3px rgba(20, 24, 31, .04);
}

@media (prefers-color-scheme: dark) {
    :root {
        --tinta:        #e7ebf1;
        --tinta-suave:  #a4aebd;
        --tinta-tenue:  #78828f;
        --papel:        #12151a;
        --superficie:   #1a1e25;
        --borde:        #2a303a;
        --borde-fuerte: #3a424e;

        --acento:       #6aaed6;
        --acento-oscuro:#8cc4e6;
        --acento-tenue: #1b2c38;

        --verde:        #6cc394;
        --verde-tenue:  #16281f;
        --ambar:        #d9a441;
        --ambar-tenue:  #2b2312;
        --rojo:         #e08585;
        --rojo-tenue:   #2b1818;

        --sombra:       0 1px 2px rgba(0, 0, 0, .3);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

/* ── Estructura ──────────────────────────────────────────────────────── */

.barra {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Fila de arriba: marca a la izquierda, sesión a la derecha. */
.barra-interior {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 54px;
}

/* Fila de abajo: el menú, con todo el ancho para él. */
.barra-menu {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    border-top: 1px solid var(--borde);
}

/* El alto lo fijan los atributos width/height del `img`, que el componente
   calcula: así el navegador reserva el espacio exacto antes de bajar el SVG y la
   barra no da un salto al cargar. Poner una medida acá los pisaría y el logotipo
   del login no podría ser más grande que el de la barra. */
.marca { display: inline-flex; align-items: center; flex: none; }
.marca:hover { text-decoration: none; }
.marca img { display: block; max-width: 100%; }

/* Diez ítems no caben con 20px de separación: se aprieta el espaciado y el
   ícono va junto al texto en la misma línea. En pantallas angostas la fila pasa
   a scroll horizontal en vez de partirse en dos, que descolocaba el contenido de
   la página. */
.navegacion {
    display: flex; gap: 2px; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
}
.navegacion::-webkit-scrollbar { display: none; }

.navegacion a {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    color: var(--tinta-suave);
    padding: 9px 10px;
    border-bottom: 2px solid transparent;
    font-size: 13.5px;
}
.navegacion a:hover { color: var(--tinta); text-decoration: none; }
.navegacion a.activo { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }

.icono-nav { display: inline-flex; flex: none; }
.icono-nav svg { width: 16px; height: 16px; }

.sesion { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--tinta-tenue); flex: none; }
.sesion .quien {
    display: flex; flex-direction: column; line-height: 1.25; text-align: right;
    padding: 4px 8px; border-radius: var(--radio); border: 1px solid transparent;
}
.sesion .quien:hover { background: var(--papel); text-decoration: none; border-color: var(--borde); }
.sesion .quien.activo { background: var(--acento-tenue); border-color: var(--acento-tenue); }
.sesion .quien .nombre { color: var(--tinta); font-weight: 550; }
.sesion .quien .secundario { font-size: 11.5px; }

.campana {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radio); color: var(--tinta-suave);
}
.campana:hover { background: var(--papel); color: var(--tinta); text-decoration: none; }
.campana.activo { background: var(--acento-tenue); color: var(--acento); }
.campana .insignia { position: absolute; top: 1px; right: 0; margin: 0; }

.visualmente-oculto {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

main { max-width: 1140px; margin: 0 auto; padding: 28px 20px 64px; }

.cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.015em; font-weight: 620; }
h2 { font-size: 16px; margin: 28px 0 10px; letter-spacing: -.01em; font-weight: 600; }
.subtitulo { color: var(--tinta-suave); font-size: 14px; margin: 0; }

/* ── Tarjetas y tablas ───────────────────────────────────────────────── */

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: 16px; }
.tarjeta-cuerpo { padding: 18px 20px; }

.tabla-envoltorio { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    padding: 11px 16px;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

td { padding: 12px 16px; border-bottom: 1px solid var(--borde); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--papel); }

td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.principal { font-weight: 550; }
.secundario { color: var(--tinta-suave); font-size: 13px; }

/* ── Etiquetas de estado ─────────────────────────────────────────────── */

.marca-estado {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 550;
    white-space: nowrap;
}
.marca-estado.verde { background: var(--verde-tenue); color: var(--verde); }
.marca-estado.ambar { background: var(--ambar-tenue); color: var(--ambar); }
.marca-estado.roja  { background: var(--rojo-tenue);  color: var(--rojo); }
.marca-estado.gris  { background: var(--papel); color: var(--tinta-suave); border: 1px solid var(--borde); }

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

.boton, button.boton {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--radio);
    border: 1px solid var(--borde-fuerte);
    background: var(--superficie);
    color: var(--tinta);
    font-size: 14px;
    font-weight: 550;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}
.boton:hover { text-decoration: none; border-color: var(--tinta-tenue); }

.boton.principal-accion {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
}
.boton.principal-accion:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }

.boton.peligro { color: var(--rojo); border-color: var(--borde-fuerte); }
.boton.peligro:hover { border-color: var(--rojo); }

.boton.menudo { padding: 5px 10px; font-size: 13px; }

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

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

.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rejilla .ancho-completo { grid-column: 1 / -1; }

@media (max-width: 680px) {
    .rejilla { grid-template-columns: 1fr; }
}

.campo { display: flex; flex-direction: column; gap: 5px; }

label { font-size: 13px; font-weight: 550; color: var(--tinta-suave); }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=search], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--tinta);
    font: inherit;
    font-size: 14px;
}

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

textarea { min-height: 76px; resize: vertical; }

.ayuda { font-size: 12px; color: var(--tinta-tenue); }
.error { font-size: 12.5px; color: var(--rojo); }

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

fieldset {
    border: 0;
    border-top: 1px solid var(--borde);
    padding: 20px 0 0;
    margin: 24px 0 0;
}
fieldset legend {
    padding: 0 10px 0 0;
    font-size: 13px;
    font-weight: 620;
    color: var(--tinta);
}

.pie-formulario {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--borde);
}

/* ── Avisos ──────────────────────────────────────────────────────────── */

.aviso {
    padding: 11px 16px;
    border-radius: var(--radio);
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid;
}
.aviso.exito { background: var(--verde-tenue); border-color: var(--verde); color: var(--verde); }
.aviso.error { background: var(--rojo-tenue); border-color: var(--rojo); color: var(--rojo); }

/* ── Listas de datos ─────────────────────────────────────────────────── */

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 24px; }
.datos dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-tenue); margin-bottom: 3px; }
.datos dd { margin: 0; font-size: 14.5px; }

/* ── Resumen de cartera ──────────────────────────────────────────────── */

/* Rejilla y no flex: las cifras ocupan el ancho de la tabla repartido en partes
   iguales, y se acomodan solas al angostarse sin dejar una suelta al final. */
.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.cifra {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 12px 18px;
    min-width: 118px;
}
.cifra .valor { font-size: 22px; font-weight: 620; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cifra .rotulo { font-size: 12px; color: var(--tinta-tenue); }
/* En el teléfono caben dos por fila solo si la tarjeta se achica con ellas: menos
   relleno, ícono más chico y el número a 17 px. Se vio en el móvil con
   «$2.720.000» cortado y «$ 2.480.810» partido en dos líneas. */
@media (max-width: 560px) {
    .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cifra { padding: 10px 12px; min-width: 0; }
    .cifra.con-icono { gap: 8px; }
    .cifra.con-icono > span:last-child { min-width: 0; }
    .cifra .icono { width: 32px; height: 32px; border-radius: 9px; }
    .cifra .icono svg { width: 16px; height: 16px; }
    /* Un monto no se parte nunca: ni en el espacio de «$ 2.480.810» ni entre
       cifras. Si no cabe, la regla de abajo lo pasa a una tarjeta por fila. */
    .cifra .valor { font-size: 17px; display: block; white-space: nowrap; }
    .cifra .rotulo { font-size: 11.5px; }
}
/* Los teléfonos en vertical, con el zoom que Safari le ponga: una por fila, con
   todo el ancho para el número. */
@media (max-width: 440px) {
    .cifras { grid-template-columns: 1fr; }
    .cifra .valor { font-size: 19px; }
    .cifra .icono { width: 36px; height: 36px; }
    .cifra .icono svg { width: 18px; height: 18px; }
}

/* ── Vacíos, búsqueda y paginación ───────────────────────────────────── */

.vacio { padding: 44px 20px; text-align: center; color: var(--tinta-suave); }
.vacio p { margin: 0 0 14px; }

/* El buscador ocupa el ancho que sobra y los filtros lo que necesitan, para que
   la barra llegue al mismo borde que la tabla. */
.busqueda {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.busqueda input[type=search] { flex: 1 1 240px; min-width: 0; }
.busqueda select { flex: 0 1 190px; width: auto; }
.busqueda .boton { flex: none; }

.paginacion { margin-top: 16px; font-size: 14px; }
.paginacion svg { width: 16px; height: 16px; vertical-align: middle; }

/* ── Autenticación ───────────────────────────────────────────────────── */

/* ── Pantallas de acceso ─────────────────────────────────────────────────
   El login, «olvidé mi clave», la elección de contraseña nueva y las páginas
   de error. Todas usan layouts/acceso.

   Llevan la identidad de la página pública y no la de la aplicación: entrar al
   sistema y conocerlo son dos pasos de la misma visita, y el salto entre la
   landing en Poppins y un login con la tipografía del sistema operativo se
   notaba.

   Lo que se toma de la landing es la forma —tipografía, esquinas redondeadas,
   el botón con degradado— y no los colores en duro. Los colores siguen siendo
   los tokens de la aplicación, así que estas pantallas siguen respetando el
   tema claro u oscuro del sistema operativo. La landing no lo hace; estas sí,
   porque el logotipo cambia de variante con el tema y forzar el fondo claro
   dejaría la palabra blanca sobre blanco. */
.pantalla-acceso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--papel);

    /* Los tokens de la landing, redefinidos solo acá dentro. Como las variables
       CSS se heredan, con esto el botón, los enlaces y la retícula del fondo
       toman el azul de la página pública sin tocar una sola regla más — y sin
       que nada de esto se escape a la aplicación.

       El acento de la aplicación es un azul apagado (#1f5f8b) que funciona bien
       ocho horas al día frente a una tabla; el de la marca es más vivo. Cada uno
       en su lugar. */
    --acento:        #087cf0;
    --acento-oscuro: #0866d8;
    --acento-tenue:  #eaf5ff;
    --tinta:         #071c3f;
    --tinta-suave:   #52647e;
    --papel:         #f6f9fd;
}

@media (prefers-color-scheme: dark) {
    /* En oscuro se aclara el azul para que siga leyéndose, y la tinta vuelve a
       la de la aplicación: el azul marino de marca sobre fondo oscuro no se ve.
       Estas pantallas sí respetan el tema, a diferencia de la landing, porque el
       logotipo cambia de variante con él. */
    .pantalla-acceso {
        --acento:        #4aa3ff;
        --acento-oscuro: #1f7fe0;
        --acento-tenue:  #12243a;
        --tinta:         #e7ebf1;
        --tinta-suave:   #a4aebd;
        --papel:         #12151a;
    }
}

/* La retícula tenue del hero de la landing, para que el fondo no sea un plano
   vacío. `fixed` para que no se mueva con el contenido. */
.pantalla-acceso::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: .5;
    background-image:
        linear-gradient(color-mix(in srgb, var(--acento) 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--acento) 6%, transparent) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse at center, #000, transparent 78%);
}

.caja-acceso { position: relative; z-index: 1; width: 100%; max-width: 400px; }
.caja-acceso.centrada { text-align: center; }
.caja-acceso .marca { display: block; margin-bottom: 8px; }
.caja-acceso.centrada .marca { justify-content: center; }
.caja-acceso .subtitulo { margin-bottom: 22px; font-size: 14px; }

.caja-acceso > .tarjeta {
    border-radius: 18px;
    border-color: color-mix(in srgb, var(--borde) 70%, transparent);
    box-shadow: 0 24px 65px rgba(8, 43, 103, .13);
}
.caja-acceso .tarjeta-cuerpo { padding: 26px 24px; }
.caja-acceso h1 { font-size: 22px; letter-spacing: -.5px; }
.caja-acceso .campo + .campo { margin-top: 14px; }
.caja-acceso label { font-size: 13px; font-weight: 600; }
.caja-acceso input { border-radius: 10px; min-height: 44px; }

/* El botón de la landing: degradado, más alto y más redondeado que el de la
   aplicación. Los dos extremos del degradado salen del acento del tema, así
   que también funciona en oscuro. */
.caja-acceso .boton {
    width: 100%;
    margin-top: 20px;
    min-height: 48px;
    border-radius: 12px;
    text-align: center;
    justify-content: center;
    font-weight: 700;
}
.caja-acceso .boton.principal-accion {
    border: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--acento) 88%, white),
        var(--acento-oscuro));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--acento) 22%, transparent);
}
.caja-acceso .boton.principal-accion:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--acento) 30%, transparent);
}

.recordarme { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; }
.recordarme label { font-weight: 400; color: var(--tinta); }

.aviso.atencion { background: var(--ambar-tenue); border-color: var(--ambar); color: var(--ambar); }
.aviso.apagado  { background: var(--papel); border-color: var(--borde-fuerte); color: var(--tinta-suave); }
.aviso ul { margin: 10px 0 0; padding-left: 20px; }
.aviso p  { margin: 8px 0 0; }

tfoot th { border-top: 2px solid var(--borde-fuerte); border-bottom: 0; color: var(--tinta); font-size: 13px; text-transform: none; letter-spacing: 0; }

.nota-al-pie { margin-top: 14px; font-size: 12px; color: var(--tinta-tenue); }
.texto-libre { white-space: pre-line; }
.primero { margin-top: 0; }
.aviso.destacado { background: var(--acento-tenue); border-color: var(--acento); color: var(--tinta); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--papel); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--borde); }
.fila-alerta { display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--borde); }
.fila-alerta:last-child { border-bottom: 0; }
.fila-alerta .cuerpo { flex: 1; min-width: 0; }
.fila-alerta h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.fila-alerta p { margin: 0 0 8px; font-size: 14px; color: var(--tinta-suave); line-height: 1.5; }
.fila-alerta .meta { font-size: 12px; color: var(--tinta-tenue); display: flex; gap: 10px; flex-wrap: wrap; }
.gestionada { opacity: .62; }
.pestanas { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.pestanas a { padding: 6px 12px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta-suave); font-size: 14px; }
.pestanas a:hover { text-decoration: none; color: var(--tinta); }
.pestanas a.activa { background: var(--acento); border-color: var(--acento); color: #fff; }
.insignia { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 650; text-align: center; line-height: 17px; margin-left: 5px; }
.linea-estado { font-size: 12px; color: var(--tinta-tenue); margin: 0 0 18px; }

/* Franja de suplantación: a propósito imposible de ignorar. */
.franja-suplantacion {
    background: var(--rojo);
    color: #fff;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 550;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.franja-suplantacion .boton { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff; }
.franja-suplantacion .boton:hover { background: rgba(255,255,255,.25); border-color: #fff; }

.permisos { display: grid; gap: 10px; margin-top: 4px; }
.permiso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio); }
.permiso input { margin-top: 3px; }
.permiso label { font-weight: 550; color: var(--tinta); font-size: 14px; cursor: pointer; }
.permiso .ayuda { display: block; margin-top: 2px; }

/* ── Botones que tardan ──────────────────────────────────────────────────
   Una consulta a la API de una empresa de servicios puede demorar casi un
   minuto: del otro lado hay un agregador que a su vez consulta al proveedor.
   Sin señal visible, el corredor aprieta, no pasa nada, y aprieta otra vez —
   que además de confundir gasta otra consulta.

   El estado deshabilitado va con la misma pinta que el resto: un botón que se
   ve normal pero no responde es lo que se lee como "está roto". */
.boton[disabled], button.boton[disabled] {
    opacity: .55;
    cursor: not-allowed;
}
.boton[disabled]:hover { border-color: var(--borde-fuerte); }

.boton .girando {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 6px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: girar .7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* Quien pide no animar, no ve animación: el giro es adorno, no información. */
@media (prefers-reduced-motion: reduce) {
    .boton .girando { animation: none; opacity: .6; }
}

.nota-apagada { color: var(--tinta-tenue); font-size: 13px; }

/* ── Cuentas de servicio ─────────────────────────────────────────────────
   Tarjetas y no filas de tabla. Una cuenta de servicio no es un dato de una
   línea: trae estado, monto, vencimiento, cuándo se consultó y dos acciones
   con sus campos. Metido en una tabla, todo eso se apretaba en celdas donde
   nada se leía bien. */

.icono-servicio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: none;
}

.cuenta-servicio {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 10px;
    box-shadow: var(--sombra);
    padding: 16px 18px;
    margin-bottom: 12px;
}
.cuenta-servicio.inactiva { opacity: .6; }

/* Cuatro columnas que se apilan solas: identidad, estado, vencimiento,
   acciones. Sin media queries — el auto-fit hace el trabajo. */
.cuenta-servicio .cuerpo {
    display: grid;
    grid-template-columns: minmax(230px, 1.5fr) minmax(140px, 1fr) minmax(180px, 1.2fr) auto;
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .cuenta-servicio .cuerpo { grid-template-columns: 1fr; }
}

.cuenta-servicio .identidad { display: flex; gap: 12px; align-items: flex-start; }
.cuenta-servicio .identidad .nombre { font-weight: 600; font-size: 15px; }
.cuenta-servicio .identidad .numero { color: var(--tinta-tenue); font-size: 12.5px; margin-top: 2px; }

.cuenta-servicio .monto {
    font-size: 21px;
    font-weight: 640;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
}
.cuenta-servicio .rotulo { font-size: 12px; color: var(--tinta-tenue); }

.cuenta-servicio .acciones-cuenta { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cuenta-servicio .acciones-cuenta .fila { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cuenta-servicio .acciones-cuenta input[type="date"],
.cuenta-servicio .acciones-cuenta input[type="text"] { width: auto; max-width: 150px; font-size: 13px; padding: 6px 9px; }

.cuenta-servicio .pie {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--borde);
    font-size: 13px;
}

/* El aviso de una cuenta que no se pudo verificar. Dice una línea; el detalle
   técnico va plegado, porque sirve para diagnosticar y estorba para trabajar. */
.aviso-cuenta {
    background: var(--ambar-tenue);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--ambar);
    border-radius: var(--radio);
    padding: 9px 12px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--tinta);
}
.aviso-cuenta summary { cursor: pointer; color: var(--acento); font-size: 12.5px; margin-top: 6px; }
.aviso-cuenta .tecnico {
    margin-top: 6px;
    font-size: 12px;
    color: var(--tinta-suave);
    line-height: 1.5;
}

.marca-verificacion { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.marca-verificacion svg { flex: none; }

/* El menú de acciones poco frecuentes. <details> y no JavaScript: son dos
   enlaces, y un menú que necesita script es un menú que no funciona el día que
   el script no carga. */
/* El menú de acciones de una fila.

   Cuadrado de 30px con tres puntos verticales, sin borde hasta que se apunta.
   Antes era una caja con borde permanente y «···» de texto: en una tabla de
   veinticinco filas eso son veinticinco marcos compitiendo con el contenido, y
   los puntos de texto no se alinean igual en cada tipografía. */
.menu-cuenta { position: relative; display: inline-block; }
.menu-cuenta > summary {
    list-style: none;
    cursor: pointer;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radio);
    background: none;
    color: var(--tinta-tenue);
}
.menu-cuenta > summary::-webkit-details-marker { display: none; }
.menu-cuenta > summary:hover { background: var(--papel); color: var(--tinta); }
.menu-cuenta[open] > summary {
    background: var(--papel);
    border-color: var(--borde-fuerte);
    color: var(--tinta);
}
.menu-cuenta > summary svg { display: block; }
.menu-cuenta .opciones {
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 190px;
    margin-top: 6px;
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    box-shadow: 0 6px 20px rgba(20,24,31,.14);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.menu-cuenta .opciones a,
.menu-cuenta .opciones button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: 0;
    background: none;
    border-radius: 5px;
    font: inherit;
    font-size: 13.5px;
    color: var(--tinta);
    cursor: pointer;
}
.menu-cuenta .opciones a:hover,
.menu-cuenta .opciones button:hover { background: var(--papel); text-decoration: none; }
.menu-cuenta .opciones button.peligro { color: var(--rojo); }

/* Migas: dicen dónde está uno y dan la vuelta atrás. Importan desde que las
   cuentas de servicio tienen página propia — sin ellas, volver a la propiedad
   dependía del botón del navegador. */
.migas { display: flex; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-tenue); margin-bottom: 6px; }
.migas span { color: var(--borde-fuerte); }

/* ── Cifras con icono ────────────────────────────────────────────────────
   El icono no decora: en cuatro tarjetas seguidas de números, es lo que
   permite volver a "las morosas" sin releer los cuatro rótulos. */
.cifra.con-icono { display: flex; align-items: center; gap: 12px; }
.cifra .icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 11px;
    flex: none;
}

/* ── Aviso destacado con acción ──────────────────────────────────────────
   El de "la revisión nunca ha corrido" señalaba un problema y no ofrecía
   salida. Con el botón al lado, el aviso se puede resolver desde donde
   aparece. */
.aviso-accion {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--ambar-tenue);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--ambar);
    border-radius: var(--radio);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.aviso-accion.grave { background: var(--rojo-tenue); border-left-color: var(--rojo); }
.aviso-accion .texto { flex: 1 1 320px; }
.aviso-accion .titulo { font-weight: 600; font-size: 14.5px; }
.aviso-accion .detalle { font-size: 13px; color: var(--tinta-suave); margin-top: 2px; }
.aviso-accion .icono { flex: none; color: var(--ambar); }
.aviso-accion.grave .icono { color: var(--rojo); }

/* ── Cabeceras que ordenan ───────────────────────────────────────────────
   Solo en las columnas que se pueden ordenar en la base. Las computadas
   —canon en UF, comisión del mes— habría que traerlas todas para comparar, y
   ordenar solo la página que se ve sería una lista que miente. */
th a.ordena { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
th a.ordena:hover { text-decoration: none; color: var(--acento); }
th a.ordena .flecha { opacity: .35; font-size: 10px; }
th a.ordena.activo .flecha { opacity: 1; color: var(--acento); }

.icono-propiedad {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--acento-tenue); color: var(--acento); flex: none;
}
td .con-icono { display: flex; gap: 10px; align-items: flex-start; }

.pie-tabla {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-top: 12px;
    font-size: 13px; color: var(--tinta-tenue);
}

/* Una cifra que filtra. Es un enlace, así que se puede abrir en otra pestaña y
   volver atrás funciona; el estado vive en la URL como el resto de los filtros. */
a.cifra { text-decoration: none; color: inherit; }
a.cifra:hover { border-color: var(--tinta-tenue); text-decoration: none; }
a.cifra.activa { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
a.cifra.activa .rotulo { color: var(--acento); font-weight: 600; }

/* ── Piezas compartidas de las listas ────────────────────────────────────
   Propietarios, arrendatarios, usuarios y alertas usan el mismo lenguaje:
   avatar con iniciales, contacto con iconos, insignia de conteo y una acción
   por fila. Vivían repetidas en cada vista; acá se definen una vez. */

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    font-size: 12.5px; font-weight: 650; letter-spacing: .02em;
    flex: none;
}
.avatar-acento { background: var(--acento-tenue); color: var(--acento); }
.avatar-verde  { background: var(--verde-tenue);  color: var(--verde); }
.avatar-ambar  { background: var(--ambar-tenue);  color: var(--ambar); }

.contacto { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.contacto > div { display: flex; align-items: center; gap: 7px; }
.contacto svg { color: var(--tinta-tenue); flex: none; }

/* Insignia de conteo. En gris cuando es cero: "0 contratos" no es un dato que
   destacar, es la ausencia de uno. */
.insignia {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; padding: 2px 9px; border-radius: 7px;
    font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
    background: var(--acento-tenue); color: var(--acento);
}
.insignia.vacia { background: var(--papel); color: var(--tinta-tenue); border: 1px solid var(--borde); }

.cifra .icono.tono-acento { background: var(--acento-tenue); color: var(--acento); }
.cifra .icono.tono-verde  { background: var(--verde-tenue);  color: var(--verde); }
.cifra .icono.tono-ambar  { background: var(--ambar-tenue);  color: var(--ambar); }
.cifra .icono.tono-rojo   { background: var(--rojo-tenue);   color: var(--rojo); }

/* La barra de búsqueda va dentro de la tarjeta de la tabla, pegada arriba. */
.tarjeta > .busqueda {
    margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--borde);
}

/* Botón con icono, para las acciones de fila. */
.boton .icono-linea { vertical-align: -2px; margin-right: 5px; }

/* Una barra de progreso para los permisos. El número solo —"4 de 8"— obliga a
   dividir mentalmente; la barra dice de un vistazo si es casi todo o casi nada. */
.barra-progreso {
    height: 6px; border-radius: 99px; background: var(--borde);
    overflow: hidden; margin: 5px 0; max-width: 190px;
}
.barra-progreso > span { display: block; height: 100%; background: var(--acento); }

/* Pestañas de la lista de alertas. */
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; }
.pestanas a {
    padding: 7px 14px; border-radius: var(--radio); font-size: 13.5px; font-weight: 550;
    color: var(--tinta-suave); border: 1px solid transparent;
}
.pestanas a:hover { text-decoration: none; background: var(--papel); }
.pestanas a.activa {
    background: var(--acento-tenue); color: var(--acento);
    border-color: var(--acento-tenue); font-weight: 650;
}
.pestanas .cuenta {
    margin-left: 6px; padding: 0 6px; border-radius: 99px;
    background: var(--rojo); color: #fff; font-size: 11.5px; font-weight: 700;
}

.barra-lista {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid var(--borde);
}
.barra-lista form.busqueda { flex: 1 1 320px; padding: 0; border: 0; margin: 0; }

.nota-pie {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--acento-tenue); border-radius: var(--radio);
    padding: 11px 14px; margin-top: 14px; font-size: 13px; color: var(--tinta-suave);
}
.nota-pie svg { color: var(--acento); flex: none; margin-top: 1px; }

/* ── Centro de alertas ────────────────────────────────────────────────────
   La fila lleva el ícono a la izquierda porque en una lista de treinta lo que
   se recorre primero es el color, no el texto. */
.fila-alerta > .icono {
    flex: none; width: 34px; height: 34px; border-radius: var(--radio);
    display: inline-flex; align-items: center; justify-content: center;
}
.fila-alerta > .icono.tono-gris  { background: var(--papel);       color: var(--tinta-tenue); }
.fila-alerta > .icono.tono-verde { background: var(--verde-tenue); color: var(--verde); }
.fila-alerta > .icono.tono-ambar { background: var(--ambar-tenue); color: var(--ambar); }
.fila-alerta > .icono.tono-rojo  { background: var(--rojo-tenue);  color: var(--rojo); }

.titulo-alerta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
.titulo-alerta a { font-size: 15px; font-weight: 600; color: var(--tinta); }
.fila-alerta .meta a { color: var(--tinta-tenue); text-decoration: underline; }
.fila-alerta .meta a:hover { color: var(--acento); }
.fila-alerta .acciones { flex: none; display: flex; align-items: flex-start; gap: 6px; }

/* Un pliegue en línea: "Ver permisos", "Por qué". Es un enlace, no un widget.

   Va con clase y no como `details > summary` a secas. Sin la clase, la regla le
   pegaba también al menú «···» de cada fila de las tablas —que es otro
   `details`— y le metía la flechita encima del botón, que quedaba de dos
   líneas y azul. */
.desplegable > summary {
    cursor: pointer; font-size: 12px; color: var(--acento); margin-top: 4px;
    list-style: none;
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::before { content: '▸ '; }
.desplegable[open] > summary::before { content: '▾ '; }

/* ── Bloques de las pantallas nuevas ─────────────────────────────────── */

.cabecera-bloque {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding: 15px 20px 13px;
}
.cabecera-bloque.con-borde { border-bottom: 1px solid var(--borde); }
.cabecera-bloque h2 { margin: 0; font-size: 15px; font-weight: 600; }
.cabecera-bloque a { font-size: 13px; }

/* Dentro de un cuerpo de tarjeta el margen horizontal ya está puesto: repetirlo
   dejaba el título 20px más adentro que el contenido que encabeza. */
.tarjeta-cuerpo > .cabecera-bloque:first-child { padding: 0 0 12px; }

.dos-columnas {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px; align-items: start;
    margin-top: 16px;
}

/* La regla general `.tarjeta + .tarjeta { margin-top }` también alcanza a las
   tarjetas hermanas dentro de esta rejilla, y ahí sobra: la separación la pone
   el `gap`. Sin esto, la tarjeta de la derecha arrancaba 16px más abajo que la
   de la izquierda y los dos títulos no quedaban a la misma altura. */
.dos-columnas > .tarjeta { margin-top: 0; }

/* Y la que venga después de la rejilla necesita su aire: el selector hermano
   adyacente no cruza el contenedor. */
.dos-columnas + .tarjeta,
.dos-columnas + .dos-columnas { margin-top: 16px; }

.enlace-tarjeta { display: block; color: inherit; }
.enlace-tarjeta:hover { text-decoration: none; border-color: var(--acento); }
.enlace-tarjeta h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--tinta); }

/* La cobranza del mes: una barra y cuatro cifras debajo. */
.barra-cobranza {
    height: 10px; border-radius: 999px; background: var(--papel);
    overflow: hidden; border: 1px solid var(--borde); margin: 4px 0 14px;
}
.barra-cobranza > span { display: block; height: 100%; background: var(--verde); }

.reparto { display: flex; gap: 28px; flex-wrap: wrap; }
.reparto > div { display: flex; flex-direction: column; gap: 2px; }
.reparto .valor { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.reparto .rotulo { font-size: 12px; color: var(--tinta-tenue); }

/* Una fila de las listas del panel: el texto a la izquierda, la marca de estado
   al costado derecho y el detalle debajo del texto.

   Era flex con wrap: con una dirección larga la marca se quedaba sola en su
   línea. Con la marca a la izquierda tampoco servía —cada fila es su propia
   rejilla, así que el ancho de la marca lo fijaba su texto y los títulos
   arrancaban en tres equis distintas, "Cuenta con deuda" contra "Cuenta sin
   verificar"—. Con la marca a la derecha, todos los títulos alinean.

   La ubicación de cada parte es explícita para no depender del orden en que
   estén escritas en la plantilla. */
.barra-lista.compacta {
    display: grid; grid-template-columns: 1fr auto;
    align-items: baseline; gap: 3px 12px;
    padding: 11px 20px; border-bottom: 1px solid var(--borde); border-top: 0;
}
.barra-lista.compacta:last-child { border-bottom: 0; }
.barra-lista.compacta > .principal  { grid-area: 1 / 1; min-width: 0; }
.barra-lista.compacta > .secundario { grid-area: 2 / 1; font-size: 12px; }
.barra-lista.compacta > .marca-estado {
    grid-area: 1 / 2; justify-self: end; white-space: nowrap;
}

/* Aire abajo cuando la lista es lo último de la tarjeta: sin esto la última
   fila queda pegada al borde. */
.tarjeta > .barra-lista.compacta:last-child { padding-bottom: 14px; }

/* Un documento de la ficha del contrato: texto a la izquierda, acción a la
   derecha. No usa la rejilla de arriba porque acá lo que va al costado es un
   botón y no una marca. */
.fila-documento {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 11px 20px; border-bottom: 1px solid var(--borde);
}
.fila-documento:last-of-type { border-bottom: 0; }
.fila-documento .secundario { font-size: 12px; }

.navegador-mes {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-bottom: 16px; font-size: 15px;
}
.boton.deshabilitado { opacity: .45; pointer-events: none; }

/* Cobranza: cada deudor es un bloque con su total a la derecha. */
.deudor { border-bottom: 1px solid var(--borde); }
.deudor:last-child { border-bottom: 0; }
.deudor-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; padding: 14px 20px 10px;
}
.deudor-total { text-align: right; }
.deudor-total .valor { display: block; font-size: 19px; font-weight: 650; color: var(--rojo); }
.deudor-total .rotulo { font-size: 12px; color: var(--tinta-tenue); }

/* Gráficos, dibujados en el servidor. */
.grafico svg { width: 100%; height: auto; display: block; }
.leyenda {
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
    margin-top: 10px; font-size: 12px; color: var(--tinta-suave);
}
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }

.fila-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.fila-barra .etiqueta { flex: 0 0 130px; color: var(--tinta-suave); }
.fila-barra .riel { flex: 1; height: 8px; border-radius: 999px; background: var(--papel); border: 1px solid var(--borde); overflow: hidden; }
.fila-barra .riel > span { display: block; height: 100%; background: var(--acento); }
.fila-barra .numero { flex: 0 0 34px; text-align: right; font-weight: 600; }

/* Chips de documento en la lista de contratos. */
.chip-documento {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; margin: 0 4px 4px 0; border-radius: 999px;
    border: 1px solid var(--borde); background: var(--papel);
    font-size: 12px; color: var(--tinta-suave);
}
.chip-documento:hover { text-decoration: none; border-color: var(--acento); color: var(--acento); }

/* Una lista de dato y valor. Se usa donde hay que mostrar algo que no se edita:
   el rol de la cuenta propia, o los parámetros de operación para quien no puede
   cambiarlos.

   Estaba usada en la pantalla de configuración desde antes de existir: solo la
   ve un colaborador, así que el `dl` sin estilo no lo notó nadie. */
.ficha { margin: 0; display: grid; gap: 12px; }
.ficha > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: baseline; }
.ficha dt { font-size: 12.5px; color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .04em; }
.ficha dd { margin: 0; font-size: 14px; }
.ficha dd .ayuda { margin-top: 3px; }

@media (max-width: 560px) {
    .ficha > div { grid-template-columns: 1fr; gap: 2px; }
}

.con-sufijo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.con-sufijo input { width: 110px; }
.con-sufijo .sufijo { font-size: 13px; color: var(--tinta-tenue); }

/* ── Modal ───────────────────────────────────────────────────────────── */

.modal {
    width: min(960px, 92vw); max-height: 88vh; padding: 0;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra);
}
.modal.angosto { width: min(520px, 92vw); }
.modal::backdrop { background: rgba(20, 24, 31, .55); }

.modal-cabecera {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--borde);
}
.modal-cabecera > div { display: flex; gap: 6px; }
.modal-cuerpo { padding: 16px; overflow: auto; }
.modal-pie { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--borde); }

/* El visor ocupa lo que queda: un contrato de ocho páginas se lee dentro del
   modal en vez de obligar a descargarlo. */
.modal-cuerpo iframe {
    width: 100%; height: min(68vh, 720px); border: 1px solid var(--borde);
    border-radius: var(--radio); background: var(--papel);
}

/* ── El logo de la corredora, junto al de Nuvaki ──────────────────────
   Se le pone un alto fijo y ancho automático: los logos llegan en
   proporciones cualesquiera, y limitar solo el ancho deja uno vertical
   estirando la barra hacia abajo. El separador es una línea y no un punto
   porque son dos marcas distintas, no una lista. */
.marca-cliente {
    display: inline-block;
    width: 1px;
    height: 22px;
    margin: 0 12px;
    background: var(--borde);
    vertical-align: middle;
}

.logo-cliente {
    height: 26px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    vertical-align: middle;
}

@media (max-width: 640px) {
    /* En un teléfono la barra no alcanza para dos marcas. Se queda la
       nuestra, que es la que lleva a Inicio. */
    .marca-cliente,
    .logo-cliente { display: none; }
}

/* ── Pantalla suelta, para mirar dentro de un modal ───────────────────
   Las usa `layouts.documento`: la misma pantalla se abre embebida en un
   iframe y también sola en una pestaña, así que necesita su propio ancho y
   su propio aire en vez de heredarlos del contenedor de la aplicación. */
.documento-suelto {
    margin: 0;
    background: var(--papel);
}

.documento-suelto-interior {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 20px 32px;
}

/* Dentro del modal el título no compite con el de la cabecera del modal. */
.documento-suelto .cabecera h1 { font-size: 19px; }

/* ── Portal · Mi arriendo ────────────────────────────────────────────────────
   La propiedad arriba, lo que hay que pagar en una tarjeta destacada con el
   monto grande y el botón, y dos columnas con lo demás. Diseño pedido por el
   solicitante el 07-09-2026. */
body.portal main { max-width: 1140px; }
.pa-cabecera { display: flex; align-items: center; gap: 18px; }
.pa-cabecera h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.3px; }
.pa-icono { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: var(--acento-tenue); color: var(--acento); }
.pa-icono svg { width: 26px; height: 26px; }
.pa-icono.ambar { background: #fbe8c3; color: var(--ambar); }
.pa-icono.chico { width: 40px; height: 40px; border-radius: 10px; }
.pa-icono.chico svg { width: 20px; height: 20px; }
.pa-cobro { margin-bottom: 18px; border: 1px solid #e9c97a; border-radius: var(--radio); background: var(--ambar-tenue); box-shadow: var(--sombra); }
.pa-cobro.vencido { border-color: #e3a3a3; background: var(--rojo-tenue); }
.pa-cobro.vencido .pa-icono.ambar { background: #f6d0d0; color: var(--rojo); }
.pa-cobro-fila { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 28px; align-items: center; padding: 22px 26px; }
.pa-cobro-dato { display: flex; align-items: center; gap: 16px; }
.pa-cobro-dato small { display: block; color: var(--tinta-suave); font-size: 13px; }
.pa-cobro-dato .titulo { margin-bottom: 2px; font-size: 15px; font-weight: 600; }
.pa-cobro-dato .monto { font-size: 34px; font-weight: 700; letter-spacing: -.8px; line-height: 1.05; }
.pa-cobro-dato .fecha { font-size: 19px; font-weight: 600; }
.pa-cobro .separador { width: 1px; height: 58px; background: #e3d3ac; }
.pa-cobro.vencido .separador { background: #e8bcbc; }
.pa-cobro-meses { border-top: 1px solid #eadcbd; }
.pa-cobro.vencido .pa-cobro-meses { border-color: #efcaca; }
.pa-cobro-pie { display: flex; align-items: center; gap: 9px; padding: 12px 26px; border-top: 1px solid #eadcbd; color: var(--tinta-suave); font-size: 13px; }
.pa-cobro.vencido .pa-cobro-pie { border-color: #efcaca; }
.pa-pagar.boton.principal-accion { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 10px; font-size: 15px; }
.pa-titulo { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.pa-titulo h2 { margin: 0; font-size: 17px; }
.pa-titulo .derecha { margin-left: auto; color: var(--tinta-tenue); font-size: 12px; }
.pa-sub { margin: 0 0 14px 52px; color: var(--tinta-suave); font-size: 13px; }
.pa-ficha { margin-top: 10px; }
.pa-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; }
.pa-grilla.una { grid-template-columns: 1fr; }
.pa-grilla .tarjeta { margin: 0; }
.pa-cuenta { display: flex; align-items: center; gap: 12px; }
.pa-cuenta .pa-icono { width: 36px; height: 36px; border-radius: 9px; }
.pa-cuenta .pa-icono svg { width: 18px; height: 18px; }
.pa-cuenta small { display: block; color: var(--tinta-tenue); font-size: 12px; }
.pa-pagos td .marca-estado { font-size: 11px; }
.pa-nota { margin: 14px 0 0; color: var(--tinta-suave); font-size: 13px; line-height: 1.6; }
@media (max-width: 860px) {
    .pa-grilla { grid-template-columns: 1fr; }
    .pa-cobro-fila { grid-template-columns: 1fr; gap: 16px; }
    .pa-cobro .separador { display: none; }
    .pa-sub { margin-left: 0; }
}
@media (prefers-color-scheme: dark) {
    .pa-icono.ambar { background: #3a2f12; }
    .pa-cobro { border-color: #5a4a1e; }
    .pa-cobro .separador, .pa-cobro-pie, .pa-cobro-meses { border-color: #4a3d1c; background-color: transparent; }
    .pa-cobro.vencido { border-color: #5a2a2a; }
    .pa-cobro.vencido .pa-icono.ambar { background: #3a1c1c; }
}

/* ── Portal · el pie ─────────────────────────────────────────────────────────
   Alineado con el contenido y no pegado al borde: es el aviso de quién responde
   por los datos, y estaba suelto abajo a la izquierda como si fuera un descuido. */
.pie-portal { max-width: 1140px; margin: 0 auto; padding: 0 20px 40px; }
.pie-portal p { margin: 0; padding-top: 18px; border-top: 1px solid var(--borde); font-size: 13px; line-height: 1.6; }
.pie-portal a { margin-left: 6px; color: var(--acento); font-weight: 600; white-space: nowrap; }

/* ── Configuración ───────────────────────────────────────────────────────
   Un menú lateral con anclas y una tarjeta por bloque, cada una con su ícono
   y una línea que dice para qué sirve. La pantalla tiene siete bloques y sin
   el lateral «¿dónde cambio la cuenta bancaria?» se respondía con scroll. */
.cf-marco { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.cf-contenido { min-width: 0; }

.cf-lateral {
    position: sticky; top: 84px; padding: 16px 10px;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie); box-shadow: var(--sombra);
}
.cf-lateral h2 { margin: 0 8px 10px; font-size: 14px; }
.cf-lateral a {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px;
    color: var(--tinta-suave); font-size: 13.5px;
}
.cf-lateral a svg { width: 17px; height: 17px; flex: none; color: var(--tinta-tenue); }
.cf-lateral a:hover { background: var(--papel); color: var(--tinta); text-decoration: none; }
.cf-lateral a.activa { background: var(--acento-tenue); color: var(--acento); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento); }
.cf-lateral a.activa svg { color: var(--acento); }

/* Que el ancla no quede tapada por la barra fija al saltar. */
.cf-contenido .tarjeta[id] { scroll-margin-top: 84px; }

.cf-cabecera-tarjeta { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.cf-cabecera-tarjeta > div { flex: 1 1 260px; min-width: 0; }
.cf-cabecera-tarjeta .derecha { margin-left: auto; align-self: flex-start; }
.cf-icono {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    background: var(--acento-tenue); color: var(--acento);
}
.cf-icono svg { width: 20px; height: 20px; }
.cf-cabecera-tarjeta h2 { margin: 0; font-size: 18px; letter-spacing: -.2px; }
.cf-cabecera-tarjeta h2 .marca-estado { margin-left: 8px; vertical-align: 2px; }
.cf-cabecera-tarjeta p { margin: 3px 0 0; color: var(--tinta-suave); font-size: 13px; line-height: 1.5; }

.cf-h3 { margin: 0 0 8px; font-size: 14px; }

/* Un parámetro: qué es, cuánto vale, entre qué límites y de dónde sale. */
.cf-param label { display: block; font-weight: 600; font-size: 13.5px; }
.cf-param .que { margin: 2px 0 8px; color: var(--tinta-suave); font-size: 12.5px; line-height: 1.5; }
.cf-param .rango { margin-top: 5px; color: var(--tinta-tenue); font-size: 12px; }
.cf-param .rango .marca-estado { margin-left: 6px; vertical-align: 1px; }
.cf-param .error { display: block; margin-top: 4px; }

.cf-sub { margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--borde); }
.cf-sub h3 { margin: 0; font-size: 15px; }
.cf-sub p { margin: 3px 0 0; color: var(--tinta-suave); font-size: 12.5px; line-height: 1.5; }

/* Un interruptor con su texto: qué prende y qué pasa cuando está prendido. */
.cf-interruptor {
    display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid var(--borde); border-radius: var(--radio); cursor: pointer; font-weight: 400;
}
.cf-interruptor strong { display: block; font-size: 13.5px; color: var(--tinta); }
.cf-interruptor small { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: 12.5px; line-height: 1.5; }
.switch { position: relative; flex: none; width: 40px; height: 22px; margin-top: 2px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--borde-fuerte); transition: background .15s; }
.switch span::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s;
}
.switch input:checked + span { background: var(--acento); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Imagen de marca: la zona entera es la etiqueta del campo de archivo. */
.cf-marca { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; }
.cf-marca h3 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cf-drop {
    display: grid; place-items: center; gap: 6px; padding: 22px 16px; cursor: pointer;
    border: 1.5px dashed var(--borde-fuerte); border-radius: var(--radio); background: var(--papel);
    text-align: center; color: var(--tinta-suave); font-size: 13px; font-weight: 400;
}
.cf-drop:hover { border-color: var(--acento); }
.cf-drop small { color: var(--tinta-tenue); font-size: 12px; line-height: 1.45; }
.cf-drop svg { width: 26px; height: 26px; color: var(--tinta-tenue); }
.cf-drop img { max-height: 70px; max-width: 100%; }
.cf-drop input[type="file"] { width: 100%; font-size: 12.5px; margin-top: 4px; }
.cf-marca .acciones { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.cf-marca-quitar { margin-top: -30px; text-align: right; }

/* Khipu: cuentas y administrador a la izquierda, comisión a la derecha. */
.cf-khipu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.cf-cuenta { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--borde); border-radius: var(--radio); font-size: 13.5px; }
.cf-cuenta.reemplazada { background: var(--papel); }
.cf-cuenta-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-cuenta-cab form { margin-left: auto; }
.cf-cuenta-det { margin-top: 6px; color: var(--tinta-suave); font-size: 12.5px; line-height: 1.55; }
.cf-cuenta-det .marca-estado { margin-top: 4px; }
.cf-tres-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cf-desglose { padding: 12px 14px; border-radius: var(--radio); background: var(--papel); font-size: 13px; }
.cf-desglose > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--tinta-suave); }
.cf-desglose > .titulo { color: var(--tinta); font-weight: 600; margin-bottom: 4px; }
.cf-desglose > .total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--borde); color: var(--tinta); font-weight: 600; }
.cf-desglose > .total.sin-linea { margin-top: 0; padding-top: 2px; border-top: 0; }

/* Una fila plegable con filo: credenciales, cuenta nueva. */
.cf-pliegue { margin-top: 10px; }
.cf-pliegue > summary { list-style: none; }
.cf-pliegue > summary::-webkit-details-marker { display: none; }
.cf-fila-accion {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    border: 1px solid var(--borde); border-radius: var(--radio); font-size: 13.5px;
}
.cf-fila-accion:hover { border-color: var(--acento); }
.cf-fila-accion > span:not(.cf-icono):not(.chev) { flex: 1 1 auto; min-width: 0; }
.cf-fila-accion strong { display: block; }
.cf-fila-accion small { display: block; color: var(--tinta-suave); font-size: 12.5px; }
.cf-fila-accion .cf-icono { width: 30px; height: 30px; border-radius: 7px; }
.cf-fila-accion .cf-icono svg { width: 15px; height: 15px; }
.cf-fila-accion .chev { margin-left: auto; color: var(--tinta-tenue); font-size: 20px; line-height: 1; transition: transform .15s; }
.cf-pliegue[open] > .cf-fila-accion { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cf-pliegue[open] > .cf-fila-accion .chev { transform: rotate(90deg); }
.cf-pliegue-cuerpo { padding: 16px 14px; border: 1px solid var(--borde); border-top: 0; border-radius: 0 0 var(--radio) var(--radio); }

/* Referidos: el código y el enlace en una franja. */
.cf-referido { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radio); background: var(--papel); }
.cf-referido .codigo .etiqueta { display: block; font-size: 11.5px; color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .4px; }
.cf-referido .codigo strong { font-size: 1.25em; letter-spacing: .5px; }
.cf-referido .enlace { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: 1 1 320px; max-width: 520px; }
.cf-referido .enlace input { flex: 1 1 auto; min-width: 0; font-size: 13px; }

/* Accesos a otras pantallas. */
.cf-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.cf-accesos .tarjeta { margin-top: 0; }
.cf-accesos .tarjeta-cuerpo { display: flex; gap: 12px; align-items: flex-start; }
.cf-accesos .tarjeta-cuerpo > div { flex: 1 1 auto; min-width: 0; }
.cf-accesos h2 { margin: 0; font-size: 15px; }
.cf-accesos small { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: 12.5px; line-height: 1.45; }
.cf-accesos .chev { margin-left: auto; color: var(--tinta-tenue); align-self: center; font-size: 20px; }
.cf-accesos + .nota-pie { margin-top: 14px; }

@media (max-width: 960px) {
    .cf-marco { grid-template-columns: 1fr; }
    .cf-lateral { position: static; }
    .cf-khipu { grid-template-columns: 1fr; }
    .cf-tres-campos { grid-template-columns: 1fr; }
    .cf-referido .enlace { margin-left: 0; }
}

/* ── Portal del propietario ──────────────────────────────────────────────
   Inicio, liquidaciones, propiedades y mis datos, con el diseño que pidió el
   solicitante el 08-09-2026: tres cifras con ícono arriba, una franja para la
   cuenta bancaria, tablas con columna de estado y fichas con el dato grande.
   `pp-` para no chocar con `pa-`, que es el arriendo del arrendatario. */
.pp-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pp-cabecera .acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.pp-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.pp-cifra {
    display: flex; align-items: center; gap: 16px; padding: 20px 22px; min-width: 0;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra); color: inherit;
}
a.pp-cifra:hover { text-decoration: none; border-color: var(--acento); }
.pp-cifra > div { min-width: 0; }
.pp-cifra .pa-icono { width: 52px; height: 52px; border-radius: 50%; }
.pp-cifra .pa-icono.verde { background: var(--verde-tenue); color: var(--verde); }
.pp-cifra .rotulo { font-size: 14px; color: var(--tinta); }
.pp-cifra .valor { font-size: 24px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pp-cifra .detalle { font-size: 12.5px; color: var(--tinta-suave); }
.pp-cifra .chev { margin-left: auto; color: var(--tinta-tenue); font-size: 22px; }

/* La cuenta bancaria: ámbar mientras falte, blanca cuando está. */
.pp-aviso {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center;
    padding: 18px 24px; margin-bottom: 16px;
    border: 1px solid #e9c97a; border-radius: var(--radio); background: var(--ambar-tenue); box-shadow: var(--sombra);
}
.pp-aviso.ok { border-color: var(--borde); background: var(--superficie); }
.pp-aviso h2 { grid-column: 1 / -1; margin: 0 0 -6px; font-size: 16px; }
.pp-aviso .quien { display: flex; align-items: center; gap: 14px; padding-right: 22px; border-right: 1px solid #e3d3ac; }
.pp-aviso.ok .quien { border-color: var(--borde); }
.pp-aviso .quien strong { display: block; font-size: 15px; }
.pp-aviso .quien .falta { display: flex; align-items: center; gap: 6px; color: var(--ambar); font-weight: 600; font-size: 13.5px; }
.pp-aviso .quien .ok { color: var(--verde); font-weight: 600; font-size: 13.5px; }
.pp-aviso .texto { font-size: 13.5px; }
.pp-aviso .texto small { display: block; color: var(--tinta-suave); font-size: 12.5px; }
.pp-aviso .boton { white-space: nowrap; }

.pp-tabla-tit { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; }
.pp-tabla-tit.sin-relleno { padding: 0 0 14px; }
.pp-tabla-tit h2 { margin: 0; font-size: 17px; }
.pp-tabla-tit a { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pp-tabla-tit .secundario { display: block; margin-top: 2px; }

tr.anulada td, tr.anulada td .principal { color: var(--tinta-tenue); }

.boton.con-icono { display: inline-flex; align-items: center; gap: 7px; }
.boton.con-icono svg { width: 15px; height: 15px; flex: none; }

.pp-resumen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pp-resumen .texto { flex: 1 1 300px; font-size: 13.5px; }
.pp-resumen .texto small { display: block; color: var(--tinta-suave); font-size: 12.5px; }
.pp-resumen .anios { display: flex; gap: 8px; flex-wrap: wrap; }

.pp-nota {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-top: 16px;
    border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie);
    color: var(--tinta-suave); font-size: 13px;
}
.pp-nota svg { flex: none; color: var(--acento); }

/* La ficha de una propiedad. */
.pp-prop-cab { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.pp-prop-cab h2 { margin: 0; font-size: 19px; letter-spacing: -.3px; }
.pp-prop-cab .marca-estado { margin-left: 4px; vertical-align: 3px; }
.pp-prop-cab .derecha { margin-left: auto; color: var(--tinta-suave); font-size: 13px; }
.pp-prop-cuerpo { display: grid; grid-template-columns: 1.7fr 1fr; }
.pp-prop-cuerpo > div { padding: 20px 22px; min-width: 0; }
.pp-prop-cuerpo > div + div { border-left: 1px solid var(--borde); }
.pp-prop-cuerpo h3 { margin: 0 0 8px; font-size: 15px; }
.pp-canon { font-size: 34px; font-weight: 700; letter-spacing: -.8px; line-height: 1.05; color: var(--acento); font-variant-numeric: tabular-nums; }
.pp-canon-rotulo { color: var(--tinta-suave); font-size: 13px; margin-bottom: 14px; }
.pp-datos { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.pp-datos dt { color: var(--tinta-suave); margin: 0; }
.pp-datos dd { margin: 0; }

.pp-linea { margin-top: 18px; }
.pp-linea h4 { margin: 0 0 14px; font-size: 13.5px; }
.pp-linea .riel { position: relative; height: 3px; margin: 0 14px; background: var(--borde); border-radius: 2px; }
.pp-linea .riel .avance { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acento); border-radius: 2px; }
.pp-linea .hito { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--acento); background: var(--superficie); transform: translate(-50%, -50%); }
.pp-linea .hito.hoy { background: var(--acento); }
.pp-linea .hito.fin { border-color: var(--borde-fuerte); }
.pp-linea .rotulos { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; }
.pp-linea .rotulos div { text-align: center; }
.pp-linea .rotulos div:first-child { text-align: left; }
.pp-linea .rotulos div:last-child { text-align: right; }
.pp-linea .rotulos strong { display: block; }
.pp-linea .rotulos small { color: var(--tinta-suave); }

.pp-reajuste { display: flex; gap: 14px; align-items: flex-start; }
.pp-reajuste .fecha { font-size: 28px; font-weight: 700; letter-spacing: -.6px; color: var(--acento); line-height: 1.1; }
.pp-reajuste .como { color: var(--tinta-suave); font-size: 13px; }
.pp-reajuste .aviso-suave { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding: 10px 12px; border-radius: var(--radio); background: var(--acento-tenue); color: var(--acento); font-size: 13px; }
.pp-reajuste .aviso-suave svg { flex: none; }

.pp-servicios-tit { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 20px 8px; border-top: 1px solid var(--borde); }
.pp-servicios-tit h3 { margin: 0; font-size: 15px; }
.pp-servicios-tit span { color: var(--tinta-suave); font-size: 12.5px; }

/* Mis datos. */
.pp-escudo { display: flex; align-items: center; gap: 22px; padding: 22px 24px; }
.pp-escudo .pa-icono { width: 72px; height: 72px; border-radius: 50%; }
.pp-escudo .pa-icono svg { width: 34px; height: 34px; }
.pp-escudo > div { min-width: 0; }
.pp-escudo h2 { margin: 0 0 4px; font-size: 20px; }
.pp-escudo p { margin: 0; color: var(--tinta-suave); font-size: 13.5px; line-height: 1.55; }
.pp-escudo .boton { margin-left: auto; white-space: nowrap; }
.pp-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--acento-tenue); color: var(--acento); font-weight: 700; font-size: 13px; flex: none; }
.pp-vinculo { display: flex; align-items: center; gap: 14px; }
.pp-vinculo strong { font-size: 15px; }
.pp-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-tres > div { display: flex; gap: 14px; padding: 6px 18px; min-width: 0; }
.pp-tres > div + div { border-left: 1px solid var(--borde); }
.pp-tres strong { display: block; font-size: 14px; }
.pp-tres small { color: var(--tinta-suave); font-size: 12.5px; line-height: 1.5; }
.pp-contacto { display: flex; align-items: center; gap: 18px; padding: 18px 22px; }
.pp-contacto > div { min-width: 0; }
.pp-contacto strong { display: block; font-size: 15px; }
.pp-contacto small { color: var(--tinta-suave); font-size: 13px; line-height: 1.5; }
.pp-contacto .boton { margin-left: auto; white-space: nowrap; }

@media (max-width: 900px) {
    .pp-cifras { grid-template-columns: 1fr; }
    .pp-aviso { grid-template-columns: 1fr; }
    .pp-aviso .quien { border-right: 0; padding-right: 0; }
    .pp-prop-cuerpo { grid-template-columns: 1fr; }
    .pp-prop-cuerpo > div + div { border-left: 0; border-top: 1px solid var(--borde); }
    .pp-datos { grid-template-columns: auto 1fr; }
    .pp-tres { grid-template-columns: 1fr; }
    .pp-tres > div + div { border-left: 0; border-top: 1px solid var(--borde); padding-top: 14px; }
    .pp-escudo, .pp-contacto { flex-wrap: wrap; }
    .pp-escudo .boton, .pp-contacto .boton { margin-left: 0; }
}

@media (prefers-color-scheme: dark) {
    .pp-aviso { border-color: #5a4a1e; }
    .pp-aviso .quien { border-color: #4a3d1c; }
}

/* ── Plan de cuentas ──────────────────────────────────────────────────────
   Cuelga de Configuración y comparte su lateral. La tabla es de lectura y cada
   fila se abre a edición con «Editar»; el interruptor guarda al soltarlo. */
.pc-titulo { font-size: 17px !important; }
.pc-roles { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.pc-roles .texto { display: flex; gap: 14px; max-width: 300px; }
.pc-roles .texto h2 { margin: 0 0 4px; font-size: 16px; }
.pc-roles .texto p { margin: 0; color: var(--tinta-suave); font-size: 13px; line-height: 1.5; }
.pc-rol { display: grid; grid-template-columns: 210px auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; font-size: 13.5px; }
.pc-rol + .pc-rol { border-top: 1px solid var(--borde); }
.pc-rol .nombre-rol { padding: 8px 12px; border-radius: var(--radio); background: var(--acento-tenue); color: var(--acento); font-weight: 600; font-size: 13px; }
.pc-rol .flecha { color: var(--tinta-tenue); }
.pc-rol code { padding: 5px 9px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--papel); font-size: 13px; }

.pc-barra { display: flex; gap: 10px; align-items: center; padding: 0 20px 14px; flex-wrap: wrap; }
.pc-barra .buscar { position: relative; flex: 1 1 240px; max-width: 340px; }
.pc-barra .buscar svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tinta-tenue); pointer-events: none; }
.pc-barra .buscar input { width: 100%; padding-left: 34px; }
.pc-barra select { min-width: 190px; }
.pc-barra .derecha { margin-left: auto; }

.pc-chip-rol { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--acento-tenue); color: var(--acento); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pc-chip-rol.ninguno { background: var(--papel); color: var(--tinta-tenue); border: 1px solid var(--borde); font-weight: 500; }
.pc-tabla td.acciones { white-space: nowrap; text-align: right; }
.pc-tabla td .switch { display: inline-block; vertical-align: middle; margin: 0; }
.pc-tabla td form { margin: 0; }
tr.pc-edicion td { background: var(--acento-tenue); vertical-align: middle; }
tr.pc-edicion input, tr.pc-edicion select { width: 100%; min-width: 0; }
tr.pc-edicion input.codigo { width: 96px; }
.pc-sin-resultados { padding: 18px 20px; margin: 0; }

.pc-agregar > summary { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; }
.pc-agregar > summary::-webkit-details-marker { display: none; }
.pc-agregar > summary h2 { margin: 0; font-size: 16px; }
.pc-agregar > summary p { margin: 3px 0 0; color: var(--tinta-suave); font-size: 13px; }
.pc-agregar > summary .chev { margin-left: auto; color: var(--tinta-tenue); font-size: 22px; line-height: 1; transition: transform .15s; }
.pc-agregar[open] > summary .chev { transform: rotate(180deg); }
.pc-agregar .cuerpo { padding: 16px 20px 20px; border-top: 1px solid var(--borde); }

.pc-nota { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 18px; border-radius: var(--radio); background: var(--acento-tenue); color: var(--tinta); font-size: 13px; line-height: 1.55; }
.pc-nota svg { flex: none; color: var(--acento); margin-top: 1px; }

@media (max-width: 960px) {
    .pc-roles { grid-template-columns: 1fr; }
    .pc-roles .texto { max-width: none; }
    .pc-rol { grid-template-columns: 1fr; gap: 6px; }
    .pc-rol .flecha { display: none; }
    .pc-barra .derecha { margin-left: 0; }
}

/* ── El área del superadministrador ──────────────────────────────────────
   Sin cartera asumida, el menú tiene tres ítems y va en un lateral oscuro; la
   barra de arriba queda solo con la sesión. Con una cartera asumida se vuelve a
   la barra de la corredora, como siempre: `body.superadmin` lo pone el layout
   solo en el primer caso. En pantallas angostas el lateral vuelve a ser una fila. */
:root { --lateral: #14304f; --lateral-tinta: #c9d6e6; --lateral-activo: #1f5f8b; }
@media (prefers-color-scheme: dark) { :root { --lateral: #0f1f33; --lateral-tinta: #b7c4d6; --lateral-activo: #2b6f9e; } }

body.superadmin { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; align-content: start; }
body.superadmin > .franja-suplantacion { grid-column: 1 / -1; }
body.superadmin .barra { grid-column: 2; position: sticky; top: 0; z-index: 5; }
body.superadmin .barra-interior .marca { visibility: hidden; }
body.superadmin .barra-menu {
    position: fixed; left: 0; top: 0; bottom: 0; width: 220px; z-index: 6;
    background: var(--lateral); border: 0; padding: 18px 12px; overflow-y: auto;
}
body.superadmin .barra-menu .marca { display: block; padding: 4px 8px 22px; }
body.superadmin .barra-menu .marca img { display: block; }
body.superadmin .navegacion { flex-direction: column; gap: 4px; max-width: none; padding: 0; overflow: visible; }
body.superadmin .navegacion a {
    display: flex; gap: 10px; padding: 10px 12px; border-radius: 7px; border-bottom: 0;
    color: var(--lateral-tinta); font-size: 13.5px;
}
body.superadmin .navegacion a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
body.superadmin .navegacion a.activo { background: var(--lateral-activo); color: #fff; font-weight: 600; }
body.superadmin .navegacion .icono-nav svg { width: 17px; height: 17px; }
body.superadmin main { grid-column: 2; max-width: 1140px; width: 100%; }

.sa-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.sa-cifras.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa-cifra {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-width: 0;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra); color: inherit;
}
a.sa-cifra:hover { text-decoration: none; border-color: var(--acento); }
.sa-cifra .pa-icono { width: 46px; height: 46px; border-radius: 50%; }
.sa-cifra .pa-icono.verde { background: var(--verde-tenue); color: var(--verde); }
.sa-cifra .pa-icono.ambar { background: var(--ambar-tenue); color: var(--ambar); }
.sa-cifra .pa-icono.gris { background: var(--papel); color: var(--tinta-suave); }
.sa-cifra .valor { font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.sa-cifra .rotulo { color: var(--tinta-suave); font-size: 13px; }

.sa-barra { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 14px; flex-wrap: wrap; }
.sa-barra .buscar { position: relative; flex: 1 1 260px; max-width: 340px; }
.sa-barra .buscar svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tinta-tenue); pointer-events: none; }
.sa-barra .buscar input { width: 100%; padding-left: 34px; }
.sa-barra .campo { gap: 2px; }
.sa-barra .campo label { font-size: 11.5px; color: var(--tinta-tenue); }
.sa-barra select { min-width: 150px; }
.sa-tabla td.acciones { white-space: nowrap; text-align: right; }
.sa-tabla td .switch { display: inline-block; vertical-align: middle; margin: 0; }
.sa-tabla td form { margin: 0; display: inline-block; vertical-align: middle; }
.sa-sin-resultados { padding: 18px 20px; margin: 0; }

.sa-nota {
    display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 18px;
    border-radius: var(--radio); background: var(--acento-tenue); color: var(--tinta); font-size: 13px; line-height: 1.55;
}
.sa-nota svg { flex: none; color: var(--acento); margin-top: 1px; }

/* El fee: campos a la izquierda, el cobro resultante a la derecha. */
.sa-fee { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.sa-fee .que { margin: 0 0 14px; color: var(--tinta-suave); font-size: 13px; line-height: 1.55; }
.sa-fee .cf-param { margin-bottom: 12px; }
.sa-resultado { padding: 18px 20px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--papel); }
.sa-resultado h3 { margin: 0 0 6px; font-size: 14px; }
.sa-resultado .monto { font-size: 28px; font-weight: 700; letter-spacing: -.6px; line-height: 1.15; }
.sa-resultado .monto small { display: block; font-size: 13px; font-weight: 500; color: var(--tinta-suave); letter-spacing: 0; }
.sa-resultado p { margin: 10px 0 0; color: var(--tinta-suave); font-size: 12.5px; line-height: 1.5; }
.sa-resultado .aviso { margin-top: 14px; font-size: 12.5px; padding: 10px 12px; }
.sa-resultado .boton { display: block; width: 100%; margin-top: 12px; text-align: center; }

.sa-titulo-seccion { margin: 18px 0 10px; font-size: 16px; }
.sa-catalogos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sa-catalogos .tarjeta { margin: 0; }
.sa-catalogos .tarjeta-cuerpo { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.sa-catalogos .cabeza { display: flex; gap: 10px; align-items: flex-start; }
.sa-catalogos .cabeza > div { min-width: 0; }
.sa-catalogos h3 { margin: 0; font-size: 14px; }
.sa-catalogos p { margin: 0; color: var(--tinta-suave); font-size: 12.5px; line-height: 1.5; }
.sa-catalogos .conteo { margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--tinta-suave); }
.sa-catalogos .ir { font-size: 13px; font-weight: 600; color: var(--acento); }

/* Solicitudes: pestañas con contador y buscador, y un vacío que explica. */
.sa-pestanas { display: flex; align-items: center; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.sa-pestanas a { display: inline-flex; align-items: center; gap: 8px; padding: 14px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--tinta-suave); font-size: 13.5px; }
.sa-pestanas a:hover { text-decoration: none; color: var(--tinta); }
.sa-pestanas a.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
.sa-pestanas .conteo { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--papel); border: 1px solid var(--borde); color: var(--tinta-suave); font-size: 11.5px; }
.sa-pestanas a.activa .conteo { background: var(--acento-tenue); border-color: var(--acento-tenue); color: var(--acento); }
.sa-pestanas .buscar { margin-left: auto; position: relative; flex: 0 1 280px; }
.sa-pestanas .buscar svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--tinta-tenue); pointer-events: none; }
.sa-pestanas .buscar input { width: 100%; padding-left: 32px; font-size: 13px; }
.sa-vacio { padding: 44px 20px 30px; text-align: center; }
.sa-vacio .pa-icono { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 16px; }
.sa-vacio .pa-icono svg { width: 30px; height: 30px; }
.sa-vacio h3 { margin: 0 0 6px; font-size: 16px; }
.sa-vacio p { margin: 0 auto 18px; max-width: 420px; color: var(--tinta-suave); font-size: 13.5px; line-height: 1.55; }
.sa-pie-tarjeta { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--borde); color: var(--tinta-tenue); font-size: 12.5px; }
.sa-pie-tarjeta svg { color: var(--tinta-tenue); flex: none; }

@media (max-width: 960px) {
    body.superadmin { display: block; }
    body.superadmin .barra-menu { position: static; width: auto; padding: 8px 12px; }
    body.superadmin .barra-menu .marca { display: none; }
    body.superadmin .navegacion { flex-direction: row; }
    body.superadmin .barra-interior .marca { visibility: visible; }
    .sa-cifras, .sa-cifras.tres, .sa-catalogos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sa-fee { grid-template-columns: 1fr; }
    .sa-pestanas .buscar { margin-left: 0; flex: 1 1 100%; margin-bottom: 10px; }
}
@media (max-width: 560px) {
    .sa-cifras, .sa-cifras.tres, .sa-catalogos { grid-template-columns: 1fr; }
}

/* El pie del detalle por mes de Reportes: hacia atrás a la izquierda, hacia
   adelante a la derecha, doce meses por página. */
.paginacion-meses { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--borde); font-size: 13px; }
.paginacion-meses > :only-child { margin-left: auto; }

/* ── Planes ───────────────────────────────────────────────────────────────
   La etiqueta del plan, la tarjeta «Su plan» de la ficha de una corredora y la
   tarjeta «Planes» de Configuración global. `pl-` = plan. */
.pl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--borde); background: var(--papel); color: var(--tinta-suave); white-space: nowrap; }
.pl-chip.medio { background: var(--acento-tenue); color: var(--acento); border-color: var(--acento-tenue); }
.pl-chip.full { background: var(--lateral, #14304f); color: #fff; border-color: var(--lateral, #14304f); }
.pl-chip.grande { font-size: 14px; padding: 6px 14px; }
.pl-uso { display: block; margin-top: 3px; font-size: 11.5px; color: var(--tinta-tenue); }
.pl-uso.pasado { color: var(--ambar); font-weight: 600; }
td.numero.pasado { color: var(--ambar); font-weight: 600; }

.pl-tarjeta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.pl-tarjeta > div { padding: 20px 22px; min-width: 0; }
.pl-tarjeta > div + div { border-left: 1px solid var(--borde); background: var(--papel); }
.pl-actual { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.pl-actual .nombre { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.pl-actual small { display: block; color: var(--tinta-suave); font-size: 12.5px; }
.pl-actual .precio { margin-left: auto; text-align: right; }
.pl-actual .precio strong { display: block; font-size: 18px; }
.pl-actual .precio small { font-size: 12px; }
.pl-medidor { margin-bottom: 12px; }
.pl-medidor .fila { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.pl-medidor .fila b { font-variant-numeric: tabular-nums; }
.pl-medidor .riel { height: 8px; border-radius: 99px; background: var(--borde); overflow: hidden; }
.pl-medidor .riel span { display: block; height: 100%; border-radius: 99px; background: var(--acento); }
.pl-medidor.pasado .riel span { background: var(--ambar); }
.pl-medidor.pasado .fila b { color: var(--ambar); }
.pl-medidor small { display: block; margin-top: 4px; font-size: 12px; color: var(--tinta-tenue); }
.pl-incluye { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13px; }
.pl-incluye li { display: flex; gap: 7px; align-items: flex-start; color: var(--tinta); }
.pl-incluye li.no { color: var(--tinta-tenue); }
.pl-incluye .t { flex: none; font-weight: 800; color: var(--verde); }
.pl-incluye li.no .t { color: var(--tinta-tenue); }
.pl-cambiar h3 { margin: 0 0 10px; font-size: 14px; }
.pl-cambiar .campo { margin-bottom: 10px; }
.pl-cambiar .aviso { font-size: 12.5px; padding: 10px 12px; margin: 10px 0; }
.pl-historial { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borde); }
.pl-historial h4 { margin: 0 0 8px; font-size: 12.5px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .4px; }
.pl-historial div { font-size: 12.5px; color: var(--tinta-suave); padding: 3px 0; }
.pl-historial b { color: var(--tinta); }
.pl-historial .motivo { display: block; color: var(--tinta-tenue); font-style: italic; }

/* La tarjeta «Planes» de Configuración global. */
.pl-config th:first-child, .pl-config td:first-child { width: 38%; }
.pl-config th.plan { text-align: center; }
.pl-config td.valor { text-align: center; }
.pl-config td.valor .con-sufijo { max-width: 160px; margin: 0 auto; }
.pl-config td.valor input { text-align: right; }
.pl-config td.valor .error { display: block; margin-top: 4px; }
.pl-config .que { display: block; color: var(--tinta-suave); font-size: 12px; margin-top: 2px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.pl-config td .principal { font-weight: 600; }
.pl-config tr.grupo td { padding: 14px 16px 6px; background: var(--papel); font-size: 12px; color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.pl-config td.si { color: var(--verde); font-weight: 800; text-align: center; }
.pl-config td.no { color: var(--tinta-tenue); text-align: center; }
.pl-pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--borde); }
.pl-pie .aviso { margin: 0; flex: 1 1 320px; font-size: 12.5px; padding: 10px 12px; }
.pl-nota-matriz { display: flex; gap: 10px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--borde); color: var(--tinta-suave); font-size: 12.5px; }
.pl-nota-matriz svg { flex: none; color: var(--acento); }

@media (max-width: 960px) {
    .pl-tarjeta { grid-template-columns: 1fr; }
    .pl-tarjeta > div + div { border-left: 0; border-top: 1px solid var(--borde); }
    .pl-incluye { grid-template-columns: 1fr; }
}

/* El aviso de «esto está en otro plan», donde iría la función. */
.plan-requerido { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); background: var(--papel); }
.plan-requerido .pl-chip { flex: none; margin-top: 2px; }
.plan-requerido strong { display: block; font-size: 14px; }
.plan-requerido small { display: block; margin-top: 3px; color: var(--tinta-suave); font-size: 12.5px; line-height: 1.5; }

/* La corredora que está pasada de su plan. Ámbar y no rojo: no es una falla ni
   un acceso ajeno, es una conversación pendiente. */
.franja-plan {
    background: var(--ambar-tenue); color: var(--ambar); border-bottom: 1px solid #e9c97a;
    padding: 9px 20px; font-size: 13.5px; display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap;
}
.franja-plan strong { font-weight: 700; }
.franja-plan .boton { color: var(--ambar); border-color: var(--ambar); background: transparent; }
.franja-plan .boton:hover { background: rgba(0, 0, 0, .05); }
body.superadmin > .franja-plan { grid-column: 1 / -1; }

/* ── Facturación ──────────────────────────────────────────────────────────
   Los cobros de plan por ciclo. `fa-` = facturación. */
.fa-estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fa-estado.pendiente { background: var(--acento-tenue); color: var(--acento); }
.fa-estado.pagado { background: var(--verde-tenue); color: var(--verde); }
.fa-estado.vencido { background: var(--rojo-tenue); color: var(--rojo); }
.fa-estado.gratis { background: var(--papel); color: var(--tinta-suave); border: 1px solid var(--borde); }
.fa-estado.anulado { background: var(--papel); color: var(--tinta-tenue); border: 1px solid var(--borde); text-decoration: line-through; }
.fa-ciclo strong { display: block; white-space: nowrap; }
.fa-ciclo small { color: var(--tinta-tenue); font-size: 11.5px; }
.fa-monto { font-variant-numeric: tabular-nums; }
.fa-monto small { display: block; color: var(--tinta-tenue); font-size: 11.5px; white-space: nowrap; }
td.fa-vence.pasado { color: var(--rojo); font-weight: 600; }
tr.fa-pago td { background: var(--acento-tenue); vertical-align: top; }
tr.fa-pago .campo { gap: 2px; }
tr.fa-pago .campo label { font-size: 11px; color: var(--tinta-tenue); }
tr.fa-pago input, tr.fa-pago select { width: 100%; min-width: 0; }
.fa-cc { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.fa-cc > div { padding: 18px 22px; min-width: 0; }
.fa-cc > div + div { border-left: 1px solid var(--borde); background: var(--papel); }
.fa-cc h3 { margin: 0 0 10px; font-size: 14px; }
.fa-saldo { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.fa-saldo .valor { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.fa-saldo small { display: block; color: var(--tinta-suave); font-size: 12.5px; }
.fa-nota { color: var(--tinta-tenue); font-size: 12px; margin: 10px 0 0; }
.fa-detalle dl.datos { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fa-filtros { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 14px; flex-wrap: wrap; }
.fa-filtros .campo { gap: 2px; }
.fa-filtros .campo label { font-size: 11.5px; color: var(--tinta-tenue); }
.fa-filtros select { min-width: 160px; }
.fa-filtros .buscar { position: relative; flex: 1 1 240px; max-width: 320px; }
.fa-filtros .buscar svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tinta-tenue); pointer-events: none; }
.fa-filtros .buscar input { width: 100%; padding-left: 34px; }

@media (max-width: 960px) {
    .fa-cc { grid-template-columns: 1fr; }
    .fa-cc > div + div { border-left: 0; border-top: 1px solid var(--borde); }
}

/* La ventana de pago de Khipu dentro de la página. El contenedor solo ancla el
   modal; lo visible es el mensaje de resultado y los enlaces de respaldo. */
.khipu-pago { margin-top: 14px; }
.khipu-pago #khipu-mensaje { margin-bottom: 10px; }

/* La ficha del cobro para soporte: en qué paso quedó el pago en línea. */
.fa-khipu { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borde); }
.fa-khipu h3 { margin: 0 0 8px; font-size: 14px; }
.fa-khipu .datos { margin: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.fa-linea-tiempo { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; color: var(--tinta-suave); }
.fa-linea-tiempo li { padding: 3px 0 3px 14px; position: relative; }
.fa-linea-tiempo li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-tenue); }
.fa-linea-tiempo li.ok::before { background: var(--verde); }
.fa-linea-tiempo li.espera::before { background: var(--ambar); }

/* Feriados y devoluciones: las dos tarjetas de arriba y el ejemplo vivo. */
.fe-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.fe-ejemplo { margin-top: 10px; padding: 10px 12px; background: var(--acento-tenue); border-radius: var(--radio); font-size: 13px; }
.fila-campos { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) { .fe-dos { grid-template-columns: 1fr; } }