:root {
    --crm-navy: #0f3f91;
    --crm-navy-2: #155ac4;
    --crm-navy-soft: #1f6fe5;
    --crm-gold: #1d72e8;
    --crm-gold-soft: #e8f1ff;
    --crm-bg: #f3f7fc;
    --crm-card: #ffffff;
    --crm-border: #dbe6f3;
    --crm-text: #0f172a;
    --crm-muted: #64748b;
    --crm-green: #087f5b;
    --crm-red: #b42318;
    --crm-blue: #1d72e8;
    --crm-shadow: 0 14px 34px rgba(21, 90, 196, .10);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100%;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--crm-text);
    background: var(--crm-bg);
}

a { transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }

.guest-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(120,178,255,.38) 0, rgba(29,114,232,.94) 35%, #1159bd 100%),
        linear-gradient(135deg, #1d72e8, #0f3f91);
}
.guest-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.auth-card {
    width: 100%;
    max-width: 430px;
    border-radius: 24px;
    background: rgba(255,255,255,.97);
    padding: 34px;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 28px 80px rgba(0,0,0,.26);
}
.auth-card-wide { max-width: 520px; }
.auth-brand { display: flex; gap: 14px; align-items: center; }
.auth-brand h1 { font-size: 1.45rem; margin: 0; font-weight: 800; color: var(--crm-navy); }
.auth-brand p { margin: 0; color: var(--crm-muted); }
.brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1d72e8, #0f3f91);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow: 0 14px 32px rgba(17,24,39,.28);
}
.brand-mark.small { width: 42px; height: 42px; border-radius: 14px; font-size: .82rem; }

