/* =============================================
   site.css - Sistema de Nómina y Préstamos
   ============================================= */

:root {
    --primary: #1e40af;
    --primary-h: #1e3a8a;
    --secondary: #0891b2;
    --accent: #f59e0b;
    --success: #059669;
    --danger: #dc2626;
    --warning: #d97706;
    --info: #7c3aed;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --radius: 10px;
    --shadow: 0 2px 12px rgba(0,0,0,.08);
    --shadow-md: 0 4px 24px rgba(0,0,0,.12);
    --navbar-h: 64px;
    --sidebar-w: 230px;
    --sidebar-w-collapsed: 76px;
    --topbar-h: 64px;
    --sidebar-bg: linear-gradient(180deg, #f0fbf7 0%, #edf6fc 55%, #eaf2fd 100%);
    --sidebar-text: #2b3f52;
    --sidebar-text-muted: #5c7690;
    --sidebar-hover-bg: rgba(5,150,105,.10);
    --sidebar-active-grad: linear-gradient(135deg, #059669, #0891b2);
    --sidebar-border: rgba(15,23,42,.07);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 15px;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* ---- APP SHELL / SIDEBAR ---- */
.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.3px;
    padding: 1.35rem 1.5rem;
    border-bottom: 1px solid var(--sidebar-border);
    white-space: nowrap;
}

    .sidebar-logo {
        width: 36px;
        height: 36px;
        object-fit: contain;
        flex: 0 0 auto;
    }

.sidebar-nav {
    flex: 1;
    padding: 1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--sidebar-text-muted);
    text-decoration: none;
    padding: .7rem .9rem;
    border-radius: 8px;
    font-size: .92rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

    .sidebar-link i {
        width: 1.1rem;
        text-align: center;
        font-size: 1rem;
        opacity: .9;
        flex: 0 0 auto;
    }

    .sidebar-link:hover {
        background: var(--sidebar-hover-bg);
        color: var(--sidebar-text);
    }

    .sidebar-link.active {
        background: var(--sidebar-active-grad);
        color: #fff;
        box-shadow: 0 3px 12px rgba(8,145,178,.28);
    }

.sidebar-footer {
    padding: .75rem;
    border-top: 1px solid var(--sidebar-border);
}

    .sidebar-footer .sidebar-link:hover {
        background: #fee2e2;
        color: #b91c1c;
    }

/* ---- TOPBAR ---- */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg);
}

.topbar {
    height: var(--topbar-h);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 90;
    gap: 1rem;
}

.topbar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-muted);
    font-size: .85rem;
    white-space: nowrap;
}

    .topbar-user i {
        font-size: 1.4rem;
        color: var(--primary);
    }

.topbar-user-name {
    font-weight: 600;
    color: var(--text);
}

.topbar-user-role {
    opacity: .7;
    font-size: .75rem;
}

@media (max-width: 900px) {
    .sidebar {
        width: var(--sidebar-w-collapsed);
        flex-basis: var(--sidebar-w-collapsed);
    }

    .sidebar-brand {
        justify-content: center;
        padding: 1.35rem .5rem;
    }

    .sidebar-brand-text {
        display: none;
    }

    .sidebar-link {
        justify-content: center;
        padding: .7rem;
    }

        .sidebar-link span {
            display: none;
        }

    .topbar-user-role {
        display: none;
    }
}

/* ---- CONTAINER ---- */
.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
    width: 100%;
}

/* ---- DASHBOARD: se adapta de forma fluida al alto/ancho real de la
   ventana (no solo a resoluciones fijas), para que se alcance a ver
   completo sin necesidad de hacer scroll en la mayoría de tamaños de
   pantalla/ventana. Usa clamp() con unidades "vh" (% del alto visible)
   para que el espaciado se comprima o expanda solo, en vivo, conforme
   se cambia el tamaño de la ventana — sin depender de listar cada
   resolución posible. Solo afecta al Dashboard (body.page-dashboard),
   el resto de las pantallas no cambia. */
body.page-dashboard .container {
    padding-top: clamp(.75rem, 3vh, 2rem);
    padding-bottom: clamp(1rem, 3vh, 3rem);
}

body.page-dashboard .footer {
    padding: clamp(.5rem, 1.6vh, 1.5rem);
}

