/* =====================================================================
   MOTIPRECA · Caja de Ahorro — Hoja de estilos v3.0
   Paleta institucional: azul #34499C · carbón #2B3568 · blanco #FFFFFF
   Identidad azul institucional MOTIPRECA (unificada con toda la Suite).
   ===================================================================== */

:root {
    /* — Colores de marca — */
    --brand:           #34499C;
    --brand-dark:      #2B3568;
    --brand-deeper:    #1C2347;
    --brand-light:     #EEF2FF;
    --brand-mid:       #C7D2FE;

    --charcoal:        #2B3568;
    --charcoal-mid:    #34499C;
    --charcoal-soft:   #475078;
    --charcoal-light:  #888888;

    /* — Semánticos — */
    --success:         #27AE60;
    --success-bg:      #E8F8EF;
    --success-dark:    #1A7A42;

    --danger:          #E74C3C;
    --danger-bg:       #FDECEA;
    --danger-dark:     #B02A1A;

    --warning:         #E67E22;
    --warning-bg:      #FEF5E6;
    --warning-dark:    #7A4200;

    /* — UI — */
    --bg:              #EDEEF2;
    --panel:           #FFFFFF;
    --border:          #E4E5EA;
    --border-light:    #F0F1F5;
    --text:            #2B3568;
    --text-muted:      #888888;

    /* — Sombras — */
    --shadow-xs:       0 1px 3px rgba(0,0,0,.06);
    --shadow:          0 2px 10px rgba(0,0,0,.08);
    --shadow-md:       0 4px 18px rgba(0,0,0,.11);
    --shadow-lg:       0 8px 30px rgba(0,0,0,.14);
    --shadow-brand:    0 4px 16px rgba(90,123,255,.30);

    /* — Geometría — */
    --radius:          14px;
    --radius-sm:       9px;
    --radius-xs:       6px;
    --sidebar-w:       260px;
    --topbar-h:        60px;
}

/* ===========================
   1. RESET & BASE
   =========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand-dark); text-decoration: underline; }
h1,h2,h3,h4,h5 { line-height: 1.25; font-weight: 700; color: var(--charcoal); }

/* ===========================
   2. UTILIDADES
   =========================== */
.text-success { color: var(--success)       !important; }
.text-danger  { color: var(--danger)        !important; }
.text-warning { color: var(--warning)       !important; }
.text-muted   { color: var(--text-muted)    !important; }
.text-brand   { color: var(--brand)         !important; }
.text-right   { text-align: right           !important; }
.text-center  { text-align: center          !important; }
.fw-bold      { font-weight: 700            !important; }
.fw-800       { font-weight: 800            !important; }
.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-1        { gap: .5rem; }
.gap-2        { gap: 1rem; }

.mt-1 { margin-top: .5rem; }   .mt-2 { margin-top: 1rem; }   .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; }.mb-2 { margin-bottom: 1rem; }.mb-3 { margin-bottom: 1.5rem; }
.hidden { display: none !important; }

