/* ---------- REGISTER PANEL ---------- */
  .register{ background:var(--color-bg-secondary); padding:var(--space-5) var(--space-5) var(--space-6); display:flex; flex-direction:column; gap:var(--space-4); min-width:0; border:1px solid var(--color-border); border-radius:var(--radius-lg); }
  .led-row{ display:flex; gap:10px; }
  .led-box{ flex:1; min-width:0; }
  .led-display{
    background:#140D08; border-radius:8px; padding:12px 12px;
    box-shadow:inset 0 2px 6px rgba(0,0,0,0.5);
    font-family:var(--font-mono); font-weight:700; font-size:24px; letter-spacing:0.04em;
    text-align:right; color:var(--led);
    text-shadow:0 0 6px rgba(232,89,12,0.35), 0 0 2px rgba(232,89,12,0.5);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .led-display-total{
    color:#3CFF7A; text-shadow:0 0 6px rgba(60,255,122,0.35), 0 0 2px rgba(60,255,122,0.5);
  }
  .led-label{
    font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em;
    color:var(--color-text-muted); text-transform:uppercase; margin:-10px 0 0 2px;
  }
  @media (max-width:480px){
    .led-row{ flex-direction:column; }
    .led-display{ font-size:18px; padding:10px 12px; }
  }

  .catalog-section{ display:flex; flex-direction:column; gap:8px; }
  .catalog-label{
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-text-muted); font-weight:600;
  }
  .catalog-search{
    background:transparent; border:none; border-radius:var(--radius-md);
    padding:0; color:var(--paper-ink); font-family:var(--font-ui); font-size:14px; outline:none;
    flex:1; min-width:0; height:100%;
  }
  .catalog-search:focus{ box-shadow:none; }
  .catalog-search::placeholder{ color:var(--color-text-placeholder); }
  .catalog-search-row{ display:flex; gap:8px; flex-shrink:0; }