body.page-dashboard .page-header {
    margin-bottom: clamp(.6rem, 2vh, 1.75rem);
}

body.page-dashboard .stats-grid {
    margin-bottom: clamp(.6rem, 1.5vh, 1.25rem);
    gap: clamp(.6rem, 1.2vh, 1rem);
}

body.page-dashboard .stat-card {
    padding: clamp(.5rem, 1.2vh, .9rem) 1.25rem 0;
}

body.page-dashboard .stat-card-top {
    padding-bottom: clamp(.4rem, 1vh, .75rem);
}

body.page-dashboard .stat-card-chart {
    height: clamp(30px, 6vh, 46px);
}

/* ---- ALERTS ---- */
.alert {
    padding: .9rem 1.2rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 500;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.alert-error {
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
}

/* ---- PAGE HEADER ---- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    gap: 1rem;
}

    .page-header h1 {
        font-size: 1.6rem;
        color: var(--text);
    }

        .page-header h1 i {
            color: var(--primary);
            margin-right: .4rem;
        }

.page-header-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex: 0 0 auto;
}

.subtitle {
    color: var(--text-muted);
    font-size: .9rem;
    display: block;
    margin-top: .2rem;
}

/* ---- DASHBOARD STATS ----
   190px de mínimo (antes 220px) para que las 4 tarjetas quepan en una
   sola fila en más anchos de ventana — con el sidebar sin colapsar
   (ventanas >900px), 220px hacía que la 4ª tarjeta se fuera a una
   segunda fila ya desde 1024-1150px de ancho, lo cual duplicaba el alto
   de esta sección sin necesidad. */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: .9rem 1.25rem 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    border-left: 4px solid;
    transition: transform .2s;
    overflow: hidden;
}

    .stat-card:hover {
        transform: translateY(-2px);
    }

.stat-card-top {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding-bottom: .75rem;
}

.stat-card-chart {
    height: 46px;
    margin: 0 -1.5rem;
}

.stat-blue {
    border-color: var(--primary);
}

.stat-orange {
    border-color: var(--accent);
}

.stat-green {
    border-color: var(--success);
}

.stat-red {
    border-color: var(--danger);
}

.stat-icon {
    font-size: 2rem;
    opacity: .7;
}

.stat-blue .stat-icon {
    color: var(--primary);
}

.stat-orange .stat-icon {
    color: var(--accent);
}

.stat-green .stat-icon {
    color: var(--success);
}

.stat-red .stat-icon {
    color: var(--danger);
}

.stat-value {
    /* clamp() en vez de un tamaño fijo: en tarjetas angostas (ventana
       chica, o varias tarjetas por fila) el número se achica solo lo
       necesario para no cortarse — importante porque son montos en
       pesos, y un valor recortado ($23,000.0 en vez de $23,000.00) se
       puede confundir con el monto real. */
    font-size: clamp(1.15rem, 1.6vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.stat-label {
    color: var(--text-muted);
    font-size: .85rem;
    margin-top: .3rem;
}

/* ---- DASHBOARD: TENDENCIA + RANKING ----
   Los tamaños con clamp(mínimo, preferido-en-vh, máximo) hacen que el
   espaciado se ajuste solo, en vivo, al alto real de la ventana —
   ventanas cortas (o cuando el ancho baja de 1100px y las dos tarjetas
   se apilan una sobre otra) quedan más compactas automáticamente, y
   ventanas grandes usan el espaciado normal, sin tener que afinar cada
   resolución a mano. */
.dashboard-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(.6rem, 1.5vh, 1rem);
    margin-bottom: clamp(.6rem, 1.5vh, 1.25rem);
    align-items: stretch;
}

.chart-card, .ranking-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: clamp(.6rem, 1.4vh, 1rem) 1.1rem;
    box-shadow: var(--shadow);
}

/* .dashboard-main usa align-items:stretch, así que .chart-card se
   estira para igualar el alto de .ranking-card (que depende de cuántos
   departamentos haya). Sin esto, la gráfica se quedaba con su alto fijo
   de siempre y sobraba espacio en blanco abajo dentro de la tarjeta ya
   estirada — con flex column + flex:1 en el contenedor de la gráfica,
   esta crece para ocupar todo el espacio real de la tarjeta. */
