/* ━━━━━━━━━━━━━━━━━━━━━━━━━
   TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    :root {
      --a: #e85d04;
      --ad: #c94e03;
      --ah: #f97316;
      --ar: 232, 93, 4;
      --bg: #f5f4f1;
      --bg2: #fff;
      --bg3: #edecea;
      --bg4: #e1deda;
      --bdr: rgba(0, 0, 0, .07);
      --bdr2: rgba(0, 0, 0, .11);
      --t1: #18181b;
      --t2: #52525b;
      --t3: #71717a;
      --t4: #a1a1aa;
      --ok: #15803d;
      --ok-bg: #dcfce7;
      --ok-t: #14532d;
      --wn: #92400e;
      --wn-bg: #fef3c7;
      --wn-t: #78350f;
      --er: #b91c1c;
      --er-bg: #fee2e2;
      --er-t: #7f1d1d;
      --in: #1d4ed8;
      --in-bg: #dbeafe;
      --in-t: #1e3a8a;
      --shd: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .05);
      --shd2: 0 4px 20px rgba(0, 0, 0, .1), 0 10px 36px rgba(0, 0, 0, .11);
      --shd-xs: 0 1px 2px rgba(0,0,0,.04);
      --shd-sm: 0 1px 3px rgba(0,0,0,.03), 0 4px 8px rgba(0,0,0,.04);
      --shd-md: 0 4px 16px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.08);
      --shd-lg: 0 8px 24px rgba(0,0,0,.10), 0 16px 48px rgba(0,0,0,.12);
      --shd-xl: 0 20px 60px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.10);
      --hdr: #fff;
      --card: #fff;
      --inp: #edecea;
      --sheet: #fff;
      /* Espaciado */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-10: 40px;
      --space-12: 48px;
      /* Border radius */
      --radius-xs: 4px;
      --radius-sm: 6px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-2xl: 20px;
      --radius-3xl: 24px;
      /* Transiciones */
      --transition-fast: 0.15s;
      --transition-base: 0.2s;
      --transition-slow: 0.3s;
      --transition-slower: 0.4s;
      /* Easing curves */
      --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
      --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
      --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
      /* Precios */
      --p1: #e85d04;
      --p2: #1d4ed8;
      --p3: #15803d;
      /* Escala tipográfica */
      --text-xs: 10px;
      --text-sm: 11px;
      --text-base: 13px;
      --text-md: 14px;
      --text-lg: 16px;
      --text-xl: 20px;
      /* Overlays */
      --overlay: rgba(0, 0, 0, .48);
      --overlay-dark: rgba(0, 0, 0, .94);
    }

    [data-theme="dark"] {
      --bg: #111;
      --bg2: #1c1c1c;
      --bg3: #222;
      --bg4: #2d2d2d;
      --bdr: rgba(255, 255, 255, .08);
      --t1: #f3f3f3;
      --t2: #a1a1aa;
      --t3: #52525b;
      --card: #1c1c1c;
      --hdr: #1c1c1c;
    }

    * {
      font-weight: 500;
    }

    strong,
    b {
      font-weight: 700;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent
    }

    html {
      background: var(--bg);
      overflow-x: hidden
    }

    body {
      font-family: 'Poppins', sans-serif;
      color: var(--t1);
      min-height: 100dvh;
      -webkit-font-smoothing: antialiased;
      transition: background .3s, color .3s;
      overscroll-behavior-y: contain;
      overflow-x: hidden
    }

    button,
    input,
    select,
    textarea {
      font-family: 'Poppins', sans-serif
    }

    svg {
      flex-shrink: 0
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGIN
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #login-screen {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: #0f0600;
      transition: opacity .45s, transform .45s
    }

    #login-screen::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 110%, rgba(var(--ar), .3) 0%, transparent 70%);
      pointer-events: none
    }

    #login-screen.out {
      opacity: 0;
      transform: scale(1.04);
      pointer-events: none
    }

    #global-loader {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    #global-loader.on { display: flex; }
    #global-loader span {
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      opacity: .85;
      letter-spacing: .03em;
    }

    .l-logo {
      width: 140px;
      height: 140px;
      border-radius: 28px;
      background: #000;
      border: 2.5px solid #111;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin-bottom: 14px;
      box-shadow: 0 8px 40px rgba(0,0,0,.6);
      animation: lpop .7s cubic-bezier(.34, 1.56, .64, 1) both
    }
    .l-logo img {
      width: 90%;
      height: 90%;
      object-fit: contain;
    }

    @keyframes lpop {
      from {
        opacity: 0;
        transform: scale(.3) rotate(-20deg)
      }

      to {
        opacity: 1;
        transform: scale(1) rotate(0)
      }
    }

    .l-title {
      font-size: 24px;
      font-weight: 600;
      color: #fff;
      letter-spacing: -.7px;
      margin-bottom: 4px;
      text-align: center;
      animation: fup .5s .1s both
    }

    .l-sub {
      font-size: 13px;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 44px;
      text-align: center;
      animation: fup .5s .15s both
    }

    @keyframes fup {
      from {
        opacity: 0;
        transform: translateY(12px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .l-card {
      width: 100%;
      max-width: 340px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 22px;
      padding: 26px 22px;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
      animation: lcard .55s .2s cubic-bezier(.34, 1.2, .64, 1) both
    }

    @keyframes lcard {
      from {
        opacity: 0;
        transform: translateY(40px) scale(.96)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    .l-hint {
      background: rgba(var(--ar), .15);
      border: 1px solid rgba(var(--ar), .25);
      border-radius: 10px;
      padding: 9px 12px;
      margin-bottom: 14px;
      font-size: 11.5px;
      color: rgba(255, 200, 150, .9);
      font-weight: 500;
      text-align: center
    }

    .l-lbl {
      display: block;
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, .4);
      text-transform: uppercase;
      letter-spacing: .8px;
      margin-bottom: 6px
    }

    .l-inp {
      width: 100%;
      padding: 13px 16px;
      background: rgba(255, 255, 255, .07);
      border: 1.5px solid rgba(255, 255, 255, .1);
      border-radius: 12px;
      font-size: 15px;
      color: #fff;
      outline: none;
      transition: border-color .15s var(--ease-out), background .15s, box-shadow .15s;
      margin-bottom: 14px
    }

    .l-inp::placeholder {
      color: rgba(255, 255, 255, .2)
    }

    .l-inp:focus {
      border-color: var(--a);
      background: rgba(255, 255, 255, .1);
      box-shadow: 0 0 0 4px rgba(var(--ar), .2)
    }

    .l-btn {
      width: 100%;
      padding: 15px;
      background: var(--a);
      border: none;
      border-radius: 13px;
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      box-shadow: 0 4px 20px rgba(var(--ar), .45);
      transition: transform .15s var(--ease-out), background .15s;
      cursor: pointer;
      margin-top: 4px
    }

    .l-btn:hover {
      background: var(--ah);
    }

    .l-btn:active {
      transform: scale(0.97);
      background: var(--ad)
    }

    .l-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none
    }

    .l-err {
      display: none;
      background: rgba(220, 38, 38, .2);
      border: 1px solid rgba(220, 38, 38, .3);
      color: #fca5a5;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 12px
    }

    .l-err.on {
      display: block;
      animation: shake .3s ease
    }

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0)
      }

      20%,
      60% {
        transform: translateX(-6px)
      }

      40%,
      80% {
        transform: translateX(6px)
      }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   APP SHELL
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #app {
      display: none;
      flex-direction: column;
      height: 100dvh;
      overflow: hidden;
      position: relative;
    }

    #app.on {
      display: flex
    }

    /* HEADER — fondo blanco limpio, sticky real */
    .hdr {
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 400;
      background: var(--hdr);
      border-bottom: 1px solid var(--bdr);
      box-shadow: 0 1px 0 var(--bdr), 0 2px 12px rgba(0, 0, 0, .05);
      padding-top: env(safe-area-inset-top, 0);
    }

    .hdr-top {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 10px 14px 8px
    }
    .hdr-left  { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .hdr-right { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
    #hdr-actions { display: flex; align-items: center; gap: 6px; }
    #hdr-search  { display: flex; justify-content: center; min-width: 0; }

    #hdr-search .srb {
      width: 100%;
      max-width: 480px;
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 10px;
      height: 38px;
    }
    #hdr-search .sri-inp { color: #fff; font-size: 13px; }
    #hdr-search .sri-inp::placeholder { color: rgba(255,255,255,.6); }
    #hdr-search .sri svg { stroke: rgba(255,255,255,.7); }
    #hdr-search .sri-x  { color: rgba(255,255,255,.7); }

    .hdr-act-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 11px;
      border-radius: 7px;
      border: 1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.12);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s;
    }
    .hdr-act-btn:hover { background: rgba(255,255,255,.22); }

    .brand {
      display: flex;
      align-items: center;
      gap: 9px;
      flex: 1;
      min-width: 0
    }

    @property --orb-pos {
      syntax: '<number>';
      inherits: false;
      initial-value: 0;
    }
    @keyframes orbit-spin {
      from { --orb-pos: 140; }
      to   { --orb-pos: 0; }
    }
    .bico-outer {
      position: relative;
      flex-shrink: 0;
      padding: 2px;
      border-radius: 11px;
      background: #111;
      isolation: isolate;
    }
    .bico-orbit-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }
    .bico-orb-back { z-index: 0; }
    .bico-orb-front { z-index: 2; }
    /* t4: anillo permanente (capa base, todo el borde) */
    .orb-t4 {
      fill: none;
      stroke: rgba(255,102,0,.20);
      stroke-width: 1;
    }
    /* t3, t2, t1: capas animadas — cobertura acumulativa por lado */
    .orb-t3, .orb-t2, .orb-t1 {
      fill: none;
      stroke-linecap: round;
      animation: orbit-spin 2.5s linear infinite;
    }
    /* 3 lados atrás  → 105u  (3 × 35) */
    .orb-t3 { stroke: rgba(255,102,0,.60); stroke-width: 1.5; stroke-dasharray: 105 35;  stroke-dashoffset: calc(var(--orb-pos) + 105); }
    /* 2 lados atrás  → 70u   (2 × 35) */
    .orb-t2 { stroke: rgba(255,102,0,.80); stroke-width: 2.5; stroke-dasharray: 70 70;   stroke-dashoffset: calc(var(--orb-pos) + 70); }
    /* 1 lado atrás   → 35u   (1 × 35) */
    .orb-t1 { stroke: rgba(255,102,0,1);   stroke-width: 4;   stroke-dasharray: 35 105;  stroke-dashoffset: calc(var(--orb-pos) + 35); }
    .bico {
      position: relative;
      z-index: 1;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
    }
    .bico img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .bname {
      font-size: 14.5px;
      font-weight: 500;
      letter-spacing: -.3px;
      color: var(--t1)
    }

    .bsub {
      font-size: 10px;
      color: var(--t3);
      font-weight: 500;
      margin-top: 1px
    }

    /* Header utility buttons — neutros, no naranja */
    .ico-btn {
      width: 33px;
      height: 33px;
      flex-shrink: 0;
      background: var(--bg3);
      border: 1px solid var(--bdr);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .12s var(--ease-out), background .12s;
      position: relative;
      cursor: pointer
    }

    .ico-btn svg * {
      stroke: var(--t2) !important;
      fill: none
    }

    .ico-btn:hover {
      background: var(--bg4)
    }

    .ico-btn:active {
      transform: scale(0.90)
    }

    #ico-sun *,
    #ico-moon * {
      stroke: var(--t2) !important
    }

    .online-dot {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 7px;
      height: 7px;
      background: #22c55e;
      border-radius: 50%;
      border: 1.5px solid var(--hdr)
    }

    /* TABS — fondo blanco, solo el activo naranja */
    .tabs {
      display: flex;
      background: var(--hdr);
      border-bottom: 1px solid var(--bdr);
      overflow-x: auto;
      scrollbar-width: none;
      padding: 0 64px 8px 10px;
      gap: 3px;
    }

    .tabs::-webkit-scrollbar {
      display: none
    }

    .tab {
      flex-shrink: 0;
      padding: 6px 11px 5px;
      border: none;
      background: transparent;
      font-size: 10px;
      font-weight: 500;
      color: var(--t3);
      cursor: pointer;
      border-radius: 7px;
      transition: background .13s, color .13s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
      letter-spacing: .2px;
    }

    .tab svg {
      opacity: .4;
      transition: opacity .13s
    }

    .tab:hover {
      background: var(--bg3);
      color: var(--t2)
    }

    .tab.act {
      background: var(--a);
      color: #fff;
      box-shadow: 0 2px 8px rgba(var(--ar), .25)
    }

    .tab.act svg {
      opacity: 1
    }

    .tab.act svg * {
      stroke: #fff !important
    }

    /* VIEWS */
    .view {
      display: none;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
      min-height: 0;
      min-width: 0
    }

    .view.act {
      display: flex;
      animation: ciin .18s var(--ease-out)
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPONENTES COMPARTIDOS
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .toolbar {
      background: var(--hdr);
      border-bottom: 1px solid var(--bdr);
      flex-shrink: 0
    }

    .srw {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 12px 7px
    }

    .srw-btns {
      display: contents /* desktop: botones inline como antes */
    }

    @media (max-width: 767px) {
      .srw {
        flex-wrap: wrap;
        padding: 8px 10px 6px;
        gap: 6px
      }
      .srw .srb {
        flex: 1 1 100%; /* buscador ocupa toda la primera fila */
        min-width: 0
      }
      .srw-btns {
        display: flex; /* segunda fila con los botones */
        align-items: center;
        gap: 6px;
        width: 100%
      }
      .srw-btns .inv-filt-toggle {
        flex: 1; /* filtros se expande para llenar el espacio */
        justify-content: center
      }
    }

    .srb {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--inp);
      border-radius: 9px;
      padding: 0 12px;
      border: 1.5px solid transparent;
      transition: border-color .14s var(--ease-out), background .14s, box-shadow .14s
    }

    .srb:focus-within {
      border-color: var(--a);
      background: var(--bg2);
      box-shadow: 0 0 0 3px rgba(var(--ar), .1)
    }

    .sri {
      color: var(--t3);
      flex-shrink: 0;
      display: flex;
      align-items: center
    }

    .sri-inp {
      flex: 1;
      padding: 9px 0;
      background: transparent;
      border: none;
      outline: none;
      font-size: 13px;
      color: var(--t1);
      font-weight: 500
    }

    .sri-inp::placeholder {
      color: var(--t4)
    }

    .sri-x {
      background: none;
      border: none;
      color: var(--t3);
      padding: 4px;
      font-size: 14px;
      line-height: 1;
      display: none;
      cursor: pointer
    }

    .sri-inp:not(:placeholder-shown)~.sri-x {
      display: block
    }

    .chips {
      display: flex;
      gap: 5px;
      padding: 0 12px 8px;
      overflow-x: auto;
      scrollbar-width: none
    }

    .chips::-webkit-scrollbar {
      display: none
    }

    .chip {
      white-space: nowrap;
      flex-shrink: 0;
      padding: 5px 11px;
      background: var(--bg3);
      border: 1.5px solid var(--bdr);
      border-radius: 20px;
      font-size: 10.5px;
      font-weight: 700;
      color: var(--t2);
      cursor: pointer;
      transition: background .13s, border-color .13s, color .13s
    }

    .chip.act {
      background: rgba(var(--ar), .1);
      border-color: var(--a);
      color: var(--a)
    }

    /* Stats bar */
    .stats-bar {
      display: grid;
      background: var(--bg2);
      border-bottom: 1px solid var(--bdr);
      flex-shrink: 0
    }

    .stat {
      padding: 8px 4px;
      text-align: center;
      border-right: 1px solid var(--bdr)
    }

    .stat:last-child {
      border-right: none
    }

    .stat-n {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -.5px;
      line-height: 1
    }

    .stat-l {
      font-size: 8px;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 700;
      margin-top: 2px
    }

    /* List container — scrollable content area */
    .list-cont {
      flex: 1;
      padding: 10px 12px 16px;
      background: var(--bg);
      overflow-y: auto;
      min-height: 0;
      -webkit-overflow-scrolling: touch;
    }

    /* Cards */
    .card {
      background: var(--card);
      border-radius: 11px;
      padding: 11px 13px;
      margin-bottom: 6px;
      border: 1px solid var(--bdr);
      box-shadow: var(--shd);
      cursor: pointer;
      transition: transform var(--transition-base) var(--ease-spring), box-shadow var(--transition-base), border-color var(--transition-base);
      animation: ciin .15s ease both
    }

    @media (hover: hover) and (pointer: fine) {
      .card:hover {
        transform: translateY(-1px);
        box-shadow: var(--shd-md);
        border-color: rgba(var(--ar), .2);
      }
    }

    .card:active {
      border-color: rgba(var(--ar), .35);
      transform: scale(0.99);
      box-shadow: var(--shd-xs);
    }

    @keyframes ciin {
      from {
        opacity: 0;
        transform: translateY(4px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    /* Prevent any card from staying invisible if animation fails to complete */

    @media (prefers-reduced-motion: reduce) {
      .card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }

    /* Avatar */
    .av {
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0
    }

    .av-0 {
      background: linear-gradient(135deg, #e85d04, #f97316)
    }

    .av-1 {
      background: linear-gradient(135deg, #7c3aed, #a855f7)
    }

    .av-2 {
      background: linear-gradient(135deg, #0369a1, #0ea5e9)
    }

    .av-3 {
      background: linear-gradient(135deg, #065f46, #10b981)
    }

    .av-4 {
      background: linear-gradient(135deg, #92400e, #f59e0b)
    }

    /* Badges */
    .badge {
      font-size: 9px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: .3px;
      white-space: nowrap
    }

    .b-ok {
      background: var(--ok-bg);
      color: var(--ok-t)
    }

    .b-wn {
      background: var(--wn-bg);
      color: var(--wn-t)
    }

    .b-er {
      background: var(--er-bg);
      color: var(--er-t)
    }

    .b-in {
      background: var(--in-bg);
      color: var(--in-t)
    }

    .b-neu {
      background: var(--bg3);
      color: var(--t2)
    }

    .b-bkr {
      background: rgba(var(--ar), .1);
      color: var(--a);
      border: 1px solid rgba(var(--ar), .2)
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 16px;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      min-height: 40px;
      line-height: 1.2;
      transition: transform var(--transition-fast) var(--ease-spring), background var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast)
    }

    .btn:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none !important
    }

    .btn:active:not(:disabled) {
      transform: scale(0.97)
    }

    .btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,.18);
      opacity: 0;
      transition: opacity var(--transition-fast);
      pointer-events: none
    }

    .btn:active:not(:disabled)::after {
      opacity: 1
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--a) 0%, var(--ad) 100%);
      color: #fff;
      flex: 1;
      box-shadow: 0 2px 8px rgba(var(--ar), .22), 0 0 0 1px rgba(var(--ar), .1) inset
    }

    @media (hover: hover) and (pointer: fine) {
      .btn-primary:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--ah) 0%, var(--a) 100%);
        box-shadow: 0 4px 12px rgba(var(--ar), .3), 0 0 0 1px rgba(255,255,255,.1) inset;
        transform: translateY(-1px)
      }
    }

    .btn-primary:active:not(:disabled) {
      background: var(--ad);
      transform: scale(0.97)
    }

    .btn-ghost {
      background: var(--bg3);
      color: var(--t1);
      border: 1px solid var(--bdr)
    }

    @media (hover: hover) and (pointer: fine) {
      .btn-ghost:hover:not(:disabled) {
        background: var(--bg4);
        border-color: var(--bdr2)
      }
    }

    .btn-ghost:active:not(:disabled) {
      background: var(--bg4);
      transform: scale(0.97)
    }

    .btn-danger {
      background: var(--er-bg);
      color: var(--er-t);
      border: 1px solid rgba(220, 38, 38, .15)
    }

    @media (hover: hover) and (pointer: fine) {
      .btn-danger:hover:not(:disabled) {
        background: var(--er);
        color: white;
        border-color: var(--er)
      }
    }

    /* FAB — siempre fijos a la derecha (altura de las pestañas) */
    .fab {
      position: fixed;
      top: 64px;
      right: 16px;
      width: 40px;
      height: 40px;
      background: var(--a);
      border: none;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 12px rgba(var(--ar), .35), 0 0 0 2px var(--bg);
      transition: transform .15s var(--ease-out), background .15s, box-shadow .15s;
      cursor: pointer;
      z-index: 110;
    }

    #fab-b {
      position: static;
      top: auto;
      right: auto;
      z-index: auto;
      box-shadow: 0 2px 8px rgba(var(--ar), .25)
    }

    .fab:hover {
      background: var(--ah)
    }

    .fab:active {
      transform: scale(0.93);
      background: var(--ad)
    }

    /* Toolbar wrapper */
    .toolbar-wrap {
      position: relative
    }


    @keyframes ovin {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    /* SHEET — El div.sheet ES el backdrop; .sh-panel es el modal */
    .sheet {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0,0,0,.48);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 24px 16px;
      overflow-y: auto;
      animation: ovin .18s ease;
    }
    .sheet.on {
      display: flex;
    }
    .sh-panel {
      background: var(--sheet);
      border-radius: 18px;
      border: 1px solid var(--bdr2);
      width: 100%;
      max-width: min(860px, calc(100vw - 32px));
      max-height: calc(100dvh - 48px);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1);
      animation: sheetin .22s var(--ease-spring);
      flex-shrink: 0;
    }
    @keyframes sheetin {
      from { opacity: 0; transform: translateY(-12px); }
      to   { opacity: 1; transform: translateY(0); }
    }


    .hdl {
      display: none
    }

    .sh-hdr {
      padding: 15px 18px 12px;
      border-bottom: 1px solid var(--bdr);
      position: sticky;
      top: 0;
      background: var(--sheet);
      z-index: 1;
      flex-shrink: 0
    }

    .sh-title {
      font-size: 16px;
      font-weight: 700
    }

    .sh-sub {
      font-size: 11px;
      color: var(--t3);
      font-weight: 500;
      margin-top: 2px
    }

    .sh-body {
      padding: 14px 18px;
      flex: 1;
      overflow-y: auto
    }

    .sh-footer {
      padding: 11px 18px 15px;
      border-top: 1px solid var(--bdr);
      flex-shrink: 0;
      display: flex;
      gap: 8px
    }

    /* Form */
    .sec-title {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .7px;
      margin-bottom: 9px;
      padding-bottom: 7px;
      border-bottom: 1px solid var(--bdr)
    }

    .fgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      margin-bottom: 14px
    }

    .fg {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .fg.full {
      grid-column: 1/-1
    }

    .flbl {
      font-size: 10px;
      font-weight: 700;
      color: var(--t2);
      text-transform: uppercase;
      letter-spacing: .4px
    }

    .flbl .req {
      color: var(--er)
    }

    .finp {
      padding: 10px 12px;
      background: var(--inp);
      border: 1.5px solid transparent;
      border-radius: 10px;
      font-size: 13.5px;
      color: var(--t1);
      outline: none;
      width: 100%;
      transition: border-color .14s var(--ease-out), background .14s, box-shadow .14s
    }

    .finp:focus {
      border-color: var(--a);
      background: var(--bg2);
      box-shadow: 0 0 0 3px rgba(var(--ar), .1)
    }

    .finp.err {
      border-color: var(--er);
      background: var(--er-bg)
    }

    .finp::placeholder {
      color: var(--t4)
    }

    select.finp {
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 28px
    }

    textarea.finp {
      resize: vertical;
      min-height: 64px;
      line-height: 1.5
    }

    .ferr {
      font-size: 11px;
      color: var(--er);
      font-weight: 600;
      margin-top: 2px;
      display: none
    }

    .ferr.on {
      display: block
    }

    /* Detail grid */
    .det-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      margin-bottom: 13px
    }

    .det-cell {
      background: var(--bg3);
      border-radius: 9px;
      padding: 9px 12px;
      border: 1px solid var(--bdr)
    }

    .det-cell.full {
      grid-column: 1/-1
    }

    .det-lbl {
      font-size: 9px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 3px
    }

    .det-val {
      font-size: 13px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.35;
      word-break: break-word
    }

    /* Empty state */
    .empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 50px 20px;
      gap: 7px
    }

    .empty-ico {
      font-size: 36px;
      margin-bottom: 4px
    }

    .empty-t {
      font-size: 15px;
      font-weight: 700
    }

    .empty-s {
      font-size: 12.5px;
      color: var(--t2);
      max-width: 220px;
      line-height: 1.5
    }

    /* User menu */
    .umenu {
      position: fixed;
      top: 58px;
      right: 12px;
      background: var(--bg2);
      border: 1px solid var(--bdr2);
      border-radius: 14px;
      box-shadow: var(--shd2);
      z-index: 400;
      min-width: 200px;
      overflow: hidden;
      opacity: 0;
      transform: scale(.95) translateY(-6px);
      transform-origin: top right;
      pointer-events: none;
      transition: opacity .17s var(--ease-spring), transform .17s var(--ease-spring)
    }

    .umenu.on {
      opacity: 1;
      transform: scale(1) translateY(0);
      pointer-events: all
    }

    .umenu-hdr {
      padding: 12px 15px;
      border-bottom: 1px solid var(--bdr)
    }

    .umenu-name {
      font-size: 13.5px;
      font-weight: 700
    }

    .umenu-role {
      font-size: 10.5px;
      color: var(--t3);
      font-weight: 600;
      margin-top: 2px;
      text-transform: capitalize
    }

    .umenu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 15px;
      width: 100%;
      font-size: 13px;
      font-weight: 600;
      color: var(--t1);
      background: none;
      border: none;
      cursor: pointer;
      transition: background .12s
    }

    .umenu-item:hover {
      background: var(--bg3)
    }

    .umenu-item.red {
      color: var(--er)
    }

    /* Toast */
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      background: #1a1a1a;
      color: #fff;
      padding: 10px 18px 10px 14px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      z-index: 900;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition-base) var(--ease-spring), transform var(--transition-base) var(--ease-spring);
      box-shadow: var(--shd-lg);
      max-width: calc(100vw - 32px);
      display: flex;
      align-items: center;
      gap: 8px;
      line-height: 1.4;
      white-space: pre-line
    }

    .toast.on {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: all
    }

    .toast::before {
      content: '';
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      font-size: 14px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .toast.ok {
      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
      box-shadow: 0 8px 32px rgba(22, 163, 74, .28)
    }

    .toast.ok::before { content: '✓' }

    .toast.err {
      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
      box-shadow: 0 8px 32px rgba(220, 38, 38, .28)
    }

    .toast.err::before { content: '✕' }

    .toast.inf {
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      box-shadow: 0 8px 32px rgba(59, 130, 246, .28)
    }

    .toast.inf::before { content: 'ℹ' }

    .toast.wrn {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      box-shadow: 0 8px 32px rgba(245, 158, 11, .28)
    }

    .toast.wrn::before { content: '⚠' }

    .toast-close {
      margin-left: 8px;
      background: rgba(255,255,255,.2);
      border: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: white;
      font-size: 14px;
      line-height: 1;
      flex-shrink: 0;
      transition: background var(--transition-fast)
    }

    .toast-close:hover { background: rgba(255,255,255,.3) }

    @keyframes toastOut {
      to { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.94) }
    }

    .toast.out {
      animation: toastOut 0.25s var(--ease-out) forwards
    }

    /* Spinner */
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .spin {
      animation: spin .7s linear infinite !important;
      display: inline-block !important;
      transform-origin: center;
      will-change: transform;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }

    .pls {
      animation: pulse 1.4s ease-in-out infinite
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLA GENÉRICA (clientes, ventas historial)
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .tbl-wrap {
      flex: 1;
      overflow: auto;
      min-height: 0
    }

    .tbl {
      width: 100%;
      min-width: 600px;
      border-collapse: collapse;
      font-size: 12.5px
    }

    .tbl thead th {
      position: sticky;
      top: 0;
      background: var(--bg3);
      padding: 9px 12px;
      text-align: left;
      font-size: 9.5px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 1.5px solid var(--bdr2);
      white-space: nowrap;
      z-index: 10;
    }

    .tbl tbody tr {
      border-bottom: 1px solid var(--bdr);
      transition: background .1s;
      cursor: pointer
    }

    .tbl td {
      padding: 9px 12px;
      vertical-align: middle
    }

    .tbl .td-mono {
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      color: var(--t3)
    }

    .tbl .td-main {
      font-weight: 600;
      font-size: 13px
    }

    .tbl .td-sub {
      font-size: 11px;
      color: var(--t3)
    }

    .tbl .td-amt {
      font-family: 'DM Mono', monospace;
      font-weight: 700;
      font-size: 13px;
      color: var(--a)
    }

    .tbl .td-right {
      text-align: right
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   MÓDULO INVENTARIO
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .inv-content {
      flex: 1;
      overflow-y: auto;
      background: var(--bg);
      padding: 10px 12px calc(env(safe-area-inset-bottom,16px) + 20px);
      -webkit-overflow-scrolling: touch;
    }
    .inv-state { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 20px;text-align:center;gap:8px }
    .inv-stt { font-size:17px;font-weight:700;color:var(--t1) }
    .inv-sst { font-size:14px;color:var(--t2);line-height:1.5 }
    .inv-card {
      background: var(--card);
      border-radius: 14px;
      padding: 0;
      margin-bottom: 9px;
      box-shadow: var(--shd);
      border: 1px solid var(--bdr);
      overflow: hidden;
      opacity: 1;
    }
    .inv-card.hit { border-color:var(--a);box-shadow:0 0 0 2px rgba(var(--ar),.2),var(--shd) }
    .inv-inner { padding: 13px 14px 12px }
    .inv-top { display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:3px }
    .inv-nm { font-size:15px;font-weight:700;line-height:1.3;flex:1;color:var(--t1) }
    .inv-id { font-family:'DM Mono',monospace;font-size:11px;font-weight:700;color:var(--a);padding:3px 8px;background:rgba(var(--ar),.1);border-radius:6px;white-space:nowrap;margin-top:2px;flex-shrink:0;border:1px solid rgba(var(--ar),.25) }
    .inv-sub { font-size:12px;color:var(--t2);margin-bottom:10px;line-height:1.4;font-weight:500 }
    .inv-stocks { display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:11px }
    .sbox { background:var(--bg3);border-radius:8px;padding:8px 4px 7px;text-align:center;border:1px solid var(--bdr) }
    .sbl { font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;font-weight:700 }
    .sbv { font-size:19px;font-weight:800;line-height:1;color:var(--t1) }
    .sv-ok { color:var(--ok) } .sv-wn { color:var(--wn) } .sv-er { color:var(--er) } .sv-z { color:var(--t3) }
    .inv-foot { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px }
    .inv-ft { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;margin:10px 0 2px }
    .inv-fl { justify-self:start }
    .inv-fc { justify-self:center }
    .inv-fr { justify-self:end }
    .prices { display:flex;align-items:center;gap:10px;flex-wrap:wrap }
    .inv-card .prices { justify-content:center;align-items:baseline;gap:14px;padding:8px 0 4px }
    .pr { font-size:13px;font-weight:700;display:inline-flex;align-items:baseline;gap:3px }
    .inv-card .pr { font-size:20px;font-weight:800 }
    .inv-card .p1c { cursor:pointer }
    .pr-lbl { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;opacity:.55 }
    .p1c { color:var(--p1) } .p2c { color:var(--p2) } .p3c { color:var(--p3) }
    .px-toggle { display:none;font-size:10px;margin-left:2px;opacity:.45;transition:transform .2s;line-height:1 }
    .inv-card .px-toggle { display:inline }
    .inv-card .p2c,.inv-card .p3c { display:none }
    .inv-card .prices.px-open .p2c,.inv-card .prices.px-open .p3c { display:inline-flex }
    .inv-card .prices.px-open .px-toggle { transform:rotate(180deg) }
    .inv-bdgs { display:flex;gap:6px;align-items:center;flex-wrap:wrap }
    .web-btn { font-size:11px;font-weight:700;color:var(--a);text-decoration:none;padding:4px 9px;background:rgba(var(--ar),.08);border-radius:7px;white-space:nowrap;border:1px solid rgba(var(--ar),.2) }

    /* Scanner */
    #sm-inv {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .94);
      z-index: 500;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px
    }

    #sm-inv.on {
      display: flex
    }

    .sv {
      width: min(290px, 82vw);
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      background: #000;
      border: 2px solid var(--a);
      box-shadow: 0 0 40px rgba(var(--ar), .3)
    }

    #interactive video {
      width: 100%;
      display: block
    }

    #interactive canvas {
      display: none
    }

    .sln {
      position: absolute;
      left: 10%;
      right: 10%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--a), transparent);
      animation: slm 1.8s ease-in-out infinite
    }

    @keyframes slm {

      0%,
      100% {
        top: 12%
      }

      50% {
        top: 82%
      }
    }

    .scn {
      position: absolute;
      inset: 0;
      pointer-events: none
    }

    .scn i {
      position: absolute;
      width: 22px;
      height: 22px;
      border-color: #fff;
      border-style: solid;
      border-radius: 3px;
      opacity: .6
    }

    .tl {
      top: 10px;
      left: 10px;
      border-width: 3px 0 0 3px
    }

    .tr {
      top: 10px;
      right: 10px;
      border-width: 3px 3px 0 0
    }

    .bl {
      bottom: 10px;
      left: 10px;
      border-width: 0 0 3px 3px
    }

    .br {
      bottom: 10px;
      right: 10px;
      border-width: 0 3px 3px 0
    }

    .shint {
      color: rgba(255, 255, 255, .7);
      font-size: 13px;
      text-align: center;
      max-width: 260px;
      line-height: 1.5
    }

    .scanc {
      padding: 13px 36px;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 14px;
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer
    }

    .scan-btn {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      background: var(--a);
      border: none;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(var(--ar), .3);
      transition: transform .13s var(--ease-out), background .13s
    }

    .scan-btn:active {
      transform: scale(0.93);
      background: var(--ad)
    }

    .sht-scan {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--sheet);
      border-radius: 22px 22px 0 0;
      border-top: 1px solid var(--bdr);
      z-index: 401;
      padding: 0 16px calc(env(safe-area-inset-bottom, 16px)+16px);
      transform: translateY(100%);
      transition: transform .3s cubic-bezier(.34, 1.3, .64, 1);
      max-height: 80dvh;
      overflow-y: auto
    }

    .sht-scan.on {
      transform: translateY(0)
    }

    .ov-scan {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 400;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px)
    }

    .ov-scan.on {
      display: block;
      animation: ovin .2s var(--ease-out)
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   MÓDULO CLIENTES
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .cli-card-top {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 8px
    }

    .cli-card-info {
      flex: 1;
      min-width: 0
    }

    .cli-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.25;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .cli-cc {
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--t3)
    }

    .cli-bdgs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      justify-content: flex-end
    }

    .cli-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 9px
    }

    .cli-meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--t2);
      font-weight: 500
    }

    .cli-canal {
      margin-left: auto;
      font-size: 10px;
      font-weight: 700;
      color: var(--t3);
      background: var(--bg3);
      padding: 2px 8px;
      border-radius: 7px
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   MÓDULO VENTAS — STEPPER TOP + botones ARRIBA
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    /* ── Stepper minimalista ── */
    .stepper {
      padding: 10px 20px;
      background: var(--bg);
      border-bottom: 1px solid var(--bdr);
      flex-shrink: 0;
    }
    .stepper-mini {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .stepper-mini-bar {
      flex: 1;
      height: 4px;
      background: var(--bdr2);
      border-radius: 99px;
      overflow: hidden;
    }
    .stepper-mini-fill {
      height: 100%;
      background: var(--a);
      border-radius: 99px;
      transition: width .3s ease;
    }
    .stepper-mini-lbl {
      font-size: 11px;
      font-weight: 700;
      color: var(--t2);
      white-space: nowrap;
    }
    .stepper-mini-sub {
      font-size: 10px;
      color: var(--t3);
      white-space: nowrap;
    }

    /* Sub-tabs Bar — MIRRORS .bottom-bar for symmetry */
    .sub-tabs-bar {
      background: var(--hdr);
      border-bottom: 1px solid var(--bdr);
      padding: 8px 12px;
      display: flex;
      gap: 8px;
    }
    .sub-tabs-bar .tab {
      flex: 1;
      padding: 10px 18px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      border: 1px solid var(--bdr2);
      background: var(--bg2);
      color: var(--t2);
      transition: background .16s var(--ease-out), color .16s, border-color .16s;
    }
    .sub-tabs-bar .tab.act {
      background: var(--a);
      color: #fff;
      border-color: transparent;
    }
    .sub-tabs-bar .tab:hover:not(.act) {
      background: var(--bg3);
    }

    /* ACTION BAR — flotante en la parte inferior */
    .bottom-bar {
      background: transparent;
      padding: 10px 16px 14px;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      flex-shrink: 0;
    }

    .panels-v {
      flex: 1;
      overflow: hidden;
      min-height: 0;
      display: flex;
      flex-direction: column
    }

    .panel-v {
      display: none;
      flex-direction: column;
      overflow-y: auto;
      flex: 1
    }

    .panel-v.act {
      display: flex
    }

    .panel-inner {
      padding: 14px 12px
    }

    #vp-4 {
      align-items: center;
      padding: 24px 16px 120px;
      background: var(--bg3);
    }

    .panel-narrow {
      width: 80%;
      max-width: 600px;
      padding: 20px;
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: 20px;
      box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.05);
    }

    .v-step-head {
      margin-bottom: 16px;
      padding: 16px;
      border-radius: 18px;
      background:
        radial-gradient(circle at top right, rgba(var(--ar), .14), transparent 42%),
        linear-gradient(180deg, rgba(var(--ar), .08), rgba(var(--ar), .03));
      border: 1px solid rgba(var(--ar), .12);
      box-shadow: var(--shd);
    }

    .v-step-kicker {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--a);
      margin-bottom: 8px;
    }

    .v-step-head h3 {
      margin: 0;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.03em;
      color: var(--t1);
    }

    .v-step-head p {
      margin: 8px 0 0;
      font-size: 13px;
      line-height: 1.5;
      color: var(--t2);
    }

    .v-step-card,
    .v-selected-card,
    /* ── Total héroe ── */
    .v-total-hero {
      text-align: center;
      padding: 24px 16px 20px;
      margin-bottom: 4px;
      background: color-mix(in srgb, var(--ok) 8%, transparent);
      border: 1.5px solid color-mix(in srgb, var(--ok) 22%, transparent);
      border-radius: 20px;
    }
    .v-total-hero-lbl {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .1em;
      color: var(--ok);
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .v-total-hero-val {
      font-size: 48px;
      font-weight: 900;
      color: var(--ok);
      letter-spacing: -.03em;
      line-height: 1;
    }
    .v-total-hero-sub {
      font-size: 12px;
      color: var(--t3);
      font-weight: 600;
      margin-top: 6px;
    }

    /* ── Mini carrito ── */
    .v-mini-cart {
      margin: 12px 0 20px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .v-mini-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      background: var(--bg3);
      border: 1px solid var(--bdr);
    }
    .v-mini-qty {
      font-size: 13px;
      font-weight: 800;
      color: var(--a);
      min-width: 28px;
      flex-shrink: 0;
    }
    .v-mini-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .v-mini-name {
      font-size: 13px;
      color: var(--t1);
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .v-mini-sku {
      font-size: 10px;
      color: var(--t3);
      font-weight: 600;
      font-family: 'DM Mono', monospace;
    }
    .v-mini-price {
      font-size: 13px;
      font-weight: 800;
      color: var(--t1);
      white-space: nowrap;
    }
    .v-mini-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px 4px;
      border-top: 1.5px solid var(--bdr);
      margin-top: 4px;
      font-size: 13px;
      font-weight: 700;
      color: var(--t2);
    }
    .v-mini-total b {
      font-size: 15px;
      font-weight: 900;
      color: var(--ok);
    }

    /* ── Fila de pago rediseñada ── */
    .v-pago-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .v-pago-cta {
      flex: 1;
      min-width: 160px;
    }
    .v-pago-monto-wrap {
      display: flex;
      align-items: center;
      background: var(--inp);
      border: 1.5px solid var(--bdr);
      border-radius: 10px;
      overflow: hidden;
      height: 44px;
    }
    .v-pago-prefix {
      padding: 0 8px 0 12px;
      font-size: 14px;
      font-weight: 700;
      color: var(--t3);
    }
    .v-pago-monto {
      border: none;
      background: transparent;
      color: var(--t1);
      font-size: 15px;
      font-weight: 800;
      width: 110px;
      padding: 0 10px 0 0;
      outline: none;
    }
    .v-pago-balance {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-radius: 10px;
      margin-bottom: 10px;
      font-size: 13px;
      font-weight: 700;
    }
    .v-pago-row .rm-btn {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      border-radius: 10px;
      border: 1.5px solid color-mix(in srgb, var(--er) 30%, transparent);
      background: color-mix(in srgb, var(--er) 8%, transparent);
      color: var(--er);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s, border-color .15s;
    }
    .v-pago-row .rm-btn:hover {
      background: color-mix(in srgb, var(--er) 16%, transparent);
      border-color: color-mix(in srgb, var(--er) 50%, transparent);
    }

    .v-pago-balance.vuelto   { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
    .v-pago-balance.faltante { background: color-mix(in srgb, var(--er) 10%, transparent); color: var(--er); }
    .v-pago-balance.exacto   { background: color-mix(in srgb, var(--ok) 8%,  transparent); color: var(--ok); }

    .v-checkout-card {
      background: var(--card);
      border: 1px solid var(--bdr);
      border-radius: 16px;
      padding: 14px;
      box-shadow: var(--shd);
    }

    .v-selected-card {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
      background: rgba(var(--ar), .06);
      border-color: rgba(var(--ar), .2);
    }

    .v-flow-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .v-flow-meta span {
      padding: 7px 11px;
      border-radius: 999px;
      background: var(--bg3);
      border: 1px solid var(--bdr);
      color: var(--t2);
      font-size: 11px;
      font-weight: 700;
    }

    .v-checkout-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .v-checkout-stats div {
      padding: 12px;
      border-radius: 14px;
      background: var(--bg3);
      border: 1px solid var(--bdr);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .v-checkout-stats strong {
      font-size: 20px;
      font-weight: 900;
      color: var(--t1);
      letter-spacing: -.03em;
    }

    .v-checkout-stats span {
      font-size: 11px;
      color: var(--t3);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    @media (max-width: 767px) {
      .panel-inner { padding-bottom: 220px }
      .v-checkout-stats { grid-template-columns: 1fr }
      .v-total-hero-val { font-size: 36px }
    }

    /* Stepper action wrapper — buttons ABOVE panels */
    .stepper-action-top {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0
    }

    .sede-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 16px
    }

    .sede-c {
      background: var(--card);
      border: 2px solid var(--bdr2);
      border-radius: 16px;
      padding: 28px 10px;
      text-align: center;
      cursor: pointer;
      transition: border-color .17s var(--ease-out), background .17s, box-shadow .17s;
      box-shadow: var(--shd)
    }

    .sede-c.sel {
      border-color: var(--a);
      background: rgba(var(--ar), .04);
      box-shadow: 0 0 0 3px rgba(var(--ar), .12), var(--shd)
    }

    .sede-c:active {
      transform: scale(.97)
    }

    .sede-c-ico {
      font-size: 34px;
      margin-bottom: 8px
    }

    .sede-c-nm {
      font-size: 15px;
      font-weight: 700
    }

    .sede-c-sub {
      font-size: 12px;
      color: var(--t3);
      margin-top: 3px
    }

    .cli-srch-inp {
      width: 100%;
      padding: 10px 13px 10px 40px;
      background: var(--inp);
      border: 1.5px solid transparent;
      border-radius: 10px;
      font-size: 13.5px;
      color: var(--t1);
      outline: none;
      transition: border-color .14s var(--ease-out), background .14s, box-shadow .14s
    }

    .cli-srch-inp:focus {
      border-color: var(--a);
      background: var(--bg2)
    }

    .cli-srch-inp::placeholder {
      color: var(--t4)
    }

    .cli-srch-wrap {
      position: relative;
      margin-bottom: 8px
    }

    .cli-srch-ico {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--t3)
    }

    .results-drop {
      background: var(--bg2);
      border: 1px solid var(--bdr2);
      border-radius: 11px;
      overflow: hidden;
      box-shadow: var(--shd2);
      margin-bottom: 7px;
      display: none
    }

    .results-drop.on {
      display: block
    }

    .drop-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      cursor: pointer;
      border-bottom: 1px solid var(--bdr);
      transition: background .12s
    }

    .drop-row:last-child {
      border-bottom: none
    }

    .drop-row:active {
      background: var(--bg3)
    }

    .venta-rapida {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 13px;
      background: var(--bg3);
      border-radius: 10px;
      cursor: pointer;
      border: 1.5px dashed var(--bdr2);
      transition: border-color .13s var(--ease-out), background .13s
    }

    .venta-rapida:hover {
      border-color: var(--a)
    }

    /* Cart — tabla en vez de cards */
    .cart-tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px;
      margin-bottom: 8px
    }

    .cart-tbl thead th {
      background: var(--bg3);
      padding: 9px 12px;
      text-align: left;
      font-size: 9.5px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 1.5px solid var(--bdr2)
    }

    .cart-tbl tbody tr {
      border-bottom: 1px solid var(--bdr)
    }

    .cart-tbl td {
      padding: 8px 10px;
      vertical-align: middle
    }

    .cart-tbl .qty-ctrl {
      display: flex;
      align-items: center;
      gap: 3px
    }

    .cart-tbl .qty-btn {
      width: 24px;
      height: 24px;
      border: 1px solid var(--bdr2);
      background: var(--bg2);
      border-radius: 6px;
      font-size: 14px;
      font-weight: 700;
      color: var(--t1);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .12s var(--ease-out), color .12s, border-color .12s;
      line-height: 1
    }

    .cart-tbl .qty-btn:active {
      background: var(--a);
      color: #fff;
      border-color: var(--a)
    }

    .cart-tbl .qty-v {
      font-size: 13px;
      font-weight: 800;
      min-width: 20px;
      text-align: center
    }

    .cart-tbl .precio-inp {
      width: 90px;
      padding: 6px 8px;
      background: var(--inp);
      border: 1.5px solid transparent;
      border-radius: var(--radius-sm);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--t1);
      outline: none;
      transition: border-color .14s var(--ease-out), background .14s, box-shadow .14s;
      font-family: 'DM Mono', monospace
    }

    .cart-tbl .precio-inp:focus {
      border-color: var(--a);
      background: var(--bg2)
    }

    .cart-tbl .rm-btn {
      background: none;
      border: none;
      color: var(--t3);
      font-size: 16px;
      cursor: pointer;
      padding: 2px 4px;
      transition: color .12s;
      line-height: 1
    }

    .cart-tbl .rm-btn:hover {
      color: var(--er)
    }

    .cart-tbl .subtotal-cell {
      font-family: 'DM Mono', monospace;
      font-weight: 700;
      font-size: 13px;
      color: var(--a);
      text-align: right
    }

    .cart-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
      text-align: center;
      background: var(--bg3);
      border-radius: 12px;
      border: 1.5px dashed var(--bdr2)
    }

    .resumen-box {
      background: var(--bg2);
      border-radius: 12px;
      border: 1px solid var(--bdr);
      overflow: hidden;
      margin-bottom: 13px;
      box-shadow: var(--shd)
    }

    .rb-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 13px;
      border-bottom: 1px solid var(--bdr);
      font-size: 12.5px
    }

    .rb-row:last-child {
      border-bottom: none
    }

    .rb-row.total {
      background: rgba(var(--ar), .04)
    }

    .rb-row.total .rb-lbl {
      font-weight: 700;
      color: var(--t1);
      font-size: 13.5px
    }

    .rb-row.total .rb-val {
      font-size: 17px;
      font-weight: 900;
      color: var(--a);
      letter-spacing: -.3px
    }

    .pago-splits {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 11px
    }

    .split-row {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg3);
      border-radius: 10px;
      padding: 9px 11px;
      flex-wrap: wrap;
      gap: 6px
    }

    .split-inp {
      width: 100px;
      padding: 7px 9px;
      background: var(--bg2);
      border: 1.5px solid var(--bdr2);
      border-radius: var(--radius-sm);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--t1);
      outline: none;
      text-align: right;
      transition: border-color .14s var(--ease-out), background .14s, box-shadow .14s;
      font-family: 'DM Mono', monospace
    }

    .split-inp:focus {
      border-color: var(--a);
      box-shadow: 0 0 0 3px rgba(var(--ar), .1)
    }

    .add-pago-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      background: var(--bg3);
      border: 1.5px dashed var(--bdr2);
      border-radius: 10px;
      cursor: pointer;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--t2);
      transition: border-color .13s var(--ease-out), color .13s;
      width: 100%
    }

    .add-pago-btn:hover {
      border-color: var(--a);
      color: var(--a)
    }

    /* Confirmación */
    .confirm-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 20px 20px 16px
    }

    .confirm-ico {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) both
    }

    @keyframes popIn {
      from {
        opacity: 0;
        transform: scale(.4)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    .confirm-ico.ok {
      background: var(--ok-bg);
      border: 3px solid var(--ok)
    }

    .confirm-ico.in {
      background: var(--in-bg);
      border: 3px solid var(--in)
    }

    .confirm-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      margin-bottom: 13px
    }

    .cg-cell {
      background: var(--bg3);
      border-radius: 10px;
      padding: 9px 12px;
      border: 1px solid var(--bdr)
    }

    .cg-cell.full {
      grid-column: 1/-1
    }

    .cg-lbl {
      font-size: 9px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 3px
    }

    .cg-val {
      font-size: 12.5px;
      font-weight: 800;
      color: var(--t1)
    }

    .confirm-items {
      background: var(--bg2);
      border-radius: 11px;
      border: 1px solid var(--bdr);
      overflow: hidden;
      margin-bottom: 13px;
      box-shadow: var(--shd)
    }

    .ci-row-c {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 13px;
      border-bottom: 1px solid var(--bdr);
      font-size: 12.5px
    }

    .ci-row-c:last-child {
      border-bottom: none
    }

    .confirm-actions {
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .btn-wa {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px;
      background: #25d366;
      border: none;
      border-radius: var(--radius-md);
      font-size: var(--text-base);
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(37, 211, 102, .3);
      transition: transform .13s var(--ease-out), background .13s
    }

    .btn-wa:active {
      transform: scale(0.97)
    }

    .btn-nueva-v {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px;
      background: var(--a);
      border: none;
      border-radius: var(--radius-md);
      font-size: var(--text-base);
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(var(--ar), .3);
      transition: transform .13s var(--ease-out), background .13s
    }

    .btn-nueva-v:active {
      transform: scale(0.97);
      background: var(--ad)
    }

    .btn-step {
      flex: none;
      padding: 11px 24px;
      border: none;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: transform .13s var(--ease-out), background .13s, box-shadow .13s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 140px;
      box-shadow: 0 4px 16px rgba(0,0,0,.12)
    }

    .btn-prev-s {
      background: var(--hdr);
      color: var(--t1);
      border: 1px solid var(--bdr);
      box-shadow: 0 2px 8px rgba(0,0,0,.08)
    }

    .btn-next-s {
      background: var(--a);
      color: #fff;
      box-shadow: 0 4px 16px rgba(var(--ar), .35)
    }

    .btn-next-s:active {
      background: var(--ad);
      transform: scale(0.97)
    }

    .btn-next-s:disabled {
      opacity: .4;
      cursor: not-allowed;
      transform: none
    }

    /* Historial table */
    .venta-card .vc-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 7px
    }

    .venta-card .vc-id {
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--t3)
    }

    .venta-card .vc-cliente {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--t1);
      margin-top: 2px
    }

    .venta-card .vc-total {
      font-size: 17px;
      font-weight: 900;
      color: var(--a);
      letter-spacing: -.3px
    }

    .meta-row {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--t2);
      font-weight: 500
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR DESKTOP NAV
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .side-nav {
      display: none
    }
    .side-nav-toggle {
      display: none
    }
    /* Botones de navegación — compartidos entre sidebar desktop y drawer mobile */
    .side-tab,
    .side-util-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border: none;
      background: none;
      border-radius: 8px;
      color: var(--t2);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      width: 100%;
      transition: background .13s, color .13s
    }

    .side-tab svg,
    .side-util-btn svg { flex-shrink: 0; opacity: .5 }

    .side-tab:hover,
    .side-util-btn:hover { background: var(--bg3); color: var(--t1) }

    .side-tab:hover svg,
    .side-util-btn:hover svg { opacity: .8 }

    .side-tab.act {
      background: rgba(var(--ar), .12);
      color: var(--a);
      font-weight: 600
    }

    .side-tab.act svg { opacity: 1 }

    .side-tab-admin {
      margin-top: 8px;
      border-top: 1px solid var(--bdr);
      padding-top: 12px
    }

    /* Footer compartido — sidebar desktop y drawer mobile */
    .side-nav-footer {
      display: flex;
      flex-direction: row;
      gap: 2px;
      padding: 6px 8px;
      border-top: 1px solid var(--bdr);
      background: var(--bg2);
      position: sticky;
      bottom: 0;
      margin-top: auto
    }

    .side-nav-footer .side-util-btn {
      flex-direction: column;
      gap: 3px;
      padding: 6px 4px;
      font-size: 10px;
      border-radius: 6px;
      justify-content: center;
      align-items: center
    }

    .side-nav-footer .side-util-btn svg { opacity: .45 }
    .side-nav-footer .side-util-btn:hover svg { opacity: .8 }

    @media (min-width: 700px) {
      /* Ocultar tabs del header en desktop */
      .tabs { display: none }

      /* Header full-width: hamburguesa + brand siempre visibles */
      #nav-hamburger { display: flex }
      .hdr-util-btns { display: none }

      /* Sidebar */
      .side-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 56px;
        bottom: 0;
        width: 190px;
        background: var(--bg2);
        border-right: 1px solid var(--bdr);
        z-index: 90;
        transform: translateX(-100%);
        transition: transform .22s cubic-bezier(.4,0,.2,1);
        overflow: hidden
      }

      .side-nav.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,.10)
      }

      /* Cuando sidebar está abierto, empuja solo el contenido (no el header) */
      #app.sidenav-open .view {
        margin-left: 190px;
        transition: margin-left .22s cubic-bezier(.4,0,.2,1)
      }

      .side-nav-inner {
        display: flex;
        flex-direction: column;
        padding: 10px 8px 10px;
        gap: 2px;
        flex: 1;
        overflow-y: auto
      }




      /* Perfil popup: mismo lugar en desktop y móvil */
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   INVENTARIO DESKTOP TABLE
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .list-cont {
      display: block
    }

    #prod-list { overflow-x: auto; }

    .inv-dtw {
      display: none;
      border-radius: 12px;
      border: 1px solid var(--bdr);
      overflow: auto;
      box-shadow: var(--shd);
      width: 100%;
      margin-top: 5px;
      background: var(--bg2);
      flex: 1;
      min-height: 0
    }

    .inv-dtw table {
      width: 100%;
      min-width: 1199px;
      border-collapse: collapse;
      font-size: 12px;
      table-layout: fixed
    }

    .inv-dtw thead th,
    #prod-list thead th,
    #cli-list thead th {
      position: sticky;
      top: 0;
      background: var(--bg3);
      padding: 9px 12px;
      text-align: left;
      font-size: 9.5px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 1.5px solid var(--bdr2);
      white-space: nowrap;
      overflow: hidden;
      z-index: 10;
      user-select: none
    }

    .inv-th-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 4px;
      overflow: hidden
    }

    .inv-th-sort,
    .inv-th-filter {
      border: none;
      background: none;
      padding: 0;
      margin: 0;
      color: inherit;
      cursor: pointer;
      font: inherit
    }

    .inv-th-sort {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-transform: inherit;
      letter-spacing: inherit;
      font-weight: inherit;
    }

    .inv-th-sort-ico,
    .inv-th-filter-ico {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      color: var(--t3);
      transition: color .15s, background .15s, transform .15s
    }

    .inv-th-filter {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      flex-shrink: 0;
      background: var(--bg3);
      border: 1px solid var(--bdr) !important;
      color: var(--t2)
    }

    .inv-th-filter-ico {
      color: var(--t2) !important;
      font-size: 11px
    }

    .inv-th:hover .inv-th-sort-ico,
    .inv-th.sorted .inv-th-sort-ico {
      color: var(--a)
    }

    .inv-th-filter:hover,
    .inv-th.filtered .inv-th-filter {
      background: rgba(var(--ar), .15);
      border-color: var(--a) !important
    }

    .inv-th-filter:hover .inv-th-filter-ico,
    .inv-th.filtered .inv-th-filter-ico {
      color: var(--a) !important
    }

    .inv-th.sorted .inv-th-sort {
      color: var(--t1)
    }

    .inv-dtw tbody td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--bdr);
      vertical-align: middle;
      color: var(--t1);
      white-space: nowrap
    }

    .inv-dtw .td-name,
    #prod-list .td-name {
      white-space: normal;
      max-width: 150px
    }

    .inv-dtw .td-car,
    #prod-list .td-car {
      white-space: normal;
      word-break: break-word;
      max-width: 90px;
      min-width: 50px
    }

    .inv-dtw tr:hover td {
      background: rgba(var(--ar), .02)
    }

    .inv-col-menu {
      position: fixed;
      width: 280px;
      max-height: min(70vh, 520px);
      display: flex;
      flex-direction: column;
      background: var(--bg2);
      border: 1px solid var(--bdr);
      border-radius: 14px;
      box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
      z-index: 1200;
      overflow: hidden
    }

    .inv-col-menu-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 12px 14px 8px
    }

    .inv-col-menu-head-actions {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .inv-col-menu-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--t1)
    }

    .inv-col-menu-clear,
    .inv-col-menu-btn {
      border: 1px solid var(--bdr);
      background: var(--bg3);
      color: var(--t2);
      border-radius: 8px;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 700
    }

    .inv-col-menu-clear {
      padding: 5px 9px
    }

    .inv-col-menu-search {
      margin: 0 14px 10px;
      height: 34px;
      border-radius: 9px;
      border: 1px solid var(--bdr);
      background: var(--bg);
      color: var(--t1);
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      padding: 0 11px;
      outline: none
    }

    .inv-col-menu-search:focus {
      border-color: rgba(var(--ar), .45);
      box-shadow: 0 0 0 3px rgba(var(--ar), .08)
    }

    .inv-col-menu-btn {
      padding: 6px 10px
    }

    .inv-col-menu-list {
      overflow: auto;
      padding: 0 8px 10px
    }

    .inv-col-opt {
      display: grid;
      grid-template-columns: 16px 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 9px 8px;
      border-radius: 10px;
      cursor: pointer;
      color: var(--t1)
    }

    .inv-col-opt:hover {
      background: rgba(var(--ar), .05)
    }

    .inv-col-opt input {
      margin: 0
    }

    .inv-col-opt-lbl {
      font-size: 12px;
      line-height: 1.25;
      word-break: break-word
    }

    .inv-col-opt-cnt {
      font-size: 10px;
      font-weight: 800;
      color: var(--t3)
    }

    .inv-col-empty {
      padding: 18px 12px;
      text-align: center;
      color: var(--t3);
      font-size: 12px
    }

    .inv-tid {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      color: #ff6600 !important;
      font-weight: 800
    }

    .inv-tnm {
      font-weight: 700;
      color: var(--t1);
      line-height: 1.2
    }

    .inv-tsb {
      font-size: 11px;
      color: var(--t3);
      margin-top: 3px
    }

    /* ━ INVENTARIO FILTER PANEL ━ */
    .inv-filt-toggle {
      height: 36px;
      flex-shrink: 0;
      background: var(--bg2);
      border: 1.5px solid var(--bdr);
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 12px;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--t1);
      white-space: nowrap;
      transition: background .15s var(--ease-out), border-color .15s, color .15s, box-shadow .15s;
      box-shadow: var(--shd)
    }

    .inv-filt-toggle:hover,
    .inv-filt-toggle.has-active,
    .inv-filt-toggle.open {
      background: var(--a);
      border-color: var(--a);
      color: #fff;
      box-shadow: 0 2px 10px rgba(var(--ar), .4)
    }

    .inv-filt-toggle.open.has-active {
      background: var(--ad);
      border-color: var(--ad)
    }

    .inv-filt-arrow {
      font-size: 8px;
      transition: transform .22s;
      opacity: .7
    }

    .inv-filt-toggle.open .inv-filt-arrow {
      transform: rotate(180deg)
    }

    .inv-filt-badge {
      background: var(--a);
      color: #fff;
      border-radius: 20px;
      font-size: 9px;
      font-weight: 800;
      padding: 2px 6px;
      line-height: 1.5
    }

    .inv-filt-toggle.has-active .inv-filt-badge {
      background: #fff;
      color: var(--a)
    }

    .inv-filts-wrap {
      overflow: hidden;
      max-height: 0;
      transition: max-height .35s cubic-bezier(.4, 0, .2, 1);
      background: var(--bg2);
      border-bottom: none;
      width: 100%
    }

    .inv-filts-wrap.open {
      max-height: 1200px;
      border-bottom: 1px solid var(--bdr)
    }

    .inv-filts-section-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 12px 14px 8px;
      border-bottom: 1px solid var(--bdr)
    }

    .inv-filts-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 14px;
      background: var(--bg2)
    }

    .inv-fchip-wrap {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .inv-fchip-wrap .inv-fchip {
      width: 100%
    }

    .inv-fchip-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .6px;
      padding-left: 2px
    }

    .inv-fchip {
      width: auto;
      min-width: 120px;
      max-width: 100%;
      padding: 9px 28px 9px 12px;
      background: var(--bg3);
      border: 1.5px solid var(--bdr);
      border-radius: 10px;
      font-family: inherit;
      font-size: 13px;
      color: var(--t2);
      cursor: pointer;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      font-weight: 600;
      transition: border-color .15s, background .15s, color .15s;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 11px center
    }

    .inv-fchip:hover {
      border-color: rgba(var(--ar), .4);
      color: var(--t1);
      background-color: var(--bg2)
    }

    .inv-fchip:focus {
      border-color: var(--a);
      box-shadow: 0 0 0 3px rgba(var(--ar), .12)
    }

    .inv-fchip.act {
      border-color: var(--a);
      border-width: 2px;
      color: var(--a);
      background-color: rgba(var(--ar), .06)
    }

    .inv-filts-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px 14px;
      border-top: 1px solid var(--bdr)
    }

    .inv-filt-count {
      font-size: 12px;
      color: var(--t3);
      font-weight: 600
    }

    .inv-clear-btn {
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      background: var(--er);
      border: none;
      cursor: pointer;
      padding: 7px 14px;
      border-radius: 9px;
      transition: opacity .15s var(--ease-out), background .15s, box-shadow .15s;
      box-shadow: 0 2px 6px rgba(220, 38, 38, .2)
    }

    .inv-clear-btn:hover {
      opacity: .85
    }

    .inv-clear-btn:active {
      transform: scale(.97)
    }

    .inv-active-pills {
      display: flex;
      gap: 5px;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding: 0 12px 8px;
      min-height: 0;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .inv-active-pills::-webkit-scrollbar { display: none; }

    .inv-active-pills:empty {
      display: none;
      padding: 0
    }

    .inv-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(var(--ar), .1);
      border: 1px solid rgba(var(--ar), .25);
      color: var(--a);
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 20px;
      cursor: pointer;
      transition: background .12s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .inv-pill:hover {
      background: rgba(var(--ar), .18)
    }

    .inv-pill-x {
      font-size: 11px;
      opacity: .7
    }

    @media(min-width:768px) {
      .inv-filts-grid {
        grid-template-columns: repeat(3, 1fr)
      }

      #view-inventario .inv-content {
        display: none !important;
      }

      .inv-dtw {
        display: block !important;
      }
    }

    @media(min-width:1024px) {
      .inv-filts-grid {
        grid-template-columns: repeat(5, 1fr)
      }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   MÓDULO TRASLADOS
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .oc-timeline {
      display: flex;
      align-items: center;
      padding: 10px 14px 9px;
      background: var(--bg2);
      border-bottom: 1px solid var(--bdr);
      gap: 0;
      overflow-x: auto;
      scrollbar-width: none;
      flex-shrink: 0
    }

    .oc-timeline::-webkit-scrollbar {
      display: none
    }

    .step.pago.act .step-c {
      background: var(--in);
      border-color: var(--in);
      box-shadow: 0 0 0 4px rgba(29, 78, 216, .15);
    }
    .step.pago.done .step-c {
      background: var(--ok);
      border-color: var(--ok);
    }

    .ruta-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .ruta-dot.orig {
      background: var(--a);
    }

    .ruta-dot.dest {
      background: var(--in);
    }

    .arrival-box {
      background: var(--in-bg);
      border: 1.5px solid rgba(29, 78, 216, .2);
      border-radius: 13px;
      padding: 13px;
      margin-bottom: 13px;
    }

    .arrival-t {
      font-size: 13.5px;
      font-weight: 800;
      color: var(--in-t);
      margin-bottom: 4px;
    }

    .arrival-s {
      font-size: 11.5px;
      color: var(--in-t);
      opacity: .8;
      line-height: 1.5;
    }

    .btn-arrival {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 12px;
      background: var(--in);
      border: none;
      border-radius: var(--radius-md);
      font-size: var(--text-base);
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      margin-top: 10px;
      transition: transform .13s var(--ease-out), background .13s;
    }

    .btn-arrival:active {
      transform: scale(0.97);
    }

    .cart-item {
      background: var(--card);
      border-radius: 11px;
      padding: 10px 12px;
      margin-bottom: 6px;
      border: 1px solid var(--bdr);
      box-shadow: var(--shd);
      animation: ciin .15s ease both;
    }

    .ci-top {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 9px;
    }

    .ci-info {
      flex: 1;
      min-width: 0;
    }

    .ci-nm {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.3;
    }

    .ci-id {
      font-family: 'DM Mono', monospace;
      font-size: 9.5px;
      color: var(--t3);
    }

    .ci-rem {
      background: none;
      border: none;
      color: var(--t3);
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      padding: 2px;
      flex-shrink: 0;
      transition: color .12s;
    }

    .ci-rem:hover {
      color: var(--er);
    }

    .ci-bot {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .qty-ctrl {
      display: flex;
      align-items: center;
      gap: 4px;
      background: var(--bg3);
      border-radius: 8px;
      padding: 2px;
    }

    .qty-btn {
      width: 26px;
      height: 26px;
      border: none;
      background: var(--bg2);
      border-radius: 6px;
      font-size: 15px;
      font-weight: 700;
      color: var(--t1);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .12s var(--ease-out), background .12s, color .12s;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
    }

    .qty-btn:active {
      transform: scale(0.90);
      background: var(--a);
      color: #fff;
    }

    .qty-v {
      font-size: 13.5px;
      font-weight: 800;
      min-width: 22px;
      text-align: center;
    }

    .precio-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .precio-lbl {
      font-size: 9px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    .precio-inp {
      width: 100%;
      padding: 7px 9px;
      background: var(--inp);
      border: 1.5px solid transparent;
      border-radius: var(--radius-sm);
      font-size: 13.5px;
      font-weight: 700;
      color: var(--t1);
      outline: none;
      transition: border-color .14s var(--ease-out), background .14s, box-shadow .14s;
      font-family: 'DM Mono', monospace;
    }

    .precio-inp:focus {
      border-color: var(--a);
      background: var(--bg2);
    }

    .subtotal {
      font-size: 12.5px;
      font-weight: 800;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
       MÓDULO COMPRAS (EXTRAS)
       ━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .oc-items-rows {
      display: flex;
      flex-direction: column;
      margin: 10px 0;
      border-top: 1px solid var(--bdr);
    }

    .och-item-row {
      font-size: 11px;
      padding: 7px 4px;
      border-bottom: 1px solid var(--bdr);
      color: var(--t2);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .och-item-row:last-child {
      border-bottom: none;
    }

    .och-item-row b {
      color: var(--t1);
      font-weight: 800;
    }

    .och-item-id {
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--t4);
      flex-shrink: 0;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
       MÓDULO BANCOS (DASHBOARD)
       ━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #b-content {
      height: 100%;
      display: flex;
    }

    .b-sidebar {
      width: 340px;
      border-right: 1px solid var(--bdr);
      display: flex;
      flex-direction: column;
      background: var(--bg2);
      flex-shrink: 0;
      z-index: 5;
      overflow: hidden;
    }

    .b-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      background: var(--bg);
      position: relative;
      overflow: hidden;
    }

    .b-toolbar-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      border-bottom: 1px solid var(--bdr);
      background: var(--bg2);
      flex-wrap: wrap;
    }

    .b-sort-indicator {
      display: inline-block;
      margin-left: 4px;
      opacity: 0.5;
      font-size: 8px;
    }

    .th-sortable {
      cursor: pointer;
      user-select: none;
      transition: background 0.2s;
    }

    .th-sortable:hover {
      background: var(--bg3);
    }

    .b-period-sel {
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid var(--bdr);
      background: var(--card);
      font-size: 11.5px;
      font-weight: 700;
      color: var(--t2);
      outline: none;
      cursor: pointer;
    }

    .b-summary {
      padding: 16px 20px;
      border-bottom: 1px solid var(--bdr);
      background: var(--bg2);
    }

    .b-summary-lbl {
      font-size: 10px;
      font-weight: 600;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 4px;
      opacity: 0.8;
    }

    .b-summary-val {
      font-size: 24px;
      font-weight: 700;
      color: var(--a);
      letter-spacing: -1px;
      margin-bottom: 10px;
      line-height: 1;
      font-family: 'DM Mono', monospace;
    }

    .b-summary-pills {
      display: flex;
      gap: 8px;
    }

    .b-pill-sm {
      font-size: 10px;
      font-weight: 700;
      padding: 3.5px 10px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .b-pill-sm.ing {
      background: var(--ok-bg);
      color: var(--ok-t);
      border: 1px solid rgba(21, 128, 61, 0.08);
    }

    .b-pill-sm.egr {
      background: var(--er-bg);
      color: var(--er-t);
      border: 1px solid rgba(220, 38, 38, 0.08);
    }

    .b-sidebar {
      width: 280px;
      flex-shrink: 0;
      border-right: 1px solid var(--bdr);
      background: var(--bg2);
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow-y: auto;
    }

    /* ── Mobile account chips ── */
    .b-chips-row {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 12px 14px 10px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .b-chips-row::-webkit-scrollbar { display: none; }

    .b-chip {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      min-width: 106px;
      flex-shrink: 0;
      padding: 9px 11px 8px;
      border-radius: 12px;
      border: 1.5px solid var(--bdr2);
      background: var(--bg2);
      cursor: pointer;
      transition: border-color .15s, background .15s;
    }
    .b-chip.sel {
      border-color: var(--a);
      background: rgba(var(--ar), .08);
    }
    .b-chip-ico {
      font-size: 18px;
      line-height: 1;
      margin-bottom: 2px;
    }
    .b-chip-nm {
      font-size: 11px;
      font-weight: 700;
      color: var(--t1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 90px;
    }
    .b-chip-sal {
      font-size: 12px;
      font-weight: 800;
      font-family: 'DM Mono', monospace;
      letter-spacing: -0.3px;
      white-space: nowrap;
    }

    .b-cuenta-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 18px;
      border-bottom: 1px solid var(--bdr);
      cursor: pointer;
      transition: background 0.15s, border-left 0.15s;
      background: transparent;
      margin: 0;
      border-radius: 0;
      border: none;
      border-left: 3px solid transparent;
    }

    .b-cuenta-row.sel {
      background: var(--bg3);
      border-left-color: var(--a);
    }

    .b-cuenta-nm {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--t1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .b-cuenta-saldo-v {
      font-size: 12px;
      font-weight: 700;
      font-family: 'DM Mono', monospace;
      letter-spacing: -0.3px;
      white-space: nowrap;
    }

    .b-cuenta-saldo-full {
      font-size: 9px;
      font-weight: 600;
      color: var(--t3);
      margin-top: 2px;
      opacity: 0.6;
    }

    .b-add-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      cursor: pointer;
      transition: background 0.2s;
      background: var(--bg3);
      border-top: 1px solid var(--bdr);
      color: var(--t3);
      font-weight: 600;
      font-size: 11.5px;
    }

    .b-add-row:hover {
      background: var(--bg4);
      color: var(--t1);
    }

    .acceso-box {
      background: var(--wn-bg);
      border: 1.5px solid rgba(146, 64, 14, 0.2);
      border-radius: 13px;
      padding: 24px;
      margin: 20px;
      text-align: center;
      box-shadow: var(--shd);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPRAS
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .b-oc-borrador {
      background: var(--bg3);
      color: var(--t2);
      border: 1px solid var(--bdr2)
    }

    .b-oc-enviada {
      background: var(--wn-bg);
      color: var(--wn-t)
    }

    .b-oc-pagada {
      background: var(--in-bg);
      color: var(--in-t)
    }

    .b-oc-recibida {
      background: var(--ok-bg);
      color: var(--ok-t)
    }

    .b-oc-devolucion {
      background: var(--er-bg);
      color: var(--er-t)
    }

    .oc-card {
      background: var(--card);
      border-radius: 11px;
      padding: 12px 13px;
      margin-bottom: 7px;
      border: 1px solid var(--bdr);
      box-shadow: var(--shd);
      cursor: pointer;
      transition: border-color .13s var(--ease-out), background .13s, box-shadow .13s;
      animation: ciin .15s ease both
    }

    .oc-card:active {
      transform: scale(.99);
      border-color: rgba(var(--ar), .3)
    }

    .oc-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px
    }

    .oc-id {
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--t3)
    }

    .oc-prov {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--t1);
      margin-top: 2px
    }

    .oc-total {
      font-size: 17px;
      font-weight: 900;
      color: var(--a);
      letter-spacing: -.3px;
      text-align: right
    }

    .oc-total-sub {
      font-size: 9px;
      color: var(--t3);
      font-weight: 600;
      text-align: right
    }

    .oc-action-bar {
      display: flex;
      gap: 7px;
      margin-top: 9px;
      padding-top: 9px;
      border-top: 1px solid var(--bdr)
    }

    .oc-act-btn {
      flex: 1;
      padding: 8px 8px;
      border: none;
      border-radius: var(--radius-sm);
      font-size: var(--text-sm);
      font-weight: 700;
      cursor: pointer;
      transition: background .13s var(--ease-out), color .13s, border-color .13s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px
    }

    .oc-act-btn:active {
      transform: scale(.97)
    }

    .oc-act-pago {
      background: var(--in-bg);
      color: var(--in-t);
      border: 1px solid rgba(29, 78, 216, .15)
    }

    .oc-act-recv {
      background: var(--ok-bg);
      color: var(--ok-t);
      border: 1px solid rgba(21, 128, 61, .15)
    }

    .oc-act-dev {
      background: var(--er-bg);
      color: var(--er-t);
      border: 1px solid rgba(220, 38, 38, .15)
    }

    .prov-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      background: rgba(var(--ar), .05);
      border: 1.5px solid rgba(var(--ar), .2);
      border-radius: 11px;
      margin-bottom: 8px
    }

    .oc-item-row {
      background: var(--card);
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 5px;
      border: 1px solid var(--bdr);
      animation: ciin .14s ease both
    }

    .oc-item-top {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 8px
    }

    .oc-item-bot {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .dev-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px solid var(--bdr)
    }

    .dev-item:last-child {
      border-bottom: none
    }

    .dev-qty-inp {
      width: 50px;
      padding: 6px 8px;
      background: var(--inp);
      border: 1.5px solid transparent;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 700;
      color: var(--t1);
      outline: none;
      text-align: center;
      transition: border-color .14s var(--ease-out), background .14s, box-shadow .14s
    }

    .dev-qty-inp:focus {
      border-color: var(--er);
      background: var(--bg2)
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   ANALÍTICA
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .list-cont {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      min-height: 0;
      display: flex;
      flex-direction: column;
      background: var(--bg3)
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   ANALÍTICA
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #view-analitica { background: var(--bg3); }

    .an-topbar {
      background: var(--hdr);
      border-bottom: 1px solid var(--bdr);
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .an-period-row,
    .an-sede-row {
      display: flex;
      gap: 3px;
      background: var(--bg3);
      padding: 3px;
      border-radius: 10px;
      border: 1px solid var(--bdr);
    }

    .an-per-btn,
    .an-sede-btn {
      padding: 8px 14px;
      border: 1px solid transparent;
      background: transparent;
      border-radius: 7px;
      font-size: 12px;
      font-weight: 700;
      color: var(--t2);
      cursor: pointer;
      transition: background .2s var(--ease-out), color .2s, box-shadow .2s;
      white-space: nowrap;
    }

    .an-per-btn.act,
    .an-sede-btn.act {
      background: var(--a);
      color: #fff;
      box-shadow: 0 2px 6px rgba(var(--ar),.25);
    }

    .an-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 14px 14px 60px;
      min-height: 0;
    }

    .an-section-lbl {
      font-size: 10px;
      font-weight: 800;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 10px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .an-section-lbl:first-child { margin-top: 0; }
    .an-section-lbl::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--bdr);
    }

    .an-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .an-kpi {
      background: var(--card);
      border-radius: 12px;
      padding: 13px 14px;
      border: 1px solid var(--bdr);
      box-shadow: var(--shd);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .an-kpi-ico {
      font-size: 18px;
      margin-bottom: 5px;
      line-height: 1;
    }

    .an-kpi-val {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -0.5px;
      line-height: 1.1;
      color: var(--t1);
    }

    .an-kpi-lbl {
      font-size: 10px;
      font-weight: 600;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .an-kpi-trend {
      font-size: 10px;
      font-weight: 600;
      color: var(--t3);
      margin-top: 2px;
    }
    .an-kpi-trend.up { color: var(--ok); }
    .an-kpi-trend.dn { color: var(--er); }

    .an-charts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }

    .an-card {
      background: var(--card);
      border-radius: 12px;
      padding: 14px 16px;
      border: 1px solid var(--bdr);
      box-shadow: var(--shd);
      display: flex;
      flex-direction: column;
    }

    .an-card-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      gap: 8px;
    }

    .an-card-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--t1);
    }

    .an-card-sub {
      font-size: 10px;
      font-weight: 600;
      color: var(--t3);
    }

    /* Barras horizontales */
    .an-hbar-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 7px;
    }
    .an-hbar-row:last-child { margin-bottom: 0; }
    .an-hbar-lbl {
      font-size: 11px;
      font-weight: 600;
      color: var(--t2);
      min-width: 90px;
      max-width: 110px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-shrink: 0;
    }
    .an-hbar-bg {
      flex: 1;
      height: 8px;
      background: var(--bg3);
      border-radius: 4px;
      overflow: hidden;
    }
    .an-hbar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width .5s cubic-bezier(.34,1.2,.64,1);
    }
    .an-hbar-val {
      font-size: 10.5px;
      font-weight: 800;
      color: var(--t2);
      min-width: 52px;
      text-align: right;
      flex-shrink: 0;
      font-family: 'DM Mono', monospace;
    }

    /* Mini tabla de ranking */
    .an-rank-row {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 5px 0;
      border-bottom: 1px solid var(--bdr);
    }
    .an-rank-row:last-child { border-bottom: none; }
    .an-rank-n {
      font-size: 10px;
      font-weight: 800;
      color: var(--t4);
      min-width: 16px;
      text-align: center;
    }
    .an-rank-info { flex: 1; min-width: 0; }
    .an-rank-nm {
      font-size: 11px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--t1);
    }
    .an-rank-sub {
      font-size: 9.5px;
      color: var(--t3);
      margin-top: 1px;
    }
    .an-rank-val {
      font-size: 11px;
      font-weight: 800;
      color: var(--t2);
      text-align: right;
      flex-shrink: 0;
      font-family: 'DM Mono', monospace;
    }

    /* Gráfica de barras verticales (ventas diarias/mensual) */
    .an-vchart {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 100px;
      padding-bottom: 18px;
      position: relative;
    }
    .an-vcol {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      height: 100%;
      position: relative;
    }
    .an-vbar {
      width: 100%;
      background: var(--a);
      border-radius: 3px 3px 0 0;
      min-height: 2px;
      opacity: .85;
      transition: height .4s;
    }
    .an-vcol:hover .an-vbar { opacity: 1; }
    .an-vlbl {
      position: absolute;
      bottom: 0;
      font-size: 7px;
      font-weight: 700;
      color: var(--t3);
      white-space: nowrap;
    }
    .an-vtooltip {
      display: none;
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--t1);
      color: var(--bg);
      font-size: 9px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
      z-index: 5;
    }
    .an-vcol:hover .an-vtooltip { display: block; }

    /* Donut canvas */
    .an-donut-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    #an-donut { flex-shrink: 0; }
    #an-donut-legend {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .an-leg-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
    }
    .an-leg-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .an-leg-lbl {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--t2);
    }
    .an-leg-val {
      font-size: 10px;
      font-weight: 800;
      color: var(--t3);
    }

    /* Tabla mensual */
    .an-mes-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    .an-mes-table th {
      text-align: left;
      padding: 9px 12px;
      font-size: 9.5px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 1.5px solid var(--bdr2);
      background: var(--bg3);
    }
    .an-mes-table th.r { text-align: right; }
    .an-mes-table td {
      padding: 6px 8px;
      border-bottom: 1px solid var(--bdr);
      vertical-align: middle;
    }
    .an-mes-table td.r {
      text-align: right;
      font-family: 'DM Mono', monospace;
      font-weight: 700;
    }
    .an-mes-table tr:hover td { background: var(--bg3); }

    /* Asesor badges */
    .an-asesor-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 0;
      border-bottom: 1px solid var(--bdr);
    }
    .an-asesor-row:last-child { border-bottom: none; }
    .an-asesor-av {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--a);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      flex-shrink: 0;
    }
    .an-asesor-info { flex: 1; min-width: 0; }
    .an-asesor-nm {
      font-size: 12px;
      font-weight: 700;
      color: var(--t1);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .an-asesor-sub { font-size: 10px; color: var(--t3); margin-top: 1px; }
    .an-asesor-val {
      font-size: 13px;
      font-weight: 800;
      color: var(--a);
      font-family: 'DM Mono', monospace;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   BANCOS — LISTA
━━━━━━━━━━━━━━━━━━━━━━━━━ */

    /* Estado de revisión — color de fila */
    tr.rev-revisar     { background: color-mix(in srgb, #f43f5e 8%, transparent) }
    tr.rev-en_revision { background: color-mix(in srgb, #eab308 10%, transparent) }
    tr.rev-revisado    { background: color-mix(in srgb, #22c55e 8%, transparent) }

    /* Selector de estado */
    .rev-sel {
      appearance: none;
      -webkit-appearance: none;
      border: 1.5px solid currentColor;
      border-radius: 20px;
      padding: 3px 22px 3px 9px;
      font-size: 10px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 7px center;
      white-space: nowrap;
      outline: none
    }
    .rev-sel-revisar     { color: #f43f5e; border-color: #f43f5e; background-color: color-mix(in srgb, #f43f5e 12%, transparent) }
    .rev-sel-en_revision { color: #b45309; border-color: #eab308; background-color: color-mix(in srgb, #eab308 14%, transparent) }
    .rev-sel-revisado    { color: #16a34a; border-color: #22c55e; background-color: color-mix(in srgb, #22c55e 12%, transparent) }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   PRICING
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #view-pricing {
      flex-direction: column;
      background: var(--bg2)
    }

    .pr-filters {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      padding: 9px 12px;
      border-bottom: 1px solid var(--bdr);
    }

    .pr-count {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--t3);
      padding: 5px 12px;
      background: var(--bg3);
      border-bottom: 1px solid var(--bdr);
      font-family: 'DM Mono', monospace;
      flex-shrink: 0
    }

    .pr-count b {
      color: var(--a)
    }

    .pr-table-wrap {
      flex: 1;
      overflow: auto;
      min-height: 0
    }

    .pr-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      min-width: 1100px
    }

    .pr-table thead th {
      position: sticky;
      top: 0;
      background: var(--bg3);
      padding: 9px 12px;
      text-align: left;
      font-size: 9.5px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 1.5px solid var(--bdr2);
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      z-index: 10
    }

    .pr-table thead th:hover {
      color: var(--t1)
    }

    .pr-table .pr-th .inv-th-wrap,
    .cst-table .cst-th .inv-th-wrap {
      min-width: 100%
    }

    .pr-table .pr-th.sorted .inv-th-sort,
    .cst-table .cst-th.sorted .inv-th-sort {
      color: var(--t1)
    }

    .pr-table .pr-th.filtered .inv-th-filter-ico,
    .pr-table .pr-th:hover .inv-th-filter-ico,
    .pr-table .pr-th.sorted .inv-th-sort-ico,
    .pr-table .pr-th:hover .inv-th-sort-ico,
    .cst-table .cst-th.filtered .inv-th-filter-ico,
    .cst-table .cst-th:hover .inv-th-filter-ico,
    .cst-table .cst-th.sorted .inv-th-sort-ico,
    .cst-table .cst-th:hover .inv-th-sort-ico {
      color: var(--a)
    }

    .pr-table .pr-th.filtered .inv-th-filter-ico,
    .cst-table .cst-th.filtered .inv-th-filter-ico {
      background: rgba(var(--ar), .12)
    }

    .pr-table thead th.pr-asc::after {
      content: ' ↑';
      color: var(--a)
    }

    .pr-table thead th.pr-desc::after {
      content: ' ↓';
      color: var(--a)
    }

    .pr-table tbody tr {
      border-bottom: 1px solid var(--bdr);
      transition: background .1s;
      cursor: default
    }

    .pr-table tbody tr:hover {
      background: var(--bg3)
    }

    .pr-table td {
      padding: 7px 10px;
      vertical-align: middle
    }

    .pr-code {
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      color: var(--t3)
    }

    .pr-name {
      max-width: 180px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      font-weight: 500
    }

    .pr-cat {
      font-size: 10.5px;
      color: var(--t2);
      white-space: nowrap
    }

    .pr-price {
      font-family: 'DM Mono', monospace;
      font-size: 11.5px
    }

    .pr-price.main {
      font-weight: 700;
      color: var(--t1)
    }

    .pr-price.muted {
      color: var(--t3)
    }

    .pr-mbadge {
      display: inline-flex;
      align-items: center;
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      font-family: 'DM Mono', monospace;
      white-space: nowrap
    }

    .pr-mbadge.ok {
      background: var(--ok-bg);
      color: var(--ok-t);
      border: 1px solid rgba(21, 128, 61, .2)
    }

    .pr-mbadge.wn {
      background: var(--wn-bg);
      color: var(--wn-t);
      border: 1px solid rgba(146, 64, 14, .2)
    }

    .pr-mbadge.er {
      background: var(--er-bg);
      color: var(--er-t);
      border: 1px solid rgba(220, 38, 38, .2)
    }

    .pr-mbadge.nu {
      background: var(--bg3);
      color: var(--t3);
      border: 1px solid var(--bdr)
    }

    .pr-sold-hi {
      color: var(--ok);
      font-family: 'DM Mono', monospace;
      font-weight: 700
    }

    .pr-sold-md {
      color: var(--t1);
      font-family: 'DM Mono', monospace
    }

    .pr-sold-lo {
      color: var(--t3);
      font-family: 'DM Mono', monospace
    }

    .pr-stk-ok {
      color: var(--ok);
      font-family: 'DM Mono', monospace
    }

    .pr-stk-lo {
      color: var(--wn);
      font-family: 'DM Mono', monospace
    }

    .pr-stk-er {
      color: var(--er);
      font-family: 'DM Mono', monospace
    }

    .pr-sugg {
      font-family: 'DM Mono', monospace;
      font-size: 11.5px;
      font-weight: 700
    }

    .pr-sugg.up {
      color: var(--ok)
    }

    .pr-sugg.dn {
      color: var(--wn)
    }

    .pr-sugg.eq {
      color: var(--t3)
    }

    .pr-rec {
      font-size: 10.5px;
      max-width: 180px;
      line-height: 1.3;
      white-space: normal
    }

    .pr-rec.ok {
      color: var(--ok-t)
    }

    .pr-rec.wn {
      color: var(--wn-t)
    }

    .pr-rec.er {
      color: var(--er-t)
    }

    .pr-rec.nu {
      color: var(--t3)
    }

    .pr-util {
      display: inline-flex;
      align-items: center;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      font-family: 'DM Mono', monospace;
      white-space: nowrap;
    }
    .pr-util.ok { background: var(--ok-bg); color: var(--ok-t); }
    .pr-util.wn { background: var(--wn-bg); color: var(--wn-t); }
    .pr-util.er { background: var(--er-bg); color: var(--er-t); }
    .pr-util.nu { background: var(--bg3); color: var(--t3); }

    .pr-rec-cell {
      min-width: 170px;
    }
    .pr-rec-price {
      font-family: 'DM Mono', monospace;
      font-size: 13px;
      font-weight: 800;
      color: var(--a);
      white-space: nowrap;
    }
    .pr-rec-sub {
      font-size: 10px;
      color: var(--t3);
      margin-top: 1px;
      white-space: nowrap;
    }
    .pr-rec-ok {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--ok-t);
    }
    .pr-prov-tag {
      font-size: 10px;
      color: var(--t3);
      white-space: nowrap;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   BANCOS MOBILE FIXES
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media(max-width: 767px) {
      #b-content {
        flex-direction: column !important;
        overflow-y: auto !important;
      }

      .b-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--bdr) !important;
        height: auto !important;
        flex-shrink: 0 !important;
        background: var(--card) !important;
      }

      #b-cuentas {
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
      }

      .b-add-btn-desktop {
        display: none !important;
      }

      .b-toolbar-btns {
        display: none !important;
      }

      .b-main {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        flex: none !important;
      }

      .b-toolbar-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
      }

      .b-summary-val {
        font-size: 28px !important;
      }

      /* Card layout for mobile movements */
      .b-mov-card {
        background: var(--card);
        margin: 8px 12px;
        padding: 14px;
        border-radius: 12px;
        border: 1px solid var(--bdr);
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: background .15s, border-color .15s
        position: relative;
        animation: ciin .15s ease both;
      }

      .b-mov-card.rev-card-revisar     { background: color-mix(in srgb, #f43f5e 7%, var(--card)); border-color: color-mix(in srgb, #f43f5e 25%, var(--bdr)) }
      .b-mov-card.rev-card-en_revision { background: color-mix(in srgb, #eab308 8%, var(--card)); border-color: color-mix(in srgb, #eab308 28%, var(--bdr)) }
      .b-mov-card.rev-card-revisado    { background: color-mix(in srgb, #22c55e 7%, var(--card)); border-color: color-mix(in srgb, #22c55e 25%, var(--bdr)) }

      .b-mov-card .card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }

      .b-mov-card .card-mid {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      .b-mov-card .id {
        font-family: 'DM Mono', monospace;
        font-size: 9px;
        color: var(--t3);
      }

      .b-mov-card .date {
        font-size: 11px;
        color: var(--t3);
        font-weight: 500;
      }

      .b-mov-card .desc {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--t1);
        line-height: 1.3;
      }

      .b-mov-card .acc {
        font-size: 11px;
        color: var(--a);
        font-weight: 600;
      }

      .b-mov-card .val {
        font-family: 'DM Mono', monospace;
        font-size: 16px;
        font-weight: 900;
      }

      .b-list-mobile {
        display: block;
      }

      .b-main table {
        display: none !important;
      }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   NAV DRAWER — mobile
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #nav-overlay   { display: none; }

    @media (max-width: 767px) {
      #nav-hamburger { display: flex; }
      /* Ocultar botones de utilidad del header — viven en el drawer */
      .hdr-util-btns { display: none; }

      /* Botones de acción — header claro en móvil */
      .hdr-act-btn {
        background: var(--a);
        border-color: transparent;
        color: #fff;
      }
      .hdr-act-btn:hover { background: var(--ad); }

      /* Icono lupa */
      #hdr-search-btn svg { stroke: var(--t1); }

      /* Tarjeta checkout más ancha en móvil */
      .panel-inner.panel-narrow {
        width: 95%;
        max-width: 95%;
        padding: 16px;
      }

      /* Búsqueda móvil: colapsada en centro del hdr-top, expandible en fila propia */
      #hdr-search { display: none; }
      .hdr-top { grid-template-columns: auto auto; }

      /* Botón lupa — visible solo cuando hay búsqueda activa (JS añade display:'') */
      /* #hdr-search-btn gestionado por JS */

      /* Fila expandible */
      #hdr-search-row {
        display: none;
        padding: 0 12px 10px;
      }
      #hdr-search-row.open {
        display: block;
      }
      #hdr-search-row .srb {
        width: 100%;
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: 10px;
        height: 40px;
      }
      #hdr-search-row .sri-inp {
        color: var(--t1);
        font-size: 14px;
      }
      #hdr-search-row .sri-inp::placeholder { color: var(--t3); }
      #hdr-search-row .sri svg { stroke: var(--t3); }
      #hdr-search-row .sri-x  { color: var(--t3); }

      /* Drawer mobile: mismo visual que sidebar desktop */
      .tabs {
        position: fixed;
        top: calc(56px + env(safe-area-inset-top, 0px)); left: 0; bottom: 0;
        width: 220px;
        flex-direction: column;
        overflow-y: auto; overflow-x: hidden;
        background: var(--bg2);
        border-right: 1px solid var(--bdr);
        border-bottom: none;
        padding: 8px;
        gap: 2px;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 4px 0 24px rgba(0,0,0,.10);
      }
      .tabs.nav-open { transform: translateX(0); }

      /* Tabs del drawer: misma base que .side-tab */
      .tab {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 9px 12px;
        border: none;
        background: none;
        border-radius: 8px;
        color: var(--t2);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        text-align: left;
        width: 100%;
        white-space: normal;
        transition: background .13s, color .13s;
      }
      .tab svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .5; }
      .tab:hover { background: var(--bg3); color: var(--t1); }
      .tab:hover svg { opacity: .8; }
      .tab.act {
        background: rgba(var(--ar), .12);
        color: var(--a);
        font-weight: 600;
      }
      .tab.act svg { opacity: 1; }
      .tab-admin {
        margin-top: 8px;
        border-top: 1px solid var(--bdr);
        padding-top: 12px;
      }

      /* Overlay oscuro detrás del drawer */
      #nav-overlay {
        display: block;
        position: fixed;
        top: calc(56px + env(safe-area-inset-top, 0px)); right: 0; bottom: 0; left: 0;
        background: rgba(0,0,0,.45);
        z-index: 299;
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
      }
      #nav-overlay.nav-open { opacity: 1; pointer-events: auto; }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   DESKTOP (≥768px)
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media(min-width:768px) {

      /* Header */
      .hdr-top {
        padding: 12px 24px 10px
      }

      .bname {
        font-size: 17px
      }

      #hdr-search .srb {
        background: var(--bg2);
        border-color: var(--bdr);
        width: 100%;
        max-width: 900px;
        height: 38px;
      }
      #hdr-search .sri-inp { color: var(--t1); }
      #hdr-search .sri-inp::placeholder { color: var(--t3); }
      #hdr-search .sri svg { stroke: var(--t3); }
      #hdr-search .sri-x  { color: var(--t3); }

      .hdr-act-btn {
        background: linear-gradient(135deg, var(--a) 0%, var(--ad) 100%);
        border: none;
        color: #fff;
        font-size: 12px;
        padding: 6px 14px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(var(--ar), .22);
      }
      .hdr-act-btn:hover {
        background: linear-gradient(135deg, var(--ad) 0%, var(--a) 100%);
      }

      /* Tabs — pill row horizontal */
      .tabs {
        padding: 0 16px 8px;
        gap: 3px
      }

      .tab {
        padding: 7px 16px 6px;
        font-size: 11px;
        letter-spacing: .25px
      }

      /* Sheets desktop — el panel se centra verticalmente */
      .sh-panel {
        margin-top: auto;
        margin-bottom: auto;
      }

      /* Lists — full width up to comfortable reading */
      .list-cont {
        max-width: 100%;
        padding: 12px 24px 20px
      }

      .panel-inner {
        padding: 18px 24px;
        max-width: 100%
      }
      .panel-inner.panel-narrow {
        width: 80%;
        max-width: 600px;
        padding: 20px;
      }

      /* Home grid — 6 columnas en desktop */
      .home-wrap {
        max-width: 900px;
        margin: 0 auto;
        padding: 32px 24px 60px;
      }
      .home-greeting { margin-bottom: 20px; }
      .home-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
      }
      .home-card {
        aspect-ratio: 1;
        padding: 12px 8px;
        gap: 7px;
      }
      .home-card-ico { width: 40px; height: 40px; border-radius: 11px; }
      .home-card-nm  { font-size: 12px; }

      /* Stats */
      .stat-n {
        font-size: 20px
      }

      /* FAB — maintain global alignment */
      .fab {
        width: 36px;
        height: 36px
      }

      /* Toolbars */
      .toolbar .srw {
        padding: 10px 20px 9px
      }

      .toolbar .chips {
        padding: 0 20px 9px
      }

      .an-topbar {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 9px 20px
      }

      .an-period-row,
      .an-sede-row {
        flex: none
      }

      .pr-filters {
        padding: 9px 20px
      }

      .pr-count {
        padding: 6px 20px
      }

      /* Analítica */
      .an-kpi-grid {
        grid-template-columns: repeat(4, 1fr)
      }

      .an-kpi {
        padding: 14px 16px
      }

      .an-kpi-val {
        font-size: 24px
      }

      .an-scroll {
        padding: 14px 20px 0;
        max-width: 100%
      }

      .an-bar-chart {
        height: 100px
      }

      .an-card {
        padding: 16px 18px
      }

      /* Bancos */
      .b-total-hdr {
        padding: 18px 24px 15px
      }

      .b-total-val {
        font-size: 36px
      }

      .b-cuenta-row {
        padding: 12px 22px
      }

      .b-add-row {
        padding: 11px 22px
      }

      #b-list {
        padding: 0 4px
      }

      /* Steppers */
      .stepper,
      .oc-timeline {
        padding: 12px 28px 10px;
        justify-content: center
      }

      .step {
        min-width: 70px
      }

      .bottom-bar,
      #v-bar,
      #t-bar,
      #oc-bar {
        padding: 10px 24px;
        max-width: 100%
      }

      /* Sede */
      .sede-grid {
        max-width: 380px;
        grid-template-columns: 1fr
      }

      /* Pricing table */
      .pr-kpi {
        padding: 8px 12px
      }

      .pr-kpi-val {
        font-size: 16px
      }

      .pr-table thead th {
        padding: 10px 12px
      }

      .pr-table td {
        padding: 9px 12px
      }

      .pr-name {
        max-width: 220px
      }

    }

    @media(min-width:1100px) {
      .hdr-top {
        padding: 12px 32px 10px
      }

      .tabs {
        padding: 0 24px 8px
      }

      .tab {
        padding: 14px 20px;
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: -0.2px;
        text-transform: none;
        color: var(--t2);
      }
      .tab.act {
        background: var(--a);
        color: #fff;
      }

      .list-cont {
        max-width: 100%;
        padding: 14px 32px 24px
      }

      .panel-inner {
        padding: 20px 32px
      }
      .panel-inner.panel-narrow {
        width: 80%;
        max-width: 600px;
        padding: 20px;
      }

      .an-scroll {
        padding: 16px 32px 0
      }

      .an-kpi-grid {
        grid-template-columns: repeat(4, 1fr)
      }

      .an-kpi-val {
        font-size: 26px
      }

      .an-kpi {
        padding: 16px 20px
      }

      .pr-kpi {
        padding: 9px 16px
      }

      .pr-kpi-val {
        font-size: 17px
      }

      .pr-filters {
        padding: 10px 28px
      }

      .pr-count {
        padding: 7px 28px
      }

      .pr-name {
        max-width: 260px
      }

      .pr-table {
        font-size: 12.5px
      }

      .pr-table thead th {
        font-size: 10px;
        padding: 11px 14px
      }

      .pr-table td {
        padding: 10px 14px
      }

      .b-total-hdr {
        padding: 22px 32px 18px
      }

      .b-total-val {
        font-size: 30px
      }

      .b-cuenta-row {
        padding: 13px 28px
      }

      .stepper,
      .oc-timeline {
        padding: 14px 40px 12px
      }

      .bottom-bar,
      #v-bar,
      #t-bar,
      #oc-bar {
        padding: 11px 32px
      }

      .toolbar .srw {
        padding: 11px 28px 9px
      }

      .toolbar .chips {
        padding: 0 28px 10px
      }

      .fab {
        right: 24px
      }

      .umenu {
        right: 24px;
        top: 64px
      }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   MÓDULO PEDIDOS
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #view-pedidos { background: var(--bg); }
    .ped-toolbar {
      background: var(--hdr);
      border-bottom: 1px solid var(--bdr);
      flex-shrink: 0;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ped-toolbar-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .ped-param-group {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--bg3);
      border: 1px solid var(--bdr);
      border-radius: 10px;
      padding: 5px 10px;
    }
    .ped-param-group label {
      font-size: 10px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .5px;
      white-space: nowrap;
    }
    .ped-param-inp {
      width: 58px;
      padding: 4px 8px;
      background: var(--bg2);
      border: 1.5px solid var(--bdr2);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 700;
      color: var(--t1);
      outline: none;
      text-align: center;
      font-family: 'DM Mono', monospace;
    }
    .ped-param-inp:focus { border-color: var(--a); box-shadow: 0 0 0 3px rgba(var(--ar),.1); }
    .ped-param-unit { font-size: 10px; color: var(--t3); font-weight: 600; }
    .ped-btn-calc {
      background: var(--a);
      color: #fff;
      border: none;
      border-radius: 9px;
      padding: 7px 16px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background .14s, transform .1s;
      white-space: nowrap;
    }
    .ped-btn-calc:hover { background: var(--ah); }
    .ped-btn-calc:active { transform: scale(.96); }
    .ped-btn-print {
      background: var(--bg3);
      color: var(--t2);
      border: 1px solid var(--bdr2);
      border-radius: 9px;
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background .14s;
      white-space: nowrap;
    }
    .ped-btn-print:hover { background: var(--bg4); }
    .ped-info-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      padding-right: 6px;
      border-right: 1.5px solid var(--bdr2);
      margin-right: 2px;
    }
    .ped-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
    }
    .ped-badge-urg { background: var(--er-bg); color: var(--er-t); }
    .ped-badge-all { background: var(--in-bg); color: var(--in-t); }
    .ped-badge-ec  { background: var(--wn-bg); color: var(--wn-t); }
    .ped-badge-ec:hover { filter: brightness(.93); }
    .ped-badge-total { background: var(--ok-bg); color: var(--ok-t); }
    /* Filtros wrap — inline en desktop, colapsable en mobile */
    .ped-filtros-wrap { display: contents; }
    .ped-actions-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      flex-shrink: 0;
    }
    .ped-filt-toggle { display: none; }
    @media (max-width: 640px) {
      .ped-filt-toggle {
        display: flex; align-items: center; gap: 6px;
        background: var(--bg3); border: 1px solid var(--bdr2);
        border-radius: 9px; padding: 7px 12px;
        font-size: 12px; font-weight: 700; color: var(--t2);
        cursor: pointer; white-space: nowrap;
      }
      .ped-filt-toggle.open { background: var(--in-bg); color: var(--in-t); border-color: var(--in-t); }
      .ped-filtros-wrap {
        display: none; flex-direction: column; gap: 8px;
        width: 100%; order: 10;
      }
      .ped-filtros-wrap.open { display: flex; }
      .ped-filtros-wrap .ped-param-group { width: 100%; box-sizing: border-box; }
      .ped-filtros-wrap .inv-fchip { width: 100%; box-sizing: border-box; }
      .ped-actions-row {
        display: flex; align-items: center; gap: 6px; flex: 1; justify-content: flex-end;
      }
      .ped-btn-lbl { display: none; }
      .ped-toolbar-row { flex-wrap: wrap; }
    }
    .ped-scroll {
      flex: 1;
      overflow-y: auto;
      overflow-x: auto;
      padding: 12px 14px 80px;
      min-height: 0;
    }
    .ped-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      color: var(--t3);
      gap: 8px;
      text-align: center;
    }
    .ped-empty svg { opacity: .25; }
    .ped-empty p { font-size: 13px; font-weight: 600; }
    .ped-empty span { font-size: 12px; }
    .ped-table-wrap {
      min-width: 900px;
    }
    .ped-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }
    .ped-table thead th {
      position: sticky;
      top: 0;
      background: var(--bg3);
      border-bottom: 1.5px solid var(--bdr2);
      padding: 9px 10px;
      text-align: left;
      font-size: 9.5px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .5px;
      white-space: nowrap;
      z-index: 2;
    }
    .ped-table thead th.th-r { text-align: right; }
    .ped-table tbody tr {
      border-bottom: 1px solid var(--bdr);
      transition: background .1s;
    }
    .ped-table tbody tr:hover { background: var(--bg3); }
    .ped-table tbody tr.ped-row-urg { background: color-mix(in srgb, var(--er) 5%, transparent); }
    .ped-table tbody tr.ped-row-urg:hover { background: color-mix(in srgb, var(--er) 10%, transparent); }
    .ped-table td { padding: 9px 10px; vertical-align: middle; }
    .ped-td-id {
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      color: var(--a);
      font-weight: 700;
      white-space: nowrap;
    }
    .ped-td-name {
      font-weight: 600;
      color: var(--t1);
      min-width: 160px;
    }
    .ped-td-sub {
      font-size: 11px;
      color: var(--t3);
      white-space: nowrap;
    }
    .ped-td-prov {
      font-size: 11px;
      color: var(--t2);
      white-space: nowrap;
    }
    .ped-td-num {
      text-align: right;
      font-family: 'DM Mono', monospace;
      font-weight: 600;
      color: var(--t2);
      white-space: nowrap;
    }
    .ped-td-inv {
      text-align: right;
      font-family: 'DM Mono', monospace;
      font-weight: 700;
      vertical-align: middle;
      line-height: 1;
    }
    .ped-td-inv.inv-ok { color: var(--ok); }
    .ped-td-inv.inv-low { color: var(--wn); }
    .ped-td-inv.inv-out { color: var(--er); }
    .ped-td-sug {
      text-align: right;
      font-family: 'DM Mono', monospace;
      font-weight: 800;
      color: var(--a);
    }
    .ped-inp-qty {
      width: 72px;
      padding: 5px 8px;
      background: var(--bg2);
      border: 1.5px solid var(--bdr2);
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
      color: var(--t1);
      text-align: right;
      font-family: 'DM Mono', monospace;
      outline: none;
      display: block;
      margin-left: auto;
    }
    .ped-td-qty { text-align: right; }
    .ped-td-cost { text-align: right; }
    .ped-inp-qty:focus { border-color: var(--a); box-shadow: 0 0 0 3px rgba(var(--ar),.1); }
    .ped-inp-cost {
      width: 90px;
      padding: 5px 8px;
      background: var(--bg2);
      border: 1.5px solid var(--bdr2);
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 700;
      color: var(--t1);
      text-align: right;
      font-family: 'DM Mono', monospace;
      outline: none;
      display: block;
      margin-left: auto;
    }
    .ped-inp-cost:focus { border-color: var(--a); box-shadow: 0 0 0 3px rgba(var(--ar),.1); }
    .ped-td-total {
      text-align: right;
      font-family: 'DM Mono', monospace;
      font-weight: 700;
      color: var(--t1);
      white-space: nowrap;
    }
    .ped-td-urg {
      text-align: center;
    }
    .ped-urg-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--er);
      box-shadow: 0 0 0 3px rgba(185,28,28,.15);
    }
    .ped-summary-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--hdr);
      border-top: 1.5px solid var(--bdr);
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      z-index: 50;
      box-shadow: 0 -4px 20px rgba(0,0,0,.07);
    }
    .ped-sum-group { display: flex; flex-direction: column; gap: 1px; }
    .ped-sum-label { font-size: 9px; text-transform: uppercase; letter-spacing: .6px; color: var(--t3); font-weight: 700; }
    .ped-sum-val { font-size: 15px; font-weight: 800; color: var(--t1); font-family: 'DM Mono', monospace; }
    .ped-sum-val.val-total { color: var(--a); font-size: 17px; }

    /* ── PRINT ── */
    @media print {
      body > *:not(#app) { display: none !important; }
      #app > *:not(#view-pedidos) { display: none !important; }
      .ped-toolbar, .ped-summary-bar, header { display: none !important; }
      #view-pedidos { display: flex !important; overflow: visible !important; }
      .ped-scroll { overflow: visible !important; padding: 0 !important; }
      .print-hide { display: none !important; }
      .print-show { display: table-cell !important; }
      .ped-table tbody tr.ped-row-urg { background: #fff2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .ped-table { font-size: 11px; }
      .ped-inp-qty, .ped-inp-cost { border: none; background: transparent; font-size: 11px; }
    }

    /* ── Botones tipo movimiento bancario ── */
    .tipo-grid { display: flex; gap: 8px; }
    .tipo-card {
      flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
      padding: 10px 0; border-radius: 8px; cursor: pointer; user-select: none;
      border: 2px solid var(--br); background: var(--bg2);
      font-size: 14px; font-weight: 600; color: var(--t2);
      transition: border-color .15s, background .15s, color .15s;
    }
    .tipo-card:hover { border-color: var(--in); color: var(--in); }
    .tipo-card .tipo-ico { font-size: 16px; line-height: 1; }
    .tipo-card .tipo-lbl { line-height: 1; }
    .tipo-card.sel-ing { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
    .tipo-card.sel-egr { border-color: var(--er); background: color-mix(in srgb, var(--er) 12%, transparent); color: var(--er); }
    .tipo-card.sel-tra { border-color: var(--in); background: color-mix(in srgb, var(--in) 12%, transparent); color: var(--in); }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCESSIBILITY
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    @media (hover: hover) and (pointer: fine) {
      .card:hover {
        border-color: rgba(var(--ar), .25);
        transform: translateY(-1px);
        box-shadow: var(--shd2);
      }

      .tbl tbody tr:hover {
        background: var(--bg3);
      }

      .b-cuenta-row:hover {
        background: var(--bg3);
        border-left-color: var(--a);
      }
    }

    @media print {
      /* Mostrar encabezado y pie */
      #ped-print-header { display: block !important; }
      #ped-print-footer { display: block !important; }

      /* Ocultar elementos de UI */
      .ped-toolbar { display: none !important; }
      .ped-info-bar { display: none !important; }
      .ped-summary-bar { display: none !important; }
      tr.ped-zero-qty { display: none !important; }
      .print-hide { display: none !important; }

      /* Mostrar tabla y scroll */
      #ped-scroll { display: block !important; }
      .ped-empty { display: none !important; }
      .ped-table-wrap { display: block !important; }

      /* Estilos de impresión */
      body { background: white; }
      .view { background: white; }
      #view-pedidos { padding: 0; }

      /* Tabla */
      .ped-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
      .ped-table th, .ped-table td { padding: 8px 12px; border: 1px solid #ddd; text-align: left; }
      .ped-table th { background: #f5f5f5; font-weight: bold; }
      .ped-table th.th-r, .ped-td-qty, .ped-td-cost { text-align: right; }
      .ped-table tbody tr:nth-child(even) { background: #fafafa; }

      /* Subtotales */
      .ped-table tfoot { display: table-footer-group; font-weight: bold; background: #f5f5f5; }
      .ped-table tfoot td { padding: 12px; border: 1px solid #ddd; }
      .ped-table tfoot tr:first-child { border-top: 2px solid #333; }

      /* Encabezado */
      #ped-print-header { margin-bottom: 20px; }
      #ped-print-header img { display: block; margin: 0 auto 15px; }
      #ped-print-header h1 { margin: 0 0 10px 0; page-break-after: avoid; }

      /* Pie */
      #ped-print-footer { margin-top: 30px; font-size: 11px; }
      #ped-print-footer p { margin: 3px 0; }

      /* Evitar saltos de página en elementos importantes */
      .ped-table { page-break-inside: avoid; }
      tr { page-break-inside: avoid; }
    }

    /* ── Pedidos: tarjetas mobile (override — debe ir después de .ped-scroll/.ped-table-wrap) ── */
    @media (max-width: 640px) {
      .ped-scroll { overflow-x: hidden; }
      .ped-table-wrap { min-width: 0; width: 100%; box-sizing: border-box; }
      .ped-table { display: block; width: 100%; max-width: 100%; box-sizing: border-box; }
      .ped-table tbody { display: block; width: 100%; }
      .ped-table thead { display: none; }
      .ped-table tbody tr {
        display: grid;
        grid-template-areas:
          "urg id   id   id"
          "nom nom  nom  nom"
          "prv prv  inv  sug"
          "qty cost tot  tot";
        grid-template-columns: auto 1fr 1fr 1fr;
        gap: 4px 10px;
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 10px;
      }
      .ped-table td { display: block; padding: 0; border: none; font-size: 12px; }
      .ped-td-urg  { grid-area: urg; display: flex; align-items: center; }
      .ped-td-id   { grid-area: id; font-size: 11px; color: var(--t3); align-self: center; }
      .ped-td-name { grid-area: nom; font-size: 13px; font-weight: 700; min-width: 0; word-break: break-word; }
      .ped-td-sub  { display: none !important; }
      .ped-td-prov { grid-area: prv; font-size: 11px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
      .ped-td-num  { display: none !important; }
      .ped-td-inv  { grid-area: inv; text-align: left; min-width: 0; }
      .ped-td-sug  { grid-area: sug; text-align: left; min-width: 0; }
      .ped-td-qty  { grid-area: qty; text-align: left; min-width: 0; }
      .ped-td-cost { grid-area: cost; text-align: left; min-width: 0; }
      .ped-td-inv::before  { content: "Stock"; font-size: 10px; color: var(--t3); font-weight: 600; display: block; }
      .ped-td-sug::before  { content: "Sug"; font-size: 10px; color: var(--t3); font-weight: 600; display: block; }
      .ped-td-qty::before  { content: "Cant"; font-size: 10px; color: var(--t3); font-weight: 600; display: block; }
      .ped-td-cost::before { content: "Costo"; font-size: 10px; color: var(--t3); font-weight: 600; display: block; }
      .ped-td-total { grid-area: tot; text-align: right; font-size: 14px; font-weight: 700; align-self: end; min-width: 0; }
      .ped-inp-qty  { width: 100%; max-width: 100%; box-sizing: border-box; margin-left: 0; }
      .ped-inp-cost { width: 100%; max-width: 100%; box-sizing: border-box; margin-left: 0; }
    }

    /* tarjetas mobile — ocultas por defecto, visibles solo en ≤767px */
    .prod-td-card, .cst-td-card, .cli-td-card { display: none !important; }

    /* ── Tabla de clientes ── */
    .cli-table { width:100%; border-collapse:collapse; font-size:13px; }
    .cli-table thead tr { border-bottom:2px solid var(--bdr); }
    .cli-table th { padding:8px 12px; text-align:left; font-size:11px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
    .cli-table td { padding:9px 12px; border-bottom:1px solid var(--bdr); vertical-align:middle; transition: background 120ms var(--ease-out); }
    .cli-table tbody tr:last-child td { border-bottom:none; }
    @media (hover: hover) and (pointer: fine) {
      .cli-table tbody tr:hover td { background:var(--hover); }
    }
    #cli-list { overflow-x:auto; }


    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       PRICING — filtros colapsables mobile
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    /* Desktop: grupo inline dentro del flex de pr-filters */
    .pr-filt-group {
      display: contents; /* se integra en el flex padre sin crear caja extra */
    }

    @media (max-width: 640px) {
      .pr-filters { flex-wrap: wrap; }

      /* Búsqueda ocupa todo el ancho disponible */
      .pr-filters > .srb { max-width: 100% !important; flex: 1; }

      /* Grupo colapsable: ocupa línea propia y se oculta por defecto */
      .pr-filt-group {
        display: none;
        width: 100%;
        flex-wrap: wrap;
        gap: 7px;
        padding-top: 4px;
      }
      .pr-filt-group.chips-open {
        display: flex;
      }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       PRICING — tarjetas mobile
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media (max-width: 640px) {
      .pr-table-wrap { overflow-y: auto; overflow-x: hidden; background: var(--bg3); }

      .pr-table { display: block; width: 100%; min-width: 0; }
      .pr-table thead { display: none; }
      .pr-table tbody { display: block; padding: 8px; }

      .pr-row {
        display: grid;
        grid-template-areas:
          "id   nom  nom"
          "cat  prov cost"
          "p1   p2   p3"
          "u1   u2   u3"
          "rec  rec  rec";
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        box-sizing: border-box;
        background: var(--card);
        border-radius: 12px;
        margin-bottom: 6px;
        border-bottom: none !important;
        overflow: hidden;
      }

      .pr-table td.pr-td-id   { grid-area: id;   padding: 12px 4px 4px 14px !important; min-width: 0; }
      .pr-table td.pr-td-nom  { grid-area: nom;  padding: 12px 14px 4px 4px !important; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
      .pr-table td.pr-td-cat  { grid-area: cat;  padding: 0 4px 6px 14px !important; font-size: 11px !important; min-width: 0; }
      .pr-table td.pr-td-prov { grid-area: prov; padding: 0 4px 6px !important; font-size: 11px !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .pr-table td.pr-td-cost { grid-area: cost; padding: 0 14px 6px 4px !important; text-align: right !important; font-size: 11px !important; }
      .pr-table td.pr-td-p1   { grid-area: p1;   padding: 6px 4px 2px 14px !important; text-align: left !important; }
      .pr-table td.pr-td-p2   { grid-area: p2;   padding: 6px 4px 2px !important; text-align: center !important; }
      .pr-table td.pr-td-p3   { grid-area: p3;   padding: 6px 4px 2px 14px !important; text-align: right !important; }
      .pr-table td.pr-td-u1   { grid-area: u1;   padding: 2px 4px 8px 14px !important; text-align: left !important; }
      .pr-table td.pr-td-u2   { grid-area: u2;   padding: 2px 4px 8px !important; text-align: center !important; }
      .pr-table td.pr-td-u3   { grid-area: u3;   padding: 2px 4px 8px 14px !important; text-align: right !important; }
      .pr-table td.pr-td-rec  { grid-area: rec;  padding: 6px 14px 10px !important; border-top: 1px solid var(--bdr); display: flex; align-items: center; gap: 8px; }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       COSTOS — tarjetas mobile
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media (max-width: 640px) {
      #costos-table-wrap { overflow: hidden; background: var(--bg3); }

      .cst-table { display: block; width: 100%; }
      .cst-table thead { display: none; }
      .cst-table tbody { display: block; padding: 8px; }

      .cst-row {
        display: block;
        background: var(--card);
        border-radius: 14px;
        border: 1px solid var(--bdr);
        margin-bottom: 8px;
        box-shadow: var(--shd);
        overflow: hidden;
        cursor: pointer;
      }
      .cst-row td { display: none !important; }
      .cst-row td.cst-td-card { display: block !important; padding: 0 !important; }

      .cli-row { display: block; background: var(--card); border-radius: 14px; border: 1px solid var(--bdr); margin-bottom: 8px; box-shadow: var(--shd); overflow: hidden; }
      .cli-row td { display: none !important; }
      .cli-row td.cli-td-card { display: block !important; padding: 0 !important; }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       PRODUCTOS — tarjetas mobile
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media (max-width: 640px) {
      #prod-list { overflow-x: hidden; background: var(--bg3); }

      .prod-table { display: block; width: 100%; min-width: 0 !important; }
      .prod-table thead { display: none; }
      .prod-table tbody { display: block; padding: 8px; }

      /* Convertir cada fila en tarjeta estilo inv-card */
      .prod-row {
        display: block;
        background: var(--card);
        border-radius: 14px;
        border: 1px solid var(--bdr);
        margin-bottom: 8px;
        box-shadow: var(--shd);
        overflow: hidden;
        cursor: pointer;
      }

      /* Ocultar todas las celdas — el contenido lo genera prod-td-card */
      .prod-row td { display: none !important; }
      .prod-row td.prod-td-card { display: block !important; padding: 0 !important; width: 100%; box-sizing: border-box; }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       CLIENTES — tarjetas mobile
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media (max-width: 640px) {
      #cli-list { overflow-x: hidden; background: var(--bg3); }

      .cli-table { display: block; width: 100%; }
      .cli-table thead { display: none; }
      .cli-table tbody { display: block; padding: 8px; }

      .cli-row {
        display: grid;
        grid-template-areas:
          "nom  nom  est"
          "cc   ciu  can";
        grid-template-columns: 1fr auto auto;
        grid-template-rows: auto auto;
        width: 100%;
        box-sizing: border-box;
        background: var(--card);
        border-radius: 12px;
        margin-bottom: 6px;
        border-bottom: none !important;
        overflow: hidden;
      }

      .cli-td-nom { grid-area: nom; padding: 12px 10px 6px 14px !important; }
      .cli-td-est { grid-area: est; padding: 12px 14px 6px 6px !important; display: flex; align-items: flex-start; justify-content: flex-end; }
      .cli-td-cc  { grid-area: cc;  padding: 0 8px 12px 14px !important; }
      .cli-td-ciu { grid-area: ciu; padding: 0 8px 12px !important; font-size: 11px !important; }
      .cli-td-can { grid-area: can; padding: 0 14px 12px 0 !important; display: flex; align-items: flex-start; }
    }

    /* Contenedor de la tabla de ventas — fondo para el gap entre tarjetas */
    .vh-wrap { background: var(--bg1); border-radius: 10px; overflow: hidden; padding: 6px }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       HISTORIAL VENTAS — tarjetas mobile
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media (max-width: 640px) {
      .vh-table { display: block; width: 100%; }
      .vh-thead { display: none; }
      .vh-table { background: var(--bg3) !important; }
      .vh-table tbody { display: block; padding: 8px; gap: 6px; }

      .vh-row {
        display: grid;
        grid-template-areas:
          "meta act"
          "cli  cli"
          "pay  pay";
        grid-template-columns: auto 1fr;
        width: 100%;
        box-sizing: border-box;
        background: var(--card) !important;
        border-radius: 12px;
        margin-bottom: 6px;
        border-bottom: none !important;
        overflow: hidden;
      }

      .vh-td-meta { grid-area: meta; padding: 12px 10px 8px 14px !important; white-space: nowrap; }
      .vh-td-cli  { grid-area: cli;  padding: 0 14px 8px !important; }
      .vh-td-pay  { grid-area: pay;  padding: 0 14px 12px !important; }
      .vh-td-act  {
        grid-area: act;
        padding: 10px 14px 8px 6px !important;
        white-space: nowrap;
        text-align: right !important;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
      }
      /* Botones en fila compacta dentro del td-act */
      .vh-td-act > div:last-child {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px !important;
        margin-top: 4px !important;
      }
      .vh-td-act .btn { width: auto !important; padding: 5px 9px !important; font-size: 10.5px !important; }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ESTANDARIZACIÓN TOOLBARS MOBILE
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    /* Botón toggle filtros: oculto en desktop */
    .mob-chip-toggle {
      display: none;
    }

    /* Ventas historial extras: siempre visibles en desktop */
    .vh-extras {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0 12px 8px;
      flex-wrap: wrap;
    }
    .vh-kpis {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 0 10px;
      border-left: 1px solid var(--bdr);
      border-right: 1px solid var(--bdr);
      white-space: nowrap;
    }
    .vh-kpi {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .vh-kpi-lbl {
      font-size: 7px;
      font-weight: 800;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .vh-kpi-val {
      font-size: 13px;
      font-weight: 900;
      color: var(--t1);
      font-family: 'DM Mono', monospace;
    }

    @media (max-width: 767px) {
      /* Financiero toolbar: pestañas en primera fila, selector mes en segunda */
      .fin-toolbar { gap: 6px; padding: 8px 12px 6px }
      .fin-mes-wrap {
        margin-left: 0 !important;
        width: 100%;
        justify-content: flex-end
      }
      .fin-mes-wrap #fin-mes { flex: 1; width: 100% }
    }

/* Encargos product dropdown */
.enc-prod-opt:hover { background: color-mix(in srgb, var(--acc) 8%, transparent) }
.enc-prod-opt:last-child { border-bottom: none !important }

/* Permissions checkbox grid */
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 6px; padding: 10px 12px; background: var(--bg2); border-radius: 10px; border: 1px solid var(--brd) }
.perm-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tx); cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: background .15s }
.perm-item:hover { background: color-mix(in srgb, var(--acc) 10%, transparent) }
.perm-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--acc); cursor: pointer; flex-shrink: 0 }
.perm-todos { grid-column: 1 / -1; font-weight: 600; border-bottom: 1px solid var(--brd); padding-bottom: 8px; margin-bottom: 2px }

    @media (max-width: 640px) {
      /* Toolbar: buscador en primera fila, botones en segunda */
      .srw {
        flex-wrap: wrap;
        padding: 8px 10px 6px;
        gap: 6px
      }
      .srw > .srb {
        flex: 1 1 100%;
        min-width: 0
      }
      /* Los botones (.mob-chip-toggle + .ico-btn) forman la segunda fila */
      .srw > .mob-chip-toggle,
      .srw > .ico-btn {
        flex-shrink: 0
      }
      /* El último .ico-btn que sea solo icono no necesita crecer */
      .srw > .mob-chip-toggle {
        flex: 1;
        justify-content: center
      }

      /* Mostrar toggle en mobile */
      .mob-chip-toggle {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
        white-space: nowrap;
        padding: 6px 11px;
        background: var(--bg3);
        border: 1.5px solid var(--bdr);
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        color: var(--t2);
        cursor: pointer;
        transition: background .13s, border-color .13s, color .13s;
      }
      .mob-chip-toggle.act {
        border-color: var(--a);
        color: var(--a);
        background: rgba(var(--ar), .08);
      }

      /* Chips: ocultos por defecto en mobile */
      .toolbar .chips {
        display: none;
      }
      .toolbar .chips.chips-open {
        display: flex;
      }

      /* Ventas historial extras: colapsable en mobile */
      .vh-extras {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 12px;
        border-top: 1px solid var(--bdr);
      }
      .vh-extras.vh-open {
        display: flex;
      }
      .vh-kpis {
        border: none;
        padding: 0;
        gap: 18px;
      }
      .vh-kpi-val {
        font-size: 15px;
      }
    }

    /* ── Balance general: columnas adaptables ── */
    #fin-view-bg > div {
      grid-template-columns: 1fr minmax(280px, 420px);
    }
    @media (max-width: 900px) {
      #fin-view-bg > div {
        grid-template-columns: 1fr !important;
      }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SKELETON LOADERS
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .skeleton {
      background: linear-gradient(
        90deg,
        var(--bg3) 0%,
        var(--bg4) 50%,
        var(--bg3) 100%
      );
      background-size: 200% 100%;
      animation: shimmer 1.5s ease-in-out infinite;
      border-radius: var(--radius-sm)
    }

    @keyframes shimmer {
      0% { background-position: 200% 0 }
      100% { background-position: -200% 0 }
    }

    .skeleton-card {
      height: 80px;
      margin-bottom: 6px;
      border-radius: 11px
    }

    .skeleton-text {
      height: 14px;
      margin-bottom: 6px;
      border-radius: var(--radius-xs)
    }

    .skeleton-text.sm { width: 55%; height: 12px }
    .skeleton-text.md { width: 75% }
    .skeleton-text.lg { width: 90% }

    .skeleton-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 13px;
      margin-bottom: 6px;
      background: var(--card);
      border-radius: 11px;
      border: 1px solid var(--bdr)
    }

    .skeleton-avatar {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      flex-shrink: 0
    }

    .skeleton-lines {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    @media (prefers-reduced-motion: reduce) {
      .skeleton { animation: none; background: var(--bg3) }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   CELDAS DE TABLA ESTÁNDAR
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    /* Padding base aplicado a todas las tablas data-table */
    .data-table td,
    .cst-table td,
    .pr-table td {
      padding: 9px 14px;
      vertical-align: middle;
      border-bottom: 1px solid var(--bdr);
      font-size: 13px;
      color: var(--t1);
    }

    /* Headers unificados para tablas JS-rendered */
    .data-table thead th,
    .cst-table thead th {
      position: sticky;
      top: 0;
      background: var(--bg3);
      padding: 9px 14px;
      text-align: left;
      font-size: 9.5px;
      font-weight: 700;
      color: var(--t3);
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 1.5px solid var(--bdr2);
      white-space: nowrap;
      z-index: 10;
    }

    .data-table tbody tr:hover td,
    .cst-table tbody tr:hover td {
      background: var(--bg3);
    }

    /* ID / código — mono discreto */
    .td-id {
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      color: var(--t3);
      white-space: nowrap;
    }

    /* Nombre / texto principal */
    .td-main {
      color: var(--t1);
      font-weight: 500;
    }

    /* Texto secundario (categoría, sede, etc.) */
    .td-sec {
      font-size: 12px;
      color: var(--t2);
    }

    /* Texto terciario / muted */
    .td-muted {
      font-size: 12px;
      color: var(--t3);
    }

    /* Número mono — stock, unidades */
    .td-num {
      font-family: 'DM Mono', monospace;
      color: var(--t2);
      text-align: right;
      white-space: nowrap;
    }

    /* Importe monetario */
    .td-money {
      font-family: 'DM Mono', monospace;
      color: var(--t1);
      text-align: right;
      white-space: nowrap;
    }

    /* Importe monetario destacado (total, acento) */
    .td-money-accent {
      font-family: 'DM Mono', monospace;
      font-weight: 600;
      color: var(--a);
      text-align: right;
      white-space: nowrap;
    }

    /* Fecha */
    .td-date {
      font-size: 12px;
      color: var(--t3);
      white-space: nowrap;
    }

    /* Alineación */
    .td-r { text-align: right; }
    .td-c { text-align: center; }

    /* Margen % — color semántico via JS solo en el span, no en el td */
    .td-pct {
      font-family: 'DM Mono', monospace;
      text-align: center;
      white-space: nowrap;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━
   UTILIDADES TIPOGRÁFICAS
━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .text-meta {
      font-size: var(--text-sm);
      color: var(--t3);
      font-weight: 500;
    }

    .text-label {
      font-size: var(--text-xs);
      color: var(--t2);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    .text-mono {
      font-family: 'DM Mono', monospace;
    }

    .text-amount {
      font-family: 'DM Mono', monospace;
      font-weight: 700;
      color: var(--a);
    }

    .text-muted {
      color: var(--t3);
      font-weight: 500;
    }

    .text-strong {
      font-weight: 700;
      color: var(--t1);
    }

    /* ── Admin panel ─────────────────────────────────────────────── */
    .tab-admin {
      border-left: 1.5px solid rgba(255,255,255,.12);
      margin-left: 4px
    }

    .adm-panel {
      flex: 1;
      min-height: 0;
      overflow: hidden
    }




/* ── Módulo Tareas: chips de menciones y productos ── */
.tar-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg3);
  border: 1px solid var(--brd);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
}
.tar-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--t3);
  font-size: 13px;
  padding: 0;
  line-height: 1;
}
.tar-chip-remove:hover { color: var(--er); }

/* ── Indicador "en camino" — inventario ─── */
@keyframes ec-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255,102,0,.55); }
  60%  { box-shadow: 0 0 0 7px rgba(255,102,0,0);   }
  100% { box-shadow: 0 0 0 0   rgba(255,102,0,0);   }
}
.ec-badge-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 4px;
}
.ec-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ff6600;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .15s;
  animation: ec-pulse 2.4s ease-out infinite;
  margin: 0;
}
.ec-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  background: rgba(255,255,255,.8);
  border-radius: 50%;
  flex-shrink: 0;
}
.ec-badge:hover { background: #e05500; transform: scale(1.04); animation-play-state: paused; }
.ec-oc-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--bdr);
}
.ec-oc-row:last-child { border-bottom: none; }
.ec-oc-id { font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.ec-oc-info { font-size: 12px; color: var(--t2); margin-bottom: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.ec-oc-detail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-oc-qty { font-size: 14px; font-weight: 800; color: #ea580c; font-family: 'DM Mono', monospace; }
.ec-oc-fecha { font-size: 11px; color: var(--t3); }

    /* ── Encargos: vista card en móvil ── */
    @media (max-width: 640px) {
      .enc-table-wrap { overflow-x: hidden; padding: 0 !important; }

      #enc-tabla { display: block; width: 100%; box-sizing: border-box; }
      #enc-tabla thead { display: none; }
      #enc-tabla tbody { display: block; padding: 8px 12px 80px; box-sizing: border-box; }

      /* Cada fila = card flex con wrap */
      #enc-tabla tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: var(--bg2);
        border: 1px solid var(--bdr);
        border-radius: 14px;
        padding: 12px;
        margin-bottom: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        gap: 0;
      }

      #enc-tabla td { display: block; border: none; padding: 0; }

      /* Fila 1: ID ocupa todo el ancho */
      .enc-td-id {
        width: 100%;
        font-family: 'DM Mono', monospace;
        font-size: 10px;
        color: var(--a);
        font-weight: 700;
        margin-bottom: 4px;
      }

      /* Fila 2: Cliente ocupa todo el ancho */
      .enc-td-cli {
        width: 100%;
        font-size: 15px;
        font-weight: 700;
        color: var(--t1);
        padding-bottom: 10px !important;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--bdr);
      }

      /* Fila 3: Productos ocupa todo el ancho */
      .enc-td-prods {
        width: 100%;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--bdr);
        overflow: hidden;
      }
      .enc-td-prods .ec-badge { font-size: 9px; padding: 2px 7px; }
      /* Select de estado del item: no se sale de la tarjeta */
      .enc-td-prods select {
        max-width: 110px !important;
        font-size: 9px !important;
      }
      /* Fila nombre + select: permitir wrap */
      .enc-td-prods > div > div:first-child {
        flex-wrap: wrap;
        gap: 6px;
      }

      /* Fila 4: Total (flex:1) + WA + Acciones (botones en fila) */
      .enc-td-total {
        flex: 1;
        text-align: left !important;
        font-size: 15px;
        align-self: center;
      }
      .enc-td-wa {
        align-self: center;
        margin-right: 8px;
      }
      .enc-td-acc { align-self: center; }
      .enc-td-acc > div { flex-direction: row !important; gap: 6px !important; }

      /* Columnas ocultas en móvil */
      .enc-td-tel, .enc-td-costo, .enc-td-fpedido,
      .enc-td-festimada, .enc-td-obs { display: none !important; }
    }