﻿  /* ---------- REGISTER PANEL ---------- */
  .register{ background:var(--ink); padding:22px 20px 26px; display:flex; flex-direction:column; gap:16px; min-width:0; }
  .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:'Space Mono',monospace; 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:'Space Mono',monospace; font-size:10px; letter-spacing:0.2em;
    color:#8A9490; 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:#746762; font-weight:600;
  }
  .catalog-search{
    background:var(--graphite-light); border:1px solid var(--paper-line); border-radius:7px;
    padding:8px 10px; color:var(--paper-ink); font-family:'Inter',sans-serif; font-size:13px; outline:none;
  }
  .catalog-search:focus{ border-color:var(--felt-light); }
  .catalog-search::placeholder{ color:#8A9490; }
  .catalog-search-row{ display:flex; gap:8px; }
  .catalog-search-row .catalog-search{ flex:1; }
  .scan-btn{
    background:var(--felt); color:#fff; border:none; border-radius:8px;
    width:38px; flex-shrink:0; font-size:16px; cursor:pointer;
  }
  .scan-btn:hover{ background:var(--felt-light); }
  .category-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .category-chip{
    background:var(--graphite-light); color:var(--paper-ink); border:1px solid var(--paper-line);
    border-radius:14px; padding:4px 11px; min-height:40px;
    font-family:'Space Mono',monospace;
    font-size:10.5px; letter-spacing:0.04em; cursor:pointer;
  }
  .category-chip:hover{ border-color:var(--felt-light); }
  .category-chip.active{ background:var(--felt); color:#fff; border-color:var(--felt); }
  .chip-stock{
    font-family:'Space Mono',monospace; font-size:9.5px; padding:1px 6px; border-radius:8px;
    margin-left:6px; background:var(--graphite-light); color:#746762; display:inline-block;
  }
  .chip-stock.low{ background:#FBE9E7; color:#B34040; }
  .chip-stock.zero{ background:var(--maroon); color:#fff; }
  .barcode-reader{
    width:100%; min-height:220px; background:#111; border-radius:10px; overflow:hidden;
  }
  .barcode-reader video{ width:100%; }
  .scan-status{
    font-family:'Space Mono',monospace; font-size:11.5px; color:var(--paper-fade);
    text-align:center; margin-top:10px;
  }
  .catalog-empty{
    font-family:'Space Mono',monospace; font-size:11px; color:#8A9490; line-height:1.5;
  }
  .catalog-count{
    font-family:'Space Mono',monospace; 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:7px; overflow:hidden;
  }
  .chip-add{
    background:none; border:none; color:var(--paper-ink); padding:7px 10px;
    display:flex; flex-direction:column; align-items:flex-start; cursor:pointer; gap:2px;
  }
    .chip-add:hover{ background:var(--coral-bg); }
  .chip-name{ font-family:'Inter',sans-serif; font-size:12px; font-weight:600; }
  .chip-price{ font-family:'Space Mono',monospace; font-size:11px; color:var(--felt); }
  .chip-edit{
    background:none; border:none; border-left:1px solid var(--paper-line); color:#746762;
    font-size:12px; min-width:42px; min-height:42px; padding:0 10px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .chip-edit:hover{ color:#fff; background:var(--coral); }
  .chip-restock{
    background:none; border:none; border-left:1px solid var(--paper-line); color:#746762;
    font-size:12px; min-width:42px; min-height:42px; padding:0 10px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .chip-restock:hover{ color:#fff; background:var(--yape); }
  .chip-del{
    background:none; border:none; border-left:1px solid var(--paper-line); color:#746762;
    font-size:12px; min-width:42px; min-height:42px; padding:0 10px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .chip-del:hover{ color:#fff; background:var(--maroon); }
  #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(--graphite); color:var(--paper); border:1px solid var(--paper-line);
    border-radius:8px; min-height:44px; padding:10px 20px;
    font-family:'Space Mono',monospace; font-weight:700; font-size:12px;
    letter-spacing:0.06em; cursor:pointer;
  }
  .load-more-btn:hover{ background:#343A36; }

  .type-tabs{ display:flex; gap:6px; }
  .type-tab{
    flex:1; background:var(--graphite-light); border:1px solid var(--paper-line); color:#746762;
    border-radius:7px; padding:8px 6px; font-family:'Space Mono',monospace; font-size:10.5px;
    letter-spacing:0.04em; cursor:pointer; text-align:center;
  }
  .type-tab:hover{ background:var(--coral-bg); }
  .type-tab.active{ background:var(--felt); border-color:var(--felt-light); color:#fff; }

  form#prodForm, form#quickForm{ display:flex; flex-direction:column; gap:10px; }
  .field{ display:flex; flex-direction:column; gap:4px; }
  .cost-hint{ font-family:'Inter',sans-serif; font-size:11px; color:#8A9490; }
  .field select{
    padding:9px 10px; border-radius:6px; border:1px solid var(--paper-line); background:var(--graphite-light);
    color:var(--paper-ink); font-family:'Inter',sans-serif; font-size:13px;
  }
  .products-page-title{
    font-family:'Space Mono',monospace; font-weight:700; font-size:14px; letter-spacing:0.04em;
    color:var(--paper-ink); margin:0;
  }
  .field select:focus{ outline:none; border-color:var(--felt-light); }
  .field input[type=text]#prodCategoryNew, .field input[type=text]#editProdCategoryNew{ margin-top:6px; }
  .field label{
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:#746762; font-weight:600;
  }
  .field input, .field select{
    background:var(--graphite-light); border:1px solid var(--paper-line); border-radius:6px;
    padding:9px 10px; color:var(--paper-ink); font-family:'Inter',sans-serif; font-size:14px; outline:none;
  }
  .field input:focus, .field select:focus{ border-color:var(--felt-light); }
  .row2{ display:grid; grid-template-columns:1fr 78px; gap:10px; min-width:0; }
  .row2 .field{ min-width:0; }
  @media (max-width:400px){
    .row2{ grid-template-columns:1fr; }
  }
  .price-with-unit{ display:flex; gap:6px; }
  .price-with-unit input{ flex:1; min-width:0; }
  .price-with-unit select{ width:64px; padding:9px 4px; font-family:'Space Mono',monospace; font-size:11px; flex-shrink:0; }
  .save-catalog-row{
    display:flex; align-items:center; gap:6px; font-size:11px; color:#746762; font-family:'Inter',sans-serif;
  }
  .save-catalog-row input[type=checkbox]{ accent-color:var(--felt); width:14px; height:14px; }
  .key{
    border:none; border-radius:7px; padding:11px 14px; font-family:'Space Mono',monospace;
    font-weight:700; font-size:13px; letter-spacing:0.1em; cursor:pointer; color:#fff;
    transition:transform 0.05s ease, filter 0.15s ease;
  }
  .key:active{ transform:translateY(1px); }
  .key-add{ background:var(--felt); }
  .key-add:hover{ background:var(--felt-light); }
  .key-clear{ background:var(--maroon); }
  .key-clear:hover{ background:var(--maroon-light); }
  .settings{
    display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
    margin-top:4px; padding-top:14px; border-top:1px dashed var(--paper-line);
  }
  .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:16px; }

  @media (max-width:980px){
    .layout > .receipt{ order:1; }
    .layout > .mobile-catalog-toggle{ order:2; display:block; }
    .layout > .register{ order:3; display:none; }
    .layout > .register.register-open{ display:flex; }

    .mobile-catalog-toggle{
      width:100%; min-height:48px; padding:12px 14px; margin:12px 0;
      background:var(--warm-card); color:var(--felt); border:2px solid var(--felt); border-radius:8px;
      font-family:'Space Mono',monospace; font-weight:700; font-size:13px; letter-spacing:0.08em;
      cursor:pointer; text-align:center;
    }
    .mobile-catalog-close{
      display:block; width:100%; min-height:44px; padding:11px 14px; margin-top:6px;
      background:var(--graphite); color:var(--paper); border:none; border-radius:8px;
      font-family:'Space Mono',monospace; font-weight:700; font-size:13px; letter-spacing:0.08em;
      cursor:pointer; text-align:center;
    }
    .mobile-panel-head{
      display:block; font-family:'Space Mono',monospace; font-weight:700;
      font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:#746762;
      margin:0 0 -4px;
    }
    .layout > .register #quickForm{
      border-top:1px dashed var(--paper-line); padding-top:14px; margin-top:2px;
    }
    .layout > .register .settings{ padding-top:12px; margin-top:2px; }
    .layout > .register .settings .field{ width:64px; }
    .layout > .register .settings .field label{ font-size:10px; }
    .layout > .register .settings .field input{ font-size:13px; padding:7px 8px; }
  }

  @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 .catalog-search{ min-height:44px; }
    .layout > .register .scan-btn{ min-height:44px; width:44px; }
    .layout > .register .category-chip{ min-height:44px; }
  }

  @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:44px; }
  #prodScanBtn{ width:44px; min-width:44px; min-height:44px; }
  .chip-edit, .chip-restock, .chip-del{ min-width:44px; min-height:44px; }
  .chip-stock{ font-size:11px; padding:2px 7px; }

  /* ---------- D3.3 jerarquía visual del formulario de productos ---------- */
  .product-form-section{ display:flex; flex-direction:column; gap:10px; }
  .product-extra-section{
    padding-top:14px; margin-top:2px; border-top:1px dashed var(--paper-line);
  }
  .product-form-section-title{
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em;
    text-transform:uppercase; color:#746762; font-weight:700; margin:0;
  }

  /* ---------- 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:44px; flex-shrink:0;
    background:none; border:none; border-left:1px solid var(--paper-line);
    color:#746762; font-size:18px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .chip-actions-toggle:hover,
  .chip-actions-toggle[aria-expanded="true"]{ background:var(--graphite); color:var(--paper); }
  .chip-actions{
    flex:1 1 100%; display:none; gap:6px; padding:8px;
    border-top:1px dashed var(--paper-line);
  }
  .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:6px; min-width:44px; min-height:44px;
  }

  /* ---------- F2: pantalla CAJA (el app ya ocupa todo el alto vía F4) ---------- */
  body.page-caja-active{ padding:0; background:var(--ink); }
  body.page-caja-active .pos{ border-radius:0; box-shadow:none; }
  @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; grid-template-columns:minmax(0,1fr) minmax(360px,420px); }
    #pageCaja .register{
      height:100%; min-height:0; padding:16px 16px 18px;
    }
    #pageCaja .register .catalog-section{ flex:1; min-height:0; }
    #pageCaja .register .catalog-scroll-area{
      flex:1; min-height:0; max-height:none; overflow-y:auto;
      padding-right:4px;
    }
    #pageCaja .register .catalog-search{ min-height:44px; font-size:14px; }
    #pageCaja .register .scan-btn{ width:44px; min-height:44px; font-size:18px; }
    #pageCaja .register .category-chips{
      flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px;
    }
  }

  /* ---------- F2: estado inicial del catálogo en CAJA ---------- */
  .catalog-prompt{
    grid-column:1 / -1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:5px; text-align:center; padding:26px 14px; min-height:120px;
    border:1px dashed var(--paper-line); border-radius:9px; color:var(--paper-fade);
    font-family:'Inter',sans-serif;
  }
  .catalog-prompt-icon{ font-size:26px; line-height:1; }
  .catalog-prompt-title{
    font-family:'Space Mono',monospace; font-size:12px; font-weight:700;
    letter-spacing:0.05em; color:var(--paper-ink);
  }
  .catalog-prompt-sub{ font-size:11.5px; line-height:1.5; max-width:260px; }

  /* ---------- F1: tarjetas de producto compactas en CAJA ---------- */
  #catalogChips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:7px; }
  #catalogChips .catalog-chip{ display:flex; align-items:stretch; }
  #catalogChips .chip-add{
    flex:1; flex-direction:row; align-items:center; justify-content:space-between;
    gap:8px; padding:10px 12px; border-radius:7px; min-width:0;
  }
  #catalogChips .chip-name{
    flex:1; min-width:0; display:flex; align-items:center; gap:5px;
    font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis;
  }
  #catalogChips .chip-price{
    font-size:13px; color:var(--felt); font-weight:700; white-space:nowrap; flex-shrink:0;
  }
  #catalogChips .chip-thumb{ width:22px; height:22px; margin-right:0; flex-shrink:0; }
  #catalogChips .chip-stock{ margin-left:0; }

  /* ---------- F4: la fila LED del registro se oculta; el total vive en la cabecera del ticket ---------- */
  .register .led-row{ display:none; }

  /* ---------- F5: "Cargar más" dentro del catálogo de CAJA ---------- */
  #catalogChips .load-more-btn{ margin-top:6px; }

