/* =============================================================================
   SISPRO - Hoja de estilos principal
   Estilo: moderno, minimalista, blanco/negro con acentos azul/rojo
   ============================================================================= */

:root{
    --sp-black:#0d0d0d;
    --sp-white:#ffffff;
    --sp-gray-50:#f7f7f8;
    --sp-gray-100:#eeeef0;
    --sp-gray-200:#e2e2e5;
    --sp-gray-400:#9a9aa2;
    --sp-gray-600:#5c5c66;
    --sp-blue:#2563eb;
    --sp-blue-dark:#1d4ed8;
    --sp-red:#dc2626;
    --sp-red-dark:#b91c1c;
    --sp-radius:14px;
    --sp-shadow:0 2px 10px rgba(0,0,0,.06);
    --sp-shadow-hover:0 8px 24px rgba(0,0,0,.10);
    --sidebar-width:250px;
    --sidebar-width-collapsed:76px;
    --topbar-height:64px;
}

*{ box-sizing:border-box; }

body{
    font-family:Calibri, 'Segoe UI', Arial, sans-serif;
    background:var(--sp-gray-50);
    color:var(--sp-black);
    margin:0;
}

a{ text-decoration:none; }

/* ===== Topbar =============================================================== */
.topbar{
    height:var(--topbar-height);
    background:var(--sp-white);
    border-bottom:1px solid var(--sp-gray-200);
    position:sticky;
    top:0;
    z-index:1030;
}
.topbar-brand{ font-weight:700; font-size:1.05rem; letter-spacing:.2px; color:var(--sp-black); }
.btn-icon{ border:none; background:transparent; color:var(--sp-black); font-size:1.05rem; }
.btn-icon:hover{ background:var(--sp-gray-100); border-radius:8px; }
.btn-user{ border:1px solid var(--sp-gray-200); background:var(--sp-white); border-radius:20px; padding:.35rem .9rem; }

/* ===== Layout general ======================================================= */
.app-wrapper{ display:flex; min-height:calc(100vh - var(--topbar-height)); }

.sidebar{
    width:var(--sidebar-width);
    background:var(--sp-white);
    border-right:1px solid var(--sp-gray-200);
    transition:width .2s ease;
    flex-shrink:0;
    position:sticky;
    top:var(--topbar-height);
    height:calc(100vh - var(--topbar-height));
    overflow-y:auto;
}
.app-wrapper.collapsed .sidebar{ width:var(--sidebar-width-collapsed); }
.app-wrapper.collapsed .nav-text,
.app-wrapper.collapsed .sidebar-section-title{ display:none; }

.sidebar .nav-link{
    color:var(--sp-gray-600);
    padding:.7rem 1.25rem;
    font-weight:600;
    font-size:.92rem;
    border-left:3px solid transparent;
    display:flex;
    align-items:center;
    gap:.75rem;
    white-space:nowrap;
}
.sidebar .nav-link i{ width:18px; text-align:center; }
.sidebar .nav-link:hover{ background:var(--sp-gray-50); color:var(--sp-black); }
.sidebar .nav-link.active{ background:var(--sp-gray-50); color:var(--sp-black); border-left-color:var(--sp-blue); }
.sidebar .nav-link.disabled{ color:var(--sp-gray-400); cursor:not-allowed; }
.sidebar-section-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--sp-gray-400); padding:1rem 1.25rem .4rem; font-weight:700; }

.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1025; }

main{ flex:1; padding:1.5rem; width:100%; min-width:0; }

/* ===== Cards ================================================================ */
.card{
    border:1px solid var(--sp-gray-200);
    border-radius:var(--sp-radius);
    box-shadow:var(--sp-shadow);
    background:var(--sp-white);
}
.card:hover{ box-shadow:var(--sp-shadow-hover); }
.card-header{ background:var(--sp-white); border-bottom:1px solid var(--sp-gray-100); font-weight:700; border-radius:var(--sp-radius) var(--sp-radius) 0 0 !important; }

.kpi-card{ border-radius:var(--sp-radius); padding:1.25rem 1.4rem; box-shadow:var(--sp-shadow); border:1px solid var(--sp-gray-200); background:var(--sp-white); }
.kpi-card .kpi-icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.kpi-card .kpi-value{ font-size:1.55rem; font-weight:800; }
.kpi-card .kpi-label{ color:var(--sp-gray-600); font-size:.85rem; font-weight:600; }

.bg-soft-blue{ background:#eaf0fe; color:var(--sp-blue); }
.bg-soft-red{ background:#fdecec; color:var(--sp-red); }
.bg-soft-black{ background:var(--sp-gray-100); color:var(--sp-black); }
.bg-soft-green{ background:#e8f8ee; color:#16a34a; }

/* ===== Botones =============================================================== */
.btn{ border-radius:10px; font-weight:600; }
.btn-primary{ background:var(--sp-blue); border-color:var(--sp-blue); }
.btn-primary:hover{ background:var(--sp-blue-dark); border-color:var(--sp-blue-dark); }
.btn-danger{ background:var(--sp-red); border-color:var(--sp-red); }
.btn-danger:hover{ background:var(--sp-red-dark); border-color:var(--sp-red-dark); }
.btn-outline-dark{ border-color:var(--sp-black); color:var(--sp-black); }
.btn-outline-dark:hover{ background:var(--sp-black); color:var(--sp-white); }

/* ===== Formularios =========================================================== */
.form-control, .form-select{ border-radius:10px; border-color:var(--sp-gray-200); }
.form-control:focus, .form-select:focus{ border-color:var(--sp-blue); box-shadow:0 0 0 .2rem rgba(37,99,235,.15); }
label.form-label{ font-weight:600; font-size:.88rem; }
.campo-calculado{ background:var(--sp-gray-50) !important; font-weight:700; }

/* ===== Tablas ================================================================ */
table.dataTable{ border-collapse:separate !important; border-spacing:0; }
table.dataTable thead th{ background:var(--sp-black); color:var(--sp-white); font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; border:none !important; }
table.dataTable tbody td{ vertical-align:middle; font-size:.9rem; }
.badge-pago{ font-weight:600; border-radius:20px; padding:.4em .8em; }

/* ===== Login ================================================================= */
.login-wrapper{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0d0d0d 0%, #202027 100%); }
.login-card{ width:100%; max-width:400px; border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.35); }

/* ===== Responsive ============================================================= */
@media (max-width: 991.98px){
    .sidebar{ position:fixed; left:0; top:var(--topbar-height); height:calc(100vh - var(--topbar-height)); z-index:1035; transform:translateX(-100%); transition:transform .25s ease; }
    .sidebar.show{ transform:translateX(0); }
    .sidebar-overlay.show{ display:block; }
    main{ padding:1rem; }
}