/* ═══════════════════════════════════════════════════
   CasaLeones POS — v7 Components
   KPI Cards, Buttons, Badges, Cards, Tables, FAB, etc.
   ═══════════════════════════════════════════════════ */

/* ════════════════════════
   KPI CARDS
   ════════════════════════ */
.cl-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1100px) {
    .cl-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .cl-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cl-kpi-card {
    background: var(--cl-surface-2);
    border: 1px solid var(--cl-border-color);
    border-radius: var(--cl-radius-lg, 16px);
    padding: 20px;
    /* tokens.css (v6) le pone gap a la columna y aquí (v7) cada pieza trae su margen:
       los dos sumados inflaban la tarjeta ~32px */
    gap: 0;
    position: relative;
    overflow: hidden;
    transition: transform var(--cl-transition-spring), border-color var(--cl-transition-fast), box-shadow var(--cl-transition-base);
    cursor: default;
}

.cl-kpi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--cl-transition-base);
    border-radius: inherit;
    pointer-events: none;
}

.cl-kpi-card:hover {
    transform: translateY(-3px);
}

.cl-kpi-card:hover::before {
    opacity: 1;
}

/* Variants */
.cl-kpi-card--red::before {
    background: var(--cl-red-glow);
}

.cl-kpi-card--gold::before {
    background: var(--cl-gold-glow);
}

.cl-kpi-card--green::before {
    background: var(--cl-green-glow);
}

.cl-kpi-card--yellow::before {
    background: var(--cl-yellow-glow);
}

.cl-kpi-card--blue::before {
    background: var(--cl-blue-glow);
}

.cl-kpi-card--red:hover {
    border-color: rgba(196, 30, 58, 0.35);
    box-shadow: 0 12px 32px rgba(196, 30, 58, 0.15);
}

.cl-kpi-card--gold:hover {
    border-color: rgba(194, 158, 89, 0.3);
    box-shadow: 0 12px 32px rgba(194, 158, 89, 0.1);
}

.cl-kpi-card--green:hover {
    border-color: rgba(18, 183, 106, 0.3);
    box-shadow: 0 12px 32px rgba(18, 183, 106, 0.1);
}

.cl-kpi-card--yellow:hover {
    border-color: rgba(247, 144, 9, 0.3);
    box-shadow: 0 12px 32px rgba(247, 144, 9, 0.1);
}

.cl-kpi-card--blue:hover {
    border-color: rgba(46, 144, 250, 0.3);
    box-shadow: 0 12px 32px rgba(46, 144, 250, 0.1);
}

.cl-kpi-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cl-kpi-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl-kpi-icon--red {
    background: rgba(196, 30, 58, 0.15);
    color: var(--cl-brand-text);
}

.cl-kpi-icon--gold {
    background: rgba(194, 158, 89, 0.12);
    color: var(--cl-gold-light, #D4B97A);
}

.cl-kpi-icon--green {
    background: rgba(18, 183, 106, 0.12);
    color: var(--cl-success-text);
}

.cl-kpi-icon--yellow {
    background: rgba(247, 144, 9, 0.12);
    color: var(--cl-warning-text);
}

.cl-kpi-icon--blue {
    background: rgba(46, 144, 250, 0.12);
    color: var(--cl-info-text);
}

.cl-kpi-icon--gray {
    background: rgba(71, 84, 103, 0.2);
    color: var(--cl-text-secondary);
}

.cl-kpi-card__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--cl-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.cl-kpi-card__value {
    font-size: 26px;
    font-weight: 800;
    color: var(--cl-text-primary);
    font-family: var(--cl-font-mono);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 8px;
}

.cl-kpi-card__sub {
    font-size: 12px;
    color: var(--cl-text-tertiary);
}

.cl-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: var(--cl-radius-full);
    font-size: 11px;
    font-weight: 700;
}

.cl-kpi-trend--up {
    background: rgba(18, 183, 106, 0.1);
    color: var(--cl-success-text);
}

