:root {
    --hh-deep-blue: #071A3D;
    --hh-primary: #004ac6;
    --hh-primary-container: #2563EB;
    --hh-blue: #2563EB;
    --hh-blue-bright: #3B82F6;
    --hh-blue-soft: #EFF6FF;
    --hh-orange: #F97316;
    --hh-secondary: #9d4300;
    --hh-secondary-container: #fd761a;
    --hh-tertiary: #45557a;
    --hh-tertiary-container: #5d6d94;
    --hh-success: #10B981;
    --hh-success-soft: #ECFDF5;
    --hh-success-light: #D1FAE5;
    --hh-danger: #EF4444;
    --hh-danger-soft: #FEF2F2;
    --hh-danger-light: #FEE2E2;
    --hh-warning: #F59E0B;
    --hh-warning-soft: #FFFBEB;
    --hh-info: #6366F1;
    --hh-info-soft: #EEF2FF;
    --hh-info-light: #E0E7FF;
    --hh-error: #ba1a1a;
    --hh-surface: #f9f9ff;
    --hh-surface-dim: #cfdaf2;
    --hh-surface-bright: #f9f9ff;
    --hh-surface-container-lowest: #ffffff;
    --hh-surface-container-low: #f0f3ff;
    --hh-surface-container: #e7eeff;
    --hh-surface-container-high: #dee8ff;
    --hh-surface-container-highest: #d8e3fb;
    --hh-surface-variant: #d8e3fb;
    --hh-on-surface: #111c2d;
    --hh-on-surface-variant: #434655;
    --hh-on-primary: #ffffff;
    --hh-inverse-surface: #263143;
    --hh-outline: #737686;
    --hh-outline-variant: #c3c6d7;
    --hh-border-subtle: #E2E8F0;
    --hh-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hh-radius-sm: 6px;
    --hh-radius: 8px;
    --hh-radius-md: 8px;
    --hh-radius-lg: 12px;
    --hh-radius-xl: 16px;
    --hh-radius-2xl: 16px;
    --hh-radius-3xl: 24px;
    --hh-radius-full: 9999px;
    --hh-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --hh-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05);
    --hh-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);
    --hh-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.05);
    --hh-gradient: linear-gradient(135deg, #3B82F6 0%, #fd761a 100%);
    --hh-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    font-family: var(--hh-font);
    -webkit-font-smoothing: antialiased;
}
img, svg, video {
    max-width: 100%;
    height: auto;
}

