/**
 * CSS del Sistema POS — v2.0.5
 * Fixes: scroll independiente, carrito layout 2 filas, vista lista, modo shortcode fullscreen
 */

/* ============================================
   VARIABLES & RESET
   ============================================ */
:root {
    --pos-primary:       #007cba;
    --pos-primary-dark:  #005a87;
    --pos-success:       #28a745;
    --pos-danger:        #dc3545;
    --pos-warning:       #ffc107;
    --pos-info:          #17a2b8;
    --pos-light:         #f8f9fa;
    --pos-dark:          #343a40;
    --pos-white:         #ffffff;
    --pos-border:        #dee2e6;
    --pos-shadow:        0 2px 4px rgba(0,0,0,0.1);
    --pos-radius:        8px;
    --pos-transition:    all 0.2s ease;
    --pos-header-h:      58px;
    --pos-adminbar-h:    0px; /* sobrescrito más abajo si hay adminbar */
}

/* Admin bar de WordPress: 32px desktop, 46px mobile */
body.admin-bar { --pos-adminbar-h: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar { --pos-adminbar-h: 46px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================
   MODO FULLPAGE (template_redirect — standalone)
   ============================================ */
body.pos-page {
    background: var(--pos-light) !important;
    color: var(--pos-dark);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    overflow: hidden;
    height: 100vh;
}

body.pos-page .pos-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
}

body.pos-page .pos-main-content {
    position: fixed;
    top: var(--pos-header-h);
    left: 0; right: 0; bottom: 0;
    height: auto;
    overflow: hidden;
}

/* ============================================
   MODO SHORTCODE (dentro de página WordPress)
   Toma pantalla completa ignorando el tema/Elementor
   ============================================ */
.pos-shortcode-wrapper {
    position: fixed;
    top: var(--pos-adminbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    overflow: hidden;
    background: var(--pos-light);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--pos-dark);
}

/* Ocultar todos los elementos del tema cuando el POS shortcode está activo */
body:has(.pos-shortcode-wrapper) .site-header,
body:has(.pos-shortcode-wrapper) header.site-header,
body:has(.pos-shortcode-wrapper) #site-header,
body:has(.pos-shortcode-wrapper) #masthead,
body:has(.pos-shortcode-wrapper) .site-footer,
body:has(.pos-shortcode-wrapper) footer,
body:has(.pos-shortcode-wrapper) #colophon,
body:has(.pos-shortcode-wrapper) .entry-header,
body:has(.pos-shortcode-wrapper) .page-header,
body:has(.pos-shortcode-wrapper) .woocommerce-breadcrumb,
body:has(.pos-shortcode-wrapper) .site-branding,
body:has(.pos-shortcode-wrapper) .elementor-section:not(:has(.pos-shortcode-wrapper)),
body:has(.pos-shortcode-wrapper) .wp-block-post-title { display: none !important; }

/* El shortcode wrapper ocupa la página entera */
body:has(.pos-shortcode-wrapper) .entry-content,
body:has(.pos-shortcode-wrapper) .site-content,
body:has(.pos-shortcode-wrapper) #content,
body:has(.pos-shortcode-wrapper) main,
body:has(.pos-shortcode-wrapper) .container,
body:has(.pos-shortcode-wrapper) .content-area,
body:has(.pos-shortcode-wrapper) .elementor,
body:has(.pos-shortcode-wrapper) .elementor-section,
body:has(.pos-shortcode-wrapper) .elementor-container,
body:has(.pos-shortcode-wrapper) .elementor-column,
body:has(.pos-shortcode-wrapper) .elementor-column-wrap,
body:has(.pos-shortcode-wrapper) .elementor-widget-wrap,
body:has(.pos-shortcode-wrapper) .elementor-widget-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Header POS fijo dentro del wrapper */
.pos-shortcode-wrapper .pos-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;
}

/* Contenido principal debajo del header */
.pos-shortcode-wrapper .pos-main-content {
    position: absolute;
    top: var(--pos-header-h);
    left: 0; right: 0; bottom: 0;
    height: auto; /* Anular height:100% del general para que top/bottom calculen la altura */
    overflow: hidden;
}

/* ============================================
   HEADER
   ============================================ */
.pos-header {
    width: 100%;
    height: var(--pos-header-h);
    background: var(--pos-primary);
    color: var(--pos-white);
    box-shadow: var(--pos-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

.pos-header h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    flex-wrap: nowrap;
    overflow: visible;
}

/* ─── Dropdown de usuario ─── */
.pos-user-dropdown {
    position: relative;
}
.pos-user-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--pos-white);
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s;
}
.pos-user-btn:hover {
    background: rgba(255,255,255,0.25);
}
.pos-user-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--pos-white);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    min-width: 200px;
    z-index: 10001;
    overflow: hidden;
}
.pos-user-dropdown.open .pos-user-menu {
    display: block;
}
.pos-user-menu-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--pos-border);
    color: var(--pos-dark);
}
.pos-user-menu-header strong {
    display: block;
    font-size: 14px;
}
.pos-user-menu-header small {
    display: block;
    color: #888;
    font-size: 12px;
    margin-top: 2px;
}
.pos-user-menu-item {
    display: block;
    padding: 10px 14px;
    color: var(--pos-dark);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s;
    white-space: nowrap;
}
.pos-user-menu-item:hover {
    background: var(--pos-light);
}
.pos-user-menu-item.pos-logout-btn:last-child {
    border-top: 1px solid var(--pos-border);
    color: var(--pos-danger);
}

