/* Estilos propios del sistema. Bootstrap 5 cubre la base responsiva; aquí
   se define el menú lateral (sidebar) izquierdo con botón tipo "hamburguesa"
   para expandir/contraer, y algunos ajustes mínimos generales. */

body {
    background-color: #f5f6f8;
}

/* ---------- Estructura general (sidebar + contenido) ---------- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.main-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---------- Menú lateral (sidebar) ---------- */

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background-color: #1f2937;
    color: #e5e7eb;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.2s ease;
    z-index: 1040;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand {
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: #e5e7eb;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.hamburger-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
}

.hamburger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    border-radius: 1px;
}

.sidebar-nav {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
    flex: 1 0 auto;
}

.sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 1rem;
    color: #cbd5e1;
    text-decoration: none;
    white-space: nowrap;
    border-left: 3px solid transparent;
}

.sidebar-nav li a i {
    font-size: 1.15rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-nav li a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-nav li a.active {
    background-color: rgba(59, 130, 246, 0.15);
    color: #fff;
    border-left-color: #3b82f6;
}

/* Sidebar contraído (escritorio): solo íconos */
.sidebar.collapsed {
    width: 64px;
}

.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .link-text {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0.85rem 0.5rem;
}

.sidebar.collapsed .sidebar-nav li a {
    justify-content: center;
    padding: 0.65rem 0;
}

.sidebar.collapsed .sidebar-user-row {
    justify-content: center;
    padding: 0.5rem 0;
}

.sidebar.collapsed .sidebar-logout {
    justify-content: center;
    padding: 0.45rem 0;
}

/* ---------- Pie del sidebar (usuario + salir) ----------
   A petición del dueño del negocio (2026-09-05): antes había una barra
   superior separada solo para mostrar el usuario; se quitó por "ruido"
   y ahora el usuario/logout viven aquí, al fondo del sidebar, de forma
   pequeña y discreta. */

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 0;
    flex-shrink: 0;
}

/* Enlace "Administrar" (panel de usuarios) — solo visible para el usuario
   administrador, 2026-09-08. Vive justo encima de la fila de usuario/salir,
   con el mismo estilo discreto que el resto del pie del sidebar. */
.sidebar-administrar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1rem;
    color: #9ca3af;
    font-size: 0.78rem;
    text-decoration: none;
}

.sidebar-administrar-link i {
    font-size: 1rem;
    flex-shrink: 0;
}

.sidebar-administrar-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-administrar-link.active {
    color: #fff;
    background-color: rgba(59, 130, 246, 0.15);
}

.sidebar.collapsed .sidebar-administrar-link {
    justify-content: center;
    padding: 0.45rem 0;
}

.sidebar-user-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1rem;
    color: #9ca3af;
    font-size: 0.78rem;
}

.sidebar-user-row i {
    font-size: 1rem;
    flex-shrink: 0;
}

.sidebar-user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer form {
    margin: 0;
}

.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.4rem 1rem;
    color: #9ca3af;
    font-size: 0.78rem;
    cursor: pointer;
    text-align: left;
}

.sidebar-logout i {
    font-size: 1rem;
    flex-shrink: 0;
}

.sidebar-logout:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Botón flotante para abrir el sidebar en celular (antes vivía dentro de
   una barra superior que ya no existe). */
.mobile-toggle {
    display: none;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    background-color: #1f2937;
    border: none;
    border-radius: 0.4rem;
    font-size: 1.3rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 1035;
}

/* Fondo oscuro detrás del sidebar cuando está abierto en celular */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1030;
}

.sidebar-overlay.show {
    display: block;
}

/* ---------- Responsivo (celular/tablet angosta) ---------- */

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 240px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    /* En celular el botón del sidebar solo abre/cierra; no se usa el modo
       "contraído a íconos" porque ahí siempre se muestra completo. */
    .sidebar.collapsed {
        width: 240px;
    }

    .sidebar.collapsed .sidebar-brand,
    .sidebar.collapsed .link-text {
        display: block;
    }

    .sidebar.collapsed .sidebar-header {
        justify-content: flex-start;
        padding: 0.85rem 1rem;
    }

    .sidebar.collapsed .sidebar-nav li a {
        justify-content: flex-start;
        padding: 0.65rem 1rem;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .mobile-toggle {
        display: inline-block;
    }

    /* Deja espacio arriba para que el botón flotante no tape el contenido
       (ya no hay barra superior que reserve ese espacio). */
    .main-wrapper.has-sidebar {
        padding-top: 3rem;
    }
}

