/* ════════════════════════════════════════════════════════════════════════════
   INMOBILIARIA — SISTEMA VISUAL "PLANO DE LOTIZACIÓN"
   Tinta sobre papel. Retícula catastral, trazo fino, rotulación técnica.
   La profundidad viene de líneas precisas y capas de papel, nunca de blur.

   Índice
     01. Tokens (paleta, tipografía, métrica)
     02. Puente con Bootstrap 5.3 (variables --bs-*)
     03. Base y textura de papel
     04. Layout general
     05. Sidebar
     06. Área principal y topbar
     07. Tarjetas
     08. Stat cards
     09. Encabezado de página
     10. Tablas
     11. Badges
     12. Formularios
     13. Botones
     14. Buscador
     15. Estado vacío
     16. Filtros (pills)
     17. Alertas
     18. Modal (.mdl-*)
     19. Validación de formularios
     20. Ajustes de componentes Bootstrap
     21. Portal del cliente
     22. Login
     23. Animaciones
     24. Responsive
     25. Movimiento reducido
   ════════════════════════════════════════════════════════════════════════════ */


/* ── 01. TOKENS ──────────────────────────────────────────────────────────────
   Paleta de tierra peruana: tinta de plano, papel cálido, arcilla del desierto
   y azul topográfico. */
:root {
    /* Superficies */
    --tinta:         #16232e;   /* tinta oscura: sidebar, texto principal */
    --tinta-2:       #223440;   /* tinta levantada: hover sobre oscuro */
    --papel:         #efece4;   /* papel cálido: fondo de contenido */
    --carta:         #fbfaf7;   /* superficie de tarjetas */
    --carta-2:       #f5f1e8;   /* papel de cabecera / barras de acción */

    /* Acentos */
    --arcilla:       #b6552f;   /* terracota, acción primaria */
    --arcilla-hover: #97431f;
    --arcilla-tinte: rgba(182, 85, 47, .10);
    --cobalto:       #1d5f7a;   /* azul topográfico, interacción secundaria */
    --cobalto-hover: #164a5f;
    --cobalto-tinte: rgba(29, 95, 122, .09);

    /* Trazo */
    --linea:         #ddd7ca;   /* borde de trazo fino */
    --linea-fuerte:  #c6bda9;   /* trazo de cota / separación estructural */
    --reticula:      rgba(22, 35, 46, .045);
    --reticula-fina: rgba(22, 35, 46, .020);

    /* Texto */
    --texto:         #16232e;
    --texto-suave:   #6f6858;   /* gris cálido, secundario */
    --texto-tenue:   #948c7a;   /* rotulación auxiliar */

    /* Estados del dominio (lotes) */
    --disponible:    #4a7c3f;   /* verde oliva */
    --separado:      #c08a2e;   /* ocre */
    --financiado:    #1d5f7a;   /* azul topográfico */
    --vendido:       #16232e;   /* tinta */

    /* Semántica de feedback */
    --exito:         #4a7c3f;
    --aviso:         #c08a2e;
    --peligro:       #a3392b;
    --info:          #1d5f7a;
    --exito-tinte:   rgba(74, 124, 63, .10);
    --aviso-tinte:   rgba(192, 138, 46, .12);
    --peligro-tinte: rgba(163, 57, 43, .09);
    --info-tinte:    rgba(29, 95, 122, .09);

    /* Tipografía — siempre con respaldo del sistema por si cae el CDN */
    --f-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --f-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Segoe UI Semibold', 'Segoe UI', system-ui, sans-serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    /* Métrica */
    --sidebar-width: 255px;
    --topbar-h:      60px;
    --r:             3px;       /* radio de esquina: casi recto, dibujo técnico */
    --r-sm:          2px;

    /* Compatibilidad con nombres antiguos usados en línea por algunas páginas */
    --accent:             var(--arcilla);
    --accent-dark:        var(--arcilla-hover);
    --border-color:       var(--linea);
    --card-bg:            var(--carta);
    --content-bg:         var(--papel);
    --sidebar-bg:         var(--tinta);
    --text-muted-custom:  var(--texto-suave);
}


/* ── 02. PUENTE CON BOOTSTRAP 5.3 ────────────────────────────────────────────
   Bootstrap 5.3 se apoya en variables CSS. Reescribiéndolas aquí, todas las
   utilidades (bg-*, text-*, border-*, bg-opacity-*, alert-*) adoptan la paleta
   del plano sin tener que duplicar reglas. */