.header-user {
    padding: 5px 10px;
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
    white-space: nowrap;
}

#pos-clock {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    background: rgba(255,255,255,0.12);
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.cash-session-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
}
.session-open   { color: #90ee90; font-weight: 700; }
.session-closed { color: #ffb3b3; font-weight: 700; }

.btn-cash-action {
    padding: 3px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}
.btn-open-cash  { background: #28a745; color: #fff; }
.btn-close-cash { background: #dc3545; color: #fff; }
.btn-open-cash:hover  { background: #218838; }
.btn-close-cash:hover { background: #c82333; }

.low-stock-alert {
    background: #fff3cd;
    color: #856404;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.connection-status { font-size: 11px; white-space: nowrap; padding: 4px 8px; border-radius: 4px; font-weight: 700; }
.connection-status.status-online  { color: #15803d; background: #ecfdf5; }
.connection-status.status-offline { color: #b91c1c; background: #fef2f2; }

/* 🟢 Fase Q [modo offline]: badge de ventas pendientes de sincronizar */
.pos-offline-pending-badge {
    font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer;
    padding: 4px 10px; border-radius: 20px; border: 1.5px solid #b45309;
    background: #fffbeb; color: #b45309;
    animation: posOfflinePulse 2s ease-in-out infinite;
}
.pos-offline-pending-badge:hover { background: #fef3c7; }
@keyframes posOfflinePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}
.sale-offline-banner {
    background: #fffbeb; border: 1.5px solid #b45309; color: #92400e;
    font-weight: 700; font-size: 13px; text-align: center;
    padding: 10px 14px; border-radius: 8px; margin: 0 0 14px;
}
.offline-sale-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; font-size: 13px;
}
.offline-sale-row.has-error { border-color: #dc2626; background: #fef2f2; }
.offline-sale-row .osr-info { flex: 1; min-width: 0; }
.offline-sale-row .osr-total { font-weight: 700; color: #059669; margin-right: 10px; white-space: nowrap; }
.offline-sale-row .osr-error { color: #b91c1c; font-size: 11.5px; margin-top: 2px; }
.offline-sale-row button {
    background: #eef2f7; border: none; border-radius: 6px; padding: 6px 10px;
    font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}

/* ============================================
   FIX #4: Ocultar admin-bar en POS para cajeros
   (El filtro PHP lo remueve, pero como fallback CSS)
   ============================================ */
body:has(.pos-shortcode-wrapper) #wpadminbar {
    display: none !important;
}
body:has(.pos-shortcode-wrapper) {
    --pos-adminbar-h: 0px !important;
}
body:has(.pos-shortcode-wrapper).admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ============================================
   SIDEBAR DE NAVEGACIÓN
   ============================================ */
.pos-sidebar {
    flex: 0 0 60px;
    width: 60px;
    background: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 50;
}

.pos-sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 8px 4px;
    border-radius: 8px;
    text-decoration: none;
    color: #94a3b8;
    font-size: 10px;
    transition: all 0.15s ease;
    text-align: center;
    line-height: 1.2;
}

.pos-sidebar-item:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.pos-sidebar-item.active {
    background: var(--pos-primary);
    color: #fff;
}

.sidebar-icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 2px;
}

.sidebar-label {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================
   LAYOUT PRINCIPAL: sidebar + dos columnas
   ============================================ */
.pos-main-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ─── Columna productos (izquierda, ~60%) ─── */
.products-section {
    flex: 3;
    min-width: 0;
    min-height: 0;
    background: var(--pos-white);
    border-right: 3px solid var(--pos-primary);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.products-header {
    flex-shrink: 0;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--pos-border);
    background: var(--pos-white);
}

/* Área de productos: scrollable */
#products-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
    scroll-behavior: smooth;
}

.products-pagination {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    border-top: 1px solid var(--pos-border);
    background: var(--pos-light);
}
.pagination-info { font-size: 12px; color: #6c757d; }
.btn-load-more {
    padding: 6px 16px;
    background: var(--pos-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.btn-load-more:hover { background: var(--pos-primary-dark); }

/* ─── Columna carrito (derecha, ~40%) ─── */
.cart-section {
    flex: 2;
    min-width: 280px;
    min-height: 0;
    max-width: 420px;
    background: var(--pos-white);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    box-shadow: -2px 0 10px rgba(0,0,0,0.08);
}

/* ============================================
   BÚSQUEDA Y CONTROLES DE PRODUCTOS
   ============================================ */
.search-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.view-controls {
    display: flex;
    gap: 4px;
    background: #f0f0f0;
    padding: 3px;
    border-radius: var(--pos-radius);
    flex-shrink: 0;
}

.view-btn {
    padding: 6px 10px;
    border: 2px solid transparent;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #666;
    font-size: 15px;
    transition: var(--pos-transition);
}
.view-btn.active,
.view-btn:hover {
    border-color: var(--pos-primary);
    background: var(--pos-primary);
    color: var(--pos-white);
}

.search-box {
    flex: 1;
    position: relative;
    min-width: 0;
}
.search-box input {
    width: 100%;
    padding: 9px 36px 9px 12px;
    border: 2px solid var(--pos-border);
    border-radius: var(--pos-radius);
    font-size: 14px;
    transition: var(--pos-transition);
}
.search-box input:focus {
    border-color: var(--pos-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,124,186,0.1);
}
.search-box button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 16px;
}

.barcode-scanner {
    padding: 9px 12px;
    background: var(--pos-success);
    color: var(--pos-white);
    border: none;
    border-radius: var(--pos-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    transition: var(--pos-transition);
    flex-shrink: 0;
}
.barcode-scanner:hover { background: #218838; }

.category-filter { margin-top: 0; }
.category-filter select {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid var(--pos-border);
    border-radius: var(--pos-radius);
    font-size: 13px;
}

/* ============================================
   GRID DE PRODUCTOS (vista cuadrícula)
   ============================================ */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

/* ============================================
   TARJETA PRODUCTO — VISTA CUADRÍCULA
   ============================================ */
/* ─── Productos: alta especificidad para evitar conflictos con tema/WC/Elementor ─── */
#products-container.products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#products-container.products-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#products-container .product-card {
    background: var(--pos-white) !important;
    border: 2px solid var(--pos-border) !important;
    border-radius: var(--pos-radius) !important;
    overflow: visible !important;
    transition: var(--pos-transition) !important;
    cursor: pointer !important;
    box-shadow: var(--pos-shadow) !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    transform: none !important;
}
#products-container .product-card:hover {
    border-color: var(--pos-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0,124,186,0.15) !important;
}
#products-container .product-card.out-of-stock { opacity: 0.6 !important; border-color: var(--pos-danger) !important; }
#products-container .product-card.low-stock    { border-color: var(--pos-warning) !important; }

#products-container .product-image {
    width: 100% !important;
    height: 140px !important;
    min-height: 100px !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
}
#products-container .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
}

.weight-badge {
    position: absolute;
    top: 6px; right: 6px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
}

#products-container .product-info {
    padding: 10px !important;
    flex: 1 !important;
    display: block !important;
    visibility: visible !important;
    min-height: 50px !important;
}
#products-container .product-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--pos-dark) !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    visibility: visible !important;
}
#products-container .product-category {
    font-size: 11px !important;
    color: #888 !important;
    margin-bottom: 5px !important;
    display: block !important;
}
#products-container .product-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--pos-success) !important;
    margin-bottom: 3px !important;
    display: block !important;
}
#products-container .product-stock {
    font-size: 12px !important;
    color: #666 !important;
    display: block !important;
}
#products-container .product-actions {
    display: block !important;
    visibility: visible !important;
}
#products-container .btn-add {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.product-actions { border-top: 1px solid var(--pos-border); flex-shrink: 0; }
.btn-add {
    width: 100%;
    padding: 10px;
    background: var(--pos-primary);
    color: var(--pos-white);
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    transition: var(--pos-transition);
}
.btn-add:hover:not(:disabled) { background: var(--pos-primary-dark); }
.btn-add:disabled { background: var(--pos-danger); cursor: not-allowed; }

/* ============================================
   VISTA LISTA — producto horizontal
   ============================================ */
.products-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#products-container .product-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--pos-white) !important;
    border: 2px solid var(--pos-border) !important;
    border-radius: var(--pos-radius) !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
    transition: var(--pos-transition) !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 60px !important;
}
#products-container .product-list-item:hover {
    border-color: var(--pos-primary) !important;
    box-shadow: 0 2px 8px rgba(0,124,186,0.1) !important;
}
#products-container .product-list-item.out-of-stock { opacity: 0.6 !important; border-color: var(--pos-danger) !important; }
#products-container .product-list-item.low-stock    { border-color: var(--pos-warning) !important; }