.btn-hh { font-family:var(--hh-font); font-weight:600; font-size:13px; border-radius:var(--hh-radius-md); padding:8px 18px; transition:all var(--hh-transition); border:1.5px solid transparent; display:inline-flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap; cursor:pointer; }
.btn-hh:hover { box-shadow:var(--hh-shadow-md); transform:translateY(-1px); }
.btn-hh-primary { background:var(--hh-primary); color:#fff; border-color:var(--hh-primary); }
.btn-hh-primary:hover { background:var(--hh-blue); color:#fff; }
.btn-hh-outline { background:transparent; color:var(--hh-on-surface); border-color:var(--hh-border-subtle); }
.btn-hh-outline:hover { background:#F8FAFC; border-color:var(--hh-outline-variant); }
.btn-hh-sm { font-size:11px; padding:5px 12px; }
.btn-hh-lg { font-size:14px; padding:12px 24px; }
.btn-hh-danger { background:var(--hh-danger); color:#fff; border-color:var(--hh-danger); }
.btn-hh-danger:hover { opacity:0.9; }
.btn-hh-success { background:var(--hh-success); color:#fff; border-color:var(--hh-success); }
.btn-hh-success:hover { opacity:0.9; }

.page-heading { font-size:24px; font-weight:800; letter-spacing:-0.4px; color:var(--hh-on-surface); margin-bottom:24px; }

.card-hh { background:#fff; border:1px solid var(--hh-border-subtle); border-radius:var(--hh-radius-xl); box-shadow:var(--hh-shadow-sm); }
.card-hh-header { background:#fff; border-bottom:1px solid var(--hh-border-subtle); padding:18px 24px; border-radius:var(--hh-radius-xl) var(--hh-radius-xl) 0 0; display:flex; align-items:center; justify-content:space-between; }
.card-hh-header h5 { font-size:15px; font-weight:700; margin:0; color:var(--hh-on-surface); }
.card-hh-body { padding:24px; }

.stat-card { background:#fff; border:1px solid var(--hh-border-subtle); border-radius:var(--hh-radius-xl); padding:24px; box-shadow:var(--hh-shadow-sm); transition:all var(--hh-transition); }
.stat-card:hover { box-shadow:var(--hh-shadow-md); transform:translateY(-1px); }
.stat-card-value { font-size:32px; font-weight:800; letter-spacing:-0.8px; color:var(--hh-on-surface); line-height:1; }
.stat-card-label { font-size:12px; font-weight:600; color:var(--hh-outline); text-transform:uppercase; letter-spacing:0.3px; margin-top:8px; }
.stat-card-icon { width:44px; height:44px; border-radius:var(--hh-radius-lg); display:flex; align-items:center; justify-content:center; }

.badge-ds { font-size:11px; font-weight:700; letter-spacing:0.2px; padding:5px 12px; border-radius:var(--hh-radius-full); display:inline-flex; align-items:center; gap:4px; }
.badge-ds-primary { background:var(--hh-blue-soft); color:var(--hh-blue); }
.badge-ds-success { background:var(--hh-success-soft); color:#065f46; }
.badge-ds-warning { background:var(--hh-warning-soft); color:#92400e; }
.badge-ds-danger { background:var(--hh-danger-soft); color:#991b1b; }
.badge-ds-info { background:var(--hh-info-soft); color:#3730a3; }
.badge-ds-neutral { background:#F1F5F9; color:var(--hh-outline); }

.table-ds { width:100%; border-collapse:collapse; }
.table-ds th { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--hh-outline); padding:12px 16px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--hh-border-subtle); }
.table-ds td { font-size:13px; font-weight:500; color:var(--hh-on-surface); padding:12px 16px; border-bottom:1px solid var(--hh-border-subtle); vertical-align:middle; }
.table-ds tbody tr:hover { background:var(--hh-blue-soft); }
.table-ds tbody tr:last-child td { border-bottom:none; }

.form-control { border:1px solid var(--hh-border-subtle); border-radius:var(--hh-radius-lg); padding:10px 14px; font-size:13px; font-family:var(--hh-font); font-weight:500; transition:all var(--hh-transition); }
.form-control:focus { border-color:var(--hh-primary); box-shadow:0 0 0 3px rgba(0,74,198,0.08); }
.form-control::placeholder { color:var(--hh-outline-variant); }
.form-label { font-size:12px; font-weight:700; color:var(--hh-outline); text-transform:uppercase; letter-spacing:0.3px; margin-bottom:6px; }
.form-select { border:1px solid var(--hh-border-subtle); border-radius:var(--hh-radius-lg); padding:10px 14px; font-size:13px; font-family:var(--hh-font); font-weight:500; }
.form-select:focus { border-color:var(--hh-primary); box-shadow:0 0 0 3px rgba(0,74,198,0.08); }
.form-text { font-size:11px; color:var(--hh-outline); }
.invalid-feedback { font-size:11px; font-weight:500; margin-top:6px; }
.form-switch .form-check-input:checked { background-color:var(--hh-primary); border-color:var(--hh-primary); }

.alert { border-radius:var(--hh-radius-lg); font-size:13px; font-weight:500; border:none; }
.alert-success { background:var(--hh-success-soft); color:#065f46; }
.alert-danger { background:var(--hh-danger-soft); color:var(--hh-danger); }

.breadcrumb { font-size:12px; font-weight:500; }
.breadcrumb a { color:var(--hh-outline); text-decoration:none; }
.breadcrumb a:hover { color:var(--hh-primary); }
.breadcrumb .breadcrumb-item.active { color:var(--hh-on-surface); font-weight:600; }

.pagination-ds { display:flex; justify-content:center; gap:4px; padding:16px 0; }
.pagination-ds .page-link { font-size:13px; font-weight:600; color:var(--hh-outline); border:1px solid var(--hh-border-subtle); border-radius:var(--hh-radius-md); padding:6px 14px; text-decoration:none; transition:all var(--hh-transition); background:#fff; }
.pagination-ds .page-link:hover { background:var(--hh-blue-soft); color:var(--hh-primary); }
.pagination-ds .active .page-link { background:var(--hh-primary); color:#fff; border-color:var(--hh-primary); }

.empty-state { text-align:center; padding:48px 24px; }
.empty-state-icon { color:var(--hh-outline-variant); margin-bottom:16px; }
.empty-state p { color:var(--hh-outline); font-size:14px; font-weight:500; }

.modal { z-index: 10500 !important; }
.modal-dialog { z-index: 10501 !important; }
.modal-backdrop, .modal-backdrop.show { z-index: 10490 !important; }
.modal-content { background:#FFFFFF !important; background-color:#FFFFFF !important; border-radius:var(--hh-radius-xl); border:1px solid var(--hh-border-subtle); }
.modal-header { border-bottom:1px solid var(--hh-border-subtle); padding:20px 24px; }
.modal-header .modal-title { font-size:16px; font-weight:700; }
.modal-footer { border-top:1px solid var(--hh-border-subtle); padding:16px 24px; }
.modal-body { background:#FFFFFF !important; background-color:#FFFFFF !important; padding:24px; }

.nav-tabs { border-bottom:1px solid var(--hh-border-subtle); }
.nav-tabs .nav-link { font-size:13px; font-weight:600; color:var(--hh-outline); border:none; padding:10px 20px; border-radius:0; }
.nav-tabs .nav-link.active { color:var(--hh-primary); border-bottom:2px solid var(--hh-primary); background:transparent; }
.nav-tabs .nav-link:hover { color:var(--hh-on-surface); }

/* === Wizard === */
.wizard-progress-bar { height:4px; background:var(--hh-border-subtle); border-radius:2px; margin-bottom:32px; overflow:hidden; }
.wizard-progress-fill { height:100%; background:var(--hh-primary); border-radius:2px; transition:width 400ms ease; width:0; }
.wizard-steps-nav { display:flex; justify-content:center; gap:8px; margin-bottom:32px; }
.wizard-dot { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:#fff; border:1.5px solid var(--hh-border-subtle); color:var(--hh-outline-variant); transition:all 200ms; }
.wizard-dot.active { border-color:var(--hh-primary); color:var(--hh-primary); background:var(--hh-blue-soft); }
.wizard-dot.completed { border-color:var(--hh-success); color:var(--hh-success); background:var(--hh-success-soft); }
.wizard-step { display:none; }
.case-type-card { background:#fff; border:1.5px solid var(--hh-border-subtle); border-radius:var(--hh-radius-xl); padding:24px 20px; cursor:pointer; transition:all 200ms; text-align:center; }
.case-type-card:hover { border-color:var(--hh-blue-bright); box-shadow:var(--hh-shadow-md); transform:translateY(-1px); }
.case-type-card.selected { border-color:var(--hh-primary); background:var(--hh-blue-soft); box-shadow:0 0 0 3px rgba(0,74,198,0.08); }
.case-type-card .type-icon { width:44px; height:44px; border-radius:var(--hh-radius-lg); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.case-type-card .type-title { font-size:13px; font-weight:700; color:var(--hh-on-surface); margin-bottom:4px; }
.case-type-card .type-desc { font-size:11px; color:var(--hh-outline); line-height:1.4; }
.context-questions { display:none; }

/* === Pipeline === */
.pipeline-track { display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:8px 0; }
.pipeline-stage { flex:1; min-width:100px; text-align:center; position:relative; padding:0 4px; }
.pipeline-stage::after { content:''; position:absolute; top:13px; left:calc(50% + 12px); width:calc(100% - 24px); height:2px; background:var(--hh-border-subtle); }
.pipeline-stage:last-child::after { display:none; }
.pipeline-dot { width:26px; height:26px; border-radius:50%; margin:0 auto 6px; border:2px solid var(--hh-border-subtle); background:#fff; position:relative; z-index:1; }
.pipeline-stage.active .pipeline-dot { border-color:var(--hh-primary); background:var(--hh-primary); }
.pipeline-stage.past .pipeline-dot { border-color:var(--hh-success); background:var(--hh-success); }
.pipeline-label { font-size:10px; font-weight:600; color:var(--hh-outline-variant); text-transform:uppercase; letter-spacing:0.3px; }
.pipeline-stage.active .pipeline-label { color:var(--hh-primary); font-weight:700; }
.pipeline-stage.past .pipeline-label { color:var(--hh-success); }

/* === Timeline === */
.timeline-item { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--hh-border-subtle); }
.timeline-item:last-child { border-bottom:none; }
.timeline-icon { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.timeline-body { flex:1; min-width:0; }
.timeline-title { font-size:13px; font-weight:600; color:var(--hh-on-surface); margin-bottom:2px; }
.timeline-desc { font-size:12px; color:var(--hh-outline); line-height:1.5; }
.timeline-meta { font-size:10px; color:var(--hh-outline-variant); margin-top:4px; }

/* === Checkbox list === */
.checklist-item { display:flex; align-items:center; gap:10px; padding:8px 12px; background:#fff; border:1px solid var(--hh-border-subtle); border-radius:var(--hh-radius-md); cursor:pointer; transition:all 150ms; }
.checklist-item:hover { border-color:var(--hh-blue-bright); }
.checklist-item input[type="checkbox"] { accent-color:var(--hh-primary); width:16px; height:16px; }
.checklist-item.checked { background:var(--hh-success-soft); border-color:var(--hh-success); }

.clickable-row:hover { background:var(--hh-blue-soft); }

.sidebar-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:2000;opacity:0;pointer-events:none;transition:opacity 200ms; }
.sidebar-overlay.active { opacity:1;pointer-events:auto; }
.sidebar-panel { position:fixed;top:0;right:0;width:420px;max-width:100vw;height:100vh;background:#fff;z-index:2001;box-shadow:-8px 0 30px rgba(0,0,0,0.1);transform:translateX(100%);transition:transform 250ms ease;display:flex;flex-direction:column;overflow:hidden; }
.sidebar-panel.active { transform:translateX(0); }
.sidebar-panel-header { display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--hh-border-subtle);flex-shrink:0; }
.sidebar-panel-body { flex:1;overflow-y:auto;padding:24px; }
.sidebar-editable { cursor:pointer;border-radius:6px;padding:6px 8px;margin:-6px -8px;transition:all 150ms; }
.sidebar-editable:hover { background:var(--hh-blue-soft); }

/* ============================================================
   RESPONSIVE — MOBILE FIRST MEDIA QUERIES
   ============================================================ */

/* --- Tablet & below (≤991px) — Admin sidebar offcanvas --- */
@media (max-width: 991.98px) {
    .hh-admin-sidebar {
        transform: translateX(-100%) !important;
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 2100 !important;
    }
    .hh-admin-sidebar.mobile-open {
        transform: translateX(0) !important;
    }
    .hh-admin-main {
        margin-left: 0 !important;
    }
    .hh-mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 2050;
        opacity: 0;
        pointer-events: none;
        transition: opacity 250ms ease;
    }
    .hh-mobile-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    .hh-hamburger {
        display: flex !important;
    }
    .hh-admin-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .hh-admin-content {
        padding: 20px 16px !important;
    }
}

/* --- Mobile landscape & portrait (≤768px) — Dashboard nav, tables, general --- */
@media (max-width: 768px) {
    /* Dashboard nav collapse */
    .hh-dash-nav {
        flex-wrap: wrap;
        padding: 0 16px !important;
        height: auto !important;
        min-height: 56px;
        gap: 0;
    }
    .hh-dash-nav-brand {
        flex: 1;
        min-width: 0;
    }
    .hh-dash-nav-links {
        display: none !important;
        width: 100%;
        flex-direction: column;
        gap: 2px;
        padding: 8px 0 12px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .hh-dash-nav-links.mobile-open {
        display: flex !important;
    }
    .hh-dash-nav-links a,
    .hh-dash-nav-links button {
        padding: 10px 12px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        width: 100% !important;
        text-align: left !important;
    }
    .hh-dash-nav-links a:hover {
        background: rgba(255,255,255,0.08) !important;
    }
    .hh-dash-nav-actions {
        gap: 10px !important;
    }
    .hh-dash-hamburger {
        display: flex !important;
    }
    .hh-dash-action-text {
        display: none !important;
    }

    /* Content padding */
    .hh-dash-content {
        padding: 20px 16px !important;
    }

    /* Stat cards — 2 per row */
    .stat-card { padding: 16px; }
    .stat-card-value { font-size: 24px; }
    .stat-card-label { font-size: 10px; margin-top: 4px; }
    .stat-card-icon { width: 36px; height: 36px; }

    /* Page heading */
    .page-heading { font-size: 20px; margin-bottom: 16px; }

    /* Cards */
    .card-hh-header { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
    .card-hh-header h5 { font-size: 14px; }
    .card-hh-body { padding: 16px; }

    /* Tables — force horizontal scroll */
    .hh-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px;
        padding: 0 16px;
    }
    .table-ds { min-width: 640px; }
    .table-ds th { font-size: 10px; padding: 10px 12px; }
    .table-ds td { font-size: 12px; padding: 10px 12px; }

    /* Buttons */
    .btn-hh { font-size: 12px; padding: 7px 14px; }
    .btn-hh-lg { font-size: 13px; padding: 10px 20px; }

    /* Forms */
    .form-control { font-size: 14px; padding: 10px 12px; }
    .form-select { font-size: 14px; padding: 10px 12px; }

    /* Badges */
    .badge-ds { font-size: 10px; padding: 4px 8px; }

    /* Modals */
    .modal-dialog { margin: 8px !important; }
    .modal-header { padding: 16px; }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 12px 16px; }

    /* Sidebar panels */
    .sidebar-panel { width: 100vw !important; }

    /* Pipeline */
    .pipeline-track { gap: 0; padding: 8px 0; }
    .pipeline-label { font-size: 8px; }
    .pipeline-dot { width: 20px; height: 20px; }

    /* Timeline */
    .timeline-item { gap: 10px; padding: 12px 0; }
    .timeline-icon { width: 30px; height: 30px; }
    .timeline-title { font-size: 12px; }
    .timeline-desc { font-size: 11px; }

    /* Toast */
    .hh-floating-toast { min-width: 280px; max-width: 92vw; font-size: 12.5px; padding: 12px 14px 14px; }

    /* Wizard */
    .wizard-dot { width: 30px; height: 30px; font-size: 11px; }
    .case-type-card { padding: 16px 14px; }
    .case-type-card .type-title { font-size: 12px; }
    .case-type-card .type-desc { font-size: 10px; }

    /* Empty states */
    .empty-state { padding: 32px 16px; }

    /* WhatsApp FAB */
    #hhClientSmartWaWidget { bottom: 16px !important; right: 16px !important; }
    #hhSmartWaCard { width: 280px !important; }
    #hhSmartWaFabBtn span:not([style*="border-radius:50%"]) { font-size: 11px !important; }
}

/* --- Small phones (≤576px) --- */
@media (max-width: 576px) {
    .stat-card-value { font-size: 20px; }
    .page-heading { font-size: 18px; }
    .card-hh-header { padding: 12px; }
    .card-hh-body { padding: 12px; }
    .btn-hh { font-size: 11px; padding: 6px 12px; gap: 4px; }
    .btn-hh-lg { font-size: 12px; padding: 8px 16px; }
    .form-label { font-size: 11px; }
    .table-ds { min-width: 560px; }
    .checklist-item { padding: 6px 8px; gap: 8px; }
    .pagination-ds .page-link { font-size: 11px; padding: 5px 10px; }

    /* Manual modal */
    .hh-manual-sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: 200px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-right: none !important;
        border-bottom: 1px solid var(--hh-border-subtle) !important;
        display: flex;
        flex-wrap: nowrap;
    }
    .hh-manual-sidebar nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 8px !important;
        white-space: nowrap;
    }
    .hh-manual-content {
        width: 100% !important;
    }
    .hh-manual-body-row {
        flex-direction: column !important;
    }
}

/* ==============================================================
   SCROLLBARS ELEGANTES Y DELICADOS PARA TODA LA APLICACIÓN
============================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    transition: background 200ms ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.55);
}

::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

::-webkit-scrollbar-corner {
    background: transparent;
}