:root {
    --bs-body-font-family: var(--f-sans);
    --bs-font-sans-serif:  var(--f-sans);
    --bs-font-monospace:   var(--f-mono);
    --bs-body-font-size:   .875rem;
    --bs-body-color:       var(--texto);
    --bs-body-color-rgb:   22, 35, 46;
    --bs-body-bg:          var(--papel);
    --bs-body-bg-rgb:      239, 236, 228;
    --bs-emphasis-color:   var(--tinta);
    --bs-emphasis-color-rgb: 22, 35, 46;
    --bs-secondary-color:  var(--texto-suave);   /* usado por .text-muted */
    --bs-tertiary-bg:      var(--carta-2);
    --bs-border-color:     var(--linea);
    --bs-border-color-translucent: var(--linea);
    --bs-border-radius:    var(--r);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: 4px;
    --bs-border-radius-xl: 5px;

    /* Colores de marca */
    --bs-primary:       #b6552f;   --bs-primary-rgb:   182, 85, 47;
    --bs-secondary:     #7d7566;   --bs-secondary-rgb: 125, 117, 102;
    --bs-success:       #4a7c3f;   --bs-success-rgb:    74, 124, 63;
    --bs-info:          #1d5f7a;   --bs-info-rgb:       29, 95, 122;
    --bs-warning:       #c08a2e;   --bs-warning-rgb:   192, 138, 46;
    --bs-danger:        #a3392b;   --bs-danger-rgb:    163, 57, 43;
    --bs-light:         #f5f1e8;   --bs-light-rgb:     245, 241, 232;
    --bs-dark:          #16232e;   --bs-dark-rgb:       22, 35, 46;

    /* Enlaces */
    --bs-link-color:       var(--cobalto);
    --bs-link-color-rgb:   29, 95, 122;
    --bs-link-hover-color: var(--cobalto-hover);

    /* Tintes suaves — los usan .alert-*, .text-bg-* y las utilidades subtle */
    --bs-primary-bg-subtle:   #f7ece6;  --bs-primary-border-subtle:  #e3c4b4;  --bs-primary-text-emphasis:  #7a3720;
    --bs-secondary-bg-subtle: #f2efe8;  --bs-secondary-border-subtle:#d8d2c4;  --bs-secondary-text-emphasis:#5a5449;
    --bs-success-bg-subtle:   #eaf1e6;  --bs-success-border-subtle:  #bfd4b8;  --bs-success-text-emphasis:  #2f5228;
    --bs-info-bg-subtle:      #e5eef2;  --bs-info-border-subtle:     #b3ccd7;  --bs-info-text-emphasis:     #123f51;
    --bs-warning-bg-subtle:   #f9f0dd;  --bs-warning-border-subtle:  #e6cf9d;  --bs-warning-text-emphasis:  #7d5a15;
    --bs-danger-bg-subtle:    #f8e9e6;  --bs-danger-border-subtle:   #ddb3ac;  --bs-danger-text-emphasis:   #6e251b;
    --bs-light-bg-subtle:     #faf8f3;  --bs-light-border-subtle:    var(--linea);
    --bs-dark-bg-subtle:      #d9d5cb;  --bs-dark-border-subtle:     #b6b0a3;

    /* Tabla */
    --bs-table-hover-bg: var(--cobalto-tinte);
    --bs-table-striped-bg: rgba(22, 35, 46, .022);
}


/* ── 03. BASE Y TEXTURA DE PAPEL ─────────────────────────────────────────────
   La retícula catastral se compone de dos tramas: cuadrícula fina de 8px y
   cuadrícula maestra de 40px. Casi imperceptible, pero da la sensación de
   estar leyendo sobre papel milimetrado. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--f-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto);
    background-color: var(--papel);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Trama reutilizable (se aplica al contenido, al login y al portal cliente) */
.content-area,
.cliente-shell,
.login-page {
    background-color: var(--papel);
    background-image:
        repeating-linear-gradient(0deg,  transparent 0 39px, var(--reticula) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, var(--reticula) 39px 40px),
        repeating-linear-gradient(0deg,  transparent 0  7px, var(--reticula-fina) 7px 8px),
        repeating-linear-gradient(90deg, transparent 0  7px, var(--reticula-fina) 7px 8px);
    background-attachment: local;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-cond);
    font-weight: 700;
    letter-spacing: .005em;
    color: var(--tinta);
}

/* Todo dato numérico va en mono con cifras de ancho fijo */
.font-dato,
code, kbd, samp,
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="tel"], input[type="month"] {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Selección de texto: lápiz de color sobre el plano */
::selection { background: var(--arcilla-tinte); color: var(--tinta); }

/* Barras de scroll discretas, del color del papel */
* { scrollbar-color: var(--linea-fuerte) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--linea-fuerte);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--texto-tenue); background-clip: content-box; }

/* Foco visible y coherente en toda la app */
:focus-visible {
    outline: 2px solid var(--cobalto);
    outline-offset: 2px;
}


/* ── 04. LAYOUT GENERAL ──────────────────────────────────────────────────── */
.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}


/* ── 05. SIDEBAR ─────────────────────────────────────────────────────────────
   Bloque de tinta con su propia retícula tenue. El estado activo se marca con
   una cota de arcilla a la izquierda, como el lindero de una parcela. */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    z-index: 100;
    color: #b6c2cd;
    background-color: var(--tinta);
    background-image:
        repeating-linear-gradient(0deg,  transparent 0 31px, rgba(255,255,255,.028) 31px 32px),
        repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.028) 31px 32px);
    border-right: 1px solid #0d161d;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.05);
    transition: width .25s ease;
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.1rem 1.15rem;
    font-family: var(--f-cond);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.sidebar-brand:hover { color: #fff; }

.sidebar-brand .brand-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
    background: var(--arcilla);
    border: 1px solid var(--arcilla-hover);
    border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

/* Rótulo de sección: pequeño, condensado, con cota horizontal a la derecha */
.nav-section {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.1rem 1.15rem .4rem;
    font-family: var(--f-cond);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6b7d8c;
}
.nav-section::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.10);
}

.nav-link-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 1px .55rem;
    padding: .5rem .7rem;
    font-size: .855rem;
    color: #a5b3c1;
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: background .16s ease, color .16s ease;
}
/* Cota de trazo que se desplaza al pasar el cursor */
.nav-link-item::before {
    content: "";
    position: absolute;
    left: -.55rem;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--arcilla);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .18s ease;
}
.nav-link-item:hover {
    background: rgba(255,255,255,.055);
    color: #e4eaf0;
}
.nav-link-item:hover::before { transform: scaleY(.55); }