.btn { border-radius: 11px; font-weight: 700; }
.btn-primary { background: var(--crm-navy); border-color: var(--crm-navy); }
.btn-primary:hover { background: #050816; border-color: #050816; }
.btn-outline-secondary { border-color: var(--crm-border); color: var(--crm-muted); }
.btn-outline-secondary:hover { background: #f8fafc; color: var(--crm-navy); border-color: #cbd5e1; }
.form-control, .form-select { border-radius: 12px; border-color: #d8dee8; }
.form-control:focus, .form-select:focus { border-color: var(--crm-gold); box-shadow: 0 0 0 .2rem rgba(176,141,87,.18); }

.app-body { background: var(--crm-bg); min-height: 100vh; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 304px;
    background: linear-gradient(180deg, #1d72e8 0%, #155ac4 52%, #0f3f91 100%);
    color: #fff;
    padding: 22px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,.08);
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 6px 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar-brand strong { display: block; font-size: .98rem; line-height: 1.1; }
.sidebar-brand span { display: block; color: #cbd5e1; font-size: .78rem; margin-top: 3px; }
.sidebar-nav { padding-top: 18px; }
.nav-group { margin-bottom: 8px; }
.nav-link-main, .nav-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    color: #f8fafc;
    text-decoration: none;
    border-radius: 13px;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: -.01em;
}
.nav-title { cursor: default; }
.nav-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: #fff;
}
.nav-link-main:hover, .nav-title:hover,
.nav-link-main.active, .nav-title.active {
    background: rgba(255,255,255,.10);
    color: #fff;
}
.nav-link-main.active, .nav-title.active { box-shadow: inset 3px 0 0 var(--crm-gold); }
.nav-children { margin: 6px 0 2px; }
.nav-link-sub {
    display: flex;
    align-items: center;
    color: #d8dee8;
    text-decoration: none;
    padding: 8px 12px 8px 52px;
    border-radius: 11px;
    font-size: .86rem;
    position: relative;
}
.nav-link-sub::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(203,213,225,.42);
    position: absolute;
    left: 34px;
}
.nav-link-sub:hover, .nav-link-sub.active { background: rgba(255,255,255,.08); color: #fff; }
.nav-link-sub.active::before { background: var(--crm-gold); }
.sidebar-footer {
    margin-top: 26px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
}
.sidebar-footer-label { display: block; color: #cbd5e1; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.sidebar-footer strong { display: block; margin-top: 3px; font-size: .82rem; }

.main-area { flex: 1; min-width: 0; }
.topbar {
    height: 78px;
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid var(--crm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(10px);
}
.topbar-title span { display: block; color: var(--crm-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.topbar h2 { margin: 2px 0 0; font-size: 1.2rem; font-weight: 850; color: var(--crm-navy); }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.topbar-search {
    height: 38px;
    min-width: 220px;
    border: 1px solid var(--crm-border);
    background: #f8fafc;
    color: var(--crm-muted);
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    font-size: .86rem;
}
.topbar-user { display: flex; align-items: center; gap: 12px; }
.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: #e8f1ff;
    color: #155ac4;
    font-weight: 850;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-copy strong { display: block; font-size: .9rem; line-height: 1.1; }
.user-copy span { display: block; color: var(--crm-muted); font-size: .78rem; margin-top: 2px; }
.content-area { padding: 26px 30px 34px; }

.breadcrumb-shell {
    margin-bottom: 16px;
    color: var(--crm-muted);
    font-size: .86rem;
}
.breadcrumb-shell a { color: var(--crm-muted); text-decoration: none; }
.breadcrumb-shell a:hover { color: var(--crm-navy); }
.breadcrumb-item.active { color: var(--crm-navy); font-weight: 700; }

.app-alert { border: 0; border-radius: 15px; box-shadow: 0 10px 28px rgba(15,23,42,.06); }
.page-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 22px; }
.page-eyebrow { display: block; color: var(--crm-gold); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 850; margin-bottom: 6px; }
.page-header h1 { margin: 0; font-size: 1.62rem; font-weight: 850; color: var(--crm-navy); letter-spacing: -.03em; }
.page-header p { margin: 5px 0 0; color: var(--crm-muted); max-width: 760px; }
.page-actions { display: flex; align-items: center; gap: 10px; }
.enterprise-card {
    border: 1px solid var(--crm-border);
    border-radius: 20px;
    box-shadow: var(--crm-shadow);
    overflow: hidden;
}
.card-header-clean {
    padding: 20px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.card-header-clean h5 { margin: 0; font-weight: 850; color: var(--crm-navy); }
.card-header-clean p { margin: 4px 0 0; color: var(--crm-muted); font-size: .9rem; }
.enterprise-table { --bs-table-bg: transparent; }
.enterprise-table thead th {
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid var(--crm-border);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.enterprise-table td { border-color: #eef2f7; color: #334155; }
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: .75rem;
    font-weight: 800;
    border: 1px solid transparent;
}
.status-pill.success { color: var(--crm-green); background: #dcfce7; border-color: #bbf7d0; }
.status-pill.warning { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.status-pill.danger { color: var(--crm-red); background: #fee2e2; border-color: #fecaca; }
.status-pill.info { color: var(--crm-blue); background: #dbeafe; border-color: #bfdbfe; }
.metric-card {
    border: 1px solid var(--crm-border);
    border-radius: 18px;
    padding: 18px;
    background: #fff;
    display: flex;
    gap: 14px;
    align-items: center;
}
.metric-card.mini { padding: 14px; }
.metric-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #e8f1ff;
    color: #155ac4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.metric-card span { display: block; color: var(--crm-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.metric-card strong { display: block; color: var(--crm-navy); font-size: 1.1rem; margin-top: 2px; }

.dashboard-period-card {
    border: 1px solid var(--crm-border);
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border-radius: 20px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .05);
}
.dashboard-period-card span {
    display: block;
    color: var(--crm-muted);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 850;
}
.dashboard-period-card strong {
    display: block;
    color: var(--crm-navy);
    font-size: 1.3rem;
    margin-top: 2px;
}
.dashboard-metric small {
    display: block;
    color: var(--crm-muted);
    margin-top: 2px;
    font-size: .82rem;
}
.dashboard-metric.metric-info .metric-icon { background: #dbeafe; color: #1d4ed8; }
.dashboard-metric.metric-success .metric-icon { background: #dcfce7; color: #166534; }
.dashboard-metric.metric-warning .metric-icon { background: #fef3c7; color: #92400e; }
.dashboard-metric.metric-danger .metric-icon { background: #fee2e2; color: #991b1b; }
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-head {
    background: #f8fafc;
    border-bottom: 1px solid var(--crm-border);
}
.calendar-head div {
    padding: 12px 10px;
    color: #475569;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 850;
    text-align: center;
}
.calendar-day {
    min-height: 116px;
    padding: 10px;
    border-right: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.muted { background: #fafafa; color: #94a3b8; }
.calendar-day.today { box-shadow: inset 0 0 0 2px rgba(29,114,232,.42); background: #f0f7ff; }
.calendar-day-number {
    font-size: .82rem;
    font-weight: 850;
    color: var(--crm-navy);
    margin-bottom: 7px;
}
.calendar-event {
    border-radius: 8px;
    padding: 4px 6px;
    font-size: .72rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 750;
}
.calendar-event span { font-weight: 850; margin-right: 4px; }
.event-info { background: #dbeafe; color: #1d4ed8; }
.event-success { background: #dcfce7; color: #166534; }
.event-warning { background: #fef3c7; color: #92400e; }
.event-danger { background: #fee2e2; color: #991b1b; }
.calendar-more {
    color: var(--crm-muted);
    font-size: .72rem;
    font-weight: 800;
    margin-top: 5px;
}
.dashboard-list .list-group-item {
    padding: 14px 18px;
    border-color: #eef2f7;
}
.dashboard-list strong {
    color: var(--crm-navy);
    font-size: .9rem;
}

/* Fase 05.1 — Checador de precios */
.module-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: linear-gradient(135deg, #1d72e8, #0f3f91);
    color: #fff;
    border-radius: 24px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .18);
}

.module-hero h1 {
    margin: .15rem 0 .35rem;
    font-size: 1.6rem;
    letter-spacing: -.02em;
}

.module-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    max-width: 760px;
}

.eyebrow {
    display: inline-flex;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: .72rem;
    color: rgba(255,255,255,.82);
    font-weight: 700;
}

.module-hero-actions {
    flex: 0 0 auto;
}

.enterprise-card {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.enterprise-card-header {
    background: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.enterprise-card-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #111827;
}

.enterprise-card-header span {
    color: #6b7280;
    font-size: .86rem;
}

.stat-card-compact {
    min-height: 98px;
}

.table-enterprise thead th {
    background: #f8fafc;
    color: #475569;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    white-space: nowrap;
}

.table-enterprise tbody td {
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    vertical-align: middle;
}

.product-cell strong {
    display: block;
    color: #111827;
    font-weight: 800;
    max-width: 420px;
}

.product-cell span {
    display: block;
    color: #64748b;
    font-size: .86rem;
    max-width: 420px;
}

.price-cell {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}

.badge-soft-dark,
.badge-soft-secondary,
.badge-soft-success,
.badge-soft-danger {
    border-radius: 999px;
    font-weight: 700;
    padding: .35rem .55rem;
}

.badge-soft-dark { background: #e5e7eb; color: #111827; }
.badge-soft-secondary { background: #eef2ff; color: #3730a3; }
.badge-soft-success { background: #dcfce7; color: #166534; }
.badge-soft-danger { background: #fee2e2; color: #991b1b; }

.enterprise-pagination {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #64748b;
}

/* Productos / administrador */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}
.product-form .form-label {
    font-weight: 700;
    color: #344054;
    font-size: .84rem;
}
.product-detail-grid span {
    display: block;
    color: #667085;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .2rem;
}
.product-detail-grid strong {
    display: block;
    color: #101828;
    font-weight: 700;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: .75rem .85rem;
    min-height: 44px;
}
.product-price {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.04em;
    color: #0f172a;
}
.mini-stat {
    border: 1px solid #edf2f7;
    background: #f8fafc;
    border-radius: 14px;
    padding: .75rem;
}
.mini-stat span {
    display: block;
    color: #667085;
    font-size: .78rem;
    margin-bottom: .25rem;
}
.mini-stat strong {
    color: #101828;
    font-size: 1.05rem;
}

/* Listas de precios */
.price-list-table strong {
    color: #0f172a;
    font-weight: 800;
}
.price-list-table .price-column {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}
@media print {
    .app-sidebar,
    .app-topbar,
    .breadcrumbs,
    .no-print,
    .module-hero-actions,
    .enterprise-pagination {
        display: none !important;
    }
    .app-main,
    .app-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .enterprise-card {
        border: 0 !important;
        box-shadow: none !important;
    }
    .table-enterprise th,
    .table-enterprise td {
        font-size: 11px !important;
        padding: 6px !important;
    }
}

/* Fase 05.4 Cotizaciones */
.quote-form .form-label{font-weight:700;color:#3d4a5f;font-size:.82rem}.quote-items-table select,.quote-items-table input{min-width:86px}.quote-items-table .item-description{min-width:260px}.quote-totals-card{position:sticky;top:92px}.quote-total-row{display:flex;align-items:center;justify-content:space-between;padding:.65rem 0;border-bottom:1px solid rgba(31,45,68,.09)}.quote-total-row span{color:#6c778b}.quote-total-row strong{font-size:1.05rem;color:#1f2d44}.quote-total-grand{border-bottom:0;margin-top:.25rem;padding-top:1rem}.quote-total-grand strong{font-size:1.55rem;color:#0f5132}.detail-label{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:#7a8497;margin-bottom:.25rem}.price-column{font-weight:800;color:#1f2d44;white-space:nowrap}

/* CRM prospectos */
.timeline-item:last-child {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Fase 06.2 — Pipeline CRM */
.pipeline-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(260px, 1fr));
    gap: 1rem;
    align-items: start;
    overflow-x: auto;
    padding-bottom: .5rem;
}

.pipeline-column {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem;
    min-width: 260px;
    padding: .85rem;
}

.pipeline-column-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .25rem .15rem .85rem;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    margin-bottom: .85rem;
}

.pipeline-column-header strong {
    display: block;
    color: #0f172a;
    font-size: .95rem;
}

.pipeline-column-header span:not(.badge) {
    display: block;
    color: #64748b;
    font-size: .77rem;
    margin-top: .1rem;
}

.pipeline-card-list {
    display: grid;
    gap: .85rem;
}

.pipeline-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: .9rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
    padding: .9rem;
}

.pipeline-card.is-lost {
    border-color: rgba(220, 38, 38, .2);
    background: #fffafa;
}

.pipeline-card-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
}

.pipeline-card-meta div {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: .7rem;
    padding: .55rem .65rem;
}

.pipeline-card-meta span {
    display: block;
    color: #64748b;
    font-size: .72rem;
}

.pipeline-card-meta strong {
    display: block;
    color: #0f172a;
    font-size: .9rem;
}

.pipeline-empty {
    border: 1px dashed rgba(100, 116, 139, .35);
    border-radius: .9rem;
    color: #64748b;
    font-size: .85rem;
    padding: 1rem;
    text-align: center;
    background: rgba(255, 255, 255, .7);
}

/* Fase 06.3 Agenda CRM */
.crm-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(90px, 1fr));
    border: 1px solid var(--app-border, #e5e7eb);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}
.crm-calendar-head {
    padding: .75rem;
    background: #f8fafc;
    color: #64748b;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-right: 1px solid #e5e7eb;
}
.crm-calendar-day {
    min-height: 132px;
    padding: .65rem;
    border-top: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    background: #fff;
}
.crm-calendar-day.is-muted { background: #f8fafc; color: #94a3b8; }
.crm-calendar-day.is-today { box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .22); }
.crm-calendar-date {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
    color: #334155;
    margin-bottom: .45rem;
}
.crm-calendar-day.is-today .crm-calendar-date { background: #0d6efd; color: #fff; }
.crm-calendar-item {
    font-size: .72rem;
    line-height: 1.2;
    padding: .32rem .4rem;
    border-radius: 9px;
    background: #eef4ff;
    color: #1d4ed8;
    margin-bottom: .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crm-calendar-item span { font-weight: 700; margin-right: .25rem; }
.crm-calendar-item.is-overdue { background: #fff1f2; color: #be123c; }
.crm-calendar-more { font-size: .72rem; color: #64748b; font-weight: 700; }
.task-list { max-height: 760px; overflow: auto; padding-right: .25rem; }
.task-card {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
    margin-bottom: .9rem;
}
.task-card.is-overdue { border-color: rgba(220, 53, 69, .35); background: #fffafa; }

/* CRM timeline */
.timeline-list { position: relative; }
.timeline-list::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: #e5e7eb; }
.timeline-item { position: relative; display: flex; gap: 1rem; padding: 0 0 1.25rem 0; }
.timeline-marker { position: relative; z-index: 1; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 1px #d1d5db; background: #6b7280; margin-top: .25rem; }
.timeline-marker.visita { background: #198754; }
.timeline-marker.seguimiento { background: #0d6efd; }
.timeline-marker.actividad { background: #f59f00; }
.timeline-content { flex: 1; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1rem; box-shadow: 0 8px 18px rgba(15,23,42,.04); }

/* Fase 06.5 - Finalizados y metas CRM */
.goal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.final-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .35rem .65rem;
    font-size: .75rem;
    font-weight: 700;
}
@media print {
    .page-actions, .app-sidebar, .app-topbar, form, .btn { display: none !important; }
    .app-content { margin: 0 !important; padding: 0 !important; }
    .app-card, .metric-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}


/* Tema SERVIKAR azul empresarial */
.btn-primary {
    background: linear-gradient(135deg, #1d72e8, #155ac4);
    border-color: #1d72e8;
    box-shadow: 0 10px 22px rgba(29, 114, 232, .22);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #155ac4, #0f3f91);
    border-color: #155ac4;
}
.auth-card {
    max-width: 460px;
    border-radius: 28px;
    padding: 42px 38px;
    background: rgba(248, 251, 255, .96);
}
.auth-servikar-brand {
    text-align: center;
    margin-bottom: 28px;
}
.auth-servikar-mark {
    width: 78px;
    height: 78px;
    border-radius: 20px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1d72e8, #0f3f91);
    color: #fff;
    font-weight: 900;
    letter-spacing: -.04em;
    font-size: 1.25rem;
    border: 8px solid rgba(255,255,255,.38);
    box-shadow: 0 18px 38px rgba(29,114,232,.30);
}
.auth-servikar-brand h1 {
    margin: 0;
    color: #14172f;
    font-weight: 900;
    letter-spacing: -.04em;
    font-size: 2.05rem;
}
.auth-servikar-brand p {
    margin: 7px 0 0;
    color: #667085;
    font-size: 1rem;
}
.auth-card .form-label {
    color: #334155;
    font-weight: 700;
}
.auth-card .form-control {
    min-height: 58px;
    background: #fff;
    border-color: #d0d7e2;
}
.sidebar-brand .brand-mark.small {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
}
.metric-icon {
    background: #e8f1ff;
    color: #155ac4;
}
.nav-link-main.active, .nav-title.active {
    box-shadow: inset 3px 0 0 #ffffff;
    background: rgba(255,255,255,.16);
}
.nav-link-sub.active::before { background: #ffffff; }
.page-eyebrow { color: #1d72e8; }


/* Fase 07.2: color por módulo y módulo activo prioritario */
.nav-group,
.nav-link-main {
    --module-accent: #8fb6ff;
    --module-soft: rgba(255,255,255,.09);
}
.module-dashboard { --module-accent: #60a5fa; --module-soft: rgba(96,165,250,.18); }
.module-productos { --module-accent: #22c55e; --module-soft: rgba(34,197,94,.18); }
.module-crm { --module-accent: #f59e0b; --module-soft: rgba(245,158,11,.18); }
.module-ventas { --module-accent: #38bdf8; --module-soft: rgba(56,189,248,.18); }
.module-reportes { --module-accent: #a78bfa; --module-soft: rgba(167,139,250,.18); }
.module-admin { --module-accent: #f472b6; --module-soft: rgba(244,114,182,.18); }

.nav-group.is-current-module,
.nav-link-main.is-current-module {
    order: -1;
    background: linear-gradient(135deg, var(--module-soft), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 6px;
    margin-bottom: 14px;
}
.nav-group .nav-title.active,
.nav-link-main.active {
    box-shadow: inset 4px 0 0 var(--module-accent);
    background: var(--module-soft);
}
.nav-group .nav-title.active .nav-icon,
.nav-link-main.active .nav-icon,
.nav-group.is-current-module .nav-icon {
    background: var(--module-accent);
    color: #08111f;
}
.nav-group .nav-link-sub.active {
    color: #fff;
    background: var(--module-soft);
    font-weight: 800;
}
.nav-group .nav-link-sub.active::before { background: var(--module-accent); }
.sidebar-nav { display: flex; flex-direction: column; }
.module-strip {
    border-radius: 22px;
    padding: 22px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    box-shadow: var(--crm-shadow);
}
.module-strip.module-ventas { background: linear-gradient(135deg, #0f3f91, #1d72e8 58%, #38bdf8); }
.module-strip .page-eyebrow { color: rgba(255,255,255,.78); }
.module-strip h1 { color: #fff; font-weight: 900; letter-spacing: -.03em; }
.module-strip p { color: rgba(255,255,255,.86); }
.app-tabs .nav-link { border-radius: 999px; color: var(--crm-muted); font-weight: 800; }
.app-tabs .nav-link.active { background: var(--crm-navy); color: #fff; }
.pipeline-board { display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: 18px; align-items: start; }
.pipeline-column { background: #eef5ff; border: 1px solid var(--crm-border); border-radius: 20px; padding: 14px; min-height: 240px; }
.pipeline-column-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--crm-navy); }
.pipeline-task-card { background: #fff; border: 1px solid var(--crm-border); border-radius: 16px; padding: 14px; margin-bottom: 12px; box-shadow: 0 10px 24px rgba(15,23,42,.06); }
.action-box { background: #f8fafc; border: 1px solid var(--crm-border); border-radius: 14px; padding: 12px; }
.timeline-list { position: relative; }
.timeline-item { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.timeline-dot { width: 14px; height: 14px; border-radius: 999px; background: var(--crm-blue); margin-top: 4px; box-shadow: 0 0 0 5px #e8f1ff; flex: 0 0 auto; }
.timeline-content { background: #fff; border: 1px solid var(--crm-border); border-radius: 16px; padding: 14px; flex: 1; box-shadow: 0 8px 22px rgba(15,23,42,.05); }
@media (max-width: 1400px) { .pipeline-board { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 900px) { .pipeline-board { grid-template-columns: 1fr; } .module-strip { align-items: flex-start; flex-direction: column; } }

/* Ajuste solicitado — menú lateral agrupado por color, sin fondos por módulo y colapsable */
.sidebar {
    width: 308px;
    background: #0b1220;
    color: #d8dee8;
    padding: 18px 14px;
    transition: width .2s ease, padding .2s ease;
}
.sidebar-brand {
    min-height: 58px;
    border-bottom: 1px solid rgba(148,163,184,.18);
}
.sidebar-nav { padding-top: 14px; }
.nav-group,
.nav-link-main {
    --module-accent: #60a5fa;
    --module-soft: transparent;
}
.nav-group {
    position: relative;
    margin: 0 0 12px;
    padding: 2px 0 8px;
    border-bottom: 1px solid rgba(148,163,184,.10);
}
.nav-group.is-current-module {
    padding-top: 4px;
    border-bottom-color: rgba(255,255,255,.16);
}
.nav-title,
.nav-link-main {
    width: 100%;
    border: 0;
    background: transparent !important;
    color: #e5e7eb;
    text-align: left;
    border-radius: 12px;
    position: relative;
    padding: 10px 10px 10px 12px;
    min-height: 46px;
}
.nav-title:hover,
.nav-link-main:hover,
.nav-title.active,
.nav-link-main.active {
    background: transparent !important;
    color: #ffffff;
    box-shadow: none !important;
}
.nav-title.active .nav-label,
.nav-link-main.active .nav-label {
    color: #ffffff;
}
.module-accent-line {
    width: 4px;
    height: 28px;
    border-radius: 999px;
    background: var(--module-accent);
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 18px rgba(255,255,255,.06);
}
.nav-icon {
    background: transparent !important;
    color: var(--module-accent);
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 1rem;
}
.nav-title .nav-label,
.nav-link-main .nav-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .075em;
    font-weight: 900;
    color: #cbd5e1;
}
.nav-caret {
    color: #64748b;
    font-size: .78rem;
    transition: transform .18s ease;
}
.nav-title[aria-expanded="true"] .nav-caret { transform: rotate(180deg); color: var(--module-accent); }
.nav-children {
    margin: 2px 0 0 0;
    padding-left: 42px;
}
.nav-link-sub {
    color: #aeb9ca;
    padding: 8px 10px 8px 0;
    border-radius: 0;
    background: transparent !important;
    border-left: 1px solid rgba(148,163,184,.16);
    padding-left: 13px;
    gap: 8px;
}
.nav-link-sub::before { display: none; }
.nav-child-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(148,163,184,.55);
    flex: 0 0 auto;
}
.nav-link-sub:hover {
    color: #fff;
    border-left-color: rgba(255,255,255,.24);
}
.nav-link-sub.active {
    color: #fff;
    font-weight: 800;
    border-left-color: var(--module-accent);
}
.nav-link-sub.active .nav-child-dot {
    background: var(--module-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--module-accent) 20%, transparent);
}
.module-dashboard { --module-accent: #3b82f6; }
.module-productos { --module-accent: #16a34a; }
.module-crm { --module-accent: #f59e0b; }
.module-ventas { --module-accent: #06b6d4; }
.module-reportes { --module-accent: #8b5cf6; }
.module-admin { --module-accent: #ec4899; }
.sidebar-footer {
    background: transparent;
    border-color: rgba(148,163,184,.16);
}
.sidebar-toggle {
    width: 42px;
    height: 42px;
    border: 1px solid var(--crm-border);
    background: #fff;
    border-radius: 13px;
    color: var(--crm-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
    margin-right: 14px;
}
.sidebar-toggle:hover { background: #f8fafc; }
body.sidebar-collapsed .sidebar {
    width: 88px;
    padding-left: 12px;
    padding-right: 12px;
}
body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-caret,
body.sidebar-collapsed .sidebar-footer {
    display: none !important;
}
body.sidebar-collapsed .nav-title,
body.sidebar-collapsed .nav-link-main {
    justify-content: center;
    padding: 10px 6px;
}
body.sidebar-collapsed .module-accent-line {
    width: 6px;
    height: 6px;
    position: absolute;
    left: 6px;
    top: 20px;
}
body.sidebar-collapsed .nav-children {
    display: none !important;
}
body.sidebar-collapsed .nav-group {
    padding-bottom: 4px;
}
body.sidebar-collapsed .nav-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
}
body.sidebar-collapsed .topbar {
    left: 88px;
}

/* Ajuste visual definitivo — menú lateral agrupado por color, sin fondos por módulo y colapsable real */
.app-shell { align-items: stretch; }
.sidebar {
    width: 316px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    border-right: 1px solid #dbe6f3 !important;
    box-shadow: 8px 0 26px rgba(15,23,42,.05);
    padding: 18px 14px !important;
    transition: width .22s ease, padding .22s ease, transform .22s ease !important;
}
.sidebar .brand-mark.small {
    background: #eff6ff !important;
    color: #155ac4 !important;
    border: 1px solid #dbeafe !important;
    box-shadow: none !important;
}
.sidebar-brand {
    border-bottom: 1px solid #e5edf7 !important;
    color: #0f172a !important;
}
.sidebar-brand strong { color: #0f172a !important; }
.sidebar-brand span { color: #64748b !important; }
.sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
}
.sidebar .nav-group,
.sidebar .nav-link-main {
    --module-accent: #1d72e8;
    background: transparent !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
.sidebar .nav-group {
    position: relative;
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #eef2f7 !important;
}
.sidebar .nav-group.is-current-module,
.sidebar .nav-link-main.is-current-module {
    order: -1;
}
.sidebar .nav-group.is-current-module::after,
.sidebar .nav-link-main.is-current-module::after {
    content: "Módulo activo";
    display: block;
    margin: 2px 0 4px 42px;
    color: #64748b;
    font-size: .67rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.sidebar .nav-title,
.sidebar .nav-link-main {
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    color: #1f2937 !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    min-height: 44px;
}
.sidebar .nav-title:hover,
.sidebar .nav-link-main:hover,
.sidebar .nav-title.active,
.sidebar .nav-link-main.active {
    background: #f8fafc !important;
    color: #0f172a !important;
    box-shadow: none !important;
}
.sidebar .module-accent-line {
    width: 5px !important;
    height: 30px !important;
    border-radius: 999px;
    background: var(--module-accent) !important;
    flex: 0 0 auto;
    box-shadow: none !important;
}
.sidebar .nav-icon {
    color: var(--module-accent) !important;
    background: transparent !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 1.05rem;
}
.sidebar .nav-title .nav-label,
.sidebar .nav-link-main .nav-label {
    color: #334155 !important;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.sidebar .nav-title.active .nav-label,
.sidebar .nav-link-main.active .nav-label,
.sidebar .nav-group.is-current-module > .nav-title .nav-label {
    color: #0f172a !important;
}
.sidebar .nav-caret {
    color: #94a3b8 !important;
    transition: transform .18s ease, color .18s ease;
}
.sidebar .nav-title[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
    color: var(--module-accent) !important;
}
.sidebar .nav-children {
    margin: 3px 0 0 !important;
    padding-left: 42px !important;
}
.sidebar .nav-link-sub {
    color: #475569 !important;
    background: transparent !important;
    border-left: 1px solid #dbe6f3 !important;
    border-radius: 0 !important;
    padding: 7px 8px 7px 13px !important;
    font-size: .86rem;
}
.sidebar .nav-link-sub::before { display: none !important; }
.sidebar .nav-child-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #cbd5e1;
    flex: 0 0 auto;
}
.sidebar .nav-link-sub:hover {
    color: #0f172a !important;
    border-left-color: #94a3b8 !important;
}
.sidebar .nav-link-sub.active {
    color: #0f172a !important;
    font-weight: 850;
    border-left-color: var(--module-accent) !important;
}
.sidebar .nav-link-sub.active .nav-child-dot {
    background: var(--module-accent) !important;
    box-shadow: 0 0 0 3px rgba(15,23,42,.06);
}
.sidebar .sidebar-footer {
    background: #f8fafc !important;
    border: 1px solid #e5edf7 !important;
    color: #334155 !important;
}
.sidebar .sidebar-footer-label { color: #64748b !important; }
.module-dashboard { --module-accent: #2563eb !important; }
.module-productos { --module-accent: #059669 !important; }
.module-crm { --module-accent: #d97706 !important; }
.module-ventas { --module-accent: #0891b2 !important; }
.module-reportes { --module-accent: #7c3aed !important; }
.module-admin { --module-accent: #db2777 !important; }
.sidebar-toggle {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid #dbe6f3 !important;
    background: #ffffff !important;
    border-radius: 13px !important;
    color: #0f3f91 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}
.sidebar-toggle:hover { background: #f8fafc !important; }
body.sidebar-collapsed .sidebar {
    width: 84px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-caret,
body.sidebar-collapsed .sidebar-footer,
body.sidebar-collapsed .sidebar .nav-group.is-current-module::after,
body.sidebar-collapsed .sidebar .nav-link-main.is-current-module::after {
    display: none !important;
}
body.sidebar-collapsed .sidebar .nav-title,
body.sidebar-collapsed .sidebar .nav-link-main {
    justify-content: center;
    padding: 10px 4px !important;
}
body.sidebar-collapsed .sidebar .module-accent-line {
    position: absolute;
    left: 2px;
    width: 4px !important;
    height: 26px !important;
}
body.sidebar-collapsed .sidebar .nav-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.16rem;
}
body.sidebar-collapsed .sidebar .nav-children { display: none !important; }
body.sidebar-collapsed .sidebar .nav-group { padding-bottom: 6px !important; }

/* Búsqueda inteligente incremental */
.smart-search-wrapper {
    position: relative;
    width: 100%;
}
.smart-search-input {
    padding-right: 2.4rem;
}
.smart-search-wrapper::after {
    content: "\F52A";
    font-family: "bootstrap-icons";
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: .95rem;
}
.smart-search-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1040;
    background: #ffffff;
    border: 1px solid #dbe6f3;
    box-shadow: 0 18px 44px rgba(15,23,42,.16);
    border-radius: 16px;
    overflow: hidden;
    max-height: 360px;
    overflow-y: auto;
}
.smart-search-menu.show { display: block; }
.smart-search-item {
    width: 100%;
    border: 0;
    background: #fff;
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 2px;
    padding: 11px 13px;
    border-bottom: 1px solid #eef2f7;
}
.smart-search-item:last-child { border-bottom: 0; }
.smart-search-item:hover,
.smart-search-item.active {
    background: #f8fafc;
}
.smart-search-type {
    grid-row: 1 / span 2;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: .68rem;
    font-weight: 900;
    color: #0f3f91;
    background: #e8f1ff;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.smart-search-item strong {
    display: block;
    color: #0f172a;
    font-size: .9rem;
    line-height: 1.2;
}
.smart-search-item small {
    display: block;
    color: #64748b;
    font-size: .78rem;
}
.smart-search-empty {
    padding: 12px 14px;
    color: #64748b;
    font-size: .86rem;
}

/* Fase 09.3 Configuración general */
:root {
    --crm-navy: var(--brand-primary, #0f3f91);
    --crm-navy-2: var(--brand-accent, #155ac4);
    --crm-navy-soft: var(--brand-accent, #1f6fe5);
    --crm-gold: var(--brand-accent, #1d72e8);
}
.brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    object-fit: contain;
    background: #fff;
    padding: 5px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .15);
}
body.sidebar-collapsed .brand-logo {
    width: 38px;
    height: 38px;
    padding: 4px;
}
.theme-density-compact .content-area { padding-top: 18px; }
.theme-density-compact .app-card .card-body { padding: 1rem; }
.theme-density-compact .table > :not(caption) > * > * { padding-top: .55rem; padding-bottom: .55rem; }
.sidebar-style-executive .sidebar {
    background: linear-gradient(180deg, #101828 0%, var(--brand-primary, #0f3f91) 100%);
}
.sidebar-style-compact .sidebar { width: 284px; }
.preview-panel {
    border: 1px solid #dbe6f3;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}
.preview-header {
    height: 54px;
    background: linear-gradient(135deg, var(--preview-primary), var(--preview-accent));
}
.preview-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
}
.preview-brand img,
.preview-logo {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    object-fit: contain;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: var(--preview-primary);
}
.preview-brand strong { display: block; color: #0f172a; line-height: 1.1; }
.preview-brand span { display: block; color: #64748b; font-size: .8rem; margin-top: 4px; }
.preview-line {
    height: 10px;
    width: calc(100% - 36px);
    margin: 0 18px 10px;
    border-radius: 999px;
    background: #e2e8f0;
}
.preview-line.short { width: 58%; margin-bottom: 20px; background: #eef2f7; }

/* Ajuste visual — buscador visible y sidebar azul translúcido */
.smart-search-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2147483000;
}
.smart-search-layer .smart-search-menu {
    pointer-events: auto;
}
.smart-search-menu {
    position: fixed !important;
    z-index: 2147483001 !important;
    display: none;
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(14px);
    border: 1px solid rgba(15,63,145,.16) !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.24), 0 0 0 1px rgba(255,255,255,.55) inset !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}
.smart-search-menu.show { display: block !important; }
.smart-search-item {
    background: transparent !important;
}
.smart-search-item:hover,
.smart-search-item.active {
    background: rgba(232,241,255,.92) !important;
}
.smart-search-field-has-icon {
    background-image: linear-gradient(45deg, transparent calc(100% - 38px), rgba(14,165,233,.06) calc(100% - 38px));
}
.sidebar {
    background:
        linear-gradient(180deg, rgba(7, 28, 70, .96), rgba(15, 63, 145, .92) 54%, rgba(14, 116, 184, .84)) !important;
    color: rgba(255,255,255,.88) !important;
    border-right: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 10px 0 34px rgba(15,23,42,.18) !important;
    backdrop-filter: blur(14px);
}
.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.16), transparent 28%),
        linear-gradient(90deg, rgba(255,255,255,.07), transparent 42%);
}
.sidebar > * { position: relative; z-index: 1; }
.sidebar .brand-mark.small {
    background: rgba(255,255,255,.14) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.20) !important;
}
.sidebar-brand {
    border-bottom-color: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
}
.sidebar-brand strong,
.sidebar .nav-title.active .nav-label,
.sidebar .nav-link-main.active .nav-label,
.sidebar .nav-group.is-current-module > .nav-title .nav-label {
    color: #ffffff !important;
}
.sidebar-brand span,
.sidebar .sidebar-footer-label,
.sidebar .nav-group.is-current-module::after,
.sidebar .nav-link-main.is-current-module::after {
    color: rgba(226,232,240,.78) !important;
}
.sidebar .nav-group {
    border-bottom-color: rgba(255,255,255,.10) !important;
}
.sidebar .nav-title,
.sidebar .nav-link-main {
    color: rgba(255,255,255,.86) !important;
}
.sidebar .nav-title:hover,
.sidebar .nav-link-main:hover,
.sidebar .nav-title.active,
.sidebar .nav-link-main.active {
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
}
.sidebar .nav-title .nav-label,
.sidebar .nav-link-main .nav-label {
    color: rgba(241,245,249,.86) !important;
}
.sidebar .nav-caret {
    color: rgba(226,232,240,.62) !important;
}
.sidebar .nav-link-sub {
    color: rgba(226,232,240,.78) !important;
    border-left-color: rgba(255,255,255,.16) !important;
}
.sidebar .nav-link-sub:hover,
.sidebar .nav-link-sub.active {
    color: #ffffff !important;
    background: rgba(255,255,255,.06) !important;
}
.sidebar .nav-child-dot {
    background: rgba(226,232,240,.52) !important;
}
.sidebar .sidebar-footer {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #ffffff !important;
}

/* Ajuste post-cierre — sidebar estilo MDB, grupos por color y responsive */
:root {
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 82px;
    --sidebar-bg: rgba(255, 255, 255, .96);
    --sidebar-border: rgba(15, 23, 42, .10);
    --sidebar-text: #5f6673;
    --sidebar-heading: #1f2937;
    --sidebar-active-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.app-shell {
    min-height: 100vh;
    background: #f8fafc;
}

.sidebar {
    width: var(--sidebar-width) !important;
    flex: 0 0 var(--sidebar-width) !important;
    background: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
    border-right: 1px solid var(--sidebar-border) !important;
    box-shadow: 9px 0 28px rgba(15, 23, 42, .055) !important;
    backdrop-filter: blur(16px);
    padding: 0 16px 18px !important;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1030;
}

.sidebar::before {
    display: none !important;
}

.sidebar > * { position: relative; z-index: 1; }

.sidebar-brand {
    min-height: 74px;
    padding: 14px 0 12px !important;
    border-bottom: 1px solid #edf2f7 !important;
    color: var(--sidebar-heading) !important;
}

.sidebar-brand strong {
    color: #1e3a8a !important;
    font-size: 1.05rem;
    letter-spacing: -.02em;
}

.sidebar-brand span {
    color: #7b8494 !important;
}

.sidebar .brand-mark.small,
.sidebar .brand-logo {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #2563eb !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .14) !important;
}

.sidebar-nav {
    padding-top: 14px !important;
}

.sidebar .nav-group {
    --module-accent: #2563eb;
    margin: 0 0 7px !important;
    padding: 0 0 7px !important;
    border-bottom: 1px solid #eef2f7 !important;
    position: relative;
}

.sidebar .nav-group.is-current-module {
    background: transparent !important;
}

.sidebar .nav-group.is-current-module::after {
    content: "Módulo activo";
    display: block;
    margin: 4px 0 0 48px;
    color: var(--module-accent) !important;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sidebar .nav-title,
.sidebar .nav-link-main {
    min-height: 46px;
    border: 0 !important;
    border-radius: 7px !important;
    padding: 10px 10px !important;
    color: var(--sidebar-text) !important;
    background: transparent !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    position: relative;
}

.sidebar .nav-title .nav-label,
.sidebar .nav-link-main .nav-label {
    color: var(--sidebar-text) !important;
    font-size: .94rem;
}

.sidebar .nav-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 1rem;
}

.sidebar .module-accent-line {
    width: 4px !important;
    height: 24px !important;
    min-width: 4px !important;
    border-radius: 999px !important;
    background: var(--module-accent) !important;
    opacity: .84;
    box-shadow: none !important;
}

.sidebar .nav-title:hover,
.sidebar .nav-link-main:hover {
    background: #f8fafc !important;
    color: #111827 !important;
}

.sidebar .nav-title:hover .nav-label,
.sidebar .nav-link-main:hover .nav-label {
    color: #111827 !important;
}

.sidebar .nav-title:hover .nav-icon,
.sidebar .nav-link-main:hover .nav-icon,
.sidebar .nav-title.active .nav-icon,
.sidebar .nav-link-main.active .nav-icon,
.sidebar .nav-group.is-current-module > .nav-title .nav-icon {
    color: var(--module-accent) !important;
}

.sidebar .nav-title.active,
.sidebar .nav-link-main.active,
.sidebar .nav-group.is-current-module > .nav-title {
    background: color-mix(in srgb, var(--module-accent) 10%, #ffffff) !important;
    color: #111827 !important;
    box-shadow: none !important;
}

.sidebar .nav-title.active .nav-label,
.sidebar .nav-link-main.active .nav-label,
.sidebar .nav-group.is-current-module > .nav-title .nav-label {
    color: #111827 !important;
}

.sidebar .nav-caret {
    color: #9ca3af !important;
    transition: transform .18s ease, color .18s ease;
}

.sidebar .nav-title[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
    color: var(--module-accent) !important;
}

.sidebar .nav-children {
    margin: 4px 0 0 0 !important;
    padding-left: 0 !important;
}

.sidebar .nav-link-sub {
    min-height: 41px;
    padding: 9px 12px 9px 52px !important;
    border-radius: 6px !important;
    color: #6b7280 !important;
    background: transparent !important;
    border-left: 0 !important;
    font-size: .92rem;
    font-weight: 500;
    position: relative;
}

.sidebar .nav-link-sub .nav-label {
    color: inherit !important;
}

.sidebar .nav-link-sub::before {
    display: none !important;
}

.sidebar .nav-child-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px;
    background: var(--module-accent) !important;
    opacity: .50;
    position: absolute;
    left: 32px;
}

.sidebar .nav-link-sub:hover {
    background: #f8fafc !important;
    color: #111827 !important;
}

.sidebar .nav-link-sub.active {
    background: var(--module-accent) !important;
    color: #ffffff !important;
    box-shadow: var(--sidebar-active-shadow) !important;
}

.sidebar .nav-link-sub.active .nav-child-dot {
    background: #ffffff !important;
    opacity: .92;
}

.sidebar-footer {
    margin-top: 18px !important;
    padding: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    color: #64748b !important;
}

.sidebar-footer-label {
    color: #94a3b8 !important;
}

.sidebar-footer strong {
    color: #334155 !important;
}

.module-dashboard { --module-accent: #2563eb !important; }
.module-productos { --module-accent: #059669 !important; }
.module-crm { --module-accent: #d97706 !important; }
.module-ventas { --module-accent: #0891b2 !important; }
.module-reportes { --module-accent: #7c3aed !important; }
.module-admin { --module-accent: #db2777 !important; }

.topbar {
    height: 66px !important;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.035);
    z-index: 1020;
}

.sidebar-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.sidebar-toggle:hover {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.topbar-title { min-width: 0; }
.topbar-title h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1025;
    border: 0;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(2px);
}

@media (min-width: 992px) {
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-width-collapsed) !important;
        flex-basis: var(--sidebar-width-collapsed) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.sidebar-collapsed .sidebar-brand {
        justify-content: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.sidebar-collapsed .brand-copy,
    body.sidebar-collapsed .nav-label,
    body.sidebar-collapsed .nav-caret,
    body.sidebar-collapsed .sidebar-footer,
    body.sidebar-collapsed .sidebar .nav-group.is-current-module::after {
        display: none !important;
    }

    body.sidebar-collapsed .sidebar .nav-title,
    body.sidebar-collapsed .sidebar .nav-link-main {
        justify-content: center;
        padding: 10px 7px !important;
    }

    body.sidebar-collapsed .sidebar .module-accent-line {
        position: absolute;
        left: 4px;
        height: 22px !important;
    }

    body.sidebar-collapsed .sidebar .nav-icon {
        margin-left: 0 !important;
    }

    body.sidebar-collapsed .sidebar .nav-children {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .app-shell {
        display: block !important;
    }

    .sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100vh !important;
        transform: translateX(-104%);
        transition: transform .22s ease;
        z-index: 1030;
        width: min(88vw, 304px) !important;
        flex-basis: auto !important;
    }

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

    body.sidebar-open .sidebar-backdrop {
        display: block;
    }

    .main-area {
        min-width: 0;
        width: 100%;
    }

    .topbar {
        height: auto !important;
        min-height: 62px;
        padding: 10px 14px !important;
        gap: 10px;
    }

    .topbar-title span { display: none; }
    .topbar h2 { font-size: 1rem !important; }
    .topbar-actions { gap: 8px !important; }
    .topbar-search { display: none !important; }
    .user-copy { display: none !important; }
    .topbar-user form .btn { padding: .35rem .5rem; font-size: .78rem; }
    .content-area { padding: 16px 14px 24px !important; }

    .page-header,
    .card-header-clean,
    .enterprise-card-header,
    .dashboard-period-card,
    .module-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions,
    .module-hero-actions {
        justify-content: flex-start;
    }

    .metric-card,
    .dashboard-metric {
        min-width: 0;
    }

    .calendar-grid {
        min-width: 760px;
    }

    .calendar-responsive,
    .enterprise-table-wrap,
    .table-responsive {
        overflow-x: auto;
    }
}

@media (max-width: 575.98px) {
    .topbar-user .user-avatar { display: none; }
    .topbar-user form .btn i { margin-right: 0 !important; }
    .topbar-user form .btn { font-size: 0; }
    .topbar-user form .btn i { font-size: .95rem; }
    .page-header h1 { font-size: 1.28rem !important; }
    .module-hero { padding: 1.1rem !important; border-radius: 18px !important; }
    .enterprise-card { border-radius: 16px !important; }
    .smart-search-menu { max-width: calc(100vw - 24px) !important; }
}

/* =========================================================
   POST-CIERRE UI RESPONSIVO V2
   Objetivo: legibilidad en escritorio/tablet/celular y navegación clara por módulo.
   ========================================================= */
:root {
    --sidebar-width: 292px;
    --sidebar-width-collapsed: 82px;
    --crm-content-max: 100%;
    --crm-radius-lg: 18px;
    --crm-radius-md: 14px;
}

.app-shell {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.main-area {
    min-width: 0;
    width: calc(100% - var(--sidebar-width));
}

.content-area {
    max-width: var(--crm-content-max);
    overflow-x: hidden;
}

.sidebar {
    width: var(--sidebar-width) !important;
    flex: 0 0 var(--sidebar-width) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border-right: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: 10px 0 28px rgba(15, 23, 42, .045) !important;
    padding: 14px 12px !important;
}

.sidebar-brand {
    border-bottom: 1px solid #e5e7eb !important;
    padding: 6px 8px 14px !important;
    color: #0f172a !important;
}

.sidebar-brand strong { color: #0f172a !important; }
.sidebar-brand span { color: #64748b !important; }

.sidebar-current-module {
    --module-accent: #2563eb;
    margin: 12px 2px 12px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--module-accent) 96%, #ffffff 4%), color-mix(in srgb, var(--module-accent) 72%, #0f172a 28%));
    color: #fff;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--module-accent) 28%, transparent);
}

.current-module-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.24);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.current-module-copy { min-width: 0; }
.current-module-copy span {
    display: block;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .78;
    line-height: 1;
}
.current-module-copy strong {
    display: block;
    margin-top: 3px;
    font-size: .92rem;
    line-height: 1.05;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.current-module-copy small {
    display: block;
    margin-top: 4px;
    font-size: .72rem;
    opacity: .86;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav {
    padding-top: 4px !important;
}

.sidebar .nav-group {
    --module-accent: #2563eb;
    margin-bottom: 9px !important;
    border-radius: 16px !important;
    background: #ffffff;
    border: 1px solid transparent;
    overflow: hidden;
}

.sidebar .nav-group.is-current-module {
    border-color: color-mix(in srgb, var(--module-accent) 28%, #ffffff);
    background: color-mix(in srgb, var(--module-accent) 6%, #ffffff);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .055);
}

.sidebar .nav-title,
.sidebar .nav-link-main {
    min-height: 46px;
    padding: 9px 10px !important;
    border-radius: 14px !important;
    color: #334155 !important;
    background: transparent !important;
    font-size: .86rem !important;
    font-weight: 850 !important;
}

.sidebar .nav-group.is-current-module > .nav-title,
.sidebar .nav-link-main.is-current-module,
.sidebar .nav-link-main.active {
    background: var(--module-accent) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--module-accent) 25%, transparent) !important;
}

.sidebar .nav-title:hover,
.sidebar .nav-link-main:hover {
    background: color-mix(in srgb, var(--module-accent) 9%, #ffffff) !important;
    color: #111827 !important;
}

.sidebar .nav-group.is-current-module > .nav-title:hover,
.sidebar .nav-link-main.is-current-module:hover,
.sidebar .nav-link-main.active:hover {
    color: #ffffff !important;
    background: var(--module-accent) !important;
}

.sidebar .nav-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 12px !important;
    color: var(--module-accent) !important;
    background: color-mix(in srgb, var(--module-accent) 12%, #ffffff) !important;
    flex: 0 0 auto;
}

.sidebar .nav-group.is-current-module > .nav-title .nav-icon,
.sidebar .nav-link-main.is-current-module .nav-icon,
.sidebar .nav-link-main.active .nav-icon {
    color: #ffffff !important;
    background: rgba(255,255,255,.18) !important;
}

.sidebar .module-accent-line {
    display: none !important;
}

.sidebar .nav-children {
    margin: 6px 6px 8px !important;
    padding: 5px !important;
    border-radius: 13px;
    background: rgba(255,255,255,.64);
}

.sidebar .nav-link-sub {
    padding: 8px 10px 8px 32px !important;
    margin-bottom: 2px;
    border-radius: 10px !important;
    color: #475569 !important;
    font-size: .82rem !important;
    line-height: 1.15;
}

.sidebar .nav-child-dot {
    left: 14px !important;
    background: var(--module-accent) !important;
}

.sidebar .nav-link-sub.active {
    background: #ffffff !important;
    color: var(--module-accent) !important;
    font-weight: 900;
    box-shadow: inset 3px 0 0 var(--module-accent), 0 6px 16px rgba(15,23,42,.045) !important;
}

.sidebar .nav-link-sub:hover {
    background: #ffffff !important;
    color: #0f172a !important;
}

.module-dashboard { --module-accent: #2563eb !important; }
.module-productos { --module-accent: #059669 !important; }
.module-crm { --module-accent: #d97706 !important; }
.module-ventas { --module-accent: #0891b2 !important; }
.module-reportes { --module-accent: #7c3aed !important; }
.module-admin { --module-accent: #db2777 !important; }

.topbar {
    min-height: 64px !important;
    height: auto !important;
    padding: 10px 20px !important;
    gap: 14px;
}

.topbar-title h2 {
    font-size: clamp(1rem, 1.2vw, 1.18rem) !important;
}

.content-area {
    padding: clamp(14px, 2vw, 26px) clamp(12px, 2vw, 30px) 28px !important;
}

.page-header {
    gap: 14px !important;
}

.page-header h1,
.module-hero h1 {
    font-size: clamp(1.22rem, 2.2vw, 1.62rem) !important;
}

.page-header p,
.module-hero p,
.card-header-clean p,
.enterprise-card-header span {
    font-size: clamp(.82rem, 1.2vw, .92rem) !important;
}

.enterprise-card,
.metric-card,
.dashboard-period-card,
.module-hero {
    border-radius: var(--crm-radius-lg) !important;
}

.form-control,
.form-select,
.btn {
    min-height: 38px;
}

.table-responsive,
.enterprise-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table,
.enterprise-table,
.table-enterprise {
    max-width: 100%;
}

.enterprise-table th,
.enterprise-table td,
.table-enterprise th,
.table-enterprise td {
    vertical-align: middle;
}

@media (min-width: 992px) {
    body.sidebar-collapsed .main-area {
        width: calc(100% - var(--sidebar-width-collapsed));
    }

    body.sidebar-collapsed .sidebar-current-module,
    body.sidebar-collapsed .brand-copy,
    body.sidebar-collapsed .nav-label,
    body.sidebar-collapsed .nav-caret,
    body.sidebar-collapsed .sidebar-footer {
        display: none !important;
    }

    body.sidebar-collapsed .sidebar .nav-group {
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.sidebar-collapsed .sidebar .nav-title,
    body.sidebar-collapsed .sidebar .nav-link-main {
        width: 48px;
        height: 48px;
        margin-inline: auto;
        padding: 8px !important;
    }

    body.sidebar-collapsed .sidebar .nav-icon {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (max-width: 1199.98px) {
    :root { --sidebar-width: 274px; }
    .topbar-search { display: none !important; }
    .card-header-clean,
    .enterprise-card-header {
        padding: 14px 16px !important;
    }
}

@media (max-width: 991.98px) {
    body { font-size: .94rem; }

    .sidebar {
        width: min(86vw, 330px) !important;
        max-width: 330px;
        padding: 12px 10px !important;
    }

    .sidebar-brand {
        position: sticky;
        top: 0;
        z-index: 2;
        background: rgba(255,255,255,.94);
        backdrop-filter: blur(10px);
    }

    .sidebar-current-module {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 11px;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 1020;
        padding: 9px 12px !important;
        flex-wrap: nowrap;
    }

    .sidebar-toggle {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 auto;
    }

    .topbar-title {
        min-width: 0;
        flex: 1 1 auto;
    }

    .topbar-title h2 {
        font-size: .98rem !important;
        max-width: 52vw;
    }

    .topbar-actions {
        flex: 0 0 auto;
    }

    .topbar-user {
        gap: 7px !important;
    }

    .content-area {
        padding: 12px 10px 22px !important;
    }

    .page-header,
    .module-hero,
    .dashboard-period-card,
    .card-header-clean,
    .enterprise-card-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .page-actions,
    .module-hero-actions {
        width: 100%;
        justify-content: stretch !important;
    }

    .page-actions .btn,
    .module-hero-actions .btn {
        flex: 1 1 auto;
    }

    .row.g-3 > [class*="col-"],
    .row.g-4 > [class*="col-"] {
        margin-bottom: .2rem;
    }

    .metric-card {
        padding: 13px !important;
        gap: 10px !important;
    }

    .metric-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 13px !important;
    }

    .enterprise-card .card-body,
    .card-body {
        padding: 14px !important;
    }

    .table,
    .enterprise-table,
    .table-enterprise {
        min-width: 760px;
        font-size: .84rem;
    }

    .calendar-grid {
        min-width: 720px;
    }

    .product-cell strong,
    .product-cell span {
        max-width: 260px;
    }
}

@media (max-width: 575.98px) {
    body { font-size: .91rem; }

    .sidebar {
        width: min(92vw, 320px) !important;
    }

    .brand-logo,
    .brand-mark.small {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
    }

    .sidebar-brand strong {
        font-size: .88rem !important;
    }

    .sidebar-brand span {
        font-size: .70rem !important;
    }

    .current-module-icon {
        width: 36px;
        height: 36px;
    }

    .current-module-copy strong {
        font-size: .86rem;
    }

    .nav-title,
    .nav-link-main {
        min-height: 44px !important;
        font-size: .82rem !important;
    }

    .nav-link-sub {
        font-size: .80rem !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .topbar-title h2 {
        max-width: 48vw;
        font-size: .92rem !important;
    }

    .topbar-user .user-avatar,
    .topbar-user .user-copy {
        display: none !important;
    }

    .topbar-user form .btn {
        min-height: 38px;
        width: 38px;
        padding: 0 !important;
        border-radius: 12px;
        font-size: 0 !important;
    }

    .topbar-user form .btn i {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    .page-header h1,
    .module-hero h1 {
        font-size: 1.14rem !important;
    }

    .module-hero {
        padding: 1rem !important;
    }

    .form-control,
    .form-select,
    .btn {
        font-size: .88rem;
    }

    .btn-group,
    .page-actions {
        flex-wrap: wrap;
    }

    .btn-group > .btn,
    .page-actions .btn {
        flex: 1 1 auto;
    }

    .enterprise-pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .smart-search-menu {
        max-width: calc(100vw - 20px) !important;
    }
}

/* === POST-CIERRE UI 2026-05-06: navegación sobria tipo producto SaaS === */
:root {
    --ui-sidebar-rail: 64px;
    --ui-sidebar-panel: 226px;
    --ui-sidebar-width: calc(var(--ui-sidebar-rail) + var(--ui-sidebar-panel));
    --ui-topbar-height: 58px;
    --ui-surface: #ffffff;
    --ui-shell-bg: #f6f8fb;
    --ui-border: #e6ebf2;
    --ui-muted: #6b7280;
    --ui-heading: #172033;
    --ui-soft-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}

.module-dashboard { --module-color: #3b82f6; --module-soft: #eff6ff; }
.module-productos { --module-color: #10b981; --module-soft: #ecfdf5; }
.module-crm { --module-color: #f59e0b; --module-soft: #fffbeb; }
.module-ventas { --module-color: #06b6d4; --module-soft: #ecfeff; }
.module-reportes { --module-color: #8b5cf6; --module-soft: #f5f3ff; }
.module-admin { --module-color: #ec4899; --module-soft: #fdf2f8; }

html { font-size: 15px; }
body.app-body {
    background: var(--ui-shell-bg);
    color: #1f2937;
}
.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}
.main-area {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--ui-shell-bg);
}

/* Sidebar: rail de módulos + panel contextual. Reduce amontonamiento y deja claro dónde está el usuario. */
.sidebar {
    width: var(--ui-sidebar-width);
    min-width: var(--ui-sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    padding: 0;
    overflow: hidden;
    background: transparent;
    color: #1f2937;
    border-right: 1px solid var(--ui-border);
    box-shadow: 8px 0 24px rgba(15, 23, 42, .04);
    z-index: 35;
}
.sidebar-rail {
    width: var(--ui-sidebar-rail);
    min-width: var(--ui-sidebar-rail);
    background: linear-gradient(180deg, #0f3f8f 0%, #0b2f6f 48%, #08275e 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    gap: 16px;
}
.rail-brand {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.rail-brand img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.rail-brand span { color: #fff; font-weight: 900; font-size: .82rem; letter-spacing: .02em; }
.rail-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    align-items: center;
}
.rail-module {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.74);
    text-decoration: none;
    font-size: 1.08rem;
    border: 1px solid transparent;
}
.rail-module:hover {
    color: #fff;
    background: rgba(255,255,255,.10);
}
.rail-module.active {
    background: color-mix(in srgb, var(--module-color) 72%, white 0%);
    color: #fff;
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 10px 22px rgba(0,0,0,.16);
}
.rail-active-dot {
    position: absolute;
    right: -4px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--module-color);
    box-shadow: 0 0 0 3px #0b2f6f;
}
.sidebar-panel {
    width: var(--ui-sidebar-panel);
    min-width: var(--ui-sidebar-panel);
    background: var(--ui-surface);
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--ui-border);
}
.sidebar-brand {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--ui-topbar-height);
}
.sidebar-brand strong {
    color: var(--ui-heading);
    font-size: .96rem;
    line-height: 1.05;
    font-weight: 850;
}
.sidebar-brand span {
    color: var(--ui-muted);
    font-size: .72rem;
    line-height: 1.1;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}
.module-context {
    margin: 12px 12px 10px;
    border: 1px solid color-mix(in srgb, var(--module-color) 18%, var(--ui-border));
    background: linear-gradient(180deg, var(--module-soft), #fff);
    border-radius: 16px;
    overflow: hidden;
}
.module-context-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-top: 4px solid var(--module-color);
}
.context-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--module-color);
    color: #fff;
    flex: 0 0 auto;
}
.module-context span {
    display: block;
    color: var(--ui-muted);
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .10em;
    text-transform: uppercase;
}
.module-context strong {
    display: block;
    color: var(--ui-heading);
    font-size: .86rem;
    line-height: 1.15;
    margin-top: 2px;
}
.context-section {
    border-top: 1px solid color-mix(in srgb, var(--module-color) 16%, var(--ui-border));
    padding: 8px 12px 10px;
    font-weight: 800;
    color: var(--module-color);
    font-size: .82rem;
}
.sidebar-nav {
    padding: 4px 12px 14px;
    overflow-y: auto;
    min-height: 0;
}
.sidebar-nav::-webkit-scrollbar { width: 7px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #d9e1ec; border-radius: 999px; }
.nav-group {
    margin: 0 0 7px;
    padding: 0 0 7px;
    border-bottom: 1px solid #edf1f6;
}
.nav-title,
.nav-link-main {
    color: #697386;
    background: transparent;
    border: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 8px;
    border-radius: 11px;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: none;
}
.nav-title.active {
    color: var(--ui-heading);
    background: transparent;
}
.nav-title.active .nav-icon {
    color: var(--module-color);
    background: var(--module-soft);
}
.module-accent-line {
    width: 3px;
    height: 24px;
    border-radius: 999px;
    background: var(--module-color);
    flex: 0 0 auto;
}
.nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #f3f6fa;
    color: #64748b;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: .92rem;
}
.nav-label {
    min-width: 0;
    white-space: normal;
    line-height: 1.22;
}
.nav-children {
    margin: 3px 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.nav-link-sub {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    border-radius: 10px;
    color: #5f6b7b;
    text-decoration: none;
    padding: 7px 9px;
    font-size: .86rem;
    font-weight: 650;
}
.nav-link-sub:hover {
    background: #f6f8fb;
    color: #111827;
}
.nav-link-sub.active {
    background: var(--module-color);
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--module-color) 28%, transparent);
}
.nav-child-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--module-color) 45%, #cbd5e1);
    flex: 0 0 auto;
}
.nav-link-sub.active .nav-child-dot { background: #fff; }
.sidebar-footer { display: none !important; }
body.sidebar-collapsed .sidebar {
    width: var(--ui-sidebar-rail);
    min-width: var(--ui-sidebar-rail);
}
body.sidebar-collapsed .sidebar-panel { display: none; }

/* Topbar y contenido menos pesados. */
.topbar {
    height: var(--ui-topbar-height);
    min-height: var(--ui-topbar-height);
    padding: 0 18px;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--ui-border);
    box-shadow: none;
    z-index: 25;
}
.sidebar-toggle {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    background: #fff;
    color: #2864c8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-right: 12px;
}
.sidebar-toggle:hover { background: #f8fafc; }
.topbar-title { flex: 1 1 auto; min-width: 0; }
.topbar-title span {
    font-size: .68rem;
    letter-spacing: .11em;
    color: #718096;
}
.topbar h2 {
    margin-top: 1px;
    color: #1f3763;
    font-size: 1.02rem;
    letter-spacing: -.01em;
}
.topbar-actions { gap: 10px; }
.topbar-search {
    height: 36px;
    min-width: 210px;
    background: #fff;
    border-color: var(--ui-border);
    box-shadow: none;
    font-size: .82rem;
}
.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #edf4ff;
    color: #2864c8;
}
.user-copy strong { font-size: .84rem; }
.user-copy span { font-size: .72rem; }
.content-area {
    padding: 18px 22px 26px;
}
.breadcrumb-shell {
    margin-bottom: 12px;
    font-size: .79rem;
}

/* El hero anterior estaba dominando la pantalla. Ahora se comporta como encabezado de sección. */
.module-hero,
.page-header {
    min-height: 0 !important;
    border-radius: 18px !important;
    padding: 18px 20px !important;
    margin-bottom: 16px !important;
    background: #fff !important;
    color: var(--ui-heading) !important;
    border: 1px solid var(--ui-border) !important;
    border-left: 5px solid var(--module-color, #3b82f6) !important;
    box-shadow: var(--ui-soft-shadow) !important;
}
.module-hero::before,
.module-hero::after,
.page-header::before,
.page-header::after { display: none !important; }
.module-hero .eyebrow,
.page-eyebrow {
    color: var(--module-color, #3b82f6) !important;
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    margin-bottom: 4px !important;
}
.module-hero h1,
.page-header h1 {
    color: var(--ui-heading) !important;
    font-size: 1.22rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
.module-hero p,
.page-header p {
    color: #6b7280 !important;
    font-size: .88rem !important;
    margin-top: 5px !important;
    max-width: 920px;
}
.module-hero .btn-light {
    border: 1px solid var(--ui-border);
    background: #f8fafc;
    color: #1f2937;
}

.row.g-3.mb-4 { margin-bottom: 16px !important; }
.stat-card,
.metric-card,
.stat-card-compact {
    border-radius: 16px !important;
    border: 1px solid var(--ui-border) !important;
    background: #fff !important;
    box-shadow: var(--ui-soft-shadow) !important;
    padding: 14px 16px !important;
    min-height: 0 !important;
}
.stat-card span,
.metric-card span {
    font-size: .76rem !important;
    color: var(--ui-muted) !important;
}
.stat-card strong,
.metric-card strong {
    font-size: 1.06rem !important;
    color: var(--ui-heading) !important;
}
.enterprise-card,
.card {
    border-radius: 16px !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-soft-shadow) !important;
}
.card-body { padding: 16px !important; }
.card-header,
.enterprise-card-header,
.card-header-clean {
    padding: 14px 16px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--ui-border) !important;
}
.card-header h5,
.enterprise-card-header h5,
.card-header-clean h5 {
    font-size: .98rem !important;
    color: var(--ui-heading) !important;
}
.form-label { font-size: .8rem; color: #4b5563; margin-bottom: 5px; }
.form-control,
.form-select,
.btn {
    min-height: 36px;
    border-radius: 10px;
    font-size: .88rem;
}
.table-responsive {
    overflow-x: auto;
    scrollbar-width: thin;
}
.enterprise-table,
.table-enterprise,
.table { font-size: .84rem; }
.enterprise-table thead th,
.table-enterprise thead th {
    font-size: .68rem !important;
    background: #f8fafc !important;
    color: #5b6678 !important;
    white-space: nowrap;
}
.enterprise-table td,
.table-enterprise td { vertical-align: middle; }
.product-cell strong { font-size: .9rem; }
.product-cell span { font-size: .8rem; color: #64748b; }
.badge,
.status-pill { font-size: .70rem !important; }
.smart-search-dropdown { z-index: 99999 !important; }

@media (max-width: 1199.98px) {
    html { font-size: 14px; }
    .content-area { padding: 16px; }
    .topbar-search { min-width: 170px; }
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(86vw, 320px);
        min-width: min(86vw, 320px);
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 18px 0 44px rgba(15,23,42,.18);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-panel {
        width: calc(min(86vw, 320px) - var(--ui-sidebar-rail));
        min-width: calc(min(86vw, 320px) - var(--ui-sidebar-rail));
    }
    body.sidebar-collapsed .sidebar-panel { display: flex; }
    body.sidebar-collapsed .sidebar {
        width: min(86vw, 320px);
        min-width: min(86vw, 320px);
    }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.36);
        border: 0;
        z-index: 30;
    }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .topbar {
        padding: 0 12px;
        gap: 8px;
    }
    .topbar-title span { display: none; }
    .topbar h2 { font-size: .96rem; }
    .topbar-search { display: none; }
    .user-copy { display: none; }
    .content-area { padding: 14px 12px 22px; }
    .module-hero,
    .page-header {
        padding: 14px 16px !important;
    }
    .module-hero h1,
    .page-header h1 { font-size: 1.08rem !important; }
}

@media (max-width: 575.98px) {
    html { font-size: 13.5px; }
    .topbar { height: 54px; min-height: 54px; }
    .sidebar-toggle { width: 34px; height: 34px; margin-right: 6px; }
    .topbar .btn { padding-left: 8px; padding-right: 8px; }
    .topbar .btn .me-1 { margin-right: 0 !important; }
    .topbar .btn { font-size: 0; }
    .topbar .btn i { font-size: .95rem; }
    .content-area { padding: 10px 9px 18px; }
    .breadcrumb-shell { display: none; }
    .module-hero,
    .page-header {
        border-radius: 14px !important;
        padding: 13px !important;
        margin-bottom: 12px !important;
    }
    .module-hero p,
    .page-header p { display: none; }
    .module-hero-actions,
    .page-actions { margin-top: 10px; width: 100%; }
    .module-hero .btn,
    .page-actions .btn { width: 100%; }
    .card-body { padding: 12px !important; }
    .form-control,
    .form-select,
    .btn { min-height: 34px; }
    .row.g-3 { --bs-gutter-x: .7rem; --bs-gutter-y: .7rem; }
}

/* =========================================================
   Ajuste post-cierre: Checador de precios tipo buscador comercial
   ========================================================= */
.price-checker-header {
    margin-bottom: 14px !important;
}

.price-checker-grid {
    display: grid;
    grid-template-columns: minmax(420px, 0.9fr) minmax(480px, 1.1fr);
    gap: 18px;
    align-items: start;
}

.price-search-card,
.price-detail-card {
    background: #fff;
    border: 1px solid rgba(214, 222, 235, .9);
    border-radius: 22px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .07);
}

.price-search-card {
    padding: 18px;
    position: sticky;
    top: 76px;
}

.price-search-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.price-search-title > i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #f0f6ff;
    color: #1e63d8;
    font-size: 1.25rem;
}

.price-search-title h2 {
    margin: 0;
    color: #0f2341;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.price-search-title span {
    color: #68758a;
    font-size: .82rem;
}

.price-search-form {
    margin-bottom: 14px;
}

.price-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d6dfec;
    border-radius: 18px;
    background: #fff;
    padding: 9px 10px 9px 14px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.price-search-input-wrap:focus-within {
    border-color: #8bb5ff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.price-search-input-wrap > i {
    color: #6482a7;
    font-size: 1.2rem;
    flex: 0 0 auto;
}

.price-main-search {
    border: 0 !important;
    box-shadow: none !important;
    min-height: 42px !important;
    padding-left: 0 !important;
    font-size: .96rem !important;
    flex: 1 1 auto;
}

.price-search-submit {
    min-height: 38px !important;
    border-radius: 13px !important;
    padding-left: 16px;
    padding-right: 16px;
    white-space: nowrap;
}

.price-filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.price-filter-row .form-select {
    border-radius: 13px;
    background-color: #f8fafc;
}

.price-results-list {
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid #edf1f6;
    border-radius: 18px;
    background: #fff;
    scrollbar-width: thin;
}

.price-result-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    background: #fff;
    padding: 16px 18px;
    color: #0f2341;
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.price-result-item:last-child {
    border-bottom: 0;
}

.price-result-item:hover,
.price-result-item.is-active {
    background: linear-gradient(90deg, rgba(37, 99, 235, .08), rgba(255, 255, 255, .95));
}

.price-result-item.is-active {
    box-shadow: inset 4px 0 0 #2563eb;
}

.price-result-main {
    min-width: 0;
}

.price-result-main strong {
    display: block;
    font-size: .92rem;
    line-height: 1.25;
    font-weight: 800;
    color: #0d203d;
    margin-bottom: 7px;
}

.price-result-main small {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: #5d7190;
    font-size: .78rem;
}

.price-result-main small span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.price-result-price {
    color: #0d6efd;
    font-weight: 900;
    font-size: .96rem;
    white-space: nowrap;
}

.price-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    color: #667085;
    font-size: .82rem;
}

.price-empty-state,
.price-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #697386;
    padding: 48px 24px;
}

.price-empty-state i,
.price-detail-empty i {
    font-size: 2rem;
    color: #9fb0c7;
    margin-bottom: 10px;
}

.price-detail-card {
    padding: 24px;
}

.price-detail-layout {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(320px, 1.25fr);
    gap: 24px;
    align-items: start;
}

.price-product-placeholder {
    min-height: 220px;
    border-radius: 18px;
    background: #f0f4f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3cedc;
}

.price-product-placeholder i {
    font-size: 3.5rem;
}

.price-product-info h3 {
    color: #0f2341;
    font-size: 1.22rem;
    line-height: 1.24;
    letter-spacing: -.02em;
    font-weight: 900;
    margin: 2px 0 16px;
}

.price-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.price-info-tile {
    min-height: 70px;
    border-radius: 14px;
    background: #f3f6fa;
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.price-info-tile span,
.price-reference-box span {
    display: block;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #667998;
    font-size: .68rem;
    margin-bottom: 6px;
}

.price-info-tile strong {
    color: #0e2545;
    font-size: .88rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.price-reference-box {
    margin-top: 18px;
    border: 1px solid #edf1f6;
    border-radius: 16px;
    padding: 14px 16px;
    background: #fbfdff;
}

.price-reference-box p {
    margin: 0;
    color: #0e2545;
    line-height: 1.45;
    font-size: .86rem;
}

.price-sale-band {
    margin-top: 22px;
    border-radius: 20px;
    padding: 26px 22px;
    min-height: 128px;
    background: linear-gradient(135deg, #2274e8 0%, #1751aa 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 16px 28px rgba(23, 81, 170, .20);
}

.price-sale-band > span {
    font-size: .88rem;
    opacity: .92;
    margin-bottom: 8px;
}

.price-sale-band strong {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    line-height: 1;
}

.price-sale-band strong small {
    font-size: 1.35rem;
    font-weight: 800;
}

.price-sale-band strong span {
    font-size: 2.65rem;
    font-weight: 900;
    letter-spacing: -.04em;
}

.price-sale-band strong em {
    font-size: 1.05rem;
    font-style: normal;
    font-weight: 800;
    opacity: .92;
}

.price-sale-band > small {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,.78);
}

@media (max-width: 1399.98px) {
    .price-checker-grid {
        grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr);
    }
    .price-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .price-checker-grid {
        grid-template-columns: 1fr;
    }
    .price-search-card {
        position: static;
    }
    .price-results-list {
        max-height: 420px;
    }
}

@media (max-width: 767.98px) {
    .price-search-card,
    .price-detail-card {
        border-radius: 18px;
        padding: 14px;
    }
    .price-search-title h2 {
        font-size: 1.05rem;
    }
    .price-search-input-wrap {
        display: grid;
        grid-template-columns: auto 1fr;
    }
    .price-search-submit {
        grid-column: 1 / -1;
        width: 100%;
    }
    .price-filter-row {
        grid-template-columns: 1fr;
    }
    .price-result-item {
        padding: 14px;
        align-items: flex-start;
        flex-direction: column;
    }
    .price-result-price {
        align-self: flex-end;
    }
    .price-detail-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .price-product-placeholder {
        min-height: 150px;
    }
    .price-info-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .price-sale-band strong span {
        font-size: 2.15rem;
    }
}

/* === POST-CIERRE 2026-05-06: sidebar por iconos, módulos seleccionables sin navegar === */
.sidebar-module-switcher {
    width: 294px !important;
    min-width: 294px !important;
    background: transparent !important;
}
.sidebar-module-switcher .sidebar-rail {
    background: linear-gradient(180deg, #0f3f8f 0%, #0b2f6f 48%, #08275e 100%) !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.08);
}
.sidebar-module-switcher .rail-module {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    background: transparent;
    font-family: inherit;
    padding: 0;
}
.sidebar-module-switcher .rail-module .rail-active-dot {
    opacity: 0;
    transform: scale(.75);
    transition: opacity .16s ease, transform .16s ease;
}
.sidebar-module-switcher .rail-module.active .rail-active-dot {
    opacity: 1;
    transform: scale(1);
}
.sidebar-module-switcher .rail-module:not(.active):hover {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
}
.sidebar-module-switcher .sidebar-panel {
    width: 230px !important;
    min-width: 230px !important;
}
.sidebar-module-switcher .sidebar-brand {
    padding: 12px 14px !important;
    min-height: 58px !important;
}
.sidebar-module-switcher .module-menu-host {
    padding: 12px 10px 16px !important;
    overflow-y: auto;
}
.module-menu {
    display: none;
    min-height: 0;
}
.module-menu.is-visible {
    display: block;
}
.module-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px 10px;
    border-radius: 16px;
    background: var(--module-soft);
    border: 1px solid color-mix(in srgb, var(--module-color) 22%, #e5edf7);
    border-left: 5px solid var(--module-color);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
    margin-bottom: 10px;
}
.module-menu-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--module-color);
    color: #fff;
    flex: 0 0 auto;
}
.module-menu-title span,
.module-current-section span {
    display: block;
    color: #64748b;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    line-height: 1.1;
}
.module-menu-title strong {
    display: block;
    color: #172033;
    font-size: .85rem;
    font-weight: 900;
    line-height: 1.13;
    margin-top: 3px;
}
.module-current-section {
    padding: 8px 10px;
    margin: 0 0 10px;
    border-radius: 13px;
    background: #fff;
    border: 1px dashed color-mix(in srgb, var(--module-color) 26%, #dbe6f3);
}
.module-current-section strong {
    display: block;
    margin-top: 2px;
    color: var(--module-color);
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.2;
}
.module-menu-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sidebar-module-switcher .module-menu .nav-link-sub {
    margin: 0 !important;
    padding: 8px 10px !important;
    min-height: 36px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #536173 !important;
    font-size: .84rem !important;
    font-weight: 720 !important;
}
.sidebar-module-switcher .module-menu .nav-link-sub:hover {
    background: #f6f8fb !important;
    color: #172033 !important;
    border-color: #edf1f6 !important;
}
.sidebar-module-switcher .module-menu .nav-link-sub.active {
    background: var(--module-color) !important;
    color: #fff !important;
    border-color: var(--module-color) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--module-color) 22%, transparent) !important;
}
.sidebar-module-switcher .module-menu .nav-child-dot {
    width: 6px;
    height: 6px;
    background: color-mix(in srgb, var(--module-color) 48%, #cbd5e1) !important;
}
.sidebar-module-switcher .module-menu .nav-link-sub.active .nav-child-dot {
    background: #fff !important;
}
.sidebar-module-switcher .nav-group,
.sidebar-module-switcher .nav-title,
.sidebar-module-switcher .module-context {
    display: none !important;
}
body.sidebar-collapsed .sidebar-module-switcher {
    width: var(--ui-sidebar-rail) !important;
    min-width: var(--ui-sidebar-rail) !important;
}
body.sidebar-collapsed .sidebar-module-switcher .sidebar-panel {
    display: none !important;
}
@media (max-width: 991.98px) {
    .sidebar-module-switcher {
        width: min(88vw, 310px) !important;
        min-width: min(88vw, 310px) !important;
    }
    .sidebar-module-switcher .sidebar-panel {
        width: calc(min(88vw, 310px) - var(--ui-sidebar-rail)) !important;
        min-width: calc(min(88vw, 310px) - var(--ui-sidebar-rail)) !important;
        display: flex !important;
    }
}
@media (max-width: 575.98px) {
    .sidebar-module-switcher {
        width: min(94vw, 320px) !important;
        min-width: min(94vw, 320px) !important;
    }
    .sidebar-module-switcher .sidebar-panel {
        width: calc(min(94vw, 320px) - var(--ui-sidebar-rail)) !important;
        min-width: calc(min(94vw, 320px) - var(--ui-sidebar-rail)) !important;
    }
    .module-menu-header {
        border-radius: 14px;
        padding: 9px;
    }
    .module-menu-title strong { font-size: .8rem; }
    .sidebar-module-switcher .module-menu .nav-link-sub {
        font-size: .82rem !important;
    }
}

/* === POST-CIERRE FIX 2026-05-06: estado activo único y legibilidad del selector de módulos === */
.sidebar-module-switcher .module-menu .nav-link-sub {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    overflow: visible !important;
    white-space: normal !important;
    line-height: 1.22 !important;
}
.sidebar-module-switcher .module-menu .nav-link-sub .nav-label {
    position: static !important;
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: inherit !important;
    line-height: 1.22 !important;
}
.sidebar-module-switcher .module-menu .nav-link-sub.active {
    background: color-mix(in srgb, var(--module-color) 13%, #ffffff) !important;
    color: #111827 !important;
    border-color: color-mix(in srgb, var(--module-color) 28%, #e5edf7) !important;
    border-left: 4px solid var(--module-color) !important;
    box-shadow: none !important;
    font-weight: 850 !important;
}
.sidebar-module-switcher .module-menu .nav-link-sub.active .nav-child-dot {
    background: var(--module-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--module-color) 16%, transparent) !important;
}
.sidebar-module-switcher .module-menu .nav-link-sub.active .nav-label {
    color: #111827 !important;
}
.sidebar-module-switcher .module-menu:not(.is-visible) .nav-link-sub.active {
    background: transparent !important;
    color: #536173 !important;
    border-color: transparent !important;
    border-left-color: transparent !important;
}


/* PC01.7 — Pipeline CRM / Clientes reconstrucción visual separada
   Evita colisiones con reglas globales .pipeline-board y mantiene una sola fila horizontal. */
.pc01-crm-pipeline-scroll,
.pc01-client-pipeline-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 12px;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.pc01-crm-pipeline-board,
.pc01-client-pipeline-board {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 18px !important;
    width: max-content !important;
    min-width: max-content !important;
}

.pc01-crm-pipeline-column,
.pc01-client-pipeline-column {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 20px;
    padding: 14px;
    min-height: 240px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
}

.pc01-crm-pipeline-column {
    flex-basis: 292px !important;
    width: 292px !important;
    max-width: 292px !important;
    min-width: 292px !important;
}

.pc01-client-pipeline-column {
    flex-basis: 304px !important;
    width: 304px !important;
    max-width: 304px !important;
    min-width: 304px !important;
}

.pc01-crm-pipeline-card-list,
.pc01-client-pipeline-column {
    scrollbar-width: thin;
}

.pc01-crm-pipeline-card-list {
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    padding-right: 4px;
}

.pc01-client-pipeline-column {
    max-height: calc(100vh - 330px);
    overflow-y: auto;
}

.pc01-crm-pipeline-column .pipeline-column-header,
.pc01-client-pipeline-column .pipeline-column-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
}


/* PC01.7.A — Color visual por fase en pipelines
   Asigna un color suave por columna para facilitar la identificación visual. */
.pc01-crm-pipeline-column,
.pc01-client-pipeline-column {
    --pc01-phase-accent: #94a3b8;
    --pc01-phase-soft: #f8fafc;
    background: var(--pc01-phase-soft);
    border-color: color-mix(in srgb, var(--pc01-phase-accent) 34%, #ffffff 66%);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--pc01-phase-accent) 12%, rgba(15, 23, 42, .06) 88%);
}

.pc01-crm-pipeline-column .pipeline-column-header,
.pc01-client-pipeline-column .pipeline-column-header {
    margin: -14px -14px 14px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--pc01-phase-accent) 24%, #ffffff 76%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pc01-phase-accent) 14%, #ffffff 86%) 0%, color-mix(in srgb, var(--pc01-phase-accent) 8%, #ffffff 92%) 100%);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.pc01-crm-pipeline-column .pipeline-column-header strong,
.pc01-client-pipeline-column .pipeline-column-header strong {
    color: #0f172a;
}

.pc01-crm-pipeline-column .pipeline-column-header span:not(.badge),
.pc01-client-pipeline-column .pipeline-column-header span:not(.badge) {
    color: #475569;
}

.pc01-crm-pipeline-column .pipeline-column-header .badge,
.pc01-client-pipeline-column .pipeline-column-header .badge {
    border-color: color-mix(in srgb, var(--pc01-phase-accent) 28%, #ffffff 72%) !important;
    background: color-mix(in srgb, var(--pc01-phase-accent) 14%, #ffffff 86%) !important;
    color: #0f172a !important;
}

.pc01-crm-pipeline-column::before,
.pc01-client-pipeline-column::before {
    content: '';
    display: block;
    height: 5px;
    margin: -14px -14px 14px;
    background: linear-gradient(90deg, var(--pc01-phase-accent) 0%, color-mix(in srgb, var(--pc01-phase-accent) 55%, #ffffff 45%) 100%);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* CRM Pipeline */
.pc01-crm-pipeline-column:nth-child(1) { --pc01-phase-accent: #2563eb; --pc01-phase-soft: #eff6ff; }
.pc01-crm-pipeline-column:nth-child(2) { --pc01-phase-accent: #7c3aed; --pc01-phase-soft: #f5f3ff; }
.pc01-crm-pipeline-column:nth-child(3) { --pc01-phase-accent: #0f766e; --pc01-phase-soft: #ecfeff; }
.pc01-crm-pipeline-column:nth-child(4) { --pc01-phase-accent: #ea580c; --pc01-phase-soft: #fff7ed; }
.pc01-crm-pipeline-column:nth-child(5) { --pc01-phase-accent: #16a34a; --pc01-phase-soft: #f0fdf4; }
.pc01-crm-pipeline-column:nth-child(6) { --pc01-phase-accent: #dc2626; --pc01-phase-soft: #fef2f2; }
.pc01-crm-pipeline-column:nth-child(7) { --pc01-phase-accent: #0891b2; --pc01-phase-soft: #ecfeff; }
.pc01-crm-pipeline-column:nth-child(8) { --pc01-phase-accent: #ca8a04; --pc01-phase-soft: #fefce8; }

/* Clientes / Ventas Pipeline */
.pc01-client-pipeline-column:nth-child(1) { --pc01-phase-accent: #0284c7; --pc01-phase-soft: #f0f9ff; }
.pc01-client-pipeline-column:nth-child(2) { --pc01-phase-accent: #2563eb; --pc01-phase-soft: #eff6ff; }
.pc01-client-pipeline-column:nth-child(3) { --pc01-phase-accent: #7c3aed; --pc01-phase-soft: #f5f3ff; }
.pc01-client-pipeline-column:nth-child(4) { --pc01-phase-accent: #0f766e; --pc01-phase-soft: #ecfeff; }
.pc01-client-pipeline-column:nth-child(5) { --pc01-phase-accent: #ea580c; --pc01-phase-soft: #fff7ed; }
.pc01-client-pipeline-column:nth-child(6) { --pc01-phase-accent: #16a34a; --pc01-phase-soft: #f0fdf4; }
.pc01-client-pipeline-column:nth-child(7) { --pc01-phase-accent: #be123c; --pc01-phase-soft: #fff1f2; }
.pc01-client-pipeline-column:nth-child(8) { --pc01-phase-accent: #a16207; --pc01-phase-soft: #fefce8; }

.pc01-crm-pipeline-column .pipeline-card,
.pc01-client-pipeline-column .pipeline-task-card {
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(2px);
}

/* PC01.7.C — Colores reforzados por fase
   Fallback sin color-mix. La vista además trae color inline para máxima prioridad. */
.pc01-crm-pipeline-column,
.pc01-client-pipeline-column {
    overflow: hidden !important;
}

.pc01-crm-pipeline-column .pipeline-column-header,
.pc01-client-pipeline-column .pipeline-column-header {
    position: sticky;
    top: 0;
    z-index: 5;
}

.pc01-crm-pipeline-column:nth-child(1),
.pc01-client-pipeline-column:nth-child(1) { background:#eff6ff !important; border-color:#2563eb !important; border-top-color:#2563eb !important; }
.pc01-crm-pipeline-column:nth-child(2),
.pc01-client-pipeline-column:nth-child(2) { background:#f5f3ff !important; border-color:#7c3aed !important; border-top-color:#7c3aed !important; }
.pc01-crm-pipeline-column:nth-child(3),
.pc01-client-pipeline-column:nth-child(3) { background:#ecfeff !important; border-color:#0f766e !important; border-top-color:#0f766e !important; }
.pc01-crm-pipeline-column:nth-child(4),
.pc01-client-pipeline-column:nth-child(4) { background:#fff7ed !important; border-color:#ea580c !important; border-top-color:#ea580c !important; }
.pc01-crm-pipeline-column:nth-child(5),
.pc01-client-pipeline-column:nth-child(5) { background:#f0fdf4 !important; border-color:#16a34a !important; border-top-color:#16a34a !important; }
.pc01-crm-pipeline-column:nth-child(6),
.pc01-client-pipeline-column:nth-child(6) { background:#fef2f2 !important; border-color:#dc2626 !important; border-top-color:#dc2626 !important; }
.pc01-crm-pipeline-column:nth-child(7),
.pc01-client-pipeline-column:nth-child(7) { background:#ecfeff !important; border-color:#0891b2 !important; border-top-color:#0891b2 !important; }
.pc01-crm-pipeline-column:nth-child(8),
.pc01-client-pipeline-column:nth-child(8) { background:#fefce8 !important; border-color:#ca8a04 !important; border-top-color:#ca8a04 !important; }

/* PC02.3A — Reportes Vendedores Avanzado */
.seller-advanced-hero {
    border-left: 5px solid #2563eb;
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.seller-kpi {
    min-height: 92px;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    padding: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.seller-kpi span {
    display: block;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.seller-kpi strong {
    display: block;
    color: #0f172a;
    font-size: 1.35rem;
    line-height: 1.15;
}

.seller-chart-card {
    overflow: hidden;
}

.seller-bars {
    display: grid;
    gap: 12px;
}

.seller-bar-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(180px, 2fr) minmax(90px, auto);
    gap: 12px;
    align-items: center;
}

.seller-bar-label {
    font-size: .85rem;
    font-weight: 700;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seller-bar-track {
    height: 13px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.seller-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%);
    min-width: 3px;
}

.seller-bar-value {
    font-size: .82rem;
    font-weight: 800;
    color: #0f172a;
    text-align: right;
    white-space: nowrap;
}


/* ===== CRM Servikar integración visual FASE 07 ===== */
.sidebar-module-switcher .rail-brand span{font-weight:900;font-size:.85rem}
.nav-link-sub.disabled{opacity:.55;pointer-events:none}
.topbar-title h2{margin:0}
.topbar-user .btn{white-space:nowrap}
.content-area{padding:24px}
.checker-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}.checker-metric-card{height:104px;background:#fff;border-radius:18px;box-shadow:0 12px 28px rgba(4,25,60,.12);display:flex;align-items:center;gap:16px;padding:24px}.metric-icon{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-size:25px;font-weight:900}.metric-blue{background:#e8f0ff;color:#126bff}.metric-green{background:#def8ef;color:#00a977}.checker-metric-card strong{display:block;font-size:30px;line-height:1;font-weight:900;color:#071f42}.checker-metric-card span{display:block;margin-top:6px;color:#3e5d86;font-size:14px}.checker-search-card{position:relative;background:#fff;border-radius:22px;box-shadow:0 12px 28px rgba(4,25,60,.12);padding:34px 32px;margin-bottom:26px}.checker-search-card h1{font-size:32px;font-weight:800;margin:0 0 22px;display:flex;align-items:center;gap:12px;color:#071f42}.checker-search-card h1 i{font-size:38px}.checker-search-box{height:74px;border:2px solid #dbe6f3;border-radius:16px;display:flex;align-items:center;padding:0 20px;background:#fff}.checker-search-box:focus-within{border-color:#0d6efd;box-shadow:0 0 0 3px rgba(13,110,253,.18)}.checker-search-box i{font-size:28px;margin-right:22px;color:#496887}.checker-search-box input{border:0!important;outline:0!important;box-shadow:none!important;width:100%;height:100%;font-size:20px;color:#111;background:transparent}.checker-results-panel{position:absolute;left:32px;right:32px;top:133px;background:#fff;border-radius:0 0 14px 14px;box-shadow:0 18px 30px rgba(0,0,0,.10);max-height:380px;overflow:auto;z-index:30}.checker-result-row{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid #edf0f5;text-decoration:none;color:#071f42;background:#fff}.checker-result-row:hover{background:#f7fbff}.checker-result-info strong{display:block;font-size:16px;font-weight:900;margin-bottom:8px}.checker-result-info span{font-size:14px;color:#4b6588;margin-right:12px}.checker-result-info .state-new{color:#008060}.checker-result-price{font-weight:900;color:#0d6efd;font-size:18px;white-space:nowrap}.checker-result-empty{padding:20px;color:#64748b}.checker-product-card{background:#fff;border-radius:22px;box-shadow:0 12px 28px rgba(4,25,60,.12);padding:32px;margin-top:18px}.checker-product-layout{display:grid;grid-template-columns:414px minmax(0,1fr);gap:24px;align-items:start}.checker-product-image{height:250px;background:#eef3f9;border-radius:14px;display:grid;place-items:center;overflow:hidden}.checker-product-image img{width:100%;height:100%;object-fit:contain}.checker-image-empty{font-size:58px;color:#c8d3e2}.checker-product-detail h2{font-size:25px;font-weight:900;margin:0 0 16px;color:#061a38}.checker-info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.checker-info-tile{background:#eef3f9;border-radius:10px;min-height:70px;padding:14px 16px}.checker-info-tile span{display:block;color:#557092;font-size:12px;text-transform:uppercase;margin-bottom:7px}.checker-info-tile strong{font-size:16px;font-weight:900;color:#071f42}.checker-info-tile .state-new{color:#008060}.checker-price-band{margin-top:42px;background:linear-gradient(135deg,#277df0,#1d5db8);border-radius:22px;min-height:152px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.checker-price-band span{font-size:16px;margin-bottom:10px}.checker-price-band strong{font-size:58px;line-height:1;font-weight:900;letter-spacing:.5px}.checker-price-band small{font-size:24px}.checker-price-band em{font-style:normal;font-size:24px;margin-left:10px}
@media(max-width:1100px){.checker-metrics{grid-template-columns:1fr}.checker-product-layout{grid-template-columns:1fr}.checker-info-grid{grid-template-columns:repeat(2,1fr)}.checker-price-band strong{font-size:42px}}

/* ===== FASE 07 Smart search + modal ===== */
.checker-result-row{width:100%;border-left:0;border-right:0;border-top:0;text-align:left;cursor:pointer}
.checker-result-row.is-active{background:#f0f7ff}
.checker-empty-workspace{min-height:330px;display:grid;place-content:center;text-align:center;color:#64748b}
.checker-empty-workspace h2{font-weight:900;color:#071f42}
.checker-empty-icon{font-size:48px;color:#9bb2d2;margin-bottom:8px}
.product-modal .modal-dialog{transform:translateY(24px);transition:transform .18s ease-out}
.product-modal.show .modal-dialog{transform:translateY(0)}
.product-modal-content{border:0;border-radius:24px;box-shadow:0 30px 80px rgba(4,25,60,.28);overflow:hidden}
.product-modal-header{background:#fff;border-bottom:1px solid #e7eef8;padding:22px 26px}
.product-modal-header .modal-title{font-weight:900;color:#071f42}
.modal-kicker{display:block;color:#1d72e8;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:900}
.product-modal-close{box-shadow:none!important}
.product-modal-body{background:#fff;padding:28px}
.product-modal-footer{background:#f8fbff;border-top:1px solid #e7eef8;padding:18px 26px}
.modal-loading{min-height:260px;display:flex;align-items:center;justify-content:center;gap:12px;color:#64748b}
.modal-product-layout{display:grid;grid-template-columns:414px minmax(0,1fr);gap:24px;align-items:start}
.modal-price-band{margin-top:26px}
.modal-price-band p{margin:8px 0 0;color:rgba(255,255,255,.8)}
@media(max-width:1100px){.modal-product-layout{grid-template-columns:1fr}}

/* ===== FIX resultados búsqueda FASE 07 ===== */
.checker-search-card{overflow:visible!important;z-index:50}
.checker-results-panel{display:block;z-index:9999!important}
.checker-results-panel.d-none{display:none!important}
.content-area,.main-area,.app-shell{overflow:visible}

/* ===== FASE 08 seguridad acceso ===== */
.auth-card .form-text{font-size:.78rem;color:#64748b}

/* ===== FASE 08 FIX LOGIN NAVY + SIDEBAR NAVY ===== */
:root{--servikar-navy:#071f42;--servikar-navy-2:#0b2f63;--servikar-blue:#1d72e8}
body.auth-body.auth-navy{min-height:100vh!important;margin:0;display:grid!important;place-items:center!important;background:radial-gradient(circle at 20% 0%,rgba(58,126,255,.28),transparent 34rem),linear-gradient(135deg,#071f42 0%,#0b2f63 50%,#102b52 100%)!important;padding:24px}
.auth-card{width:min(430px,calc(100vw - 2rem))!important;border:0!important;border-radius:24px!important;background:rgba(255,255,255,.98)!important;box-shadow:0 32px 90px rgba(0,0,0,.32)!important;overflow:hidden}
.auth-title-block{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.auth-logo{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--servikar-blue),var(--servikar-navy));box-shadow:0 12px 26px rgba(7,31,66,.24)}
.auth-title-block h1{margin:0;color:var(--servikar-navy);font-size:1.45rem;font-weight:900}
.auth-title-block p{margin:2px 0 0;color:#64748b}
.auth-input{min-height:48px;border-radius:13px!important}
.auth-submit{min-height:46px;border-radius:13px!important;background:var(--servikar-blue)!important;border-color:var(--servikar-blue)!important;font-weight:800}
.sidebar,.sidebar-module-switcher,.sidebar-rail{background:linear-gradient(180deg,#071f42 0%,#0b2f63 55%,#061933 100%)!important}
.sidebar-panel{background:#fff!important}
.rail-module.active,.rail-module:hover{background:#123f82!important}
.rail-brand{background:#0f3f91!important;border-color:rgba(255,255,255,.18)!important}
.module-menu-icon{background:#e8f1ff!important;color:#0f3f91!important}
.nav-link-sub.active{border-color:#071f42!important;color:#071f42!important}

/* ===== FASE 08 FIX usuario en sidebar ===== */
.sidebar-panel{
    display:flex!important;
    flex-direction:column!important;
    min-height:100vh!important;
}
.sidebar-nav{
    flex:1 1 auto!important;
}
.sidebar-user-footer{
    margin-top:auto;
    padding:16px 14px;
    border-top:1px solid #e8eef7;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
}
.sidebar-user-avatar{
    width:42px;
    height:42px;
    border-radius:14px;
    overflow:hidden;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#071f42,#1d72e8);
    color:#fff;
    font-weight:900;
    box-shadow:0 8px 20px rgba(7,31,66,.18);
}
.sidebar-user-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.sidebar-user-copy{
    min-width:0;
    line-height:1.15;
}
.sidebar-user-copy strong{
    display:block;
    color:#071f42;
    font-size:.88rem;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:155px;
}
.sidebar-user-copy span{
    display:block;
    color:#64748b;
    font-size:.74rem;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:155px;
}
body.sidebar-collapsed .sidebar-user-copy,
body.sidebar-collapsed .sidebar-user-footer{
    display:none!important;
}


/* ===== FIX LOGO EMPRESA SERVIKAR ===== */
.sidebar-brand-logo{width:118px;height:38px;object-fit:contain;border-radius:10px;display:block;flex:0 0 auto}
.sidebar-brand .brand-copy{min-width:0}
.auth-logo.auth-logo-img{width:96px;height:54px;border-radius:16px;background:transparent;box-shadow:none;overflow:hidden}
.auth-logo.auth-logo-img img{width:100%;height:100%;object-fit:contain;display:block}
.rail-brand img{width:100%;height:100%;object-fit:contain;padding:4px;display:block}
body.sidebar-collapsed .sidebar-brand-logo{display:none}
@media(max-width:991.98px){.sidebar-brand-logo{width:106px;height:34px}}

/* ===== FASE 10 FIX FOTO USUARIOS ===== */
.user-photo-sm,.user-photo-form,.user-photo-lg{border-radius:18px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#071f42,#1d72e8);color:#fff;font-weight:900;flex:0 0 auto;box-shadow:0 8px 22px rgba(7,31,66,.14)}
.user-photo-sm{width:44px;height:44px;font-size:.9rem;border-radius:14px}
.user-photo-form{width:104px;height:104px;font-size:1.8rem;border-radius:24px}
.user-photo-lg{width:92px;height:92px;font-size:1.7rem;border-radius:24px}
.user-photo-sm img,.user-photo-form img,.user-photo-lg img,.user-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.user-avatar{overflow:hidden}


/* ===== UI GLOBAL ACTION POPUP ===== */
.action-feedback-modal .modal-content{border-radius:26px;overflow:hidden}
.action-feedback-close{position:absolute;right:18px;top:18px;z-index:2}
.action-feedback-icon{width:78px;height:78px;border-radius:999px;display:grid;place-items:center;margin:8px auto 18px;font-size:2.2rem;font-weight:900}
.action-feedback-modal.is-success .action-feedback-icon{background:#e9f9ef;color:#138a3d;border:1px solid #bdebcf}
.action-feedback-modal.is-error .action-feedback-icon{background:#fff0f0;color:#c62828;border:1px solid #ffc9c9}
.action-feedback-modal.is-warning .action-feedback-icon{background:#fff8e6;color:#b26a00;border:1px solid #ffe1a6}
.action-feedback-modal [data-action-feedback-message]{font-size:.96rem;line-height:1.45}

/* FASE12 FIX: imágenes, búsqueda inteligente y librerías UI */
.product-image-preview,
.product-show-image,
.checker-product-image {
    background: #eef4fb;
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-preview {
    min-height: 120px;
}

.product-image-preview img,
.product-show-image img,
.checker-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-show-image {
    min-height: 260px;
}

.product-table-thumb {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    background: #eef4fb;
    border: 1px solid #dbe7f3;
    flex: 0 0 auto;
}

.smart-search-wrap {
    position: relative;
}

.smart-search-results {
    position: absolute;
    z-index: 1040;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d9e4f2;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    overflow: hidden;
    max-height: 360px;
    overflow-y: auto;
}

.smart-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #0b1b3d;
    text-decoration: none;
    border-bottom: 1px solid #eef2f7;
}

.smart-search-item:hover {
    background: #f4f8ff;
}

.smart-search-item img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 10px;
    background: #eef4fb;
}

.smart-search-item strong,
.smart-search-item small {
    display: block;
}

.smart-search-item small,
.smart-search-empty {
    color: #64748b;
    font-size: .85rem;
}

.smart-search-empty {
    padding: 14px;
}

.ts-wrapper.form-select {
    padding: 0;
    border: 0;
}


.table-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    background: #edf3fb;
}

.contact-profile-image {
    width: 170px;
    height: 170px;
    object-fit: cover;
    border-radius: 28px;
    background: #edf3fb;
    border: 1px solid rgba(15, 43, 80, .08);
}

.contact-image-preview {
    min-height: 220px;
}

.nav-link-section {
    margin: 18px 12px 6px;
    padding-top: 12px;
    border-top: 1px dashed rgba(15, 43, 80, .18);
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* Embudo operativo horizontal */
.embudo-board {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    padding: .25rem .25rem .9rem;
    scrollbar-width: thin;
}

.embudo-columna {
    flex: 1 0 220px;
    min-width: 220px;
    max-width: 320px;
}

.embudo-columna .card {
    min-height: 170px;
}

.embudo-columna-vacia {
    max-width: none;
    flex-basis: 100%;
}

@media (min-width: 1400px) {
    .embudo-columna {
        flex-basis: 0;
    }
}


/* Colores por etapa del embudo */
.embudo-etapa-card {
    position: relative;
    overflow: hidden;
    border-top: 5px solid var(--embudo-color, #2563eb) !important;
    background: linear-gradient(180deg, var(--embudo-bg, #ffffff) 0%, #ffffff 76%);
}

.embudo-etapa-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--embudo-color, #2563eb);
}

.embudo-etapa-badge {
    color: var(--embudo-color, #2563eb);
    background: var(--embudo-soft, rgba(37, 99, 235, .12));
    border: 1px solid var(--embudo-border, rgba(37, 99, 235, .24));
}

.embudo-etapa-inicio {
    --embudo-color: #2563eb;
    --embudo-soft: rgba(37, 99, 235, .12);
    --embudo-border: rgba(37, 99, 235, .28);
    --embudo-bg: #eff6ff;
}

.embudo-etapa-seguimiento {
    --embudo-color: #7c3aed;
    --embudo-soft: rgba(124, 58, 237, .12);
    --embudo-border: rgba(124, 58, 237, .28);
    --embudo-bg: #f5f3ff;
}

.embudo-etapa-cotizacion {
    --embudo-color: #ea580c;
    --embudo-soft: rgba(234, 88, 12, .12);
    --embudo-border: rgba(234, 88, 12, .28);
    --embudo-bg: #fff7ed;
}

.embudo-etapa-negociacion {
    --embudo-color: #ca8a04;
    --embudo-soft: rgba(202, 138, 4, .14);
    --embudo-border: rgba(202, 138, 4, .30);
    --embudo-bg: #fefce8;
}

.embudo-etapa-ganada {
    --embudo-color: #059669;
    --embudo-soft: rgba(5, 150, 105, .12);
    --embudo-border: rgba(5, 150, 105, .28);
    --embudo-bg: #ecfdf5;
}

.embudo-etapa-perdida {
    --embudo-color: #dc2626;
    --embudo-soft: rgba(220, 38, 38, .12);
    --embudo-border: rgba(220, 38, 38, .28);
    --embudo-bg: #fef2f2;
}


/* Global form capitalization rule */
form .form-control:not([type="password"]):not([type="file"]):not([type="number"]):not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="email"]):not([name*="email" i]):not([name*="correo" i]),
form textarea.form-control:not([name*="email" i]):not([name*="correo" i]) {
    text-transform: uppercase;
}

form input[type="email"],
form input[name*="email" i],
form input[name*="correo" i],
form textarea[name*="email" i],
form textarea[name*="correo" i] {
    text-transform: lowercase !important;
}

form input[name*="telefono" i],
form input[name*="teléfono" i],
form input[name*="whatsapp" i],
form input[name*="celular" i],
form input[name*="phone" i] {
    text-transform: none !important;
}

form input[data-no-uppercase="true"],
form textarea[data-no-uppercase="true"] {
    text-transform: none;
}

.embudo-oportunidad-card {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    padding: .75rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}
.embudo-oportunidad-vacia {
    border: 1px dashed rgba(15, 23, 42, .2);
    border-radius: 14px;
    padding: 1rem;
    color: #64748b;
    background: rgba(255, 255, 255, .45);
    text-align: center;
    font-size: .9rem;
}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:8px;overflow-x:auto}.calendar-head{font-weight:800;color:var(--crm-muted);text-align:center;padding:8px}.calendar-day{min-height:135px;background:#fff;border:1px solid var(--crm-border);border-radius:14px;padding:8px}.calendar-day.empty{background:#f8fafc}.calendar-date{font-weight:850;color:var(--crm-navy);margin-bottom:6px}.calendar-event{display:block;width:100%;border:1px solid var(--crm-border);border-radius:10px;padding:6px 8px;margin-bottom:5px;background:#fff;text-align:left;font-size:.78rem;color:var(--crm-text)}.calendar-event.done{background:#e8fff5;border-color:#85d7b8;color:#087f5b}.calendar-event.late{background:#fff1f0;border-color:#ffb4ad;color:#b42318}.calendar-event.pending{background:#fff;border-color:#dbe6f3}.topbar-bell{position:relative}.topbar-bell .badge{position:absolute;top:-8px;right:-8px}

/* ===== FASE 77: nombres visibles en rail de módulos ===== */
:root{
    --ui-sidebar-rail:88px;
    --ui-sidebar-panel:230px;
}
.sidebar-module-switcher{
    width:318px!important;
    min-width:318px!important;
}
.sidebar-module-switcher .sidebar-rail{
    width:88px!important;
    min-width:88px!important;
    padding-inline:7px!important;
}
.sidebar-module-switcher .rail-module{
    width:74px!important;
    min-height:56px!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:14px!important;
    line-height:1!important;
}
.sidebar-module-switcher .rail-module i{
    font-size:1.06rem!important;
}
.rail-module-label{
    display:block;
    max-width:68px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.55rem;
    font-weight:800;
    letter-spacing:.01em;
    color:rgba(255,255,255,.82);
}
.sidebar-module-switcher .rail-module.active .rail-module-label,
.sidebar-module-switcher .rail-module:hover .rail-module-label{
    color:#fff!important;
}
.sidebar-module-switcher .rail-module .rail-active-dot{
    right:-3px!important;
    top:50%;
    transform:translateY(-50%) scale(.75);
}
.sidebar-module-switcher .rail-module.active .rail-active-dot{
    transform:translateY(-50%) scale(1);
}
@media (max-width: 991.98px){
    .sidebar-module-switcher{
        width:min(90vw,340px)!important;
        min-width:min(90vw,340px)!important;
    }
    .sidebar-module-switcher .sidebar-panel{
        width:calc(min(90vw,340px) - 88px)!important;
        min-width:calc(min(90vw,340px) - 88px)!important;
    }
}


/* ===== FASE 103: rail por color de módulo + patrón FontAwesome en visuales ===== */
.sidebar-module-switcher.module-productos .sidebar-rail{background:linear-gradient(180deg,#047857 0%,#065f46 58%,#042f2e 100%)!important;}
.sidebar-module-switcher.module-crm .sidebar-rail{background:linear-gradient(180deg,#d97706 0%,#92400e 58%,#451a03 100%)!important;}
.sidebar-module-switcher.module-ventas .sidebar-rail{background:linear-gradient(180deg,#0891b2 0%,#0e7490 58%,#164e63 100%)!important;}
.sidebar-module-switcher.module-reportes .sidebar-rail{background:linear-gradient(180deg,#7c3aed 0%,#5b21b6 58%,#2e1065 100%)!important;}
.sidebar-module-switcher.module-admin .sidebar-rail{background:linear-gradient(180deg,#db2777 0%,#9d174d 58%,#500724 100%)!important;}
.sidebar-module-switcher .rail-brand{background:rgba(255,255,255,.13)!important;border-color:rgba(255,255,255,.22)!important;}
.sidebar-module-switcher .rail-module.active,.sidebar-module-switcher .rail-module:hover{background:rgba(255,255,255,.18)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.18)!important;}
.sidebar-module-switcher .rail-module.active .rail-active-dot{background:#fff!important;box-shadow:0 0 0 3px rgba(255,255,255,.18)!important;}
.sidebar-module-switcher .module-menu-header{border-color:color-mix(in srgb,var(--module-color) 28%,#e5e7eb)!important;}
.sidebar-module-switcher .module-menu-icon{background:var(--module-soft)!important;color:var(--module-color)!important;}
.sidebar-module-switcher .module-current-section strong,.sidebar-module-switcher .module-menu .nav-link-sub.active{color:var(--module-color)!important;}
.sidebar-module-switcher .module-menu .nav-link-sub.active{box-shadow:inset 3px 0 0 var(--module-color),0 8px 18px rgba(15,23,42,.045)!important;border-color:color-mix(in srgb,var(--module-color) 22%,#ffffff)!important;}
.sidebar-module-switcher .module-menu .nav-link-sub.active .nav-child-dot{background:var(--module-color)!important;}
.progress .progress-bar{background:linear-gradient(90deg,#0d6efd,#38bdf8);}
.card-header i.fa-solid,.exec-card-title i,.meta-progress-title i{box-shadow:inset 0 0 0 1px rgba(13,110,253,.08);}


/* ===== FASE 158: campanitas separadas en topbar ===== */
.topbar-notifications{
    display:flex;
    align-items:center;
    gap:14px;
    padding-right:6px;
}
.topbar-bell{
    position:relative;
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    flex:0 0 38px;
    padding:0!important;
}
.topbar-bell .badge{display:none!important;}
.topbar-bell-badge{
    position:absolute;
    top:-7px;
    right:-7px;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#dc3545;
    color:#fff;
    border:2px solid #fff;
    font-size:.68rem;
    line-height:1;
    font-weight:850;
    box-shadow:0 4px 10px rgba(15,23,42,.18);
}
@media (max-width: 768px){
    .topbar-notifications{gap:10px;padding-right:0;}
    .topbar-bell{width:34px;height:34px;flex-basis:34px;border-radius:11px;}
    .topbar-bell-badge{top:-6px;right:-6px;min-width:18px;height:18px;font-size:.62rem;}
}

/* ===== FASE 199: búsqueda inteligente global ===== */
.crm-smart-autocomplete-wrap{position:relative;width:100%;}
.crm-smart-autocomplete-wrap>input{width:100%;}
.crm-smart-autocomplete-results{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 6px);
    z-index:1085;
    background:#fff;
    border:1px solid #dbe3ef;
    border-radius:14px;
    box-shadow:0 16px 36px rgba(15,23,42,.16);
    overflow:hidden;
    max-height:320px;
    overflow-y:auto;
}
.crm-smart-autocomplete-item{
    width:100%;
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:11px 14px;
    border:0;
    background:#fff;
    text-align:left;
    color:#0f172a;
    border-bottom:1px solid #edf2f7;
}
.crm-smart-autocomplete-item:last-child{border-bottom:0;}
.crm-smart-autocomplete-item i{color:#0d6efd;margin-top:2px;font-size:1rem;}
.crm-smart-autocomplete-item strong{display:block;font-size:.92rem;line-height:1.2;}
.crm-smart-autocomplete-item small{display:block;color:#64748b;font-size:.78rem;line-height:1.25;margin-top:3px;}
.crm-smart-autocomplete-item:hover,.crm-smart-autocomplete-item.is-active{background:#eff6ff;}
.crm-smart-autocomplete-empty{padding:12px 14px;color:#64748b;font-size:.88rem;background:#fff;}
.modal .crm-smart-autocomplete-results{z-index:1095;}