/* ---------- Lista de préstamos: ancho de columnas ---------- */
/* Cliente/Promotor necesitan espacio para el nombre; las columnas de
   semanas se dejan angostas y con el encabezado en dos líneas para no
   robarles ese espacio (a petición del dueño del negocio, 2026-09-05). */

.tabla-prestamos .col-nombre {
    min-width: 160px;
}

.tabla-prestamos .col-semanas {
    white-space: normal;
    max-width: 90px;
}

.tabla-prestamos .col-id {
    width: 1%;
    white-space: nowrap;
}

/* Encabezados centrados horizontal y verticalmente (a petición del dueño
   del negocio, 2026-09-05) — algunos títulos ocupan dos líneas
   ("Pago semanal", "Semanas totales", etc.) y se ven descentrados si solo
   se centra el texto sin también centrar verticalmente. La clase
   "tabla-datos" aplica esta misma regla a todas las demás tablas de la
   app (clientes, promotores, calendario de pagos, garantías, avales),
   a petición del dueño del negocio (2026-09-06): "las cabeceras de todas
   las tablas que creaste, doble centrado, horizontal y vertical". */
.tabla-prestamos thead th,
.tabla-datos thead th {
    text-align: center;
    vertical-align: middle;
}

/* ---------- Botones de acción principal ("+ Nuevo ...") ---------- */
/* Azul más profundo y menos saturado que el azul por defecto de Bootstrap,
   a petición del dueño del negocio (2026-09-05) — aplica en toda la app
   dondequiera que se use btn-primary (los tres listados y los formularios). */

.btn-primary {
    background-color: #2f5d8a;
    border-color: #2f5d8a;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #244a70;
    border-color: #244a70;
}

.btn-primary:active {
    background-color: #1d3a59 !important;
    border-color: #1d3a59 !important;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.25rem rgba(47, 93, 138, 0.35);
}

/* Botón "Editar" — verde, para que no se vea gris/apagado (a petición del
   dueño del negocio, 2026-09-05). Clase propia (no btn-outline-success de
   Bootstrap) para no afectar otros botones que ya usan ese color. */

.btn-editar {
    color: #1e8e3e;
    border-color: #1e8e3e;
    background-color: #e6f4ea;
}

.btn-editar:hover,
.btn-editar:focus,
.btn-editar:active {
    background-color: #1e8e3e !important;
    border-color: #1e8e3e !important;
    color: #fff !important;
}

/* ---------- Botón "Volver" ---------- */
/* Aparece en las páginas de detalle (Cliente, Promotor, Préstamo) para
   regresar al listado correspondiente sin depender del menú lateral — a
   petición del dueño del negocio (2026-09-05). Misma estructura visual en
   las tres pantallas: gris neutro, no compite con "Editar" (verde) ni con
   los botones de acción principal (azul). */

.btn-volver {
    color: #5a6472;
    border-color: #c7ccd3;
    background-color: #d7dce3;
}

.btn-volver:hover,
.btn-volver:focus,
.btn-volver:active {
    background-color: #eef1f4 !important;
    border-color: #c7ccd3 !important;
    color: #374151 !important;
}