.divider { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* ===========================
   3. LOGIN
   =========================== */
.login-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Panel izquierdo — branding */
.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='56' viewBox='0 0 128 56'%3E%3Cpath d='M18,8 L38,8 A10,10 0 1,1 38,20 L18,20 A10,10 0 1,0 18,8Z' fill='none' stroke='%23a0b8ff' stroke-opacity='.12' stroke-width='1.2'/%3E%3Cpath d='M82,8 L102,8 A10,10 0 1,1 102,20 L82,20 A10,10 0 1,0 82,8Z' fill='none' stroke='%23a0b8ff' stroke-opacity='.12' stroke-width='1.2'/%3E%3Cpath d='M50,36 L70,36 A10,10 0 1,1 70,48 L50,48 A10,10 0 1,0 50,36Z' fill='none' stroke='%23a0b8ff' stroke-opacity='.12' stroke-width='1.2'/%3E%3Cpath d='M114,36 L134,36 A10,10 0 1,1 134,48 L114,48 A10,10 0 1,0 114,36Z' fill='none' stroke='%23a0b8ff' stroke-opacity='.12' stroke-width='1.2'/%3E%3Cpath d='M-14,36 L6,36 A10,10 0 1,1 6,48 L-14,48 A10,10 0 1,0 -14,36Z' fill='none' stroke='%23a0b8ff' stroke-opacity='.12' stroke-width='1.2'/%3E%3C/svg%3E") repeat,
        linear-gradient(160deg, #10162E 0%, var(--charcoal) 100%);
    background-size: 128px 56px, auto;
    position: relative;
    overflow: hidden;
}
.login-brand::before {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90,123,255,.18) 0%, transparent 68%);
    top: -110px; left: -110px;
    pointer-events: none;
}
.login-brand::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90,123,255,.12) 0%, transparent 65%);
    bottom: -80px; right: -80px;
    pointer-events: none;
}
.login-brand-inner { position: relative; z-index: 1; text-align: center; }
.login-brand-inner .logo-text {
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--brand);
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: .3rem;
}
.login-brand-inner .logo-sub {
    font-size: .82rem;
    color: rgba(255,255,255,.45);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 2.75rem;
}
.login-brand-inner .brand-features {
    list-style: none;
    text-align: left;
    display: inline-block;
}
.login-brand-inner .brand-features li {
    padding: .42rem 0;
    font-size: .88rem;
    color: rgba(255,255,255,.65);
    display: flex;
    align-items: center;
    gap: .65rem;
}
.login-brand-inner .brand-features li::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}

/* Panel derecho — formulario */
.login-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg);
}

.login-card {
    background: var(--panel);
    width: 100%;
    max-width: 400px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2.2rem;
}
.login-card .brand {
    text-align: center;
    margin-bottom: 1.75rem;
}
.login-card .brand h1 {
    font-size: 1.4rem;
    color: var(--brand);
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1;
}
.login-card .brand p {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: .3rem;
}

/* ===========================
   ROMBOS FLOTANTES (login)
   =========================== */
.brand-diamonds {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.brand-diamonds::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 40%, rgba(61,91,184,.28), transparent),
        radial-gradient(ellipse 50% 60% at 15% 80%, rgba(90,123,255,.18), transparent),
        radial-gradient(ellipse 45% 50% at 85% 10%, rgba(43,53,104,.36), transparent);
}
.bd {
    position: absolute;
    border: 1.5px solid rgba(90,123,255,.25);
    animation: bd-drift linear infinite;
    will-change: transform;
    translate: var(--px, 0px) var(--py, 0px);
    transition: translate .4s cubic-bezier(.2,.8,.3,1);
    transform: rotate(45deg);
}
.bd.filled { background: rgba(61,91,184,.1); }
.bd1  { width: 90px;  height: 90px;  top: 8%;  left: 6%;  animation-duration: 20s; animation-delay: 0s;   opacity: .75; }
.bd2  { width: 160px; height: 160px; top: 15%; left: 74%; animation-duration: 25s; animation-delay: -8s;  opacity: .5;  border-width: 1px; }
.bd3  { width: 55px;  height: 55px;  top: 70%; left: 12%; animation-duration: 16s; animation-delay: -4s;  opacity: .7; }
.bd4  { width: 220px; height: 220px; top: 58%; left: 52%; animation-duration: 30s; animation-delay: -14s; opacity: .28; border-width: 1px; }
.bd5  { width: 40px;  height: 40px;  top: 35%; left: 45%; animation-duration: 12s; animation-delay: -2s;  opacity: .55; }
.bd6  { width: 120px; height: 120px; top: 82%; left: 30%; animation-duration: 22s; animation-delay: -10s; opacity: .45; }
.bd7  { width: 70px;  height: 70px;  top: 48%; left: 80%; animation-duration: 18s; animation-delay: -5s;  opacity: .6; }
.bd8  { width: 180px; height: 180px; top: 3%;  left: 42%; animation-duration: 28s; animation-delay: -18s; opacity: .32; border-width: 1px; }

