*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f7f8fa;color:#17233a}.app{display:flex;min-height:100vh}.sidebar{width:260px;flex:0 0 260px;height:100vh;position:sticky;top:0;background:#101d33;color:#fff;padding:20px 14px;display:flex;flex-direction:column}.brand{height:92px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,255,255,.08);margin:0 4px 20px}.brand img{max-width:205px;max-height:75px;object-fit:contain}.group{font-size:10px;letter-spacing:1.4px;color:#7f8da6;font-weight:800;margin:20px 12px 8px}.sidebar nav a{position:relative;display:flex;gap:12px;align-items:center;color:#b7c1d2;text-decoration:none;padding:12px 14px;border-radius:8px;margin:3px 0;font-size:13px;font-weight:650}.sidebar nav a span{width:18px;text-align:center}.sidebar nav a:hover,.sidebar nav a.active{background:#192a46;color:#fff}.sidebar nav a.active:before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;background:#cf2029;border-radius:0 3px 3px 0}.side-status{margin-top:auto;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;background:#13223a}.side-status small{display:block;color:#7f8da6;font-size:9px;font-weight:800;letter-spacing:1px}.side-status b{display:block;font-size:12px;margin:8px 0 4px}.side-status i,.pending i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#98a2b3;margin-right:6px}.side-status span{font-size:10px;color:#8190a7}.workspace{flex:1;min-width:0}.topbar{height:64px;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid #e8ebf0;display:flex;align-items:center;justify-content:space-between;padding:0 28px;color:#657084;font-size:12px;font-weight:600}.topbar>div{display:flex;align-items:center;gap:16px}.pending{font-size:11px;color:#768195}.avatar{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid #e2e6ec;border-radius:50%;background:#f5f6f8;color:#38445a;font-size:11px}.content{padding:28px 32px 50px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;gap:20px}.eyebrow{display:block;color:#d11f2a;font-size:12px;font-weight:800;letter-spacing:1.5px;margin-bottom:7px}.page-head h1{margin:0;color:#0f1d33;font-size:36px;letter-spacing:-.5px}.page-head p{margin:7px 0 0;color:#778399;font-size:15px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 16px;border-radius:9px;border:1px solid #dce2ea;background:#fff;color:#34445f;text-decoration:none;font-size:12px;font-weight:750;cursor:pointer}.btn.red{background:#c51f26;border-color:#c51f26;color:#fff;box-shadow:0 4px 12px rgba(197,31,38,.14)}.grid{display:grid;gap:18px}.stats{grid-template-columns:repeat(4,1fr);margin-bottom:20px}.card{background:#fff;border:1px solid #e3e8ef;border-radius:16px;padding:22px;box-shadow:0 8px 24px rgba(15,29,51,.035)}.stat{display:flex;align-items:center;gap:14px}.stat-icon{width:43px;height:43px;border-radius:11px;background:#eef2ff;color:#3155d9;display:flex;align-items:center;justify-content:center;font-size:19px}.stat small{display:block;color:#8995a9;font-size:11px;font-weight:700;margin-bottom:5px}.stat strong{font-size:23px;color:#17233a}.two-col{grid-template-columns:2fr 1fr}.card h3{margin:0;color:#101d32;font-size:18px}.card-sub{color:#8995a9;font-size:13px;margin:6px 0 20px}.chart-wrap{height:280px}.status-list{margin-top:18px}.status-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #edf0f4;font-size:13px}.status-row:last-child{border:0}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:20px;font-size:11px;font-weight:750;background:#eef9f1;color:#18833b}.pill.gray{background:#f2f4f7;color:#667085}.toolbar{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;margin-bottom:20px}.field label{display:block;color:#6f7b91;font-size:10px;font-weight:800;margin:0 0 7px}.field input,.field select{width:100%;height:42px;border:1px solid #dfe4eb;border-radius:9px;background:#fff;padding:0 12px;color:#34445f}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table thead tr{background:#f7f8fa}.table th{padding:14px 15px;color:#6f7b91;font-size:10px;font-weight:800;letter-spacing:.4px;text-align:left;border-bottom:1px solid #e5e9ef;white-space:nowrap}.table td{padding:16px 15px;border-bottom:1px solid #edf0f4;font-size:13px;color:#354056;vertical-align:middle}.table tbody tr:hover{background:#fafbfc}.doc{font-weight:800;color:#17233a}.muted{color:#8b96a8;font-size:11px}.money{font-weight:800;color:#17233a}.section-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.section-title p{margin:5px 0 0;color:#8995a9;font-size:13px}.count{background:#f4f6f9;color:#738097;border-radius:9px;padding:7px 11px;font-size:11px;font-weight:750}.footer-row{display:flex;justify-content:space-between;align-items:center;padding-top:18px;color:#8995a9;font-size:11px}.pages{display:flex;gap:6px}.pages button{width:32px;height:32px;border:1px solid #dce2ea;border-radius:8px;background:#fff;color:#526078}.pages .on{background:#101d33;color:#fff;border-color:#101d33}.form-card{max-width:950px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview{margin-top:22px;border-top:1px solid #edf0f4;padding-top:22px}.preview-head{display:flex;justify-content:space-between}.metrics{grid-template-columns:repeat(4,1fr);margin-top:18px}.metric{background:#f8f9fb;border:1px solid #e9edf2;border-radius:12px;padding:15px}.metric small{display:block;color:#8995a9;font-size:10px;margin-bottom:6px}.metric strong{font-size:16px}.total-box{display:flex;justify-content:flex-end;margin-top:18px}.total-box div{width:320px}.line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #edf0f4;font-size:13px}.line.total{font-size:18px;font-weight:800;border:0;color:#101d32}.notice{margin-top:18px;padding:14px;border-radius:10px;background:#f7f8fa;color:#667085;font-size:12px}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.config-grid{grid-template-columns:repeat(2,1fr)}.config-card{min-height:155px}.config-card .stat-icon{margin-bottom:16px}.config-card p{color:#8995a9;font-size:13px;line-height:1.5}.contact-select{max-width:450px;margin-bottom:20px}.empty{text-align:center;padding:55px 20px;color:#8995a9}.empty b{display:block;color:#17233a;font-size:16px;margin:10px}.back{display:inline-block;margin-bottom:18px;color:#667085;text-decoration:none;font-size:12px;font-weight:700}@media(max-width:900px){.sidebar{width:220px;flex-basis:220px}.stats,.metrics{grid-template-columns:repeat(2,1fr)}.two-col,.config-grid{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr 1fr}.content{padding:22px}.page-head h1{font-size:30px}}@media(max-width:650px){.sidebar{display:none}.stats,.metrics,.form-grid,.toolbar{grid-template-columns:1fr}.page-head{flex-direction:column}.topbar>span{display:none}.topbar{justify-content:flex-end}}


