/* ============================================================
   style.css — DASE.PH v2.0
   Diseño Clean Corporativo · Sora + DM Sans
============================================================ */

/* ── Variables ─────────────────────────────────────────── */
:root {
    --ink:#0B1120; --ink2:#3D4A5C; --ink3:#7A8899;
    --brand:#2563EB; --brand-dark:#1D4ED8; --brand-light:#EFF4FF;
    --surf:#FFFFFF; --surf2:#F4F6FA; --surf3:#EEF1F7; --bdr:#E2E8F0;
    --ok:#059669;  --ok-bg:#ECFDF5;
    --warn:#F59E0B; --warn-bg:#FFFBEB;
    --danger:#E11D48; --danger-bg:#FFF1F4;
    --r:10px; --rl:16px;
}

/* ── Reset base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'DM Sans',system-ui,sans-serif; background:var(--surf2); color:var(--ink); }
.sora { font-family:'Sora',sans-serif; }
h1,h2,h3 { font-family:'Sora',sans-serif; }

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#D1D5DB; border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:#9CA3AF; }

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar-link {
    transition: all .15s;
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
    margin: 1px 8px 1px 0;
    color: rgba(255,255,255,.55);
    display: flex;
    align-items: center;
    padding: 9px 18px;
    font-size: 13px;
    cursor: pointer;
    gap: 10px;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
}
.sidebar-link.active {
    background: var(--brand);
    border-left: 3px solid rgba(255,255,255,.3);
    color: #fff !important;
}
.sidebar-link:hover:not(.active) {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.9) !important;
}
.sb-section-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    padding: 10px 20px 3px;
    display: block;
}

/* ── Vistas ────────────────────────────────────────────── */
.view-section { display:none; animation:fadeIn .25s ease-out; }
.view-section.active { display:block; }
@keyframes fadeIn {
    from { opacity:0; transform:translateY(5px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Panel lateral ─────────────────────────────────────── */
.panel-lateral {
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.panel-lateral.open { transform: translateX(0); }

/* ── Topbar ────────────────────────────────────────────── */
.dase-topbar {
    background: var(--surf);
    border-bottom: 1px solid var(--bdr);
    padding: 0 24px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}
.tb-pill {
    background: var(--surf2);
    border: 1px solid var(--bdr);
    border-radius: 20px;
    padding: 4px 11px;
    font-size: 11px;
    color: var(--ink2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tb-dot { width:6px; height:6px; border-radius:50%; background:var(--ok); display:inline-block; }

/* ── KPI Cards ─────────────────────────────────────────── */
.kpi-card {
    background: var(--surf);
    border: 1px solid var(--bdr);
    border-radius: var(--rl);
    padding: 18px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .2s, transform .2s;
}
.kpi-card:hover { box-shadow:0 4px 20px rgba(37,99,235,.1); transform:translateY(-2px); }
.kpi-bar  { position:absolute; top:0; left:0; right:0; height:3px; }
.kpi-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:17px; }
.kpi-num  { font-family:'Sora',sans-serif; font-size:24px; font-weight:700; color:var(--ink); line-height:1; }
.kpi-lbl  { font-size:11px; color:var(--ink3); margin-top:4px; }

/* ── Cards genéricas ───────────────────────────────────── */
.dase-card { background:var(--surf); border:1px solid var(--bdr); border-radius:var(--rl); padding:18px; }
.dase-card-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dase-card-title { font-family:'Sora',sans-serif; font-size:13px; font-weight:600; color:var(--ink); }
.dase-chip { font-size:10px; font-weight:600; padding:3px 10px; border-radius:20px; background:var(--brand-light); color:var(--brand); }

/* ── Tablas ────────────────────────────────────────────── */
.dase-table { width:100%; border-collapse:collapse; }
.dase-table thead th {
    background: var(--surf2);
    color: var(--ink3);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    padding: 11px 18px;
    border-bottom: 1px solid var(--bdr);
    text-align: left;
    white-space: nowrap;
}
.dase-table tbody tr { border-bottom:1px solid var(--surf2); transition:background .12s; }
.dase-table tbody tr:hover { background:var(--surf2); }
.dase-table tbody td { padding:13px 18px; font-size:13px; color:var(--ink2); }

/* ── Inputs y labels ───────────────────────────────────── */
.dase-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--bdr);
    border-radius: 8px;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: var(--ink);
    background: var(--surf);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.dase-input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }
select.dase-input { appearance:auto; }
textarea.dase-input { resize:none; height:auto; }
.dase-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

/* ── Botones ───────────────────────────────────────────── */
.btn-primary {
    background: var(--brand); color:#fff; border:none;
    border-radius:9px; padding:8px 16px;
    font-size:13px; font-weight:600;
    font-family:'DM Sans',sans-serif;
    cursor:pointer; transition:background .15s, transform .1s;
    display:inline-flex; align-items:center; gap:4px;
    white-space:nowrap;
}
.btn-primary:hover { background:var(--brand-dark); }
.btn-primary:active { transform:scale(.98); }

.btn-ghost {
    background:transparent; color:var(--ink2);
    border:1px solid var(--bdr); border-radius:9px;
    padding:7px 14px; font-size:13px; font-weight:500;
    font-family:'DM Sans',sans-serif; cursor:pointer;
    transition:background .15s; white-space:nowrap;
}
.btn-ghost:hover { background:var(--surf2); }

.btn-danger {
    background:var(--danger-bg); color:var(--danger);
    border:1px solid #FECDD3; border-radius:9px;
    padding:7px 14px; font-size:13px; font-weight:600;
    font-family:'DM Sans',sans-serif; cursor:pointer;
    transition:background .15s, color .15s;
    display:inline-flex; align-items:center; gap:4px;
}
.btn-danger:hover { background:var(--danger); color:#fff; }

.btn-success {
    background:var(--ok-bg); color:var(--ok);
    border:1px solid #A7F3D0; border-radius:9px;
    padding:7px 14px; font-size:13px; font-weight:600;
    font-family:'DM Sans',sans-serif; cursor:pointer;
    transition:background .15s, color .15s;
    display:inline-flex; align-items:center; gap:4px;
}
.btn-success:hover { background:var(--ok); color:#fff; }

/* ── Badges ────────────────────────────────────────────── */
.badge {
    display:inline-flex; align-items:center;
    font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em;
    padding:2px 8px; border-radius:20px;
}
.b-danger { background:var(--danger-bg); color:var(--danger); border:1px solid #FECDD3; }
.b-ok     { background:var(--ok-bg);     color:var(--ok);     border:1px solid #A7F3D0; }
.b-warn   { background:var(--warn-bg);   color:var(--warn);   border:1px solid #FDE68A; }
.b-brand  { background:var(--brand-light);color:var(--brand); border:1px solid #BFDBFE; }
.b-gray   { background:var(--surf2);     color:var(--ink3);   border:1px solid var(--bdr); }

/* ── Modales ───────────────────────────────────────────── */
#modalOverlay {
    background: rgba(11,17,32,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-box {
    position:fixed;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    background:#fff;
    border-radius:var(--rl);
    box-shadow:0 20px 60px rgba(11,17,32,.2);
    width:95%;
    z-index:50;
}
.modal-header {
    padding:14px 18px;
    border-bottom:1px solid var(--bdr);
    background:var(--surf2);
    border-radius:var(--rl) var(--rl) 0 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.modal-header h3 { font-family:'Sora',sans-serif; font-size:14px; font-weight:600; color:var(--ink); }
.modal-close { background:none; border:none; cursor:pointer; color:var(--ink3); font-size:16px; padding:2px; }
.modal-close:hover { color:var(--danger); }
.modal-body {
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:65vh;
    overflow-y:auto;
}
.modal-footer {
    padding:12px 18px;
    border-top:1px solid var(--bdr);
    background:var(--surf2);
    border-radius:0 0 var(--rl) var(--rl);
    display:flex;
    justify-content:flex-end;
    gap:8px;
}
.modal-section-title {
    font-size:10px;
    font-weight:700;
    color:var(--ink3);
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:6px 0 2px;
    border-top:1px solid var(--bdr);
    display:flex;
    align-items:center;
    gap:5px;
}

/* ── Spinner ───────────────────────────────────────────── */
.animate-spin { animation:spin .8s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Impresión ─────────────────────────────────────────── */
.print-only { display:none; }
.no-print {}
@media print {
    body > *:not(#printArea) { display:none !important; }
    #printArea {
        display:block !important;
        position:absolute; left:0; top:0; width:100%;
        background:white !important; color:black !important;
    }
    body { background:white !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .no-print { display:none !important; }
    .panel-lateral { display:none !important; }
}

/* ── SweetAlert2 override ──────────────────────────────── */
.swal2-popup { font-family:'DM Sans',system-ui,sans-serif !important; border-radius:16px !important; }
.swal2-title { font-family:'Sora',sans-serif !important; font-size:17px !important; font-weight:700 !important; color:var(--ink) !important; }
.swal2-html-container { font-size:13px !important; color:var(--ink2) !important; }
.swal2-confirm { background-color:var(--brand) !important; border-radius:9px !important; font-family:'DM Sans',sans-serif !important; font-weight:600 !important; }
.swal2-cancel { background-color:var(--surf2) !important; color:var(--ink2) !important; border:1px solid var(--bdr) !important; border-radius:9px !important; font-family:'DM Sans',sans-serif !important; }
.swal2-input, .swal2-select, .swal2-textarea { border:1px solid var(--bdr) !important; border-radius:8px !important; font-family:'DM Sans',sans-serif !important; font-size:13px !important; color:var(--ink) !important; }
.swal2-input:focus, .swal2-select:focus { border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-light) !important; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
    #view-estructura > div { grid-template-columns:1fr !important; }
    div[style*="grid-template-columns:1fr 280px"] { grid-template-columns:1fr !important; }
}
@media (max-width: 640px) {
    #view-zonas > div { grid-template-columns:1fr !important; }
    .dase-topbar { padding:0 14px; }
    .kpi-card { padding:14px; }
    div[style*="padding:20px 24px"] { padding:14px !important; }
    div[style*="grid-template-columns:repeat(4"] { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}