.product-image-small {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.product-image-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Información del producto en lista */
.product-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.product-main-info .product-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 2px;
}
.product-main-info .product-category {
    font-size: 11px;
    color: #888;
}
.product-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.product-meta .product-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--pos-success);
}
.product-meta .product-stock {
    font-size: 11px;
    color: #666;
}

/* Botón agregar en lista */
.product-list-item .btn-add {
    width: auto;
    padding: 8px 14px;
    border-radius: var(--pos-radius);
    flex-shrink: 0;
    font-size: 13px;
}

/* Badges IVA */
.iva-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    vertical-align: middle;
    margin-left: 3px;
}
.iva-badge.iva-19 { background: #fce4ec; color: #c62828; }
.iva-badge.iva-5  { background: #fff8e1; color: #e65100; }
.iva-badge.iva-0  { background: #e3f2fd; color: #1565c0; }

/* Estados vacío / cargando */
.loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--pos-primary);
    font-size: 16px;
    font-weight: 600;
}
.no-products {
    text-align: center;
    padding: 30px;
    color: #666;
    font-style: italic;
}

/* ============================================
   CARRITO — Header
   ============================================ */
.cart-header {
    flex-shrink: 0;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--pos-success), #20c997);
    color: var(--pos-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.cart-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}
.btn-clear-cart {
    padding: 6px 12px;
    background: rgba(255,255,255,0.2);
    color: var(--pos-white);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: var(--pos-transition);
}
.btn-clear-cart:hover { background: rgba(255,255,255,0.35); }

/* ── Pestañas multi-carrito ── */
.cart-tabs-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    background: #e9ecef;
    border-bottom: 1px solid var(--pos-border);
    overflow-x: auto;
    min-height: 34px;
}