.cl-kpi-trend--down {
    background: rgba(240, 68, 56, 0.1);
    color: var(--cl-error-text);
}

/* Sparkline canvas */
/* Ningún script dibuja las mini-gráficas de las tarjetas KPI (admin-dashboard.js no las
   toca): el canvas vacío reservaba 40px en blanco en cada tarjeta. Se ocultan hasta que
   algo las pinte (y ese código deberá quitar esta regla). */
.cl-kpi-card .cl-sparkline {
    display: none;
}

.cl-sparkline {
    height: var(--cl-sparkline-h, 32px);
    width: 100%;
    margin-top: 8px;
    opacity: .8;
}

/* ════════════════════════
   CARD (generic)
   ════════════════════════ */
.cl-card {
    background: var(--cl-surface-2);
    border: 1px solid var(--cl-border-color);
    border-radius: var(--cl-radius-lg);
    overflow: hidden;
}

.cl-card__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cl-border-color);
}

.cl-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--cl-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-card__body {
    padding: 20px;
}

.cl-card__body--compact {
    padding: 12px 16px;
}

/* ════════════════════════
   BUTTONS
   ════════════════════════ */
/* Primary — Red gradient */
.cl-btn--v7-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: var(--cl-radius-sm);
    border: none;
    background: linear-gradient(135deg, var(--cl-red-500), var(--cl-red-600));
    color: #fff;
    font-size: 13px;
    font-weight: var(--cl-font-semibold);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.35);
    transition: opacity var(--cl-transition-fast), transform var(--cl-transition-fast);
}

.cl-btn--v7-primary:hover {
    opacity: .88;
    transform: translateY(-1px);
}

.cl-btn--v7-primary:active {
    transform: translateY(0);
    opacity: 1;
}

/* Outline */
.cl-btn--v7-outline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--cl-radius-sm);
    border: 1px solid var(--cl-border-color);
    background: var(--cl-overlay-subtle);
    color: var(--cl-text-secondary);
    font-size: 13px;
    font-weight: var(--cl-font-medium);
    cursor: pointer;
    transition: all var(--cl-transition-fast);
}

.cl-btn--v7-outline:hover {
    background: var(--cl-overlay-strong);
    color: var(--cl-text-primary);
    border-color: var(--cl-border-color-md);
}

/* Gold (cobrar) */
.cl-btn--v7-gold {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: var(--cl-radius-sm);
    border: none;
    background: linear-gradient(135deg, var(--cl-gold), #A48445);
    color: #fff;
    font-size: 13px;
    font-weight: var(--cl-font-semibold);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(194, 158, 89, 0.35);
    transition: opacity var(--cl-transition-fast);
}

.cl-btn--v7-gold:hover {
    opacity: .88;
}

.cl-btn--v7-gold:disabled {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
}

/* Danger */
.cl-btn--v7-danger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: var(--cl-radius-sm);
    border: none;
    background: linear-gradient(135deg, var(--cl-error-500), #B91C3B);
    color: #fff;
    font-size: 13px;
    font-weight: var(--cl-font-semibold);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transition: opacity var(--cl-transition-fast), transform var(--cl-transition-fast);
}

.cl-btn--v7-danger:hover {
    opacity: .88;
    transform: translateY(-1px);
}

/* Success */
.cl-btn--v7-success {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: var(--cl-radius-sm);
    border: none;
    background: linear-gradient(135deg, var(--cl-success-500), #0D9B5F);
    color: #fff;
    font-size: 13px;
    font-weight: var(--cl-font-semibold);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(18, 183, 106, 0.3);
    transition: opacity var(--cl-transition-fast), transform var(--cl-transition-fast);
}

.cl-btn--v7-success:hover {
    opacity: .88;
    transform: translateY(-1px);
}

/* Ghost (no background, subtle hover) */
.cl-btn--v7-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--cl-radius-sm);
    border: none;
    background: transparent;
    color: var(--cl-text-secondary);
    font-size: 13px;
    font-weight: var(--cl-font-medium);
    cursor: pointer;
    transition: all var(--cl-transition-fast);
}

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