.nav-link-item.active {
    background: rgba(29, 95, 122, .30);
    color: #fff;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.nav-link-item.active::before { transform: scaleY(1); }

.nav-link-item .nav-icon {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-size: 1rem;
    opacity: .9;
}
.nav-link-item.active .nav-icon { opacity: 1; color: #d99a7d; }

.sidebar-footer {
    margin-top: auto;
    padding: .8rem 1rem;
    border-top: 1px solid rgba(255,255,255,.10);
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .03em;
    color: #5d6e7c;
    text-align: center;
}


/* ── 06. ÁREA PRINCIPAL Y TOPBAR ─────────────────────────────────────────── */
.main-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.topbar {
    height: var(--topbar-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.4rem;
    background: var(--carta);
    border-bottom: 1px solid var(--linea-fuerte);
    box-shadow: 0 1px 0 rgba(22,35,46,.04);
}

.topbar-title {
    font-family: var(--f-cond);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta);
}

.topbar-date {
    margin-left: auto;
    font-family: var(--f-mono);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    color: var(--texto-suave);
}

.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}


/* ── 07. TARJETAS ────────────────────────────────────────────────────────────
   Hojas de papel superpuestas: trazo fino y una sombra de un solo píxel que
   simula el canto del papel, nunca un desenfoque. */
.card {
    --bs-card-bg: var(--carta);
    --bs-card-border-color: var(--linea);
    --bs-card-border-radius: var(--r);
    --bs-card-inner-border-radius: var(--r-sm);
    --bs-card-cap-bg: var(--carta-2);
    --bs-card-spacer-x: 1.15rem;
    --bs-card-spacer-y: 1.15rem;
    background: var(--carta);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: 0 1px 0 rgba(22,35,46,.05), 0 0 0 3px rgba(251,250,247,.45);
}

.card-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1.15rem;
    background: var(--carta-2);
    border-bottom: 1px solid var(--linea);
    font-family: var(--f-cond);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta);
}
.card-header .btn { text-transform: none; letter-spacing: 0; }

.card-body { padding: 1.15rem; }

.card-title {
    font-family: var(--f-cond);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--tinta);
}


/* ── 08. STAT CARDS ──────────────────────────────────────────────────────────
   Bloques planos de color, sin degradados: cada uno es una "zona" del plano.
   La cifra va en mono, como una cota. */
.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.3rem;
    color: #fff;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
/* Retícula tenue sobre el bloque de color */
.stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg,  transparent 0 15px, rgba(255,255,255,.07) 15px 16px),
        repeating-linear-gradient(90deg, transparent 0 15px, rgba(255,255,255,.07) 15px 16px);
    pointer-events: none;
}
/* Marca de esquina, como el cartucho de un plano */
.stat-card::after {
    content: "";
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 14px;
    height: 14px;
    border-right: 1px solid rgba(255,255,255,.45);
    border-bottom: 1px solid rgba(255,255,255,.45);
    pointer-events: none;
}

.stat-card .stat-icon {
    position: relative;
    flex-shrink: 0;
    font-size: 1.85rem;
    opacity: .9;
}
.stat-card > div:not(.stat-icon) { position: relative; }

.stat-card .stat-value {
    font-family: var(--f-mono);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.stat-card .stat-label {
    margin-top: .3rem;
    font-family: var(--f-cond);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .88;
}

/* Cada tarjeta toma el color del estado que representa */
.sc-disponible { background: var(--disponible); }
.sc-clientes   { background: var(--cobalto); }
.sc-ventas     { background: var(--arcilla); }
.sc-pagos      { background: var(--separado); }


/* Las cuatro tarjetas del dashboard son enlaces a su sección. Se marcan como
   pulsables con una cota que aparece al pasar por encima y un leve levantamiento;
   el color y la retícula los hereda de .stat-card. */
a.stat-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease;
}
a.stat-card:hover,
a.stat-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .55);
    color: inherit;
}
a.stat-card:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    a.stat-card:hover, a.stat-card:focus-visible { transform: none; }
}

/* ── 09. ENCABEZADO DE PÁGINA ────────────────────────────────────────────────
   Rótulo del plano: título condensado sobre una cota horizontal. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--linea-fuerte);
}
.page-header h4 {
    display: flex;
    align-items: center;
    margin: 0;
    font-family: var(--f-cond);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta);
}
.page-header h4 i { color: var(--arcilla); }


/* ── 10. TABLAS ──────────────────────────────────────────────────────────────
   Cuadro de datos del plano: cabecera rotulada en condensada y cuerpo en mono
   con cifras tabulares, para que las columnas numéricas alineen a la perfección. */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--texto);
    --bs-table-border-color: var(--linea);
    --bs-table-hover-bg: var(--cobalto-tinte);
    --bs-table-hover-color: var(--texto);
    --bs-table-striped-bg: rgba(22, 35, 46, .022);
    margin: 0;
    font-size: .84rem;
    border-color: var(--linea);
}
/* Bootstrap dibuja una línea gruesa de currentColor sobre el <tbody>: se anula */
.table > :not(:first-child) { border-top: none; }

.table th {
    padding: .6rem 1rem;
    background: var(--carta-2);
    font-family: var(--f-cond);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
    white-space: nowrap;
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea-fuerte);
}

