:root{
    --primary:#0d6efd;
    --primary-dark:#0b5ed7;
    --primary-soft:#eef4ff;
    --success:#198754;
    --success-soft:#eaf8f0;
    --danger:#dc3545;
    --danger-soft:#fdecef;
    --warning:#ffc107;
    --warning-soft:#fff8e1;
    --dark:#1f2937;
    --muted:#6b7280;
    --line:#e5e7eb;
    --bg:#f5f7fb;
    --card:#ffffff;
    --shadow:0 10px 30px rgba(0,0,0,.06);
    --radius:16px;
}

*{
    box-sizing:border-box;
}

html,body{
    min-height:100%;
}

body{
    margin:0;
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--dark);
}

.site-wrap{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* ===== TOP BAR ===== */
.topbar{
    background:#111827;
    color:#e5e7eb;
    font-size:.88rem;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.topbar-inner{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

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

/* ===== NAVBAR ===== */
.main-navbar{
    background:#ffffff;
    border-bottom:1px solid var(--line);
    box-shadow:0 4px 16px rgba(0,0,0,.04);
    padding:12px 0;
    position:sticky;
    top:0;
    z-index:1030;
}

.navbar-brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--dark) !important;
    min-width:0;
}

.brand-logo{
    width:90px;
    height:75px;
    border-radius:14px;
    background:transparent;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    flex-shrink:0;
    border:none;
    padding:0;
}

.brand-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.brand-logo i{
    font-size:1.3rem;
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.05;
    min-width:0;
}

.brand-text strong{
    font-size:1rem;
    font-weight:800;
    color:var(--dark);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.brand-text small{
    font-size:.76rem;
    color:var(--muted);
    font-weight:600;
}

.custom-toggler{
    border:1px solid #dbe3f0;
    background:#fff;
    border-radius:12px;
    padding:.48rem .72rem;
}

.custom-toggler:focus{
    box-shadow:none;
}

.custom-toggler .navbar-toggler-icon{
    filter:invert(1) grayscale(1);
    opacity:.7;
}

.navbar-nav{
    gap:.2rem;
}

.navbar-nav .nav-link{
    color:#374151 !important;
    font-weight:700;
    border-radius:12px;
    padding:.72rem .95rem !important;
    transition:all .18s ease;
    display:flex;
    align-items:center;
}

.navbar-nav .nav-link i{
    font-size:1rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
    background:var(--primary-soft);
    color:var(--primary) !important;
}

.nav-link-danger{
    color:var(--danger) !important;
}

.nav-link-danger:hover{
    background:var(--danger-soft) !important;
    color:var(--danger) !important;
}

/* ===== CONTENIDO ===== */
main{
    flex:1 0 auto;
}

.page-shell{
    padding:28px 0 36px;
}

.page-heading{
    margin-bottom:22px;
}

.page-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--primary-soft);
    color:var(--primary);
    border:1px solid #dbe7ff;
    border-radius:999px;
    padding:7px 14px;
    font-size:.85rem;
    font-weight:700;
    margin-bottom:10px;
}

.page-title{
    margin:0;
    font-size:1.8rem;
    font-weight:800;
    color:#111827;
    letter-spacing:-.02em;
}

.page-subtitle{
    margin:8px 0 0;
    color:var(--muted);
    font-size:.98rem;
}

/* ===== CARDS ===== */
.card{
    border:1px solid rgba(0,0,0,.05);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    background:var(--card);
    overflow:hidden;
}

.card-header{
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:1rem 1.25rem;
    font-weight:800;
    color:#111827;
}

.card-body{
    padding:1.25rem;
}

.card-soft{
    background:linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
}

/* ===== ESTADÍSTICAS ===== */
.stat-card{
    position:relative;
    border-radius:18px;
    padding:20px;
    background:#fff;
    border:1px solid rgba(0,0,0,.05);
    box-shadow:var(--shadow);
    height:100%;
}

.stat-card .icon{
    width:50px;
    height:50px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:1.3rem;
    margin-bottom:14px;
}

.stat-card .label{
    color:var(--muted);
    font-size:.92rem;
    font-weight:600;
}

.stat-card .value{
    font-size:1.85rem;
    font-weight:800;
    color:#111827;
    line-height:1.1;
    margin-top:6px;
}

/* ===== FORMULARIOS ===== */
.form-label{
    font-weight:700;
    color:#1f2937;
    margin-bottom:.45rem;
}