/* ---------- Anchos de columna en el detalle del préstamo ---------- */
/* Las 3 columnas de arriba (Datos del préstamo / Resumen financiero+
   Comisión / Garantías+Avales) partían de 33.33% cada una (col-lg-4). A
   petición del dueño del negocio (2026-09-06), en dos rondas, siempre
   calculando el porcentaje sobre el ancho ACTUAL de cada columna (no sobre
   el total de la fila):
   Ronda 1: "Datos del préstamo" -12% de sí misma (33.33 → 29.33%);
   "Resumen financiero"/"Comisión del promotor" -17% de sí misma
   (33.33 → 27.67%); lo que sobra (9.67 puntos) se le da a Garantías/Avales
   (33.33 → 43%).
   Ronda 2: "Datos del préstamo" -8% de su valor de la ronda 1
   (29.33 × 0.92 = 26.98%); "Resumen financiero"/"Comisión del promotor"
   -10% del suyo (27.67 × 0.90 = 24.90%); lo que sobra (5.12 puntos) se le
   da otra vez a Garantías/Avales (43 + 5.12 = 48.12%).
   Solo aplica en pantallas grandes (≥992px); en celular las 3 se apilan a
   ancho completo igual que antes (col-12). */
@media (min-width: 992px) {
    .row-detalle-prestamo > .col-datos-prestamo {
        flex: 0 0 26.98%;
        max-width: 26.98%;
    }

    .row-detalle-prestamo > .col-resumen-comision {
        flex: 0 0 24.90%;
        max-width: 24.90%;
    }

    .row-detalle-prestamo > .col-garantias-avales {
        flex: 0 0 48.12%;
        max-width: 48.12%;
    }
}

/* ---------- Botones "Renovar", "Liquidar anticipado" y "Aplicar semana
   15" (detalle de préstamo) ---------- */
/* Antes eran "outline" (fondo transparente) y se perdían contra el fondo
   blanco de la tarjeta — a petición del dueño del negocio (2026-09-06):
   "ponles un fondo de su mismo color... tenue pero no tan tenue, tampoco
   tan fuerte que se pierda la letra". Mismo patrón que .btn-editar: texto y
   borde del color de acento, fondo tenue de ese mismo color, y al pasar el
   mouse se rellenan sólidos. */

.btn-renovar {
    color: #2f5d8a;
    border-color: #9db8d1;
    background-color: #dce7f0;
}

.btn-renovar:hover,
.btn-renovar:focus,
.btn-renovar:active {
    background-color: #2f5d8a !important;
    border-color: #2f5d8a !important;
    color: #fff !important;
}

.btn-liquidar {
    color: #8a5a00;
    border-color: #e0c27a;
    background-color: #faecc8;
}

.btn-liquidar:hover,
.btn-liquidar:focus,
.btn-liquidar:active {
    background-color: #d9822b !important;
    border-color: #d9822b !important;
    color: #fff !important;
}

.btn-semana15 {
    color: #41464b;
    border-color: #bfc4ca;
    background-color: #e2e3e5;
}

.btn-semana15:hover,
.btn-semana15:focus,
.btn-semana15:active {
    background-color: #5a6472 !important;
    border-color: #5a6472 !important;
    color: #fff !important;
}

/* ---------- Botón "Aceptar" del aviso de renovación anticipada (modal
   "Atención", detalle de préstamo) ---------- */
/* Nuevo 2026-09-12: el modal que aparece cuando un préstamo aún no cumple
   el mínimo de semanas para renovarse ahora deja "forzar" la renovación.
   El botón "Aceptar" nace deshabilitado y solo se habilita tras marcar el
   checkbox "Renovar entendiendo la limitante" y esperar una cuenta
   regresiva de 3 segundos (ver JS en detalle.html). Color ámbar/naranja
   tenue — mismo acento que .btn-liquidar / --kpi-orange — para que se
   note que es una acción fuera de lo normal, sin llegar al rojo de
   peligro. ".btn-footer-modal-atencion" solo fija la altura para que
   "Cerrar" y "Aceptar" se vean iguales aunque el texto de éste cambie
   durante la cuenta regresiva. */

.btn-footer-modal-atencion {
    min-height: calc(1.5em + 0.75rem + 2px);
}

.btn-aceptar-forzar {
    color: #8a5a00;
    border-color: #e0c27a;
    background-color: #faecc8;
}

.btn-aceptar-forzar:not(:disabled):hover,
.btn-aceptar-forzar:not(:disabled):focus,
.btn-aceptar-forzar:not(:disabled):active {
    background-color: #d9822b !important;
    border-color: #d9822b !important;
    color: #fff !important;
}

.btn-aceptar-forzar:disabled {
    color: #a89572;
    border-color: #e3d9c2;
    background-color: #f4ede0;
    opacity: 1;
}

/* ---------- Botón "Suspender"/"Reactivar" (Administrar) ---------- */
/* Restaurado 2026-09-12: se había perdido de este archivo por una edición
   concurrente (ver LECCIÓN de edición concurrente en la memoria del
   proyecto) mientras los templates que los usan seguían intactos. Mismo
   patrón que los botones de arriba: texto/borde del color de acento,
   fondo tenue, sólido al pasar el mouse. "Suspender" en rojo tenue (mismo
   tono que las alertas de error); "Reactivar" en azul tenue, mismos tonos
   que .btn-renovar — pidió el dueño del negocio (2026-09-12) que texto y
   borde fueran más fuertes que el fondo en ambos. */

.btn-suspender {
    color: #c53030;
    border-color: #c53030;
    background-color: #fbe8e8;
}

.btn-suspender:hover,
.btn-suspender:focus,
.btn-suspender:active {
    background-color: #c53030 !important;
    border-color: #c53030 !important;
    color: #fff !important;
}

.btn-reactivar {
    color: #2f5d8a;
    border-color: #9db8d1;
    background-color: #dce7f0;
}

.btn-reactivar:hover,
.btn-reactivar:focus,
.btn-reactivar:active {
    background-color: #2f5d8a !important;
    border-color: #2f5d8a !important;
    color: #fff !important;
}

/* Restaurado 2026-09-12 (mismo motivo que arriba): botón compacto usado
   junto a inputs dentro de .form-card (mostrar/ocultar contraseña,
   "Guardar cambios" alineado a la altura de los listbox). */
.form-card .btn-compacto {
    padding: 0.32rem 0.6rem;
    font-size: 0.875rem;
    min-height: calc(1.5em + 0.64rem + 2px);
}

/* ---------- Botón "Eliminar" de un renglón de Aval/Garantía ---------- */
/* Ya existía (.btn-eliminar-fila, "Renovar préstamo" y "Nuevo préstamo")
   como btn-outline-danger de Bootstrap: fondo transparente que se perdía
   contra el fondo blanco de la tarjeta. A petición del dueño del negocio
   (2026-09-12), se le agrega un fondo rojo tenue (sin tocar el color de
   letra/borde, que ya eran rojos y se quedan igual — más fuertes que el
   fondo). Al pasar el mouse, Bootstrap ya lo rellena de rojo sólido. */
.btn-eliminar-fila {
    background-color: #fbe8e8 !important;
}

/* ---------- Renglón de Aval en "Renovar préstamo": anchos de columna,
   separación entre campos y botón "Eliminar" compacto (2026-09-12)
   ---------- */
/* Partía de un grid Bootstrap de 12 columnas (Nombre completo col-md-2 =
   16.67%, Teléfono col-md-4 = 33.33%, Domicilio col-md-3 = 25%, Relación
   con el cliente col-md-2 = 16.67%, Eliminar col-md-1 = 8.33%). A petición
   del dueño del negocio, en dos rondas:
   Ronda 1: Teléfono -51% de su ancho (33.33% → 16.33%, apenas mostraba 3
   dígitos), Nombre completo +30% del suyo (16.67% → 21.67%), Relación con
   el cliente +10% del suyo (16.67% → 18.33%); lo que sobraba se lo llevó
   Domicilio (25% → 35.33%).
   Ronda 2: Domicilio -5% de su ancho de la ronda 1 (35.33% → 33.57%); ese
   5% que se le quitó se le suma tal cual a Relación con el cliente
   (18.33% → 20.10%), y encima Relación gana OTRO 5% de su propio ancho de
   antes de esa suma (18.33% × 1.05 = 0.92 puntos más) para evitar que su
   texto salte de línea — Relación queda en 21.02%. Nombre completo y
   Teléfono no cambian en la ronda 2.
   Ronda 3: las cinco columnas de la ronda 2 sumaban 100.92% (más del
   100% disponible), lo cual hacía que "Eliminar" no cupiera en la misma
   línea y se fuera a un renglón aparte. Domicilio pierde otro 5% de su
   ancho de la ronda 2 (33.57% → 31.89%) para que la fila quepa completa
   en una sola línea — el resto de las columnas no cambia.
   Solo aplica en pantallas ≥768px (breakpoint md de Bootstrap); en
   celular sigue apilado a ancho completo (col-12). */
@media (min-width: 768px) {
    .aval-fila > .col-aval-nombre {
        flex: 0 0 21.67%;
        max-width: 21.67%;
    }

    .aval-fila > .col-aval-telefono {
        flex: 0 0 16.33%;
        max-width: 16.33%;
    }

    .aval-fila > .col-aval-domicilio {
        flex: 0 0 31.89%;
        max-width: 31.89%;
    }

    .aval-fila > .col-aval-relacion {
        flex: 0 0 21.02%;
        max-width: 21.02%;
    }
}

.aval-fila > .col-aval-eliminar {
    padding-left: 0;
    padding-right: 0;
}

/* El botón "Eliminar" seguía sin caber en una sola línea junto con
   "Relación con el cliente" porque el espacio ENTRE columnas (el "gutter"
   de Bootstrap, que por default reparte 1.5rem entre cada par de campos)
   dejaba mucho aire lateral en un renglón ya bastante apretado. A
   petición del dueño del negocio (2026-09-12) se le quita la mitad de
   ese espacio solo en este renglón (no se toca `.row` en general, que se
   usa en muchas otras pantallas). */
.aval-fila {
    --bs-gutter-x: 0.75rem;
}

/* ---------- Botón "Renovar préstamo" bloqueado por el candado del "Monto
   a prestar" (2026-09-12) ---------- */
/* Al deshabilitarlo, Bootstrap solo le baja la opacidad y se queda azul
   (`.btn-primary`) — no se notaba que estuviera bloqueado. A petición del
   dueño del negocio, en vez de eso usa los mismos tonos grises "neutros"
   de bloqueado que ya existen en la app (ver `.btn-volver`) más un patrón
   de rayas diagonales, para que sea inconfundible que el botón no se
   puede presionar todavía. */
#btn-renovar-submit:disabled {
    background-color: #d7dce3;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(90, 100, 114, 0.18) 8px,
        rgba(90, 100, 114, 0.18) 16px
    );
    border-color: #c7ccd3;
    color: #5a6472;
    opacity: 1;
    cursor: not-allowed;
}

/* ---------- Botón "Buscar" ---------- */
/* Fondo gris claro para que no se pierda contra el fondo general de la
   página (#f5f6f8), a petición del dueño del negocio (2026-09-05). */

.btn-search {
    background-color: #dfe3e8;
    border-color: #c9ced6;
    color: #33404f;
}

.btn-search:hover,
.btn-search:focus {
    background-color: #cdd3db;
    border-color: #b7bec9;
    color: #212a34;
}

/* ---------- Ícono de WhatsApp junto a teléfonos ---------- */
/* Todos los teléfonos del sistema son de México (lada +52) — a petición del
   dueño del negocio (2026-09-05), cada teléfono mostrado en la app lleva un
   ícono de WhatsApp que abre un chat directo con ese número (sin mensaje
   predefinido, no hace falta para que funcione el enlace). Ver
   `apps.core.templatetags.telefono_extras.whatsapp_url`. */

.whatsapp-link {
    color: #25d366;
    margin-left: 0.35rem;
    font-size: 1rem;
    vertical-align: middle;
}

.whatsapp-link:hover {
    color: #1da851;
}

/* Icono para copiar el teléfono al portapapeles, junto al de WhatsApp
   (a petición del dueño del negocio, 2026-09-06). */
.copiar-telefono-link {
    color: #6c757d;
    margin-left: 0.75rem;
    font-size: 1rem;
    vertical-align: middle;
}

.copiar-telefono-link:hover {
    color: #343a40;
}