/* ── Sprint 8 backward-compat aliases ── */
.cl-btn.cl-btn--primary  { display:inline-flex;align-items:center;gap:7px;padding:7px 18px;border-radius:var(--cl-radius-sm);border:none;background:linear-gradient(135deg,var(--cl-red-500),var(--cl-red-600));color:#fff;font-size:13px;font-weight:var(--cl-font-semibold);cursor:pointer;box-shadow:0 4px 12px rgba(196,30,58,.35);transition:opacity var(--cl-transition-fast),transform var(--cl-transition-fast); }
.cl-btn.cl-btn--primary:hover  { opacity:.88;transform:translateY(-1px); }
.cl-btn.cl-btn--outline  { display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--cl-radius-sm);border:1px solid var(--cl-border-color);background:var(--cl-overlay-subtle);color:var(--cl-text-secondary);font-size:13px;font-weight:var(--cl-font-medium);cursor:pointer;transition:all var(--cl-transition-fast); }
.cl-btn.cl-btn--outline:hover  { background:var(--cl-overlay-strong);color:var(--cl-text-primary);border-color:var(--cl-border-color-md); }
.cl-btn.cl-btn--danger   { display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:var(--cl-radius-sm);border:none;background:linear-gradient(135deg,var(--cl-error-500),#B91C3B);color:#fff;font-size:13px;font-weight:var(--cl-font-semibold);cursor:pointer;box-shadow:0 4px 12px rgba(239,68,68,.3);transition:opacity var(--cl-transition-fast),transform var(--cl-transition-fast); }
.cl-btn.cl-btn--danger:hover   { opacity:.88;transform:translateY(-1px); }
.cl-btn.cl-btn--success  { display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:var(--cl-radius-sm);border:none;background:linear-gradient(135deg,var(--cl-success-500),#0D9B5F);color:#fff;font-size:13px;font-weight:var(--cl-font-semibold);cursor:pointer;box-shadow:0 4px 12px rgba(18,183,106,.3);transition:opacity var(--cl-transition-fast),transform var(--cl-transition-fast); }
.cl-btn.cl-btn--success:hover  { opacity:.88;transform:translateY(-1px); }
.cl-btn.cl-btn--ghost    { display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--cl-radius-sm);border:none;background:transparent;color:var(--cl-text-secondary);font-size:13px;font-weight:var(--cl-font-medium);cursor:pointer;transition:all var(--cl-transition-fast); }
.cl-btn.cl-btn--ghost:hover    { background:var(--cl-overlay);color:var(--cl-text-primary); }
.cl-btn.cl-btn--gold     { display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:var(--cl-radius-sm);border:none;background:linear-gradient(135deg,var(--cl-gold),#A48445);color:#fff;font-size:13px;font-weight:var(--cl-font-semibold);cursor:pointer;box-shadow:0 4px 12px rgba(194,158,89,.35);transition:opacity var(--cl-transition-fast); }
.cl-btn.cl-btn--gold:hover     { opacity:.88; }

/* Small variant */
.cl-btn--sm {
    padding: 5px 12px;
    font-size: 12.5px;
    min-height: 32px;
}

.cl-btn--lg {
    padding: 10px 24px;
    font-size: 15px;
}

/* ════════════════════════
   FORM INPUTS (v7 dark-native)
   ════════════════════════ */
.cl-input {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: var(--cl-font-medium);
    color: var(--cl-text-primary);
    background: var(--cl-surface-3);
    border: 1px solid var(--cl-border-color);
    border-radius: var(--cl-radius-sm);
    outline: none;
    transition: border-color var(--cl-transition-fast), box-shadow var(--cl-transition-fast);
    -webkit-appearance: none;
    appearance: none;
}
.cl-input::placeholder {
    color: var(--cl-text-placeholder);
}
.cl-input:focus {
    border-color: var(--cl-red-500);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.15);
}
select.cl-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Propina toggle buttons (cobro modal) */
.cl-propina-btn {
    padding: 8px 12px;
    border-radius: var(--cl-radius-sm);
    border: 1px solid var(--cl-border-color);
    background: var(--cl-surface-3);
    color: var(--cl-text-secondary);
    font-size: 13px;
    font-weight: var(--cl-font-semibold);
    cursor: pointer;
    transition: all var(--cl-transition-fast);
    text-align: center;
}
.cl-propina-btn:hover {
    border-color: var(--cl-border-color-md);
    color: var(--cl-text-primary);
    background: var(--cl-surface-4);
}
.cl-propina-btn.active {
    background: var(--cl-red-glow);
    color: var(--cl-brand-text);
    border-color: rgba(196, 30, 58, 0.3);
}

/* ════════════════════════
   BADGES & CHIPS
   ════════════════════════ */
.cl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--cl-radius-full);
    font-size: 11px;
    font-weight: var(--cl-font-semibold);
}

.cl-badge--green {
    background: rgba(18, 183, 106, 0.12);
    color: var(--cl-success-text);
}

.cl-badge--yellow {
    background: rgba(247, 144, 9, 0.12);
    color: var(--cl-warning-text);
}

.cl-badge--red {
    background: rgba(240, 68, 56, 0.12);
    color: var(--cl-error-text);
}

.cl-badge--blue {
    background: rgba(46, 144, 250, 0.12);
    color: var(--cl-info-text);
}

.cl-badge--gold {
    background: rgba(194, 158, 89, 0.12);
    color: var(--cl-gold-light);
}

.cl-badge--gray {
    background: var(--cl-overlay);
    color: var(--cl-text-secondary);
    border: 1px solid var(--cl-border-color);
}

/* Chip (larger, with icon) */
.cl-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--cl-radius-full);
    font-size: 12px;
    font-weight: var(--cl-font-semibold);
    border: 1px solid transparent;
}

.cl-chip--neutral {
    background: var(--cl-overlay);
    color: var(--cl-text-secondary);
    border-color: var(--cl-border-color);
}

.cl-chip--yellow {
    background: rgba(247, 144, 9, 0.12);
    color: var(--cl-warning-text);
    border-color: rgba(247, 144, 9, 0.2);
}

.cl-chip--green {
    background: rgba(18, 183, 106, 0.12);
    color: var(--cl-success-text);
    border-color: rgba(18, 183, 106, 0.2);
}

.cl-chip--red {
    background: rgba(240, 68, 56, 0.1);
    color: var(--cl-error-text);
    border-color: rgba(240, 68, 56, 0.2);
}

/* ════════════════════════
   STATUS BADGES (orders)
   ════════════════════════ */
.cl-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--cl-radius-full);
    font-size: 11px;
    font-weight: 700;
}

.cl-status--pending {
    background: rgba(247, 144, 9, 0.12);
    color: var(--cl-warning-text);
}

.cl-status--kitchen {
    background: rgba(46, 144, 250, 0.12);
    color: var(--cl-info-text);
}

.cl-status--ready {
    background: rgba(18, 183, 106, 0.12);
    color: var(--cl-success-text);
}

.cl-status--done {
    background: rgba(46, 144, 250, 0.08);
    color: var(--cl-info-text);
}

.cl-status--urgent {
    background: rgba(240, 68, 56, 0.12);
    color: var(--cl-error-text);
}

.cl-status--paid {
    background: rgba(18, 183, 106, 0.15);
    color: var(--cl-success-text);
    font-weight: 600;
}

/* ════════════════════════
   ORDER CARDS (Meseros)
   ════════════════════════ */
.cl-order-card {
    background: var(--cl-surface-2);
    border: 1px solid var(--cl-border-color);
    border-radius: var(--cl-radius-lg);
    overflow: hidden;
    transition: transform var(--cl-transition-spring), box-shadow var(--cl-transition-base), border-color var(--cl-transition-fast);
    cursor: pointer;
    position: relative;
    border-left-width: 3px;
}

.cl-order-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.cl-order-card--fresh {
    border-left-color: var(--cl-success-text);
}

.cl-order-card--warning {
    border-left-color: var(--cl-warning-text);
}

.cl-order-card--urgent {
    border-left-color: var(--cl-error-text);
}

.cl-order-card--done {
    border-left-color: var(--cl-info-text);
}

/* ── Scrollable items list inside card ── */
.cl-card-items-list {
    position: relative;
}
.cl-card-items-list::-webkit-scrollbar {
    width: 4px;
}
.cl-card-items-list::-webkit-scrollbar-track {
    background: transparent;
}
.cl-card-items-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}
.cl-card-items-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}
.cl-scroll-hint {
    position: sticky;
    bottom: 0;
    background: linear-gradient(transparent, var(--cl-surface-2) 60%);
    padding-top: 8px !important;
    animation: cl-bounce-hint 1.5s ease infinite;
}
@keyframes cl-bounce-hint {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

.cl-order-card--paid {
    border-left-color: var(--cl-success-text);
    opacity: 0.75;
    cursor: default;
}

.cl-order-card--paid:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--cl-success-text);
    opacity: 0.85;
}

.cl-order-card--fresh:hover {
    border-color: var(--cl-success-text);
    box-shadow: 0 16px 40px rgba(18, 183, 106, 0.15);
}

.cl-order-card--warning:hover {
    border-color: var(--cl-warning-text);
    box-shadow: 0 16px 40px rgba(247, 144, 9, 0.15);
}

.cl-order-card--urgent:hover {
    border-color: var(--cl-error-text);
    box-shadow: 0 16px 40px rgba(240, 68, 56, 0.2);
}

.cl-order-card--done:hover {
    border-color: var(--cl-info-text);
    box-shadow: 0 16px 40px rgba(46, 144, 250, 0.15);
}

/* Progress bar within order cards */
.cl-progress-row {
    display: flex;
    align-items: center;
}

/* Entregar button touch-friendly on tablets */
.btn-entregar-item,
.btn-entregar-todos {
    min-height: 28px;
    touch-action: manipulation;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .btn-entregar-item,
    .btn-entregar-todos {
        min-height: 36px;
        padding: 4px 12px !important;
        font-size: 12px !important;
    }
    .cl-order-card .card-actions-row .cl-btn--sm {
        min-height: 44px;
        font-size: 13px;
    }
}

/* Order card timer badges */
".cl-timer {
    font-family: var(--cl-font-mono);
    font-size: 12.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--cl-radius-full);
}

.cl-timer--fresh {
    background: rgba(18, 183, 106, 0.12);
    color: var(--cl-success-text);
}

.cl-timer--warning {
    background: rgba(247, 144, 9, 0.12);
    color: var(--cl-warning-text);
}

.cl-timer--urgent {
    background: rgba(240, 68, 56, 0.12);
    color: var(--cl-error-text);
    animation: cl-urgentpulse 1s infinite;
}

/* ════════════════════════
   TABLES v7
   ════════════════════════ */
.cl-table--v7 {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cl-table--v7 thead tr {
    border-bottom: 1px solid var(--cl-border-color);
}

.cl-table--v7 th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cl-text-tertiary);
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
}

.cl-table--v7 td {
    padding: 10px 14px;
    color: var(--cl-text-secondary, #D0D5DD) !important;
    border-bottom: 1px solid var(--cl-overlay-subtle);
}

.cl-table--v7 td:first-child {
    font-weight: var(--cl-font-semibold);
    color: var(--cl-text-primary, #F2F4F7) !important;
}

.cl-table--v7 tbody tr:last-child td {
    border-bottom: none;
}

.cl-table--v7 tbody tr:hover td {
    background: var(--cl-overlay-subtle);
}

/* Force light text on all table children (overrides Bootstrap) */
.cl-table--v7 td div,
.cl-table--v7 td span,
.cl-table--v7 td a {
    color: inherit;
}

/* Toolbar above table (search + filters) */
.cl-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cl-table-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--cl-surface-4);
    border: 1px solid var(--cl-border-color);
    border-radius: var(--cl-radius-sm);
    padding: 7px 12px;
    flex: 1;
    max-width: 340px;
}

.cl-table-search input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--cl-text-primary);
    font-size: 13px;
    font-family: var(--cl-font-sans);
    width: 100%;
}

.cl-table-search input::placeholder {
    color: var(--cl-text-tertiary);
}

/* Progress bar (for tables) */
.cl-bar-wrap {
    height: 4px;
    background: var(--cl-overlay-strong);
    border-radius: 2px;
    overflow: hidden;
    flex: 1;
}

.cl-bar-fill {
    height: 100%;
    border-radius: 2px;
}

/* ════════════════════════
   FILTER PILLS
   ════════════════════════ */
.cl-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cl-filter-pill {
    padding: 6px 14px;
    border-radius: var(--cl-radius-full);
    border: 1px solid var(--cl-border-color);
    background: var(--cl-overlay-subtle);
    color: var(--cl-text-secondary);
    font-size: 12px;
    font-weight: var(--cl-font-semibold);
    cursor: pointer;
    transition: all var(--cl-transition-fast);
}

.cl-filter-pill:hover {
    color: var(--cl-text-primary);
    border-color: var(--cl-border-color-md);
}

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

".cl-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--cl-overlay-strong);
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
    line-height: 1;
}
.cl-filter-pill.active .cl-pill-count {
    background: rgba(196, 30, 58, 0.2);
}

/* Pagadas pill variant — green accent instead of red */
.cl-filter-pill--pagadas.active {
    background: rgba(18, 183, 106, 0.12);
    color: var(--cl-success-text);
    border-color: rgba(18, 183, 106, 0.3);
}
.cl-filter-pill--pagadas.active .cl-pill-count {
    background: rgba(18, 183, 106, 0.2);
}

/* ════════════════════════
   Fila de filtros
   Los contadores viven DENTRO de los filtros (antes había además una fila de chips
   que repetía lo mismo). En celular la fila se desliza de lado en vez de partirse en
   tres renglones: así el chrome deja de comerse media pantalla antes de la 1ª orden.
   ════════════════════════ */
.cl-filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .cl-filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Sangría para que el primer/último filtro no queden pegados al borde */
        padding: 2px 16px;
        margin-left: -16px;
        margin-right: -16px;
        scroll-snap-type: x proximity;
    }

    .cl-filter-row::-webkit-scrollbar {
        display: none;
    }

    .cl-filter-row .cl-filter-pill {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

/* Filtro de urgentes: se distingue sin depender sólo del color */
.cl-filter-pill--urgente {
    border-color: var(--cl-error-500);
    color: var(--cl-error-text);
}

/* ════════════════════════
   FAB (Floating Action Button)
   ════════════════════════ */
.cl-fab-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: var(--cl-z-fixed);
}

.cl-fab {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(135deg, var(--cl-red-500), var(--cl-red-600));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(196, 30, 58, 0.55);
    transition: transform var(--cl-transition-spring), box-shadow var(--cl-transition-base);
}

.cl-fab:hover {
    transform: scale(1.04);
    box-shadow: 0 12px 36px rgba(196, 30, 58, 0.65);
}

.cl-fab--secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px 8px 14px;
    border-radius: var(--cl-radius-full);
    background: rgba(15, 17, 26, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    /* El fondo de este botón es siempre oscuro, así que el texto va claro fijo */
    color: var(--cl-gray-200);
    font-size: 13px;
    font-weight: var(--cl-font-semibold);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transition: all var(--cl-transition-fast);
}

.cl-fab--secondary:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* ════════════════════════
   ACTIVITY FEED
   ════════════════════════ */
.cl-feed {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cl-feed__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background var(--cl-transition-fast);
}

.cl-feed__item:hover {
    background: var(--cl-overlay-subtle);
}

.cl-feed__avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.cl-feed__text {
    font-size: 13px;
    color: var(--cl-text-secondary);
    line-height: 1.5;
}

.cl-feed__text strong {
    color: var(--cl-text-primary);
}

.cl-feed__time {
    font-size: 11px;
    color: var(--cl-text-tertiary);
    margin-top: 2px;
}

.cl-feed__amount {
    font-family: var(--cl-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--cl-success-text);
    flex-shrink: 0;
}

/* ════════════════════════
   STOCK / ALERT LIST
   ════════════════════════ */
.cl-alert-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cl-alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background var(--cl-transition-fast);
}

.cl-alert-item:hover {
    background: var(--cl-overlay-subtle);
}

.cl-alert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cl-alert-name {
    font-size: 13px;
    font-weight: var(--cl-font-medium);
    color: var(--cl-text-primary);
    flex: 1;
}

.cl-alert-qty {
    font-family: var(--cl-font-mono);
    font-size: 12px;
    color: var(--cl-text-tertiary);
    flex-shrink: 0;
}

/* ════════════════════════
   FORM INPUTS v7
   ════════════════════════ */
.cl-date-input {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--cl-surface-4);
    border: 1px solid var(--cl-border-color);
    border-radius: var(--cl-radius-sm);
    padding: 7px 12px;
    font-size: 13px;
    color: var(--cl-text-secondary);
    cursor: pointer;
    transition: border-color var(--cl-transition-fast);
}

.cl-date-input:hover {
    border-color: var(--cl-border-color-md);
    color: var(--cl-text-primary);
}

/* ════════════════════════
   SKELETON LOADERS
   ════════════════════════ */
.cl-skeleton {
    background: linear-gradient(90deg,
            var(--cl-overlay) 25%,
            var(--cl-overlay-strong) 50%,
            var(--cl-overlay) 75%);
    background-size: 200% 100%;
    animation: cl-shimmer 1.4s infinite;
    border-radius: var(--cl-radius-sm);
}

@keyframes cl-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ════════════════════════
   (Layout primitives like page-hdr, breadcrumb, period-pills,
    icon-btn, topbar, sucursal-badge, user-avatar, live-dot,
    cl-content are defined ONCE in v7-sidebar.css — canonical source)
   ════════════════════════ */

/* ════════════════════════
   URGENCY ANIMATION (shared)
   ════════════════════════ */