@keyframes bd-drift {
    0%   { transform: rotate(45deg) translateY(0)      scale(1);    }
    25%  { transform: rotate(62deg) translateY(-65px)  scale(1.1);  }
    50%  { transform: rotate(45deg) translateY(-115px) scale(1.02); }
    75%  { transform: rotate(28deg) translateY(-65px)  scale(.93);  }
    100% { transform: rotate(45deg) translateY(0)      scale(1);    }
}

/* Fallback: layout de solo columna si no hay .login-brand */
.login-wrap.single-col {
    grid-template-columns: 1fr;
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-mid) 100%);
    align-items: center;
    justify-items: center;
}

/* ===========================
   4. FORMULARIOS
   =========================== */
.form-group { margin-bottom: 1.1rem; }

.form-group label {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .38rem;
    color: var(--charcoal);
    letter-spacing: .01em;
}
.form-group label .req { color: var(--danger); font-weight: 800; }

.form-control {
    width: 100%;
    padding: .68rem .92rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .92rem;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    transition: border-color .18s, box-shadow .18s, background .18s;
    appearance: none;
    -webkit-appearance: none;
}
.form-control:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(90,123,255,.14);
    background: #F8FAFF;
}
.form-control:disabled {
    background: var(--border-light);
    cursor: not-allowed;
    color: var(--text-muted);
}
select.form-control {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    padding-right: 2.2rem;
}
textarea.form-control { resize: vertical; min-height: 90px; }

/* Toggle mostrar/ocultar contraseña */
.pwd-wrap { position: relative; display: block; }
.pwd-wrap .form-control { padding-right: 46px !important; }
.pwd-eye {
    position: absolute !important; right: 10px; top: 50%; transform: translateY(-50%);
    background: none !important; border: none !important; outline: none !important;
    box-shadow: none !important; appearance: none; -webkit-appearance: none;
    cursor: pointer; padding: 5px; margin: 0;
    color: #b0bec5; display: flex; align-items: center;
    transition: color .15s; line-height: 0;
}
.pwd-eye:hover { color: #546e7a; }

.form-hint { font-size: .77rem; color: var(--text-muted); margin-top: .28rem; line-height: 1.4; }
.form-hint.hint-success { color: var(--success); }
.form-hint.hint-danger  { color: var(--danger); }
.form-hint.hint-warning { color: var(--warning); }

/* Sección de formulario con título */
.form-section {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.25rem;
    background: #FDFEFF;
}
.form-section .section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--brand);
    margin-bottom: .8rem;
    display: block;
}

.form-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* ===========================
   5. BOTONES
   =========================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1.4rem;
    border: 1.5px solid transparent;
    border-radius: 50px;
    font-size: .875rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .16s, border-color .16s, transform .07s, box-shadow .16s, opacity .16s;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: .01em;
    line-height: 1.3;
}
.btn:active  { transform: translateY(1px); }
.btn:hover   { text-decoration: none; }
.btn:disabled,
.btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: var(--shadow-brand);
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; box-shadow: 0 6px 22px rgba(90,123,255,.4); }

