/* ============================================================
   SMACHIL POS — Estilos principales (main.css)
   Extraído de index.html (líneas 16-2150) — Fase 2 modularización
   ============================================================ */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ----------- SPRINT 1: BLOQUES A & B ----------- */
    /* MICRO-TRANSICIONES TARGETEADAS */
    button,
    .btn,
    .card,
    .modal,
    .toast,
    .nav-tab,
    .filter-btn,
    .pc-add,
    .pc-mod,
    .kds-btn {
      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    }

    button:active:not(:disabled),
    .nav-tab:active:not(.locked),
    .pc-add:active,
    .pc-mod:active,
    .filter-btn:active,
    .kds-btn:active {
      transform: scale(0.96) !important;
    }

    .card,
    .dash-kpi,
    .hist-card,
    .table-wrap,
    .cart-section,
    .kds-card {
      box-shadow: var(--shadow-sm) !important;
      border: 1px solid var(--border) !important;
    }

    /* OVERLAYS CON GLASSMORPHISM */
    .overlay,
    .success-overlay,
    .turno-overlay,
    .nav-sidebar-overlay {
      background: rgba(15, 20, 25, 0.45) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }

    /* MODALES PREMIUM */
    .mod-modal,
    .cobro-modal,
    .success-modal,
    .turno-card,
    .del-modal {
      border: 1px solid rgba(255, 255, 255, 0.4) !important;
      border-radius: var(--radius-xl) !important;
      box-shadow: var(--shadow-modal) !important;
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      gap: 8px;
      background: #111;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      position: sticky;
      top: 0;
      z-index: 100;
      height: 54px;
      box-shadow: var(--shadow-md);
    }

    nav .nav-logo {
      height: 38px;
      width: auto;
      cursor: pointer;
      transition: transform .15s;
    }

    nav .nav-logo:hover {
      transform: scale(1.05);
    }

    nav .nav-logo:active {
      transform: scale(0.95);
    }

    .nav-hamburger {
      background: none;
      border: none;
      color: var(--brand-primary, #FDC80F);
      font-size: 26px;
      cursor: pointer;
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      transition: background .2s;
      line-height: 1;
    }

    .nav-hamburger:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .nav-title {
      color: #fff;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px;
      letter-spacing: 1px;
      flex: 1;
      text-align: center;
    }

    .nav-sidebar-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 200;
      opacity: 0;
      transition: opacity .25s;
    }

    .nav-sidebar-overlay.open {
      display: block;
      opacity: 1;
    }

    .nav-sidebar {
      position: fixed;
      top: 0;
      right: -320px;
      width: 300px;
      height: 100%;
      background: #1A1A1A;
      z-index: 201;
      transition: right .3s cubic-bezier(.4, 0, .2, 1);
      overflow-y: auto;
      box-shadow: -10px 0 30px rgba(0, 0, 0, .6);
      border-left: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-sidebar.open {
      right: 0;
    }

    .nav-sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: #111;
    }

    .nav-sidebar-header span {
      color: var(--brand-primary, #FDC80F);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 22px;
      letter-spacing: 1px;
    }

    .nav-sidebar-close {
      background: none;
      border: none;
      color: #888;
      font-size: 24px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      transition: all .2s;
    }

    .nav-sidebar-close:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
    }

    .nav-sidebar-group {
      padding: 12px 0 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-sidebar-group-label {
      font-size: 11px;
      color: #888;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 4px 24px 8px;
      font-family: 'DM Sans', sans-serif;
    }

    .nav-sidebar .nav-tab {
      display: block;
      width: calc(100% - 24px);
      margin: 4px 12px;
      text-align: left;
      padding: 12px 16px;
      border-radius: var(--radius-md);
      border: none;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 600;
      background: transparent;
      color: #bbb;
      transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
      position: relative;
      white-space: nowrap;
    }

    .nav-sidebar .nav-tab.active {
      background: var(--brand-primary, #FDC80F) !important;
      color: var(--brand-secondary, #000) !important;
      font-weight: 700;
      box-shadow: 0 4px 12px rgba(253, 200, 15, 0.25);
    }

    .nav-sidebar .nav-tab:hover:not(.active) {
      background: rgba(255, 255, 255, 0.08) !important;
      color: #fff !important;
    }

    .nav-sidebar .nav-tab:disabled,
    .nav-sidebar .nav-tab.locked {
      opacity: .35;
      pointer-events: none;
    }

    .nav-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: #EF4444;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      min-width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border-radius: var(--radius-md);
      padding: 0 5px;
      font-family: 'DM Sans', sans-serif;
      box-shadow: 0 2px 6px rgba(239, 68, 68, .4);
      animation: badgePop .35s cubic-bezier(.175, .885, .32, 1.275);
      pointer-events: none;
      z-index: 10;
    }

    @keyframes badgePop {
      0% {
        transform: scale(0);
      }

      60% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }

    .nav-tab.active {
      background: var(--brand-primary, #FDC80F);
      color: var(--brand-secondary, #000);
    }

    .nav-tab:hover:not(.active) {
      background: #222;
      color: var(--brand-primary, #FDC80F);
    }

    .nav-tab:disabled,
    .nav-tab.locked {
      opacity: .3;
      pointer-events: none;
    }

    .view {
      display: none;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .view.active {
      display: block;
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 18px;
      margin-bottom: 14px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
    }

    .section-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 19px;
      letter-spacing: 1.5px;
      color: #000;
      margin-bottom: 12px;
    }

    /* PRODUCTOS */
    .order-layout {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 20px;
      align-items: start;
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 14px;
    }

    .product-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--sp-lg) var(--sp-md);
      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s, border-color 0.2s;
      box-shadow: var(--shadow-sm);
    }

    .product-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
      border-color: var(--accent);
    }

    .pc-name {
      font-weight: 700;
      font-size: 14px;
      color: var(--text);
      margin-bottom: 4px;
      line-height: 1.2;
      font-family: 'DM Sans', sans-serif;
    }

    .pc-price {
      font-weight: 700;
      font-size: 15px;
      color: var(--accent2);
      margin-bottom: 12px;
      letter-spacing: 0.3px;
      font-family: 'DM Sans', sans-serif;
    }

    .pc-actions {
      display: flex;
      gap: 6px;
    }

    .pc-add {
      flex: 1;
      padding: 8px 0;
      border-radius: var(--radius-md);
      border: none;
      background: var(--accent);
      color: #000;
      font-size: 13px;
      font-weight: 700;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
      box-shadow: 0 2px 6px rgba(253, 200, 15, 0.25);
    }

    .pc-add:hover {
      background: #ead528;
    }

    .pc-add:active {
      transform: scale(0.96);
    }

    .pc-mod {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s, transform 0.1s;
      box-shadow: var(--shadow-sm);
    }

    .pc-mod:hover {
      border-color: var(--accent);
      background: var(--surface2);
    }

    .pc-mod:active {
      transform: scale(0.96);
    }

    .cart-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      margin-bottom: 14px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }

    .cart-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--surface2);
    }

    .cart-empty {
      padding: 32px 20px;
      text-align: center;
      color: var(--muted);
      font-size: 14px;
      font-weight: 500;
    }

    .cart-item {
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      transition: background 0.15s;
    }

    .cart-item:hover {
      background: rgba(0, 0, 0, 0.015);
    }

    .ci-name {
      font-weight: 700;
      font-size: 14px;
      color: var(--text);
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .ci-mods {
      font-size: 12px;
      margin-top: 2px;
      line-height: 1.5;
      color: var(--muted);
      font-weight: 500;
    }

    .ci-remove {
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 20px;
      padding: 4px;
      border-radius: var(--radius-sm);
      line-height: 1;
      transition: color 0.2s, background 0.2s;
    }

    .ci-remove:hover {
      color: var(--red);
      background: #fef2f2;
    }

    .ci-price {
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: 15px;
      color: var(--accent2);
      white-space: nowrap;
      letter-spacing: 0.3px;
    }

    .field-group {
      margin-bottom: 12px;
    }

    .field-label {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 5px;
      font-weight: 500;
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    .field-input {
      width: 100%;
      padding: 11px 13px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      outline: none;
      transition: border .2s;
    }

    .field-input:focus {
      border-color: var(--accent);
    }

    textarea.field-input {
      resize: vertical;
    }

    .toggle-row {
      display: flex;
      gap: 10px;
    }

    .toggle-btn {
      flex: 1;
      padding: 13px 8px;
      border-radius: var(--radius-md);
      border: 2px solid var(--border);
      background: var(--surface2);
      cursor: pointer;
      text-align: center;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 13px;
      color: var(--muted);
      transition: all .2s;
    }

    .toggle-btn.selected {
      border-color: var(--accent);
      color: var(--text);
      background: var(--brand-accent, #FFFBE6);
    }

    .t-icon {
      font-size: 20px;
      display: block;
      margin-bottom: 3px;
    }

    .cond {
      display: none;
      margin-top: 12px;
    }

    .cond.show {
      display: block;
    }

    .pay-hint-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    .pay-hint-btn {
      padding: 10px 4px;
      border-radius: var(--radius-md);
      border: 2px solid var(--border);
      background: var(--surface2);
      cursor: pointer;
      text-align: center;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 11px;
      color: var(--muted);
      transition: all .2s;
    }

    .pay-hint-btn .t-icon {
      font-size: 16px;
    }

    .pay-hint-btn.selected {
      border-color: var(--accent2);
      color: var(--text);
      background: var(--brand-accent, #FFFBE6);
    }

    .summary-sticky {
      position: sticky;
      top: 80px;
    }

    .sum-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      color: var(--text);
    }

    .sum-total {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 12px 0 4px 0;
      margin-top: 8px;
    }

    .sum-total-price {
      font-weight: 700;
      font-size: 24px;
      color: var(--accent2);
      font-family: 'DM Sans', sans-serif;
      letter-spacing: 0.5px;
    }

    .submit-btn {
      width: 100%;
      padding: 15px;
      border-radius: var(--radius-md);
      border: none;
      background: var(--brand-primary, #FDC80F);
      color: #000;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px;
      letter-spacing: 1.5px;
      cursor: pointer;
      transition: all .2s;
      margin-top: 12px;
      font-weight: 700;
    }

    .submit-btn:hover {
      background: #E6B800;
    }

    /* KDS */
    .kds-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .kds-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
      gap: 14px;
    }

    .kds-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
    }

    @keyframes kdsNewGlow {
      0% {
        box-shadow: 0 0 0 0px rgba(46, 204, 113, 0.6);
        border-color: rgba(46, 204, 113, 0.5);
      }

      50% {
        box-shadow: 0 0 15px 5px rgba(46, 204, 113, 0.8);
        border-color: #2ecc71;
      }

      100% {
        box-shadow: 0 0 0 0px rgba(46, 204, 113, 0);
        border-color: inherit;
      }
    }

    .kds-new-alert {
      animation: kdsNewGlow 2s ease-in-out infinite !important;
      border: 2px solid #2ecc71 !important;
    }

    .kds-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }

    .kds-card.pending .kds-card-head {
      background: #fffbeb;
      border-bottom: 3px solid #f59e0b;
    }

    .kds-card.ready .kds-card-head {
      background: #f0fdf4;
      border-bottom: 3px solid #10b981;
    }

    .kds-card-head {
      padding: 14px 18px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .kds-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px;
      color: var(--text);
      letter-spacing: 1px;
    }

    .kds-tag {
      font-size: 11px;
      padding: 4px 10px;
      border-radius: var(--radius-xl);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1px solid transparent;
    }

    .kds-tag.delivery {
      background: #eff6ff;
      color: #3b82f6;
      border-color: rgba(59, 130, 246, 0.3);
    }

    .kds-tag.retiro {
      background: #fffbeb;
      color: #f59e0b;
      border-color: rgba(245, 158, 11, 0.3);
    }

    .kds-body {
      padding: 16px 18px;
      background: var(--surface);
    }

    .kds-line {
      font-size: 14px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
    }

    .kds-mod-txt {
      font-size: 13px;
      padding: 6px 0 6px 12px;
      line-height: 1.45;
      letter-spacing: 0.25px;
      color: var(--muted);
      font-weight: 600;
      border-left: 3px solid var(--border);
      margin-top: 6px;
      margin-bottom: 3px;
    }

    .kds-foot {
      padding: 14px 18px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      background: var(--surface2);
      border-top: 1px solid var(--border);
    }

    .kds-btn {
      flex: 1;
      min-width: 60px;
      padding: 9px 6px;
      border-radius: var(--radius-sm);
      border: none;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 12px;
      transition: all .2s;
    }

    .kds-btn:hover {
      opacity: .85;
    }

    .kds-btn.ready-btn {
      background: var(--green);
      color: white;
    }

    .kds-btn.pay-btn {
      background: var(--blue);
      color: white;
    }

    .kds-btn.done-btn {
      background: #333;
      color: white;
      border: none;
    }

    .pay-status-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      padding: 7px 10px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
    }

    .pay-status-bar.unpaid {
      background: #FFF8DC;
      color: #B8860B;
      border: 1px solid var(--brand-primary, #FDC80F);
    }

    .pay-status-bar.paid {
      background: #E8F8EE;
      color: #1a7a3a;
      border: 1px solid #27ae60;
    }

    /* TIMERS */
    .kds-timer {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: var(--radius-xl);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      border: 1px solid transparent;
    }

    .kds-timer.tgreen {
      background: #f0fdf4;
      color: #10b981;
      border-color: rgba(16, 185, 129, 0.3);
    }

    .kds-timer.tyellow {
      background: #fffbeb;
      color: #f59e0b;
      border-color: rgba(245, 158, 11, 0.3);
    }

    .kds-timer.tred {
      background: #fef2f2;
      color: #ef4444;
      border-color: rgba(239, 68, 68, 0.3);
      animation: tpulse 1.5s infinite;
    }

    @keyframes tpulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .65;
      }
    }

    /* CAJA */
    .caja-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .filters {
      display: inline-flex;
      gap: 4px;
      background: var(--surface2);
      padding: 4px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      flex-wrap: wrap;
    }

    .filter-btn {
      padding: 7px 16px;
      border-radius: var(--radius-sm);
      border: none;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      font-family: 'DM Sans', sans-serif;
      transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    }

    .filter-btn.active {
      background: var(--surface);
      color: var(--text);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
      margin-bottom: 20px;
    }

    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px;
    }

    .stat-label {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 6px;
    }

    .stat-value {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px;
    }

    .stat-value.warn {
      color: var(--red);
    }

    .table-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      overflow: auto;
      box-shadow: var(--shadow-sm);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    th {
      padding: 12px 14px;
      text-align: left;
      background: var(--surface2);
      color: var(--muted);
      font-weight: 700;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      white-space: nowrap;
      border-bottom: 2px solid var(--border);
    }

    td {
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
      transition: background 0.15s ease;
    }

    tr:last-child td {
      border-bottom: none;
    }

    tr:hover td {
      background: rgba(0, 0, 0, 0.015);
    }

    .badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: var(--radius-xl);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1px solid transparent;
      background: var(--surface2);
      color: var(--text);
    }

    .badge.efectivo {
      background: #e8f8ee;
      color: #10b981;
      border-color: rgba(16, 185, 129, 0.3);
    }

    .badge.transferencia {
      background: #eff6ff;
      color: #3b82f6;
      border-color: rgba(59, 130, 246, 0.3);
    }

    .badge.debito {
      background: #f3e8ff;
      color: #9333ea;
      border-color: rgba(147, 51, 234, 0.3);
    }

    .badge.credito {
      background: #fdf2f8;
      color: #db2777;
      border-color: rgba(219, 39, 119, 0.3);
    }

    .badge.mixto {
      background: #fffbeb;
      color: #f59e0b;
      border-color: rgba(245, 158, 11, 0.3);
    }

    .badge.delivery-b {
      background: #eff6ff;
      color: #3b82f6;
      border-color: rgba(59, 130, 246, 0.3);
    }

    .badge.retiro-b {
      background: #fffbeb;
      color: #f59e0b;
      border-color: rgba(245, 158, 11, 0.3);
    }

    .badge.ok {
      background: #e8f8ee;
      color: #10b981;
      border-color: rgba(16, 185, 129, 0.3);
    }

    .badge.warn {
      background: #fef2f2;
      color: #ef4444;
      border-color: rgba(239, 68, 68, 0.3);
    }

    .print-btn {
      padding: 7px 16px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      font-family: 'DM Sans', sans-serif;
      transition: border-color 0.2s, color 0.2s, background 0.2s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .print-btn:hover {
      border-color: var(--accent);
      color: #000;
      background: var(--surface2);
    }

    /* DASHBOARD */
    .dash-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
      margin-bottom: 24px;
    }

    .dash-kpi {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
      position: relative;
      overflow: hidden;
    }

    .dash-kpi::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--accent);
    }

    .dash-kpi.green::before {
      background: #27ae60;
    }

    .dash-kpi.yellow::before {
      background: #f39c12;
    }

    .dash-kpi.red::before {
      background: #e74c3c;
    }

    .dash-kpi.blue::before {
      background: #2980b9;
    }

    .dash-kpi-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .6px;
      margin-bottom: 6px;
    }

    .dash-kpi-val {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 36px;
      line-height: 1;
      color: #1a1a1a;
    }

    .dash-kpi-sub {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
    }

    .dash-section {
      margin-bottom: 28px;
    }

    .dash-section-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px;
      letter-spacing: 1.5px;
      color: #1a1a1a;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .dash-section-title::after {
      content: '';
      flex: 1;
      height: 2px;
      background: var(--border);
    }

    .time-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: var(--radius-full);
      font-size: 15px;
      font-weight: 700;
    }

    .time-badge.tgreen {
      background: #e8f8ee;
      color: #1a7a3a;
      border: 2px solid #27ae60;
    }

    .time-badge.tyellow {
      background: #fff8e1;
      color: #a06000;
      border: 2px solid #f39c12;
    }

    .time-badge.tred {
      background: #fdecea;
      color: #c0392b;
      border: 2px solid #e74c3c;
    }

    .prod-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--surface);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .prod-table th {
      background: var(--surface2);
      padding: 12px 14px;
      text-align: left;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--muted);
      font-weight: 700;
      border-bottom: 2px solid var(--border);
    }

    .prod-table td {
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      font-size: 13px;
      vertical-align: middle;
      transition: background 0.15s ease;
    }

    .prod-table tr:last-child td {
      border-bottom: none;
    }

    .prod-table tr:hover td {
      background: rgba(0, 0, 0, 0.015);
    }

    .prod-bar-wrap {
      background: #f0efe9;
      border-radius: var(--radius-sm);
      height: 8px;
      flex: 1;
      min-width: 60px;
      overflow: hidden;
    }

    .prod-bar {
      height: 100%;
      border-radius: var(--radius-sm);
      background: var(--brand-primary, #FDC80F);
      transition: width .4s;
    }

    .dash-total-box {
      background: #000;
      color: var(--brand-primary, #FDC80F);
      border-radius: var(--radius-xl);
      padding: 24px 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .dash-total-val {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 52px;
      line-height: 1;
      letter-spacing: 2px;
    }

    .dash-two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    /* TURNO OVERLAY */
    .turno-overlay {
      display: flex;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .93);
      z-index: 500;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .turno-card {
      background: #fff;
      border-radius: var(--radius-xl);
      width: 100%;
      max-width: 520px;
      overflow: hidden;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
    }

    .turno-header {
      background: #000;
      padding: 24px 32px 20px;
      text-align: center;
    }

    .turno-header-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px;
      letter-spacing: 3px;
      color: var(--brand-primary, #FDC80F);
      margin-top: 8px;
    }

    .turno-header-sub {
      font-size: 12px;
      color: rgba(253, 200, 15, .6);
      margin-top: 2px;
    }

    .turno-body {
      padding: 24px 28px;
    }

    .turno-step {
      display: none;
    }

    .turno-step.active {
      display: block;
    }

    .turno-checklist {
      background: #f5f4f0;
      border-radius: var(--radius-lg);
      padding: 16px;
      margin-bottom: 18px;
      border-left: 4px solid var(--brand-primary, #FDC80F);
    }

    .turno-check-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 6px 0;
      font-size: 13px;
      color: #444;
      line-height: 1.4;
    }

    .turno-check-item::before {
      content: '✓';
      color: var(--brand-primary, #FDC80F);
      font-weight: 900;
      font-size: 14px;
      flex-shrink: 0;
    }

    .turno-field {
      margin-bottom: 14px;
    }

    .turno-field label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: #888;
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 6px;
    }

    .turno-input {
      width: 100%;
      padding: 13px 14px;
      border: 2px solid #e0ddd5;
      border-radius: var(--radius-md);
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      outline: none;
      transition: border .2s;
      background: #fafaf8;
    }

    .turno-input:focus {
      border-color: var(--brand-primary, #FDC80F);
    }

    .turno-btn {
      width: 100%;
      padding: 15px;
      border: none;
      border-radius: var(--radius-lg);
      background: var(--brand-primary, #FDC80F);
      color: #000;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 22px;
      letter-spacing: 2px;
      cursor: pointer;
      font-weight: 700;
      margin-top: 4px;
    }

    .turno-btn:hover {
      background: #E6B800;
    }

    .turno-btn.secondary {
      background: #f0efe9;
      color: #555;
      font-size: 16px;
      margin-top: 8px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      letter-spacing: 0;
    }

    /* STATUS BAR */
    .turno-status-bar {
      background: #000;
      padding: 7px 20px;
      display: none;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: var(--brand-primary, #FDC80F);
      font-weight: 600;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tsb-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--brand-primary, #FDC80F);
      display: inline-block;
      margin-right: 5px;
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .3;
      }
    }

    .tsb-btn {
      padding: 4px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid;
      background: transparent;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .tsb-btn.warn {
      border-color: rgba(231, 76, 60, .5);
      color: #e74c3c;
    }

    .tsb-btn.yellow {
      border-color: rgba(253, 200, 15, .4);
      color: var(--brand-primary, #FDC80F);
    }

    /* OVERLAYS */
    .overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .85);
      z-index: 200;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .overlay.show {
      display: flex;
    }

    /* MOD MODAL */
    .mod-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      width: 100%;
      max-width: 500px;
      max-height: 90vh;
      overflow-y: auto;
    }

    .mod-head {
      padding: 18px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      background: var(--surface);
      z-index: 1;
    }

    .mod-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 22px;
      letter-spacing: 1px;
    }

    .mod-close {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 26px;
      cursor: pointer;
      line-height: 1;
    }

    .mod-body {
      padding: 18px 20px;
    }

    .mod-group {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .6px;
      margin: 16px 0 8px;
    }

    .mod-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: background .15s;
    }

    .mod-row:hover {
      background: var(--surface2);
    }

    .mod-chk {
      width: 18px;
      height: 18px;
      border-radius: var(--radius-sm);
      border: 2px solid var(--border);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
    }

    .mod-chk.rm-chk {
      border-color: #c0392b;
    }

    .mod-chk.rm-chk.on {
      background: var(--red);
      border-color: var(--red);
      color: white;
    }

    .mod-chk.add-chk.on {
      background: var(--accent2);
      border-color: var(--accent2);
      color: #000;
    }

    .mod-label {
      flex: 1;
      font-size: 14px;
    }

    .mod-ptag {
      font-size: 12px;
      font-weight: 600;
    }

    .mod-ptag.free {
      color: var(--muted);
    }

    .mod-ptag.paid {
      color: var(--accent2);
    }

    .mod-foot {
      padding: 14px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 10px;
    }

    .mod-confirm {
      flex: 1;
      padding: 13px;
      border-radius: var(--radius-md);
      border: none;
      background: var(--brand-primary, #FDC80F);
      color: #000;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px;
      letter-spacing: 1px;
      cursor: pointer;
      font-weight: 700;
    }

    .mod-cancel {
      padding: 13px 18px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--muted);
      font-size: 14px;
      cursor: pointer;
    }

    /* COBRO MODAL */
    .cobro-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      width: 100%;
      max-width: 520px;
      max-height: 95vh;
      overflow-y: auto;
    }

    .cobro-head {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--surface2);
    }

    .cobro-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px;
      letter-spacing: 1px;
      color: #000;
    }

    .cobro-body {
      padding: 18px 20px;
    }

    .cobro-monto-box {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 16px;
      text-align: center;
      margin-bottom: 16px;
    }

    .cobro-monto-val {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 42px;
      color: var(--accent2);
      line-height: 1;
    }

    .cobro-metodos {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 14px;
    }

    .cobro-pay-btn {
      padding: 12px 8px;
      border-radius: var(--radius-md);
      border: 2px solid var(--border);
      background: var(--surface2);
      cursor: pointer;
      text-align: center;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 12px;
      color: var(--muted);
      transition: all .2s;
    }

    .cobro-pay-btn .t-icon {
      font-size: 18px;
      display: block;
      margin-bottom: 4px;
    }

    .cobro-pay-btn.selected {
      border-color: var(--accent2);
      color: var(--text);
      background: var(--brand-accent, #FFFBE6);
    }

    .cobro-pay-btn.monto-set {
      border-color: var(--green);
      background: #e8f8ee;
    }

    .monto-asignado {
      font-size: 11px;
      color: var(--accent2);
      margin-top: 3px;
    }

    .pago-linea {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      margin-bottom: 8px;
    }

    .pago-linea-icon {
      font-size: 20px;
    }

    .pago-linea-label {
      flex: 1;
      font-size: 13px;
      font-weight: 600;
    }

    .pago-linea-input {
      width: 110px;
      padding: 8px 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 600;
      text-align: right;
      outline: none;
    }

    .pago-linea-input:focus {
      border-color: var(--accent2);
    }

    .pago-linea-remove {
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 18px;
      padding: 0 4px;
    }

    .pago-linea-remove:hover {
      color: var(--red);
    }

    .cobro-resumen {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px;
      margin-bottom: 14px;
    }

    .cobro-res-row {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      padding: 4px 0;
    }

    .cobro-res-row.total {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px;
      border-top: 1px solid var(--border);
      margin-top: 6px;
      padding-top: 8px;
    }

    .cobro-res-row.diff-pos {
      color: var(--green);
    }

    .cobro-res-row.diff-neg {
      color: var(--red);
    }

    .cobro-foot {
      padding: 14px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 10px;
    }

    .cobro-confirm {
      flex: 1;
      padding: 14px;
      border-radius: var(--radius-md);
      border: none;
      background: var(--green);
      color: white;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px;
      cursor: pointer;
    }

    .cobro-confirm:disabled {
      opacity: .35;
      cursor: not-allowed;
    }

    .cobro-cancel {
      padding: 14px 18px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--muted);
      font-size: 14px;
      cursor: pointer;
    }

    /* ELIMINAR MODAL */
    .del-modal {
      background: var(--surface);
      border: 1px solid #7a1a1a;
      border-radius: var(--radius-xl);
      padding: 28px;
      max-width: 360px;
      width: 90%;
      text-align: center;
    }

    /* APERTURAS/HISTORIAL */
    .hist-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 20px;
      margin-bottom: 14px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }

    .hist-card-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 2px solid #f0efe9;
    }

    .hist-turno-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 32px;
      color: #000;
      line-height: 1;
    }

    .hist-badge {
      display: inline-block;
      padding: 5px 12px;
      border-radius: var(--radius-xl);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1px solid transparent;
      background: var(--surface2);
      color: var(--text);
    }

    .hist-badge.ok {
      background: #e8f8ee;
      color: #10b981;
      border-color: rgba(16, 185, 129, 0.3);
    }

    .hist-badge.cierre {
      background: #fffbeb;
      color: #f59e0b;
      border-color: rgba(245, 158, 11, 0.3);
    }

    .hist-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .hist-kpi {
      background: #f5f4f0;
      border-radius: var(--radius-md);
      padding: 12px;
    }

    .hist-kpi-label {
      font-size: 10px;
      color: #888;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: .4px;
      margin-bottom: 3px;
    }

    .hist-kpi-val {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 22px;
      color: #1a1a1a;
    }

    .hist-period-btn {
      padding: 8px 18px;
      border-radius: 24px;
      border: 1px solid transparent;
      background: var(--surface2);
      color: var(--muted);
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .hist-period-btn:hover {
      background: var(--border);
      color: var(--text);
    }

    .hist-period-btn.active {
      background: var(--surface);
      color: var(--text);
      border-color: var(--border);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .cuad-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      border-radius: var(--radius-md);
      margin-bottom: 5px;
      font-size: 13px;
      font-weight: 600;
    }

    .cuad-row.cok {
      background: #e8f8ee;
    }

    .cuad-row.cpos {
      background: #fff8e1;
    }

    .cuad-row.cneg {
      background: #fdecea;
    }

    /* CIERRE CAJA */
    .cierre-input-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: #f5f4f0;
      border-radius: var(--radius-md);
      margin-bottom: 8px;
    }

    .cierre-input {
      width: 130px;
      padding: 9px 12px;
      border: 2px solid #e0ddd5;
      border-radius: var(--radius-md);
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 600;
      text-align: right;
      outline: none;
      background: #fff;
    }

    .cierre-input:focus {
      border-color: var(--brand-primary, #FDC80F);
    }

    /* SUCCESS */
    .success-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .85);
      z-index: 300;
      align-items: center;
      justify-content: center;
    }

    .success-overlay.show {
      display: flex;
    }

    .success-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 30px;
      max-width: 380px;
      width: 90%;
      text-align: center;
    }

    .success-icon {
      font-size: 48px;
      margin-bottom: 10px;
    }

    .success-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 28px;
      margin-bottom: 6px;
    }

    .success-sub {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 18px;
    }

    .success-close {
      padding: 12px 26px;
      border-radius: var(--radius-md);
      border: none;
      background: var(--accent);
      color: #000;
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      cursor: pointer;
      font-size: 15px;
    }

    .toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--green);
      color: white;
      padding: 14px 22px;
      border-radius: var(--radius-full);
      font-weight: 600;
      font-size: 13px;
      z-index: 9999;
      transform: translateY(80px) scale(0.9);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease !important;
      pointer-events: none;
      box-shadow: var(--shadow-lg);
    }

    .toast.show {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    @media(max-width:720px) {
      .order-layout {
        grid-template-columns: 1fr;
      }

      .summary-sticky {
        position: static;
      }

      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .dash-two {
        grid-template-columns: 1fr;
      }
    }

    @media print {

      nav,
      .filters,
      .print-btn,
      .kds-foot,
      .kds-header,
      .overlay,
      .success-overlay,
      .turno-overlay,
      .turno-status-bar {
        display: none !important;
      }

      body {
        background: white !important;
        color: black !important;
      }

      .view:not(.active) {
        display: none !important;
      }
    }

    /* ── UX Sprint 1 ── */

    /* M1 — Quick-tabs fijos bajo el nav */
    .nav-quicktabs {
      display: flex;
      gap: 6px;
      padding: 6px 12px;
      background: #111;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      position: sticky;
      top: 54px;
      z-index: 99;
    }
    .nav-qt {
      flex: 1;
      padding: 7px 10px;
      border-radius: var(--radius-md);
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.05);
      color: #aaa;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }
    .nav-qt:hover:not(.locked) {
      background: rgba(253, 200, 15, 0.12);
      color: var(--brand-primary, #FDC80F);
      border-color: rgba(253, 200, 15, 0.35);
    }
    .nav-qt.active {
      background: var(--brand-primary, #FDC80F);
      color: #000;
      border-color: var(--brand-primary, #FDC80F);
      font-weight: 700;
    }
    .nav-qt.locked {
      opacity: 0.35;
      pointer-events: none;
      cursor: not-allowed;
    }

    /* M3 — Jerarquía visual botones KDS */
    .kds-btn-primary {
      background: var(--green) !important;
      color: #fff !important;
      border: none !important;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
      font-weight: 700 !important;
    }
    .kds-btn-primary:hover {
      background: #0ea572 !important;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45) !important;
    }
    .kds-btn-secondary {
      background: #fff !important;
      border: 1.5px solid currentColor !important;
      font-weight: 600 !important;
    }
    .kds-btn-tertiary {
      background: transparent !important;
      border: none !important;
      color: var(--muted) !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      opacity: 0.7 !important;
    }
    .kds-btn-tertiary:hover {
      opacity: 1 !important;
      color: var(--red) !important;
    }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — Phase 3
   Additive rules only. Desktop styles untouched above.
   ══════════════════════════════════════════════════════════ */

/* ── XS: Extra small phones (≤375px) ── */
@media (max-width: 375px) {
  .nav-sidebar {
    width: 85vw;
    right: calc(-85vw - 20px);
  }
  .products-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .kds-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pay-hint-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .summary-sticky {
    padding: 12px;
  }
  .card {
    padding: 14px;
  }
  .nav-quicktabs {
    gap: 4px;
    padding: 6px 8px;
  }
  .nav-qt {
    font-size: 11px;
    padding: 6px 6px;
  }
}

/* ── SM: Small phones (≤425px) ── */
@media (max-width: 425px) {
  .nav-sidebar {
    width: min(300px, 85vw);
    right: calc(-1 * min(300px, 85vw) - 20px);
  }
  .kds-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pay-hint-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .pc-mod {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .cobro-metodos {
    grid-template-columns: 1fr;
  }
}

/* ── TB: Tablets (≤768px) ── */
@media (max-width: 768px) {
  .kds-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .dash-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .order-layout {
    grid-template-columns: 1fr;
  }
  .summary-sticky {
    position: static;
  }
}

/* ── LG: Wide desktops (≥1280px) ── */
@media (min-width: 1280px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .kds-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .dash-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .order-layout {
    grid-template-columns: 1fr 380px;
  }
}

/* ── Skeleton Loaders ── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
  color: transparent !important;
}
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card { height: 120px; border-radius: var(--radius-lg); }
.skeleton-row { height: 44px; border-radius: var(--radius-md); margin-bottom: 8px; }
.skeleton-kpi { height: 90px; border-radius: var(--radius-lg); }

/* ── POS Button System ── */
.pos-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--radius-md); border: none;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, opacity 0.15s;
  white-space: nowrap; text-decoration: none;
}
.pos-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pos-btn-primary {
  background: var(--brand-secondary, #000); color: var(--brand-primary, #FDC80F);
  font-family: 'Bebas Neue', sans-serif; font-size: 16px;
}
.pos-btn-secondary {
  background: var(--surface, #fff); color: var(--text, #333);
  border: 1px solid var(--border, #e0ddd5);
}
.pos-btn-danger { background: #fee2e2; color: #c0392b; }
.pos-btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.pos-btn-sm { padding: 6px 12px; font-size: 11px; border-radius: var(--radius-sm); }

/* ── POS Utility Classes (inline style migration) ── */
.pos-muted { color: var(--muted); font-size: 11px; }
.pos-muted-lg { color: var(--muted); font-size: 13px; }
.pos-section-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.pos-section-label-wide { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin: 8px 0; grid-column: 1 / -1; }
.pos-empty { text-align: center; color: var(--muted); padding: 40px; font-size: 14px; }
.pos-bebas { font-family: 'Bebas Neue', sans-serif; }
.pos-bebas-lg { font-family: 'Bebas Neue', sans-serif; font-size: 22px; }
.pos-bebas-xl { font-family: 'Bebas Neue', sans-serif; font-size: 36px; }
.pos-print-badge { position: absolute; top: -6px; right: -6px; font-size: 10px; font-weight: 900;
  width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; pointer-events: none; color: #000; }
.pos-print-badge-gold { background: var(--accent2); }
.pos-print-badge-green { background: #2ecc71; }
.pos-kds-meta { font-size: 11px; color: var(--muted); }
.pos-kds-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.pos-kds-price { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: var(--accent2); }
.pos-kds-note { margin-top: 6px; font-size: 11px; color: var(--accent2); }
.pos-kds-address { margin-top: 6px; font-size: 14px; color: var(--muted); }
.pos-flex-end { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* ── Flujo / Movimientos classes (batch 2) ── */
.pos-card-white { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-lg); }
.pos-card-light { background: #fafaf8; border-radius: var(--radius-md); padding: var(--sp-lg); }
.pos-stat-box { padding: var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius-md); text-align: center; background: #fff; }
.pos-stat-box-blue { padding: var(--sp-md); border: 1px solid #d0e8ff; border-radius: var(--radius-md); text-align: center; background: #f0f7ff; }
.pos-stat-kpi-label { font-size: 9px; color: #888; font-weight: 700; }
.pos-stat-kpi-label-blue { font-size: 9px; color: #4a7fbf; font-weight: 700; }
.pos-bebas-blue { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: #4a7fbf; }
.pos-bebas-green { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: #1a7a3a; }
.pos-bebas-red { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: #c0392b; }
.pos-bebas-26 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; }
.pos-chart-title { font-size: 13px; font-weight: 700; color: #555; margin-bottom: 8px; text-align: center; }
.pos-hint-sm { font-size: 8px; color: #aaa; }
.pos-tag-system { background: #eef; color: #55a; padding: 2px 6px; border-radius: 4px; font-size: 8px; font-weight: 700; }
.pos-edit-btn { padding: 5px 12px; border-radius: var(--radius-sm); border: none; background: #f0efe9; font-size: 10px; cursor: pointer; font-weight: 700; }

/* ── Batch 3 — compras, inventario, aprobaciones, admin ── */
.pos-field-label { font-size: 9px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.pos-field-label-lg { font-size: 10px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.pos-input-legacy { width: 100%; padding: 9px; background: #f0efe9; border: 1px solid #e0ddd5; border-radius: var(--radius-md); font-size: 13px; }
.pos-input-legacy-sm { width: 100%; padding: 9px; background: #f0efe9; border: 1px solid #e0ddd5; border-radius: var(--radius-md); font-size: 12px; }
.pos-td-left { padding: 8px 6px; text-align: left; }
.pos-td-right { padding: 8px 6px; text-align: right; }
.pos-td-sm { padding: 6px; text-align: left; }
.pos-bebas-18 { font-family: 'Bebas Neue', sans-serif; font-size: 18px; }

/* ── Flujo Hub 2-Column Layout ── */
.flujo-hub { display: grid; grid-template-columns: 320px 1fr; gap: 16px; }
.flujo-sidebar { position: sticky; top: 120px; align-self: start; }
.flujo-main { min-width: 0; }
@media (max-width: 900px) {
  .flujo-hub { grid-template-columns: 1fr; }
  .flujo-sidebar { position: static; }
}

/* ── Collapsible Movement Rows ── */
.mov-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.mov-row:hover { background: rgba(0,0,0,0.02); }
.mov-detail {
  padding: 12px 16px; background: var(--surface2);
  border-bottom: 1px solid var(--border);
  animation: movDetailSlide 0.15s ease-out;
}
@keyframes movDetailSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}