/* ═══════════════════════════════════════════════════
   CasaLeones POS — v7 Sidebar & Topbar
   ═══════════════════════════════════════════════════ */

/* ─── SIDEBAR ─── */
.cl-sidebar {
    width: var(--cl-sidebar-w, 240px);
    min-height: 100vh;
    background: var(--cl-surface-1, #0D0E14);
    border-right: 1px solid var(--cl-border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--cl-z-fixed, 1030);
    transition: width var(--cl-transition-base);
    overflow: hidden;
}

/* Collapsed state */
.cl-sidebar--collapsed {
    width: var(--cl-sidebar-collapsed, 72px);
}

.cl-sidebar--collapsed .cl-sidebar__label,
.cl-sidebar--collapsed .cl-sidebar__brand-text,
.cl-sidebar--collapsed .cl-sidebar__brand-ver,
.cl-sidebar--collapsed .cl-sidebar__group-label,
.cl-sidebar--collapsed .cl-sidebar__chevron,
.cl-sidebar--collapsed .cl-sidebar__sublink {
    display: none;
}

.cl-sidebar--collapsed .cl-sidebar__link {
    justify-content: center;
    padding: 10px;
}

.cl-sidebar--collapsed .cl-sidebar__brand {
    justify-content: center;
    padding: 0;
}

.cl-sidebar--collapsed .cl-user-pill {
    justify-content: center;
    padding: 7px;
}

.cl-sidebar--collapsed .cl-user-pill > div:not(.cl-user-avatar),
.cl-sidebar--collapsed .cl-user-pill .cl-user-name,
.cl-sidebar--collapsed .cl-user-pill .cl-user-role,
.cl-sidebar--collapsed .cl-user-pill__logout {
    display: none;
}

/* Firma "hecho por kainet." bajo el usuario; en colapsado no cabe */
.cl-sidebar__firma {
    display: flex;
    justify-content: center;
    margin-top: 2px;
}

.cl-sidebar__firma .cl-kainet {
    padding: 6px 8px;
}

.cl-sidebar--collapsed .cl-sidebar__firma {
    display: none;
}

.cl-sidebar--collapsed .cl-sidebar__footer {
    padding: 12px 8px;
}

.cl-sidebar--collapsed .cl-sidebar__toggle {
    position: static;
    width: 100%;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--cl-border-color);
    background: transparent;
    height: 40px;
}

/* ─── BRAND ─── */
.cl-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    height: var(--cl-topbar-h, 60px);
    border-bottom: 1px solid var(--cl-border-color);
    flex-shrink: 0;
    text-decoration: none;
}

.cl-sidebar__logo {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    object-fit: contain;
    flex-shrink: 0;
}

.cl-sidebar__brand-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--cl-red-500), var(--cl-red-700));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.cl-sidebar__brand-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--cl-text-primary);
    white-space: nowrap;
}

.cl-sidebar__brand-ver {
    font-size: 10px;
    color: var(--cl-text-tertiary);
}

/* ─── NAV ─── */
.cl-sidebar__nav {
    flex: 1;
    padding: 6px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--cl-overlay-strong) transparent;
}

.cl-sidebar__nav::-webkit-scrollbar {
    width: 4px;
}

.cl-sidebar__nav::-webkit-scrollbar-track {
    background: transparent;
}

.cl-sidebar__nav::-webkit-scrollbar-thumb {
    background: var(--cl-overlay-strong);
    border-radius: 4px;
}

.cl-sidebar__nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}

.cl-sidebar__group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cl-text-tertiary);
    text-transform: uppercase;
    padding: 4px 10px 3px;
    margin-top: 10px;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid var(--cl-border-color);
    padding-top: 10px;
}

.cl-sidebar__group-label:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 4px;
}

/* Modo toggle inside nav (scrolls with content) */
.cl-sidebar__modo-toggle {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--cl-border-color);
}

.cl-sidebar__modo-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 11px;
    padding: 6px 10px;
    color: var(--cl-text-tertiary);
    background: var(--cl-overlay-subtle);
    border: 1px solid var(--cl-border-color);
    border-radius: var(--cl-radius-sm, 8px);
    cursor: pointer;
    transition: all var(--cl-transition-fast);
    white-space: nowrap;
}

.cl-sidebar__modo-btn:hover {
    color: var(--cl-text-primary);
    background: var(--cl-overlay);
}