.form-control,
.form-select{
    min-height:48px;
    border-radius:14px;
    border:1px solid #d7dee9;
    padding:.75rem .95rem;
    font-size:.98rem;
    box-shadow:none !important;
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.form-control:focus,
.form-select:focus{
    border-color:#9dc0ff;
    box-shadow:0 0 0 .22rem rgba(13,110,253,.10) !important;
    background:#fff;
}

textarea.form-control{
    min-height:110px;
}

.form-text{
    color:var(--muted);
}

/* ===== BOTONES ===== */
.btn{
    min-height:44px;
    border-radius:12px;
    font-weight:700;
    padding:.72rem 1rem;
    box-shadow:none !important;
}

.btn i{
    font-size:.98rem;
}


.form-select{
    min-height:48px;
    border-radius:14px;
    border:1px solid #d7dee9;
    padding:.75rem 2.7rem .75rem .95rem;
    font-size:.98rem;
    background-color:#fff;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-position:right .95rem center;
    background-size:16px 12px;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
}

.btn-primary{
    background:var(--primary);
    border:1px solid var(--primary);
}

.btn-primary:hover,
.btn-primary:focus{
    background:var(--primary-dark);
    border-color:var(--primary-dark);
}

.btn-success{
    background:var(--success);
    border:1px solid var(--success);
}

.btn-success:hover,
.btn-success:focus{
    background:#157347;
    border-color:#157347;
}

.btn-outline-primary{
    border:1px solid #c9dafd;
    color:var(--primary);
    background:#fff;
}

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

.btn-outline-secondary{
    border:1px solid #d7dee9;
    color:#495057;
    background:#fff;
}

.btn-outline-secondary:hover{
    background:#f8f9fa;
    color:#212529;
}

.btn-light{
    background:#fff;
    border:1px solid var(--line);
    color:#374151;
}

.btn-light:hover{
    background:#f8fafc;
}

.btn-danger{
    background:var(--danger);
    border:1px solid var(--danger);
}

.btn-danger:hover{
    background:#bb2d3b;
    border-color:#bb2d3b;
}

/* ===== TABLAS ===== */
.table-wrap{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:1px solid rgba(0,0,0,.05);
}

.table{
    margin-bottom:0;
    vertical-align:middle;
}

.table thead th{
    background:#f8fafc;
    color:#374151;
    font-size:.88rem;
    font-weight:800;
    border-bottom:1px solid #e5e7eb;
    padding:14px 12px;
    white-space:nowrap;
}

.table tbody td{
    padding:14px 12px;
    border-color:#eef2f7;
    color:#1f2937;
}

.table tbody tr:hover{
    background:#fbfdff;
}

/* ===== BADGES ===== */
.badge{
    border-radius:999px;
    padding:.58em .84em;
    font-weight:700;
    letter-spacing:.2px;
}

.badge-soft-primary{
    background:var(--primary-soft);
    color:var(--primary);
}

.badge-soft-success{
    background:var(--success-soft);
    color:var(--success);
}

.badge-soft-warning{
    background:var(--warning-soft);
    color:#946200;
}

.badge-soft-danger{
    background:var(--danger-soft);
    color:var(--danger);
}

/* ===== LOGIN / ACCESO ===== */
.login-section{
    min-height:calc(100vh - 180px);
    display:flex;
    align-items:center;
    padding:40px 0;
}

.login-card{
    border-radius:24px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 22px 40px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.05);
}

.login-side{
    background:linear-gradient(135deg, #1d4ed8 0%, #0d6efd 100%);
    color:#fff;
    padding:38px 32px;
    min-height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.login-side h2{
    font-size:2rem;
    font-weight:800;
    margin-bottom:12px;
}

.login-side p{
    color:rgba(255,255,255,.88);
    margin-bottom:0;
    line-height:1.7;
}

.login-form{
    padding:34px 30px;
}

.login-logo{
    width:62px;
    height:62px;
    border-radius:18px;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    margin-bottom:14px;
}

/* ===== SUBIDA / PREVIEW ===== */
.file-preview{
    margin-top:10px;
}

.file-preview img{
    max-height:160px;
    border-radius:14px;
    border:1px solid #e5e7eb;
    padding:4px;
    background:#fff;
}

.file-box{
    border:1px dashed #cbd5e1;
    border-radius:16px;
    padding:14px;
    background:#fafcff;
}

/* ===== ALERTAS Y CAJAS ===== */
.section-panel{
    background:#fff;
    border:1px solid rgba(0,0,0,.05);
    border-radius:22px;
    box-shadow:var(--shadow);
    padding:24px;
}

.empty-box{
    text-align:center;
    padding:42px 18px;
    color:var(--muted);
}

.empty-box i{
    font-size:2.2rem;
    color:#9eb5de;
    display:block;
    margin-bottom:12px;
}

.alert{
    border:none;
    border-radius:16px;
    padding:14px 16px;
}

/* ===== WHATSAPP ===== */
.whatsapp-float{
    position:fixed;
    right:18px;
    bottom:18px;
    width:54px;
    height:54px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#25d366;
    color:#fff !important;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(37,211,102,.28);
    z-index:1040;
    font-size:1.35rem;
    transition:transform .15s ease, box-shadow .15s ease;
}

.whatsapp-float:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(37,211,102,.34);
    color:#fff !important;
}

.whatsapp-float span{
    display:none;
}

/* ===== FOOTER ===== */
.site-footer{
    margin-top:auto;
    padding:18px 0 26px;
}

.footer-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    background:#fff;
    border:1px solid rgba(0,0,0,.05);
    box-shadow:var(--shadow);
    border-radius:18px;
    padding:16px 20px;
}

.footer-sub,
.footer-copy{
    color:var(--muted);
    font-size:.92rem;
}

.shadow-soft{
    box-shadow:var(--shadow) !important;
}

.rounded-4{
    border-radius:18px !important;
}

/* ===== BOTONES PEQUEÑOS DE ACCIONES ===== */
.btn-sm{
    min-height:auto;
    padding:.48rem .78rem;
    border-radius:10px;
    font-size:.87rem;
}

.action-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px){
    .topbar-right{
        display:none;
    }

    .navbar-collapse{
        margin-top:14px;
        background:#fff;
        border:1px solid #e5e7eb;
        border-radius:18px;
        padding:12px;
        box-shadow:0 10px 25px rgba(0,0,0,.06);
    }

    .navbar-nav .nav-link{
        padding:.82rem 1rem !important;
    }

    .footer-box{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width: 767.98px){
    .page-shell{
        padding:22px 0 28px;
    }

    .page-title{
        font-size:1.45rem;
    }

    .login-form,
    .login-side{
        padding:24px 20px;
    }

    .card-body{
        padding:1rem;
    }

    .stat-card .value{
        font-size:1.6rem;
    }

    .brand-text strong{
        font-size:.95rem;
    }

    .brand-text small{
        font-size:.72rem;
    }

    .whatsapp-float{
        width:50px;
        height:50px;
        right:14px;
        bottom:14px;
        font-size:1.2rem;
    }
}