.search-field{
    flex:1; min-width:0; display:flex; align-items:center; gap:var(--space-2);
    background:var(--color-surface-hover); border:1px solid var(--color-border); border-radius:var(--radius-md);
    padding:0 var(--space-3); min-height:var(--control-h-lg); transition:border-color var(--transition-normal), box-shadow var(--transition-normal);
  }
  .search-field:focus-within{ border-color:var(--color-electric-blue); box-shadow:var(--ring-focus); }
  .search-field-icon{ font-size:18px; color:var(--color-text-muted); flex-shrink:0; }
  .scan-btn{
    background:var(--color-success); color:#000; border:none; border-radius:var(--radius-md);
    width:48px; min-height:var(--control-h-lg); flex-shrink:0; font-size:18px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition:opacity var(--transition-normal), transform var(--transition-fast);
  }
  .scan-btn:hover{ opacity: 0.85; }
  .scan-btn:active{ transform: translateY(1px); }
  .scan-btn:disabled{ opacity:0.45; cursor:not-allowed; }
  .category-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .category-chip{
    background:var(--color-surface-hover); color:var(--color-text-primary); border:1px solid var(--color-border);
    border-radius:var(--radius-pill); padding:var(--space-1) var(--space-3); min-height:var(--control-h-sm);
    font-family:var(--font-mono);
    font-size:var(--font-xs); letter-spacing:0.04em; cursor:pointer;
    display:inline-flex; align-items:center; gap:var(--space-1);
    transition:border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
  }
  .category-chip:hover{ border-color:var(--color-electric-blue); background:var(--color-surface); }
  .category-chip:disabled{ opacity:0.45; cursor:not-allowed; }
  .category-chip.active{ background:var(--color-success); border-color:var(--color-success); color:#000; }

  /* fichas de pendientes: puntos de color en lugar de iconos */
  .pend-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; flex:none; }
  .pend-dot.red{ background:var(--color-error); }
  .pend-dot.amber{ background:var(--color-warning); }
  .chip-stock{
    font-family:var(--font-mono); font-size:var(--font-xs); padding:1px 6px; border-radius:var(--radius-sm);
    margin-left:6px; background:var(--color-surface-hover); color:var(--color-text-muted); display:inline-block;
  }
  .chip-stock.low{ background:var(--color-error-bg); color:var(--color-error); }
  .chip-stock.zero{ background:var(--color-error); color:#fff; }
  .barcode-reader{
    width:100%; min-height:220px; background:#111; border-radius:var(--radius-md); overflow:hidden;
  }
  .barcode-reader video{ width:100%; }
  .scan-status{
    font-family:var(--font-mono); font-size:11.5px; color:var(--paper-fade);
    text-align:center; margin-top:10px;
  }
  .catalog-empty{
    font-family:var(--font-mono); font-size:11px; color:var(--color-text-muted); line-height:1.5;
  }
  .catalog-count{
    font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em;
    color:var(--paper-fade); margin-top:8px;
  }
  .catalog-scroll-area{
    max-height:360px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
  }
  .catalog-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .catalog-chip{
    display:flex; align-items:stretch; background:var(--warm-card);
    border:1px solid var(--paper-line); border-radius:var(--radius-md); overflow:hidden;
  }
.chip-add{
    background:none; border:none; color:var(--color-text-primary); padding:7px 10px;
    display:flex; flex-direction:column; align-items:flex-start; cursor:pointer; gap:2px;
  }
    .chip-add:hover{ background:var(--color-info-bg); }
  .chip-name{ font-family:var(--font-ui); font-size:var(--font-sm); font-weight:600; }
  .chip-price{ font-family:var(--font-mono); font-size:var(--font-sm); color:var(--color-success); }
  .chip-edit{
    background:none; border:none; border-left:1px solid var(--color-border); color:var(--color-text-muted);
    font-size:var(--font-sm); min-width:44px; min-height:var(--control-h-md); padding:0 10px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background var(--transition-normal), color var(--transition-normal);
  }
  .chip-edit:hover{ color:#fff; background:var(--color-electric-blue); }
  .chip-restock{
    background:none; border:none; border-left:1px solid var(--color-border); color:var(--color-text-muted);
    font-size:var(--font-sm); min-width:44px; min-height:var(--control-h-md); padding:0 10px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background var(--transition-normal), color var(--transition-normal);
  }
  .chip-restock:hover{ color:#fff; background:var(--color-purple); }
  .chip-del{
    background:none; border:none; border-left:1px solid var(--color-border); color:var(--color-text-muted);
    font-size:var(--font-sm); min-width:44px; min-height:var(--control-h-md); padding:0 10px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background var(--transition-normal), color var(--transition-normal);
  }
  .chip-del:hover{ color:#fff; background:var(--color-error); }
  #productPageList{
    display:grid; gap:10px;
  }
  @media (min-width:641px) and (max-width:980px){
    #productPageList{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (min-width:981px){
    #productPageList{ grid-template-columns:repeat(3, 1fr); }
  }
  .load-more-btn{
    grid-column:1 / -1; justify-self:center;
    background:var(--color-bg-secondary); color:var(--color-text-primary); border:1px solid var(--color-border);
    border-radius:var(--radius-md); min-height:var(--control-h-md); padding:10px 20px;
    font-family:var(--font-mono); font-weight:700; font-size:var(--font-sm);
    letter-spacing:0.06em; cursor:pointer;
    transition:background var(--transition-normal), border-color var(--transition-normal);
  }
  .load-more-btn:hover{ background:var(--color-surface-hover); border-color:var(--color-electric-blue); }
  .load-more-btn:disabled{ opacity:0.45; cursor:not-allowed; }

  /* ---- Vistas Todos / Pendientes / Completados (página Productos) ---- */
  .view-tabs{
    display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3);
  }
  .view-tab{
    background:var(--color-surface-hover); color:var(--color-text-primary);
    border:1px solid var(--color-border); border-radius:var(--radius-pill);
    padding:var(--space-1) var(--space-3); min-height:38px;
    font-family:var(--font-mono); font-size:var(--font-xs); letter-spacing:0.04em;
    cursor:pointer;
    transition:border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
  }
  .view-tab:hover{ border-color:var(--color-electric-blue); background:var(--color-surface); }
  .view-tab:disabled{ opacity:0.45; cursor:not-allowed; }
  .view-tab.active{ background:var(--color-electric-blue); color:#fff; border-color:var(--color-electric-blue); }
  .pendientes-resumen{
    font-family:var(--font-mono); font-size:var(--font-xs);
    color:var(--color-text-muted); margin-top:var(--space-2); display:flex; gap:var(--space-3); flex-wrap:wrap;
  }
  .pend-badge{
    display:inline-flex; align-items:center; gap:var(--space-1);
    font-family:var(--font-mono); font-size:var(--font-xs);
    padding:1px var(--space-2); border-radius:var(--radius-pill); margin-left:var(--space-1);
    background:var(--color-error-bg); color:var(--color-error); white-space:nowrap;
  }
  .pend-badge.amber{ background:var(--color-warning-bg); color:var(--color-warning); }
  .pend-badge.red{ background:var(--color-error-bg); color:var(--color-error); }
  .chip-pend-row{
    width:100%; padding:0 10px 6px; display:flex; flex-wrap:wrap; gap:4px;
  }

  .type-tabs{ display:flex; gap:var(--space-2); }
  .type-tab{
    flex:1; background:var(--color-surface-hover); border:1px solid var(--color-border); color:var(--color-text-muted);
    border-radius:var(--radius-md); padding:var(--space-2) var(--space-2); font-family:var(--font-mono); font-size:var(--font-xs);
    letter-spacing:0.04em; cursor:pointer; text-align:center;
    display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
    transition:border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
  }
  .type-tab:hover{ background:var(--color-info-bg); border-color:var(--color-electric-blue); color:var(--color-text-primary); }
  .type-tab:disabled{ opacity:0.45; cursor:not-allowed; }
  .type-tab.active{ background:var(--color-success); border-color:var(--color-success); color:#000; }

form#prodForm, form#quickForm{ display:flex; flex-direction:column; gap:var(--space-3); }
  .field{ display:flex; flex-direction:column; gap:var(--space-1); }
  .cost-hint{ font-family:var(--font-ui); font-size:var(--font-xs); color:var(--color-text-muted); }
  .field select{
    padding:var(--space-2) var(--space-2); border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-surface-hover);
    color:var(--color-text-primary); font-family:var(--font-ui); font-size:var(--font-sm);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-10);
  }
  .products-page-title{
    font-family:var(--font-mono); font-weight:700; font-size:var(--font-md); letter-spacing:0.04em;
    color:var(--color-text-primary); margin:0;
  }
  .field select:focus{ outline:none; border-color:var(--color-electric-blue); box-shadow:var(--ring-focus); }
  .field input[type=text]#prodCategoryNew, .field input[type=text]#editProdCategoryNew{ margin-top:6px; }
  .field label{
    font-size:var(--font-xs); letter-spacing:0.06em; text-transform:uppercase;
    color:var(--color-text-muted); font-weight:600;
  }
  .field input, .field select{
    background:var(--color-surface-hover); border:1px solid var(--color-border); border-radius:var(--radius-sm);
    padding:var(--space-2) var(--space-2); color:var(--color-text-primary); font-family:var(--font-ui); font-size:var(--font-base); outline:none;
    transition:border-color var(--transition-normal), box-shadow var(--transition-normal);
    min-height: var(--control-h-md);
  }
  .field input:focus, .field select:focus{ border-color:var(--color-electric-blue); box-shadow:var(--ring-focus); }
  .field input:disabled, .field select:disabled{ opacity:0.55; cursor:not-allowed; }
  .row2{ display:grid; grid-template-columns:1fr 78px; gap:var(--space-3); min-width:0; }
  .row2 .field{ min-width:0; }
  @media (max-width:400px){
    .row2{ grid-template-columns:1fr; }
  }
  .price-with-unit{ display:flex; gap:var(--space-2); }
  .price-with-unit input{ flex:1; min-width:0; }
  .price-with-unit select{ width:64px; padding:var(--space-2) var(--space-1); font-family:var(--font-mono); font-size:var(--font-xs); flex-shrink:0; }
  .save-catalog-row{
    display:flex; align-items:center; gap:var(--space-2); font-size:var(--font-xs); color:var(--color-text-muted); font-family:var(--font-ui);
  }
  .save-catalog-row input[type=checkbox]{ accent-color:var(--color-success); width:14px; height:14px; }
  .key{
    border:none; border-radius:var(--radius-md); padding:var(--space-2) var(--space-4); font-family:var(--font-mono);
    font-weight:700; font-size:var(--font-sm); letter-spacing:0.1em; cursor:pointer; color:#fff;
    min-height:var(--control-h-md);
    display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition-fast), filter var(--transition-normal), box-shadow var(--transition-normal);
  }
  .key:active{ transform:translateY(1px); }
  .key:disabled{ opacity:0.45; cursor:not-allowed; box-shadow:none; filter:grayscale(0.2); }
  .key-add{ background:var(--color-success); }
  .key-add:hover:not(:disabled){ opacity: 0.85; }
  .key-add:focus-visible{ box-shadow:var(--ring-focus); }
  .key-clear{ background:var(--color-error); }
  .key-clear:hover:not(:disabled){ opacity: 0.85; }
  .key-clear:focus-visible{ box-shadow:var(--ring-error); }
  .settings{
    display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-2);
    margin-top:var(--space-1); padding-top:var(--space-3); border-top:1px dashed var(--color-border);
  }
  .settings .field{ width:70px; }
  .settings .field input{ text-align:center; }

  /* ---------- D2.4 móvil: panel de agregar productos ---------- */
  .mobile-catalog-toggle{ display:none; }
  .mobile-catalog-close{ display:none; }
  .mobile-panel-head{ display:none; }
  .mobile-register-panel{ display:flex; flex-direction:column; gap:var(--space-4); flex:1; min-height:0; }

  @media (max-width:980px){
    .layout > .catalog-search-row{
      order:1; margin:var(--space-2) var(--space-1) 0;
    }
    .layout > .catalog-search-row .search-field{ min-height:var(--control-h-lg); }
    .layout > .catalog-search-row .catalog-search{ font-size:var(--font-base); }
    .layout > .catalog-search-row .scan-btn{ min-height:var(--control-h-lg); width:48px; font-size:18px; }
    .layout > .receipt{ order:2; }
    .layout > .mobile-catalog-toggle{ order:3; display:block; }
    .layout > .register{ order:4; display:none; }
    .layout > .register.register-open{ display:flex; }

    .mobile-catalog-toggle{
      width:100%; min-height:var(--control-h-lg); padding:var(--space-3) var(--space-4); margin:0;
      background:var(--color-surface); color:var(--color-success); border:2px solid var(--color-success); border-radius:var(--radius-md);
      font-family:var(--font-mono); font-weight:700; font-size:var(--font-sm); letter-spacing:0.08em;
      cursor:pointer; text-align:center;
    }
    .mobile-catalog-close{
      display:block; width:100%; min-height:var(--control-h-md); padding:var(--space-2) var(--space-4); margin-top:var(--space-2);
      background:var(--color-bg-secondary); color:var(--color-text-primary); border:none; border-radius:var(--radius-md);
      font-family:var(--font-mono); font-weight:700; font-size:var(--font-sm); letter-spacing:0.08em;
      cursor:pointer; text-align:center;
    }
    .mobile-panel-head{
      display:block; font-family:var(--font-mono); font-weight:700;
      font-size:var(--font-xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--color-text-muted);
      margin:0 0 -4px;
    }
    .layout > .register #quickForm{
      border-top:1px dashed var(--color-border); padding-top:var(--space-3); margin-top:var(--space-1);
    }
    .layout > .register .settings{ padding-top:var(--space-3); margin-top:var(--space-1); }
    .layout > .register .settings .field{ width:64px; }
    .layout > .register .settings .field label{ font-size:var(--font-xs); }