.chart-card {
    display: flex;
    flex-direction: column;
    /* .chart-card es también un elemento de la grilla .dashboard-main,
       y tanto grid como flex le dan por default un ancho/alto mínimo
       basado en el contenido ("min-width: auto") — el <canvas> de
       Chart.js trae un ancho real en píxeles bastante grande (para que
       se vea nítido en pantallas de alta resolución), y sin este
       min-width:0 ese ancho se filtraba hacia arriba y empujaba TODA
       la página de lado. Es el mismo tipo de bug que ya se había
       corregido antes en los campos de filtro (ver ronda de pantallas
       chicas), aquí aplicado a la gráfica. */
    min-width: 0;
}

.chart-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(.35rem, 1vh, .65rem);
    flex: none;
}

    .chart-card-header h2 {
        font-size: 1.05rem;
        color: var(--text);
        font-weight: 700;
    }

        .chart-card-header h2 i {
            color: var(--secondary);
            margin-right: .4rem;
        }

.chart-canvas-wrap {
    position: relative;
    /* flex-basis en 0 (no "auto"): así el alto de partida de este
       contenedor lo decide el espacio disponible en la tarjeta, no el
       tamaño que el propio <canvas> reporte tener — con "auto" se
       formaba un ciclo (Chart.js mide el contenedor para dibujar, el
       contenedor mide el canvas para su alto) que dejaba el alto
       "atorado" en un valor que no respetaba min-height. */
    flex: 1 1 0;
    min-height: clamp(100px, 20vh, 220px);
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.chart-canvas-wrap canvas {
    max-width: 100%;
}

.chart-empty {
    /* flex-basis en 0 (no "auto"): así el alto de partida de este
       contenedor lo decide el espacio disponible en la tarjeta, no el
       tamaño que el propio <canvas> reporte tener — con "auto" se
       formaba un ciclo (Chart.js mide el contenedor para dibujar, el
       contenedor mide el canvas para su alto) que dejaba el alto
       "atorado" en un valor que no respetaba min-height. */
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--text-muted);
    font-size: .88rem;
    padding: 2.5rem 1rem;
    text-align: center;
}

    .chart-empty i {
        font-size: 1.6rem;
        opacity: .5;
    }

.ranking-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .05rem;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: clamp(.12rem, .5vh, .22rem) .1rem;
    border-bottom: 1px solid var(--border);
}

    .ranking-item:last-child {
        border-bottom: none;
    }

/* Estas reglas van DESPUÉS de las bases de arriba a propósito: en CSS,
   con la misma especificidad gana la que aparece más abajo en el
   archivo, así que un @media puesto antes de la regla que quiere
   sobrescribir simplemente pierde. */
@media (max-width: 1100px) {
    .dashboard-main {
        grid-template-columns: 1fr;
        gap: clamp(.4rem, .8vh, .6rem);
    }

    /* Al apilarse, las dos tarjetas comparten el mismo alto de ventana
       que antes usaba solo una — se comprimen más para compensar. */
    .chart-canvas-wrap {
        min-height: clamp(75px, 12vh, 150px);
    }

    .chart-card, .ranking-card {
        padding: clamp(.4rem, 1vh, .7rem) .9rem;
    }

    .chart-card-header {
        margin-bottom: clamp(.2rem, .6vh, .4rem);
    }

    /* Si hay muchos departamentos, la lista ya no puede crecer sin
       límite cuando las tarjetas están apiladas — a partir de cierto
       alto se queda con su propio scroll interno (sigue teniendo TODOS
       los departamentos, solo que se recorren deslizando el dedo/mouse
       dentro de esa tarjeta), en vez de empujar el resto de la página
       hacia abajo. */
    .ranking-list {
        max-height: 16vh;
        overflow-y: auto;
    }
}

.ranking-badge {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    background: #eef2f7;
    color: var(--text-muted);
}

.ranking-badge-1 {
    background: var(--accent);
    color: #fff;
}

.ranking-badge-2 {
    background: var(--secondary);
    color: #fff;
}

.ranking-badge-3 {
    background: var(--info);
    color: #fff;
}