.cl-money {
    font-family: var(--cl-font-mono);
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.cl-money-symbol {
    font-size: 0.65em;
    opacity: 0.6;
    vertical-align: super;
    margin-right: 1px;
}

.cl-money-decimal {
    font-size: 0.72em;
    opacity: 0.75;
}

/* ════════════════════════
   RESPONSIVE HELPERS
   ════════════════════════ */
@media (max-width: 768px) {
    .cl-page-hdr {
        flex-direction: column;
        gap: 12px;
    }

    .cl-page-hdr__right {
        width: 100%;
        justify-content: flex-start;
    }

    .cl-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cl-fab-container {
        bottom: 16px;
        right: 16px;
    }

    /* En celular la barra inferior de pestañas (56px, .d-md-none) ocupa el mismo
       espacio: sin este despeje los FABs quedan ENCIMA del botón "Cobrar" de la
       primera tarjeta y de las pestañas de estación.
       Clase explícita (no :has()) porque los WebView viejos de gama baja no lo
       soportan y ahí es justo donde más apretado está el espacio. */
    .cl-fab-container--sobre-tabs {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
    }

    .cl-period-pills {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .cl-table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cl-table-search {
        max-width: 100%;
    }
}

/* ════════════════════════
   DROPDOWN DARK OVERRIDES
   (Bootstrap dropdowns in dark context)
   ════════════════════════ */
.dropdown-menu {
    background: var(--cl-surface-2) !important;
    border: 1px solid var(--cl-border-color) !important;
    border-radius: 12px !important;
    box-shadow: var(--cl-shadow-xl) !important;
    padding: 6px !important;
}

.dropdown-item {
    color: var(--cl-text-secondary) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background var(--cl-transition-fast) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--cl-overlay) !important;
    color: var(--cl-text-primary) !important;
}

.dropdown-divider {
    border-color: var(--cl-border-color) !important;
    margin: 4px 0 !important;
}

.dropdown-item-text {
    font-size: 11px !important;
    color: var(--cl-text-tertiary) !important;
    padding: 4px 12px !important;
}

/* En celular se quedan 2 columnas compactas: a 1 columna cada KPI medía 250px
   y la dueña tenía que bajar 2,000px para ver los 8 indicadores del día. */
/* (al final del archivo para ganarle en la cascada a las reglas base de .cl-kpi-card) */
@media (max-width: 600px) {
    .cl-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .cl-kpi-card {
        padding: 14px;
    }

    .cl-kpi-card__header {
        margin-bottom: 8px;
    }

    .cl-kpi-card__icon {
        width: 30px;
        height: 30px;
    }

    .cl-kpi-card__value {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .cl-kpi-card__title {
        font-size: 11px;
    }

    .cl-kpi-card__sub {
        font-size: 11.5px;
        line-height: 1.3;
    }

    .cl-kpi-card .cl-sparkline {
        display: none;
    }

    /* Los selectores de periodo se partían en dos renglones ("7 / días") */
    .cl-period-pill {
        white-space: nowrap;
        padding: 5px 10px;
    }

    .cl-page-hdr__right {
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════
   Firma "hecho por kainet." (components/_kainet.html)
   Las piezas oscuras del logo usan currentColor: la firma toma el color de
   este enlace, así que sólo hay que darle el tono según el fondo.
   ═══════════════════════════════════════════════════ */
.cl-kainet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;          /* área táctil razonable sin agrandar la firma */
    font-size: 11px;
    line-height: 1;
    color: var(--cl-text-tertiary);
    text-decoration: none;
    border-radius: var(--cl-radius-sm);
    transition: color var(--cl-transition-fast, 150ms);
}

.cl-kainet:hover,
.cl-kainet:focus-visible {
    color: var(--cl-text-primary);
}

.cl-kainet__logo {
    height: 13px;
    width: auto;
    /* ancho explícito por la proporción del viewBox (1896×434): sin él, algunos
       WebView viejos dejan el svg inline en 300px */
    aspect-ratio: 1896 / 434;
}

/* Sobre fondos que son oscuros en cualquier tema (degradado del wizard) */
.cl-kainet--sobre-oscuro {
    color: rgba(255, 255, 255, .62);
}

.cl-kainet--sobre-oscuro:hover,
.cl-kainet--sobre-oscuro:focus-visible {
    color: #fff;
}

/* Línea de producto: "KaiRest · hecho por kainet." debajo de la tarjeta */
.cl-producto-firma {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--cl-text-tertiary);
    position: relative;
    z-index: 1;
}

.cl-producto-firma .cl-kainet {
    padding-inline: 0;          /* el espaciado lo da el gap del contenedor */
    font-size: 12px;
}

.cl-producto-firma .cl-kainet__logo {
    height: 14px;
}

.cl-producto-firma__nombre {
    font-weight: 600;
    letter-spacing: .01em;
}

/* Botón de cerrar de los avisos: no tenía estilo y se veía como el botón gris nativo
   del navegador */
.cl-toast__close {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--cl-radius-sm);
    background: transparent;
    color: var(--cl-text-tertiary);
    cursor: pointer;
    transition: background var(--cl-transition-fast, 150ms), color var(--cl-transition-fast, 150ms);
}

.cl-toast__close:hover,
.cl-toast__close:focus-visible {
    background: var(--cl-overlay-subtle);
    color: var(--cl-text-primary);
}

/* Barra de tabla (buscador + filtros): el buscador mide 38px y las pastillas 32px; a la
   misma altura se leen como una sola fila */
.cl-table-toolbar .cl-filter-pill {
    min-height: 38px;
}