/* ═══════════════════════════════════════════════════════════════════════════════
   SISTEMA DE FACTURACIÓN - CSS OPTIMIZADO
   Estructura: Reset → Variables → Layout → Componentes → Modales → Responsive
═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   1. RESET & BASE
═══════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
  }
  
  :root {
    /* Brand Colors */
    --brand-50:  #eef5ff;   --brand-100: #d9e8ff;   --brand-200: #bcd5ff;
    --brand-300: #8eb8ff;   --brand-400: #598dff;   --brand-500: #3366ff;
    --brand-600: #1a44f5;   --brand-700: #1332e1;   --brand-800: #162bb6;
    --brand-900: #172a8f;
    
    /* Slate Colors */
    --slate-200: #e2e8f0;   --slate-400: #94a3b8;   --slate-500: #64748b;
    --slate-600: #475569;   --slate-750: #2a3347;   --slate-800: #1e293b;
    --slate-850: #1a2235;   --slate-900: #0f172a;   --slate-950: #0f1623;
    
    /* Accent Colors */
    --emerald-400: #34d399; --emerald-500: #10b981; --emerald-600: #059669;
    --amber-400:  #fbbf24;  --amber-500:  #f59e0b;
    --red-400:    #f87171;
    --blue-400:   #60a5fa;
    --purple-400: #c084fc;
    
    /* Typography */
    --font-sans: 'DM Sans', sans-serif;
    --font-mono: 'DM Mono', monospace;
  }
  
  html, body {
    font-family: var(--font-sans);
    background: var(--slate-950);
    color: var(--slate-200);
    height: 100dvh;
    overflow: hidden;
    padding: 0 !important;
  }
  
  /* Scrollbar */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { 
    background: rgba(51,102,255,0.27); 
    border-radius: 2px; 
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(51,102,255,0.53); }
  
  /* Remove number spinners */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
  }
  input[type=number] { -moz-appearance: textfield; }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     2. UTILITY CLASSES
  ═══════════════════════════════════════════════════════════════════════════════ */
  .glass {
    background: rgba(26,34,53,0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.06);
  }
  
  .glass-light {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
  }
  
  .truncate { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
  }
  
  .hidden { display: none !important; }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     3. APP LAYOUT
  ═══════════════════════════════════════════════════════════════════════════════ */
  .app-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100dvh;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     4. HEADER
  ═══════════════════════════════════════════════════════════════════════════════ */
  .desktop-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    z-index: 20;
    grid-column: 1 / -1;
  }
  
  .header-logo-text {
    font-weight: 700;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.1em;
  }
  
  .wifi-signal {
    color: var(--emerald-500);
    filter: drop-shadow(0 0 6px var(--emerald-500));
    font-size: 1.125rem;
  }
  
  .header-spacer { flex: 1; }
  
  .header-user {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--slate-400);
    white-space: nowrap;
  }
  .header-user i { color: var(--slate-500); }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     5. BUTTONS
  ═══════════════════════════════════════════════════════════════════════════════ */
  button { 
    cursor: pointer; 
    font-family: var(--font-sans); 
    border: none; 
  }
  
  .btn-ghost {
    background: rgba(255,255,255,0.05);
    color: var(--slate-400);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    display: flex; 
    align-items: center; 
    justify-content: center;
  }
  .btn-ghost:hover { 
    background: rgba(255,255,255,0.08); 
    color: var(--slate-200); 
  }
  
  .btn-menu { width: 32px; height: 32px; font-size: 1.145rem; }
  
  .btn-primary {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    color: #fff;
    border: 1px solid rgba(51,102,255,0.5);
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, #4477ff, #2255f6);
    box-shadow: 0 4px 20px rgba(51,102,255,0.4);
    transform: translateY(-1px);
  }
  
  .btn-success {
    background: linear-gradient(135deg, var(--emerald-500), var(--emerald-600));
    color: #fff;
    border: 1px solid rgba(16,185,129,0.4);
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  }
  .btn-success:hover {
    background: linear-gradient(135deg, #1ac98f, #0fa870);
    box-shadow: 0 4px 20px rgba(16,185,129,0.35);
    transform: translateY(-1px);
  }
  
  .btn-danger {
    background: rgba(239,68,68,0.15);
    color: var(--red-400);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px;
    transition: background 0.2s;
  }
  .btn-danger:hover { background: rgba(239,68,68,0.25); }
  
  .btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--slate-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }
  .btn-icon:hover {
    background: rgba(255,255,255,0.1);
    color: var(--slate-200);
  }
  .btn-icon.danger:hover {
    background: rgba(239,68,68,0.2);
    color: #ef4444;
    border-color: rgba(239,68,68,0.3);
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     6. MAIN CONTENT & SEARCH
  ═══════════════════════════════════════════════════════════════════════════════ */
  .main-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--slate-950);
  }
  
  /* Search bar */
  .search-wrapper {
    padding: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: relative;
    z-index: 50;
  }
  .search-inner { position: relative; }
  .search-inner i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate-500);
  }
  .search-inner input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    background: rgba(15,23,42,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    font-size: 0.875rem;
    color: var(--slate-200);
    font-family: var(--font-sans);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .search-inner input:focus {
    outline: none;
    border-color: rgba(51,102,255,0.5);
    box-shadow: 0 0 0 1px rgba(51,102,255,0.5);
  }
  .search-shortcut {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--slate-600);
    display: none;
  }
  
  /* Search Results Dropdown */
  #search-results {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    margin: 4px 8px 0;
    background: var(--slate-800);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    overflow: hidden;
    max-height: 256px;
    overflow-y: auto;
    z-index: 50;
    display: none;
  }
  #search-results:not(.hidden) { display: block; }
  
  .search-item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .search-item:last-child { border-bottom: none; }
  .search-item:hover { background: rgba(51,102,255,0.1); }
  .search-item strong {
    color: var(--brand-400);
    font-weight: 600;
  }
  .search-item:hover, .search-item.bg-slate-700 {
    background: rgba(51, 102, 255, 0.1);
}
.search-item .text-sm {
    font-size: 0.875rem;
    color: var(--slate-200);
}
.search-item .text-xs {
    font-size: 0.75rem;
    color: var(--slate-400);
    margin-top: 4px;
}
  
  /* Products hidden data */
  #productos-lista { display: none; }
  
  /* Table Header (Desktop) */
  .table-header {
    display: none;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(15,23,42,0.5);
    grid-template-columns: minmax(120px, 1fr) 85px 65px 120px 80px 48px;
    gap: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    align-items: center;
  }
  .table-header div:nth-child(3) { text-align: center; }
  .table-header div:nth-child(4) { text-align: right; margin-right: 10px; }
  .table-header div:nth-child(5) { text-align: center; }
  .table-header div:nth-child(6) { text-align: right; }
  
  #contenedorProductos { flex: 1; overflow-y: auto; }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     7. CARRITO - ITEMS
  ═══════════════════════════════════════════════════════════════════════════════ */
  
  /* Estado vacío */
  .empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
  }
  .empty-cart-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(30,41,59,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin-bottom: 16px;
    color: var(--slate-600);
    font-size: 1.5rem;
  }
  .empty-cart-title {
    color: #cbd5e1;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 8px;
  }
  .empty-cart-desc {
    color: var(--slate-500);
    font-size: 0.875rem;
    max-width: 280px;
    margin-bottom: 24px;
    line-height: 1.5;
  }
  .empty-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(37,99,235,0.2);
    color: var(--blue-400);
    font-size: 0.875rem;
    border-radius: 8px;
    border: 1px solid rgba(59,130,246,0.2);
    transition: background 0.2s;
    font-family: var(--font-sans);
    cursor: pointer;
  }
  .empty-cart-btn:hover { background: rgba(37,99,235,0.3); }
  
  /* Item del carrito - Mobile First */
  .cart-item {
    position: relative;
    margin: 4px;
    border: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  
  .cart-item-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
  }
  
  .cart-item-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(234,88,12,0.2));
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--amber-400);
    font-size: 1.125rem;
    flex-shrink: 0;
  }
  
  .cart-item-name-wrap { flex: 1; min-width: 0; }
  
  .cart-item-name {
    font-weight: 500;
    color: #f1f5f9;
    font-size: 0.8375rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .cart-item-code {
    font-size: 0.625rem;
    color: var(--slate-500);
    font-family: var(--font-mono);
  }
  
  /* Botón eliminar móvil */
  .cart-item-delete-mobile {
    position: absolute;
    top: 8px; right: 8px;
    padding: 8px;
    color: rgba(251,113,133,0.7);
    background: none;
    border: none;
    font-size: 1.125rem;
    line-height: 1;
    transition: color 0.2s;
    cursor: pointer;
  }
  .cart-item-delete-mobile:hover { color: #fb7185; }
  .cart-item-deleteE{
    color: rgba(251,113,133,0.7);
    background: none;
    border: none;
    font-size: 1.125rem;
    margin-bottom: 10px;
  }
  /* Fields grid */
  .cart-item-fields {
    display: flex;
    align-items: flex-end;
    gap: 6px;
  }
  
  .cart-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .cart-field-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  /* Stepper cantidad */
  .cart-stepper {
    display: flex;
    align-items: center;
    background: rgba(15,23,42,0.5);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    height: 32px;
    overflow: hidden;
  }
  
  .cart-stepper-btn {
    width: 24px;
    height: 100%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--slate-400);
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.2s;
    flex-shrink: 0;
    cursor: pointer;
  }
  .cart-stepper-btn:hover { color: var(--amber-400); }
  
  .cart-stepper input {
    width: 32px;
    background: transparent;
    border: none;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate-200);
    font-family: var(--font-mono);
    outline: none;
  }
  
  /* Precio */
  .cart-price-wrap {
    display: flex;
    align-items: center;
    border-radius: 8px;
    height: 32px;
    padding: 0 2px;
  }
  
  .cart-price-value {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: #cbd5e1;
    white-space: nowrap;
  }
  
  .cart-price-select {
    background: transparent;
    border: none;
    color: var(--slate-500);
    font-size: 0.75rem;
    outline: none;
    cursor: pointer;
    width: 19px !important;
    padding: 0;
  }
  
  /* Descuento */
  .cart-desc-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(15,23,42,0.3);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    height: 32px;
    padding: 0 8px;
  }
  
  .cart-desc-wrap input {
    width: 40px;
    background: transparent;
    border: none;
    text-align: right;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--amber-400);
    font-weight: 600;
    outline: none;
  }
  
  .cart-desc-pct {
    font-size: 0.625rem;
    font-weight: 700;
    color: rgba(245,158,11,0.5);
  }
  
  /* Subtotal */
  .cart-subtotal-row {
    margin-left: auto;
    padding-top: 0;
    border-top: none;
    flex-direction: column;
    align-items: flex-end;
    display: flex;
    gap: 2px;
    grid-column: auto;
    margin-bottom: 6px;
  }
  
  .cart-subtotal-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: uppercase;
    margin-bottom: 7px;
  }
  
  .cart-subtotal-value {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--emerald-400);
    letter-spacing: 1px;
  }
  
  /* Botón eliminar desktop (oculto en móvil) */
  .cart-item-delete-desktop { display: none; }
  
  /* Código desktop (oculto en móvil) */
  .cart-item-code-desktop { display: none; }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     8. SIDE PANEL (Desktop)
  ═══════════════════════════════════════════════════════════════════════════════ */
  .side-panel {
    flex-direction: column;
    overflow: hidden;
    height: 100%;
  }
  
  /* Clients section */
  .clients-section {
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  
  .section-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
  }
  
  .clients-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  
  .client-col { display: flex; flex-direction: column; }
  
  .client-col-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .client-col-label span {
    font-size: 0.875rem;
    font-weight: 500;
    display: flex; 
    align-items: center; 
    gap: 4px;
  }
  .client-col-label .label-electronic { color: rgba(96,165,250,0.8); }
  .client-col-label .label-credito { color: rgba(251,191,36,0.8); }
  .client-col-label button {
    font-size: 0.5625rem;
    color: var(--brand-400);
    background: none;
    border: none;
    transition: color 0.2s;
  }
  .client-col-label button:hover { color: var(--brand-300); }
  
  .client-tag {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 6px 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    display: flex; 
    align-items: center; 
    gap: 8px;
  }
  .client-tag:hover { 
    background: rgba(255,255,255,0.08); 
    border-color: rgba(51,102,255,0.3); 
  }
  .client-tag.active { 
    background: rgba(51,102,255,0.15); 
    border-color: rgba(51,102,255,0.4); 
  }
  
  .client-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
  }
  .client-avatar-blue { 
    background: linear-gradient(135deg, rgba(51,102,255,0.2), rgba(6,182,212,0.2)); 
    color: var(--blue-400); 
  }
  .client-avatar-amber { 
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(249,115,22,0.2)); 
    color: var(--amber-400); 
  }
  
  .client-info { flex: 1; min-width: 0; }
  .client-name {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--slate-200);
    width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .client-id {
    font-size: 0.5625rem;
    color: var(--slate-500);
    font-family: var(--font-mono);
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
  }
  
  /* Panel body */
  .panel-body {
    flex: 1;
    padding: 5px 12px 0 12px;
    overflow-y: auto;
  }
  
  .panel-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 6px;
  }
  
  .control-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    display: flex; 
    align-items: center; 
    gap: 6px;
  }
  .control-label i { color: var(--brand-400); }
  
  .price-btn-group { display: flex; gap: 6px; }
  
  .price-btn {
    flex: 1;
    padding: 7px 4px;
    font-size: 0.625rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--slate-400);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    font-weight: 600;
  }
  .price-btn:hover { background: rgba(255,255,255,0.1); }
  .price-btn[data-active="true"] {
    background: rgba(51,102,255,0.2);
    border-color: var(--brand-500);
    color: var(--brand-400);
  }
  
  .discount-row {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 6px 8px;
    width: 100%;
  }
  .discount-row input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.75rem;
    text-align: center;
    width: 100%;
    font-family: var(--font-mono);
    color: var(--slate-200);
  }
  .discount-type-btn {
    color: var(--slate-400);
    font-size: 0.6875rem;
    margin-left: 4px;
    background: none;
    border: none;
    font-family: var(--font-mono);
    width: 20px;
    text-align: right;
    flex-shrink: 0;
    transition: color 0.2s;
  }
  .discount-type-btn:hover { color: var(--brand-400); }
  
  /* Summary */
  .summary-section { margin-bottom: 16px; }
  
  .summary-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    display: flex; 
    align-items: center; 
    gap: 6px;
  }
  .summary-label i { color: var(--brand-400); }
  
  .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    padding: 4px 0;
    color: var(--slate-400);
  }
  .summary-row span:last-child {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--slate-200);
  }
  
  .summary-divider { 
    height: 1px; 
    background: rgba(255,255,255,0.05); 
    margin: 8px 0; 
  }
  
  .total-box {
    background: rgba(51,102,255,0.1);
    border: 1px solid rgba(51,102,255,0.2);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .total-box-label { font-size: 1rem; font-weight: 700; color: #fff; }
  .total-box-value {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--brand-400);
  }
  
  /* Panel action */
  .panel-action {
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(15,23,42,0.5);
  }
  
  .facturar-btn {
    width: 100%;
    background: #059669;
    color: #fff;
    border-radius: 12px;
    padding: 13px 24px;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px;
    box-shadow: 0 8px 30px rgba(16,185,129,0.2);
    transition: background 0.2s, transform 0.15s;
    border: none;
  }
  .facturar-btn:hover { background: #047857; }
  .facturar-btn:active { transform: scale(0.98); }
  .facturar-btn i { font-size: 1.25rem; }
  
  .facturar-badge {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-left: 8px;
    letter-spacing: 1px;
  }
  .facturar-badge-md { display: none; }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     9. BARRA INFERIOR MÓVIL
  ═══════════════════════════════════════════════════════════════════════════════ */
  .mobile-bottom-bar {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(15,23,42,0.95);
    backdrop-filter: blur(12px);
    z-index: 30;
    flex-shrink: 0;
  }
  
  .mobile-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  
  .mobile-ctrl-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  
  .mobile-ctrl-label {
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex; 
    align-items: center; 
    gap: 3px;
  }
  .mobile-ctrl-label i { font-size: 0.625rem; }
  
  .mobile-client-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 5px 7px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    width: 100%;
    text-align: left;
  }
  .mobile-client-btn:hover { background: rgba(255,255,255,0.08); }
  
  .mobile-client-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 0.625rem;
    flex-shrink: 0;
  }
  .mobile-client-dot-blue { background: rgba(51,102,255,0.2); color: var(--blue-400); }
  .mobile-client-dot-amber { background: rgba(245,158,11,0.2); color: var(--amber-400); }
  
  .mobile-client-text { flex: 1; min-width: 0; }
  .mobile-client-name {
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--slate-200);
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
  }
  .mobile-client-id {
    font-size: 0.5rem;
    color: var(--slate-500);
    font-family: var(--font-mono);
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
  }
  
  .mobile-price-btns { display: flex; gap: 4px; }
  
  .mobile-price-btn {
    flex: 1;
    padding: 5px 2px;
    font-size: 0.5625rem;
    font-weight: 700;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--slate-400);
    transition: all 0.2s;
  }
  .mobile-price-btn[data-active="true"] {
    background: rgba(51,102,255,0.2);
    border-color: var(--brand-500);
    color: var(--brand-400);
  }
  
  .mobile-discount-row {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 4px 6px;
    height: 30px;
  }
  .mobile-discount-row input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--slate-200);
    text-align: center;
    width: 100%;
  }
  .mobile-discount-type {
    font-size: 0.625rem;
    color: var(--slate-400);
    font-family: var(--font-mono);
    background: none;
    border: none;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s;
  }
  .mobile-discount-type:hover { color: var(--brand-400); }
  
  .mobile-facturar-wrap {
    padding: 8px 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  
  .mobile-facturar-btn {
    width: 100%;
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 0.9375rem;
    font-weight: 700;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px;
    box-shadow: 0 4px 20px rgba(16,185,129,0.25);
    transition: background 0.2s, transform 0.15s;
    border: none;
    letter-spacing: 0.01em;
  }
  .mobile-facturar-btn:active { transform: scale(0.98); }
  .mobile-facturar-btn i { font-size: 1.125rem; }
  
  .mobile-total-badge {
    background: rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    margin-left: auto;
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     10. MODALES
  ═══════════════════════════════════════════════════════════════════════════════ */
  
  /* Overlay base */
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .modal-overlay.active { 
    opacity: 1; 
    pointer-events: all; 
  }
  
  .modal-sheet {
    width: 100%;
    max-height: 87vh;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
  }
  .modal-overlay.active .modal-sheet { transform: translateY(0); }
  
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
  }
  .modal-header-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: #fff;
    display: flex; 
    align-items: center; 
    gap: 8px;
  }
  .modal-header-sub {
    font-size: 0.75rem;
    color: var(--slate-500);
    margin-top: 2px;
  }
  .modal-close-btn {
    width: 40px; height: 40px;
    border-radius: 12px;
    font-size: 1.125rem;
  }
  
  .modal-body { 
    padding: 24px; 
    overflow-y: auto; 
    /* min-height: 490px; */
  }
  
  .modal-footer {
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
  }
  
  /* Floating input */
  .floating-input {
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 10px;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
    margin-bottom: 10px;
    margin-top: -10px;
  }
  .floating-input:focus-within {
    border-color: var(--brand-500);
    background: rgba(51,102,255,0.1);
    box-shadow: 0 0 0 4px rgba(51,102,255,0.1);
  }
  .floating-input-inner { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
  }
  .floating-input-inner i { 
    color: var(--slate-400); 
    font-size: 1.125rem; 
  }
  .floating-input-inner input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.875rem;
    width: 100%;
    color: var(--slate-200);
    font-family: var(--font-sans);
  }
  .floating-input-inner input::placeholder { color: var(--slate-500); }
  
  /* ─── Modal de Clientes ─── */
  .client-option {
    border-radius: 12px;
    padding: 12px;
    display: flex; 
    align-items: center; 
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    border: 1px solid transparent;
    margin-bottom: 8px;
  }
  .client-option:hover { background: rgba(51,102,255,0.1); }
  .client-option.selected {
    background: rgba(51,102,255,0.2);
    border-color: var(--brand-500);
  }
  
  .client-option-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0;
  }
  .client-option-avatar-blue { 
    background: linear-gradient(135deg, rgba(51,102,255,0.2), rgba(6,182,212,0.2)); 
    color: var(--blue-400); 
  }
  .client-option-avatar-amber { 
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(249,115,22,0.2)); 
    color: var(--amber-400); 
  }
  
  .client-option-info { flex: 1; min-width: 0; }
  .client-option-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--slate-200);
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
  }
  .client-option-id {
    font-size: 0.75rem;
    color: var(--slate-500);
    font-family: var(--font-mono);
  }
  
  .check-icon { 
    color: var(--brand-400); 
    display: none; 
  }
  .check-icon.visible { display: block; }
  
  .clients-list { max-height: 384px; overflow-y: auto; }
  
  /* ─── Modal de Menú ─── */
  .menu-title {
    font-weight: 700;
    color: #fff;
    font-size: 1.125rem;
    letter-spacing: 0.1em;
  }
  .menu-body { padding: 24px; overflow-y: auto; }
  .menu-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
  }
  .menu-item {
    width: 100%;
    text-align: left;
    padding: 16px;
    border-radius: 12px;
    display: flex; 
    align-items: center; 
    gap: 12px;
    transition: background 0.2s;
    margin-bottom: 8px;
    color: var(--slate-200);
    font-size: 0.9375rem;
  }
  .menu-item:hover { background: rgba(255,255,255,0.05); }
  .menu-item i { 
    color: var(--brand-400); 
    font-size: 1.25rem; 
  }
  
  /* ─── Modal de Pago ─── */
  .payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }
  
  .payment-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: var(--slate-400);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s;
    font-family: var(--font-sans);
  }
  .payment-option:hover { 
    background: rgba(255,255,255,0.08); 
    color: var(--slate-200); 
  }
  .payment-option:active { transform: scale(0.95); }
  .payment-option.selected {
    background: rgba(51,102,255,0.2);
    border-color: rgba(51,102,255,0.5);
    color: var(--brand-400);
  }
  .payment-option.selected::after {
    content: '✓';
    position: absolute; 
    top: 4px; right: 4px;
    width: 18px; height: 18px;
    background: var(--brand-500);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-weight: bold;
  }
  
  .payment-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 1.125rem;
  }
  .payment-icon-green { 
    background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(5,150,105,0.2)); 
    color: #34d399; 
  }
  .payment-icon-purple { 
    background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(109,40,217,0.2)); 
    color: #c084fc; 
  }
  .payment-icon-blue { 
    background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(37,99,235,0.2)); 
    color: var(--blue-400); 
  }
  .payment-icon-amber { 
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(234,88,12,0.2)); 
    color: var(--amber-400); 
  }
  
  .payment-option-label { 
    font-size: 0.75rem; 
    font-weight: 600; 
    color: var(--slate-200); 
    line-height: 1.2; 
  }
  .payment-option-sub { 
    font-size: 0.625rem; 
    color: var(--slate-500); 
  }
  
  .payment-summary {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 16px;
  }
  .payment-summary span:first-child { color: var(--slate-400); }
  
  .payment-total-value {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--slate-100);
  }
  
  .observacion-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    display: flex; 
    align-items: center; 
    gap: 6px;
  }
  .observacion-label i { color: var(--brand-400); }
  
  textarea {
    width: 100%;
    padding: 8px;
    font-size: 0.75rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--slate-200);
    resize: none;
    font-family: var(--font-sans);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }
  textarea:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 1px var(--brand-500);
  }
  textarea::placeholder { color: var(--slate-600); }
  
  .confirm-btn {
    width: 100%;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 1rem;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px;
    box-shadow: 0 8px 30px rgba(16,185,129,0.2);
  }
  .confirm-btn i { font-size: 1.25rem; }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     11. COLA DE FACTURAS
  ═══════════════════════════════════════════════════════════════════════════════ */
  .cola-stats-bar {
    display: flex;
    gap: 16px;
    padding: 16px 15px;
    background: linear-gradient(135deg, rgba(59,130,246,0.05) 0%, rgba(147,51,234,0.05) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  
  .stat-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
  }
  .stat-item.pending { 
    border-color: rgba(245,158,11,0.3); 
    background: rgba(245,158,11,0.05); 
  }
  .stat-item.error { 
    border-color: rgba(239,68,68,0.3); 
    background: rgba(239,68,68,0.05); 
  }
  .stat-item.success { 
    border-color: rgba(34,197,94,0.3); 
    background: rgba(34,197,94,0.05); 
  }
  
  .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--slate-200);
    line-height: 1;
  }
  .stat-item.pending .stat-value { color: #f59e0b; }
  .stat-item.error .stat-value { color: #ef4444; }
  .stat-item.success .stat-value { color: #22c55e; }
  
  .stat-label {
    font-size: 11px;
    color: var(--slate-400);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  /* Toolbar */
  .cola-toolbar {
    display: flex;
    gap: 12px;
    padding: 16px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    align-items: center;
    flex-wrap: wrap;
  }
  
  .cola-filters { display: flex; gap: 8px; }
  
  .filter-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--slate-400);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .filter-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--slate-200);
  }
  .filter-btn.active {
    background: rgba(59,130,246,0.2);
    border-color: rgba(59,130,246,0.4);
    color: #60a5fa;
  }
  
  /* Connection Badge */
  .connection-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .connection-badge.online {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.3);
  }
  .connection-badge.offline {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3);
  }
  
  /* Facturas List */
  .facturas-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }
  
  .factura-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s;
  }
  .factura-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
  }
  
  .factura-status {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
  }
  .status-pendiente { background: rgba(245,158,11,0.15); color: #f59e0b; }
  .status-error { background: rgba(239,68,68,0.15); color: #ef4444; }
  .status-enviado { background: rgba(34,197,94,0.15); color: #22c55e; }
  
  .factura-info { flex: 1; min-width: 0; }
  
  .factura-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }
  
  .factura-id {
    font-size: 12px;
    color: var(--slate-500);
    font-family: monospace;
  }
  
  .factura-cliente {
    font-weight: 600;
    color: var(--slate-200);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .factura-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--slate-400);
  }
  .factura-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .factura-monto {
    text-align: right;
    min-width: 120px;
  }
  
  .factura-total {
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-200);
  }
  
  .factura-productos {
    font-size: 12px;
    color: var(--slate-500);
  }
  
  .factura-actions { display: flex; gap: 8px; }
  
  /* Footer Info */
  .modal-footer-info {
    display: flex;
    gap: 24px;
    padding: 12px 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.2);
    font-size: 12px;
    color: var(--slate-500);
  }
  
  .info-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  /* Animations */
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .sending .factura-status { animation: pulse 1.5s infinite; }
  
  /* Empty State */
  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--slate-500);
  }
  .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
  }
  .empty-state h4 {
    color: var(--slate-300);
    margin-bottom: 8px;
  }
  /* ═══════════════════════════════════════════════════════════════════════════════
   11.5 PAYMENT INPUTS (Inputs dinámicos de métodos de pago)
═══════════════════════════════════════════════════════════════════════════════ */