.ranking-nombre {
    flex: 1;
    font-size: .88rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-monto {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
}

/* ---- QUICK ACTIONS ---- */
.quick-actions {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: clamp(.6rem, 1.4vh, 1rem) 1.1rem;
    box-shadow: var(--shadow);
}

    .quick-actions h2 {
        font-size: 1.05rem;
        margin-bottom: clamp(.3rem, 1vh, .6rem);
        color: var(--text-muted);
        font-weight: 600;
    }

.actions-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ---- BUTTONS ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.2rem;
    border-radius: 7px;
    font-weight: 500;
    font-size: .9rem;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

    .btn-primary:hover {
        background: var(--primary-h);
    }

.btn-secondary {
    background: var(--secondary);
    color: #fff;
}

    .btn-secondary:hover {
        background: #0e7490;
    }

.btn-outline {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

    .btn-outline:hover {
        background: var(--primary);
        color: #fff;
    }

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

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

.btn-sm {
    padding: .35rem .8rem;
    font-size: .82rem;
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: .88rem;
    text-decoration: underline;
    padding: 0;
}

.btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: var(--text-muted);
    text-decoration: none;
    transition: all .2s;
    font-size: .9rem;
}

    .btn-icon:hover {
        background: var(--primary);
        color: #fff;
    }

.btn-icon-edit:hover {
    background: var(--secondary);
    color: #fff;
}

.btn-icon-danger:hover {
    background: var(--danger);
    color: #fff;
}

.btn-icon-success:hover {
    background: var(--success);
    color: #fff;
}

.btn-icon-warning:hover {
    background: var(--warning);
    color: #fff;
}

/* ---- FILTER BAR ---- */
.filter-bar {
    background: var(--bg-card);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
}

.filter-form {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    min-width: 0;
}

    .input-group i {
        position: absolute;
        left: .8rem;
        color: var(--text-muted);
    }

.input-search {
    padding: .5rem .75rem .5rem 2.2rem;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: .9rem;
    width: 100%;
    max-width: 280px;
    min-width: 0;
}

    .input-search:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(30,64,175,.1);
    }

.checkbox-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    cursor: pointer;
    color: var(--text-muted);
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-control-sm {
    padding: .4rem .65rem;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: .88rem;
}

/* ---- TABLE ---- */
.table-wrapper {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

    .data-table thead tr {
        background: #f1f5f9;
    }

    .data-table th {
        padding: .75rem .75rem;
        text-align: left;
        font-weight: 600;
        color: var(--text-muted);
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        border-bottom: 2px solid var(--border);
        white-space: nowrap;
    }

    .data-table th.text-center {
        text-align: center;
    }

    .data-table th.text-right {
        text-align: right;
    }

    .data-table td {
        padding: .7rem .75rem;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        white-space: nowrap;
    }

    .data-table tbody tr:last-child td {
        border-bottom: none;
    }

    .data-table tbody tr:hover {
        background: #f8fafc;
    }

.row-inactive {
    opacity: .55;
}

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

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

.table-footer {
    padding: .7rem 1rem;
    color: var(--text-muted);
    font-size: .85rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
}

.actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

/* ---- BADGES ---- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
}

.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-info {
    background: #ede9fe;
    color: #4c1d95;
}

.badge-mono {
    background: #f1f5f9;
    color: #334155;
    font-family: monospace;
    font-size: .82rem;
}

.interest-tag {
    background: #ede9fe;
    color: #6d28d9;
    border-radius: 4px;
    padding: .1rem .4rem;
    font-size: .75rem;
    font-weight: 700;
    margin-right: .3rem;
}

/* ---- FORM CARD ---- */
.form-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.form-section {
    padding: 1.75rem 2rem;
    border-bottom: 1px solid var(--border);
}

    .form-section:last-of-type {
        border-bottom: none;
    }

.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-grid {
    display: grid;
    gap: 1.25rem;
}

.form-grid-1 {
    grid-template-columns: 1fr;
}

.form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .form-grid-2, .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ---- RESPONSIVE: pantallas chicas (tablet vertical / celular) ----
   El objetivo es que nada se corte ni empuje la página entera de lado
   (scroll horizontal de TODA la pantalla): los encabezados y filtros se
   acomodan en columna, y las tablas anchas se quedan con su propio
   scroll horizontal contenido (con una pista de que hay más columnas),
   en vez de desbordar el resto de la página. */
@media (max-width: 640px) {
    .container {
        padding: 1.25rem .85rem 2rem;
    }

    .topbar {
        padding: 0 1rem;
        gap: .5rem;
    }

    .topbar-title {
        font-size: .95rem;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

        .page-header > .btn,
        .page-header > a.btn {
            justify-content: center;
        }

    .filter-form,
    .filter-bar form {
        flex-direction: column;
        align-items: stretch;
    }

        .filter-form .form-control,
        .filter-form select,
        .filter-form input,
        .filter-form .input-search,
        .filter-bar form .form-control,
        .filter-bar form select,
        .filter-bar form input {
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
        }

        .filter-form .input-group {
            flex-basis: auto;
        }

        .filter-form .btn,
        .filter-bar form .btn {
            width: 100%;
            justify-content: center;
        }

    /* Pista visual de que una tabla ancha se puede deslizar, ya que en
       celular no siempre se ve la barra de scroll. Se agrega debajo de
       CUALQUIER .table-wrapper sin tener que tocar cada vista. */
    .table-wrapper {
        position: relative;
        -webkit-overflow-scrolling: touch;
    }

        .table-wrapper::after {
            content: '\2190 desliza la tabla para ver más columnas \2192';
            display: block;
            text-align: center;
            font-size: .72rem;
            color: var(--text-muted);
            padding: .45rem;
            background: #f8fafc;
            border-top: 1px solid var(--border);
        }

}

.form-group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.form-label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
}

    .form-label.required::after {
        content: ' *';
        color: var(--danger);
    }

.form-control {
    padding: .55rem .85rem;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    font-size: .9rem;
    color: var(--text);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}

    .form-control:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(30,64,175,.1);
    }

    .form-control::placeholder {
        color: #94a3b8;
    }