/* El cuerpo va en sans: la monoespaciada resulta ~14% MÁS ancha que la sans en
   texto de caja mixta (medido: 216px vs 189px para «Brisas del Mega Puerto de
   Chancay») y a .78rem quedaba en 10,9px, demasiado pequeño para captura diaria.
   Las cifras igual alinean porque tabular-nums también existe en IBM Plex Sans. */
.table td {
    padding: .58rem 1rem;
    vertical-align: middle;
    font-family: var(--f-sans);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--linea);
}

/* La monoespaciada se reserva para lo que es dato tabulado. En todo el proyecto
   las columnas numéricas se marcan con .text-end o .text-center, así que ese
   convenio del marcado sirve de selector sin tocar ninguna página. */
.table td.text-end,
.table td.text-center,
.table td .font-dato {
    font-family: var(--f-mono);
    font-size: .78rem;
    letter-spacing: -.005em;
}
.table tbody tr:last-child td { border-bottom: none; }

/* Hover: tinte topográfico + cota de trazo en el margen izquierdo */
.table tbody tr { transition: background .14s ease; }
.table tbody tr:hover > td {
    background: var(--cobalto-tinte);
    --bs-table-accent-bg: transparent;
}
.table tbody tr:hover > td:first-child {
    box-shadow: inset 2px 0 0 var(--cobalto);
}

.table-sm th, .table-sm td { padding: .4rem .7rem; }
.table-light { --bs-table-bg: var(--carta-2); --bs-table-color: var(--texto-suave); }
.table-active { --bs-table-bg: var(--arcilla-tinte); }
.table-responsive { border-radius: var(--r-sm); }


/* ── 11. BADGES ──────────────────────────────────────────────────────────────
   Etiquetas de leyenda del plano: condensadas, en versalitas, trazo fino. */
.badge {
    padding: .32em .6em;
    font-family: var(--f-cond);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.badge.bg-light,
.badge.bg-warning { color: var(--tinta) !important; box-shadow: inset 0 0 0 1px rgba(22,35,46,.10); }
.badge.rounded-pill { padding-inline: .7em; }


/* ── 12. FORMULARIOS ─────────────────────────────────────────────────────── */
.form-label {
    margin-bottom: .3rem;
    font-family: var(--f-cond);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.form-label .text-muted { text-transform: none; letter-spacing: 0; }

.form-control,
.form-select {
    padding: .42rem .7rem;
    font-size: .855rem;
    color: var(--texto);
    background-color: #fff;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-sm);
    box-shadow: inset 0 1px 0 rgba(22,35,46,.03);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--texto-tenue); }

.form-control:focus,
.form-select:focus {
    border-color: var(--cobalto);
    box-shadow: 0 0 0 3px var(--cobalto-tinte);
}
.form-control:disabled, .form-select:disabled,
.form-control[readonly] {
    background-color: var(--carta-2);
    color: var(--texto-suave);
}

.form-control-sm, .form-select-sm { padding: .28rem .5rem; font-size: .8rem; }
.form-control-lg, .form-select-lg { padding: .6rem .9rem; font-size: 1rem; }

/* Los campos de dato duro usan mono */
.form-control[type="number"],
.form-control[type="date"],
.form-control[type="datetime-local"],
.form-control[type="time"] { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.input-group-text {
    padding: .42rem .65rem;
    font-family: var(--f-mono);
    font-size: .8rem;
    color: var(--texto-suave);
    background: var(--carta-2);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-sm);
}

.form-check-input {
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-sm);
}
.form-check-input:checked {
    background-color: var(--arcilla);
    border-color: var(--arcilla-hover);
}
.form-check-input:focus {
    border-color: var(--cobalto);
    box-shadow: 0 0 0 3px var(--cobalto-tinte);
}
.form-check-label { font-size: .85rem; }


/* ── 13. BOTONES ─────────────────────────────────────────────────────────────
   Sin degradados. El relieve es una cota inferior de 1px que crece al pasar el
   cursor: el botón parece un tampón que se levanta del papel. */
.btn {
    --bs-btn-border-radius: var(--r-sm);
    --bs-btn-padding-y: .4rem;
    --bs-btn-padding-x: .85rem;
    --bs-btn-font-size: .84rem;
    font-family: var(--f-cond);
    font-weight: 600;
    letter-spacing: .04em;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(22,35,46,.10);
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.btn:hover:not(:disabled):not(.disabled) {
    box-shadow: 0 2px 0 rgba(22,35,46,.16);
    transform: translateY(-1px);
}
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 0 0 rgba(22,35,46,.10); }
.btn:disabled, .btn.disabled { box-shadow: none; opacity: .5; }
.btn-sm { --bs-btn-padding-y: .26rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .78rem; }
.btn-lg { --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1.1rem; --bs-btn-font-size: .95rem; }

/* Sólidos */
.btn-primary {
    --bs-btn-color: #fff;              --bs-btn-bg: var(--arcilla);        --bs-btn-border-color: var(--arcilla-hover);
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: var(--arcilla-hover); --bs-btn-hover-border-color: var(--arcilla-hover);
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: #83391a;        --bs-btn-active-border-color: #83391a;
    --bs-btn-disabled-color: #fff;     --bs-btn-disabled-bg: var(--arcilla);   --bs-btn-disabled-border-color: var(--arcilla);
}
.btn-success {
    --bs-btn-color: #fff;              --bs-btn-bg: var(--disponible);     --bs-btn-border-color: #3d6834;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: #3d6834;         --bs-btn-hover-border-color: #34592c;
    --bs-btn-active-bg: #34592c;       --bs-btn-disabled-bg: var(--disponible); --bs-btn-disabled-color: #fff;
}
.btn-warning {
    --bs-btn-color: var(--tinta);      --bs-btn-bg: var(--separado);       --bs-btn-border-color: #a5751f;
    --bs-btn-hover-color: var(--tinta);--bs-btn-hover-bg: #a5751f;         --bs-btn-hover-border-color: #8e6419;
    --bs-btn-active-bg: #8e6419;       --bs-btn-disabled-bg: var(--separado); --bs-btn-disabled-color: var(--tinta);
}
.btn-danger {
    --bs-btn-color: #fff;              --bs-btn-bg: var(--peligro);        --bs-btn-border-color: #8a2d21;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: #8a2d21;         --bs-btn-hover-border-color: #75251b;
    --bs-btn-active-bg: #75251b;       --bs-btn-disabled-bg: var(--peligro); --bs-btn-disabled-color: #fff;
}
.btn-info {
    --bs-btn-color: #fff;              --bs-btn-bg: var(--cobalto);        --bs-btn-border-color: var(--cobalto-hover);
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: var(--cobalto-hover); --bs-btn-hover-border-color: #113b4c;
    --bs-btn-active-bg: #113b4c;       --bs-btn-disabled-bg: var(--cobalto); --bs-btn-disabled-color: #fff;
}
.btn-secondary {
    --bs-btn-color: #fff;              --bs-btn-bg: #7d7566;               --bs-btn-border-color: #6a6357;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: #6a6357;         --bs-btn-hover-border-color: #5a544a;
    --bs-btn-active-bg: #5a544a;       --bs-btn-disabled-bg: #7d7566;      --bs-btn-disabled-color: #fff;
}
.btn-dark {
    --bs-btn-color: #fff;              --bs-btn-bg: var(--tinta);          --bs-btn-border-color: #0d161d;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: var(--tinta-2);  --bs-btn-hover-border-color: #0d161d;
    --bs-btn-active-bg: #0d161d;
}
.btn-light {
    --bs-btn-color: var(--tinta);      --bs-btn-bg: var(--carta-2);        --bs-btn-border-color: var(--linea-fuerte);
    --bs-btn-hover-color: var(--tinta);--bs-btn-hover-bg: #ece7dc;         --bs-btn-hover-border-color: var(--linea-fuerte);
    --bs-btn-active-bg: #e3ddd0;
}
.btn-link {
    --bs-btn-color: var(--cobalto);
    --bs-btn-hover-color: var(--cobalto-hover);
    box-shadow: none;
    text-decoration: none;
}
.btn-link:hover { text-decoration: underline; box-shadow: none; transform: none; }

/* Contorno: trazo fino sobre papel, se rellena al pasar el cursor */
.btn-outline-primary {
    --bs-btn-color: var(--arcilla);    --bs-btn-border-color: var(--arcilla);  --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: var(--arcilla);      --bs-btn-hover-border-color: var(--arcilla-hover);
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: var(--arcilla-hover); --bs-btn-active-border-color: var(--arcilla-hover);
    --bs-btn-disabled-color: var(--arcilla); --bs-btn-disabled-border-color: var(--arcilla);
}
.btn-outline-secondary {
    --bs-btn-color: var(--texto-suave); --bs-btn-border-color: var(--linea-fuerte); --bs-btn-bg: #fff;
    --bs-btn-hover-color: var(--tinta); --bs-btn-hover-bg: var(--carta-2);      --bs-btn-hover-border-color: var(--texto-suave);
    --bs-btn-active-color: var(--tinta);--bs-btn-active-bg: #e9e3d6;            --bs-btn-active-border-color: var(--texto-suave);
    --bs-btn-disabled-color: var(--texto-tenue); --bs-btn-disabled-border-color: var(--linea);
}
.btn-outline-success {
    --bs-btn-color: var(--disponible); --bs-btn-border-color: var(--disponible); --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: var(--disponible);   --bs-btn-hover-border-color: #3d6834;
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: #3d6834;
    --bs-btn-disabled-color: var(--disponible); --bs-btn-disabled-border-color: var(--disponible);
}
.btn-outline-danger {
    --bs-btn-color: var(--peligro);    --bs-btn-border-color: var(--peligro);  --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: var(--peligro);      --bs-btn-hover-border-color: #8a2d21;
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: #8a2d21;
    --bs-btn-disabled-color: var(--peligro); --bs-btn-disabled-border-color: var(--peligro);
}
.btn-outline-warning {
    --bs-btn-color: #8e6419;           --bs-btn-border-color: var(--separado); --bs-btn-bg: #fff;
    --bs-btn-hover-color: var(--tinta);--bs-btn-hover-bg: var(--separado);     --bs-btn-hover-border-color: #a5751f;
    --bs-btn-active-color: var(--tinta); --bs-btn-active-bg: #a5751f;
    --bs-btn-disabled-color: var(--separado); --bs-btn-disabled-border-color: var(--separado);
}
.btn-outline-info {
    --bs-btn-color: var(--cobalto);    --bs-btn-border-color: var(--cobalto);  --bs-btn-bg: #fff;
    --bs-btn-hover-color: #fff;        --bs-btn-hover-bg: var(--cobalto);      --bs-btn-hover-border-color: var(--cobalto-hover);
    --bs-btn-active-color: #fff;       --bs-btn-active-bg: var(--cobalto-hover);
    --bs-btn-disabled-color: var(--cobalto); --bs-btn-disabled-border-color: var(--cobalto);
}
.btn-outline-light {
    --bs-btn-color: #f0ece2;           --bs-btn-border-color: rgba(255,255,255,.35); --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--tinta);--bs-btn-hover-bg: #f0ece2;             --bs-btn-hover-border-color: #f0ece2;
    --bs-btn-active-color: var(--tinta); --bs-btn-active-bg: #e3ddd0;
}

/* Botón cuadrado de acción en tabla */
.btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    font-size: .85rem;
}


/* ── 13b. ACCIONES CONSISTENTES ──────────────────────────────────────────────
   Antes cada página resolvía sus botones a mano: unas con .btn-icon cuadrado y
   otras con .btn-sm con texto, que al no caber envolvía a una segunda línea y
   hacía que unas tablas se vieran horizontales y otras verticales. Estas dos
   clases fijan el layout; la semántica de color va en el outline del botón.   */

/* Grupo de acciones al final de una fila de tabla */
.acciones-fila {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    flex-wrap: nowrap;          /* nunca parte a dos líneas */
    white-space: nowrap;
}
.acciones-fila .btn { flex-shrink: 0; }

/* Grupo de acciones de la cabecera de página */
.page-header-acciones {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Semántica de color, igual en toda la app:
     primary   editar / acción principal
     secondary ver, consultar, descargar
     success   confirmar, aprobar, liquidar
     warning   revertir, reabrir, liberar
     danger    eliminar                                                        */

/* ── 14. BUSCADOR ────────────────────────────────────────────────────────── */
.search-box { position: relative; }
.search-box input { padding-left: 2.15rem; }
.search-box .bi-search {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-tenue);
    pointer-events: none;
    transition: color .15s ease;
}
.search-box:focus-within .bi-search { color: var(--cobalto); }


/* ── 15. ESTADO VACÍO ────────────────────────────────────────────────────────
   Parcela sin edificar: recuadro punteado con trama diagonal. */
.empty-state {
    margin: .5rem;
    padding: 2.6rem 1rem;
    text-align: center;
    font-family: var(--f-cond);
    font-size: .9rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--r-sm);
    background-image: repeating-linear-gradient(
        45deg,
        transparent 0 9px,
        rgba(22,35,46,.022) 9px 10px
    );
}
.empty-state i {
    display: block;
    margin-bottom: .7rem;
    font-size: 2.6rem;
    opacity: .3;
}


/* ── 16. FILTROS (PILLS) ─────────────────────────────────────────────────────
   Leyenda del plano: casillas rectangulares, no cápsulas. */
.filter-pills { display: flex; gap: .35rem; flex-wrap: wrap; }

.filter-pill {
    padding: .28rem .8rem;
    font-family: var(--f-cond);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-suave);
    background: #fff;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-sm);
    cursor: pointer;
    user-select: none;
    transition: color .15s ease, border-color .15s ease,
                background-color .15s ease, box-shadow .15s ease;
}
.filter-pill:hover {
    color: var(--arcilla);
    border-color: var(--arcilla);
    box-shadow: inset 0 -2px 0 var(--arcilla-tinte);
}
.filter-pill.active {
    color: #fff;
    background: var(--arcilla);
    border-color: var(--arcilla-hover);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}


/* ── 17. ALERTAS ─────────────────────────────────────────────────────────────
   Nota al margen: cota gruesa a la izquierda, fondo apenas teñido. */
.alert {
    --bs-alert-border-radius: var(--r-sm);
    padding: .6rem .85rem;
    font-size: .85rem;
    border: 1px solid var(--bs-alert-border-color, var(--linea));
    border-left-width: 3px;
}
.alert-light { --bs-alert-bg: var(--carta-2); --bs-alert-border-color: var(--linea); --bs-alert-color: var(--texto-suave); }
.alert .btn-close { --bs-btn-close-opacity: .5; }


/* ── 18. MODAL (.mdl-*) ──────────────────────────────────────────────────────
   Pieza central del rediseño: un plano montado sobre la mesa de dibujo.
   El velo lleva su propia retícula; el panel se enmarca con doble línea. */
.mdl-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-start;      /* con margin:auto en .mdl → centrado real   */
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: rgba(11, 19, 26, .66);
    background-image:
        repeating-linear-gradient(0deg,  transparent 0 39px, rgba(255,255,255,.035) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.035) 39px 40px);
    -webkit-backdrop-filter: blur(1.5px) saturate(.85);
    backdrop-filter: blur(1.5px) saturate(.85);
    animation: velo-entra .16s ease-out both;
}
.mdl-overlay:focus { outline: none; }

/* Bloqueo del scroll de fondo, solo con CSS */
body:has(.mdl-overlay),
.content-area:has(.mdl-overlay),
.cliente-content:has(.mdl-overlay) { overflow: hidden !important; }

.mdl {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: auto;                 /* centra vertical y horizontalmente         */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
    background: var(--carta);
    border-radius: var(--r);
    border-top: 3px solid var(--arcilla);
    /* Doble marco: línea de tinta + passe-partout de papel + caída de sombra */
    box-shadow:
        0 0 0 1px var(--tinta),
        0 0 0 6px rgba(239, 236, 228, .30),
        0 28px 60px -22px rgba(11, 19, 26, .75);
    animation: mdl-entra .22s cubic-bezier(.22, .68, .28, 1) both;
}

/* Anchos */
.mdl-sm { max-width: 420px; }
.mdl-md { max-width: 620px; }
.mdl-lg { max-width: 860px; }
.mdl-xl { max-width: 1100px; }

/* Cabecera — el cartucho del plano */
.mdl-head {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    flex-shrink: 0;
    padding: .9rem 1.1rem;
    background: var(--carta-2);
    border-bottom: 1px solid var(--linea-fuerte);
    border-radius: 0;
}
.mdl-head-txt {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    flex: 1;
}
.mdl-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--arcilla);
    background: #fff;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 2px rgba(251,250,247,1);
}
.mdl-titles { min-width: 0; }
.mdl-titles h5 {
    margin: 0;
    font-family: var(--f-cond);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta);
    overflow-wrap: anywhere;
}
.mdl-titles p {
    margin: .12rem 0 0;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--texto-suave);
}

.mdl-x {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--texto-suave);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.mdl-x:hover {
    color: var(--peligro);
    background: #fff;
    border-color: var(--linea-fuerte);
}

/* Cuerpo — con scroll propio si excede la ventana */
.mdl-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Pie — barra de acciones alineada a la derecha */
.mdl-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .75rem 1.1rem;
    background: var(--carta-2);
    border-top: 1px solid var(--linea-fuerte);
    border-radius: 0 0 var(--r) var(--r);
}


/* ── 19. VALIDACIÓN DE FORMULARIOS ───────────────────────────────────────── */
.campo-error,
.campo-error:focus,
input.campo-error, select.campo-error, textarea.campo-error {
    border-color: var(--peligro) !important;
    background-color: var(--peligro-tinte);
}
.campo-error:focus {
    box-shadow: 0 0 0 3px rgba(163, 57, 43, .16) !important;
}

.campo-ok,
input.campo-ok, select.campo-ok, textarea.campo-ok {
    border-color: var(--disponible) !important;
    background-color: var(--exito-tinte);
}
.campo-ok:focus {
    box-shadow: 0 0 0 3px rgba(74, 124, 63, .18) !important;
}

.msg-error {
    display: block;
    margin-top: .28rem;
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--peligro);
}
.msg-error::before {
    content: "✕";
    margin-right: .3rem;
    font-size: .68rem;
    opacity: .8;
}

/* Banner de error a nivel de formulario (dentro del modal) */
.alerta-form {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-bottom: 1rem;
    padding: .65rem .8rem;
    font-size: .82rem;
    line-height: 1.4;
    color: #6e251b;
    background: var(--peligro-tinte);
    border: 1px solid rgba(163, 57, 43, .28);
    border-left: 3px solid var(--peligro);
    border-radius: var(--r-sm);
}
.alerta-form ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.alerta-form strong { font-family: var(--f-cond); letter-spacing: .03em; }


/* ── 20. AJUSTES DE COMPONENTES BOOTSTRAP ────────────────────────────────── */

/* Modales nativos de Bootstrap (los que aún no usan el componente Modal) */
.modal-content {
    background: var(--carta);
    border: 1px solid var(--tinta);
    border-top: 3px solid var(--arcilla);
    border-radius: var(--r);
    box-shadow: 0 28px 60px -22px rgba(11, 19, 26, .7);
}
.modal-header, .modal-footer {
    background: var(--carta-2);
    border-color: var(--linea-fuerte);
}
.modal-title {
    font-family: var(--f-cond);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.modal-backdrop { --bs-backdrop-bg: #0b131a; --bs-backdrop-opacity: .66; }

/* Barras de progreso: cota de avance sobre papel */
.progress {
    --bs-progress-bg: #e6e0d2;
    --bs-progress-border-radius: var(--r-sm);
    --bs-progress-font-size: .68rem;
    height: 10px;
    border: 1px solid var(--linea);
}
.progress-bar {
    background-color: var(--cobalto);
    font-family: var(--f-mono);
}

/* Spinners */
.spinner-border { border-width: .16em; }

/* Utilidades de superficie */
.bg-white { background-color: var(--carta) !important; }
.bg-light { background-color: var(--carta-2) !important; }
.shadow, .shadow-sm, .shadow-lg {
    box-shadow: 0 1px 0 rgba(22,35,46,.06), 0 0 0 1px var(--linea) !important;
}
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--linea) !important; }
.rounded, .rounded-3 { border-radius: var(--r) !important; }

/* Texto */
.text-muted { color: var(--texto-suave) !important; }
.text-dark  { color: var(--tinta) !important; }
.text-white { color: #fff !important; }
.small, small { font-size: .8rem; }

/* Cifras y valores destacados en mono, aunque la página no lo pida */
.fw-bold, .fw-semibold { letter-spacing: .005em; }

/* Enlaces */
a { color: var(--cobalto); text-decoration-color: rgba(29,95,122,.35); text-underline-offset: 2px; }
a:hover { color: var(--cobalto-hover); }


/* ── 21. PORTAL DEL CLIENTE ──────────────────────────────────────────────── */
.cliente-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cliente-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    padding: .8rem 1.5rem;
    color: #fff;
    background-color: var(--tinta);
    background-image:
        repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.03) 31px 32px);
    border-bottom: 3px solid var(--arcilla);
}