/* Contenedor wrapper */
.payment-inputs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }
  
  /* Cada grupo de input de pago */
  .payment-input-group {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s;
  }
  
  /* Indicador lateral de color por método */
  .payment-input-group:has(.efectivo)::before { background: var(--emerald-500); }
  .payment-input-group:has(.sinpe)::before { background: var(--purple-400); }
  .payment-input-group:has(.tarjeta)::before { background: var(--blue-400); }
  .payment-input-group:has(.transferencia)::before { background: var(--amber-400); }
  
  .payment-input-group::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
  }
  
  /* Icono del método */
  .payment-input-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
  }
  
  /* Colores de fondo por método */
  .payment-input-icon.efectivo { 
    background: rgba(16,185,129,0.15); 
    color: var(--emerald-400); 
  }
  .payment-input-icon.sinpe { 
    background: rgba(192,132,252,0.15); 
    color: var(--purple-400); 
  }
  .payment-input-icon.tarjeta { 
    background: rgba(96,165,250,0.15); 
    color: var(--blue-400); 
  }
  .payment-input-icon.transferencia { 
    background: rgba(251,191,36,0.15); 
    color: var(--amber-400); 
  }
  
  /* Label del método */
  .payment-input-label {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--slate-200);
  }
  
  /* Input de monto */
  .payment-amount-input {
    width: 120px;
    padding: 3px 12px;
    background: rgba(15,23,42,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    font-size: 0.9575rem;
    font-family: var(--font-mono);
    color: var(--slate-200);
    text-align: right;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  
  .payment-amount-input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 2px rgba(51,102,255,0.1);
  }
  
  .payment-amount-input::placeholder {
    color: var(--slate-600);
  }
  
  /* Indicador de diferencia */
  .payment-difference {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 8px;
    margin-bottom: 16px;
    animation: pulse 2s infinite;
  }
  
  .payment-difference.hidden { display: none; }
  
  .payment-difference.exact {
    background: rgba(16,185,129,0.1);
    border-color: rgba(16,185,129,0.2);
    animation: none;
  }
  
  .difference-label {
    font-size: 0.875rem;
    color: var(--amber-400);
    font-weight: 500;
  }
  
  .payment-difference.exact .difference-label {
    color: var(--emerald-400);
  }
  
  .difference-value {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 500;
    color: var(--amber-400);
  }
  
  .payment-difference.exact .difference-value {
    color: var(--emerald-400);
  }
  
  /* Animación */
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     12. RESPONSIVE - DESKTOP (≥ 1024px)
  ═══════════════════════════════════════════════════════════════════════════════ */
  @media (min-width: 1024px) {
    /* Layout */
    .app-layout {
      grid-template-columns: 1fr 400px;
      grid-template-rows: auto 1fr;
    }
    
    .desktop-header { 
      grid-column: 1 / -1; 
      padding: 12px 24px; 
    }
    
    .main-content { 
      grid-column: 1; 
      grid-row: 2; 
      border-right: 1px solid rgba(255,255,255,0.05); 
    }
    
    .side-panel { 
      grid-column: 2; 
      grid-row: 2; 
      display: flex; 
    }
    
    /* Search */
    .search-wrapper { padding: 12px; }
    .search-shortcut { display: block; }
    
    /* Table */
    .table-header { display: grid; }
    
    /* Cart items - Grid layout */
    .cart-item {
      margin: 0;
      border: none;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      border-radius: 0;
      background: transparent;
      padding: 0;
      box-shadow: none;
      display: grid;
      grid-template-columns: minmax(120px, 1fr) 85px 65px 120px 80px 48px;
      gap: 20px;
      padding: 12px 24px;
      align-items: center;
      transition: background 0.15s;
      margin-bottom: 0;
    }
    .cart-item:hover { background: rgba(51,102,255,0.04); }
    .cart-item:last-child { border-bottom: none; }
    
    .cart-item-name { font-size: 0.9375rem; }
    
    /* Mostrar código en desktop */
    .cart-item-code-desktop {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.875rem;
      color: var(--slate-500);
    }
    
    /* Ocultar elementos móvil en desktop */
    .cart-item-top { margin-bottom: 0; }
    .cart-item-delete-mobile { display: none; }
    .cart-item-fields { display: contents; }
    
    .cart-field { 
      flex-direction: row; 
      align-items: center; 
    }
    .cart-field-label { display: none; }
    
    /* Alineaciones específicas */
    .cart-field-qty { justify-content: center; }
    .cart-field-price { 
      justify-content: flex-end; 
      margin-right: 10px; 
    }
    .cart-field-desc { justify-content: center; }
    
    .cart-subtotal-row {
      padding-top: 0;
      border-top: none;
      justify-content: flex-end;
      grid-column: auto;
    }
    .cart-subtotal-label { display: none; }
    .cart-subtotal-value {
      font-size: 0.875rem;
      color: var(--slate-200);
      font-weight: 500;
    }
    
    /* Botón eliminar desktop */
    .cart-item-delete-desktop {
      display: flex !important;
      justify-content: center;
    }
    
    /* Side panel */
    .clients-section { padding: 16px; }
    .clients-grid { 
      grid-template-columns: 1fr; 
      gap: 12px; 
    }
    .client-col-label button { font-size: 0.75rem; }
    .client-avatar { 
      width: 32px; 
      height: 32px; 
      font-size: 0.875rem; 
    }
    .client-name { font-size: 0.875rem; width: auto;}
    .client-id { font-size: 0.75rem; }
    .client-tag { padding: 8px; }
    
    .panel-body { padding: 16px; }
    .panel-controls-grid { grid-template-columns: 1fr; margin-bottom: 16px;}
    .control-label { font-size: 0.75rem; }
    .price-btn { 
      font-size: 0.875rem; 
      padding: 8px 4px; 
    }
    .discount-row { padding: 7px 8px; }
    .summary-section { display: block; }
    
    /* Facturar button */
    .facturar-btn { 
      padding: 16px 24px; 
      font-size: 1rem; 
    }
    .facturar-badge { display: none; }
    .facturar-badge-md { display: inline; }
    
    .panel-action { padding: 16px; }
    
    /* Mobile bottom bar hidden */
    .mobile-bottom-bar { display: none !important; }
    
    /* Modales */
    .modal-overlay { 
      align-items: center; 
      padding: 20px; 
    }
    .modal-sheet {
      width: 600px;
      max-width: 95vw;
      border-radius: 20px;
      max-height: 85vh;
      transform: translateY(20px) scale(0.95);
    }
    .modal-overlay.active .modal-sheet { 
      transform: translateY(0) scale(1); 
    }
    
    .modal-header { padding: 20px 24px; }
    .payment-grid { 
      gap: 12px; 
      margin-bottom: 10px; 
    }
    .payment-option { 
      gap: 12px; 
      padding: 12px; 
      border-radius: 12px; 
    }
    /* .payment-summary { 
      padding: 16px; 
      margin-bottom: 20px; 
      font-size: 0.875rem; 
    } */
    .payment-total-value { font-size: 1.5rem; }
    .observacion-label { 
      font-size: 0.75rem; 
      margin-bottom: 8px; 
    }
    textarea { 
      font-size: 0.875rem; 
      padding: 8px; 
    }
    .confirm-btn { padding: 12px 24px; }
    .modal-footer { padding: 12px 20px; }
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     13. RESPONSIVE - TABLET/MOBILE SPECIFIC (< 1024px)
  ═══════════════════════════════════════════════════════════════════════════════ */
  @media (max-width: 1023px) {
    .summary-section { display: none; }
    .discount-row { width: 100%; }
  }
  
  /* ═══════════════════════════════════════════════════════════════════════════════
     14. RESPONSIVE - MOBILE SPECIFIC (< 768px)
  ═══════════════════════════════════════════════════════════════════════════════ */
  @media (max-width: 768px) {
    .cola-toolbar {
      flex-direction: column;
      align-items: stretch;
    }
    
    .cola-filters {
      overflow-x: auto;
      padding-bottom: 4px;
    }
    
    .factura-item { flex-wrap: wrap; }
    
    .factura-monto {
      width: 100%;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }