:root {
      --oscuro-bg: #1f1e1d; --oscuro-text: #faf9f6;
      --oscuro-container: #30302e;
      --navbar-h: 72px;
    }
    html { scroll-behavior: smooth; }
    .container[id] { scroll-margin-top: calc(var(--navbar-h) + 16px); }
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0; font-size: 18px;
      background-color: var(--oscuro-bg); color: var(--oscuro-text);
    }

    .navbar {
      background-color: #30302e; color: white; padding: 12px 30px;
      display: flex; justify-content: space-between; align-items: center;
      position: fixed; top: 0; width: 100%; z-index: 1000;
      height: var(--navbar-h); box-sizing: border-box;
      border-bottom:1px solid rgba(168,162,158,.18);
      box-shadow: 0 10px 30px rgba(31,30,29,.35); backdrop-filter: saturate(160%) blur(6px);
    }
    .navbar-title { font-size: 1.25rem; font-weight: 600; display:flex; align-items:center; gap:12px; }
    .navbar-menu { display: flex; align-items: center; gap: 20px; }

    .tabs { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .tab[disabled] { opacity:.5; cursor:not-allowed; }
    .tab:focus-visible { outline: 2px solid #e89b7c; outline-offset: 2px; }
    .tab-section { display:none; }
    .tab-section.active { display:block; }

    .container {
      max-width: 1300px;
      margin: calc(var(--navbar-h) + 38px) auto 40px;
      padding: 30px;
      background-color: var(--oscuro-container);
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      border: 1px solid #393a37;
    }

    h2, th { color: inherit; }
    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      margin-bottom: 25px;
      background: #262624;
      border: 1px solid #3a3937;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 4px 16px -4px rgba(0,0,0,.25);
    }
    th, td {
      border: none;
      border-bottom: 1px solid #3a3937;
      padding: 14px 18px;
      text-align: left;
      font-size: 16px;
      color: #ffffff;
    }
    tbody tr:last-child td { border-bottom: none; }
    .info-table-wrap { overflow-x: auto; }
    .info-table-wrap table {
      background: #262624;
      border: 1px solid #3a3937;
      border-radius: 14px;
      overflow: hidden;
    }
    thead th {
      background: #30302e;
      color: #c2bdb8;
      font-weight: 600;
      font-size: 12.5px;
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: 14px 18px;
      border-bottom: 1px solid #3a3937;
      white-space: nowrap;
      text-align: left;
    }

    .btn { padding: 14px 28px; background-color: #bb6649; color: white; font-size: 17px; border: none; border-radius: 8px; cursor: pointer; margin: 10px 8px 20px 0; }
    .btn:hover { background-color: #7a3a2a; }
    /* Inputs y selects: oscuros siempre */
    input, select {
      padding: 12px; font-size: 16px;
      border: 1px solid #4a4946; border-radius: 6px;
      background-color: #1f1e1d; color: #faf9f6;
      color-scheme: dark;
    }
    input:focus, select:focus { outline: none; border-color: #e89b7c; box-shadow: 0 0 0 2px rgba(232,155,124,.25); }
    select option { background-color: #30302e; color: #faf9f6; }
    .acciones { cursor: pointer; color: red; font-weight: bold; font-size: 20px; }

    .btn-navbar {
      background-color: #bb6649; color: white; border: none; padding: 8px 14px; margin-left: 10px;
      border-radius: 6px; font-size: 15px; cursor: pointer; transition: background-color 0.3s;
      display: inline-block; white-space: nowrap;
    }
    .btn-navbar:hover { background-color: #7a3a2a; }

    .fila-configuracion { display: flex; flex-wrap: wrap; gap: 30px; }
    .bloque-config { flex: 0 0 700px; max-width: 100%; }
    .bloque-detalle { flex: 1; min-width: 440px; background-color: var(--oscuro-container); padding: 20px; border-radius: 14px; border: 1px solid #3a3937; }

    .container + .container { margin-top: 0; padding-top: 5px; }

    .info-card { border: 1px solid #3a3937; border-radius: 12px; padding: 14px; background: #30302e; }
    .info-grid { display: grid; gap: 18px; }
    .info-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .info-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .info-callout { margin-top:10px; padding:10px 12px; border-left:4px solid #bb6649; background: rgba(187,102,73,.12); border-radius: 8px; }
    .info-muted { opacity: .85; }
    .info-gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .info-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 1px solid #3a3937; }

    /* Divisor entre formulario y resultados */
    .seccion-divisor {
      height: 1px;
      background: rgba(168,162,158,.2);
      margin: 28px 0 20px;
    }

    /* ── Filtros de columnas resultados ── */
    .res-header {justify-content: space-between;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .res-header h2 { margin: 0; }
    .res-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .res-toggle {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 11px;
      border-radius: 9999px;
      border: 1px solid #4a4946;
      background: transparent;
      color: #faf9f6;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s, border-color .15s, transform .1s;
      user-select: none;
    }
    .res-toggle:hover { background: rgba(255,255,255,.07); transform: translateY(-1px); }
    .res-toggle .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; }
    .res-toggle.active { background: #bb6649; border-color: #bb6649; }
    .res-toggle.active .dot { opacity: 1; }

    /* Columnas ocultables en tabla resultados */
    .res-table.hide-peso   .rc-peso   { display: none; }
    .res-table.hide-medidas .rc-medidas { display: none; }
    .res-table.hide-stock  .rc-stock  { display: none; }
    .res-table.hide-uniars .rc-uniars { display: none; }
    .res-table.hide-subars .rc-subars { display: none; }
    .res-table.hide-subusd .rc-subusd { display: none; }

    /* ── Filas extras (componentes manuales) dentro del formulario ── */
    tr.fila-extra-form td { padding: 12px; }
    tr.fila-extra-form td.celda-extra-codigo { text-align: left; }
    tr.fila-extra-form select,
    tr.fila-extra-form input {
      width: 100%; box-sizing: border-box;
    }

    #g-tablaEntradas { table-layout: fixed; }
    #g-tablaEntradas th, #g-tablaEntradas td { padding: 10px; }
    #g-tablaEntradas td { overflow: hidden; }
    #g-tablaEntradas select, #g-tablaEntradas input { width: 100%; box-sizing: border-box; min-width: 0; }
    #g-tablaEntradas col:nth-child(1){ width:18%; } #g-tablaEntradas col:nth-child(2){ width:12%; }
    #g-tablaEntradas col:nth-child(3){ width:12%; } #g-tablaEntradas col:nth-child(4){ width:12%; }
    #g-tablaEntradas col:nth-child(5){ width:12%; } #g-tablaEntradas col:nth-child(6){ width:14%; }
    #g-tablaEntradas col:nth-child(7){ width:14%; } #g-tablaEntradas col:nth-child(8){ width:6%; }
    .base-placeholder { color: #999; }

    #m-inicio .bloque-config { flex: 1 1 100%; max-width: 100%; }
    #m-inicio .bloque-detalle { flex: 1 1 100%; min-width: 0; }
    #m-detalleMiniracks { background:#30302e; padding:15px 25px; border-radius:8px; border:1px solid #3a3937; }
    #e-inicio .bloque-config { flex: 1 1 100%; max-width: 100%; }
    #e-inicio .bloque-detalle { flex: 1 1 100%; min-width: 0; }
    #g-inicio .bloque-config { flex: 1 1 100%; max-width: 100%; }
    #g-inicio .bloque-detalle { flex: 1 1 100%; min-width: 0; }
    #r-inicio .bloque-config { flex: 1 1 100%; max-width: 100%; }
    #r-inicio .bloque-detalle { flex: 1 1 100%; min-width: 0; }

    #e-detalleEstanterias, #g-detalleGondolas, #r-detalleRacks {
      background:#30302e; padding:15px 25px; border-radius:8px; border:1px solid #3a3937;
    }

    @media (max-width: 1200px){
      .navbar-menu { gap: 14px; }
      .bloque-config { flex: 1 1 58%; }
      .bloque-detalle { flex: 1 1 42%; min-width: 360px; }
      .container { padding: 24px; }
      #m-inicio .bloque-config, #e-inicio .bloque-config,
      #g-inicio .bloque-config, #r-inicio .bloque-config { flex-basis: 100%; }
      #m-inicio .bloque-detalle, #e-inicio .bloque-detalle,
      #g-inicio .bloque-detalle, #r-inicio .bloque-detalle { flex-basis: 100%; min-width: 0; }
    }
    @media (max-width: 992px){
      .navbar-menu { gap: 12px; }
      .btn-navbar { font-size: 14.5px; padding: 8px 12px; }
      .container { padding: 22px; margin: calc(var(--navbar-h) + 24px) auto 28px; }
    }
    @media (max-width: 768px){
      .navbar { height: auto; padding: 12px 16px; justify-content: flex-start; }
      .container { margin: calc(var(--navbar-h) + 24px) auto 24px; padding: 20px; }
      .fila-configuracion { gap: 18px; }
      .bloque-config { flex: 1 1 100%; }
      .bloque-detalle { flex: 1 1 100%; min-width: 0; }
      .info-cols-2, .info-cols-3 { grid-template-columns: 1fr; }
      th, td { padding: 10px; font-size: 16px; }
    }
    @media (max-width: 420px){
      #dolar { width: 110px !important; }
      .btn { width: 100%; }
      .btn-navbar { flex: 1 1 auto; }
      .acciones { font-size: 18px; }
      .navbar-title { font-size: 1.1rem; }
      .container { margin: 116px auto 22px; }
    }

    .responsive-table-row {
      background: #30302e; border: 1px solid #3a3937;
      border-radius: 10px; padding: 16px; margin-bottom: 16px; transition: all 0.3s;
    }
    .responsive-table-row:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-2px); }
    .responsive-field { margin-bottom: 12px; }
    .responsive-field label { font-weight: 600; display: block; margin-bottom: 6px; font-size: 14px; opacity: 0.9; }
    .responsive-field select, .responsive-field input {
      width: 100%; padding: 10px; border: 1px solid #4a4946; border-radius: 6px;
      font-size: 16px; background: #1f1e1d; color: #faf9f6;
    }
    .delete-row-btn {
      width: 100%; padding: 10px; background: #dc2626; color: white;
      border: none; border-radius: 6px; font-weight: 600; cursor: pointer;
      transition: background 0.3s; margin-top: 8px;
    }
    .delete-row-btn:hover { background: #b91c1c; }

    @media (max-width: 768px) {
      #e-tablaEntradas, #g-tablaEntradas, #m-tablaEntradas, #r-tablaEntradas { display: none; }
      #e-tablaResponsive, #g-tablaResponsive, #m-tablaResponsive, #r-tablaResponsive { display: block; }
    }
    @media (min-width: 769px) {
      #e-tablaEntradas, #g-tablaEntradas, #m-tablaEntradas, #r-tablaEntradas { display: table; }
      #e-tablaResponsive, #g-tablaResponsive, #m-tablaResponsive, #r-tablaResponsive { display: none; }
    }
    @media (max-width: 768px) { #menuOffcanvas { max-width: 280px; width: 65%; } }

    .collapse { transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; }
    .collapsing { transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    h2[data-bs-toggle="collapse"] { transition: all 0.3s ease; padding: 12px 0; border-radius: 8px; }
    h2[data-bs-toggle="collapse"]:hover { padding-left: 12px; padding-right: 12px; }
    h2[data-bs-toggle="collapse"]:active { transform: scale(0.98); }

    .navbar-title { font-weight:700; letter-spacing:.2px; gap:14px; }
    .tabs {
      display:flex; gap:6px; padding:6px;
      background: rgba(168,162,158,.12); border:1px solid #3a3937; border-radius:9999px;
    }
    .tab {
      border:none; background:transparent; color:#faf9f6; padding:10px 16px;
      font-size:15px; font-weight:600; border-radius:9999px; line-height:1; opacity:.9;
      transition:transform .12s ease, background-color .15s ease, opacity .15s ease;
    }
    .tab:hover:not([disabled]) { background:rgba(255,255,255,.07); opacity:1; transform:translateY(-1px); }
    .tab[disabled] { opacity:.45; cursor:not-allowed; }
    .tab.active { background:#1f1e1d; color:#ffffff; opacity:1; box-shadow: inset 0 0 0 1px #3a3937, inset 0 1px 3px rgba(0,0,0,.35); }

    .btn-navbar {
      background:transparent; color:#faf9f6; border:1px solid #d97757; padding:9px 14px;
      border-radius:10px; font-weight:600; letter-spacing:.2px;
      box-shadow: 0 0 0 0 rgba(217,119,87,0);
      transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
    }
    .btn-navbar:hover { background: rgba(217,119,87,.12); box-shadow: 0 0 0 2px rgba(232,155,124,.35); transform: translateY(-1px); }
    .btn-navbar:active { transform: translateY(0); }

    #dolar {
      width:130px !important; background:#262624; color:#faf9f6;
      border:1px solid #4a4946 !important; border-radius:10px !important;
      padding:8px 12px !important; outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    #dolar:focus { border-color:#e89b7c !important; box-shadow: 0 0 0 3px rgba(232,155,124,.25); }
    @media (max-width: 768px) { .navbar { padding:12px 16px; } }

    .tab-mobile { text-align: left; border-color: rgba(168,162,158,.3) !important; transition: all 0.2s; }
    .tab-mobile:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(168,162,158,.5) !important; }
    .tab-mobile.active { background: #1f1e1d !important; border-color: #3a3937 !important; color: #ffffff !important; }

    /* ═══════ PÁGINA DE INICIO ═══════ */
    #tab-inicio {
      max-width: 1300px;
      margin: calc(var(--navbar-h) + 30px) auto 40px;
      padding: 0 20px;
    }

    .inicio-hero {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse 80% 60% at 20% -20%, rgba(217,119,87,.10), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 110%, rgba(217,119,87,.05), transparent 60%),
        linear-gradient(180deg, #2c2a28 0%, #25231f 100%);
      border: 1px solid #3a3937;
      border-radius: 20px;
      padding: 48px 48px 40px;
      margin-bottom: 28px;
      box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 32px -8px rgba(0,0,0,.35);
    }
    .inicio-hero-date {
      font-size: 13px;
      color: #8e8a85;
      text-transform: capitalize;
      margin-bottom: 14px;
      letter-spacing: .02em;
      font-weight: 500;
    }
    .inicio-titulo {
      margin: 0 0 22px;
      font-family: 'Source Serif 4', 'Source Serif Pro', 'Tiempos Headline', Georgia, 'Times New Roman', serif;
      font-size: 52px; font-weight: 400;
      line-height: 1.05; letter-spacing: -.02em;
      color: #ffffff;
    }
    .inicio-titulo-acento {
      font-style: italic;
      color: #e89b7c;
    }
    .inicio-quote {
      margin: 0 0 4px;
      font-family: 'Source Serif 4', 'Source Serif Pro', 'Tiempos Headline', Georgia, serif;
      font-size: 19px; font-style: italic; font-weight: 400;
      color: #c2bdb8;
      line-height: 1.45;
      max-width: 640px;
    }
    .inicio-quote-author {
      margin: 0 0 28px;
      font-size: 13px; color: #8e8a85;
      letter-spacing: .02em;
    }
    .inicio-cta-row {
      display: flex; gap: 10px; flex-wrap: wrap;
    }

    .inicio-cta-primary {
      padding: 10px 20px; font-size: 14px; font-weight: 500;
      border-radius: 9999px; cursor: pointer;
      background: #d97757; color: #ffffff;
      border: 1px solid #d97757;
      transition: background .12s, border-color .12s;
      display: inline-flex; align-items: center; gap: 8px;
      font-family: inherit;
    }
    .inicio-cta-primary:hover { background: #a04e3a; border-color: #a04e3a; }
    .inicio-cta-secondary {
      padding: 10px 20px; font-size: 14px; font-weight: 500;
      border-radius: 9999px; cursor: pointer;
      background: transparent; color: #ffffff;
      border: 1px solid #4a4946;
      transition: background .12s, border-color .12s;
      display: inline-flex; align-items: center; gap: 8px;
      font-family: inherit;
    }
    .inicio-cta-secondary:hover { background: #141312; border-color: #5a5854; }

    /* Stats */
    .inicio-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 26px;
    }
    .inicio-stat {
      background: #30302e;
      border: 1px solid #3a3937;
      border-radius: 14px;
      padding: 18px 20px;
      transition: background .12s, border-color .12s;
      box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 2px 8px -2px rgba(0,0,0,.2);
    }
    .inicio-stat:hover { background: #262624; border-color: #4a4946; }
    .inicio-stat-label { font-size: 12.5px; color: #a8a29e; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
    .inicio-stat-value { font-size: 28px; font-weight: 700; color: #ffffff; margin-top: 8px; letter-spacing: -.02em; line-height: 1.1; }
    .inicio-stat-sub { font-size: 12px; color: #a8a29e; margin-top: 6px; }

    /* Two-column */
    .inicio-cols {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 16px;
      margin-bottom: 32px;
    }

    /* Section head */
    .inicio-section-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
    }
    .inicio-section-head h2 { margin: 0; font-size: 19px; font-weight: 500; color: #ffffff; font-family: 'Source Serif 4', 'Source Serif Pro', 'Tiempos Headline', Georgia, serif; letter-spacing: -.01em; }
    .inicio-section-sub { font-size: 13px; color: #8e8a85; }
    .inicio-link {
      background: none; border: none; color: #c2bdb8;
      font-size: 13px; font-weight: 500; cursor: pointer; padding: 0;
      font-family: inherit;
    }
    .inicio-link:hover { color: #faf9f6; }

    /* Recientes */
    .inicio-recientes-wrap {
      background: #30302e;
      border: 1px solid #3a3937;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 4px 16px -4px rgba(0,0,0,.25);
    }
    .inicio-reciente {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 18px;
      border-bottom: 1px solid #3a3937;
      cursor: pointer;
      transition: background .12s;
      gap: 10px;
    }
    .inicio-reciente:last-child { border-bottom: none; }
    .inicio-reciente:hover { background: #262624; }
    .inicio-reciente-num { font-size: 14px; font-weight: 600; color: #ffffff; }
    .inicio-reciente-cli { font-size: 12.5px; color: #a8a29e; margin-top: 3px; }
    .inicio-reciente-tot { font-size: 15px; font-weight: 600; color: #ffffff; }
    .inicio-reciente-est {
      display: inline-block;
      padding: 3px 9px; border-radius: 9999px;
      font-size: 11px; font-weight: 600;
      margin-top: 5px;
      border: 1px solid transparent;
      text-transform: capitalize;
    }
    .est-pagado    { background: rgba(34,197,94,.14); color: #86efac; border-color: rgba(34,197,94,.3); }
    .est-pendiente { background: rgba(217,119,87,.14); color: #e89b7c; border-color: rgba(217,119,87,.3); }
    .est-vencido   { background: rgba(239,68,68,.14); color: #fca5a5; border-color: rgba(239,68,68,.3); }
    .est-borrador  { background: rgba(168,162,158,.14); color: #8e8a85; border-color: #3a3937; }

    /* Atajos */
    .inicio-acciones-wrap {
      background: #30302e;
      border: 1px solid #3a3937;
      border-radius: 14px;
      padding: 12px;
      display: flex; flex-direction: column; gap: 8px;
      box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 4px 16px -4px rgba(0,0,0,.25);
    }
    .inicio-accion {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: transparent;
      border: 1px solid #3a3937;
      border-radius: 10px;
      color: #ffffff;
      cursor: pointer; text-align: left;
      transition: background .12s, border-color .12s;
      font-family: inherit;
      width: 100%;
    }
    .inicio-accion:hover { background: #262624; border-color: #4a4946; }
    .inicio-accion-ico {
      width: 36px; height: 36px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 500;
      background: #1a1918;
      border: 1px solid #3a3937;
      border-radius: 9px;
      color: #ffffff;
    }
    .inicio-accion-txt { display: flex; flex-direction: column; line-height: 1.3; }
    .inicio-accion-txt strong { font-size: 14px; font-weight: 600; color: #ffffff; }
    .inicio-accion-txt small { font-size: 12px; color: #a8a29e; margin-top: 2px; }

    /* Empty */
    .inicio-empty { padding: 36px 20px; text-align: center; color: #8e8a85; }
    .inicio-empty-ic { font-size: 36px; margin-bottom: 10px; opacity: .8; }
    .inicio-empty p { margin: 0 0 14px; font-size: 14px; }

    /* Sistemas */
    .inicio-sistemas {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .inicio-sistema-card {
      background: #30302e;
      border: 1px solid #3a3937;
      border-radius: 14px;
      padding: 20px;
      cursor: pointer;
      transition: background .12s, border-color .12s;
      box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 2px 8px -2px rgba(0,0,0,.2);
    }
    .inicio-sistema-card:hover {
      background: #262624;
      border-color: #4a4946;
    }
    .inicio-sistema-icon {
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
      border-radius: 11px;
      margin-bottom: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,.3);
    }
    .inicio-sistema-card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #ffffff; }
    .inicio-sistema-card p { margin: 0; font-size: 12.5px; color: #a8a29e; line-height: 1.5; }

    @media (max-width: 992px) {
      .inicio-stats { grid-template-columns: repeat(2, 1fr); }
      .inicio-sistemas { grid-template-columns: repeat(2, 1fr); }
      .inicio-cols { grid-template-columns: 1fr; }
      .inicio-titulo { font-size: 38px; }
      .inicio-hero { padding: 40px 36px 32px; }
    }
    @media (max-width: 600px) {
      #tab-inicio { margin-top: calc(var(--navbar-h) + 16px); padding: 0 14px; }
      .inicio-hero { padding: 32px 24px 28px; border-radius: 16px; }
      .inicio-titulo { font-size: 30px; }
      .inicio-quote { font-size: 16px; }
      .inicio-stats { grid-template-columns: 1fr; }
      .inicio-sistemas { grid-template-columns: 1fr; }
      .inicio-cta-row { flex-direction: column; }
      .inicio-cta-row button { width: 100%; justify-content: center; }
    }
    /* ═══════ /PÁGINA DE INICIO ═══════ */

    /* Botones de acción del modal Depósito */
    .dep-accion-btn {
      padding: 12px 10px; background: #262624; color: #faf9f6;
      border: 1px solid #3a3937; border-radius: 8px; font-size: 14px; font-weight: 600;
      cursor: pointer; transition: all .15s ease;
      display: flex; align-items: center; justify-content: center; gap: 6px;
      text-align: center;
    }
    .dep-accion-btn:hover { background: rgba(34, 197, 94, .12); border-color: #22c55e; transform: translateY(-1px); }
    .dep-accion-btn.selected { background: #22c55e; border-color: #16a34a; color: #fff; box-shadow: 0 0 0 2px rgba(34,197,94,.3); }

    /* ═══════ NOTIFICACIONES PERSONALIZADAS (reemplazan alert/confirm) ═══════ */
    .ui-modal-overlay {
      position: fixed; inset: 0;
      background: rgba(2, 6, 23, .72);
      backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center;
      z-index: 20000;
      opacity: 0; pointer-events: none;
      transition: opacity .2s ease;
      padding: 20px;
    }
    .ui-modal-overlay.show { opacity: 1; pointer-events: auto; }
    .ui-modal-box {
      background: #30302e; color: #faf9f6;
      border: 1px solid #3a3937; border-radius: 16px;
      max-width: 440px; width: 100%;
      box-shadow: 0 24px 60px rgba(0,0,0,.5);
      transform: translateY(16px) scale(.96);
      transition: transform .22s cubic-bezier(.34,1.56,.64,1);
      overflow: hidden;
    }
    .ui-modal-overlay.show .ui-modal-box { transform: translateY(0) scale(1); }
    .ui-modal-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px 14px; }
    .ui-modal-icon {
      width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; font-size: 24px;
    }
    .ui-modal-icon.info    { background: rgba(217,119,87,.18);  color: #e89b7c; border: 1px solid rgba(217,119,87,.4); }
    .ui-modal-icon.warn    { background: rgba(217,119,87,.18);  color: #e89b7c; border: 1px solid rgba(217,119,87,.4); }
    .ui-modal-icon.danger  { background: rgba(239,68,68,.18);   color: #fca5a5; border: 1px solid rgba(239,68,68,.4); }
    .ui-modal-icon.success { background: rgba(34,197,94,.18);   color: #86efac; border: 1px solid rgba(34,197,94,.4); }
    .ui-modal-title { font-size: 18px; font-weight: 700; margin: 0; line-height: 1.3; }
    .ui-modal-body { padding: 0 24px 8px 84px; font-size: 15px; line-height: 1.55; opacity: .92; white-space: pre-line; }
    .ui-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 22px; }
    .ui-modal-btn {
      padding: 10px 20px; border-radius: 9px; font-size: 14.5px; font-weight: 600;
      cursor: pointer; border: 1px solid transparent;
      transition: background .15s, transform .1s, box-shadow .15s;
    }
    .ui-modal-btn:active { transform: translateY(1px); }
    .ui-modal-btn.cancel { background: transparent; color: #c2bdb8; border-color: #4a4946; }
    .ui-modal-btn.cancel:hover { background: rgba(255,255,255,.07); border-color: #6e6a65; }
    .ui-modal-btn.ok { background: #bb6649; color: #fff; }
    .ui-modal-btn.ok:hover { background: #a04e3a; box-shadow: 0 4px 14px rgba(187,102,73,.45); }
    .ui-modal-btn.ok.danger { background: #dc2626; }
    .ui-modal-btn.ok.danger:hover { background: #b91c1c; box-shadow: 0 4px 14px rgba(220,38,38,.45); }
    @media (max-width: 480px) { .ui-modal-body { padding-left: 24px; } .ui-modal-head { padding-bottom: 10px; } }

    .ui-toast-wrap {
      position: fixed; top: calc(var(--navbar-h) + 14px); right: 18px; z-index: 21000;
      display: flex; flex-direction: column; gap: 10px; pointer-events: none;
      max-width: calc(100vw - 36px);
    }
    .ui-toast {
      display: flex; align-items: center; gap: 12px;
      min-width: 280px; max-width: 380px; padding: 14px 18px;
      background: #30302e; color: #faf9f6;
      border: 1px solid #3a3937; border-left-width: 4px; border-radius: 12px;
      box-shadow: 0 14px 36px rgba(0,0,0,.45);
      transform: translateX(120%);
      transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
      pointer-events: auto; font-size: 14.5px; line-height: 1.4;
    }
    .ui-toast.show { transform: translateX(0); }
    .ui-toast.hide { transform: translateX(120%); opacity: 0; }
    .ui-toast.info    { border-left-color: #d97757; }
    .ui-toast.warn    { border-left-color: #d97757; }
    .ui-toast.danger  { border-left-color: #ef4444; }
    .ui-toast.success { border-left-color: #22c55e; }
    .ui-toast-ico { font-size: 20px; flex-shrink: 0; }
    .ui-toast-msg { flex: 1; }
    .ui-toast-x { background: none; border: none; color: #8e8a85; font-size: 18px; cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0; }
    .ui-toast-x:hover { color: #faf9f6; }
    @media (max-width: 480px) {
      .ui-toast-wrap { left: 14px; right: 14px; top: calc(var(--navbar-h) + 10px); }
      .ui-toast { min-width: 0; max-width: 100%; }
    }
    /* ═══════ /NOTIFICACIONES PERSONALIZADAS ═══════ */

    /* ═══════════════════════════════════════════════════════════
       MÓDULO FACTURACIÓN — estilos scopeados bajo #tab-facturacion
       (no afecta el resto del catálogo)
       ═══════════════════════════════════════════════════════════ */
    #tab-facturacion {
      max-width: 1480px; margin: calc(var(--navbar-h) + 30px) auto 60px; padding: 0 20px;
      --fx-surface:#30302e; --fx-s2:#262624; --fx-s3:#34322f;
      --fx-border:#3a3937; --fx-bsoft:rgba(168,162,158,.16);
      --fx-text:#faf9f6; --fx-soft:#c2bdb8; --fx-mute:#8e8a85;
      --fx-brand:#bb6649; --fx-bright:#d97757; --fx-bsoft2:rgba(187,102,73,.14);
      --fx-ok:#22c55e; --fx-warn:#d97757; --fx-danger:#ef4444;
    }
    #tab-facturacion * { box-sizing: border-box; }
    #tab-facturacion .fx-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
    #tab-facturacion .fx-title { font-size:36px; font-weight:800; letter-spacing:-.02em; margin:0; }
    #tab-facturacion .fx-sub { color:var(--fx-mute); font-size:17px; margin-top:6px; }
    #tab-facturacion .fx-tabs { display:flex; gap:6px; padding:6px; background:rgba(168,162,158,.1); border:1px solid var(--fx-border); border-radius:9999px; flex-wrap:wrap; margin-bottom:26px; }
    #tab-facturacion .fx-tab { border:none; background:transparent; color:var(--fx-soft); padding:9px 18px; font-size:14px; font-weight:600; border-radius:9999px; cursor:pointer; transition:background .15s,color .15s; }
    #tab-facturacion .fx-tab:hover { background:rgba(255,255,255,.06); }
    #tab-facturacion .fx-tab.on { background:#1f1e1d; color:#ffffff; box-shadow: inset 0 0 0 1px #3a3937; }
    #tab-facturacion .fx-view { display:none; }
    #tab-facturacion .fx-view.on { display:block; animation:fxfade .3s ease both; }
    @keyframes fxfade { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }
    #tab-facturacion .fx-card { background:var(--fx-surface); border:1px solid var(--fx-bsoft); border-radius:14px; padding:22px; box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 4px 16px -4px rgba(0,0,0,.25); }
    #tab-facturacion .fx-card-0 { padding:0; overflow:hidden; }
    #tab-facturacion .fx-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:10px; border:1px solid transparent; font-weight:600; font-size:16px; cursor:pointer; white-space:nowrap; transition:transform .1s,background .15s,box-shadow .15s; font-family:inherit; }
    #tab-facturacion .fx-btn:active { transform:translateY(1px); }
    #tab-facturacion .fx-primary { background:var(--fx-brand); color:#fff; }
    #tab-facturacion .fx-primary:hover { background:#a04e3a; box-shadow:0 6px 18px rgba(187,102,73,.4); }
    #tab-facturacion .fx-ghost { background:var(--fx-s2); color:var(--fx-soft); border-color:var(--fx-border); }
    #tab-facturacion .fx-ghost:hover { background:var(--fx-s3); color:var(--fx-text); }
    #tab-facturacion .fx-ok { background:var(--fx-ok); color:#04210f; }
    #tab-facturacion .fx-ok:hover { background:#16a34a; color:#fff; }
    #tab-facturacion .fx-sm { padding:7px 12px; font-size:12.5px; }
    #tab-facturacion .fx-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px; }
    #tab-facturacion .fx-stat { background:var(--fx-surface); border:1px solid var(--fx-bsoft); border-radius:14px; padding:18px 20px; }
    #tab-facturacion .fx-stat .l { font-size:12.5px; color:var(--fx-mute); }
    #tab-facturacion .fx-stat .v { font-size:24px; font-weight:800; margin-top:8px; letter-spacing:-.03em; }
    #tab-facturacion .fx-stat .s { font-size:12px; margin-top:6px; color:var(--fx-mute); }
    #tab-facturacion .fx-stat .s.up { color:#86efac; }
    #tab-facturacion .fx-field { margin-bottom:15px; }
    #tab-facturacion .fx-field label { display:block; font-size:14px; font-weight:600; color:var(--fx-soft); margin-bottom:7px; }
    #tab-facturacion .fx-field .fx-hint { font-size:11.5px; color:var(--fx-mute); margin-top:5px; }
    #tab-facturacion .fx-field input, #tab-facturacion .fx-field select, #tab-facturacion .fx-field textarea,
    #tab-facturacion .fx-inp { width:100%; background:var(--fx-s2); color:var(--fx-text); border:1px solid var(--fx-border); border-radius:10px; padding:11px 14px; font-size:16px; font-family:inherit; outline:none; transition:border-color .15s,box-shadow .15s; }
    #tab-facturacion .fx-field input:focus, #tab-facturacion .fx-field select:focus, #tab-facturacion .fx-field textarea:focus, #tab-facturacion .fx-inp:focus { border-color:var(--fx-bright); box-shadow:0 0 0 3px rgba(217,119,87,.18); }
    #tab-facturacion .fx-g2 { display:grid; grid-template-columns:1fr; gap:0 16px; }
    @media (min-width:720px){ #tab-facturacion .fx-g2 { grid-template-columns:1fr 1fr; } #tab-facturacion .fx-stats { grid-template-columns:repeat(4,1fr); } }
    #tab-facturacion .fx-tblwrap { overflow-x:auto; }
    #tab-facturacion table.fx-data { width:100%; border-collapse:collapse; font-size:16px; margin:0; background:#262624; }
    #tab-facturacion table.fx-data thead th { text-align:left; font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:#c2bdb8; padding:14px 18px; border:none; border-bottom:1px solid #3a3937; white-space:nowrap; background:#30302e; }
    #tab-facturacion table.fx-data thead th:first-child { border-top-left-radius:14px; }
    #tab-facturacion table.fx-data thead th:last-child { border-top-right-radius:14px; }
    #tab-facturacion table.fx-data td { padding:14px 18px; border:none; border-bottom:1px solid #3a3937; text-align:left; font-size:16px; color:#ffffff; }
    #tab-facturacion table.fx-data tbody tr:last-child td { border-bottom:none; }
    #tab-facturacion table.fx-data tr:last-child td { border-bottom:none; }
    #tab-facturacion table.fx-data tbody tr { cursor:pointer; transition:background .12s; }
    #tab-facturacion table.fx-data tbody tr:hover { background:#232221; }
    #tab-facturacion .fx-strong { font-weight:600; color:var(--fx-text); }
    #tab-facturacion .fx-cmute { color:var(--fx-mute); }
    #tab-facturacion .fx-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid transparent; }
    #tab-facturacion .fx-badge .pip { width:6px;height:6px;border-radius:50%;background:currentColor; }
    #tab-facturacion .fx-badge.pendiente { background:rgba(217,119,87,.14); color:#e89b7c; border-color:rgba(217,119,87,.3); }
    #tab-facturacion .fx-badge.pagado { background:rgba(34,197,94,.14); color:#86efac; border-color:rgba(34,197,94,.3); }
    #tab-facturacion .fx-badge.vencido { background:rgba(239,68,68,.14); color:#fca5a5; border-color:rgba(239,68,68,.3); }
    #tab-facturacion .fx-badge.borrador { background:rgba(168,162,158,.14); color:var(--fx-mute); border-color:var(--fx-border); }
    #tab-facturacion .fx-empty { text-align:center; padding:54px 20px; color:var(--fx-mute); }
    #tab-facturacion .fx-empty .ic { font-size:38px; opacity:.5; margin-bottom:12px; }
    #tab-facturacion .fx-empty h3 { color:var(--fx-soft); font-size:17px; margin:0 0 6px; }
    #tab-facturacion .fx-empty p { font-size:13.5px; max-width:340px; margin:0 auto 18px; }
    #tab-facturacion .fx-search { position:relative; margin-bottom:18px; }
    #tab-facturacion .fx-search .si { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--fx-mute); }
    #tab-facturacion .fx-search input { padding-left:36px; }
    #tab-facturacion .fx-line { display:grid; grid-template-columns:1fr; gap:10px; padding:14px; background:var(--fx-s2); border:1px solid var(--fx-border); border-radius:10px; margin-bottom:10px; }
    @media (min-width:760px){ #tab-facturacion .fx-line { grid-template-columns:2.6fr .9fr 1.1fr 1fr auto; align-items:end; } }
    #tab-facturacion .fx-mini { font-size:11px; color:var(--fx-mute); font-weight:600; margin-bottom:5px; display:block; }
    #tab-facturacion .fx-totbox { background:var(--fx-s2); border:1px solid var(--fx-border); border-radius:14px; padding:18px 20px; }
    #tab-facturacion .fx-totrow { display:flex; justify-content:space-between; font-size:14px; padding:7px 0; color:var(--fx-soft); }
    #tab-facturacion .fx-totrow.grand { border-top:1px solid var(--fx-border); margin-top:8px; padding-top:14px; font-size:19px; font-weight:800; color:var(--fx-text); }
    #tab-facturacion .fx-divider { height:1px; background:var(--fx-bsoft); margin:18px 0; }
    #tab-facturacion .fx-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; background:var(--fx-s2); border:1px solid var(--fx-border); border-radius:999px; font-size:12.5px; color:var(--fx-soft); }
    /* Modales del módulo (usa overlay propio) */
    .fx-scrim { position:fixed; inset:0; background:rgba(31,30,29,.72); backdrop-filter:blur(4px); z-index:22000; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .22s; }
    @media (min-width:720px){ .fx-scrim { align-items:center; padding:24px; } }
    .fx-scrim.show { opacity:1; pointer-events:auto; }
    .fx-modal { background:#30302e; color:#faf9f6; border:1px solid #3a3937; border-radius:20px 20px 0 0; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; transform:translateY(40px); transition:transform .28s cubic-bezier(.34,1.4,.64,1); box-shadow:0 24px 60px rgba(0,0,0,.5); }
    @media (min-width:720px){ .fx-modal { border-radius:20px; } }
    .fx-scrim.show .fx-modal { transform:none; }
    .fx-modal-head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px 14px; position:sticky; top:0; background:#30302e; }
    .fx-modal-head h3 { font-size:18px; margin:0; font-weight:700; }
    .fx-modal-x { width:32px;height:32px;border-radius:9px;background:#262624;border:1px solid #3a3937;color:#8e8a85;font-size:16px;cursor:pointer; }
    .fx-modal-x:hover { color:#faf9f6; }
    .fx-modal-body { padding:4px 22px 12px; }
    .fx-modal-body label { display:block; font-size:12.5px; font-weight:600; color:#c2bdb8; margin-bottom:7px; }
    .fx-modal-body input, .fx-modal-body select, .fx-modal-body textarea { width:100%; background:#262624; color:#faf9f6; border:1px solid #3a3937; border-radius:10px; padding:11px 13px; font-size:14px; font-family:inherit; outline:none; margin-bottom:15px; }
    .fx-modal-body input:focus, .fx-modal-body select:focus, .fx-modal-body textarea:focus { border-color:#d97757; box-shadow:0 0 0 3px rgba(217,119,87,.18); }
    .fx-modal-g2 { display:grid; grid-template-columns:1fr; gap:0 14px; }
    @media (min-width:560px){ .fx-modal-g2 { grid-template-columns:1fr 1fr; } }
    .fx-modal-foot { padding:14px 22px 22px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; position:sticky; bottom:0; background:#30302e; }
    .fx-modal-foot .fx-btn { font-family:inherit; }
    @media print { #tab-facturacion { display:none !important; } .fx-scrim { display:none !important; } }

    /* Sub-navegador dentro de Productos (Estanterías/Góndolas/Miniracks/Racks) */
    .prod-subnav {
      display:flex; gap:6px; padding:6px; flex-wrap:wrap;
      background: rgba(168,162,158,.12); border:1px solid #3a3937; border-radius:9999px;
    }
    .prod-subtab {
      border:none; background:transparent; color:#faf9f6; padding:10px 18px;
      font-size:15px; font-weight:600; border-radius:9999px; line-height:1; opacity:.9;
      cursor:pointer; transition:transform .12s ease, background-color .15s ease, opacity .15s ease;
    }
    .prod-subtab:hover { background:rgba(255,255,255,.07); opacity:1; transform:translateY(-1px); }
    .prod-subtab.active { background:#1f1e1d; color:#ffffff; opacity:1; box-shadow: inset 0 0 0 1px #3a3937; }
    .prod-pane { display:none; }
    .prod-pane.active { display:block; }
    #tab-productos.tab-section { display:none; }
    #tab-productos.tab-section.active { display:block; }
    @media print {
      .prod-subnav { display:none !important; }
      .prod-pane.print-show { display:block !important; }
      .prod-pane { display:none; }
    }
    /* ═══════════════════════════════════════════════════════════ */

    /* ─────── IMPRESIÓN ─────── */
    @media print {
      @page { margin: 12mm; size: A4; }
      body { background: #fff !important; color: #000 !important; font-size: 12pt; }
      /* Ocultar UI no imprimible */
      .navbar, #menuOffcanvas, .res-filters, .seccion-divisor, .btn, .acciones,
      .delete-row-btn, #e-tablaResponsive, #g-tablaResponsive,
      #m-tablaResponsive, #r-tablaResponsive,
      #e-ficha-tecnica, #g-ficha-tecnica, #m-ficha-tecnica, #r-ficha-tecnica,
      #e-galeria, #g-galeria, #m-galeria, #r-galeria,
      .ui-modal-overlay, .ui-toast-wrap,
      .fila-extra-form { display: none !important; }
      /* Forzar que todos los tab-section marcados se muestren */
      .tab-section.print-show { display: block !important; }
      .tab-section { display: none; }
      .container {
        max-width: 100% !important; margin: 0 0 12mm 0 !important; padding: 0 !important;
        background: #fff !important; color: #000 !important;
        box-shadow: none !important; border: none !important; border-radius: 0 !important;
        page-break-inside: avoid;
      }
      .container + .container { margin-top: 12mm !important; }
      h2, h3 { color: #000 !important; }
      h2 { font-size: 16pt; margin: 6pt 0; }
      h2#e-totalGeneral, h2#g-totalGeneral, h2#m-totalGeneral, h2#r-totalGeneral,
      h2#e-totalGeneralUSD, h2#g-totalGeneralUSD, h2#m-totalGeneralUSD, h2#r-totalGeneralUSD {
        font-size: 14pt; margin: 4pt 0; font-weight: 700;
      }
      table { border-collapse: collapse; width: 100%; font-size: 10pt; }
      th, td { border: 1px solid #888 !important; padding: 4pt 6pt !important; color: #000 !important; }
      thead th { background: #e2e8f0 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .res-table.hide-peso .rc-peso,
      .res-table.hide-medidas .rc-medidas,
      .res-table.hide-stock .rc-stock,
      .res-table.hide-uniars .rc-uniars,
      .res-table.hide-subars .rc-subars,
      .res-table.hide-subusd .rc-subusd { display: none !important; }
      .bloque-detalle, #e-detalleEstanterias, #g-detalleGondolas,
      #m-detalleMiniracks, #r-detalleRacks {
        background: #f6f6f6 !important; color: #000 !important;
        border: 1px solid #888 !important; border-radius: 4pt !important;
        padding: 6pt 10pt !important; margin-bottom: 8pt !important;
      }
      .bloque-detalle ul { margin: 0 0 0 16pt; padding: 0; }
      .bloque-detalle li { margin: 2pt 0; }
      .print-header {
        display: block !important; padding-bottom: 6pt; margin-bottom: 8pt;
        border-bottom: 2pt solid #000;
      }
      .print-header h1 { font-size: 18pt; margin: 0; color: #000; }
      .print-header .meta { font-size: 10pt; color: #444; margin-top: 4pt; }
      .print-sysname {
        display: block !important; background: #30302e !important; color: #fff !important;
        padding: 4pt 8pt !important; margin-bottom: 6pt !important; font-size: 13pt; font-weight: 700;
        -webkit-print-color-adjust: exact; print-color-adjust: exact; border-radius: 3pt;
      }
    }
    /* Elementos solo-impresión: ocultos en pantalla */
    .print-header, .print-sysname { display: none; }

    /* ═══════════════════════════════════════════════════════════
       TAB PRODUCTOS — replica del look del módulo Facturación (Clientes)
       Mismos valores que .fx-card y .fx-modal-foot. Cosmético, scopeado
       a #tab-productos. No toca lógica/IDs/clases existentes.
       ═══════════════════════════════════════════════════════════ */

    /* Container = .fx-card */
    #tab-productos .prod-pane .container {
      background: #30302e;
      border: 1px solid rgba(168,162,158,.16);
      border-radius: 14px;
      padding: 22px;
      margin-top: 20px;
      box-shadow: none;
      position: relative;
    }

    /* Collapsible mínimo del detalle (checkbox hack para animación bidireccional) */
    #tab-productos .prod-collapsible { margin: 14px 0; }
    #tab-productos .prod-collapsible-toggle {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      width: 1px; height: 1px;
    }
    #tab-productos .prod-collapsible-summary {
      cursor: pointer;
      display: inline-block;
      font-size: 13px;
      color: #c2bdb8;
      padding: 6px 0;
      user-select: none;
    }
    #tab-productos .prod-collapsible-summary:hover { color: #faf9f6; }
    #tab-productos .prod-collapsible-summary::before {
      content: "▸";
      display: inline-block;
      margin-right: 6px;
      transition: transform .25s ease;
      color: #8e8a85;
    }
    #tab-productos .prod-collapsible-toggle:checked + .prod-collapsible-summary::before {
      transform: rotate(90deg);
    }
    #tab-productos .prod-collapsible-toggle:focus-visible + .prod-collapsible-summary {
      outline: 2px solid #d97757;
      outline-offset: 2px;
    }
    #tab-productos .prod-collapsible-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .3s ease;
    }
    #tab-productos .prod-collapsible-toggle:checked ~ .prod-collapsible-body {
      grid-template-rows: 1fr;
    }
    #tab-productos .prod-collapsible-body > .prod-collapsible-inner {
      overflow: hidden;
      min-height: 0;
    }
    #tab-productos .prod-collapsible .bloque-detalle > h2 { display: none; }

    /* Sticky action bar = mismo patrón que .fx-modal-foot */
    #tab-productos .prod-action-bar {
      position: sticky;
      bottom: 0;
      z-index: 50;
      margin: 18px -22px -22px;
      padding: 14px 22px 22px;
      background: #30302e;
      border-top: 1px solid #3a3937;
      border-radius: 0 0 14px 14px;
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    /* Botones dentro del action bar con dimensiones de .fx-btn */
    #tab-productos .prod-action-bar .btn {
      margin: 0;
      padding: 10px 17px;
      border-radius: 10px;
      font-size: 13.5px;
      font-weight: 600;
      font-family: inherit;
    }

    /* Header de página estilo .fx-head: título a la izquierda + botones de acción primaria a la derecha */
    #tab-productos .prod-pagehead {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }
    #tab-productos .prod-pagehead-titles { min-width: 0; }
    #tab-productos .prod-pagetitle {
      font-size: 36px;
      font-weight: 800;
      letter-spacing: -.02em;
      margin: 0;
      color: #faf9f6;
    }
    #tab-productos .prod-pagesub {
      color: #8e8a85;
      font-size: 17px;
      margin-top: 6px;
    }

    /* Sub-nav: pasa de pills a 4 botones primarios estilo .fx-btn .fx-primary */
    #tab-productos .prod-subnav {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      gap: 10px;
      margin-top: 18px;
      justify-content: flex-end;
    }
    #tab-productos .prod-subtab {
      background: #262624;
      color: #c2bdb8;
      padding: 10px 17px;
      border-radius: 10px;
      font-size: 13.5px;
      font-weight: 600;
      opacity: 1;
      border: 1px solid #3a3937;
      box-shadow: none;
    }
    #tab-productos .prod-subtab::before {
      content: "+ ";
      font-weight: 700;
    }
    #tab-productos .prod-subtab:hover {
      background: #1f1e1d;
      color: #ffffff;
      opacity: 1;
      transform: none;
      box-shadow: none;
    }
    #tab-productos .prod-subtab.active {
      background: #1a1918;
      color: #ffffff;
      box-shadow: inset 0 0 0 1px #4a4946;
    }
    #tab-productos .prod-subtab.active::after {
      display: none;
    }

    /* Tabla de resultados estilo .fx-data (limpia, sin grilla) */
    #tab-productos .prod-pane .res-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 16px;
      margin: 0;
      background: #262624;
      border: 1px solid #3a3937;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 4px 16px -4px rgba(0,0,0,.25);
    }
    #tab-productos .prod-pane .res-table thead th {
      text-align: left;
      font-weight: 600;
      font-size: 12.5px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #c2bdb8;
      padding: 14px 18px;
      border: none;
      border-bottom: 1px solid #3a3937;
      background: #30302e;
      white-space: nowrap;
    }
    #tab-productos .prod-pane .res-table tbody td {
      padding: 14px 18px;
      border: none;
      border-bottom: 1px solid #3a3937;
      text-align: left;
      font-size: 16px;
      color: #ffffff;
    }
    #tab-productos .prod-pane .res-table tbody tr:last-child td {
      border-bottom: none;
    }
    #tab-productos .prod-pane .res-table tbody tr:hover {
      background: #232221;
    }
    #tab-productos .prod-pane .info-table-wrap {
      background: transparent;
      border: none;
      padding: 0;
      border-radius: 0;
      margin-top: 14px;
    }
    #tab-productos .prod-pane .res-header {
      margin-top: 18px;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
      margin-bottom: 8px;
    }

    /* Total como texto plano (sin chip) */
    #tab-productos .prod-pane h2[id$="-totalGeneral"] {
      margin: 18px 0 0;
      padding: 0;
      background: none;
      color: #faf9f6;
      font-size: 19px;
      font-weight: 800;
      letter-spacing: -.02em;
      box-shadow: none;
      display: block;
      border-radius: 0;
    }
    #tab-productos .prod-pane h2[id$="-totalGeneralUSD"] {
      margin: 4px 0 0;
      color: #8e8a85;
      font-size: 13px;
      font-weight: 500;
    }

    /* Action row: buscador a la izquierda + sub-nav a la derecha */
    #tab-productos .prod-actionrow {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 18px;
    }
    #tab-productos .prod-actionrow .prod-subnav {
      margin-top: 0;
      flex: 0 0 auto;
    }

    /* Buscador estilo .fx-search */
    #tab-productos .prod-search {
      position: relative;
      flex: 1 1 240px;
      min-width: 240px;
    }
    #tab-productos .prod-search-icon {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      color: #8e8a85;
      pointer-events: none;
      font-size: 14px;
    }
    #tab-productos .prod-search-input {
      width: 100%;
      background: #262624;
      color: #faf9f6;
      border: 1px solid #3a3937;
      border-radius: 10px;
      padding: 11px 13px 11px 36px;
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    #tab-productos .prod-search-input:focus {
      border-color: #d97757;
      box-shadow: 0 0 0 3px rgba(217,119,87,.18);
    }
    #tab-productos .prod-search-input::placeholder { color: #6e6a65; }

    /* Sticky bar abajo: ahora solo "Agregar fila" + "Agregar componente" — ghost style */
    #tab-productos .prod-action-bar .btn {
      background: #262624;
      color: #c2bdb8;
      border: 1px solid #3a3937;
    }
    #tab-productos .prod-action-bar .btn:hover {
      background: #34322f;
      color: #faf9f6;
    }

    /* Botones top "Pasar a presupuesto / depósito" al lado del título — estilo .fx-primary */
    #tab-productos .prod-top-buttons {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      flex: 0 0 auto;
    }
    #tab-productos .prod-top-buttons .btn {
      margin: 0;
      padding: 10px 17px;
      border-radius: 10px;
      font-size: 13.5px;
      font-weight: 600;
      font-family: inherit;
      background: #bb6649;
      color: #fff;
      border: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: background .15s ease, box-shadow .15s ease;
    }
    #tab-productos .prod-top-buttons .btn::before {
      content: "+";
      font-weight: 700;
    }
    #tab-productos .prod-top-buttons .btn:hover {
      background: #a04e3a;
      box-shadow: 0 6px 18px rgba(187,102,73,.4);
    }
    /* Mostrar TODOS los sub-paneles con datos cargados (además del .active,
       que permite abrir un sistema vacío para empezar a cargarlo) */
    #tab-productos #tab-estanterias:has(#e-tablaEntradas tbody tr) { display: block; }
    #tab-productos #tab-gondolas:has(#g-tablaEntradas tbody tr)    { display: block; }
    #tab-productos #tab-miniracks:has(#m-tablaEntradas tbody tr)   { display: block; }
    #tab-productos #tab-racks:has(#r-tablaEntradas tbody tr)       { display: block; }

    /* Label del sistema arriba de cada card (era solo-impresión, ahora también pantalla) */
    #tab-productos .prod-pane .print-sysname {
      display: block;
      font-size: 17px;
      font-weight: 700;
      color: #faf9f6;
      margin: 28px 4px 0;
      letter-spacing: -.01em;
    }

    /* Botón único "Pasar a presupuesto" — siempre visible, manda todos los sistemas
       con datos a un solo presupuesto multi-línea */

    @media (max-width: 600px) {
      #tab-productos .prod-pane .container { padding: 18px; }
      #tab-productos .prod-action-bar { gap: 8px; padding: 12px 16px 16px; margin: 16px -18px -18px; justify-content: stretch; }
      #tab-productos .prod-action-bar .btn { flex: 1 1 auto; min-width: 0; padding: 10px 12px; font-size: 13px; }
    }

    @media print {
      #tab-productos .prod-action-bar { display: none !important; }
      #tab-productos .prod-collapsible-summary { display: none !important; }
      #tab-productos .prod-collapsible-body { display: block !important; grid-template-rows: none !important; }
      #tab-productos .prod-collapsible-body > .prod-collapsible-inner { overflow: visible !important; }
      #tab-productos .prod-collapsible .bloque-detalle > h2 { display: block !important; }
    }

    /* ═══════════════════════════════════════════════════════════
       REDISEÑO PRODUCTOS — vista tipo lista (mockup Clientes)
       Cada sistema = sección con título + buscador + add + tabla flat.
       El form inline original queda OCULTO pero funcional como
       almacén de datos. El modal nuevo edita esos campos.
       ═══════════════════════════════════════════════════════════ */

    /* Ocultar paneles originales (siguen siendo el data store, no se ven) */
    #tab-productos .prod-pane { display: none !important; }
    #tab-productos .print-sysname { display: none !important; }
    /* Ocultar la action row anterior (search global + sub-nav) */
    #tab-productos .prod-actionrow { display: none !important; }
    #tab-productos .prod-subnav { display: none !important; }
    #tab-productos > .prod-search { display: none !important; }

    /* Secciones de lista (una por sistema) */
    #tab-productos .prod-list-section {
      max-width: 1480px;
      margin: 36px auto 0;
      padding: 0 20px;
    }
    #tab-productos .prod-list-head { margin-bottom: 16px; }
    #tab-productos .prod-list-title {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.02em;
      margin: 0;
      color: #faf9f6;
    }
    #tab-productos .prod-list-sub {
      color: #8e8a85;
      font-size: 13.5px;
      margin-top: 4px;
    }
    #tab-productos .prod-list-actionrow {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    #tab-productos .prod-list-actionrow .prod-list-search {
      position: relative;
      flex: 1 1 240px;
      min-width: 240px;
    }
    #tab-productos .prod-list-search > .prod-search-icon {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      color: #8e8a85;
      pointer-events: none;
      font-size: 14px;
    }
    #tab-productos .prod-list-search > input {
      width: 100%;
      background: #262624;
      color: #faf9f6;
      border: 1px solid #3a3937;
      border-radius: 10px;
      padding: 11px 13px 11px 36px;
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    #tab-productos .prod-list-search > input:focus {
      border-color: #d97757;
      box-shadow: 0 0 0 3px rgba(217,119,87,.18);
    }
    #tab-productos .prod-list-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    /* "+ {sistema}" → primary azul (action principal) */
    #tab-productos .prod-add-btn {
      padding: 12px 20px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      background: #bb6649;
      color: #fff;
      border: 1px solid transparent;
      cursor: pointer;
      font-family: inherit;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background .15s ease, box-shadow .15s ease;
    }
    #tab-productos .prod-add-btn:hover {
      background: #a04e3a;
      box-shadow: 0 6px 18px rgba(187,102,73,.4);
    }
    /* "+ componente" → ghost (secundario, mismo look que .fx-ghost) */
    #tab-productos .prod-add-comp-btn {
      padding: 12px 20px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      background: #262624;
      color: #c2bdb8;
      border: 1px solid #3a3937;
      cursor: pointer;
      font-family: inherit;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background .15s ease, color .15s ease;
    }
    #tab-productos .prod-add-comp-btn:hover {
      background: #34322f;
      color: #faf9f6;
    }
    #tab-productos .prod-list-tablewrap {
      background: #262624;
      border: 1px solid #3a3937;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 4px 16px -4px rgba(0,0,0,.25);
    }
    #tab-productos .prod-list-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 16px;
      margin: 0;
      border: none;
    }
    #tab-productos .prod-list-table th {
      text-align: left;
      font-weight: 600;
      font-size: 12.5px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #c2bdb8;
      padding: 14px 18px;
      border: none;
      border-bottom: 1px solid #3a3937;
      background: #30302e;
      white-space: nowrap;
    }
    #tab-productos .prod-list-table td {
      padding: 14px 18px;
      border: none;
      border-bottom: 1px solid #3a3937;
      text-align: left;
      font-size: 16px;
      color: #ffffff;
    }
    #tab-productos .prod-list-table tbody tr:last-child td { border-bottom: none; }
    #tab-productos .prod-list-table tbody tr {
      cursor: pointer;
      transition: background .12s;
    }
    #tab-productos .prod-list-table tbody tr:hover {
      background: #232221;
    }
    /* Primera columna en bold, resto blanco igual que .fx-data */
    #tab-productos .prod-list-table tbody td:first-child {
      font-weight: 600;
      color: #ffffff;
    }
    #tab-productos .prod-list-table tbody td:not(:first-child) {
      color: #ffffff;
    }
    #tab-productos .prod-list-table tbody td.prod-list-empty {
      text-align: center;
      color: #c2bdb8;
      padding: 40px 16px;
      cursor: default;
      font-weight: 400;
    }
    #tab-productos .prod-list-table tbody tr.prod-list-empty-row { cursor: default; }
    #tab-productos .prod-list-table tbody tr.prod-list-empty-row:hover { background: transparent; }
    #tab-productos .prod-list-tag {
      display: inline-block;
      padding: 3px 10px;
      background: rgba(217,119,87,.14);
      color: #e89b7c;
      border: 1px solid rgba(217,119,87,.3);
      border-radius: 999px;
      font-size: 12.5px;
      font-weight: 600;
      margin-right: 6px;
      text-transform: uppercase;
      letter-spacing: .05em;
      vertical-align: middle;
    }
    /* Tag de sistema (azul, en columna 1 de filas regulares) */
    #tab-productos .prod-list-tag-sys {
      display: inline-block;
      padding: 4px 12px;
      background: rgba(217,119,87,.14);
      color: #e89b7c;
      border: 1px solid rgba(217,119,87,.3);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .03em;
    }
    /* Tag mini de sistema (al lado del tag "Componente") */
    #tab-productos .prod-list-tag-sys-mini {
      display: inline-block;
      font-size: 12.5px;
      color: #8e8a85;
      font-weight: 500;
    }

    /* Sección "Componentes y Costos" — desglose + total general bajo la lista unificada */
    #tab-productos .prod-totals-section {
      max-width: 1480px;
      margin: 28px auto 0;
      padding: 0 20px;
    }
    #tab-productos .prod-totals-head { margin-bottom: 14px; }
    #tab-productos .prod-totals-title {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -.01em;
      margin: 0;
      color: #faf9f6;
    }
    #tab-productos .prod-totals-sub {
      color: #8e8a85;
      font-size: 16px;
      margin-top: 6px;
    }
    #tab-productos .prod-grandtotal-card {
      margin-top: 18px;
      padding: 18px 22px;
      background: #30302e;
      border: 1px solid rgba(168,162,158,.16);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    #tab-productos .prod-grandtotal-label {
      font-size: 15px;
      font-weight: 600;
      color: #8e8a85;
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    #tab-productos .prod-grandtotal-usd {
      font-size: 16px;
      color: #c2bdb8;
      margin-top: 4px;
    }
    #tab-productos .prod-grandtotal-ars {
      font-size: 34px;
      font-weight: 800;
      color: #faf9f6;
      letter-spacing: -.02em;
    }
    /* Empty state del breakdown */
    #tab-productos #prod-breakdown-body tr.prod-list-empty-row td {
      text-align: center;
      color: #8e8a85;
      padding: 32px 16px;
      cursor: default;
    }

    /* Sección final con Reset (izq) + Pasar buttons (der) */
    #tab-productos .prod-pasar-section {
      max-width: 1480px;
      margin: 24px auto 0;
      padding: 0 20px;
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }
    #tab-productos .prod-pasar-btn {
      padding: 14px 26px;
      border-radius: 10px;
      font-size: 17px;
      font-weight: 600;
      font-family: inherit;
      border: 1px solid transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background .15s ease, box-shadow .15s ease, color .15s ease;
    }
    #tab-productos .prod-pasar-btn-danger {
      background: transparent;
      color: #fca5a5;
      border-color: #ef4444;
      margin-right: auto; /* empuja los otros a la derecha */
    }
    #tab-productos .prod-pasar-btn-danger:hover {
      background: rgba(239,68,68,.12);
      color: #fee2e2;
    }
    #tab-productos .prod-pasar-btn-primary {
      background: #bb6649;
      color: #fff;
    }
    #tab-productos .prod-pasar-btn-primary:hover {
      background: #a04e3a;
      box-shadow: 0 6px 18px rgba(187,102,73,.4);
    }
    #tab-productos .prod-pasar-btn-ok {
      background: #22c55e;
      color: #04210f;
    }
    #tab-productos .prod-pasar-btn-ok:hover {
      background: #16a34a;
      color: #fff;
    }
    @media (max-width: 600px) {
      #tab-productos .prod-pasar-section { flex-direction: column; align-items: stretch; }
      #tab-productos .prod-pasar-btn { width: 100%; margin-right: 0; }
    }

    /* Modal de configuración */
    .prod-modal-scrim {
      position: fixed;
      inset: 0;
      background: rgba(31,30,29,.72);
      backdrop-filter: blur(4px);
      z-index: 22000;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s;
    }
    @media (min-width: 720px) {
      .prod-modal-scrim {
        align-items: center;
        padding: 24px;
      }
    }
    .prod-modal-scrim.show {
      opacity: 1;
      pointer-events: auto;
    }
    .prod-modal {
      background: #30302e;
      color: #faf9f6;
      border: 1px solid #3a3937;
      border-radius: 16px 16px 0 0;
      width: 100%;
      max-width: 640px;
      max-height: 92vh;
      overflow-y: auto;
      transform: translateY(40px);
      transition: transform .28s cubic-bezier(.34,1.4,.64,1);
      box-shadow: 0 24px 60px rgba(0,0,0,.5);
    }
    @media (min-width: 720px) {
      .prod-modal { border-radius: 16px; }
    }
    .prod-modal-scrim.show .prod-modal {
      transform: none;
    }
    .prod-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 10px;
      position: sticky;
      top: 0;
      background: #30302e;
      z-index: 1;
    }
    .prod-modal-head h3 {
      font-size: 22px;
      margin: 0;
      font-weight: 700;
    }
    .prod-modal-x {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: #262624;
      border: 1px solid #3a3937;
      color: #8e8a85;
      font-size: 17px;
      cursor: pointer;
      font-family: inherit;
    }
    .prod-modal-x:hover { color: #faf9f6; }
    /* Body con grid 2 columnas para fields (mucho más compacto) */
    .prod-modal-body {
      padding: 6px 20px 10px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 14px;
    }
    @media (max-width: 540px) {
      .prod-modal-body { grid-template-columns: 1fr; }
    }
    .prod-modal-body.is-extra { grid-template-columns: 1fr; }
    .prod-modal-field { margin-bottom: 0; min-width: 0; }
    .prod-modal-field > label {
      display: block;
      font-size: 15px;
      font-weight: 600;
      color: #c2bdb8;
      margin-bottom: 7px;
    }
    .prod-modal-field input,
    .prod-modal-field select {
      width: 100%;
      background: #262624;
      color: #faf9f6;
      border: 1px solid #3a3937;
      border-radius: 9px;
      padding: 11px 13px;
      font-size: 16px;
      font-family: inherit;
      outline: none;
      color-scheme: dark;
    }
    .prod-modal-field input:focus,
    .prod-modal-field select:focus {
      border-color: #d97757;
      box-shadow: 0 0 0 3px rgba(217,119,87,.18);
    }
    .prod-modal-foot {
      padding: 12px 20px 18px;
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      flex-wrap: wrap;
      position: sticky;
      bottom: 0;
      background: #30302e;
    }
    .prod-modal-btn-ghost {
      padding: 11px 20px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      background: #262624;
      color: #c2bdb8;
      border: 1px solid #3a3937;
      cursor: pointer;
      font-family: inherit;
    }
    .prod-modal-btn-ghost:hover {
      background: #34322f;
      color: #faf9f6;
    }
    .prod-modal-btn-primary {
      padding: 11px 20px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      background: #bb6649;
      color: #fff;
      border: none;
      cursor: pointer;
      font-family: inherit;
    }
    .prod-modal-btn-primary:hover {
      background: #a04e3a;
      box-shadow: 0 6px 18px rgba(187,102,73,.4);
    }
    .prod-modal-btn-danger {
      padding: 11px 20px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      background: transparent;
      color: #fca5a5;
      border: 1px solid #ef4444;
      cursor: pointer;
      font-family: inherit;
      margin-right: auto;
    }
    .prod-modal-btn-danger:hover {
      background: rgba(239,68,68,.12);
      color: #fee2e2;
    }

    @media print {
      .prod-modal-scrim { display: none !important; }
      #tab-productos .prod-list-section { display: none !important; }
    }

    /* ====================================================================
       PRESUPUESTO — VISTA "DOCUMENTO" (estilo PDF, click-para-editar)
       Reemplaza el modal #fx-docScrim por una página inline tipo papel.
       Diseño: hoja blanca, sans-serif, franja azul arriba, líneas finas.
       ==================================================================== */
    #tab-facturacion #fx-view-doc { display: none; }
    #tab-facturacion #fx-view-doc.on { display: block; }

    /* ---- Toolbar superior (sticky bajo la navbar) ---- */
    #fx-view-doc .fx-doc-toolbar {
      position: sticky;
      top: var(--navbar-h);
      z-index: 50;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 0 14px;
      margin-bottom: 18px;
      background: #1f1e1d;
      border-bottom: 1px solid #3a3937;
      flex-wrap: wrap;
    }
    #fx-view-doc .fx-doc-toolbar-spacer { flex: 1 1 auto; }
    #fx-view-doc .fx-doc-toolbar .fx-btn { font-size: 14px; padding: 10px 16px; }
    /* Pill de estado en la toolbar (no aparece en la hoja) */
    #fx-view-doc .fx-doc-status-wrap {
      display: inline-flex; align-items: center; margin-left: 8px;
    }
    #fx-view-doc .fx-doc-status {
      background: #262624; color: #c2bdb8;
      border: 1px solid #3a3937;
      border-radius: 9999px;
      padding: 6px 14px;
      font-size: 12.5px; font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      outline: none;
      appearance: none; -webkit-appearance: none;
    }
    #fx-view-doc .fx-doc-status:hover { background: #34322f; color: #faf9f6; }

    /* ---- Hoja "papel" (blanca, plana) ---- */
    #fx-view-doc .fx-doc-paper {
      background: #ffffff;
      color: #111827;
      border-radius: 8px;
      padding: 56px 64px 56px;
      max-width: 920px;
      margin: 0 auto;
      box-shadow: 0 24px 60px -20px rgba(0,0,0,.45), 0 6px 20px -8px rgba(0,0,0,.35);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      font-size: 13px;
      line-height: 1.5;
      position: relative;
      overflow: hidden;
    }
    @media (max-width: 720px) {
      #fx-view-doc .fx-doc-paper { padding: 36px 22px 40px; }
    }
    /* Franja azul superior (acento de marca) */
    #fx-view-doc .fx-doc-accent {
      position: absolute; top: 0; left: 0; right: 0;
      height: 6px;
      background: #1e3a8a;
    }

    /* ---- Reset de inputs/selects/textarea: lucen como texto plano hasta click ---- */
    #fx-view-doc .fx-doc-paper input,
    #fx-view-doc .fx-doc-paper select,
    #fx-view-doc .fx-doc-paper textarea {
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      color: inherit;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 3px;
      padding: 1px 5px;
      margin: 0;
      outline: none;
      transition: background .12s, border-color .12s, box-shadow .12s;
      box-sizing: border-box;
    }
    #fx-view-doc .fx-doc-paper input:hover,
    #fx-view-doc .fx-doc-paper select:hover,
    #fx-view-doc .fx-doc-paper textarea:hover {
      background: #eef2ff;
      border-color: #c7d2fe;
    }
    #fx-view-doc .fx-doc-paper input:focus,
    #fx-view-doc .fx-doc-paper select:focus,
    #fx-view-doc .fx-doc-paper textarea:focus {
      background: #fff;
      border-color: #1e3a8a;
      box-shadow: 0 0 0 3px rgba(30,58,138,.12);
    }
    #fx-view-doc .fx-doc-paper select {
      appearance: none; -webkit-appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
      background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      padding-right: 24px;
      cursor: pointer;
    }
    #fx-view-doc .fx-doc-paper textarea {
      resize: vertical;
      min-height: 60px;
      width: 100%;
    }

    /* ---- Reglas horizontales ---- */
    #fx-view-doc .fx-doc-hr-light { border: 0; border-top: 1px solid #e5e7eb; margin: 28px 0; }
    #fx-view-doc .fx-doc-hr-dark  { border: 0; border-top: 1px solid #9ca3af; margin: 12px 0 10px; }

    /* ============ HEADER (3 columnas: logo | negocio | meta) ============ */
    #fx-view-doc .fx-doc-h {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 28px;
      align-items: start;
    }
    @media (max-width: 720px) {
      #fx-view-doc .fx-doc-h { grid-template-columns: auto 1fr; }
      #fx-view-doc .fx-doc-h-meta { grid-column: 1 / -1; }
    }
    #fx-view-doc .fx-doc-h-logo {
      width: 120px; height: 120px;
      background: #e5e7eb;
      border-radius: 4px;
      display: grid; place-items: center;
      font-size: 36px; color: #9ca3af;
      flex-shrink: 0; overflow: hidden;
    }
    #fx-view-doc .fx-doc-h-logo img {
      width: 100%; height: 100%; object-fit: contain;
    }
    #fx-view-doc .fx-doc-h-biz { min-width: 0; padding-top: 4px; }
    #fx-view-doc .fx-doc-h-biz-name {
      font-size: 20px; font-weight: 700;
      letter-spacing: -.01em;
      color: #111827;
      margin-bottom: 10px;
      line-height: 1.2;
    }
    #fx-view-doc .fx-doc-h-biz-meta {
      font-size: 12.5px;
      color: #374151;
      line-height: 1.65;
    }
    #fx-view-doc .fx-doc-h-biz-meta > div { word-break: break-word; }

    /* Meta (Presupuesto / Fecha / Válido hasta / Total) — bloques apilados, alineados a la derecha */
    #fx-view-doc .fx-doc-h-meta {
      display: flex; flex-direction: column; gap: 10px;
      min-width: 180px;
      text-align: right;
    }
    #fx-view-doc .fx-doc-meta-block { line-height: 1.3; }
    #fx-view-doc .fx-doc-meta-l {
      font-size: 10px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      color: #6b7280;
      margin-bottom: 2px;
    }
    #fx-view-doc .fx-doc-meta-v {
      font-size: 13.5px; font-weight: 600;
      color: #111827;
      display: inline-block;
    }
    #fx-view-doc .fx-doc-meta-input {
      text-align: right;
      width: auto;
      max-width: 180px;
    }
    #fx-view-doc .fx-doc-meta-v.fx-doc-meta-total {
      font-size: 13.5px; font-weight: 600;
    }

    /* ============ CLIENTE ============ */
    #fx-view-doc .fx-doc-cli { margin: 0; }
    #fx-view-doc .fx-doc-section-l {
      font-size: 10px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      color: #6b7280;
      margin-bottom: 10px;
    }
    #fx-view-doc .fx-doc-cli-name {
      font-size: 17px; font-weight: 700;
      color: #111827;
      padding: 2px 22px 2px 5px;
      margin-left: -5px;
      min-width: 240px;
      max-width: 100%;
    }
    #fx-view-doc .fx-doc-cli-meta {
      font-size: 12.5px;
      color: #4b5563;
      line-height: 1.55;
      margin-top: 6px;
    }
    #fx-view-doc .fx-doc-cli-meta > div { word-break: break-word; }

    /* ============ TABLA DE ÍTEMS ============ */
    #fx-view-doc .fx-doc-items {
      width: 100%;
      border-collapse: collapse;
      margin-top: 4px;
    }
    #fx-view-doc .fx-doc-items thead th {
      font-size: 10px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      color: #6b7280;
      padding: 0 8px 12px;
      border-bottom: 1px solid #111827;
      text-align: left;
      background: transparent;
    }
    #fx-view-doc .fx-doc-items thead th.fx-doc-col-num { text-align: right; }
    #fx-view-doc .fx-doc-items thead th.fx-doc-col-act { width: 32px; padding: 0 0 12px; }
    #fx-view-doc .fx-doc-items tbody td {
      padding: 14px 8px;
      vertical-align: top;
      border-bottom: 1px dashed #d1d5db;
      font-size: 13px;
      color: #111827;
      background: transparent;
    }
    #fx-view-doc .fx-doc-items tbody td.fx-doc-cell-num {
      text-align: right; white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    #fx-view-doc .fx-doc-items tbody td.fx-doc-cell-act { width: 32px; padding: 14px 0; text-align: right; }

    #fx-view-doc .fx-doc-item-name {
      width: 100%;
      font-weight: 700;
      font-size: 13px;
      color: #111827;
      display: block;
      padding: 1px 5px;
      margin-left: -5px;
    }
    #fx-view-doc .fx-doc-item-det {
      width: 100%;
      font-size: 12.5px;
      font-weight: 400;
      color: #4b5563;
      display: block;
      margin-top: 4px;
      margin-left: -5px;
      padding: 1px 5px;
      resize: none;
      min-height: 20px;
      line-height: 1.45;
      overflow: hidden;
    }
    #fx-view-doc .fx-doc-item-prod {
      width: 100%;
      font-size: 10.5px;
      color: #9ca3af;
      display: block;
      margin-top: 4px;
      margin-left: -5px;
    }
    #fx-view-doc .fx-doc-cell-num input { text-align: right; min-width: 60px; }
    #fx-view-doc .fx-doc-cell-num .fx-doc-cell-static { display: block; text-align: right; font-weight: 400; }

    #fx-view-doc .fx-doc-l-del {
      background: transparent;
      border: 1px solid transparent;
      color: #9ca3af;
      cursor: pointer;
      width: 26px; height: 26px;
      border-radius: 6px;
      font-size: 14px; line-height: 1;
      padding: 0;
      transition: color .12s, background .12s, border-color .12s;
    }
    #fx-view-doc .fx-doc-l-del:hover {
      color: #dc2626;
      background: #fee2e2;
      border-color: #fecaca;
    }
    #fx-view-doc .fx-doc-additem {
      display: inline-block;
      margin: 18px 0 0;
      padding: 7px 14px;
      background: transparent;
      border: 1px dashed #9ca3af;
      border-radius: 6px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      transition: background .12s, border-color .12s, color .12s;
    }
    #fx-view-doc .fx-doc-additem:hover {
      background: #eef2ff;
      border-color: #1e3a8a;
      color: #1e3a8a;
    }

    /* ============ TOTALES (alineados a la derecha) ============ */
    #fx-view-doc .fx-doc-totals {
      margin: 36px 0 28px auto;
      max-width: 360px;
    }
    #fx-view-doc .fx-doc-totrow {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 4px 0;
      font-size: 12.5px;
      color: #111827;
    }
    #fx-view-doc .fx-doc-totrow .fx-doc-totl {
      font-size: 11px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      color: #4b5563;
      display: inline-flex; align-items: center; gap: 2px;
    }
    #fx-view-doc .fx-doc-totrow .fx-doc-totv {
      font-weight: 600;
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      color: #111827;
    }
    #fx-view-doc .fx-doc-inline-pct {
      width: 44px;
      text-align: center;
      padding: 0 3px;
      font-size: 11px; font-weight: 700;
      color: #4b5563;
    }
    #fx-view-doc .fx-doc-totrow-grand .fx-doc-totl {
      font-size: 12px;
      color: #111827;
    }
    #fx-view-doc .fx-doc-totrow-grand .fx-doc-totv {
      font-size: 18px;
      font-weight: 700;
      color: #111827;
    }

    /* ============ NOTAS al pie ============ */
    #fx-view-doc .fx-doc-notas {
      font-family: inherit;
      font-size: 12.5px;
      color: #374151;
      line-height: 1.6;
      min-height: 80px;
      padding: 2px 6px;
      margin-left: -6px;
      width: calc(100% + 12px);
      margin-top: 6px;
    }

    @media print {
      #fx-view-doc .fx-doc-toolbar { display: none !important; }
      #fx-view-doc .fx-doc-paper { box-shadow: none; max-width: none; padding: 0; border-radius: 0; }
      #fx-view-doc .fx-doc-accent { display: none; }
    }