.cart-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--pos-border);
    border-radius: 6px 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.cart-tab:hover {
    background: #f0f7ff;
    color: var(--pos-primary);
}

.cart-tab.active {
    background: #fff;
    color: var(--pos-primary);
    border-bottom-color: #fff;
    box-shadow: 0 -2px 0 var(--pos-primary) inset;
}

.cart-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--pos-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
}

.cart-tab.active .cart-tab-badge {
    background: var(--pos-success);
}

.cart-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 12px;
    line-height: 1;
    color: #999;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 2px;
}

.cart-tab-close:hover {
    background: var(--pos-danger);
    color: #fff;
}

.cart-tab-add {
    background: transparent;
    border: 1px dashed #aaa;
    color: #888;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
}

.cart-tab-add:hover {
    border-color: var(--pos-primary);
    color: var(--pos-primary);
    background: #f0f7ff;
}

/* ============================================
   CARRITO — Lista de ítems (scrollable)
   ============================================ */
/* [2026-08 — "solo veo un producto agregado"]
   Antes: flex: 2 1 120px. Dentro de una columna flex, ese 120px de base hacía
   que la lista se quedara casi del alto de UN ítem cuando el resto de la
   barra (cliente, totales, método de pago) reclamaba su espacio. El cajero
   agregaba diez productos y seguía viendo uno.

   Ahora la lista CRECE con su contenido (flex-basis auto) hasta un tope de
   media pantalla; a partir de ahí hace scroll interno en vez de empujar los
   totales fuera de la vista. Es exactamente lo pedido: flexible hacia abajo,
   sin pasar la mitad del alto total. */
.cart-items {
    flex: 0 1 auto;
    min-height: 96px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px;
    background: #f8fafc;
    scroll-behavior: smooth;
    /* Espacio para que el resaltado del último ítem no quede pegado al borde */
    scroll-padding-block: 8px;
}