.btn-secondary {
    background: var(--charcoal);
    color: #fff;
    border-color: var(--charcoal);
}
.btn-secondary:hover { background: var(--charcoal-mid); border-color: var(--charcoal-mid); color: #fff; }

.btn-outline {
    background: transparent;
    color: var(--brand);
    border-color: var(--brand);
}
.btn-outline:hover { background: var(--brand-light); color: var(--brand-dark); }

.btn-ghost {
    background: transparent;
    color: var(--charcoal-soft);
    border-color: var(--border);
}
.btn-ghost:hover { background: var(--border-light); color: var(--charcoal); }

.btn-success { background: var(--success); color: #fff; border-color: var(--success); box-shadow: 0 3px 12px rgba(39,174,96,.28); }
.btn-success:hover { background: #1E9952; border-color: #1E9952; color: #fff; }

.btn-danger  { background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: 0 3px 12px rgba(231,76,60,.28); }
.btn-danger:hover  { background: #C0392B; border-color: #C0392B; color: #fff; }

.btn-block { width: 100%; }
.btn-sm    { padding: .32rem .85rem; font-size: .78rem; gap: .3rem; }
.btn-lg    { padding: .78rem 1.8rem; font-size: 1rem; }

/* Botón circular (solo icono) */
.btn-circle {
    width: 44px; height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.btn-circle.btn-sm { width: 32px; height: 32px; font-size: .85rem; }
.btn-circle.btn-lg { width: 56px; height: 56px; font-size: 1.4rem; }

/* ===========================
   6. ACCIONES RÁPIDAS (dashboard)
      Botones ovales con ícono + etiqueta
   =========================== */
.action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 1.25rem;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    padding: 1.1rem .85rem .85rem;
    min-width: 92px;
    border-radius: 18px;
    background: var(--panel);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: transform .17s, box-shadow .17s, border-color .17s, background .17s;
    text-decoration: none;
    color: var(--charcoal);
}
.action-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-mid);
    background: var(--brand-light);
    color: var(--brand-dark);
    text-decoration: none;
}
.action-btn .action-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    background: var(--brand-light);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: background .17s, color .17s;
    flex-shrink: 0;
}
.action-btn:hover .action-icon { background: var(--brand); color: #fff; }
.action-btn .action-label {
    font-size: .71rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ===========================
   7. LAYOUT APP (sidebar + topbar + contenido)
   =========================== */
.app { display: flex; min-height: 100vh; }

/* — Sidebar — */
.sidebar {
    width: var(--sidebar-w);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='56' viewBox='0 0 128 56'%3E%3Cpath d='M18,8 L38,8 A10,10 0 1,1 38,20 L18,20 A10,10 0 1,0 18,8Z' fill='none' stroke='%23a0b8ff' stroke-opacity='.07' stroke-width='1.2'/%3E%3Cpath d='M82,8 L102,8 A10,10 0 1,1 102,20 L82,20 A10,10 0 1,0 82,8Z' fill='none' stroke='%23a0b8ff' stroke-opacity='.07' stroke-width='1.2'/%3E%3Cpath d='M50,36 L70,36 A10,10 0 1,1 70,48 L50,48 A10,10 0 1,0 50,36Z' fill='none' stroke='%23a0b8ff' stroke-opacity='.07' stroke-width='1.2'/%3E%3Cpath d='M114,36 L134,36 A10,10 0 1,1 134,48 L114,48 A10,10 0 1,0 114,36Z' fill='none' stroke='%23a0b8ff' stroke-opacity='.07' stroke-width='1.2'/%3E%3Cpath d='M-14,36 L6,36 A10,10 0 1,1 6,48 L-14,48 A10,10 0 1,0 -14,36Z' fill='none' stroke='%23a0b8ff' stroke-opacity='.07' stroke-width='1.2'/%3E%3C/svg%3E") repeat,
        linear-gradient(180deg, #10162E 0%, #1C2347 60%, var(--charcoal) 100%);
    background-size: 128px 56px, auto;
    color: rgba(255,255,255,.7);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
    z-index: 200;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.sidebar .brand {
    padding: 1.25rem 1.4rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar .brand .brand-name {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--brand);
    letter-spacing: -.015em;
    line-height: 1.1;
}
.sidebar .brand .brand-sub {
    font-size: .66rem;
    color: rgba(255,255,255,.3);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: .18rem;
}

.sidebar nav { padding: .55rem 0; flex: 1; }

.sidebar nav .nav-section {
    padding: 1rem 1.4rem .28rem;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: rgba(255,255,255,.25);
    font-weight: 600;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem 1.4rem;
    color: rgba(255,255,255,.62);
    font-size: .875rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    margin: .04rem 0;
    transition: color .14s, background .14s, border-color .14s;
}
.sidebar nav a:hover {
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.92);
    text-decoration: none;
    border-left-color: rgba(90,123,255,.4);
}
.sidebar nav a.active {
    background: rgba(90,123,255,.18);
    border-left-color: #7B9FFF;
    color: #fff;
    font-weight: 700;
}
.sidebar nav a.active:hover { background: rgba(90,123,255,.26); }

/* — Área principal — */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 0 1.5rem;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 1rem;
}
.topbar .topbar-left   { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.topbar .page-title    { font-size: 1rem; font-weight: 700; color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .user-box      { display: flex; align-items: center; gap: .6rem; font-size: .83rem; flex-shrink: 0; }
.topbar .user-box > span { color: var(--charcoal-soft); }

.content { padding: 1.5rem; flex: 1; }

/* Overlay de cierre de sidebar en móvil */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.42);
    z-index: 199;
}
.sidebar-overlay.active { display: block; }

/* ===========================
   8. CARDS
   =========================== */
.card {
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.3rem 1.5rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--brand);
    transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card h2, .card h3 { color: var(--charcoal); margin-bottom: .85rem; }
.card h2 { font-size: 1.05rem; font-weight: 700; }
.card h3 { font-size: .95rem; font-weight: 700; }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: .75rem;
    flex-wrap: wrap;
}
.card-title { font-size: 1rem; font-weight: 700; color: var(--charcoal); margin: 0; }

.card.card-plain   { border-top-color: var(--border-light); }
.card.card-success { border-top-color: var(--success); }
.card.card-danger  { border-top-color: var(--danger); }
.card.card-warning { border-top-color: var(--warning); }

/* ===========================
   9. KPI GRID
   =========================== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kpi {
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.15rem 1.3rem 1rem;
    border: 1px solid var(--border-light);
    border-bottom: 3px solid var(--brand);
    position: relative;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Ícono decorativo de fondo */
.kpi[data-icon]::before {
    content: attr(data-icon);
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.8rem;
    opacity: .07;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.kpi .label {
    font-size: .72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .35rem;
    line-height: 1.3;
}
.kpi .value {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--charcoal);
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.kpi .kpi-sub   { font-size: .75rem; color: var(--text-muted); margin-top: .22rem; }
.kpi .kpi-trend { font-size: .75rem; font-weight: 700; margin-top: .18rem; }
.kpi .kpi-trend.up   { color: var(--success); }
.kpi .kpi-trend.down { color: var(--danger); }

.kpi.green  { border-bottom-color: var(--success); }
.kpi.red    { border-bottom-color: var(--danger); }
.kpi.gray   { border-bottom-color: var(--charcoal-soft); }
.kpi.orange { border-bottom-color: var(--brand); }

.kpi.green .value { color: var(--success); }
.kpi.red   .value { color: var(--danger); }

/* ===========================
   10. TABLAS
   =========================== */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    background: var(--panel);
}
table.data th {
    padding: .72rem 1rem;
    text-align: left;
    background: #F5F6FA;
    font-weight: 700;
    color: var(--charcoal);
    white-space: nowrap;
    border-bottom: 2px solid var(--border);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
table.data td {
    padding: .68rem 1rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
    vertical-align: middle;
}
table.data th.text-right,
table.data td.text-right { text-align: right; font-variant-numeric: tabular-nums; }

table.data tbody tr:nth-child(even) td { background: #FAFBFC; }
table.data tbody tr:hover td { background: var(--brand-light); }
table.data tbody tr:last-child td { border-bottom: none; }

/* Fila resaltada (e.g. próxima cuota) */
table.data tbody tr.row-highlight td {
    background: #FFF8F2 !important;
    border-left: 3px solid var(--brand);
}

/* ===========================
   11. TABS (componente unificado)
   =========================== */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
    padding: .65rem 1.2rem;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: none;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color .16s, border-color .16s;
    line-height: 1.4;
}
.tab-btn:hover  { color: var(--charcoal); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }

.tab-pane         { display: none; }
.tab-pane.active  { display: block; }

/* ===========================
   12. BADGES
   =========================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .22rem .62rem;
    border-radius: 20px;
    font-size: .69rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: .025em;
    line-height: 1.4;
    white-space: nowrap;
}

/* — Estados de préstamos / ahorros — */
.badge-pending,   .badge-pendiente    { background: #FFF3DC; color: #9B6700; }
.badge-approved,  .badge-aprobado     { background: var(--success-bg); color: var(--success-dark); }
.badge-rejected,  .badge-rechazado    { background: var(--danger-bg);  color: var(--danger-dark); }
.badge-active,    .badge-activo       { background: var(--brand-light); color: var(--brand-dark); }
.badge-paid,      .badge-liquidado,
.badge-pagado                         { background: #ECEFF1; color: #546E7A; }
.badge-cancelled, .badge-cancelado    { background: #F4EDF8; color: #6A1B9A; }
.badge-overdue,   .badge-vencido      { background: var(--danger-bg); color: var(--danger); }
.badge-sent,      .badge-enviado      { background: #FEF5E6; color: var(--warning-dark); }
.badge-processed, .badge-procesado    { background: var(--success-bg); color: var(--success-dark); }
.badge-draft,     .badge-borrador     { background: #ECEFF1; color: var(--charcoal-soft); }

/* — Genéricos — */
.badge-success { background: var(--success-bg); color: var(--success-dark); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-dark); }
.badge-warning { background: #FFF3DC;            color: #9B6700; }
.badge-info    { background: var(--brand-light); color: var(--brand-dark); }
.badge-muted   { background: #ECEFF1;            color: var(--charcoal-soft); }

/* ===========================
   13. ALERTAS
   =========================== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .88rem 1.15rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: .875rem;
    border-left: 4px solid;
    line-height: 1.5;
}
.alert .alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: .06rem; }

.alert-success { background: var(--success-bg); border-color: var(--success); color: #1A5C2E; }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger);  color: #8B1A0E; }
.alert-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-dark); }
.alert-info    { background: var(--brand-light); border-color: var(--brand);  color: var(--brand-deeper); }

/* Banner: admin capturando a nombre de empleado */
.alert-admin-behalf {
    background: #FFF3DC;
    border-color: var(--brand);
    border-left-width: 5px;
    color: #7A4200;
    font-weight: 700;
    font-size: .9rem;
}

/* Banner: advertencia crítica (rojo prominente) */
.alert-critical {
    background: var(--danger-bg);
    border-color: var(--danger);
    border-left-width: 5px;
    color: #8B1A0E;
    font-weight: 700;
}

/* ===========================
   14. INDICADOR DE CAPACIDAD (30%)
   =========================== */
.capacity-meter {
    background: var(--border);
    border-radius: 20px;
    height: 20px;
    overflow: hidden;
}
.capacity-meter .fill {
    height: 100%;
    background: var(--success);
    border-radius: 20px;
    transition: width .4s cubic-bezier(.4,0,.2,1), background .3s;
}
.capacity-meter.warn .fill { background: var(--warning); }
.capacity-meter.over .fill { background: var(--danger); }
.capacity-label             { font-size: .79rem; font-weight: 700; margin-top: .3rem; }
.capacity-label.over        { color: var(--danger); }
.capacity-label.warn        { color: var(--warning); }

/* ===========================
   15. TOAST
   =========================== */
#toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
    max-width: 360px;
    width: calc(100vw - 2rem);
}
.toast {
    background: var(--charcoal);
    color: #fff;
    padding: .88rem 1.1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: .875rem;
    border-left: 4px solid var(--brand);
    animation: toastIn .25s ease;
    position: relative;
    overflow: hidden;
    pointer-events: all;
    line-height: 1.45;
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }

/* Barra de progreso auto-dismiss */
.toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    background: rgba(255,255,255,.3);
    animation: toastProgress var(--toast-duration, 3.5s) linear forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(18px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
    to   { opacity: 0; transform: translateX(14px) scale(.96); }
}
@keyframes toastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ===========================
   16. MODAL
   =========================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 1rem;
    backdrop-filter: blur(3px);
    animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
    background: var(--panel);
    border-radius: var(--radius);
    max-width: 500px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    padding: 1.65rem 1.8rem;
    animation: slideUp .2s ease;
    border-top: 3px solid var(--brand);
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.modal h3   { margin-bottom: .85rem; font-size: 1.05rem; }
.modal p    { color: var(--charcoal-soft); font-size: .92rem; line-height: 1.55; }
.modal-actions {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    margin-top: 1.4rem;
    flex-wrap: wrap;
}

/* ===========================
   17. SIMULADOR DE NÓMINA
   =========================== */
.salary-sim {
    background: linear-gradient(135deg, #F8FAFF 0%, #EEF2FF 100%);
    border: 1.5px solid rgba(90,123,255,.22);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.25rem;
    margin-top: 1rem;
}
.salary-sim h4 {
    font-size: .72rem;
    color: var(--brand);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: .75rem;
}
.salary-sim .sim-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .34rem 0;
    border-bottom: 1px dashed rgba(90,123,255,.18);
    font-size: .875rem;
    gap: .5rem;
}
.salary-sim .sim-row:last-child { border-bottom: none; }
.salary-sim .sim-row .sim-val   { font-variant-numeric: tabular-nums; font-weight: 600; }
.salary-sim .sim-row.sim-total  {
    font-weight: 800;
    font-size: 1rem;
    color: var(--brand);
    border-top: 2px solid rgba(90,123,255,.25);
    border-bottom: none;
    margin-top: .28rem;
    padding-top: .55rem;
}
.salary-sim .sim-row.sim-total.negative { color: var(--danger); }

/* ===========================
   18. OPCIONES DE AJUSTE
   =========================== */
.adjust-options { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: .65rem; }
.adjust-chip {
    padding: .28rem .82rem;
    border-radius: 50px;
    border: 1.5px solid var(--brand);
    background: #fff;
    color: var(--brand);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .13s, color .13s, transform .08s;
    font-family: inherit;
}
.adjust-chip:hover { background: var(--brand); color: #fff; transform: scale(1.04); }

/* ===========================
   19. DISPLAY DE NÚMERO FORMATEADO
   =========================== */
.number-display {
    font-size: .78rem;
    color: var(--brand);
    font-weight: 600;
    margin-top: .2rem;
    min-height: 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* ===========================
   20. ESTADO VACÍO
   =========================== */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
}
.empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: .75rem;
    opacity: .45;
    line-height: 1;
    display: block;
}
.empty-state p {
    font-size: .9rem;
    margin-bottom: 1rem;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ===========================
   21. STAT ROW (resumen horizontal)
   =========================== */
.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: .85rem 0;
}
.stat-row .stat            { display: flex; flex-direction: column; gap: .15rem; }
.stat-row .stat .stat-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-weight: 600;
}
.stat-row .stat .stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--charcoal);
    font-variant-numeric: tabular-nums;
}

/* ===========================
   22. IMPRESIÓN
   =========================== */
@media print {
    .sidebar, .topbar, .menu-toggle, .btn:not(.btn-print),
    .alert-admin-behalf, .tabs, #toast-container { display: none !important; }
    .main { display: block; }
    .content { padding: 0; }
    .card  { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
    .kpi   { box-shadow: none; border: 1px solid #ccc; }
    body   { font-size: 11pt; background: #fff; }
    table.data th { background: #f0f0f0 !important; }
    a      { color: inherit; text-decoration: none; }
}

/* ===========================
   23. RESPONSIVE
   =========================== */
@media (max-width: 860px) {
    .sidebar {
        position: fixed;
        left: calc(-1 * var(--sidebar-w) - 12px);
        transition: left .25s cubic-bezier(.4,0,.2,1);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { left: 0; }
    .menu-toggle  { display: inline-flex !important; }
    .content      { padding: 1rem; }
    .kpi-grid     { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
    .form-grid-2,
    .form-grid-3  { grid-template-columns: 1fr; }
    .topbar .user-box > span  { display: none; }
    .action-grid  { gap: .6rem; }
    .action-btn   { min-width: 76px; padding: .85rem .55rem .7rem; }
    .login-wrap   { grid-template-columns: 1fr; }
    .login-brand  { display: none; }
}

@media (max-width: 480px) {
    .kpi .value         { font-size: 1.35rem; }
    .card               { padding: 1rem 1.1rem; }
    table.data th,
    table.data td       { padding: .55rem .65rem; }
    .kpi-grid           { grid-template-columns: 1fr 1fr; }
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.35rem;
    cursor: pointer;
    color: var(--charcoal);
    padding: .3rem .4rem;
    border-radius: var(--radius-xs);
    transition: background .12s;
    line-height: 1;
}
.menu-toggle:hover { background: var(--border-light); }