.copiar-telefono-link.copiado {
    color: #198754;
}

/* ---------- Campos angostos del popup "Registrar pago" ---------- */
/* A petición del dueño del negocio (2026-09-08): los campos "Monto
   pagado" y "Fecha de pago" se veían forzados a ocupar todo el ancho del
   modal, dejando mucho espacio vacío. Se les pone un ancho máximo para
   que se ajusten más a su contenido.

   Ajuste (2026-09-10), a petición del dueño del negocio: la etiqueta
   ("Monto pagado", etc.) ya se veía centrada porque hereda el
   text-align:center de un ancestro, pero el recuadro del campo (al ser un
   elemento de bloque) no se centraba solo por eso — hacía falta
   margin:auto. También se aplica esta misma clase al select de "Método de
   pago" (antes ocupaba todo el ancho del modal) y se angostan un poco los
   tres campos, cuidando que "Santander"/"Banamex" (las opciones más
   largas del select) sigan cabiendo en una sola línea sin cortarse. */
.input-compacto-modal {
    display: block;
    width: 100%;
    max-width: 150px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Título centrado del popup "Registrar pago" ---------- */
/* A petición del dueño del negocio (2026-09-10): el título "Registrar
   pago #N" debe quedar centrado en el encabezado del modal, sin mover el
   botón de cerrar (X) de la esquina superior derecha. Se posiciona el
   botón de cerrar de forma absoluta para que el título pueda ocupar todo
   el ancho del encabezado y centrarse de verdad (no solo centrarse en el
   espacio que le sobra al lado del botón). */
.modal-header-centrado {
    position: relative;
    justify-content: center;
}

.modal-header-centrado .modal-title {
    width: 100%;
    text-align: center;
}

.modal-header-centrado .btn-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
}

/* ---------- Ancho del popup "Registrar pago" ---------- */
/* A petición del dueño del negocio (2026-09-10): se quita el botón
   "Cancelar" del pie del modal (ya se puede cerrar con la X), y con eso se
   angosta el popup un poco más de lo que Bootstrap trae por defecto en
   ".modal-sm" (300px). */
.modal-registrar-pago {
    max-width: 260px;
}

/* ---------- Fila con retraso en el calendario de pagos ---------- */
/* A petición del dueño del negocio (2026-09-08): cuando la columna
   "Retraso" de un pago es mayor a 0 (se pagó después de su fecha
   esperada), toda la fila se resalta con un rojo sutil — no tan fuerte
   que se pierda el resto de la información de la fila. Se usa !important
   para ganarle al rayado alternado (table-striped) de la tabla. */
.fila-con-retraso td {
    background-color: rgba(197, 48, 48, 0.1) !important;
}

/* ---------- Color del "Estado" en la lista de préstamos ---------- */
/* Verde = al corriente, azul = finalizado (liquidado/renovado/cancelado),
   naranja = atrasado hasta 7 días, rojo = atrasado más de 7 días — reglas
   confirmadas con el dueño del negocio (2026-09-05). */

.badge-estado-verde {
    background-color: #2f855a;
    color: #fff;
}

.badge-estado-azul {
    background-color: #2b6cb0;
    color: #fff;
}

.badge-estado-naranja {
    background-color: #dd6b20;
    color: #fff;
}

.badge-estado-rojo {
    background-color: #c53030;
    color: #fff;
}

/* "Liquidado" (2026-09-21, a petición del dueño del negocio): antes caía
   en el mismo azul que "Cancelado" en el calendario de pagos del detalle
   de préstamo (los dos usaban el "else" genérico) — ahora tiene su propio
   color, el mismo acento ámbar de ".btn-liquidar" (botones "Liquidar
   anticipado"/"Cancelar liquidación"), para que un pago de liquidación se
   distinga de un pago cancelado a simple vista. */
.badge-estado-amarillo {
    background-color: #d9822b;
    color: #fff;
}

/* ---------- Campos de captura de dinero ---------- */
/* A petición del dueño del negocio (2026-09-06): cualquier campo donde se
   capture un monto en pesos (nunca porcentajes ni conteos) va alineado a
   la derecha; el separador de miles mientras se escribe lo pone
   static/js/dinero-input.js. */