/* Regular nav link */
.cl-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--cl-radius-sm, 8px);
    color: var(--cl-text-secondary);
    cursor: pointer;
    transition: all var(--cl-transition-fast);
    font-weight: var(--cl-font-medium);
    font-size: 13px;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    margin-bottom: 1px;
}

.cl-sidebar__link:hover {
    background: var(--cl-overlay);
    color: var(--cl-text-primary);
}

/* Contador de pendientes (transferencias por verificar) */
.cl-sidebar__badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--cl-warning-500, #f79009);
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}

.cl-sidebar--collapsed .cl-sidebar__badge {
    display: none;
}

.cl-sidebar__link.active {
    background: var(--cl-red-glow);
    color: var(--cl-brand-text);
    border-color: rgba(196, 30, 58, 0.2);
}

.cl-sidebar__link.active svg,
.cl-sidebar__link.active [data-lucide] {
    color: var(--cl-brand-text);
}

/* Sub-links (dropdown children) */
.cl-sidebar__sublink {
    display: block;
    padding: 5px 10px 5px 36px;
    border-radius: var(--cl-radius-sm);
    color: var(--cl-text-tertiary);
    font-size: 12.5px;
    font-weight: var(--cl-font-medium);
    text-decoration: none;
    transition: all var(--cl-transition-fast);
    margin-bottom: 0;
}

.cl-sidebar__sublink:hover {
    color: var(--cl-text-primary);
    background: var(--cl-overlay-subtle);
}

.cl-sidebar__sublink.active {
    color: var(--cl-brand-text);
    font-weight: var(--cl-font-semibold);
}

/* Chevron rotation when expanded */
.cl-sidebar__chevron {
    transition: transform var(--cl-transition-fast);
}

.cl-sidebar__link[aria-expanded="true"] .cl-sidebar__chevron {
    transform: rotate(180deg);
}

/* Sidebar toggle button */
.cl-sidebar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    border: none;
    border-top: 1px solid var(--cl-border-color);
    background: transparent;
    color: var(--cl-text-tertiary);
    cursor: pointer;
    transition: all var(--cl-transition-fast);
    flex-shrink: 0;
}

.cl-sidebar__toggle:hover {
    color: var(--cl-text-primary);
    background: var(--cl-overlay-subtle);
}

/* ─── SIDEBAR FOOTER ─── */
.cl-sidebar__footer {
    padding: 8px 10px;
    border-top: 1px solid var(--cl-border-color);
    flex-shrink: 0;
}

/* User pill */
.cl-user-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--cl-radius-sm);
    background: var(--cl-overlay-subtle);
    cursor: pointer;
    transition: background var(--cl-transition-fast);
}

.cl-user-pill:hover {
    background: var(--cl-overlay);
}

.cl-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--cl-radius-sm);
    background: linear-gradient(135deg, var(--cl-red-500), var(--cl-gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.cl-user-name {
    font-size: 12.5px;
    font-weight: var(--cl-font-semibold);
    color: var(--cl-text-primary);
}

.cl-user-role {
    font-size: 11px;
    color: var(--cl-text-tertiary);
}

/* ─── TOPBAR ─── */
.cl-topbar {
    height: var(--cl-topbar-h, 60px);
    background: var(--cl-topbar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--cl-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: var(--cl-z-sticky, 1020);
}

/* Breadcrumb */
.cl-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cl-text-tertiary);
    /* Se usa tanto con <div> como con <ol> (lo semánticamente correcto): sin este
       reset, la variante <ol> sale numerada "1. Ventas 2. Transferencias". */
    list-style: none;
    margin: 0;
    padding: 0;
}

.cl-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-breadcrumb li+li::before {
    content: '/';
    color: var(--cl-text-tertiary);
    opacity: .5;
}

.cl-breadcrumb li.active {
    color: var(--cl-text-primary);
    font-weight: var(--cl-font-semibold);
}

.cl-breadcrumb__current {
    color: var(--cl-text-primary);
    font-weight: var(--cl-font-semibold);
}

/* Topbar left group */
.cl-topbar__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Tab navigation (operations topbar) */
.cl-topbar-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: var(--cl-radius-sm);
    font-size: 13px;
    font-weight: var(--cl-font-medium);
    color: var(--cl-text-tertiary);
    text-decoration: none;
    transition: all var(--cl-transition-fast);
    white-space: nowrap;
}

.cl-topbar-tab:hover {
    background: var(--cl-overlay);
    color: var(--cl-text-secondary);
}

.cl-topbar-tab.active {
    background: var(--cl-overlay-strong);
    color: var(--cl-text-primary);
    font-weight: var(--cl-font-semibold);
}

.cl-topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* La miga de pan cede el espacio: en 360px "Configuración › Dispositivos" empujaba la
   campana fuera de la pantalla. En celular sólo queda la página actual, recortada */
.cl-topbar__left {
    flex: 1 1 auto;
    min-width: 0;
}

.cl-breadcrumb {
    min-width: 0;
    overflow: hidden;
}

.cl-breadcrumb__current,
.cl-breadcrumb li.active {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 479.98px) {
    .cl-breadcrumb > :not(.cl-breadcrumb__current):not(.active),
    .cl-breadcrumb li.active::before {
        display: none;
    }
}

/* Icon button */
.cl-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--cl-radius-sm);
    background: var(--cl-overlay);
    border: 1px solid var(--cl-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cl-text-secondary);
    transition: all var(--cl-transition-fast);
}

.cl-icon-btn:hover {
    background: var(--cl-overlay-strong);
    color: var(--cl-text-primary);
}

/* Sucursal badge in topbar */
.cl-sucursal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(46, 144, 250, 0.1);
    border: 1px solid rgba(46, 144, 250, 0.25);
    border-radius: var(--cl-radius-full);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: var(--cl-font-semibold);
    color: var(--cl-info-text);
}

/* ─── MAIN AREA (offset for sidebar) ─── */
.cl-main {
    margin-left: var(--cl-sidebar-w, 240px);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--cl-canvas, #0A0B10);
    transition: margin-left var(--cl-transition-base);
}

.cl-sidebar--collapsed~.cl-main {
    margin-left: var(--cl-sidebar-collapsed, 72px);
}

/* ─── PAGE CONTENT ─── */
.cl-content {
    padding: 24px;
    flex: 1;
    background: var(--cl-canvas, #0A0B10);
}

/* ─── PAGE HEADER ─── */
.cl-page-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.cl-page-hdr h1 {
    font-size: 22px;
    font-weight: var(--cl-font-extrabold, 800);
    color: var(--cl-text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

.cl-page-hdr p {
    font-size: 13px;
    color: var(--cl-text-tertiary);
    margin: 3px 0 0;
}

.cl-page-hdr__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ─── PERIOD PILLS ─── */
.cl-period-pills {
    display: flex;
    gap: 3px;
    background: var(--cl-overlay);
    border: 1px solid var(--cl-border-color);
    border-radius: var(--cl-radius-sm);
    padding: 3px;
}

.cl-period-pill {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: var(--cl-font-medium);
    color: var(--cl-text-tertiary);
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all var(--cl-transition-fast);
}

.cl-period-pill:hover {
    color: var(--cl-text-primary);
}

.cl-period-pill.active,
.cl-period-pill[aria-selected="true"] {
    background: rgba(196, 30, 58, 0.2);
    color: var(--cl-brand-text);
    border: 1px solid rgba(196, 30, 58, 0.3);
}

/* ─── RESPONSIVE (sidebar collapses on mobile) ─── */
/* Mismo corte que tokens.css y que el hamburger (d-lg-none): bajo 992px el
   sidebar ya es off-canvas. Con 768 aquí, de 769 a 991 (iPad vertical: 810,
   820, 834) el sidebar se escondía pero el contenido guardaba sus 240px de
   margen: una columna en blanco y el panel apretado. */
@media (max-width: 991.98px) {
    .cl-sidebar {
        transform: translateX(-100%);
        transition: transform var(--cl-transition-base);
    }

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

    .cl-main {
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {
    .cl-topbar {
        padding: 0 14px;
    }

    .cl-content {
        padding: 16px;
    }
}
/* ─── Barra de operaciones en tablet vertical (768–1199px) ───
   Con marca + 3 pestañas + estaciones + tema + usuario no cabía: las pestañas se
   encimaban con el menú y la última estación quedaba fuera de la pantalla. Aquí las
   pestañas fijas quedan como icono, la marca sólo con logo y el usuario sólo con su
   inicial; las estaciones conservan nombre y contador. */
.cl-topbar-tabs {
    display: flex;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.cl-topbar-tabs::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .cl-topbar__brand-link > span {
        display: none;
    }

    .cl-topbar__brand-link {
        margin-right: 8px !important;
    }

    .cl-topbar-tab--fija > span {
        display: none;
    }

    .cl-topbar-tab--fija {
        padding: 7px 12px;
        min-width: 44px;
        justify-content: center;
    }
}