.layout > .register .settings .field input{ font-size:var(--font-sm); padding:var(--space-1) var(--space-2); }
  }

  @media (max-width:480px){
    .layout > .register .led-row{ flex-direction:row; }
    .layout > .register .led-display{ font-size:15px; padding:8px 10px; }
    .layout > .register .led-label{ font-size:9px; margin-top:-8px; }
    .layout > .register .search-field{ min-height:var(--control-h-lg); }
    .layout > .register .scan-btn{ min-height:var(--control-h-lg); width:48px; }
    .layout > .register .category-chip{ min-height:var(--control-h-md); }
  }

  @media (min-width:981px){
    .mobile-catalog-toggle{ display:none !important; }
    .mobile-catalog-close{ display:none !important; }
    .layout > .register{ display:flex; }
  }

  /* ---------- D3.1 accesibilidad móvil + legibilidad (Productos) ---------- */
  #productPageCategoryChips .category-chip{ min-height:var(--control-h-md); }
  #prodScanBtn{ width:44px; min-width:44px; min-height:var(--control-h-md); }
  .chip-edit, .chip-restock, .chip-del{ min-width:44px; min-height:var(--control-h-md); }
  .chip-stock{ font-size:var(--font-sm); padding:2px 7px; }

  /* ---------- D3.3 jerarquía visual del formulario de productos ---------- */
  .product-form-section{ display:flex; flex-direction:column; gap:var(--space-3); }
  .product-extra-section{
    padding-top:var(--space-3); margin-top:var(--space-1); border-top:1px dashed var(--color-border);
  }
  .product-form-section-title{
    font-family:var(--font-mono); font-size:var(--font-xs); letter-spacing:0.1em;
    text-transform:uppercase; color:var(--color-text-muted); font-weight:700; margin:0;
  }
  /* ---------- D3.4 action-bar fija del formulario de productos ---------- */
  .products-action-bar{
    padding:var(--space-3) var(--space-5) var(--space-4); border-top:1px solid var(--color-border);
    background:var(--color-bg-secondary);
  }
  .products-save-btn{ width:100%; min-height:46px; }
  .products-form-msg{ margin-top:var(--space-2); text-align:center; }
  @media (min-width:981px){
    /* La página Productos es una columna que scrollea en el body. La
       action-bar se fija al fondo del área de trabajo (a la derecha del
       sidebar de 236px) para que "Guardar producto" quede siempre a la
       vista sin desplazarse hasta el final del formulario. */
    .products-action-bar{
      position:fixed; left:236px; right:0; bottom:0; z-index:5;
      box-shadow:0 -10px 22px rgba(0,0,0,0.14);
    }
    body:has(#pageProductos:not([hidden])) #pageProductos{ padding-bottom:96px; }
  }
  @media (max-width:980px){
    .products-action-bar{
      position:fixed; left:0; right:0;
      bottom:calc(84px + env(safe-area-inset-bottom)); z-index:5;
      box-shadow:0 -10px 22px rgba(0,0,0,0.18);
      padding-bottom:8px;
    }
    body:has(#pageProductos:not([hidden])) #pageProductos{ padding-bottom:150px; }
  }

  /* ---------- D3.4 acciones de gestión agrupadas (⋯) ---------- */
  .catalog-chip{ flex-wrap:wrap; }
  .chip-add{ flex:1 1 auto; min-width:0; }
  .chip-actions-toggle{
    width:44px; min-width:44px; min-height:var(--control-h-md); flex-shrink:0;
    background:none; border:none; border-left:1px solid var(--color-border);
    color:var(--color-text-muted); font-size:18px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background var(--transition-normal), color var(--transition-normal);
  }
  .chip-actions-toggle:hover,
  .chip-actions-toggle[aria-expanded="true"]{ background:var(--color-bg-secondary); color:var(--color-text-primary); }
  .chip-actions{
    flex:1 1 100%; display:none; gap:var(--space-2); padding:var(--space-2);
    border-top:1px dashed var(--color-border);
  }
  .catalog-chip.actions-open .chip-actions{ display:flex; }
  .chip-actions .chip-edit, .chip-actions .chip-restock, .chip-actions .chip-del{
    flex:1; border:none; border-radius:var(--radius-sm); min-width:44px; min-height:var(--control-h-md);
  }

/* ============================================================
     UX/3 — CAJA: REDISEÑO COMPLETO
     Prioridad: azul eléctrico como principal, morado secundario,
     verde SOLO para éxito (tono sobrio), negro/grises como base.
     ============================================================ */

  /* ---------- F2: pantalla CAJA (layout general) ---------- */
  body.page-caja-active{ padding:0; background:var(--color-bg); }
  body.page-caja-active .pos{ border-radius:0; box-shadow:none; }
  @media (min-width:981px){
    body.page-caja-active .pos{ height:100vh; max-height:100vh; min-height:0; overflow:hidden; }
  }
  @media (max-width:980px){
    body.page-caja-active{ padding:0; }
    body.page-caja-active .pos{ padding-top:6px; padding-left:8px; padding-right:8px; border-radius:0; }
  }
  @media (min-width:981px){
    #pageCaja{ flex:1; min-height:0; }
    #pageCaja .layout{
      height:100%; border-radius:0;
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(420px,480px);
      grid-template-rows:auto minmax(0,1fr);
    }
    @media (min-width:1200px){
      #pageCaja .layout{ grid-template-columns:minmax(0,1fr) minmax(440px,520px); }
    }
    @media (min-width:1440px){
      #pageCaja .layout{ grid-template-columns:minmax(0,1fr) minmax(460px,560px); }
    }
    #pageCaja .layout > .catalog-search-row{
      grid-column:1; grid-row:1;
      padding:var(--space-4) var(--space-4) 0;
    }
    #pageCaja .layout > .catalog-search-row .search-field{ min-height:var(--control-h-lg); }
    #pageCaja .layout > .catalog-search-row .catalog-search{ font-size:var(--font-base); }
    #pageCaja .layout > .catalog-search-row .scan-btn{ width:48px; min-height:var(--control-h-lg); font-size:18px; }
    #pageCaja .layout > .register{
      grid-column:1; grid-row:2;
      height:100%; min-height:0; padding:var(--space-4) var(--space-4) var(--space-5);
      overflow:hidden;
    }
    #pageCaja .layout > .receipt{ grid-column:2; grid-row:1 / span 2; }
    #pageCaja .register .catalog-section{ flex:1; min-height:0; overflow:hidden; }
    #pageCaja .register .catalog-scroll-area{
      flex:1; min-height:0; max-height:none; overflow-y:auto;
      padding-right:4px;
    }
    #pageCaja .register .category-chips{
      flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px;
    }
  }

  /* ---------- F2: estado inicial del catálogo (empty state) ---------- */
  .catalog-prompt{
    grid-column:1 / -1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:var(--space-2); text-align:center; padding:var(--space-8) var(--space-6); min-height:160px;
    border:1px dashed var(--color-border); border-radius:var(--radius-lg); color:var(--color-text-muted);
    font-family:var(--font-ui);
  }
  .catalog-prompt-icon{ font-size:32px; line-height:1; color:var(--color-text-muted); }
  .catalog-prompt-title{
    font-family:var(--font-mono); font-size:var(--font-sm); font-weight:700;
    letter-spacing:0.08em; color:var(--color-text-primary); text-transform:uppercase;
  }
  .catalog-prompt-sub{ font-size:var(--font-sm); line-height:1.6; max-width:280px; }

  /* ---------- CATÁLOGO: búsqueda ---------- */
  #pageCaja .catalog-search-row{ gap:var(--space-2); }
  #pageCaja .catalog-search-row .search-field{
    box-shadow:var(--shadow-sm);
    background:var(--color-surface);
    border:1px solid var(--color-border);
    transition:border-color var(--transition-normal), box-shadow var(--transition-normal);
  }
  #pageCaja .catalog-search-row .search-field:focus-within{
    border-color:var(--color-electric-blue);
    box-shadow:var(--ring-focus), var(--shadow-sm);
  }
  #pageCaja .catalog-search-row .search-field-icon{ color:var(--color-text-muted); }
  #pageCaja .catalog-search-row .catalog-search{
    background:transparent;
    color:var(--color-text-primary);
    font-size:var(--font-base);
    padding-left:var(--space-1);
  }
  #pageCaja .catalog-search-row .catalog-search::placeholder{ color:var(--color-text-placeholder); }
  #pageCaja .catalog-search-row .scan-btn{
    background:var(--color-electric-blue);
    color:#fff;
    border:none;
    border-radius:var(--radius-md);
    width:48px; min-height:var(--control-h-lg);
    font-size:18px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background var(--transition-normal), transform var(--transition-fast);
  }
  #pageCaja .catalog-search-row .scan-btn:hover{ background:var(--color-electric-blue-light); }
  #pageCaja .catalog-search-row .scan-btn:active{ transform:translateY(1px); }
  #pageCaja .catalog-search-row .scan-btn:disabled{ opacity:0.45; cursor:not-allowed; }

  /* ---------- CATÁLOGO: label sección ---------- */
  #pageCaja .catalog-label{
    font-size:var(--font-sm); letter-spacing:0.1em; font-weight:700;
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
    padding:var(--space-1) var(--space-1) var(--space-2);
    border-bottom:1px solid var(--color-border);
    color:var(--color-text-muted);
    text-transform:uppercase;
  }

  /* ---------- CATÁLOGO: categorías (chips) ---------- */
  #pageCaja .category-chips{ gap:var(--space-2); padding-bottom:2px; }
  #pageCaja .category-chip{
    background:var(--color-surface); color:var(--color-text-primary);
    border:1px solid var(--color-border);
    border-radius:var(--radius-pill);
    padding:var(--space-1) var(--space-3); min-height:var(--control-h-sm);
    font-family:var(--font-mono);
    font-size:var(--font-xs); letter-spacing:0.04em; cursor:pointer;
    display:inline-flex; align-items:center; gap:var(--space-1);
    transition:border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
  }
  #pageCaja .category-chip:hover{
    border-color:var(--color-electric-blue);
    background:var(--color-surface-hover);
  }
  #pageCaja .category-chip:disabled{ opacity:0.45; cursor:not-allowed; }
  #pageCaja .category-chip.active{
    background:var(--color-electric-blue);
    border-color:var(--color-electric-blue);
    color:#fff;
    box-shadow:var(--shadow-sm);
  }

  /* ---------- CATÁLOGO: tarjetas de producto ---------- */
  #catalogChips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:var(--space-2); }
  #catalogChips .catalog-chip{ display:flex; flex-direction:column; }
  #catalogChips .catalog-chip{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
  }
  #catalogChips .catalog-chip:hover{
    border-color:var(--color-electric-blue);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
  }
  #catalogChips .catalog-chip:active{ transform:translateY(0); }

  /* Thumbnail area */
  #catalogChips .chip-thumb{
    width:100%; height:110px; object-fit:contain;
    background:#fff;
    border-bottom:1px solid var(--color-border);
  }
  #catalogChips .catalog-chip:not(:has(.chip-thumb)) .chip-thumb-placeholder{
    width:100%; height:110px;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    color:var(--color-text-muted);
    font-size:28px;
    border-bottom:1px solid var(--color-border);
  }

  /* Chip content */
  #catalogChips .chip-add{
    flex:1; display:flex; flex-direction:column; padding:var(--space-3);
    gap:var(--space-2); min-width:0;
  }
  #catalogChips .chip-name{
    font-family:var(--font-ui); font-size:var(--font-sm); font-weight:600;
    color:var(--color-text-primary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    line-height:1.3;
  }
  #catalogChips .chip-meta{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
    padding-top:var(--space-1);
    border-top:1px solid var(--color-border);
  }
  #catalogChips .chip-price{
    font-family:var(--font-mono); font-size:var(--font-lg); font-weight:700;
    color:var(--color-text-primary);
    white-space:nowrap;
  }

  /* Bottom row: price + add button */
  #catalogChips .chip-bottom-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--space-2); width:100%; margin-top:auto; padding-top:var(--space-2);
    border-top:1px solid var(--color-border);
  }

  #catalogChips .chip-add-mark{
    flex:none; width:36px; height:36px; border-radius:var(--radius-pill);
    background:var(--color-electric-blue);
    color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:700;
    transition:background var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
  }
  #catalogChips .chip-stock{
    font-family:var(--font-mono); font-size:var(--font-xs);
    padding:2px 6px; border-radius:var(--radius-sm);
    background:var(--color-surface-hover);
    color:var(--color-text-muted);
    white-space:nowrap;
  }
  #catalogChips .chip-stock.low{ background:var(--color-warning-bg); color:var(--color-warning); }
  #catalogChips .chip-stock.zero{ background:var(--color-error-bg); color:var(--color-error); }

  /* Add button on card */
  #catalogChips .chip-add:hover .chip-add-mark{
    background:var(--color-electric-blue-light);
    box-shadow:var(--shadow-glow-blue);
    transform:scale(1.05);
  }
  #catalogChips .chip-add:active .chip-add-mark{ transform:scale(0.98); }

  /* ---------- F4: la fila LED del registro se oculta ---------- */
  .register .led-row{ display:none; }

  /* ---------- F5: "Cargar más" ---------- */
  #catalogChips .load-more-btn{ margin-top:var(--space-3); }

  /* ---------- F6: jerarquía visual del catálogo en CAJA (mejorada) ---------- */
  #pageCaja .catalog-section{ gap:var(--space-3); }

  /* Scrollbar estilizado para catálogo */
  #pageCaja .catalog-scroll-area::-webkit-scrollbar{ width:6px; }
  #pageCaja .catalog-scroll-area::-webkit-scrollbar-track{ background:var(--color-bg); }
  #pageCaja .catalog-scroll-area::-webkit-scrollbar-thumb{
    background:var(--color-border-light); border-radius:var(--radius-pill);
  }
  #pageCaja .catalog-scroll-area::-webkit-scrollbar-thumb:hover{
    background:var(--color-text-muted);
  }

  /* ---------- RESPONSIVE: Tablet (≤980px) ---------- */
  @media (max-width:980px){
    #pageCaja .layout{
      grid-template-columns:1fr;
      grid-template-rows:auto auto 1fr;
      gap:var(--space-3);
    }
    #pageCaja .layout > .catalog-search-row{
      grid-column:1; grid-row:1;
      position:sticky; top:0; z-index:10;
      background:var(--color-surface);
      border-bottom:1px solid var(--color-border);
      padding:var(--space-3) var(--space-3) var(--space-2);
    }
    #pageCaja .layout > .register{
      grid-column:1; grid-row:2;
      height:100%; min-height:0; overflow:hidden;
    }
    #pageCaja .layout > .receipt{
      grid-column:1; grid-row:3;
      min-height:0;
    }
    #catalogChips{
      grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
      gap:var(--space-2);
    }
    #catalogChips .chip-thumb{ height:90px; }
    #catalogChips .chip-add{ padding:var(--space-2); }
    #catalogChips .chip-name{ font-size:var(--font-sm); }
    #catalogChips .chip-price{ font-size:var(--font-base); }
    #catalogChips .chip-add-mark{ width:32px; height:32px; font-size:16px; }
  }

  /* ---------- RESPONSIVE: Mobile (≤640px) ---------- */
  @media (max-width:640px){
    #pageCaja .layout > .catalog-search-row{ padding:var(--space-2) var(--space-2) var(--space-1); }
    #pageCaja .catalog-search-row .search-field{ min-height:var(--control-h-md); }
    #pageCaja .catalog-search-row .catalog-search{ font-size:var(--font-sm); }
    #pageCaja .catalog-search-row .scan-btn{ width:44px; min-height:var(--control-h-md); }
    #catalogChips{ grid-template-columns:repeat(2,1fr); gap:var(--space-1); }
    #catalogChips .chip-thumb{ height:80px; }
    #catalogChips .chip-add{ padding:var(--space-2); gap:var(--space-1); }
    #catalogChips .chip-name{ font-size:var(--font-xs); line-height:1.2; }
    #catalogChips .chip-price{ font-size:var(--font-sm); }
    #catalogChips .chip-add-mark{ width:28px; height:28px; font-size:14px; }
    #catalogChips .chip-meta{ gap:var(--space-1); padding-top:var(--space-1); }
    #catalogChips .chip-stock{ font-size:10px; padding:1px 4px; }
    #pageCaja .category-chip{ min-height:36px; padding:var(--space-1) var(--space-2); font-size:10px; }
    #pageCaja .receipt-total-chip-value{ font-size:var(--font-lg); }
  }