.empty-cart {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}
.empty-cart p   { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.empty-cart small { font-size: 13px; opacity: 0.8; }

/* ── Ítem de carrito — layout 2 filas ─────────────────────────────────── */
/*
   Fila superior: [nombre (flex:1)]  [total]  [🗑️]
   Fila inferior: [precio/und badge] [−qty+]  [Desc.$input]
*/
/* [2026-08 — compactación] Menos alto por ítem = más productos visibles de
   un vistazo, que es lo que reclamaban los cajeros. Se recortan padding,
   márgenes y tipografías sin bajar de los tamaños táctiles mínimos. */
.cart-item {
    background: var(--pos-white);
    border: 1px solid #e2e8f0;
    border-radius: var(--pos-radius);
    padding: 6px 8px;
    margin-bottom: 5px;
    transition: var(--pos-transition);
    /* sin display:grid aquí — usamos flexbox en filas internas */
}

/* Resalta por un instante el último producto agregado/escaneado, para que el
   cajero confirme de un vistazo QUÉ entró — sobre todo al escanear en ráfaga. */
@keyframes posFlashItem {
    0%   { background: #dcfce7; border-color: var(--pos-success); }
    100% { background: var(--pos-white); border-color: #e2e8f0; }
}
.cart-item.just-added {
    animation: posFlashItem 1.1s ease-out;
}
.cart-item:hover {
    border-color: var(--pos-success);
    box-shadow: 0 2px 8px rgba(40,167,69,0.1);
}

/* Fila 1: nombre + total + borrar */
.cart-row-top {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}

/* [2026-08] El nombre se limita a 2 líneas. Antes podía ocupar 3 o 4 con los
   nombres largos del catálogo ("3D Bomba De Limpieza + Bicarbonato X 250 g"),
   y un solo producto llenaba la columna. El nombre completo sigue disponible
   en el tooltip (atributo title) para cuando haga falta leerlo entero. */
.item-name {
    flex: 1;
    min-width: 0;                /* CRÍTICO: permite que flex-item se encoja */
    font-weight: 600;
    font-size: 12px;
    line-height: 1.25;
    color: var(--pos-dark);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-total {
    font-weight: 700;
    color: var(--pos-success);
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

.remove-item {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--pos-danger);
    font-size: 14px;
    padding: 0 2px;
    flex-shrink: 0;
    line-height: 1;
    transition: var(--pos-transition);
}
.remove-item:hover { transform: scale(1.2); }

/* Fila 2: precio/unidad + controles cantidad + descuento */
/* [2026-08] Sin flex-wrap: antes, si el ancho no alcanzaba, los controles
   saltaban a una tercera línea y el ítem crecía de golpe — eso es parte de por
   qué "solo se veía un producto". Ahora la fila se mantiene en una sola línea
   y quien cede espacio es el precio (que ya tiene ellipsis). */
.cart-row-bottom {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.item-price {
    font-size: 10.5px;
    color: #6c757d;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Controles ± cantidad */
.item-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* 24px sigue siendo cómodo con el dedo y ahorra alto en cada fila. */
.qty-btn {
    width: 24px;
    height: 24px;
    border: 1px solid #ddd;
    background: var(--pos-white);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--pos-transition);
    color: var(--pos-dark);
}
.qty-btn:hover {
    background: var(--pos-success);
    color: var(--pos-white);
    border-color: var(--pos-success);
}

.item-quantity {
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    font-size: 13px;
}

/* Descuento por ítem */
.item-discount-col {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.disc-label {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
}
.item-discount-input {
    width: 46px;
    padding: 1px 4px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 10.5px;
    text-align: right;
    /* Oculta las flechitas del input number: no aportan en el mostrador y
       ensanchan el control. */
    -moz-appearance: textfield;
}
.item-discount-input::-webkit-outer-spin-button,
.item-discount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* [2026-08] Botones de escáner y micrófono dentro del buscador de productos.
   Van pegados al borde derecho del campo, como en las apps de tienda. */
.search-box { position: relative; }
.search-tool-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
    color: #475569;
    opacity: .85;
}
.search-tool-btn:hover { opacity: 1; }
#pos-cam-scan   { right: 8px; }
#pos-voice-search { right: 40px; }

/* [FIX 2026-08] La lupa .search-icon no tenía NINGUNA regla de CSS, así que
   el navegador la pintaba como un carácter suelto debajo del campo (se ve en
   la captura del mostrador). Ahora queda posicionada dentro del campo, a la
   izquierda, y el texto empieza después de ella. */
.search-box .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
    opacity: .6;
}
/* Espacio a la izquierda para la lupa y a la derecha para voz + cámara */
.search-box input#product-search { padding-left: 32px; padding-right: 74px; }

/* ============================================
   CARRITO — Totales (no scrolleable)
   ============================================ */
.cart-totals {
    flex-shrink: 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border-top: 1px solid var(--pos-border);
}

.total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
}
.total-line span:first-child { font-weight: 600; color: #475569; }
.total-line span:last-child  { font-weight: 700; color: var(--pos-dark); }

.total-final {
    border-top: 2px solid #cbd5e1;
    padding-top: 10px;
    margin-top: 6px;
    font-size: 18px;
}
.total-final span:last-child {
    font-size: 20px;
    color: var(--pos-success);
    font-weight: 800;
}

/* ============================================
   CARRITO — Secciones (cliente, pago, notas, botones)
   Estas también hacen parte del scroll del cart-section
   ============================================ */
.cart-bottom {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 45%;
    overflow-y: auto;
    border-top: 2px solid var(--pos-border);
}

.customer-section,
.payment-section,
.notes-section,
.discount-section {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pos-border);
    background: var(--pos-white);
}

.customer-section h4,
.payment-section label,
.notes-section label,
.discount-section label {
    margin: 0 0 10px 0;
    font-weight: 700;
    color: var(--pos-dark);
    font-size: 14px;
    display: block;
}

.customer-selector {
    display: flex;
    gap: 8px;
    align-items: center;
}
.customer-selector select {
    flex: 1;
    padding: 9px 12px;
    border: 2px solid #e2e8f0;
    border-radius: var(--pos-radius);
    font-size: 13px;
    background: var(--pos-white);
}
.customer-selector select:focus {
    border-color: var(--pos-success);
    outline: none;
}

.btn-new-customer {
    padding: 9px 12px;
    background: var(--pos-success);
    color: var(--pos-white);
    border: none;
    border-radius: var(--pos-radius);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: var(--pos-transition);
}
.btn-new-customer:hover { background: #218838; }

#customer-details {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#customer-details input {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid #e2e8f0;
    border-radius: var(--pos-radius);
    font-size: 13px;
}
#customer-details input:focus {
    border-color: var(--pos-success);
    outline: none;
}

/* Métodos de pago */
.payment-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.payment-option {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 2px solid #e2e8f0;
    border-radius: var(--pos-radius);
    cursor: pointer;
    font-size: 13px;
    transition: var(--pos-transition);
    background: var(--pos-white);
}
.payment-option:hover { border-color: var(--pos-success); }
.payment-option input { margin-right: 6px; }
.payment-option:has(input:checked) {
    border-color: var(--pos-success);
    background: rgba(40,167,69,0.08);
}

/* Notas */
.notes-section textarea,
.modern-textarea {
    width: 100%;
    padding: 9px 10px;
    border: 2px solid #e2e8f0;
    border-radius: var(--pos-radius);
    font-size: 13px;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}
.notes-section textarea:focus,
.modern-textarea:focus {
    border-color: var(--pos-success);
    outline: none;
}

/* Descuento global */
.discount-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}
.discount-controls input {
    flex: 1;
    padding: 8px 10px;
    border: 2px solid #e2e8f0;
    border-radius: var(--pos-radius);
    font-size: 13px;
}
.discount-controls select {
    padding: 8px;
    border: 2px solid #e2e8f0;
    border-radius: var(--pos-radius);
    font-size: 13px;
    width: 55px;
}

/* Botones de acción */
.action-buttons {
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modern-btn {
    padding: 13px 16px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: var(--pos-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.modern-btn.primary   { background: var(--pos-success); color: var(--pos-white); }
.modern-btn.secondary { background: var(--pos-warning);  color: var(--pos-dark); }
.modern-btn.warning   { background: linear-gradient(135deg,#e67e22,#f39c12); color: #fff; }
.modern-btn.danger    { background: linear-gradient(135deg,#dc3545,#c82333); color: #fff; }

.modern-btn.primary:hover:not(:disabled)   { background: #218838; transform: translateY(-1px); }
.modern-btn.secondary:hover                { background: #e0a800; transform: translateY(-1px); }
.modern-btn.warning:hover                  { background: linear-gradient(135deg,#d35400,#e67e22); }
.modern-btn.danger:hover                   { background: linear-gradient(135deg,#c82333,#a71d2a); }
.modern-btn.primary:disabled               { background: #94a3b8; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================
   MODALES
   ============================================ */
.pos-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(3px);
}

.modern-modal {
    background: var(--pos-white);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalIn 0.3s ease;
}
.modal-sm { max-width: 400px; }
.modal-md { max-width: 580px; }

@keyframes modalIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg,#f8fafc,#e2e8f0);
}
.modal-header h3 { margin: 0; font-size: 18px; font-weight: 700; }
.success-header  { background: linear-gradient(135deg,var(--pos-success),#20c997) !important; color: var(--pos-white); }
.success-header h3 { color: var(--pos-white); }
.cash-header     { background: linear-gradient(135deg,#27ae60,#2ecc71); color: #fff; }
.cash-header h3  { color: #fff; }
.return-header   { background: linear-gradient(135deg,#e67e22,#f39c12); color: #fff; }
.return-header h3 { color: #fff; }

.modal-close {
    background: none; border: none;
    font-size: 26px; cursor: pointer;
    color: #64748b;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    transition: var(--pos-transition);
}
.modal-close:hover { background: rgba(100,116,139,0.15); }
.success-header .modal-close,
.cash-header .modal-close,
.return-header .modal-close { color: rgba(255,255,255,0.8); }
.success-header .modal-close:hover,
.cash-header .modal-close:hover,
.return-header .modal-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

.modal-body    { padding: 20px; }
.modal-footer  {
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    background: linear-gradient(135deg,#f8fafc,#e2e8f0);
}
/* Botones dentro de modales: compactos y proporcionales */
.modal-footer .modern-btn,
.modal-footer .modern-btn.primary,
.modal-footer .modern-btn.secondary,
.modal-footer .modern-btn.danger,
.modal-footer .modern-btn.warning {
    padding: 7px 18px !important;
    font-size: 13px !important;
    min-width: 120px !important;
    max-width: 220px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    align-self: auto !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Modal de confirmación de venta */
.success-message { text-align: center; margin-bottom: 20px; }
.success-icon    { font-size: 56px; margin-bottom: 10px; }
.success-message p { font-size: 16px; color: var(--pos-success); font-weight: 600; }

.sale-summary {
    background: #f8fafc;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}
.summary-item:last-child  { border-bottom: none; }
.summary-label { font-weight: 600; color: #475569; }
.summary-value { font-weight: 700; color: var(--pos-dark); }
.total-amount  { font-size: 18px; color: var(--pos-success) !important; }

/* Modal cliente */
.customer-form-modal { display: flex; flex-direction: column; gap: 16px; }
.input-group { display: flex; flex-direction: column; gap: 5px; }
.input-group label { font-size: 12px; font-weight: 600; color: #475569; }
.modern-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: var(--pos-radius);
    font-size: 13px;
    background: var(--pos-white);
    transition: var(--pos-transition);
}
.modern-input:focus {
    border-color: var(--pos-success);
    outline: none;
    box-shadow: 0 0 0 3px rgba(40,167,69,0.1);
}

/* Modal Corte Z */
.corte-z-summary {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px solid #e9ecef;
}
.summary-row:last-child  { border-bottom: none; }
.summary-highlight {
    font-weight: 700;
    color: var(--pos-primary);
    font-size: 14px;
    margin-top: 4px;
}
.difference-row    { padding: 8px; background: #fff3cd; border-radius: 6px; font-weight: 600; margin-top: 8px; display: flex; justify-content: space-between; }
.diff-negative     { color: #dc3545; }
.diff-positive     { color: #28a745; }

/* Modal devolución */
.search-with-btn   { display: flex; gap: 8px; }
.return-sale-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pos-border);
}
.return-items-list { max-height: 240px; overflow-y: auto; }
.return-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 8px;
    border-bottom: 1px solid #eee;
    gap: 10px;
}
.return-item label { display: flex; align-items: center; gap: 5px; cursor: pointer; flex: 1; font-size: 13px; }
.return-qty-row    { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.return-qty-input  { width: 52px; padding: 2px 4px; border: 1px solid #ced4da; border-radius: 4px; font-size: 12px; text-align: center; }

/* Modal cantidad variable */
.qty-product-name { font-size: 13px; color: #495057; margin-bottom: 10px; font-weight: 600; }
.qty-big-input    { font-size: 22px !important; text-align: center; letter-spacing: 2px; }
.mt-2 { margin-top: 10px; }

/* ============================================
   NOTIFICACIONES
   ============================================ */
.pos-notification {
    position: fixed;
    top: calc(var(--pos-adminbar-h) + var(--pos-header-h) + 10px);
    right: 16px;
    padding: 12px 18px;
    border-radius: var(--pos-radius);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    z-index: 20000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    animation: slideInRight 0.3s ease;
    max-width: 320px;
}
@keyframes slideInRight {
    from { opacity:0; transform: translateX(100%); }
    to   { opacity:1; transform: translateX(0); }
}
.pos-notification-success { background: var(--pos-success); }
.pos-notification-error   { background: var(--pos-danger); }
.pos-notification-warning { background: var(--pos-warning); color: #856404; }
.pos-notification-info    { background: var(--pos-info); }

/* ============================================
   RECIBO TÉRMICO
   ============================================ */
#thermal-receipt { display: none; }
.thermal-store-name     { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.thermal-store-address,
.thermal-thanks,
.thermal-software       { text-align: center; font-size: 11px; }
.thermal-divider        { text-align: center; font-size: 10px; color: #888; margin: 3px 0; }
.thermal-item           { margin: 5px 0; }
.thermal-item-name      { font-weight: 600; font-size: 12px; }
.thermal-item-row       { display: flex; justify-content: space-between; font-size: 11px; }
.thermal-total-row      { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.thermal-grand-total    { font-weight: 700; font-size: 15px; border-top: 1px solid #000; padding-top: 3px; }
.thermal-payment        { text-align: center; font-size: 12px; margin-top: 4px; }
.thermal-info           { font-size: 11px; margin-bottom: 5px; }
.thermal-receipt-data   { font-family: 'Courier New', Courier, monospace; }

@media print {
    /* Ocultar absolutamente todo excepto el recibo térmico */
    body * { display: none !important; visibility: hidden !important; }
    #thermal-receipt,
    #thermal-receipt * {
        display: block !important;
        visibility: visible !important;
    }
    #thermal-receipt {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 80mm !important;
        max-width: 80mm !important;
        margin: 0 auto !important;
        padding: 4mm !important;
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 11px !important;
        color: #000 !important;
        background: #fff !important;
    }
    #thermal-receipt .thermal-total-row,
    #thermal-receipt .thermal-item-row {
        display: flex !important;
    }
    @page { size: 80mm auto; margin: 0; }
}

/* ============================================
   SHIPPING SECTION
   ============================================ */
.shipping-section {
    margin-bottom: 10px;
}
.shipping-section label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
}
.shipping-section select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
}

/* Sale modal actions — flex wrap for email/whatsapp buttons */
.sale-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sale-modal-actions .modern-btn {
    flex: 1 1 auto;
    min-width: 80px;
}

/* ============================================
   RESPONSIVE — tablet / móvil
   ============================================ */
@media (max-width: 900px) {
    .pos-main-content {
        flex-direction: column;
    }
    /* Sidebar: barra horizontal en la parte superior del contenido */
    .pos-sidebar {
        flex: 0 0 auto;
        width: 100%;
        flex-direction: row;
        padding: 4px 8px;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .pos-sidebar-item {
        flex-direction: row;
        width: auto;
        padding: 6px 10px;
        gap: 4px;
    }
    .sidebar-icon { font-size: 16px; margin-bottom: 0; }
    .sidebar-label { font-size: 11px; }
    .products-section {
        flex: 3 1 0%;
        height: auto;
        min-height: 0;
        border-right: none;
        border-bottom: 3px solid var(--pos-primary);
    }
    .cart-section {
        flex: 2 1 0%;
        height: auto;
        min-height: 0;
        max-width: 100%;
    }
    .pos-header h1 { font-size: 16px; }
    #pos-clock, .header-user { display: none; }
}

@media (max-width: 600px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 8px;
    }
    .payment-methods { grid-template-columns: 1fr 1fr; }
    .modern-modal { width: 96%; }
    .cart-section { max-width: 100%; }
}

/* ============================================
   OCULTAR FOOTER DE WORDPRESS
   ============================================ */
body.pos-page footer,
body.pos-page .site-footer,
body.pos-page #footer { display: none !important; }

/* ============================================
   PAGO MIXTO
   ============================================ */
.mixed-payment-detail {
    margin-top: 8px;
    padding: 10px;
    background: #f0f7ff;
    border-radius: 6px;
    border: 1px solid #d1e7ff;
}
.mixed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.mixed-row label {
    min-width: 110px;
    font-size: 12px;
    font-weight: 600;
}
.mixed-row input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--pos-border);
    border-radius: 4px;
    font-size: 13px;
}
.mixed-remaining {
    border-top: 1px dashed #aaa;
    padding-top: 6px;
    font-weight: 700;
}
.mixed-remaining span {
    font-size: 15px;
}

/* Botón info (pago pendiente) */
.modern-btn.info {
    background: var(--pos-info);
    color: #fff;
}
.modern-btn.info:hover { opacity: 0.85; }

/* ============================================
   PANELES INTERNOS (Productos, Clientes, Ventas)
   ============================================ */
.pos-inner-panel {
    position: absolute;
    top: var(--pos-header-h);
    left: 60px; right: 0; bottom: 0;
    background: var(--pos-light);
    z-index: 80;
    overflow-y: auto;
}
.pos-shortcode-wrapper .pos-inner-panel {
    top: var(--pos-header-h);
}

.panel-search-input {
    padding: 5px 12px;
    border: 1px solid var(--pos-border);
    border-radius: 6px;
    font-size: 13px;
    width: 220px;
}

.panel-edit-input {
    padding: 3px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    background: #fff;
    box-sizing: border-box;
}
.panel-edit-input:focus {
    border-color: var(--pos-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,124,186,0.12);
}

/* Botón guardar en tabla de gestión de productos */
.btn-save-product {
    padding: 4px 8px;
    background: #e8f4ff;
    border: 1px solid #90caf9;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    line-height: 1;
}
.btn-save-product:hover:not(:disabled)  { background: #bbdefb; transform: scale(1.1); }
.btn-save-product:disabled              { opacity: 0.5; cursor: not-allowed; }

/* ─── Kardex: autocomplete de búsqueda de producto ─── */
.kardex-search-wrap {
    position: relative;
}
.kardex-search-wrap .modern-input {
    width: 100%;
    box-sizing: border-box;
}
.kardex-autocomplete {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid #dce3ee;
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.14);
    animation: kdxFadeIn 0.12s ease;
}
@keyframes kdxFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

.kdx-result-item {
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f3f8;
    transition: background 0.1s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kdx-result-item:last-child { border-bottom: none; }
.kdx-result-item:hover      { background: #eef4ff; }
.kdx-result-item.kdx-loading,
.kdx-result-item.kdx-empty  {
    color: #888;
    font-style: italic;
    cursor: default;
    font-size: 13px;
}
.kdx-result-item.kdx-empty:hover,
.kdx-result-item.kdx-loading:hover { background: transparent; }

.kdx-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kdx-meta {
    font-size: 11px;
    color: #64748b;
}
.kdx-meta strong {
    color: #0f766e;
    font-weight: 700;
}

/* ============================================
   PANEL DE REPORTES POS
   ============================================ */
.pos-reports-panel {
    position: absolute;
    top: var(--pos-header-h);
    left: 60px; right: 0; bottom: 0;
    background: var(--pos-light);
    z-index: 80;
    overflow-y: auto;
    padding: 0;
}

/* En modo shortcode el header ya ocupa la posición top */
.pos-shortcode-wrapper .pos-reports-panel {
    top: var(--pos-header-h);
}

.reports-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding: 12px 20px;
    border-bottom: 2px solid var(--pos-border);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.reports-toolbar h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--pos-dark);
}

.reports-back-btn {
    padding: 6px 14px;
    background: var(--pos-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.reports-back-btn:hover { opacity: 0.85; }

.reports-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.report-period-btn {
    padding: 5px 12px;
    background: #e9ecef;
    border: 1px solid var(--pos-border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #555;
    transition: all 0.15s;
}
.report-period-btn:hover { background: #d1e7ff; color: var(--pos-primary); }
.report-period-btn.active {
    background: var(--pos-primary);
    color: #fff;
    border-color: var(--pos-primary);
}

.report-custom-range {
    display: flex;
    align-items: center;
    gap: 4px;
}
.report-custom-range input[type="date"] {
    padding: 4px 8px;
    border: 1px solid var(--pos-border);
    border-radius: 4px;
    font-size: 12px;
}

.reports-content {
    padding: 20px;
}

.reports-loading {
    text-align: center;
    padding: 40px;
    font-size: 16px;
    color: #888;
}

/* ── Tarjetas resumen ── */
.reports-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.report-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid var(--pos-primary);
}
.report-card.card-success { border-left-color: var(--pos-success); }
.report-card.card-warning { border-left-color: var(--pos-warning); }
.report-card.card-info    { border-left-color: var(--pos-info); }
.report-card.card-danger  { border-left-color: var(--pos-danger); }

.report-card-label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.report-card-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--pos-dark);
    margin-top: 4px;
}
.report-card-sub {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

/* ── Secciones ── */
.reports-section {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.reports-section h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--pos-dark);
}

/* ── Desglose por método de pago ── */
.payment-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.payment-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--pos-light);
    border-radius: 8px;
}
.payment-card-icon {
    font-size: 28px;
    line-height: 1;
}
.payment-card-info { flex: 1; }
.payment-card-method {
    font-size: 13px;
    font-weight: 700;
    color: var(--pos-dark);
}
.payment-card-count {
    font-size: 11px;
    color: #888;
}
.payment-card-amount {
    font-size: 18px;
    font-weight: 800;
    color: var(--pos-success);
}

/* ── Tabla de ventas recientes ── */
.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.report-table th {
    text-align: left;
    padding: 8px 10px;
    background: var(--pos-light);
    font-weight: 700;
    color: #555;
    border-bottom: 2px solid var(--pos-border);
    white-space: nowrap;
}
.report-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--pos-dark);
}
.report-table tr:hover td {
    background: #f8faff;
}
.report-table .text-right { text-align: right; }
.report-table .text-center { text-align: center; }

/* ── Top productos ── */
.top-product-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.top-product-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pos-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}
.top-product-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
}
.top-product-stats {
    text-align: right;
    font-size: 12px;
    color: #666;
}
.top-product-stats strong {
    color: var(--pos-dark);
}