textarea.form-control {
    resize: vertical;
}

.field-error {
    color: var(--danger);
    font-size: .8rem;
}

.field-hint {
    color: var(--text-muted);
    font-size: .78rem;
}

.input-prefix {
    display: flex;
    align-items: center;
}

.prefix {
    background: #f1f5f9;
    border: 1.5px solid var(--border);
    border-right: none;
    padding: .55rem .75rem;
    border-radius: 7px 0 0 7px;
    font-weight: 600;
    color: var(--text-muted);
}

.input-prefix .form-control {
    border-radius: 0 7px 7px 0;
}

.form-actions {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    background: #f8fafc;
    border-top: 1px solid var(--border);
}

/* ---- INTEREST CALC BOX ---- */
.calc-box {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    border: 1.5px solid #c4b5fd;
}

.calc-grid {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.calc-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.calc-label {
    font-size: .8rem;
    font-weight: 600;
    color: #6d28d9;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.calc-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #4c1d95;
}

.calc-total .calc-value {
    font-size: 1.7rem;
}

/* ---- EMPTY STATE ---- */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

    .empty-state i {
        font-size: 3.5rem;
        color: var(--border);
        margin-bottom: 1rem;
        display: block;
    }

    .empty-state p {
        color: var(--text-muted);
        margin-bottom: 1.25rem;
        font-size: 1.05rem;
    }

/* ---- CATALOGS ---- */
.catalog-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.catalog-tile {
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
}

    .catalog-tile:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .catalog-tile.active {
        border-color: var(--primary);
        background: #eef2ff;
    }

.catalog-tile-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background .2s, color .2s;
}

    .catalog-tile.active .catalog-tile-icon {
        background: var(--primary);
        color: #fff;
    }

.catalog-tile-label {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
}