.cliente-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--f-cond);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}
.cliente-brand:hover { color: #fff; }
.cliente-brand i { color: var(--arcilla); font-size: 1.15rem; }

.cliente-user {
    margin-left: auto;
    font-size: .82rem;
    color: #c3cdd6;
}

.cliente-content {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Ficha de lote: lindero de color a la izquierda que se ensancha al pasar */
.cliente-lote-card {
    position: relative;
    border-radius: var(--r);
    border-left: 4px solid var(--cobalto);
    transition: border-left-width .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cliente-lote-card:hover {
    border-left-width: 8px;
    transform: translateX(2px);
    box-shadow: 0 1px 0 rgba(22,35,46,.08), 0 0 0 3px rgba(251,250,247,.6);
}

/* Filas de pago: tinte de estado + cota lateral */
.pago-row-pagado    > td { background: var(--exito-tinte)   !important; }
.pago-row-vencido   > td { background: var(--peligro-tinte) !important; }
.pago-row-pendiente > td { background: var(--aviso-tinte)   !important; }
.pago-row-pagado    > td:first-child { box-shadow: inset 3px 0 0 var(--disponible); }
.pago-row-vencido   > td:first-child { box-shadow: inset 3px 0 0 var(--peligro); }
.pago-row-pendiente > td:first-child { box-shadow: inset 3px 0 0 var(--separado); }


/* ── 22. LOGIN ───────────────────────────────────────────────────────────────
   Hoja de plano en blanco: retícula amplia y una viñeta que centra la mirada. */
.login-page {
    position: relative;
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(22,35,46,.09) 100%);
    pointer-events: none;
}
.login-page > * { position: relative; z-index: 1; width: 100%; max-width: 420px; }
.login-page .card {
    border-top: 3px solid var(--arcilla);
    box-shadow: 0 1px 0 rgba(22,35,46,.08), 0 0 0 8px rgba(251,250,247,.5);
}


/* ── 23. ANIMACIONES ─────────────────────────────────────────────────────────
   Movimiento contenido: nada rebota. Todo entra con precisión de trazo. */
@keyframes velo-entra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Ojo: los fotogramas finales usan `transform: none` a propósito. Un transform
   distinto de none crea un bloque contenedor y rompería el position:fixed del
   overlay del modal si éste se renderiza dentro de una tarjeta. */
@keyframes mdl-entra {
    from { opacity: 0; transform: scale(.976) translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes bloque-entra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes fila-entra {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

/* Sin fill-mode «both»: el estado de reposo es visible y la animación solo añade
   la entrada. Si por lo que sea no llega a ejecutarse (pestaña en segundo plano,
   equipo que no compone frames), la tarjeta se ve igual en vez de quedar en blanco. */
.card, .stat-card { animation: bloque-entra .32s ease-out; }

/* Escalonado de las tarjetas de estadística del dashboard */
.row > *:nth-child(1) .stat-card { animation-delay: 0s; }
.row > *:nth-child(2) .stat-card { animation-delay: .05s; }
.row > *:nth-child(3) .stat-card { animation-delay: .10s; }
.row > *:nth-child(4) .stat-card { animation-delay: .15s; }

/* Revelado escalonado de las filas de tabla al cargar */
.table tbody tr { animation: fila-entra .3s ease-out; }
.table tbody tr:nth-child(1)  { animation-delay: .00s; }
.table tbody tr:nth-child(2)  { animation-delay: .02s; }
.table tbody tr:nth-child(3)  { animation-delay: .04s; }
.table tbody tr:nth-child(4)  { animation-delay: .06s; }
.table tbody tr:nth-child(5)  { animation-delay: .08s; }
.table tbody tr:nth-child(6)  { animation-delay: .10s; }
.table tbody tr:nth-child(7)  { animation-delay: .12s; }
.table tbody tr:nth-child(8)  { animation-delay: .14s; }
.table tbody tr:nth-child(9)  { animation-delay: .16s; }
.table tbody tr:nth-child(10) { animation-delay: .18s; }
.table tbody tr:nth-child(11) { animation-delay: .20s; }
.table tbody tr:nth-child(12) { animation-delay: .22s; }
.table tbody tr:nth-child(n+13) { animation-delay: .24s; }


/* ── 24. RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        width: 0;
        height: 100vh;
        box-shadow: 6px 0 24px -12px rgba(11,19,26,.6);
    }
    .sidebar.open { width: var(--sidebar-width); }

    .content-area { padding: 1rem; }
    .topbar { padding: 0 .9rem; }
    .topbar-title { font-size: .95rem; }
    .page-header h4 { font-size: 1.1rem; }

    .cliente-content { padding: 1.25rem 1rem; }
    .cliente-topbar  { padding: .7rem 1rem; }

    /* El modal ocupa casi toda la pantalla en móvil */
    .mdl-overlay { padding: .75rem; align-items: flex-start; }
    .mdl,
    .mdl-sm, .mdl-md, .mdl-lg, .mdl-xl { max-width: 100%; max-height: calc(100vh - 1.5rem); }
    .mdl-head, .mdl-body, .mdl-foot { padding-inline: .85rem; }
    .mdl-foot .btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
    .stat-card .stat-value { font-size: 1.5rem; }
    .filter-pill { font-size: .72rem; padding: .24rem .6rem; }
}


/* ── 25. MOVIMIENTO REDUCIDO ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover:not(:disabled):not(.disabled),
    .cliente-lote-card:hover { transform: none; }
}