.input-dinero {
    text-align: right;
}

/* ---------- Quitar las flechitas de los campos numéricos ---------- */
/* A petición del dueño del negocio (2026-09-05): se ven anticuadas. Aplica
   en toda la app, en cualquier <input type="number">. */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ---------- Formularios de creación/edición ("Nuevo cliente", "Nuevo
   promotor", "Nuevo préstamo") ---------- */
/* Contenedor centrado con ancho máximo en vez de una columna de Bootstrap
   que deja un espacio vacío enorme a la derecha en pantallas anchas —
   a petición del dueño del negocio (2026-09-05). */

.form-page {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.form-page.form-page-ancho {
    max-width: 980px;
}

/* "Nuevo préstamo": formulario + tabla de resumen a la derecha (solo de
   referencia, ver docs/reglas_negocio.md sección 3 y la nota 2026-09-09).
   Un poco más ancho que form-page-ancho para que quepan las dos columnas
   sin apretar el formulario. */
.form-page.form-page-con-resumen {
    max-width: 1240px;
}

.fila-formulario-resumen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 992px) {
    .fila-formulario-resumen {
        grid-template-columns: 1fr 300px;
    }

    .resumen-columna {
        position: sticky;
        top: 1rem;
    }
}

/* Envuelve el/los resumen(es) de la derecha de "Nuevo préstamo" (Resumen,
   Monto a entregar, etc.) en una sola columna apilada — así el
   `position: sticky` se aplica a la columna completa (para que ambos
   recuadros se desplacen juntos), no a cada tarjeta por separado. */
.resumen-columna {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.resumen-card {
    background-color: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 1.25rem 1.5rem;
}

.resumen-lista {
    margin: 0;
}

.resumen-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f1f3;
}

.resumen-fila:last-child {
    border-bottom: none;
}

.resumen-fila dt {
    color: #5b6472;
    font-size: 0.85rem;
    font-weight: 400;
}

.resumen-fila dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.resumen-fila-ganancia {
    border-top: 2px solid #e2e5ea;
    margin-top: 0.25rem;
    padding-top: 0.6rem;
}

.resumen-fila-ganancia dt {
    color: #1f2530;
    font-weight: 600;
}

.resumen-fila-ganancia dd {
    font-weight: 700;
    font-size: 1.05rem;
}

.form-card {
    background-color: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 1.25rem 1.5rem;
}

/* Versión compacta de los campos dentro de la tarjeta del formulario — se
   veían demasiado grandes (a petición del dueño del negocio, 2026-09-05).
   Se escala aquí en vez de tocar cada plantilla campo por campo. */

.form-card .form-card-header {
    font-size: 1.05rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

.form-card .form-label {
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

.form-card .form-control,
.form-card .form-select {
    padding: 0.32rem 0.6rem;
    font-size: 0.875rem;
    min-height: calc(1.5em + 0.64rem + 2px);
}

.form-card .mb-3 {
    margin-bottom: 0.75rem !important;
}

.fila-compacta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fila-compacta > div {
    flex: 1 1 100%;
}

@media (min-width: 768px) {
    .fila-compacta > .col-40 {
        flex: 1 1 calc(40% - 0.5rem);
        max-width: calc(40% - 0.5rem);
    }

    .fila-compacta > .col-30 {
        flex: 1 1 calc(30% - 0.5rem);
        max-width: calc(30% - 0.5rem);
    }

    .fila-compacta > .col-20 {
        flex: 1 1 calc(20% - 0.5rem);
        max-width: calc(20% - 0.5rem);
    }
}

/* .fila-grid-N: filas de formulario que SIEMPRE deben quedar en una sola
   línea (una sola fila), sin importar el ancho de la pantalla — no se
   apilan en columna nunca. Usa fr en vez de porcentajes fijos para que el
   gap nunca provoque que la última columna se desborde y salte a una
   segunda fila (como pasaba con .fila-compacta). Si la pantalla es muy
   angosta, el contenedor de la fila puede desplazarse horizontalmente
   (scroll) en vez de romper la fila en varias líneas. */
.fila-grid {
    display: grid;
    gap: 0.75rem;
    overflow-x: auto;
}

.fila-grid-2 {
    /* max-content en vez de 1fr: las columnas solo ocupan lo que su
       campo necesita (los inputs ya traen su propio ancho fijo en
       "Configuración"), así los campos quedan juntos en vez de repartirse
       a la fuerza en mitades/tercios con un hueco enorme entre ellos. */
    grid-template-columns: repeat(2, max-content);
}

.fila-grid-3 {
    grid-template-columns: repeat(3, max-content);
}

.fila-grid-4 {
    grid-template-columns: 3fr 3fr 2fr 2fr;
}

.fila-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.fila-grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Fila "Cliente / Promotor / Monto del préstamo / ¿Quién presta? / Fecha
   del primer pago" de "Nuevo préstamo" (2026-09-12): parte de los mismos
   pesos que tenía .fila-grid-4 (Cliente 3fr, Promotor 3fr, Monto 2fr,
   Fecha 2fr; "¿Quién presta?" entraba antes como 3fr en su propia fila).
   Ronda 1: Cliente -15% (3 → 2.55), Promotor -20% (3 → 2.4), "¿Quién
   presta?" -60% (3 → 1.2); Monto y Fecha sin cambio.
   Ronda 2 (2026-09-12): Cliente -3% más (2.55 → 2.4735), Promotor -3%
   más (2.4 → 2.328), Monto -15% (2 → 1.7); todo lo que se les quitó se
   lo lleva "¿Quién presta?" (1.2 → 1.6485). Fecha sigue sin cambio. */
.fila-grid-nuevo-prestamo {
    grid-template-columns: 2.4735fr 2.328fr 1.7fr 1.6485fr 2fr;
}

@media (max-width: 575.98px) {
    .fila-grid-2,
    .fila-grid-3,
    .fila-grid-4,
    .fila-grid-5,
    .fila-grid-6,
    .fila-grid-nuevo-prestamo {
        grid-auto-flow: column;
        grid-auto-columns: minmax(140px, 1fr);
    }
}

/* .valor-centrado: centra el VALOR dentro de un input o select (nunca su
   label, que se queda alineado normal a la izquierda) — a petición del
   dueño del negocio (2026-09-09) para % de cuota de supervisión, número
   de pagos, día de cobro y % comisión en "Nuevo préstamo". Se define
   aquí (en vez de usar la utilidad "text-center" de Bootstrap) para que
   no dependa de que el CSS de Bootstrap haya cargado. */
.valor-centrado {
    text-align: center;
}

select.valor-centrado {
    text-align-last: center;
}

.form-card .form-check-input {
    width: 1rem;
    height: 1rem;
}

.form-card .form-check-label {
    font-size: 0.85rem;
}

.form-card .btn {
    padding: 0.35rem 0.9rem;
    font-size: 0.875rem;
}

/* Tarjetas de KPI (ficha del cliente): acento de color arriba en vez de
   bordes grises planos — a petición del dueño del negocio (2026-09-05). */

.kpi-tile {
    --kpi-color: #2f5d8a;
    background-color: #fff;
    border: 1px solid #e2e5ea;
    border-top: 3px solid var(--kpi-color);
    border-radius: 0.4rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 0.6rem 0.4rem;
    height: 100%;
}

.kpi-tile .kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6b7280;
    margin-bottom: 0.2rem;
}

.kpi-tile .kpi-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kpi-color);
}

.kpi-tile.kpi-blue { --kpi-color: #2f5d8a; }
.kpi-tile.kpi-teal { --kpi-color: #0f8b8d; }
.kpi-tile.kpi-slate { --kpi-color: #5a6472; }
.kpi-tile.kpi-green { --kpi-color: #1e8e3e; }
.kpi-tile.kpi-orange { --kpi-color: #d9822b; }
.kpi-tile.kpi-red { --kpi-color: #c0392b; }

.form-card-header {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eef0f3;
}