.catalog-tile-count {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: var(--primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 .4rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Colores distintivos por catálogo ---- */
.catalog-tile-blue .catalog-tile-icon { background: #dbeafe; color: var(--primary); }
.catalog-tile-blue .catalog-tile-count { background: var(--primary); }
.catalog-tile-blue:hover { box-shadow: 0 6px 20px rgba(30,64,175,.22); }
.catalog-tile-blue.active { border-color: var(--primary); background: #eff6ff; }
.catalog-tile-blue.active .catalog-tile-icon { background: var(--primary); color: #fff; }

.catalog-tile-teal .catalog-tile-icon { background: #cffafe; color: var(--secondary); }
.catalog-tile-teal .catalog-tile-count { background: var(--secondary); }
.catalog-tile-teal:hover { box-shadow: 0 6px 20px rgba(8,145,178,.22); }
.catalog-tile-teal.active { border-color: var(--secondary); background: #ecfeff; }
.catalog-tile-teal.active .catalog-tile-icon { background: var(--secondary); color: #fff; }

.catalog-tile-violet .catalog-tile-icon { background: #ede9fe; color: var(--info); }
.catalog-tile-violet .catalog-tile-count { background: var(--info); }
.catalog-tile-violet:hover { box-shadow: 0 6px 20px rgba(124,58,237,.22); }
.catalog-tile-violet.active { border-color: var(--info); background: #f5f3ff; }
.catalog-tile-violet.active .catalog-tile-icon { background: var(--info); color: #fff; }

.catalog-tile-green .catalog-tile-icon { background: #d1fae5; color: var(--success); }
.catalog-tile-green .catalog-tile-count { background: var(--success); }
.catalog-tile-green:hover { box-shadow: 0 6px 20px rgba(5,150,105,.22); }
.catalog-tile-green.active { border-color: var(--success); background: #ecfdf5; }
.catalog-tile-green.active .catalog-tile-icon { background: var(--success); color: #fff; }

.catalog-tile-orange .catalog-tile-icon { background: #fef3c7; color: var(--accent); }
.catalog-tile-orange .catalog-tile-count { background: var(--accent); }
.catalog-tile-orange:hover { box-shadow: 0 6px 20px rgba(245,158,11,.22); }
.catalog-tile-orange.active { border-color: var(--accent); background: #fffbeb; }
.catalog-tile-orange.active .catalog-tile-icon { background: var(--accent); color: #fff; }

.catalog-panels {
    display: block;
}

.catalog-panel {
    display: none;
    animation: catalogFadeIn .18s ease-out;
}

    .catalog-panel.visible {
        display: block;
    }

@keyframes catalogFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.catalog-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: .9rem;
    padding: 2rem 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.catalog-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.catalog-header {
    background: var(--primary);
    padding: 1rem 1.5rem;
}

.catalog-header-blue { background: linear-gradient(135deg, var(--primary), var(--primary-h)); }
.catalog-header-teal { background: linear-gradient(135deg, #0891b2, #0e7490); }
.catalog-header-violet { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.catalog-header-green { background: linear-gradient(135deg, #059669, #047857); }
.catalog-header-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }

    .catalog-header h2 {
        color: #fff;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

.catalog-body {
    padding: 1.25rem 1.5rem;
}

.inline-add-form {
    margin-bottom: 1rem;
    padding: .6rem;
    border-radius: 8px;
    transition: background .2s, box-shadow .2s;
}

    .inline-add-form.editing {
        background: #fffbeb;
        box-shadow: 0 0 0 1.5px var(--warning);
    }

.inline-form-group {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

    .inline-form-group .form-control {
        flex: 1;
        min-width: 120px;
    }

.inline-form-cancel {
    display: none;
    align-items: center;
    font-size: .82rem;
    color: var(--text-muted);
    padding: 0 .5rem;
}

.catalog-table-wrapper {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.catalog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

    .catalog-table th {
        position: sticky;
        top: 0;
        padding: .5rem .75rem;
        text-align: left;
        font-weight: 600;
        color: var(--text-muted);
        font-size: .78rem;
        text-transform: uppercase;
        background: #f8fafc;
        border-bottom: 1px solid var(--border);
    }

    .catalog-table td {
        padding: .45rem .75rem;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }

    .catalog-table tr:last-child td {
        border-bottom: none;
    }

    .catalog-table tbody tr:nth-child(even) {
        background: #f8fafc;
    }

    .catalog-table tbody tr:hover {
        background: #eef2ff;
    }

.catalog-empty {
    padding: .75rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .85rem;
    font-style: italic;
}

.catalog-note {
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: .75rem;
    font-style: italic;
}

/* ---- MISC ---- */
.inline-form {
    display: inline;
}

/* ---- FOOTER ---- */
.footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: .85rem;
    border-top: 1px solid var(--border);
}