/* LOGIN DEMO */
.avatar{text-decoration:none}
.login-body{margin:0;min-height:100vh;background:#f7f8fa;font-family:Inter,Segoe UI,Arial,sans-serif;color:#17233a}.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(390px,46%) 1fr}.login-brand-panel{position:relative;background:#101d33;color:#fff;padding:58px 64px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.login-brand-panel:after{content:"";position:absolute;width:440px;height:440px;border:1px solid rgba(255,255,255,.055);border-radius:50%;right:-220px;bottom:-100px;box-shadow:0 0 0 85px rgba(255,255,255,.018),0 0 0 170px rgba(255,255,255,.012)}.login-brand-content{position:relative;z-index:1;max-width:500px}.login-brand-content img{width:245px;max-height:100px;object-fit:contain;object-position:left center;margin-bottom:76px}.login-kicker{display:block;color:#ef3a42;font-size:12px;font-weight:850;letter-spacing:2px;margin-bottom:13px}.login-brand-content h1{font-size:42px;line-height:1.12;letter-spacing:-1px;margin:0 0 20px;font-weight:750}.login-brand-content p{max-width:440px;color:#9eabc0;font-size:15px;line-height:1.7;margin:0}.login-demo-status{display:inline-flex;align-items:center;gap:8px;margin-top:34px;padding:9px 12px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.035);color:#aeb9ca;font-size:11px;font-weight:650}.login-demo-status i{width:7px;height:7px;border-radius:50%;background:#98a2b3}.login-brand-panel>small{position:relative;z-index:1;color:#697991;font-size:10px}.login-form-panel{display:flex;align-items:center;justify-content:center;padding:45px;background:#f7f8fa}.login-card{width:100%;max-width:430px}.login-mark{width:48px;height:48px;border:1px solid #e0e5ec;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;color:#34445f;font-size:13px;font-weight:850;margin-bottom:30px;box-shadow:0 5px 18px rgba(15,29,51,.04)}.login-card h2{margin:0;color:#0f1d33;font-size:34px;letter-spacing:-.5px}.login-sub{margin:9px 0 30px;color:#7e8a9e;font-size:14px;line-height:1.5}.login-field{margin-bottom:18px}.login-field label{display:block;color:#68758b;font-size:10px;font-weight:850;letter-spacing:.6px;margin-bottom:8px}.login-field input{width:100%;height:48px;border:1px solid #dfe4eb;border-radius:10px;background:#fff;padding:0 14px;color:#26354d;font-size:13px;outline:none;transition:.15s}.login-field input:focus{border-color:#aab4c4;box-shadow:0 0 0 3px rgba(16,29,51,.04)}.password-wrap{position:relative}.password-wrap input{padding-right:48px}.password-wrap button{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;background:transparent;color:#8490a4;cursor:pointer;font-size:14px}.login-button{width:100%;height:48px;border:0;border-radius:10px;background:#c51f26;color:#fff;font-size:13px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 5px 14px rgba(197,31,38,.16);margin-top:7px}.login-button:hover{background:#b91d24}.login-button span{font-size:17px}.login-error{margin:-10px 0 20px;padding:12px 14px;border:1px solid #f2d0d2;border-radius:9px;background:#fff2f3;color:#a91d26;font-size:12px;font-weight:650}.demo-credentials{margin-top:24px;padding:14px 16px;border:1px solid #e3e8ef;border-radius:11px;background:#fff;color:#7b879a;font-size:11px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}.demo-credentials strong{grid-column:1/-1;color:#4d5a70;font-size:11px}.demo-credentials b{color:#27364e}.login-card>.eyebrow{margin-bottom:7px}@media(max-width:850px){.login-shell{grid-template-columns:1fr}.login-brand-panel{display:none}.login-form-panel{min-height:100vh;padding:28px}.login-card{max-width:420px}}
/* =========================================================
   MENÚ MÓVIL
   ========================================================= */

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #e1e6ed;
    border-radius: 9px;

    background: #ffffff;

    color: #101d33;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
}

