:root {
    color-scheme: light;
    --vc-blue: #0873ee;
    --vc-blue-600: #0567dc;
    --vc-blue-700: #0458c4;
    --vc-red: #ff263e;
    --vc-purple: #6a35ef;
    --vc-orange: #ff7a18;
    --vc-green: #16a34a;
    --vc-ink: #08162f;
    --vc-copy: #19345d;
    --vc-muted: #60769b;
    --vc-border: #e2eaf4;
    --vc-border-strong: #d8e3f0;
    --vc-soft: #f7faff;
    --vc-blue-soft: #eaf4ff;
    --vc-sidebar: 270px;
    --vc-header: 126px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-width: 320px;
    overflow-x: hidden;
    background: #fff;
    color: var(--vc-ink);
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* App shell */
.vc-app-shell {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: #fff;
}

.vc-sidebar {
    position: relative;
    z-index: 60;
    display: flex;
    width: var(--vc-sidebar);
    min-width: var(--vc-sidebar);
    height: 100vh;
    flex-direction: column;
    border-right: 1px solid #e1e9f3;
    background: #fff;
    box-shadow: 1px 0 0 rgba(28, 70, 126, .01);
}

.vc-logo-wrap {
    display: flex;
    height: 106px;
    flex: 0 0 106px;
    align-items: center;
    justify-content: center;
    padding: 14px 22px 8px;
}

.vc-logo {
    width: 205px;
    height: 82px;
    object-fit: contain;
}

.vc-sidebar-close {
    position: absolute;
    right: 12px;
    top: 12px;
    display: none;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    color: #36547f;
    transition: .18s ease;
}
.vc-sidebar-close:hover { background: #f2f7fd; color: var(--vc-blue); }

.vc-sidebar-nav {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    padding: 0 14px 12px;
}

.vc-nav-link {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 13px;
    border-radius: 10px;
    padding: 0 15px;
    color: #173868;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.01em;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.vc-nav-link:hover {
    background: #f4f8fd;
    color: var(--vc-blue);
    transform: translateX(1px);
}
.vc-nav-link.active {
    background: linear-gradient(90deg, #edf5ff 0%, #e7f2ff 100%);
    color: #0569e4;
    font-weight: 750;
}

.vc-sidebar-role-card {
    margin: 4px 16px 14px;
    overflow: hidden;
    border: 1px solid #e1eaf4;
    border-radius: 13px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}
.vc-sidebar-role-copy {
    display: flex;
    gap: 11px;
    border-top: 1px solid #e7edf5;
    padding: 15px 17px 16px;
}
.vc-role-shield { color: #0873ee; }
.vc-role-title { color: #0869df; font-size: 13px; font-weight: 850; }
.vc-role-text { margin-top: 4px; color: #50698f; font-size: 11px; font-weight: 550; line-height: 1.65; }

.vc-profile-card {
    position: relative;
    margin: 0 16px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #f4f7fb 100%);
    padding: 14px 15px 12px;
}
.vc-profile-button { display: flex; width: 100%; align-items: center; gap: 12px; }
.vc-profile-avatar { width: 48px; height: 48px; box-shadow: 0 0 0 2px #fff; }
.vc-network-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 11px 0 0 62px;
    color: #10a95a;
    font-size: 11px;
    font-weight: 750;
}
.vc-profile-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 80;
    border: 1px solid #dfe8f2;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 18px 50px rgba(25, 63, 116, .14);
}
.vc-profile-logout {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    padding: 10px 12px;
    color: #e32942;
    font-size: 12px;
    font-weight: 800;
}
.vc-profile-logout:hover { background: #fff0f2; }

.vc-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    background: rgba(7, 21, 48, .46);
    backdrop-filter: blur(4px);
}

.vc-workspace {
    min-width: 0;
    flex: 1 1 auto;
    height: 100vh;
    overflow-y: auto;
    background: #fff;
}

/* Combined page title + global search header, matching the reference */
.vc-page-header {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--vc-header);
    border-bottom: 1px solid #eef2f7;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.vc-page-heading {
    position: absolute;
    left: 28px;
    top: 38px;
    max-width: 500px;
}
.vc-page-title {
    color: #08142c;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.1;
}
.vc-page-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 11px;
}
.vc-page-subtitle,
.vc-page-trail {
    color: #526a90;
    font-size: 11px;
    font-weight: 600;
}
.vc-page-trail { color: #6d80a0; }

.vc-global-search-wrap {
    position: absolute;
    top: 18px;
    right: 195px;
    width: min(585px, calc(100% - 760px));
    min-width: 350px;
}
.vc-global-search-icon {
    position: absolute;
    inset-y: 0;
    left: 15px;
    display: flex;
    align-items: center;
    color: #365886;
    pointer-events: none;
}
.vc-global-search {
    width: 100%;
    height: 41px;
    border: 1px solid #dce5f0;
    border-radius: 8px;
    background: #fff;
    padding: 0 16px 0 44px;
    color: #19345d;
    font-size: 12px;
    font-weight: 550;
    outline: none;
    box-shadow: 0 1px 2px rgba(18, 55, 106, .02);
    transition: .18s ease;
}
.vc-global-search::placeholder { color: #7c8fad; }
.vc-global-search:focus { border-color: #76adf9; box-shadow: 0 0 0 3px rgba(8, 115, 238, .09); }

.vc-header-actions {
    position: absolute;
    right: 22px;
    top: 15px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.vc-header-icon-button {
    position: relative;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    color: #1b457e;
    transition: .18s ease;
}
.vc-header-icon-button:hover { background: #eef6ff; color: var(--vc-blue); }
.vc-notification-count {
    position: absolute;
    right: -1px;
    top: -2px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: #0873ee;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    box-shadow: 0 0 0 2px #fff;
}
.vc-header-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d8e5f7;
    border-radius: 50%;
    background: #f4f8ff;
}
.vc-header-avatar img { width: 95%; height: 95%; object-fit: contain; }
.vc-mobile-menu {
    position: absolute;
    left: 16px;
    top: 18px;
    display: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #dce6f2;
    border-radius: 10px;
    color: #173868;
    background: #fff;
}

.vc-main-content {
    width: 100%;
    padding: 14px 22px 22px;
}
.vc-content-frame {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
.vc-view { display: flex; flex-direction: column; gap: 14px; }

/* Cards and primitives */
.vc-card {
    border: 1px solid var(--vc-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 38, 79, .018), 0 8px 24px rgba(30, 72, 130, .028);
}
.vc-card-soft {
    border: 1px solid #e7edf6;
    border-radius: 13px;
    background: linear-gradient(145deg, #fff 0%, #fbfdff 100%);
}
.vc-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #111c35;
    font-size: 16px;
    font-weight: 850;
    letter-spacing: -.02em;
}
.section-title { color: #101b34; font-size: 15px; font-weight: 850; letter-spacing: -.02em; }
.section-subtitle { margin-top: 3px; color: #62789a; font-size: 11px; font-weight: 550; }
.page-title { color: #08142c; font-size: 25px; font-weight: 900; letter-spacing: -.035em; }
.page-subtitle { margin-top: 4px; color: #60769b; font-size: 12px; font-weight: 550; }

.role-chip {
    display: inline-flex;
    height: 26px;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
    background: #eaf4ff;
    padding: 0 8px;
    color: #0868df;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.vc-label {
    display: block;
    margin-bottom: 7px;
    color: #294a78;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: -.005em;
}
.vc-label.required::after { content: ' *'; color: #ff3046; }

.vc-input {
    width: 100%;
    height: 37px;
    border: 1px solid #dbe5f1;
    border-radius: 7px;
    background: #fff;
    padding: 0 11px;
    color: #20365e;
    font-size: 11px;
    font-weight: 600;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
textarea.vc-input { height: auto; min-height: 80px; padding-top: 10px; resize: vertical; }
.vc-input::placeholder { color: #8ea0bd; font-weight: 500; }
.vc-input:focus { border-color: #6aa8fa; box-shadow: 0 0 0 3px rgba(8, 115, 238, .085); }
.vc-input[readonly], .vc-input:disabled { background: #f7f9fc; color: #50698f; }


/* Buscadores: iconos contenidos dentro del input y alineados a la derecha. */
.vc-search-field {
    position: relative;
    display: block;
    width: 100%;
}
.vc-search-field .vc-search-input {
    display: block;
    width: 100%;
    padding-left: 11px !important;
    padding-right: 76px !important;
}
.vc-search-field .vc-search-icon {
    position: absolute;
    top: 50%;
    right: 13px;
    bottom: auto;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #54709a;
    pointer-events: none;
    z-index: 2;
}
.vc-search-field .vc-search-clear {
    position: absolute;
    top: 50%;
    right: 43px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #6b7f9e;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.vc-search-field .vc-search-clear:hover {
    background: #eef5ff;
    color: #0873ee;
}
.vc-search-field input[type="search"]::-webkit-search-decoration,
.vc-search-field input[type="search"]::-webkit-search-cancel-button,
.vc-search-field input[type="search"]::-webkit-search-results-button,
.vc-search-field input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.vc-btn-primary,
.vc-btn-outline,
.vc-btn-ghost {
    display: inline-flex;
    min-height: 37px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 7px;
    padding: 0 15px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    transition: .18s ease;
}
.vc-btn-primary {
    border: 1px solid #0669de;
    background: linear-gradient(180deg, #0c78f2 0%, #0065df 100%);
    color: #fff;
    box-shadow: 0 6px 15px rgba(8, 103, 232, .18);
}
.vc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(8, 103, 232, .22); }
.vc-btn-primary:disabled { cursor: wait; opacity: .58; transform: none; }
.vc-btn-outline { border: 1px solid #0873ee; background: #fff; color: #086be1; }
.vc-btn-outline:hover { background: #f2f7ff; }
.vc-btn-ghost { border: 1px solid #dce6f2; background: #fff; color: #405d87; }
.vc-btn-ghost:hover { border-color: #bfd5f0; background: #f7faff; color: #086be1; }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }
.metric-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card {
    position: relative;
    min-height: 116px;
    overflow: hidden;
    border: 1px solid #e2e9f2;
    border-radius: 14px;
    background: #fff;
    padding: 18px 16px;
    box-shadow: 0 1px 2px rgba(15, 38, 79, .012), 0 6px 18px rgba(23, 65, 125, .023);
}
.metric-icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: 50%;
    background: #eaf4ff;
    color: #0873ee;
}
.metric-label { color: #25436e; font-size: 11px; font-weight: 750; }
.metric-value { color: #0a1630; font-size: 23px; font-weight: 900; line-height: 1; letter-spacing: -.025em; }
.metric-delta { margin-top: 10px; font-size: 9px; font-weight: 750; }

.status-chip {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}
.status-ok { background: #e9f8ed; color: #138f3b; }
.status-warning { background: #fff1e4; color: #f17412; }
.status-danger { background: #ffeaed; color: #ef293d; }
.status-info { background: #eaf4ff; color: #0870e8; }
.status-purple { background: #f0ebff; color: #6434e6; }
.status-gray { background: #edf1f6; color: #61708c; }

.vc-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.vc-table th {
    height: 38px;
    border-bottom: 1px solid #e4eaf2;
    padding: 0 12px;
    background: #fff;
    color: #38527a;
    text-align: left;
    font-size: 9.5px;
    font-weight: 800;
    white-space: nowrap;
}
.vc-table td {
    height: 41px;
    border-bottom: 1px solid #edf1f6;
    padding: 0 12px;
    color: #334d77;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.vc-table tbody tr { transition: background .15s ease; }
.vc-table tbody tr:hover { background: #f9fbfe; }
.vc-table tbody tr:last-child td { border-bottom: 0; }

/* Historial de pagos: permitir que "Qué se pagó" envuelva el texto sin invadir columnas vecinas. */
.history-paid-cell {
    width: 360px;
    min-width: 300px;
    max-width: 380px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    vertical-align: middle;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.35;
}
.history-paid-cell strong,
.history-paid-cell span {
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.avatar { display: grid; overflow: hidden; place-items: center; border-radius: 50%; background: #eef5ff; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.vc-pagination button {
    min-width: 34px;
    height: 34px;
    border: 1px solid #dbe5f1;
    border-radius: 7px;
    background: #fff;
    color: #435b83;
    font-size: 10px;
    font-weight: 800;
}
.vc-pagination button:hover { background: #f2f7ff; color: #0867e8; }
.vc-pagination button.active { border-color: #0867e8; background: #0867e8; color: #fff; }
.vc-pagination button:disabled { cursor: not-allowed; opacity: .4; }

/* Dashboard */
.cashier-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(390px, 41%) minmax(0, 59%);
    gap: 14px;
}
.dashboard-payment-card { min-height: 432px; padding: 17px 18px; }
.dashboard-side-stack { display: grid; gap: 14px; }
.dashboard-table-card { overflow: hidden; }
.dashboard-package-strip { position: relative; overflow: hidden; padding: 14px 15px 17px; }

/* Contract pages */
.contracts-data-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: 14px;
}
.contract-detail-panel { min-height: 510px; }

/* New contract */
.contract-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 355px;
    gap: 14px;
    align-items: start;
}
.contract-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.contract-section {
    border: 1px solid #e1e9f3;
    border-radius: 11px;
    background: #fff;
    padding: 13px 14px;
}
.contract-section.full { grid-column: 1 / -1; }
.contract-section-title { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; color: #11213d; font-size: 11px; font-weight: 850; }
.contract-fields-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.contract-fields-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.contract-summary { position: sticky; top: calc(var(--vc-header) + 14px); padding: 17px; }

/* Payments */
.payments-layout { display: grid; grid-template-columns: minmax(390px, 39%) minmax(0, 61%); gap: 14px; }
.payments-right { display: grid; gap: 14px; }
.payment-top-grid { display: grid; grid-template-columns: 36% minmax(0, 64%); gap: 14px; }

/* History */
.history-filters { padding: 16px 17px; }
.history-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px 18px; }
.history-filter-actions { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 14px; align-items: end; }

/* Packages */
.packages-hero-card { padding: 15px 16px 13px; }
.package-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.package-card {
    position: relative;
    display: flex;
    min-height: 370px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e0e8f2;
    border-radius: 14px;
    background: #fff;
    padding: 13px 13px 12px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.package-card:hover { transform: translateY(-2px); border-color: #bdd6f9; box-shadow: 0 14px 30px rgba(34, 80, 145, .08); }
.compare-cell { border-left: 1px solid #e6ecf4; padding: 12px 16px; text-align: center; }

/* Search */
.search-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.search-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .94fr); gap: 14px; }

/* Login */
.login-stage {
    min-height: 100vh;
    padding: 22px;
    background:
        radial-gradient(circle at 12% 20%, rgba(30, 136, 255, .18), transparent 31%),
        radial-gradient(circle at 84% 9%, rgba(255, 38, 62, .10), transparent 27%),
        linear-gradient(145deg, #f5faff 0%, #fff 56%, #f3f8ff 100%);
}
.login-shell {
    display: grid;
    min-height: calc(100vh - 44px);
    max-width: 1240px;
    margin: 0 auto;
    grid-template-columns: 54% 46%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 25px 80px rgba(25, 63, 116, .16);
}
.login-visual {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding: 40px 46px;
    background: linear-gradient(140deg, #edf6ff 0%, #fff 56%, #e9f3ff 100%);
}
.login-form-side { display: flex; align-items: center; justify-content: center; padding: 36px 54px; }
.login-form-card { width: 100%; max-width: 410px; }
.login-title { margin-top: 20px; color: #08162f; font-size: 32px; font-weight: 900; letter-spacing: -.04em; }
.login-subtitle { margin-top: 8px; color: #687d9f; font-size: 13px; font-weight: 550; line-height: 1.7; }

/* Helpers */
.shadow-card { box-shadow: 0 1px 2px rgba(15, 38, 79, .018), 0 8px 24px rgba(30, 72, 130, .028); }
.shadow-float { box-shadow: 0 24px 70px rgba(24, 61, 112, .15); }
.modal-backdrop { background: rgba(7, 21, 48, .46); backdrop-filter: blur(4px); }
.mobile-card-list { display: none; }
.skeleton { position: relative; overflow: hidden; background: #edf2f8; }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.fade-in { animation: fadeIn .22s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.toast-enter { animation: toastIn .22s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f3f6fa; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd7e6; }
::-webkit-scrollbar-thumb:hover { background: #aebed2; }

@media (max-width: 1399px) {
    :root { --vc-sidebar: 252px; }
    .vc-logo { width: 188px; }
    .vc-global-search-wrap { right: 188px; width: min(525px, calc(100% - 690px)); min-width: 320px; }
    .vc-page-heading { left: 24px; }
    
    .metric-grid { gap: 10px; }
    .metric-card { padding: 16px 13px; }
    
    .metric-value { font-size: 21px; }
    .cashier-dashboard-grid { grid-template-columns: minmax(350px, 40%) minmax(0, 60%); }
    .package-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .package-grid > :nth-child(n+5) { display: none; }
}

@media (max-width: 1199px) {
    :root { --vc-sidebar: 238px; --vc-header: 120px; }
    .vc-logo-wrap { height: 96px; flex-basis: 96px; }
    .vc-logo { width: 176px; }
    .vc-global-search-wrap { right: 182px; width: 420px; min-width: 0; }
    
    .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .metric-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cashier-dashboard-grid, .payments-layout, .contract-layout { grid-template-columns: 1fr; }
    .contract-summary { position: static; }
    .contracts-data-grid { grid-template-columns: minmax(0, 1fr) 330px; }
    .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .package-grid > :nth-child(n+4) { display: flex; }
    .search-main-grid { grid-template-columns: 1fr; }
    .search-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
    :root { --vc-header: 138px; }
    .vc-app-shell { height: auto; min-height: 100vh; overflow: visible; }
    .vc-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 270px;
        min-width: 270px;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 20px 0 60px rgba(8, 32, 67, .18);
    }
    .vc-sidebar:not(.-translate-x-full) { transform: translateX(0); }
    .vc-sidebar.-translate-x-full { transform: translateX(-100%); }
    .vc-sidebar-close { display: grid; }
    .vc-sidebar-overlay:not(.hidden) { display: block; }
    .vc-workspace { height: auto; min-height: 100vh; overflow: visible; }
    .vc-mobile-menu { display: grid; }
    .vc-page-heading { left: 70px; top: 18px; max-width: calc(100% - 250px); }
    .vc-page-title { font-size: 21px; }
    .vc-page-meta-row { margin-top: 8px; gap: 9px; }
    .vc-global-search-wrap { left: 16px; right: 16px; top: 82px; width: auto; }
    .vc-header-actions { right: 14px; top: 14px; }
    .vc-main-content { padding: 14px 16px 24px; }
    .contracts-data-grid { grid-template-columns: 1fr; }
    .contract-detail-panel { min-height: auto; }
    .payment-top-grid { grid-template-columns: 1fr; }
    .history-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    :root { --vc-header: 142px; }
    .vc-page-header { position: relative; }
    .vc-page-heading { max-width: calc(100% - 130px); }
    .vc-page-title { font-size: 20px; }
    .vc-page-subtitle, .vc-page-trail { font-size: 10px; }
    .vc-header-avatar { display: none; }
    .vc-header-actions { gap: 2px; }
    .vc-main-content { padding: 12px; }
    .vc-view { gap: 12px; }
    .metric-grid, .metric-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .metric-card { min-height: 102px; padding: 14px 12px; }
    
    .metric-icon { width: 42px; height: 42px; flex-basis: 42px; }
    .metric-label { font-size: 10px; }
    .metric-value { font-size: 19px; }
    .cashier-dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-payment-card { min-height: auto; }
    .contract-form-grid { grid-template-columns: 1fr; }
    .contract-section.full { grid-column: auto; }
    .contract-fields-3, .contract-fields-2 { grid-template-columns: 1fr; }
    .payments-layout { grid-template-columns: 1fr; }
    .history-filter-grid { grid-template-columns: 1fr; }
    .history-filter-actions { grid-template-columns: 1fr; }
    .package-grid { grid-template-columns: 1fr; }
    .package-grid > :nth-child(n+4) { display: flex; }
    .search-quick-grid { grid-template-columns: 1fr; }
    .desktop-table { display: none; }
    .mobile-card-list { display: grid; gap: 10px; }
    .vc-card { border-radius: 12px; }
    .vc-input { height: 43px; font-size: 16px; }
    textarea.vc-input { height: auto; }
    .vc-btn-primary, .vc-btn-outline, .vc-btn-ghost { min-height: 42px; }
    .login-stage { padding: 0; }
    .login-shell { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
    .login-visual { display: none; }
    .login-form-side { padding: 28px 22px; }
}

@media (max-width: 479px) {
    :root { --vc-header: 150px; }
    .vc-page-heading { left: 64px; top: 17px; max-width: calc(100% - 125px); }
    .vc-page-title { font-size: 18px; }
    .vc-page-meta-row .vc-page-subtitle { display: none; }
    .role-chip { height: 24px; font-size: 10px; }
    .vc-global-search-wrap { top: 92px; }
    .metric-grid, .metric-grid.four { grid-template-columns: 1fr; }
    .metric-card { min-height: 96px; }
    .vc-btn-primary, .vc-btn-outline, .vc-btn-ghost { width: 100%; }
    .vc-sidebar { width: min(286px, 88vw); min-width: min(286px, 88vw); }
}

@media print {
    .vc-sidebar,
    .vc-page-header,
    .no-print { display: none !important; }
    .vc-workspace { height: auto !important; overflow: visible !important; }
    .vc-main-content { padding: 0 !important; }
    .vc-card { box-shadow: none !important; }
}

/* Sidebar corporativo limpio */
.vc-sidebar-role-card-clean {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: auto;
    padding: 16px;
    overflow: visible;
}
.vc-sidebar-role-card-clean .vc-role-shield {
    flex: 0 0 auto;
    margin: 0;
}


/* Inputs monetarios con símbolo como sufijo (Bonificaciones / Nuevo contrato) */
.vc-money-suffix-wrap {
  position: relative;
}

.vc-money-suffix-input {
  padding-left: 1rem !important;
  padding-right: 2.75rem !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

.vc-money-suffix-input::-webkit-outer-spin-button,
.vc-money-suffix-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.vc-money-suffix {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 1rem;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #315582;
}