.topbar-left {
    gap: 12px;
}

.topbar-right {
    gap: 16px;
}

.sidebar-overlay {
    display: none;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 768px) {

    /*
       Sidebar oculto fuera de la pantalla.
       No usamos display:none porque necesitamos
       poder deslizarlo.
    */

    .sidebar {
        display: flex !important;

        position: fixed;
        top: 0;
        left: 0;

        width: 280px;
        max-width: 84vw;
        height: 100vh;

        z-index: 2000;

        transform: translateX(-100%);

        transition: transform 0.25s ease;

        box-shadow: none;
    }

    /*
       Cuando JS agrega esta clase,
       aparece el menú.
    */

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

        box-shadow:
            12px 0 35px rgba(0, 0, 0, 0.18);
    }


    /* Fondo oscuro */

    .sidebar-overlay {
        display: block;

        position: fixed;
        inset: 0;

        z-index: 1900;

        background: rgba(9, 18, 32, 0.48);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease;
    }

    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }


    /* Botón hamburguesa */

    .mobile-menu-button {
        display: flex;
    }


    /* TOPBAR */

    .topbar {
        padding-left: 18px;
        padding-right: 18px;
    }

    .topbar-title {
        display: none;
    }

    .topbar-left {
        display: flex;
    }

    .topbar-right {
        margin-left: auto;
    }


    /* Ajustamos un poco el texto */

    .pending {
        font-size: 11px;
    }
}


/* Teléfonos pequeños */

@media (max-width: 480px) {

    .sidebar {
        width: 270px;
    }

    .topbar {
        padding-left: 14px;
        padding-right: 14px;
    }

    .pending {
        font-size: 10px;
    }

    .mobile-menu-button {
        width: 40px;
        height: 40px;

        font-size: 20px;
    }
}