:root{
    --bg:#f0f4f8;
    --card:#ffffff;
    --surface:#f8fafc;
    --surface-2:#f1f5f9;

    --text:#1e293b;
    --heading:#0f172a;
    --muted:#475569;
    --placeholder:#94a3b8;

    --line:#e2e8f0;
    --line-strong:#94a3b8;

    --blue:#1d4ed8;
    --secondary:#0f172a;
    --red:#dc2626;

    --okbg:#ecfdf5;
    --okline:#86efac;

    --input-bg:#ffffff;
    --input-text:#1e293b;
    --input-border:#cbd5e1;

    --button-secondary-bg:#ffffff;
    --button-secondary-text:#1e293b;
    --button-secondary-border:#cbd5e1;

    --button-danger-bg:#fff1f2;
    --button-danger-text:#dc2626;
    --button-danger-border:rgba(220,38,38,.4);

    --tab-bg:#ffffff;
    --tab-text:#334155;
    --tab-border:#cbd5e1;

    --table-head-bg:#f1f5f9;
    --table-row-bg:transparent;
    --table-row-alt:#f8fafc;

    --blue-bg:#eff6ff;

    --shadow-soft:0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(15,23,42,.08);
    --shadow-primary:0 8px 18px rgba(29,78,216,.22);

    --card-shadow:0 1px 3px rgba(0,0,0,.1), 0 2px 8px rgba(15,23,42,.06);
    --card-shadow-hover:0 4px 16px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08);

    --card-border:#e2e8f0;
    --card-head-border:#f1f5f9;

    --red:#dc2626;
    --green:#22c55e;
    --purple:#7c3aed;
    --whatsapp:#25D366;

    --success-bg:#ecfdf5;
    --success-text:#065f46;
    --success-border:#a7f3d0;
    --danger-bg:#fef2f2;
    --danger-text:#991b1b;
    --danger-border:#fecaca;
    --warning-bg:#fffbeb;
    --warning-text:#92400e;
    --warning-border:#fde68a;
    --info-bg:#eff6ff;
    --info-text:#1e40af;
    --info-border:#bfdbfe;

    --status-active:#22c55e;
    --status-inactive:#ef4444;
    --status-pending:#f59e0b;
    --modal-backdrop:rgba(15,23,42,.72);

    /* ── Presale status badges ── */
    --presale-open-bg:rgba(234,179,8,.15);
    --presale-open-text:#a16207;
    --presale-open-border:rgba(234,179,8,.3);
    --presale-pending-bg:rgba(59,130,246,.15);
    --presale-pending-text:#1d4ed8;
    --presale-pending-border:rgba(59,130,246,.3);
    --presale-completed-bg:rgba(22,163,74,.15);
    --presale-completed-text:#166534;
    --presale-completed-border:rgba(22,163,74,.3);
    --presale-cancelled-bg:rgba(220,38,38,.15);
    --presale-cancelled-text:#991b1b;
    --presale-cancelled-border:rgba(220,38,38,.3);
    --presale-expired-bg:rgba(107,114,128,.15);
    --presale-expired-text:#4b5563;
    --presale-expired-border:rgba(107,114,128,.3);

    /* ── Presale card borders ── */
    --presale-card-pending:#eab308;
    --presale-card-inprogress:#3b82f6;
    --presale-card-completed:#22c55e;
    --presale-card-cancelled:#ef4444;
    --presale-card-expired:#6b7280;

    /* ── Presale timer ── */
    --presale-timer-text:#d97706;
    --presale-timer-bg:rgba(234,179,8,.08);
    --presale-timer-border:rgba(234,179,8,.2);
    --presale-timer-urgent-text:#dc2626;
    --presale-timer-urgent-bg:rgba(220,38,38,.08);
    --presale-timer-urgent-border:rgba(220,38,38,.2);

    /* ── Super admin badge ── */
    --super-admin-from:#f59e0b;
    --super-admin-to:#d97706;

    /* ── Reservation indicators ── */
    --reservation-ok:#16a34a;
    --reservation-danger:#dc2626;

    /* ── Order status flow (web-orders + portal) ── */
    --order-pending-text:#d97706;
    --order-pending-bg:#fef3c7;
    --order-confirmed-text:#2563eb;
    --order-confirmed-bg:#dbeafe;
    --order-processing-text:#4f46e5;
    --order-processing-bg:#e0e7ff;
    --order-ready-text:#16a34a;
    --order-ready-bg:#dcfce7;
    --order-delivered-text:#166534;
    --order-delivered-bg:#f0fdf4;
    --order-cancelled-text:#dc2626;
    --order-cancelled-bg:#fef2f2;

    /* ── Chart / report colors ── */
    --chart-revenue:#10b981;
    --chart-cogs:#f59e0b;
    --chart-expense:#ef4444;
    --chart-profit:#3b82f6;

    /* ── Audit category colors ── */
    --audit-auth:#6366f1;
    --audit-users:#8b5cf6;
    --audit-customers:#0ea5e9;
    --audit-sales:#22c55e;
    --audit-budgets:#84cc16;
    --audit-creditnotes:#ef4444;
    --audit-cash:#eab308;
    --audit-stock:#f97316;
    --audit-warehouses:#14b8a6;
    --audit-products:#f59e0b;
    --audit-purchases:#3b82f6;
    --audit-expenses:#be185d;
    --audit-delivery:#0d9488;
    --audit-accounting:#7c3aed;
    --audit-banking:#4f46e5;
    --audit-appointments:#ec4899;
    --audit-email:#06b6d4;
    --audit-sifen:#059669;
    --audit-config:#64748b;
    --audit-approvals:#10b981;
    --audit-imports:#a855f7;
    --audit-reports:#6d28d9;
    --audit-errors:#dc2626;

    /* ── Web editor overlay (always dark) ── */
    --we-bg:#0f172a;
    --we-surface:#1e293b;
    --we-border:#334155;
    --we-accent:#3b82f6;
    --we-text:#e2e8f0;
    --we-muted:#94a3b8;

    /* ── Bell unread ── */
    --bell-unread:var(--red);
  }

  *{
    box-sizing:border-box;
  }

  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--muted);}

  html, body{
    min-height:100%;
  }

  body{
    margin:0;
    font-family:Arial, sans-serif;
    padding:24px clamp(16px, 2vw, 32px);
    background:var(--bg);
    color:var(--text);
    transition:background .25s ease, color .25s ease;
    overflow-wrap:break-word;
    word-break:break-word;
  }

  a{
    color:var(--blue);
    text-decoration:none;
  }

  a:hover{
    text-decoration:underline;
  }

  .wrap{
    /* Cap wide monitors at 2000px so layout doesn't sprawl past readable bounds
       on 4K/ultrawide displays, while still using ~20% more horizontal real
       estate than the old 1720px cap. Forms (Nueva Venta / Pre-Venta / PDV
       admin) now fill the wrap instead of being locked at 1480px. */
    width:min(2000px, 100%);
    margin:0 auto;
  }

  .brandbar{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
    padding:4px 0;
    flex-wrap:wrap;
  }

  .brandlogo-shell{
    width:68px;
    height:68px;
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
  }

  .brandlogo{
    width:100%;
    height:100%;
    /* contain (no cover): respetar la composición del logo del tenant
       sin recortarlo. Logos no cuadrados quedan centrados con padding. */
    object-fit:contain;
    object-position:center;
    display:block;
  }

  .brandlogo-fallback{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:22px;
    color:#fff;
    background:linear-gradient(135deg, var(--blue), var(--secondary));
  }
  /* When the fallback contains the inline Fuji SVG (default platform state),
     remove the gradient/text styling so the SVG fills cleanly. */
  .brandlogo-fallback:has(svg){
    background:transparent;
    font-size:0;
  }
  .brandlogo-fallback svg{
    display:block;
    width:100%;
    height:100%;
  }

  .brandcopy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .brandeyebrow{
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
  }

  h1{
    margin:0;
    font-size:clamp(34px, 3vw, 54px);
    line-height:1.05;
    color:var(--heading);
    font-weight:800;
  }

  h2, h3, h4{
    color:var(--heading);
  }

  .brandsubtitle{
    font-size:14px;
    color:var(--muted);
  }

  .card{
    background:var(--card);
    border-radius:20px;
    box-shadow:var(--card-shadow, var(--shadow-soft));
    padding:24px 28px;
    margin:24px 0;
    border:1px solid var(--line);
    overflow:hidden;
    transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  .card:hover{
    box-shadow:var(--card-shadow-hover, var(--shadow-soft));
  }

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

  input, select, textarea{
    padding:10px 14px;
    height:42px;
    font-size:max(16px, 1rem); /* >= 16px prevents iOS Safari auto-zoom on focus */
    border:1px solid var(--line);
    border-style:solid;
    border-radius:10px;
    outline:none;
    min-width:0;
    max-width:100%;
    background-color:var(--input-bg);
    color:var(--input-text);
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
    box-sizing:border-box;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
  }

  /* 2026-05-01: anular Chrome autofill background blanco/celeste para TODOS los
     inputs (no solo password). Sin esto, browser pinta bg nativo y rompe el
     theme oscuro: email, username, search, etc. Truco estándar:
     box-shadow inset gigante con var(--input-bg). Aplica a tenant app shell. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--input-text) !important;
    caret-color: var(--input-text);
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
  }

  input[type="radio"],
  input[type="checkbox"]{
    height:auto;
    padding:0;
    box-shadow:none;
    border-radius:3px;
  }

  textarea{
    height:auto;
    min-height:80px;
  }

  input::placeholder,
  textarea::placeholder{
    color:var(--placeholder);
    opacity:1;
  }

  select{
    color:var(--input-text);
    -webkit-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:32px;
    cursor:pointer;
  }

  label{
    margin-bottom:6px;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
  }

  .check-item label,
  .check-group label,
  .col-toggle label{
    margin-bottom:0;
  }

  input:focus, select:focus, textarea:focus{
    border-color:var(--blue);
    border-style:solid;
    outline:none;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
  }

  input[type="checkbox"]{
    min-width:auto;
    width:16px;
    height:16px;
    padding:0;
    margin:0;
    flex:0 0 auto;
    accent-color:var(--blue);
    box-shadow:none;
  }

  .check-group{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
  }

  .check-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 0;
    min-width:auto;
    cursor:pointer;
    user-select:none;
  }

  button{
    padding:10px 20px;
    border:1px solid var(--button-secondary-border);
    background:var(--button-secondary-bg);
    color:var(--button-secondary-text);
    border-radius:12px;
    cursor:pointer;
    transition:all .18s ease;
    font-weight:600;
  }

  button:hover{
    transform:translateY(-1px);
  }

  button:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
    filter:none;
    box-shadow:none;
  }

  button.primary{
    padding:12px 24px;
    background:var(--blue);
    color:#ffffff;
    border-color:var(--blue);
    box-shadow:var(--shadow-primary);
  }

  button.primary:hover{
    filter:brightness(1.03);
  }

  button.danger{
    background:var(--button-danger-bg);
    color:var(--button-danger-text);
    border-color:var(--button-danger-border);
  }

  button.small{
    padding:7px 10px;
    border-radius:10px;
    font-size:12px;
  }

  .pill{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(148,163,184,.18);
    border:1px solid rgba(148,163,184,.18);
    font-size:12px;
    color:var(--text);
  }

  .tabs{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:18px;
  }

  .tabs button{
    border-radius:999px;
    padding:10px 20px;
    background:var(--tab-bg);
    color:var(--tab-text);
    border:1px solid var(--tab-border);
    box-shadow:0 1px 2px rgba(0,0,0,.05);
    font-weight:500;
  }

  .tabs button:hover:not(.active){
    background:var(--surface-2, #e8edf3);
    border-color:var(--line-strong, #94a3b8);
  }

  .tabs button.active{
    background:var(--blue);
    color:#fff;
    border-color:var(--blue);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
    font-weight:600;
  }

  .muted{
    color:var(--muted);
  }

  .panel{
    min-height:clamp(460px, 58vh, 900px);
    margin-top:20px;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:18px;
    padding:24px;
    transition:background .25s ease, border-color .25s ease;
  }

  .hr{
    height:1px;
    background:var(--line);
    margin:18px 0 20px 0;
  }

  .msg{
    margin-top:16px;
    padding:16px 20px;
    border-radius:14px;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--text);
  }

  .msg.ok{
    border-color:var(--okline);
    background:var(--okbg);
    color:var(--success-text, #166534);
    font-weight:600;
  }

  .msg.err{
    border-color:var(--danger-border, #fecaca);
    background:var(--danger-bg, #fef2f2);
    color:var(--danger-text, #991b1b);
    font-weight:600;
  }

  .license-warning-banner{
    background:var(--warning-bg);
    color:var(--warning-text);
    border:1px solid var(--warning-border);
    border-radius:10px;
    padding:12px 20px;
    margin-bottom:12px;
    font-weight:600;
    font-size:.9em;
    text-align:center;
  }

  .empty-state{
    margin-top:16px;
    padding:32px 24px;
    border-radius:16px;
    border:1px dashed var(--line);
    background:var(--surface, rgba(255,255,255,.28));
    text-align:center;
    color:var(--muted);
  }

  .table-wrap{
    overflow-x:auto;
    border-radius:14px;
    margin-top:16px;
  }

  table{
    width:100%;
    min-width:720px;
    border-collapse:collapse;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
  }

  th, td{
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    text-align:left;
    font-size:14px;
    color:var(--text);
  }
  th{
    white-space:nowrap;
  }
  td{
    overflow-wrap:break-word;
    word-break:break-word;
  }

  th{
    background:var(--table-head-bg);
    color:var(--heading);
  }

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

  tbody tr{
    background:var(--table-row-bg);
  }

  .right{
    margin-left:auto;
  }

  .grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    width:100%;
    min-width:0;
  }

  .grid2 > *{
    min-width:0;
    max-width:100%;
  }

  .soft-block{
    border:1px solid var(--line);
    border-radius:16px;
    padding:24px;
    background:var(--surface);
  }

  .section-title{
    margin:0 0 12px 0;
    font-size:16px;
    font-weight:700;
    color:var(--heading);
  }

  .section-copy{
    margin:0 0 16px 0;
    color:var(--muted);
  }

  .check-row{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:10px;
  }

  .check-item input[type="checkbox"]{
    margin:0;
    min-width:auto;
    width:auto;
    flex:0 0 auto;
  }

  #topCard{
    overflow:visible;
  }
  #topCard .right .muted{
    white-space:nowrap;
  }

  #topLogoutBtn{
    height:32px;
    padding:4px 12px;
    font-size:12px;
    border-radius:10px;
    line-height:1;
  }

  #licText{
    font-size:12px;
    line-height:1.2;
  }

  .report-filter-grid{
    display:grid;
    gap:18px 14px;
    align-items:start;
    width:100%;
    min-width:0;
  }

.report-filter-grid.stock-low{
  grid-template-columns:minmax(220px, 1fr) minmax(220px, 1fr) 220px;
}

.report-filter-grid.with-range{
  grid-template-columns:minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr) 220px;
}

  .report-field{
    min-width:0;
    max-width:100%;
  }

  .report-field label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    color:var(--muted);
  }

  .report-field input,
  .report-field select,
  .report-field textarea{
    width:100%;
    min-width:0;
  }

.report-field input[type="date"],
.report-field input[type="number"],
#reportsCenterModal input[type="date"]{
  width:100%;
  min-width:0;
  height:40px;
  min-height:40px;
  line-height:1.2;
  padding:12px 14px;
  appearance:none;
  -webkit-appearance:none;
  background:var(--input-bg);
  color:var(--input-text);
  border:1px solid var(--line);
  border-radius:12px;
  box-sizing:border-box;
}

.report-field input[type="date"]::-webkit-date-and-time-value,
#reportsCenterModal input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
}

.report-field input[type="date"]::-webkit-calendar-picker-indicator,
#reportsCenterModal input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:1;
  cursor:pointer;
  filter:none;
}

.report-field input[type="date"]::-webkit-clear-button,
#reportsCenterModal input[type="date"]::-webkit-clear-button{
  display:none;
}

.report-field input[type="date"]::-webkit-inner-spin-button,
#reportsCenterModal input[type="date"]::-webkit-inner-spin-button{
  display:none;
}

  .report-field .field-hint{
    margin-top:10px;
    font-size:12px;
    line-height:1.45;
    color:var(--muted);
  }

.report-field.report-action{
  width:100%;
  min-width:0;
  max-width:220px;
  padding-top:29px;
  align-self:start;
}

  .report-field.report-action label{
    display:none;
  }

  .report-field.report-action button{
    width:100%;
    height:40px;
    min-height:40px;
  }

  .product-list-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:18px;
  }

  .product-list-toolbar .toolbar-left,
  .product-list-toolbar .toolbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .product-list-toolbar .toolbar-right select{
    width:auto;
    min-width:88px;
  }

  /* ── Classic layout fullscreen ── */
  body.layout-classic{
    padding:8px clamp(10px, 1.2vw, 20px);
  }
  body.layout-classic .wrap{
    width:100%;
    max-width:100%;
    margin:0;
  }
  body.layout-classic .brandbar{
    margin-bottom:10px;
  }
  body.layout-classic .card{
    margin:10px 0;
    border-radius:16px;
  }
  body.layout-classic .panel{
    min-height:clamp(460px, 72vh, 1000px);
    margin-top:10px;
    border-radius:16px;
  }

  @media (max-width: 980px){
    .grid2{
      grid-template-columns:1fr;
    }

    .brandbar{
      align-items:flex-start;
    }

    input, select, textarea{
      min-width:0;
      width:100%;
      flex:1 1 180px;
    }

    .row > button{
      flex:0 0 auto;
    }

    .report-filter-grid,
    .report-filter-grid.stock-low,
    .report-filter-grid.with-range{
      grid-template-columns:1fr !important;
      gap:24px !important;
    }

    .report-field{
      width:100%;
      min-width:0;
    }

    .report-field label{
      margin-bottom:8px;
    }

.report-field input[type="date"],
#reportsCenterModal input[type="date"],
#r_threshold{
  width:100%;
  min-width:0 !important;
  display:block;
  text-align:left;
  height:42px !important;
  min-height:42px !important;
  padding:6px 10px !important;
}

    .report-field .field-hint{
      margin-top:10px;
      line-height:1.55;
    }

    .report-field.report-action{
      width:100%;
      justify-self:stretch;
      align-self:stretch;
    }

    .report-field.report-action button{
      width:100%;
      min-height:40px;
    }
  }

  @media (max-width: 640px){
    body{
      padding:12px;
    }

    .card{
      padding:20px;
      border-radius:16px;
    }

    .panel{
      padding:16px;
      border-radius:16px;
      min-height:auto;
    }

    .brandbar{
      gap:12px;
      align-items:flex-start;
    }

    .brandlogo-shell{
      width:54px;
      height:54px;
      border-radius:14px;
    }

    h1{
      font-size:28px;
      line-height:1.08;
    }

    .tabs{
      display:flex !important;
      flex-wrap:nowrap !important;
      overflow-x:auto !important;
      -webkit-overflow-scrolling:touch;
      gap:6px !important;
      padding:8px 4px !important;
      scrollbar-width:none;
    }
    .tabs::-webkit-scrollbar{display:none}
    .tabs button{
      flex:0 0 auto !important;
      white-space:nowrap !important;
      font-size:12px !important;
      padding:8px 14px !important;
      border-radius:20px !important;
    }

    .row{
      align-items:stretch;
    }

    .row > input,
    .row > select,
    .row > textarea,
    .row > button{
      width:100%;
      min-width:0 !important;
      flex:1 1 100% !important;
    }

    #panel .row{
      flex-direction:column;
      align-items:stretch;
    }

    #panel .row > input,
    #panel .row > select,
    #panel .row > textarea,
    #panel .row > button{
      width:100%;
      min-width:0 !important;
      flex:1 1 100% !important;
    }

    #sm_product,
    #sm_type,
    #sm_reason,
    #sm_qty,
    #sm_note,
    #m_limit{
      width:100%;
      min-width:0 !important;
      flex:1 1 100% !important;
    }

    #sm_note{
      min-width:0 !important;
    }

    #productGalleryModal .row > button,
    #myPreferencesModal .row > button{
      width:auto;
    }

    #topCard > .row{
      width:100%;
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      align-items:start;
    }

    #topCard > .row > .row:first-child{
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
    }

    #topCard > .row > .row:first-child .pill{
      max-width:100%;
      white-space:normal;
      word-break:break-word;
      line-height:1.35;
      padding:8px 12px;
    }

    #topRoleText{
      display:block;
      margin-left:0 !important;
    }

    #topCard .right{
      margin-left:0;
      width:100%;
      display:flex !important;
      flex-direction:column;
      align-items:stretch !important;
      gap:10px;
    }

    #licText{
      white-space:normal;
      word-break:break-word;
      line-height:1.45;
    }

    #topCard .right .row{
      width:100%;
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:10px;
      align-items:center;
      justify-content:initial !important;
    }

    #topEmailText{
      min-width:0;
      display:block;
      white-space:normal;
      word-break:break-word;
      line-height:1.35;
    }

    #topLogoutBtn{
      width:100%;
      max-width:120px;
      min-width:96px;
      justify-self:end;
    }

    #appCard,
    #panel,
    #p_catalogs,
    #p_create_wrap,
    #p_edit,
    #s_view,
    #m_view,
    #r_low,
    #r_mov,
    #rs_view,
    #u_list,
    #brand_list,
    #category_list,
    #p_list{
      width:100%;
      max-width:100%;
      min-width:0;
    }

    #panel > *{
      min-width:0;
      max-width:100%;
    }

    #panel .card,
    #panel .soft-block,
    #panel .grid2{
      width:100%;
      max-width:100%;
      min-width:0;
    }

    #panel h2,
    #panel h3,
    #panel h4,
    #panel p{
      max-width:100%;
      word-break:break-word;
    }

    #panel .grid2{
      grid-template-columns:1fr !important;
    }

    #panel .grid2 > div{
      width:100%;
      max-width:100%;
      min-width:0;
    }

    #sm_msg,
    #s_view,
    #m_view{
      width:100%;
      max-width:100%;
      min-width:0;
    }

    .table-wrap{
      width:100%;
      max-width:100%;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
    }

    table{
      min-width:640px;
    }

    #s_view,
    #m_view,
    #r_low,
    #r_mov,
    #rs_view,
    #u_list,
    #brand_list,
    #category_list,
    #p_list{
      width:100%;
      max-width:100%;
      min-width:0;
      overflow:hidden;
    }

    #myPreferencesModal,
    #productGalleryModal{
      padding:12px !important;
    }

    #productGalleryModal .pg-layout{
      display:block !important;
    }

    #productGalleryModal .pg-main{
      margin-bottom:14px;
    }

    #productGalleryModal .pg-preview-wrap{
      min-height:auto !important;
      padding:12px !important;
    }

    #productGalleryModal .pg-preview-box{
      width:min(100%, 320px) !important;
      margin:0 auto;
    }

    #productGalleryModal .pg-thumbs{
      display:flex;
      gap:8px;
      flex-wrap:nowrap;
      overflow-x:auto;
      padding-bottom:4px;
      -webkit-overflow-scrolling:touch;
    }

    #productGalleryModal .pg-info{
      gap:10px !important;
    }

    #productGalleryModal .pg-header{
      gap:10px;
    }

    #productGalleryModal .pg-header .right{
      margin-left:0;
      width:100%;
    }

    #productGalleryModal .pg-header .right.row{
      justify-content:flex-start !important;
    }

    #productGalleryModal .pg-nav-btn{
      width:40px !important;
      min-width:40px;
      height:40px;
      padding:0;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
    }
  }

  /* ===== RESPONSIVE / MOBILE (iPhone Safari) ENHANCEMENTS ===== */

  /* Prevent horizontal overflow globally */
  html{
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }

  body{
    overflow-x:hidden;
    -webkit-tap-highlight-color:transparent;
    padding-bottom:env(safe-area-inset-bottom);
  }

  /* iOS zoom prevention: inputs must be >= 16px */
  @media (max-width: 768px){
    input, select, textarea{
      font-size:16px !important;
      -webkit-appearance:none;
      appearance:none;
      touch-action:manipulation;
      padding:8px 12px !important;
      height:42px !important;
      max-height:42px !important;
      min-height:0 !important;
      line-height:1.3;
      box-sizing:border-box !important;
      min-width:0 !important;
      width:100%;
      max-width:100%;
    }
    select{
      height:42px !important;
      max-height:42px !important;
      padding-right:28px !important;
    }
    textarea{
      height:auto !important;
      max-height:none !important;
      min-height:60px !important;
    }

    /* iOS date/time inputs tend to render tall — constrain them */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"]{
      padding:5px 8px !important;
      min-height:32px;
      -webkit-appearance:none;
      appearance:none;
    }

    /* iOS select native rendering — tighter */
    select{
      -webkit-appearance:none;
      appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 8px center;
      padding-right:26px !important;
    }

    /* Touch-friendly targets */
    button{
      min-height:34px;
      min-width:36px;
      max-width:100%;
    }

    button.small{
      min-height:30px;
      min-width:30px;
    }

    input[type="checkbox"]{
      -webkit-appearance:checkbox !important;
      appearance:checkbox !important;
      height:18px !important;
      max-height:18px !important;
      min-height:auto !important;
      min-width:auto !important;
      max-width:18px !important;
      width:18px !important;
      padding:0 !important;
      flex:0 0 auto !important;
    }

    /* Report column toggles — horizontal wrap on mobile */
    .report-columns-toggle{
      gap:8px !important;
      padding:10px 12px !important;
    }
    .col-toggle{
      font-size:13px !important;
      gap:6px !important;
      padding:4px 0 !important;
    }
    .col-toggle input[type="checkbox"]{
      -webkit-appearance:checkbox !important;
      appearance:checkbox !important;
      width:18px !important;
      height:18px !important;
      min-width:18px !important;
      accent-color:var(--blue);
    }

    /* Sub-tab bar: horizontal scroll on mobile */
    .sub-tab-bar{
      display:flex !important;
      flex-wrap:nowrap !important;
      overflow-x:auto !important;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      width:100% !important;
    }
    .sub-tab-bar::-webkit-scrollbar{display:none}
    .sub-tab-bar button{
      flex:0 0 auto !important;
      white-space:nowrap !important;
      font-size:12px !important;
      padding:8px 14px !important;
    }

    /* Presale sub-tabs: horizontal scroll on mobile */
    .presale-sub-tabs{width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;scrollbar-width:none;}
    .presale-sub-tabs::-webkit-scrollbar{display:none;}

    /* Table responsive wrappers */
    .table-wrap,
    .stock-table-wrap,
    .premium-table{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      max-width:100%;
    }

    /* Modal fixes for mobile */
    #myPreferencesModal > div,
    #importProductsModal > div,
    #productGalleryModal > div,
    #reportsCenterModal > div,
    #warehousesAdminModal > div,
    #tenantSettingsModal > div{
      width:95vw !important;
      max-width:none !important;
      max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
      overflow-y:auto !important;
      overflow-x:hidden !important;
      border-radius:14px !important;
      padding:14px !important;
    }

    /* Modal inner content must not overflow */
    #myPreferencesModal > div *,
    #importProductsModal > div *,
    #reportsCenterModal > div *,
    #tenantSettingsModal > div *{
      max-width:100%;
      box-sizing:border-box;
    }

    /* Prevent body scroll when modal is open — no position:fixed to avoid iOS keyboard bugs */
    body.modal-open{
      overflow:hidden !important;
    }

    /* Overscroll prevention on modal backdrops */
    #myPreferencesModal,
    #importProductsModal,
    #productGalleryModal,
    #reportsCenterModal,
    #warehousesAdminModal,
    #tenantSettingsModal{
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }

    /* Cards/containers padding adjustments */
    .card{
      padding:20px;
    }

    .soft-block{
      padding:18px;
    }

    /* Text overflow prevention */
    h1, h2, h3, h4, p, span, div{
      max-width:100%;
      overflow-wrap:break-word;
      word-wrap:break-word;
    }

    /* Images max-width */
    img{
      max-width:100%;
      height:auto;
    }

    /* Tabs scrollable on mobile */
    .tabs{
      display:flex !important;
      flex-wrap:nowrap !important;
      overflow-x:auto !important;
      -webkit-overflow-scrolling:touch;
      gap:6px !important;
      padding:8px 4px !important;
      scrollbar-width:none;
    }
    .tabs::-webkit-scrollbar{display:none}
    .tabs button{
      flex:0 0 auto !important;
      white-space:nowrap !important;
      font-size:12px !important;
      padding:8px 14px !important;
      border-radius:20px !important;
      min-height:42px;
    }

    /* Row layout: always stack vertically on mobile */
    .row{
      flex-direction:column;
      align-items:stretch;
      gap:8px;
    }

    .row > input,
    .row > select,
    .row > textarea,
    .row > button{
      width:100% !important;
      min-width:0 !important;
      flex:none !important;
    }

    /* Grid layouts collapse to single column */
    .grid2, .grid3{
      grid-template-columns:1fr !important;
      gap:10px;
    }

    /* Check-group keeps horizontal on mobile */
    .check-group{
      gap:10px;
    }

    .check-group label{
      font-size:14px;
    }

    /* Login form stacking */
    #loginForm{
      flex-direction:column;
      align-items:stretch;
    }

    #loginForm input,
    #loginForm button{
      width:100% !important;
      min-width:0 !important;
    }

    /* Product list toolbar */
    .product-list-toolbar{
      flex-direction:column;
      align-items:stretch;
    }

    .product-list-toolbar .toolbar-left,
    .product-list-toolbar .toolbar-right{
      width:100%;
    }

    .product-list-toolbar .toolbar-right select{
      width:100%;
      min-width:0 !important;
    }

    /* Select elements: prevent overflow */
    select{
      text-overflow:ellipsis;
      overflow:hidden;
      -webkit-appearance:none;
      appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 12px center;
      background-size:12px;
      padding-right:32px;
    }
  }

  /* Sale form mobile: stack totals grid */
  @media (max-width: 640px){
    #panel [style*="grid-template-columns:1fr 1fr"]{
      grid-template-columns:1fr !important;
    }
    #newCustSaleOverlay > div{
      max-width:100% !important;
      margin:8px !important;
      padding:18px !important;
    }
    #newCustSaleOverlay [style*="grid-template-columns:1fr 1fr"]{
      grid-template-columns:1fr !important;
    }
    /* Cash session status bar */
    #panel [style*="justify-content:space-between"][style*="flex-wrap:wrap"]{
      flex-direction:column !important;
      align-items:flex-start !important;
    }
    /* Stock-shell sale form containers */
    .stock-shell{
      max-width:100% !important;
      padding:0 !important;
    }
    .stock-hero{
      flex-direction:column !important;
      align-items:flex-start !important;
      gap:8px !important;
    }
    .stock-field input,
    .stock-field select{
      width:100% !important;
      max-width:100% !important;
      box-sizing:border-box !important;
    }
    /* Sale items table scroll */
    .tbl{
      min-width:580px;
    }
  }

  /* Extra small devices (iPhone SE, small phones) */
  @media (max-width: 430px){
    body{
      padding:8px;
      padding-bottom:env(safe-area-inset-bottom);
    }

    .card{
      padding:16px;
      border-radius:14px;
    }

    .panel{
      padding:14px;
      border-radius:14px;
    }

    h1{
      font-size:22px;
    }

    h2{
      font-size:18px;
    }

    h3{
      font-size:16px;
    }

    .brandlogo-shell{
      width:42px;
      height:42px;
      border-radius:12px;
    }

    .brandbar{
      gap:8px;
    }

    /* Inputs/selects tighter on small phones */
    input, select, textarea{
      padding:6px 10px !important;
      font-size:16px !important;
      border-radius:8px;
      height:40px !important;
      max-height:40px !important;
      min-height:0 !important;
      line-height:1.3;
      box-sizing:border-box !important;
    }
    textarea{ height:auto !important; max-height:none !important; min-height:50px !important; }
    select{ height:40px !important; max-height:40px !important; }
    input[type="checkbox"]{
      -webkit-appearance:checkbox !important;
      appearance:checkbox !important;
      height:18px !important;max-height:18px !important;min-height:auto !important;
      width:18px !important;max-width:18px !important;min-width:auto !important;
      padding:0 !important;
      flex:0 0 auto !important;
    }

    input[type="date"],
    input[type="time"],
    input[type="datetime-local"]{
      padding:3px 6px !important;
      min-height:28px;
    }

    /* Buttons tighter */
    button{
      padding:5px 8px;
      font-size:14px;
      min-height:38px;
    }

    /* Modal content even tighter */
    #myPreferencesModal > div,
    #importProductsModal > div,
    #productGalleryModal > div,
    #reportsCenterModal > div,
    #warehousesAdminModal > div,
    #tenantSettingsModal > div{
      padding:12px !important;
    }

    /* Table min-width smaller for tiny screens */
    table{
      min-width:540px;
    }
  }

  /* Safe area padding for notched iPhones */
  @supports (padding: env(safe-area-inset-bottom)){
    body{
      padding-left:env(safe-area-inset-left);
      padding-right:env(safe-area-inset-right);
    }

    .brandbar{
      padding-top:env(safe-area-inset-top);
    }

    .wrap{
      padding-left:env(safe-area-inset-left);
      padding-right:env(safe-area-inset-right);
    }

    #myPreferencesModal,
    #importProductsModal,
    #productGalleryModal,
    #reportsCenterModal,
    #warehousesAdminModal,
    #tenantSettingsModal{
      padding-top:env(safe-area-inset-top) !important;
      padding-bottom:env(safe-area-inset-bottom) !important;
    }
  }

  /* Help tooltips for first-time users */
  .help-tip{
    display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:20px;border-radius:50%;
    background:var(--blue,#1D4ED8);color:#fff;
    font-size:11px;font-weight:700;cursor:help;
    margin-left:6px;position:relative;flex-shrink:0;
    vertical-align:middle;transition:transform .15s,box-shadow .15s;
  }
  .help-tip:hover{
    transform:scale(1.15);box-shadow:0 2px 8px rgba(0,0,0,.2);
  }
  /* Tooltip rendered by JS — see _helpTipEl in app.js */
  .help-tip:hover::after,
  .help-tip:hover::before{display:none;}

  #_htip{
    position:fixed;z-index:9999;pointer-events:none;
    background:var(--card,#1e293b);color:var(--text,#f1f5f9);
    padding:10px 14px;border-radius:10px;font-size:12.5px;font-weight:400;
    white-space:normal;max-width:min(320px,calc(100vw - 32px));width:max-content;
    box-shadow:0 8px 24px rgba(0,0,0,.35);line-height:1.5;
    border:1px solid var(--line,#334155);display:none;
  }

  /* ===== STATUS COLORS (light/dark compatible via CSS vars) ===== */
  :root{
    --modal-radius:18px;
  }

  /* ===== BUTTON CLASSES ===== */

  /* Hero action button — large accent button used for primary page actions */
  .btn-hero{
    background:#fff;
    color:var(--blue);
    font-weight:700;
    border:none;
    padding:10px 22px;
    border-radius:10px;
    cursor:pointer;
    font-size:.95em;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    transition:all .18s ease;
  }
  .btn-hero:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(0,0,0,.2);
  }

  /* Standard button variants */
  .btn-primary{
    background:var(--blue, #1d4ed8);
    color:#ffffff;
    border:1px solid var(--blue, #1d4ed8);
    box-shadow:var(--shadow-primary, 0 8px 18px rgba(29,78,216,.22));
  }
  .btn-primary:hover{
    filter:brightness(1.06);
  }

  .btn-success{
    background:var(--status-active, #16a34a);
    color:#ffffff;
    border:1px solid var(--status-active, #16a34a);
    box-shadow:0 4px 12px rgba(22,163,74,.22);
  }
  .btn-success:hover{
    filter:brightness(1.06);
  }

  .btn-danger{
    background:var(--status-inactive, #dc2626);
    color:#ffffff;
    border:1px solid var(--status-inactive, #dc2626);
    box-shadow:0 4px 12px rgba(220,38,38,.22);
  }
  .btn-danger:hover{
    filter:brightness(1.06);
  }

  .btn-secondary{
    background:var(--button-secondary-bg, #ffffff);
    color:var(--button-secondary-text, #111827);
    border:1px solid var(--button-secondary-border, #cfd8e3);
  }
  .btn-secondary:hover{
    filter:brightness(.97);
  }

  .btn-warning{
    background:var(--status-pending, #d97706);
    color:#ffffff;
    border:1px solid var(--status-pending, #d97706);
    box-shadow:0 4px 12px rgba(217,119,6,.22);
  }
  .btn-warning:hover{
    filter:brightness(1.06);
  }

  /* ===== MODAL OVERLAY (consistent backdrop) ===== */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:var(--modal-backdrop);
    z-index:9000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    overflow-y:auto;
  }

  /* Generic .modal safety net */
  .modal{
    background:var(--card, #ffffff);
    border-radius:var(--modal-radius, 18px);
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    padding:24px;
    width:95%;
    max-height:90vh;
    overflow-y:auto;
  }

  /* Modal dialog box — consistent border-radius */
  .modal-dialog{
    background:var(--card, #ffffff);
    border-radius:var(--modal-radius, 18px);
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    max-width:90vw;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
    padding:24px 28px;
    position:relative;
  }

  /* Apply consistent border-radius to existing modals */
  #myPreferencesModal > div,
  #importProductsModal > div,
  #productGalleryModal > div,
  #reportsCenterModal > div,
  #warehousesAdminModal > div,
  #tenantSettingsModal > div{
    border-radius:var(--modal-radius, 18px);
  }

  /* Apply consistent backdrop to existing modal overlays */
  #myPreferencesModal,
  #importProductsModal,
  #productGalleryModal,
  #reportsCenterModal,
  #warehousesAdminModal,
  #tenantSettingsModal{
    background:var(--modal-backdrop) !important;
  }

  /* Input dark mode compatibility */
  input,select,textarea{
    background:var(--input-bg, #f8fafc);
    color:var(--input-text, #1e293b);
    border-color:var(--input-border, #cbd5e1);
    border-style:solid;
    outline:none;
  }
  input::placeholder,textarea::placeholder{
    color:var(--input-placeholder, #94a3b8);
  }

  /* Section card left-border accent */
  .soft-block{
    border-left:3px solid var(--blue, #1D4ED8);
  }

  /* Smooth transitions */
  .card,.soft-block,button,.tabs button,input,select,textarea{
    transition:all .2s ease;
  }
  button:active{transform:scale(.97)}

  /* Table alternating rows and hover */
  table tbody tr:nth-child(even){background:var(--table-row-alt, var(--surface, #f8fafc))}
  table tbody tr:hover{background:var(--blue-bg, #eff6ff)}

  /* Role badge styles */
  .role-badge{
    display:inline-block;
    padding:2px 10px;
    border-radius:12px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
  }
  .role-badge.admin{background:var(--info-bg, #dbeafe);color:var(--info-text, #1d4ed8)}
  .role-badge.supervisor{background:var(--warn-bg, #fef3c7);color:var(--warn-text, #92400e)}
  .role-badge.cajero{background:var(--success-bg, #d1fae5);color:var(--success-text, #065f46)}
  .role-badge.super-admin{background:linear-gradient(135deg, var(--super-admin-from), var(--super-admin-to));color:#fff;font-weight:700;letter-spacing:.6px;padding:3px 12px;box-shadow:0 2px 8px color-mix(in srgb, var(--super-admin-from) 35%, transparent)}

  /* Tab group container for sub-sections */
  .tab-group { border-bottom: 1px solid var(--line); margin-bottom: 16px; padding-bottom: 8px; }
  .tab-group-title { font-size: .8em; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; margin-bottom: 6px; font-weight: 600; }

  /* Dashboard KPI cards */
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
  .kpi-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; text-align: center; }
  .kpi-value { font-size: 2em; font-weight: 700; color: var(--heading); }
  .kpi-label { font-size: .85em; color: var(--muted); margin-top: 4px; }
  .kpi-icon { font-size: 2em; margin-bottom: 8px; }

  /* Expense and Supplier cards */
  .data-list-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
  .data-list-item:hover { border-color: var(--blue); }

  /* Keyboard shortcut hints */
  .kbd { display: inline-block; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-size: .75em; font-family: monospace; color: var(--muted); }

  /* Configuration section grouping */
  .config-section { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; margin-bottom: 24px; }
  .config-section h3 { margin: 0 0 16px 0; font-size: 1em; color: var(--heading); }

  @media (max-width: 640px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi-card { padding: 14px; }
    .kpi-value { font-size: 1.5em; }
  }

  /* 2026-05-01: Login form layout — apilado vertical (usuario / password / Login)
     en TODOS los viewports. Inputs con max-width:540px para no estirar absurdo
     en pantallas anchas. Height 44px (un poco más chico que la versión anterior
     de 48px). Form en column override del .row padre. */
  #loginForm {
    flex-direction: column;
    align-items: flex-start;
  }
  #loginForm > input,
  #loginForm > .pw-eye-wrap {
    flex: 0 0 auto;
    width: 100%;
    max-width: 540px;
    min-width: 0;
    height: 44px;
    font-size: 16px;
  }
  #loginForm > .pw-eye-wrap > input {
    height: 44px;
    font-size: 16px;
  }
  #loginForm > button {
    flex: 0 0 auto;
  }

  /* Login form mobile improvements */
  @media (max-width: 640px){
    #loginBox{
      width:100%;
      max-width:100%;
    }
    #loginBox .brandlogo-shell{
      max-width:100%;
    }
    #loginForm{
      width:100%;
    }
    #loginForm input,
    #loginForm button{
      width:100% !important;
      min-width:0 !important;
      box-sizing:border-box;
    }
    #loginForm button{
      margin-top:4px;
    }
  }

  /* ===== Pre-Sale Cards ===== */
  .presale-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px 24px;
    border-left:5px solid var(--blue);
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .presale-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-soft);
  }
  .presale-card.status-open{ border-left-color:var(--presale-card-pending); }
  .presale-card.status-pending{ border-left-color:var(--presale-card-inprogress); }
  .presale-card.status-completed{ border-left-color:var(--presale-card-completed); }
  .presale-card.status-cancelled{ border-left-color:var(--presale-card-cancelled); }
  .presale-card.status-expired{ border-left-color:var(--presale-card-expired); }

  /* ===== Pre-Sale Timer ===== */
  .presale-timer{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    border-radius:8px;
    font-size:.82em;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    background:var(--presale-timer-bg);
    color:var(--presale-timer-text);
    border:1px solid var(--presale-timer-border);
  }
  .presale-timer.urgent{
    background:var(--presale-timer-urgent-bg);
    color:var(--presale-timer-urgent-text);
    border-color:var(--presale-timer-urgent-border);
    animation:timerPulse 1s ease-in-out infinite;
  }
  @keyframes timerPulse{
    0%,100%{ opacity:1; }
    50%{ opacity:.6; }
  }

  @keyframes slideIn{
    from{ opacity:0; transform:translateY(-10px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @keyframes bellShake{
    0%{ transform:rotate(0); }
    15%{ transform:rotate(14deg); }
    30%{ transform:rotate(-14deg); }
    45%{ transform:rotate(10deg); }
    60%{ transform:rotate(-6deg); }
    75%{ transform:rotate(2deg); }
    100%{ transform:rotate(0); }
  }

  .bell-has-unread svg{ color:var(--bell-unread); animation:bellShake .6s ease-in-out; }

  /* ===== Pre-Sale Status Badges ===== */
  .presale-status-badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:.75em;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .presale-status-badge.open{ background:var(--presale-open-bg); color:var(--presale-open-text); border:1px solid var(--presale-open-border); }
  .presale-status-badge.pending{ background:var(--presale-pending-bg); color:var(--presale-pending-text); border:1px solid var(--presale-pending-border); }
  .presale-status-badge.completed{ background:var(--presale-completed-bg); color:var(--presale-completed-text); border:1px solid var(--presale-completed-border); }
  .presale-status-badge.cancelled{ background:var(--presale-cancelled-bg); color:var(--presale-cancelled-text); border:1px solid var(--presale-cancelled-border); }
  .presale-status-badge.expired{ background:var(--presale-expired-bg); color:var(--presale-expired-text); border:1px solid var(--presale-expired-border); }

  /* ===== Reservation Indicator ===== */
  .reservation-indicator.reservation-ok{
    color:var(--reservation-ok);
    background:color-mix(in srgb, var(--reservation-ok) 10%, transparent);
  }
  .reservation-indicator.reservation-ok::before{
    background:var(--reservation-ok);
  }
  .reservation-indicator.reservation-danger{
    color:var(--reservation-danger);
    background:color-mix(in srgb, var(--reservation-danger) 10%, transparent);
  }
  .reservation-indicator.reservation-danger::before{
    background:var(--reservation-danger);
  }
  .reservation-indicator{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:.75em;
    font-weight:600;
    color:var(--reservation-danger);
    padding:2px 8px;
    border-radius:6px;
    background:color-mix(in srgb, var(--reservation-danger) 10%, transparent);
  }
  .reservation-indicator::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--reservation-danger);
  }

  /* ===== Product Type Filter ===== */
  .product-type-filter{
    display:inline-flex;
    gap:0;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
  }
  .product-type-filter button{
    padding:7px 14px;
    border:none;
    border-radius:8px;
    background:var(--tab-bg);
    color:var(--tab-text);
    font-size:.82em;
    font-weight:600;
    cursor:pointer;
    transition:all .15s;
    box-shadow:none;
    margin:0;
  }
  .product-type-filter button + button{
    border-left:1px solid var(--line);
  }
  .product-type-filter button.active{
    background:var(--blue);
    color:#fff;
  }

  /* ===== Service Badge (large, violeta) ===== */
  .service-badge-lg{
    display:inline-block;
    background:#7c3aed;
    color:#fff;
    font-size:.72em;
    font-weight:700;
    padding:3px 10px;
    border-radius:6px;
    vertical-align:middle;
    letter-spacing:.03em;
  }

  /* ===== Product Badge (large, verde teal) — diferencia visual con servicios ===== */
  .product-badge-lg{
    display:inline-block;
    background:#0d9488;
    color:#fff;
    font-size:.72em;
    font-weight:700;
    padding:3px 10px;
    border-radius:6px;
    vertical-align:middle;
    letter-spacing:.03em;
  }

  /* ===== Service Banner ===== */
  .service-banner{
    background:linear-gradient(135deg, rgba(124,58,237,.1), rgba(59,130,246,.08));
    border:1px solid rgba(124,58,237,.3);
    border-radius:12px;
    padding:12px 18px;
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.9em;
    font-weight:600;
    color:#7c3aed;
  }

  /* ===== Presale queue grid ===== */
  .presale-queue-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:18px;
  }

  /* ===== Sub-tab switcher for presale ===== */
  .presale-sub-tabs{
    display:flex;
    gap:0;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    width:fit-content;
    margin-bottom:20px;
  }
  .presale-sub-tabs button{
    background:transparent;
    color:var(--text);
    border-top:none;border-left:none;border-right:none;
    border-bottom:2px solid transparent;
    border-radius:0;
    padding:10px 22px;
    font-weight:600;
    font-size:.92em;
    cursor:pointer;
    min-height:44px;
    transition:all .15s;
    box-shadow:none;
    margin:0;
  }
  .presale-sub-tabs button.active{
    color:var(--blue);
    border-bottom:2px solid var(--blue);
    font-weight:700;
    background:transparent;
    box-shadow:none;
  }

  /* ===== Presale notification badge ===== */
  .presale-notif-badge{
    display:none;
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:18px;
    height:18px;
    line-height:18px;
    text-align:center;
    border-radius:999px;
    background:#dc2626;
    color:#fff;
    font-size:.65em;
    font-weight:700;
    padding:0 4px;
  }

  /* ===== Contact email display ===== */
  .contact-email-display{
    font-size:.85em;
    color:var(--muted, #667085);
    display:inline-flex;
    align-items:center;
    gap:4px;
  }

  /* ===== Forgot password link ===== */
  .forgot-password-link{
    font-size:.88em;
    color:var(--blue, #1d4ed8);
    text-decoration:none;
    cursor:pointer;
    transition:opacity .15s;
  }
  .forgot-password-link:hover{
    opacity:.75;
    text-decoration:underline;
  }

  /* ===== Reset password form ===== */
  .reset-password-form{
    max-width:380px;
    margin:0 auto;
    padding:20px 0;
  }
  .reset-password-form input{
    height:44px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid var(--line, #dbe3ee);
    font-size:.95em;
    background:var(--input-bg, #fff);
    color:var(--input-text, #111827);
  }

  /* ===== Profile section ===== */
  .profile-section{
    background:var(--surface, #f8fafc);
    border:1px solid var(--line, #dbe3ee);
    border-radius:14px;
    padding:24px 28px;
    margin-top:20px;
  }

  /* ===== Helper text below inputs ===== */
  .helper-text{
    font-size:.78em;
    color:var(--muted, #667085);
    margin-top:4px;
    line-height:1.4;
  }

  /* =============================================== */
  /* ===== LIGHT MODE ENHANCEMENTS                   */
  /* ===== High-contrast, professional light theme   */
  /* =============================================== */

  /* --- Header / Brand bar: ensure dark text in light mode --- */
  h1,
  .brandcopy h1,
  #brandName{
    color:#0f172a !important;
  }
  .brandsubtitle,
  #brandSubtitle{
    color:#475569 !important;
  }
  .brandeyebrow,
  #brandEyebrow{
    color:#667085 !important;
  }
  .brandlogo-shell{
    background:#f8fafc;
    border-color:#e2e8f0;
  }

  /* --- Cards: visible borders, stronger shadows --- */
  .card{
    border-color:var(--card-border, #e2e8f0);
    box-shadow:var(--card-shadow);
  }
  .card:hover{
    box-shadow:var(--card-shadow-hover);
  }

  /* --- KPI cards: subtle tinted background, crisp borders --- */
  .kpi-card{
    background:#ffffff;
    border:1px solid #e2e8f0;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
  }
  .kpi-value{
    color:#0f172a !important;
    font-weight:800 !important;
  }
  .kpi-label{
    color:#475569 !important;
    font-weight:500;
  }

  /* --- Admin KPI cards (injected by app.js) --- */
  .admin-kpi{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
  }
  .admin-kpi-value{
    color:#0f172a !important;
    font-weight:800 !important;
  }
  .admin-kpi-label{
    color:#475569 !important;
    font-weight:500;
  }

  /* --- Admin cards: solid background, visible dividers --- */
  .admin-card{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
    box-shadow:var(--card-shadow) !important;
  }
  .admin-card-head{
    border-bottom:1px solid #f1f5f9 !important;
  }
  .admin-card-title{
    color:#0f172a !important;
  }
  .admin-card-subtitle{
    color:#475569 !important;
  }

  /* --- Tables: stronger header, alternating rows, visible borders --- */
  th{
    background:#f1f5f9 !important;
    color:#0f172a !important;
    font-weight:700;
  }
  td{
    color:#1e293b;
    border-bottom-color:#e2e8f0 !important;
  }
  table{
    border-color:#e2e8f0 !important;
  }
  table tbody tr:nth-child(even){
    background:#f8fafc !important;
  }
  table tbody tr:hover{
    background:#eff6ff !important;
  }

  /* --- Premium table (app.js injected) --- */
  .premium-table{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
  }
  .premium-table thead th{
    background:#f1f5f9 !important;
    color:#0f172a !important;
    backdrop-filter:none;
  }
  .premium-table tbody td{
    color:#1e293b !important;
    border-top-color:#f1f5f9 !important;
  }

  /* --- Inputs: visible borders --- */
  input, select, textarea{
    border-color:#cbd5e1 !important;
    background:#ffffff;
    color:#1e293b;
  }
  input:focus, select:focus, textarea:focus{
    border-color:var(--blue) !important;
    box-shadow:0 0 0 3px rgba(29,78,216,.12) !important;
  }

  /* --- Tabs: crisp inactive + filled active --- */
  .tabs button{
    background:#ffffff;
    color:#334155;
    border:1px solid #cbd5e1;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    font-weight:600;
  }
  .tabs button:hover:not(.active){
    background:#f1f5f9;
    border-color:#94a3b8;
  }
  .tabs button.active{
    background:var(--blue);
    color:#ffffff;
    border-color:var(--blue);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
  }

  /* --- Sub-tab bars (app.js) --- */
  .sub-tab-bar button{
    color:var(--text) !important;
    font-weight:600;
    background:transparent !important;
    border-top:none !important;border-left:none !important;border-right:none !important;
    border-bottom:2px solid transparent !important;
  }
  .sub-tab-bar button.active{
    background:transparent !important;
    color:var(--blue) !important;
    border-bottom:2px solid var(--blue) !important;
    font-weight:700;
  }

  /* --- Product type filter --- */
  .product-type-filter button{
    background:#ffffff;
    color:#334155;
  }
  .product-type-filter button.active{
    background:var(--blue);
    color:#fff;
  }

  /* --- Buttons: secondary with stronger borders --- */
  button{
    border-color:#cbd5e1;
    background:#ffffff;
    color:#1e293b;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  button:hover{
    background:#f8fafc;
    border-color:#94a3b8;
  }
  button.primary{
    background:var(--blue);
    color:#ffffff;
    border-color:var(--blue);
    box-shadow:var(--shadow-primary);
  }
  button.primary:hover{
    filter:brightness(1.05);
  }
  button.danger{
    background:var(--button-danger-bg);
    color:var(--button-danger-text);
    border-color:var(--button-danger-border);
  }

  /* --- Hero sections: keep gradient, ensure white text ALWAYS readable --- */
  /* Los hero usan linear-gradient(var(--blue), var(--secondary)) inline. Como
     el accent color del tenant varía y --secondary puede ser claro (verde
     menta, celeste, lima), necesitamos dos capas de protección para el texto:
     1) Overlay oscuro fuerte (::before) que SIEMPRE oscurece el gradient.
     2) Halo/stroke oscuro en el texto mismo (text-shadow multicapa + stroke).
     Aplica a TODO elemento descendiente, no solo h2/p, para cubrir spans,
     divs internos, botones con texto, etc. */
  .admin-hero{
    border-color:transparent !important;
    position:relative;
    isolation:isolate;
  }
  .admin-hero::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    /* Gradient más oscuro en ambos extremos para garantizar contraste sobre
       CUALQUIER color de acento (claro u oscuro). */
    background:linear-gradient(135deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.38) 100%);
    pointer-events:none;
    z-index:0;
  }
  .admin-hero > *{ position:relative; z-index:1; }
  /* IMPORTANTE: no tocar el color de BOTONES. Los botones tienen sus propios
     estilos inline (ej: background:var(--card) + color:var(--blue)) que deben
     preservarse — forzar blanco haría texto blanco sobre fondo blanco,
     invisible. Por eso los selectores NO incluyen 'button' ni descendientes
     de botones.
     El halo oscuro (text-shadow + stroke) se aplica SOLO a los elementos de
     texto directos (h2, p, span, div, a, strong, b, em, small) que NO están
     dentro de un button. */
  .admin-hero h2,
  .admin-hero p,
  .admin-hero > div > h2,
  .admin-hero > div > p,
  .admin-hero h2 span,
  .admin-hero h2 strong,
  .admin-hero h2 em,
  .admin-hero p span,
  .admin-hero p strong,
  .admin-hero p em,
  .admin-hero p a,
  .admin-hero p small{
    color:#ffffff !important;
    text-shadow:
      0 1px 0 rgba(0,0,0,.35),
      0 2px 4px rgba(0,0,0,.55),
      0 0 2px rgba(0,0,0,.6) !important;
    -webkit-text-stroke: 0.2px rgba(0,0,0,.4);
  }
  /* Help tips "?" dentro del hero: fondo más sólido para contrastar.
     Excluye botones (los '?' son spans con clase help-tip). */
  .admin-hero .help-tip:not(button){
    background:rgba(0,0,0,.28) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.55) !important;
    text-shadow:none !important;
    -webkit-text-stroke:0 !important;
  }
  /* Botones dentro del hero: preservar TODO su estilo inline (color, fondo,
     etc). Solo resetear text-shadow y stroke que vendrían heredados. */
  .admin-hero button,
  .admin-hero button *{
    text-shadow:none !important;
    -webkit-text-stroke:0 !important;
  }

  /* v3.2 (2026-04-28 fix): mobile responsive del hero — antes el grid 2-col
     "minmax(0,1fr) auto" hacía que cuando los botones a la derecha consumían
     todo el ancho disponible, la columna del texto quedaba casi 0px y el
     browser rompía el título "Turnos y Citas" letra por letra (vertical).
     Fix: en <=640px colapsar el grid a 1 columna (stack vertical),
     reducir font-size del h2, y forzar word-break normal. Aplica a TODOS los
     módulos que usan .admin-hero (citas, ventas, productos, recepción, etc.). */
  @media (max-width: 640px){
    .admin-hero{
      grid-template-columns:1fr !important;
      grid-auto-flow:row !important;
      padding:18px 16px !important;
      gap:14px !important;
      text-align:left;
    }
    .admin-hero > div{
      min-width:0;
      justify-self:stretch !important;
    }
    /* Botones del hero: full width o wrap, justificados al inicio */
    .admin-hero > div:nth-child(2){
      justify-content:flex-start !important;
      flex-wrap:wrap !important;
    }
    .admin-hero > div:nth-child(2) > button{
      flex:1 1 auto;
      min-width:0;
      font-size:.85em !important;
      padding:8px 14px !important;
    }
    .admin-hero h2{
      font-size:1.15em !important;
      line-height:1.2;
      word-break:normal !important;
      overflow-wrap:anywhere;
      hyphens:none;
    }
    .admin-hero p{
      font-size:.85em !important;
      line-height:1.4;
      word-break:normal !important;
      overflow-wrap:anywhere;
    }
  }
  /* Defense-in-depth: incluso en desktop, evitar que el h2 rompa palabras */
  .admin-hero h2{
    word-break:normal;
    overflow-wrap:break-word;
  }
  /* stock-hero uses var(--card) bg, NOT gradient — text must follow theme */
  .stock-hero h2{
    color:var(--heading) !important;
  }
  .stock-hero p{
    color:var(--muted) !important;
  }

  /* --- Panels: clear background --- */
  .panel{
    background:#f8fafc;
    border-color:#e2e8f0;
  }

  /* --- Soft blocks: tinted bg --- */
  .soft-block{
    background:#f8fafc;
    border-color:#e2e8f0;
  }

  /* --- Data list items --- */
  .data-list-item{
    background:#ffffff;
    border-color:#e2e8f0;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .data-list-item:hover{
    border-color:var(--blue);
    box-shadow:0 2px 8px rgba(29,78,216,.1);
  }

  /* --- Config sections --- */
  .config-section{
    background:#ffffff;
    border-color:#e2e8f0;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .config-section h3{
    color:#0f172a;
  }

  /* --- Empty states --- */
  .empty-state{
    background:#f8fafc;
    border-color:#e2e8f0;
    color:#475569;
  }

  /* --- Premium empty (app.js) --- */
  .premium-empty{
    background:#f8fafc !important;
    border-color:#e2e8f0 !important;
    color:#475569 !important;
  }

  /* --- Premium badges --- */
  .premium-badge{
    background:#f8fafc;
    border-color:#e2e8f0;
    color:#1e293b;
  }

  /* --- Admin toolbar --- */
  .admin-toolbar{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
    box-shadow:var(--card-shadow) !important;
  }

  /* --- Admin list stat pills --- */
  .admin-list-stat{
    background:#f8fafc !important;
    border-color:#e2e8f0 !important;
    color:#475569 !important;
  }

  /* --- Pill badges --- */
  .pill{
    background:#f1f5f9;
    border-color:#e2e8f0;
    color:#1e293b;
  }

  /* --- Message boxes --- */
  .msg{
    background:#ffffff;
    border-color:#e2e8f0;
    color:#1e293b;
  }
  .msg.ok{
    background:#ecfdf5;
    border-color:#86efac;
    color:#166534;
  }
  .msg.err{
    background:#fef2f2;
    border-color:#fecaca;
    color:#991b1b;
  }

  /* --- Role badges: ensure readability --- */
  .role-badge.admin{background:#dbeafe;color:#1e40af}
  .role-badge.supervisor{background:#fef3c7;color:#92400e}
  .role-badge.cajero{background:#d1fae5;color:#065f46}

  /* --- Admin field labels and inputs (app.js) --- */
  .admin-field label{
    color:#334155 !important;
  }
  .admin-field input,
  .admin-field select,
  .admin-field textarea{
    background:#ffffff !important;
    color:#1e293b !important;
    border-color:#cbd5e1 !important;
    border-style:solid !important;
    outline:none;
  }

  /* --- Kbd shortcut hints --- */
  .kbd{
    background:#f1f5f9;
    border-color:#e2e8f0;
    color:#475569;
  }

  /* --- Profile section --- */
  .profile-section{
    background:#f8fafc;
    border-color:#e2e8f0;
  }

  /* --- Brand bar logo shell --- */
  .brandlogo-shell{
    background:#f8fafc;
    border-color:#e2e8f0;
  }

  /* --- Presale cards --- */
  .presale-card{
    background:#ffffff;
    border-color:#e2e8f0;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .presale-card:hover{
    box-shadow:var(--card-shadow-hover);
  }

  /* --- Report fields --- */
  .report-field label{
    color:#334155;
    font-weight:500;
  }

  /* --- JS-driven light mode: enforce light styles even on OS dark --- */
  body.light-mode{color:var(--text);}
  body.light-mode h1,
  body.light-mode .brandcopy h1,
  body.light-mode #brandName{color:var(--heading) !important;}
  body.light-mode .brandsubtitle,
  body.light-mode #brandSubtitle{color:var(--muted) !important;}
  body.light-mode .brandeyebrow,
  body.light-mode #brandEyebrow{color:var(--placeholder) !important;}
  body.light-mode h2,
  body.light-mode h3,
  body.light-mode h4{color:var(--heading) !important;}
  /* Light-mode hero: mismo stack que dark, excluye botones para preservar
     sus colores inline (evita texto blanco sobre fondo blanco). */
  body.light-mode .admin-hero h2,
  body.light-mode .admin-hero p,
  body.light-mode .admin-hero > div > h2,
  body.light-mode .admin-hero > div > p,
  body.light-mode .admin-hero h2 span,
  body.light-mode .admin-hero h2 strong,
  body.light-mode .admin-hero p span,
  body.light-mode .admin-hero p strong,
  body.light-mode .admin-hero p a,
  body.light-mode .admin-hero p small{
    color:#fff !important;
    text-shadow:
      0 1px 0 rgba(0,0,0,.35),
      0 2px 4px rgba(0,0,0,.55),
      0 0 2px rgba(0,0,0,.6) !important;
    -webkit-text-stroke: 0.2px rgba(0,0,0,.4);
  }
  body.light-mode .admin-hero button,
  body.light-mode .admin-hero button *{
    text-shadow:none !important;
    -webkit-text-stroke:0 !important;
  }
  body.light-mode strong,
  body.light-mode b{color:var(--heading);}
  body.light-mode label{color:var(--tab-text);}
  body.light-mode .brandlogo-shell{background:var(--surface);border-color:var(--line);}
  body.light-mode .card{background:var(--card);border-color:var(--line);box-shadow:var(--card-shadow);}
  body.light-mode .panel{background:var(--surface);border-color:var(--line);}
  body.light-mode th{background:var(--table-head-bg) !important;color:var(--heading) !important;}
  body.light-mode td{color:var(--text);border-bottom-color:var(--line) !important;}
  body.light-mode table{border-color:var(--line) !important;}
  body.light-mode table tbody tr:nth-child(even){background:var(--table-row-alt) !important;}
  body.light-mode table tbody tr:hover{background:var(--blue-bg) !important;}
  body.light-mode input,
  body.light-mode select,
  body.light-mode textarea{border-color:var(--input-border) !important;border-style:solid !important;outline:none;background-color:var(--input-bg) !important;color:var(--input-text) !important;}
  body.light-mode input:focus,
  body.light-mode select:focus,
  body.light-mode textarea:focus{border-color:var(--blue) !important;border-style:solid !important;outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent) !important;}
  body.light-mode .tabs button{background:var(--card);color:var(--tab-text);border:1px solid var(--input-border);}
  body.light-mode .tabs button:hover{background:var(--surface-2);color:var(--text);}
  body.light-mode .tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue);}
  body.light-mode .tabs button.active:hover{background:var(--blue);color:#fff;filter:brightness(1.08);}
  body.light-mode button{border-color:var(--input-border);background:var(--card);color:var(--text);}
  body.light-mode button.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
  body.light-mode button.danger{background:var(--button-danger-bg);color:var(--button-danger-text);border-color:var(--button-danger-border);}
  body.light-mode .soft-block{background:var(--surface);border-color:var(--line);}
  body.light-mode .pill{background:var(--surface-2);border-color:var(--line);color:var(--text);}
  body.light-mode .msg{background:var(--card);border-color:var(--line);color:var(--text);}
  body.light-mode .msg.ok{background:var(--success-bg);border-color:var(--okline);color:var(--success-text);}
  body.light-mode .msg.err{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text);}
  body.light-mode .empty-state{background:var(--surface);border-color:var(--line);color:var(--muted);}
  body.light-mode .kpi-card{background:var(--card);border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.06);}
  body.light-mode .kpi-value{color:var(--heading) !important;}
  body.light-mode .kpi-label{color:var(--muted) !important;}
  body.light-mode .data-list-item{background:var(--card);border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04);}
  body.light-mode .config-section{background:var(--card);border-color:var(--line);}
  body.light-mode .config-section h3{color:var(--heading);}
  body.light-mode .kbd{background:var(--surface-2);border-color:var(--line);color:var(--muted);}
  body.light-mode .presale-card{background:var(--card);border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04);}
  body.light-mode .admin-field label{color:var(--tab-text) !important;}
  body.light-mode .admin-field input,
  body.light-mode .admin-field select,
  body.light-mode .admin-field textarea{background-color:var(--input-bg) !important;color:var(--input-text) !important;border-color:var(--input-border) !important;border-style:solid !important;outline:none;}
  body.light-mode .admin-field select{-webkit-appearance:none !important;appearance:none !important;}
  body.light-mode .sub-tab-bar button{color:var(--tab-text) !important;background:transparent !important;border-top:none !important;border-left:none !important;border-right:none !important;border-bottom:2px solid transparent !important;}
  body.light-mode .sub-tab-bar button:hover{background:transparent !important;color:var(--text) !important;}
  body.light-mode .sub-tab-bar button.active{background:transparent !important;color:var(--blue) !important;border-bottom:2px solid var(--blue) !important;}
  body.light-mode .sub-tab-bar button.active:hover{background:transparent !important;color:var(--blue) !important;filter:none;}
  body.light-mode .product-type-filter button{background:var(--card);color:var(--tab-text);}
  body.light-mode .product-type-filter button:hover{background:var(--surface-2);color:var(--text);}
  body.light-mode .product-type-filter button.active{background:var(--blue);color:#fff;}
  body.light-mode .report-field label{color:var(--tab-text);font-weight:500;}
  body.light-mode .premium-table{background:var(--card) !important;border-color:var(--line) !important;}
  body.light-mode .premium-table thead th{background:var(--surface-2) !important;color:var(--heading) !important;}
  body.light-mode .premium-table tbody td{color:var(--text) !important;border-top-color:var(--surface-2) !important;}
  body.light-mode .admin-kpi{background:var(--card) !important;border-color:var(--line) !important;}
  body.light-mode .admin-kpi-value{color:var(--heading) !important;}
  body.light-mode .admin-kpi-label{color:var(--muted) !important;}
  body.light-mode .admin-card{background:var(--card) !important;border-color:var(--line) !important;box-shadow:var(--card-shadow) !important;}
  body.light-mode .admin-card-title{color:var(--heading) !important;}
  body.light-mode .admin-card-subtitle{color:var(--muted) !important;}
  body.light-mode .admin-toolbar{background:var(--card) !important;border-color:var(--line) !important;}
  body.light-mode .admin-list-stat{background:var(--surface) !important;border-color:var(--line) !important;color:var(--muted) !important;}
  body.light-mode .premium-badge{background:var(--surface);border-color:var(--line);color:var(--text);}
  body.light-mode .premium-empty{background:var(--surface) !important;border-color:var(--line) !important;color:var(--muted) !important;}
  body.light-mode .profile-section{background:var(--surface);border-color:var(--line);}
  body.light-mode .brandlogo-fallback{color:#fff;}
  body.light-mode .muted{color:var(--muted);}
  body.light-mode #tenantLabel{color:#0f172a;}
  body.light-mode #topRoleText{color:#475569;}
  body.light-mode .modal-dialog{background:#ffffff;color:#1e293b;}
  body.light-mode #myPreferencesModal > div,
  body.light-mode #importProductsModal > div,
  body.light-mode #productGalleryModal > div,
  body.light-mode #reportsCenterModal > div,
  body.light-mode #warehousesAdminModal > div,
  body.light-mode #tenantSettingsModal > div{background:#ffffff;color:#1e293b;}
  body.light-mode .presale-sub-tabs{background:#f8fafc;border-color:#e2e8f0;}
  body.light-mode .presale-sub-tabs button{color:#334155;background:transparent;border-bottom:2px solid transparent;}
  body.light-mode .presale-sub-tabs button:hover{background:transparent;color:#1e293b;}
  body.light-mode .presale-sub-tabs button.active{background:transparent;color:var(--blue);border-bottom:2px solid var(--blue);}
  body.light-mode .presale-card{background:#ffffff;border-color:#e2e8f0;color:#1e293b !important;}
  body.light-mode .presale-card strong{color:#0f172a !important;}
  body.light-mode .presale-card div{color:#1e293b;}
  body.light-mode .presale-card td{color:#1e293b !important;}
  body.light-mode .presale-card th{color:#0f172a !important;background:#f1f5f9 !important;}
  body.light-mode .modal-dialog{background:#ffffff;color:#1e293b;}
  body.light-mode .modal-dialog h3{color:#0f172a !important;}
  body.light-mode #newCustSaleOverlay h3{color:#0f172a !important;}
  body.light-mode #newCustSaleOverlay div{color:#1e293b;}
  body.light-mode #newCustSaleOverlay p{color:#475569;}
  body.light-mode #preSalePaymentModal h3{color:var(--heading) !important;}
  body.light-mode #preSalePaymentModal div{color:var(--text);}
  body.light-mode #preSalePaymentModal td{color:var(--text) !important;}
  body.light-mode #_htip{background:var(--secondary);color:var(--surface);border-color:var(--tab-text);}
  body.light-mode .role-badge.admin{background:var(--info-bg);color:var(--info-text);}
  body.light-mode .role-badge.supervisor{background:var(--warning-bg);color:var(--warning-text);}
  body.light-mode .role-badge.cajero{background:var(--success-bg);color:var(--success-text);}
  body.light-mode .service-banner{color:var(--purple);background:linear-gradient(135deg, color-mix(in srgb, var(--purple) 10%, transparent), color-mix(in srgb, var(--blue) 8%, transparent));border-color:color-mix(in srgb, var(--purple) 30%, transparent);}
  body.light-mode .service-badge-lg{background:var(--purple);color:#fff;}
  body.light-mode .product-badge-lg{background:var(--success-text,#0d9488);color:#fff;}

  /* --- Presale timer: ensure dark text in light mode --- */
  body.light-mode .presale-timer{color:var(--presale-timer-text);background:var(--presale-timer-bg);border-color:var(--presale-timer-border);}
  body.light-mode .presale-timer.urgent{color:var(--presale-timer-urgent-text);background:var(--presale-timer-urgent-bg);border-color:var(--presale-timer-urgent-border);}

  /* --- Presale status badges: keep readable in light mode --- */
  body.light-mode .presale-status-badge.open{background:var(--presale-open-bg);color:var(--presale-open-text);border:1px solid var(--presale-open-border);}
  body.light-mode .presale-status-badge.pending{background:var(--presale-pending-bg);color:var(--presale-pending-text);border:1px solid var(--presale-pending-border);}
  body.light-mode .presale-status-badge.in-progress{background:var(--presale-pending-bg);color:var(--presale-pending-text);border:1px solid var(--presale-pending-border);}
  body.light-mode .presale-status-badge.completed{background:var(--presale-completed-bg);color:var(--presale-completed-text);border:1px solid var(--presale-completed-border);}
  body.light-mode .presale-status-badge.cancelled{background:var(--presale-cancelled-bg);color:var(--presale-cancelled-text);border:1px solid var(--presale-cancelled-border);}
  body.light-mode .presale-status-badge.expired{background:var(--presale-expired-bg);color:var(--presale-expired-text);border:1px solid var(--presale-expired-border);}

  /* --- Reservation indicator: dark text in light mode --- */
  body.light-mode .reservation-indicator{color:var(--reservation-danger);background:color-mix(in srgb, var(--reservation-danger) 10%, transparent);}
  body.light-mode .reservation-indicator::before{background:var(--reservation-danger);}
  body.light-mode .reservation-indicator.reservation-ok{color:var(--reservation-ok);background:color-mix(in srgb, var(--reservation-ok) 10%, transparent);}
  body.light-mode .reservation-indicator.reservation-ok::before{background:var(--reservation-ok);}

  /* --- Role badge super-admin: keep readable in light mode --- */
  body.light-mode .role-badge.super-admin{background:linear-gradient(135deg, var(--super-admin-from), var(--super-admin-to));color:#fff;box-shadow:0 2px 8px color-mix(in srgb, var(--super-admin-from) 35%, transparent);}

  /* --- Help-tip: visible in light mode --- */
  body.light-mode .help-tip{background:var(--blue,#1D4ED8);color:#fff;}
  body.light-mode .help-tip:hover::before{display:none;}

  /* --- Catalog pagination active button --- */
  body.light-mode .cat-pagination button.active{color:#fff;}

  /* --- Select arrow SVG: ensure dark arrow in light mode --- */
  body.light-mode select{-webkit-appearance:none !important;appearance:none !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 12px center !important;padding-right:32px !important;background-color:#ffffff !important;}

  /* --- Code blocks inside email module: readable in light mode --- */
  body.light-mode .em-collapsible-body code{background:#eef2ff;color:#4338ca;border-color:#c7d2fe;}

  /* --- Section title (generic) --- */
  body.light-mode .section-title{color:#0f172a;}
  body.light-mode .section-copy{color:#475569;}

  /* --- Stock field labels --- */
  body.light-mode .stock-field label{color:#334155;}

  /* --- License warning banner --- */
  body.light-mode .license-warning-banner{background:#fffbeb;color:#92400e;border-color:#fde68a;}

  /* --- Tab group title --- */
  body.light-mode .tab-group-title{color:#475569;}

  /* --- Paragraph text --- */
  body.light-mode p{color:#1e293b;}

  /* --- Date inputs: ensure readability in light mode --- */
  body.light-mode input[type="date"],
  body.light-mode input[type="time"],
  body.light-mode input[type="datetime-local"]{
    background:#ffffff;
    color:#1e293b;
    border-color:#cbd5e1 !important;
  }
  body.light-mode input[type="date"]::-webkit-calendar-picker-indicator{
    filter:none;
  }

  /* --- 2026-05-12 fix sistémico .config-* en light mode --- */
  /* Estas clases están definidas en admin-premium.css con overlays para dark
     mode (`rgba(255,255,255,.025)`). En light mode necesitan background plano
     y borders visibles vía var(--card) + var(--line). */
  body.light-mode .config-card{
    background:var(--card) !important;
    border-color:var(--line) !important;
    box-shadow:var(--shadow-soft) !important;
  }
  body.light-mode .config-card-head{
    border-bottom-color:var(--line) !important;
  }
  body.light-mode .config-card-head b{
    color:var(--heading) !important;
  }
  body.light-mode .config-card-body{
    color:var(--text);
  }
  body.light-mode .config-field label{
    color:var(--muted) !important;
  }
  body.light-mode .config-check{
    color:var(--text) !important;
  }
  body.light-mode .config-help{
    color:var(--muted) !important;
  }
  body.light-mode .sub-tab-bar,
  body.light-mode .config-tabs{
    border-bottom-color:var(--line) !important;
  }

  /* --- Dark mode: undo all light overrides --- */
  /* Applies via OS preference OR JS-driven body.dark-mode class */
  @media (prefers-color-scheme: dark){
    h1,.brandcopy h1,#brandName{color:var(--heading) !important;}
    .brandsubtitle,#brandSubtitle{color:var(--muted) !important;}
    .brandeyebrow,#brandEyebrow{color:var(--muted) !important;}
    .kpi-card{background:var(--card);border-color:var(--line);box-shadow:none;}
    .kpi-value{color:var(--heading) !important;}
    .kpi-label{color:var(--muted) !important;}
    .admin-kpi{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)) !important;border-color:var(--line) !important;box-shadow:none;}
    .admin-kpi-value{color:var(--text) !important;}
    .admin-kpi-label{color:var(--muted) !important;}
    .admin-card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01)),var(--card) !important;border-color:var(--line) !important;box-shadow:var(--shadow-soft) !important;}
    .admin-card-head{border-bottom:1px solid rgba(255,255,255,.05) !important;}
    .admin-card-title{color:var(--text) !important;}
    .admin-card-subtitle{color:var(--muted) !important;}
    th{background:var(--table-head-bg) !important;color:var(--heading) !important;}
    td{color:var(--text);border-bottom-color:rgba(255,255,255,.05) !important;}
    table{border-color:var(--line) !important;}
    table tbody tr:nth-child(even){background:rgba(255,255,255,.02) !important;}
    table tbody tr:hover{background:rgba(29,78,216,.08) !important;}
    .premium-table{background:rgba(255,255,255,.01) !important;border-color:var(--line) !important;}
    .premium-table thead th{background:var(--table-head-bg) !important;color:var(--text) !important;backdrop-filter:blur(8px);}
    .premium-table tbody td{color:var(--text) !important;border-top-color:rgba(255,255,255,.05) !important;}
    input,select,textarea{border-color:var(--line) !important;border-style:solid !important;outline:none;background:var(--input-bg);color:var(--input-text);}
    input:focus,select:focus,textarea:focus{border-color:var(--blue) !important;border-style:solid !important;outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.15) !important;}
    .tabs button{background:var(--tab-bg);color:var(--tab-text);border-color:var(--tab-border);box-shadow:0 1px 2px rgba(0,0,0,.05);}
    .tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue);}
    .sub-tab-bar button{color:var(--text) !important;background:transparent !important;border-top:none !important;border-left:none !important;border-right:none !important;border-bottom:2px solid transparent !important;}
    .sub-tab-bar button.active{background:transparent !important;color:var(--blue) !important;border-bottom:2px solid var(--blue) !important;}
    button{border-color:var(--button-secondary-border);background:var(--button-secondary-bg);color:var(--button-secondary-text);box-shadow:none;}
    button.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
    button.danger{background:var(--button-danger-bg);color:var(--button-danger-text);border-color:var(--button-danger-border);}
    .panel{background:var(--surface);border-color:var(--line);}
    .soft-block{background:var(--surface);border-color:var(--line);}
    .data-list-item{background:var(--card);border-color:var(--line);box-shadow:none;}
    .config-section{background:var(--card);border-color:var(--line);box-shadow:none;}
    .empty-state{background:var(--surface);border-color:var(--line);color:var(--muted);}
    .premium-empty{background:rgba(255,255,255,.015) !important;border-color:var(--line) !important;color:var(--muted) !important;}
    .premium-badge{background:var(--surface);border-color:var(--line);color:var(--text);}
    .admin-toolbar{background:var(--card) !important;border-color:var(--line) !important;box-shadow:var(--shadow-soft) !important;}
    .admin-list-stat{background:var(--surface) !important;border-color:var(--line) !important;color:var(--muted) !important;}
    .pill{background:rgba(148,163,184,.18);border-color:rgba(148,163,184,.18);color:var(--text);}
    .msg{background:var(--card);border-color:var(--line);color:var(--text);}
    .card{border-color:var(--line);box-shadow:var(--shadow-soft);}
    .brandlogo-shell{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:var(--line);}
    .presale-card{background:var(--card);border-color:var(--line);box-shadow:none;}
    .admin-field label{color:var(--muted) !important;}
    .admin-field input,.admin-field select,.admin-field textarea{background:var(--input-bg) !important;color:var(--input-text) !important;border-color:var(--line) !important;border-style:solid !important;outline:none;}
    .product-type-filter button{background:var(--tab-bg);color:var(--tab-text);}
    .product-type-filter button.active{background:var(--blue);color:#fff;}
    .report-field label{color:var(--muted);font-weight:400;}
    .kbd{background:var(--surface);border-color:var(--line);color:var(--muted);}

    /* btn-hero */
    .btn-hero{background:var(--card);color:var(--text);border-color:var(--line);}

    /* Presale cards */
    .presale-card.status-pending{border-left-color:var(--presale-card-pending);}
    .presale-card.status-in-progress{border-left-color:var(--presale-card-inprogress);}
    .presale-card.status-completed{border-left-color:var(--presale-card-completed);}
    .presale-card.status-cancelled{border-left-color:var(--presale-card-cancelled);}
    .presale-card.status-expired{border-left-color:var(--presale-card-expired);}

    /* Presale timer */
    .presale-timer{color:var(--presale-timer-text);background:var(--presale-timer-bg);border-color:var(--presale-timer-border);}
    .presale-timer.urgent{color:var(--presale-timer-urgent-text);background:var(--presale-timer-urgent-bg);border-color:var(--presale-timer-urgent-border);}

    /* Presale status badges — dark mode overrides */
    .presale-status-badge.open{background:var(--presale-open-bg);color:#fbbf24;}
    .presale-status-badge.pending{background:var(--presale-pending-bg);color:#fbbf24;}
    .presale-status-badge.in-progress{background:color-mix(in srgb, var(--presale-card-inprogress) 15%, transparent);color:#93c5fd;}
    .presale-status-badge.completed{background:var(--presale-completed-bg);color:#86efac;}
    .presale-status-badge.cancelled{background:var(--presale-cancelled-bg);color:#fca5a5;}
    .presale-status-badge.expired{background:var(--presale-expired-bg);color:#d1d5db;}

    /* Presale status card */
    .presale-status-card.status-open{border-left-color:var(--presale-card-pending);}

    /* Presale sub-tabs */
    .presale-sub-tabs{background:var(--surface);border-color:var(--line);}
    .presale-sub-tabs button{color:var(--text);background:transparent;border-bottom:2px solid transparent;}
    .presale-sub-tabs button.active{background:transparent;color:var(--blue);border-bottom:2px solid var(--blue);}

    /* Service badge */
    .service-badge-lg{background:rgba(124,58,237,.2);color:#c4b5fd;}
    .service-banner{background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(109,40,217,.3));color:#c4b5fd;}
    /* Product badge (dark mode — verde teal soft) */
    .product-badge-lg{background:rgba(13,148,136,.25);color:#5eead4;}

    /* Role badge super-admin */
    .role-badge.super-admin{box-shadow:0 2px 8px rgba(245,158,11,.2);}

    /* Help-tip tooltip */
    #_htip{background:#334155;border-color:#475569;}
    .help-tip:hover::before{display:none;}

    /* Date picker calendar icon */
    input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);}

    /* Reservation indicator */
    .reservation-indicator{color:#fca5a5;}
    .reservation-indicator::before{background:#ef4444;}

    /* Catalog pagination */
    .cat-pagination button.active{color:#fff;}

    /* SVG select arrow for dark mode */
    select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 12px center !important;padding-right:32px !important;}
  }

  /* --- JS-driven dark mode: same overrides for body.dark-mode --- */
  /* --- 2026-05-12 fix sistémico .config-* en dark mode (espejo light) --- */
  body.dark-mode .config-card{
    background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--card) !important;
    border-color:var(--line) !important;
    box-shadow:var(--shadow-soft) !important;
  }
  body.dark-mode .config-card-head{
    border-bottom:1px solid rgba(255,255,255,.06) !important;
  }
  body.dark-mode .config-card-head b{
    color:var(--heading) !important;
  }
  body.dark-mode .config-field label{
    color:var(--muted) !important;
  }
  body.dark-mode .config-check{
    color:var(--text) !important;
  }

  body.dark-mode h1,
  body.dark-mode .brandcopy h1,
  body.dark-mode #brandName{color:var(--heading) !important;}
  body.dark-mode .brandsubtitle,
  body.dark-mode #brandSubtitle{color:var(--muted) !important;}
  body.dark-mode .brandeyebrow,
  body.dark-mode #brandEyebrow{color:var(--muted) !important;}
  body.dark-mode .kpi-card{background:var(--card);border-color:var(--line);box-shadow:none;}
  body.dark-mode .kpi-value{color:var(--heading) !important;}
  body.dark-mode .kpi-label{color:var(--muted) !important;}
  body.dark-mode .admin-kpi{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)) !important;border-color:var(--line) !important;box-shadow:none;}
  body.dark-mode .admin-kpi-value{color:var(--text) !important;}
  body.dark-mode .admin-kpi-label{color:var(--muted) !important;}
  body.dark-mode .admin-card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01)),var(--card) !important;border-color:var(--line) !important;box-shadow:var(--shadow-soft) !important;}
  body.dark-mode .admin-card-head{border-bottom:1px solid rgba(255,255,255,.05) !important;}
  body.dark-mode .admin-card-title{color:var(--text) !important;}
  body.dark-mode .admin-card-subtitle{color:var(--muted) !important;}
  body.dark-mode th{background:var(--table-head-bg) !important;color:var(--heading) !important;}
  body.dark-mode td{color:var(--text);border-bottom-color:rgba(255,255,255,.05) !important;}
  body.dark-mode table{border-color:var(--line) !important;}
  body.dark-mode table tbody tr:nth-child(even){background:rgba(255,255,255,.02) !important;}
  body.dark-mode table tbody tr:hover{background:rgba(29,78,216,.08) !important;}
  body.dark-mode .premium-table{background:rgba(255,255,255,.01) !important;border-color:var(--line) !important;}
  body.dark-mode .premium-table thead th{background:var(--table-head-bg) !important;color:var(--text) !important;backdrop-filter:blur(8px);}
  body.dark-mode .premium-table tbody td{color:var(--text) !important;border-top-color:rgba(255,255,255,.05) !important;}
  body.dark-mode input,body.dark-mode select,body.dark-mode textarea{border-color:var(--line) !important;border-style:solid !important;outline:none;background-color:var(--input-bg);color:var(--input-text);}
  body.dark-mode input:focus,body.dark-mode select:focus,body.dark-mode textarea:focus{border-color:var(--blue) !important;border-style:solid !important;outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.15) !important;}
  body.dark-mode .tabs button{background:var(--tab-bg);color:var(--tab-text);border-color:var(--tab-border);box-shadow:0 1px 2px rgba(0,0,0,.05);}
  body.dark-mode .tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue);}
  body.dark-mode .sub-tab-bar button{color:var(--text) !important;background:transparent !important;border-top:none !important;border-left:none !important;border-right:none !important;border-bottom:2px solid transparent !important;}
  body.dark-mode .sub-tab-bar button.active{background:transparent !important;color:var(--blue) !important;border-bottom:2px solid var(--blue) !important;}
  body.dark-mode button{border-color:var(--button-secondary-border);background:var(--button-secondary-bg);color:var(--button-secondary-text);box-shadow:none;}
  body.dark-mode button.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
  body.dark-mode button.danger{background:var(--button-danger-bg);color:var(--button-danger-text);border-color:var(--button-danger-border);}
  body.dark-mode .panel{background:var(--surface);border-color:var(--line);}
  body.dark-mode .soft-block{background:var(--surface);border-color:var(--line);}
  body.dark-mode .data-list-item{background:var(--card);border-color:var(--line);box-shadow:none;}
  body.dark-mode .config-section{background:var(--card);border-color:var(--line);box-shadow:none;}
  body.dark-mode .empty-state{background:var(--surface);border-color:var(--line);color:var(--muted);}
  body.dark-mode .premium-empty{background:rgba(255,255,255,.015) !important;border-color:var(--line) !important;color:var(--muted) !important;}
  body.dark-mode .premium-badge{background:var(--surface);border-color:var(--line);color:var(--text);}
  body.dark-mode .admin-toolbar{background:var(--card) !important;border-color:var(--line) !important;box-shadow:var(--shadow-soft) !important;}
  body.dark-mode .admin-list-stat{background:var(--surface) !important;border-color:var(--line) !important;color:var(--muted) !important;}
  body.dark-mode .pill{background:rgba(148,163,184,.18);border-color:rgba(148,163,184,.18);color:var(--text);}
  body.dark-mode .msg{background:var(--card);border-color:var(--line);color:var(--text);}
  body.dark-mode .card{border-color:var(--line);box-shadow:var(--shadow-soft);}
  body.dark-mode .brandlogo-shell{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:var(--line);}
  body.dark-mode .presale-card{background:var(--card);border-color:var(--line);box-shadow:none;}
  body.dark-mode .admin-field label{color:var(--muted) !important;}
  body.dark-mode .admin-field input,body.dark-mode .admin-field select,body.dark-mode .admin-field textarea{background-color:var(--input-bg) !important;color:var(--input-text) !important;border-color:var(--line) !important;border-style:solid !important;outline:none;}
  body.dark-mode .product-type-filter button{background:var(--tab-bg);color:var(--tab-text);}
  body.dark-mode .product-type-filter button.active{background:var(--blue);color:#fff;}
  body.dark-mode .report-field label{color:var(--muted);font-weight:400;}
  body.dark-mode .kbd{background:var(--surface);border-color:var(--line);color:var(--muted);}

  /* btn-hero */
  body.dark-mode .btn-hero{background:var(--card);color:var(--text);border-color:var(--line);}

  /* Presale cards */
  body.dark-mode .presale-card.status-pending{border-left-color:var(--presale-card-pending);}
  body.dark-mode .presale-card.status-in-progress{border-left-color:var(--presale-card-inprogress);}
  body.dark-mode .presale-card.status-completed{border-left-color:var(--presale-card-completed);}
  body.dark-mode .presale-card.status-cancelled{border-left-color:var(--presale-card-cancelled);}
  body.dark-mode .presale-card.status-expired{border-left-color:var(--presale-card-expired);}

  /* Presale timer */
  body.dark-mode .presale-timer{color:var(--presale-timer-text);background:var(--presale-timer-bg);border-color:var(--presale-timer-border);}
  body.dark-mode .presale-timer.urgent{color:var(--presale-timer-urgent-text);background:var(--presale-timer-urgent-bg);border-color:var(--presale-timer-urgent-border);}

  /* Presale status badges */
  body.dark-mode .presale-status-badge.open{background:var(--presale-open-bg);color:#fbbf24;}
  body.dark-mode .presale-status-badge.pending{background:var(--presale-open-bg);color:#fbbf24;}
  body.dark-mode .presale-status-badge.in-progress{background:color-mix(in srgb, var(--presale-card-inprogress) 15%, transparent);color:#93c5fd;}
  body.dark-mode .presale-status-badge.completed{background:var(--presale-completed-bg);color:#86efac;}
  body.dark-mode .presale-status-badge.cancelled{background:var(--presale-cancelled-bg);color:#fca5a5;}
  body.dark-mode .presale-status-badge.expired{background:var(--presale-expired-bg);color:#d1d5db;}

  /* Presale status card */
  body.dark-mode .presale-status-card.status-open{border-left-color:var(--presale-card-pending);}

  /* Service badge */
  body.dark-mode .service-badge-lg{background:rgba(124,58,237,.2);color:#c4b5fd;}
  body.dark-mode .service-banner{background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(109,40,217,.3));color:#c4b5fd;}

  /* Role badge super-admin */
  body.dark-mode .role-badge.super-admin{box-shadow:0 2px 8px rgba(245,158,11,.2);}

  /* Help-tip tooltip — real DOM element #_htip */
  body.dark-mode #_htip{background:#334155;color:#e2e8f0;border-color:#475569;}

  /* Date picker calendar icon */
  body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);}

  /* Reservation indicator */
  body.dark-mode .reservation-indicator{color:#fca5a5;}
  body.dark-mode .reservation-indicator::before{background:#ef4444;}

  /* Catalog pagination */
  body.dark-mode .cat-pagination button.active{color:#fff;}

  /* SVG select arrow for dark mode */
  body.dark-mode select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 12px center !important;padding-right:32px !important;}

  /* Safety net: force custom arrow and solid border on ALL selects regardless of specificity */
  select{
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    border-style:solid !important;
    outline:none !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 12px center !important;
    padding-right:32px !important;
  }
  select:focus{
    border-style:solid !important;
    outline:none !important;
  }

  /* ══════════════════════════════════════════════════════════ */
  /* ── Mobile & Tablet Enhancements (2026-03-18) ──────────── */
  /* ══════════════════════════════════════════════════════════ */

  /* Sticky table headers for horizontal scroll */
  .tbl thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:var(--table-head-bg, var(--surface));
  }

  /* Better table sizing on very small phones */
  @media(max-width:480px){
    .tbl{ min-width:480px; }
    .admin-card-body{ padding:10px !important; }
    .stock-hero{ padding:16px !important; flex-direction:column !important; gap:10px !important; }
    .stock-hero h2{ font-size:1.2em !important; }
  }

  /* Landscape mode optimization */
  @media(orientation:landscape) and (max-height:500px){
    .brandbar{ padding:6px 12px !important; }
    .brandcopy h1{ font-size:1.1em !important; }
    .card{ padding:14px !important; margin:10px 0 !important; }
    .modal-overlay{ padding:8px !important; }
    .tabs button{ padding:6px 12px !important; font-size:11px !important; }
  }

  /* Modal safe-area for notch (horizontal) */
  @supports(padding:env(safe-area-inset-left)){
    .modal-overlay > div,
    [id$="Modal"] > div{
      padding-left:max(24px, env(safe-area-inset-left)) !important;
      padding-right:max(24px, env(safe-area-inset-right)) !important;
    }
  }

  /* Reduced motion for accessibility */
  @media(prefers-reduced-motion:reduce){
    *{ animation:none !important; transition-duration:0.01ms !important; }
  }

  /* Checkbox and toggle touch targets */
  @media(max-width:768px){
    input[type="checkbox"]{ min-width:20px; min-height:20px; }
    .em-toggle, .ema-toggle{ min-height:28px; }
    label{ cursor:pointer; }
  }

  /* Credit note modal responsive */
  @media(max-width:640px){
    #cnModal > div{ padding:16px !important; max-width:100% !important; border-radius:12px !important; }
    #cnModal .stock-field label{ font-size:.85em !important; }
  }

  /* Notification dropdown mobile */
  @media(max-width:480px){
    #notifDropdown{ width:calc(100vw - 16px) !important; right:8px !important; left:8px !important; }
  }

  /* ══════════════════════════════════════════════════════════ */
  /* ── Comprehensive Mobile/Responsive Audit (2026-03-20) ── */
  /* ══════════════════════════════════════════════════════════ */

  /* --- 1. premium-table must always scroll horizontally --- */
  .premium-table{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
  .premium-table table{
    min-width:540px;
  }

  /* --- 2. Accounting tables (direct <table class="premium-table">) overflow wrapper --- */
  table.premium-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
    min-width:0;
  }

  /* --- 3. Button touch targets (Apple HIG: 44px) --- */
  @media(max-width:768px){
    button{
      min-height:44px;
      min-width:44px;
    }
    button.small{
      min-height:36px;
      min-width:36px;
    }
    /* Action buttons inside tables can be smaller */
    td button,
    td button.small{
      min-height:34px;
      min-width:34px;
    }
  }

  /* --- 4. Inline grid collapse on mobile (covers all JS-generated inline grids) --- */
  @media(max-width:640px){
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"]{
      grid-template-columns:1fr 1fr !important;
    }
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"]{
      grid-template-columns:1fr !important;
    }
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"]{
      grid-template-columns:1fr !important;
    }
    /* Accounting entry row grid - stack on mobile */
    [style*="grid-template-columns:1fr 100px 100px 30px"]{
      grid-template-columns:1fr 1fr !important;
      gap:6px !important;
    }
    /* admin-field-grid for customer/user/product forms */
    .admin-field-grid,
    .admin-field-grid-1,
    .admin-field-grid-2{
      grid-template-columns:1fr !important;
    }
    /* admin-kpis in config-modules */
    .admin-kpis{
      grid-template-columns:1fr !important;
    }
  }

  /* ═══════════════════════════════════════════════════════════════
     v3.7.10 SPRINT 2 (2026-05-01) — Sistema tenant responsive baseline
     Cierra 4 gaps detectados por expert-team:
       C4 sales item rows (BLOCKING — iOS zoom + sub-tap en cobro)
       C5 franja 641-900 grid 3/4-col (DEGRADED tablet portrait apretado)
       C6 bare tables sin wrap (DEGRADED — overflow horizontal)
       C7 input font-size universal mobile (BLOCKING — iOS zoom 35 módulos)
     ═══════════════════════════════════════════════════════════════ */

  /* --- C4: Sales item rows (qty/precio/descuento + delete X) ---
     Bug original: inputs height:38px + font-size:.92em → iOS zoom on focus
     + tap target sub-44 → cajero borra item por mis-tap entre X y qty. */
  @media (max-width: 768px){
    #saleItemsBody input,
    #saleItemsBody select,
    #saleItemsBody button,
    .sale-item-row input,
    .sale-item-row select,
    .sale-item-row button,
    /* También cubrir inputs principales del flujo Sales (búsqueda producto/cliente) */
    #saleProductSearch,
    #saleCustomerSearch,
    .salePayDetail input,
    .spd-amount{
      font-size: 16px !important;
      min-height: 44px !important;
    }
  }

  /* --- C5: Franja 641-900 grid 3/4-col → 2-col ---
     Tablet portrait (iPad Mini 768, iPad Air 820) tenía grids inline 3/4-col
     apretados (cells 200-260px). Admin C1 ya tenía esto; tenant ahora también. */
  @media (min-width:641px) and (max-width:900px){
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"]{
      grid-template-columns:1fr 1fr !important;
    }
    .admin-field-grid,
    .admin-field-grid-2{
      grid-template-columns:1fr 1fr !important;
    }
    .admin-kpis{
      grid-template-columns:1fr 1fr !important;
    }
  }

  /* --- C6: Override bare tables sin wrap en mobile ---
     7 lugares (cash.js:112, config.js:943,1914, config-modules.js:197,1009,
     batches.js:627) emiten <table> directo dentro de modal/panel sin
     <div class="table-wrap">. En ≤768px forzamos display:block + scroll
     horizontal nativo. EXCLUIMOS appt-cal-table (calendario citas) y
     rv-matrix (matriz reservas) que tienen layouts especiales. */
  @media (max-width: 768px){
    #panel > table,
    .modal-overlay > div table:not(.appt-cal-table):not(.rv-matrix):not(.premium-table):not(.tbl):not(.dsp-table),
    [id$="Modal"] > div table:not(.appt-cal-table):not(.rv-matrix):not(.premium-table):not(.tbl):not(.dsp-table),
    [id$="Overlay"] > div table:not(.appt-cal-table):not(.rv-matrix):not(.premium-table):not(.tbl):not(.dsp-table){
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
    }
  }

  /* --- C7: Override universal #panel input/select/textarea font 16px ---
     ⭐ Fix #1 más impactante: anula los 35 módulos JS con `font-size:.88em/
     .92em/.95em` inline en inputs sin tener que tocar 35 archivos.
     iOS Safari hace zoom on focus si font-size < 16px → bug responsive #1
     del tenant. CLAUDE.md §15 exige 16px en mobile inputs. */
  @media (max-width: 768px){
    #panel input[type="text"],
    #panel input[type="number"],
    #panel input[type="email"],
    #panel input[type="tel"],
    #panel input[type="search"],
    #panel input[type="password"],
    #panel input[type="date"],
    #panel input[type="datetime-local"],
    #panel input[type="time"],
    #panel input[type="url"],
    #panel input:not([type]),
    #panel select,
    #panel textarea,
    .modal-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .modal-overlay select,
    .modal-overlay textarea,
    [id$="Modal"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    [id$="Modal"] select,
    [id$="Modal"] textarea,
    [id$="Overlay"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    [id$="Overlay"] select,
    [id$="Overlay"] textarea{
      font-size: 16px !important;
    }
  }

  /* --- 4b. Chart canvas height constraint on mobile --- */
  @media(max-width:640px){
    #dashSalesChart{ max-height:220px !important; }
    #dashPaymentChart{ max-height:220px !important; }
    canvas{ max-height:280px; }
  }

  /* --- 5. Modal mobile fullscreen for JS-created overlays --- */
  @media(max-width:640px){
    /* Named modal overlays and generic .modal-overlay children */
    .modal-overlay > div,
    #deliveryNoteModal > div,
    #supplierModal > div,
    #expenseModal > div,
    #closeCashOverlay > div,
    #openCashOverlay > div,
    #cashMovOverlay > div,
    #cnModal > div,
    #newCustSaleOverlay > div,
    [id$="Modal"] > div,
    [id$="Overlay"] > div{
      max-width:calc(100vw - 16px) !important;
      max-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px) !important;
      width:calc(100vw - 16px) !important;
      border-radius:14px !important;
      padding:16px !important;
      overflow-y:auto !important;
      overflow-x:hidden !important;
      box-sizing:border-box !important;
    }
    .modal-overlay,
    [id$="Modal"][style*="position:fixed"],
    [id$="Overlay"][style*="position:fixed"]{
      padding:8px !important;
    }
    /* Modal inner grids also collapse */
    .modal-overlay [style*="grid-template-columns"],
    [id$="Modal"] [style*="grid-template-columns"],
    [id$="Overlay"] [style*="grid-template-columns"]{
      grid-template-columns:1fr !important;
    }
    /* Modal tables scroll */
    .modal-overlay .premium-table,
    .modal-overlay .table-wrap,
    .modal-overlay [style*="overflow-x:auto"],
    [id$="Modal"] .premium-table,
    [id$="Modal"] .table-wrap,
    [id$="Overlay"] .premium-table,
    [id$="Overlay"] .table-wrap{
      overflow-x:auto !important;
      -webkit-overflow-scrolling:touch !important;
      max-width:100% !important;
    }
  }

  /* --- 5b. Modal custom width tablet (641-1024px) ---
     Modales con max-width:600px inline (ej. _recShowRunTemplateModal selector
     de plantillas Checklist + Premium 360°) quedan centrados con mucho aire en
     tablet portrait (768/820px). Damos ancho útil min(720, vw-32) para
     aprovechar el viewport sin alcanzar full-bleed.
     LEY §15: tap targets ≥44px ya cumplidos por las cards. */
  @media (min-width:641px) and (max-width:1024px){
    .rec-modal-fullscreen-mobile,
    .modal-overlay > .rec-modal-fullscreen-mobile{
      max-width:min(720px, calc(100vw - 32px)) !important;
      width:auto !important;
      max-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px) !important;
    }
  }

  /* --- 5c. Premium grid responsive en sub-tab Recepción → Checklists ---
     Cards Premium 360° (default + clones) en grid auto-fill: 1col phone,
     2col tablet portrait, 3col+ tablet landscape/desktop. */
  [data-rec-tpl-grid]{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:14px;
  }
  @media (max-width:640px){
    [data-rec-tpl-grid]{ grid-template-columns:1fr !important; }
  }
  /* Ellipsis para nombres largos en cards Premium (pt-BR puede +20% length) */
  [data-rec-tpl-name]{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100%;
  }

  /* --- 6. data-list-item stacking on small screens --- */
  @media(max-width:640px){
    .data-list-item{
      flex-direction:column;
      align-items:flex-start !important;
      gap:10px;
      padding:16px !important;
    }
    .data-list-item button{
      width:100%;
    }
  }

  /* --- 7. Config section inputs full-width on mobile --- */
  @media(max-width:640px){
    .config-section input,
    .config-section select,
    .config-section textarea{
      width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
    }
    .config-section .row{
      flex-direction:column !important;
      align-items:stretch !important;
    }
  }

  /* --- 8. Presale queue grid collapse on mobile --- */
  @media(max-width:640px){
    .presale-queue-grid{
      grid-template-columns:1fr !important;
    }
    .presale-card{
      padding:16px 18px !important;
    }
  }

  /* --- 9. Product type filter wrap on mobile --- */
  @media(max-width:430px){
    .product-type-filter{
      flex-wrap:wrap;
      width:100%;
    }
    .product-type-filter button{
      flex:1 1 auto;
      text-align:center;
      padding:8px 10px !important;
      font-size:.78em !important;
    }
  }

  /* --- 10. Email notification module grids mobile --- */
  @media(max-width:640px){
    .em-form-grid{
      grid-template-columns:1fr !important;
    }
    .em-cards-grid{
      grid-template-columns:1fr !important;
    }
    .em-preset-cards{
      grid-template-columns:1fr !important;
    }
  }

  /* --- 11. Report chart containers responsive --- */
  /* Chart.js manages canvas sizing via JS; only constrain width, not height */
  canvas{
    max-width:100%;
  }

  /* --- 12. Ensure all inline overflow-x:auto divs work on touch --- */
  [style*="overflow-x:auto"]{
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }

  /* --- 13. Fix budget table inside modal (no overflow wrapper) --- */
  @media(max-width:768px){
    .admin-card-body .premium-table{
      overflow-x:auto !important;
      -webkit-overflow-scrolling:touch !important;
    }
    .admin-card-body .premium-table table{
      min-width:480px !important;
    }
  }

  /* --- 14. Sticky -webkit- prefix for older iOS Safari --- */
  .tbl thead th,
  table thead th{
    position:-webkit-sticky;
    position:sticky;
    top:0;
    z-index:2;
  }

  /* --- 15. Prevent iOS double-tap zoom on interactive elements --- */
  button,
  a,
  input,
  select,
  textarea,
  label{
    touch-action:manipulation;
  }

  /* --- 16. Delivery-PO and suppliers-expenses modal inner grid stacking --- */
  @media(max-width:640px){
    /* Stock movement form fields */
    .stock-field{
      width:100% !important;
      min-width:0 !important;
    }
    .stock-field input,
    .stock-field select,
    .stock-field textarea{
      width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 17. Fix help-tip tooltip overflow on mobile --- */
  @media(max-width:640px){
    #_htip{max-width:calc(100vw - 24px) !important;}
  }

  /* --- 18. KPI grid extra-small screens --- */
  @media(max-width:430px){
    .kpi-grid{
      grid-template-columns:1fr !important;
      gap:8px !important;
    }
    .kpi-card{
      padding:12px !important;
    }
    .kpi-value{
      font-size:1.3em !important;
    }
  }

  /* ══════════════════════════════════════════════════════════ */
  /* ── Dark/Light Parity & Mobile Audit Fixes (2026-03-21) ── */
  /* ══════════════════════════════════════════════════════════ */

  /* --- 1. Missing body.dark-mode rules that exist in body.light-mode --- */

  /* Headings */
  body.dark-mode h2,
  body.dark-mode h3,
  body.dark-mode h4{color:var(--heading) !important;}

  /* Paragraph text */
  body.dark-mode p{color:var(--text);}

  /* Strong / bold */
  body.dark-mode strong,
  body.dark-mode b{color:var(--heading);}

  /* Labels */
  body.dark-mode label{color:var(--muted);}

  /* Muted text */
  body.dark-mode .muted{color:var(--muted);}

  /* Tenant label */
  body.dark-mode #tenantLabel{color:var(--heading);}

  /* Top role text */
  body.dark-mode #topRoleText{color:var(--muted);}

  /* Modal dialog */
  body.dark-mode .modal-dialog{background:var(--card);color:var(--text);}
  body.dark-mode .modal-dialog h3{color:var(--heading) !important;}

  /* Named modal inner divs */
  body.dark-mode #myPreferencesModal > div,
  body.dark-mode #importProductsModal > div,
  body.dark-mode #productGalleryModal > div,
  body.dark-mode #reportsCenterModal > div,
  body.dark-mode #warehousesAdminModal > div,
  body.dark-mode #tenantSettingsModal > div{background:var(--card);color:var(--text);}

  /* Presale sub-tabs */
  body.dark-mode .presale-sub-tabs{background:var(--surface);border-color:var(--line);}
  body.dark-mode .presale-sub-tabs button{color:var(--text);background:transparent;border-bottom:2px solid transparent;}
  body.dark-mode .presale-sub-tabs button.active{background:transparent;color:var(--blue);border-bottom:2px solid var(--blue);}

  /* Presale card inner text */
  body.dark-mode .presale-card{color:var(--text) !important;}
  body.dark-mode .presale-card strong{color:var(--heading) !important;}
  body.dark-mode .presale-card div{color:var(--text);}
  body.dark-mode .presale-card td{color:var(--text) !important;}
  body.dark-mode .presale-card th{color:var(--heading) !important;background:var(--surface) !important;}

  /* New customer sale overlay */
  body.dark-mode #newCustSaleOverlay h3{color:var(--heading) !important;}
  body.dark-mode #newCustSaleOverlay div{color:var(--text);}
  body.dark-mode #newCustSaleOverlay p{color:var(--muted);}

  /* Pre-sale payment modal */
  body.dark-mode #preSalePaymentModal h3{color:var(--heading) !important;}
  body.dark-mode #preSalePaymentModal div{color:var(--text);}
  body.dark-mode #preSalePaymentModal td{color:var(--text) !important;}

  /* Help-tip: tooltip bg inverts for dark mode */
  body.dark-mode .help-tip{background:var(--blue,#1D4ED8);color:#fff;}
  body.dark-mode #_htip{background:#334155;color:#e2e8f0;border-color:#475569;}
  body.dark-mode .help-tip:hover::before{display:none;}

  /* Role badges */
  body.dark-mode .role-badge.admin{background:rgba(59,130,246,.2);color:#93c5fd;}
  body.dark-mode .role-badge.supervisor{background:rgba(234,179,8,.15);color:#fcd34d;}
  body.dark-mode .role-badge.cajero{background:rgba(34,197,94,.15);color:#86efac;}

  /* Service banner / badge */
  body.dark-mode .service-banner{color:#c4b5fd;background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(109,40,217,.3));border-color:rgba(124,58,237,.3);}
  body.dark-mode .service-badge-lg{background:rgba(124,58,237,.2);color:#c4b5fd;}

  /* Section title / copy */
  body.dark-mode .section-title{color:var(--heading);}
  body.dark-mode .section-copy{color:var(--muted);}

  /* Stock field labels */
  body.dark-mode .stock-field label{color:var(--muted);}

  /* License warning banner: dark-mode readable */
  body.dark-mode .license-warning-banner{background:rgba(234,179,8,.12);color:#fcd34d;border-color:rgba(234,179,8,.3);}

  /* Tab group title */
  body.dark-mode .tab-group-title{color:var(--muted);}

  /* Brand logo fallback */
  body.dark-mode .brandlogo-fallback{color:#fff;}

  /* Catalog pagination */
  body.dark-mode .cat-pagination button.active{color:#fff;}

  /* Date inputs: dark calendar icon */
  body.dark-mode input[type="date"],
  body.dark-mode input[type="time"],
  body.dark-mode input[type="datetime-local"]{
    background:var(--input-bg);
    color:var(--input-text);
    border-color:var(--line) !important;
  }
  body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator{
    filter:invert(1);
  }

  /* Email module collapsible code blocks */
  body.dark-mode .em-collapsible-body code{background:rgba(99,102,241,.15);color:#a5b4fc;border-color:rgba(99,102,241,.3);}

  /* msg.ok and msg.err in dark mode */
  body.dark-mode .msg.ok{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text);}
  body.dark-mode .msg.err{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text);}

  /* Profile section */
  body.dark-mode .profile-section{background:var(--surface);border-color:var(--line);}

  /* Report field labels */
  body.dark-mode .report-field label{color:var(--muted);font-weight:400;}

  /* Select: ensure background-color explicitly set in dark mode */
  body.dark-mode select{
    -webkit-appearance:none !important;
    appearance:none !important;
    background-color:var(--input-bg) !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 12px center !important;
    padding-right:32px !important;
    border-style:solid !important;
  }

  /* Select: ensure background-color explicitly set in light mode */
  body.light-mode select{
    background-color:var(--input-bg) !important;
    border-style:solid !important;
  }

  /* --- 2. Missing body.light-mode msg.ok/err (already exist but ensure specificity) --- */
  body.light-mode .msg.ok{background:var(--success-bg);border-color:var(--okline);color:var(--success-text);}
  body.light-mode .msg.err{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text);}

  /* --- 3. Ensure all new components styled for both themes --- */

  /* Bank reconciliation modal */
  body.light-mode .modal-box{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.15);}
  body.dark-mode .modal-box{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.4);}

  /* Receipt modals (credit payment receipt) */
  body.light-mode #creditReceiptContent{background:var(--card);color:var(--text);}
  body.dark-mode #creditReceiptContent{background:var(--card);color:var(--text);}

  /* Credit note modal */
  body.dark-mode #cnModal > div{background:var(--card);color:var(--text);}
  body.light-mode #cnModal > div{background:#ffffff;color:#1e293b;}

  /* --- 4. Mobile: ensure touch targets >= 42px for tab buttons in all contexts --- */
  @media(max-width:768px){
    .tabs button,
    .sub-tab-bar button,
    .presale-sub-tabs button{
      min-height:42px;
    }
    /* Ensure buttons in data-list-items are full-width touch targets */
    .data-list-item button{
      min-height:42px;
    }
  }

  /* --- 5. Mobile: supplier search input responsive --- */
  @media(max-width:640px){
    #supplierSearchInput{
      width:100% !important;
      max-width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 6. Mobile: PO modal inner table scroll wrapper --- */
  @media(max-width:768px){
    #poItemsTable{
      display:block;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
  }

  /* --- 7. Mobile: budget table inputs constrain width --- */
  @media(max-width:640px){
    .budget-item-input{
      width:100% !important;
      max-width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 8. Mobile: accounting modal-box inputs full-width --- */
  @media(max-width:640px){
    .modal-box input,
    .modal-box select,
    .modal-box textarea{
      width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 9. Mobile: sale form inline input widths constrained --- */
  @media(max-width:640px){
    .cn-item-qty,
    #cnSaleSearch,
    #cnSearchBy{
      width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
    }
    /* Sale item qty/price/discount inputs */
    #panel td input[type="number"],
    #panel td input[type="text"]{
      max-width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 10. Mobile: payment line inputs responsive --- */
  @media(max-width:640px){
    [id^="salePayMethod_"],
    [id^="salePayRef_"],
    [id^="salePayAmt_"]{
      width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 11. Mobile: purchase order modal pay-term input --- */
  @media(max-width:640px){
    #po_paymentTermDays{
      width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 12. Ensure table-row-alt variable used in dark mode --- */
  body.dark-mode table tbody tr:nth-child(even){background:rgba(255,255,255,.02) !important;}

  /* --- 13. Dark mode: warning-border variable (used by some badges) --- */
  body.dark-mode .license-warning-banner{
    background:rgba(234,179,8,.12);
    color:#fcd34d;
    border-color:rgba(234,179,8,.3);
  }

  /* --- 14. Mobile: delivery-po min-width stock-fields --- */
  @media(max-width:640px){
    .stock-field[style*="min-width:140px"],
    .stock-field[style*="min-width:130px"],
    .stock-field[style*="min-width:160px"]{
      min-width:0 !important;
      width:100% !important;
    }
  }

  /* --- 15. Mobile: presale queue search input --- */
  @media(max-width:640px){
    #psQueueSearch{
      width:100% !important;
      max-width:100% !important;
      box-sizing:border-box !important;
    }
  }

  /* --- 16. Products module: embedded style overrides for mobile already exist in products.js --- */
  /* --- Ensure inline tables within products get overflow wrappers via CSS --- */
  @media(max-width:768px){
    .premium-table{
      display:block;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      max-width:100%;
    }
  }

/* ═══════════════════════════════════════════════════════════════════════ */
/* 17. APPOINTMENTS / SCHEDULING MODULE                                  */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Calendar grid base */
#apptCalGrid table{border-collapse:collapse;width:100%;}
#apptCalGrid th,#apptCalGrid td{border:1px solid var(--line);vertical-align:top;}
#apptCalGrid th{padding:8px 6px;font-size:.82em;font-weight:700;text-align:center;background:var(--card);color:var(--heading);white-space:nowrap;}
#apptCalGrid td{padding:2px 4px;min-height:40px;}

/* Light mode calendar */
body.light-mode #apptCalGrid th{background:#f1f5f9;color:#0f172a;border-color:#e2e8f0;}
body.light-mode #apptCalGrid td{background:#ffffff;border-color:#e2e8f0;}

/* Dark mode calendar */
body.dark-mode #apptCalGrid th{background:var(--table-head-bg,#1e293b);color:var(--text);border-color:var(--line);}
body.dark-mode #apptCalGrid td{background:var(--card);border-color:var(--line);}

/* Appointment status badges */
.appt-badge{display:inline-block;padding:3px 10px;border-radius:8px;font-size:.82em;font-weight:600;white-space:nowrap;}
.appt-badge-pending{background:var(--warn-bg,#ffedd5);color:var(--warn-text,#9a3412);}
.appt-badge-confirmed{background:var(--info-bg,#dbeafe);color:var(--info-text,#1d4ed8);}
.appt-badge-in-progress{background:var(--success-bg,#d1fae5);color:var(--success-text,#065f46);}
.appt-badge-completed{background:var(--success-bg,#d1fae5);color:var(--success-text,#065f46);}
.appt-badge-cancelled{background:var(--danger-bg,#fee2e2);color:var(--danger-text,#991b1b);}
.appt-badge-no-show{background:var(--surface-2,#e5e7eb);color:var(--muted,#6b7280);}

/* Calendar mobile responsive */
@media(max-width:768px){
  #apptCalGrid{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:0 12px;}
  #apptCalGrid table{min-width:600px;}
  #apptCalGrid th{font-size:.72em;padding:6px 3px;}
  #apptCalGrid td{padding:1px 2px;}
}
@media(max-width:480px){
  #apptCalGrid table{min-width:400px;}
}

/* ── Purchase Orders (OC) mobile responsive ── */
@media(max-width:768px){
  /* PO create/edit modal: collapse 3-col grid to 1-col */
  #purchaseOrderModal > div > div[style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* PO modal max-width override */
  #purchaseOrderModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  /* PO detail modal */
  #poDetailModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  #poDetailModal div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* Receive goods modal */
  #receiveGoodsModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  /* Low stock suggestion modal */
  #poLowStockOverlay > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  #poLowStockOverlay div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* Select approved PO modal */
  #selectApprovedPOModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  /* Quick supplier/product modals */
  #quickSupplierModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  #quickProductModal > div{max-width:100% !important;padding:16px !important;border-radius:12px !important;}
  #quickProductModal div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* PO list hero buttons wrap */
  .stock-shell .admin-hero{padding:20px 16px !important;}
  /* PO list filter row */
  .stock-shell div[style*="display:flex;gap:12px"]{gap:8px !important;}
  .stock-shell div[style*="min-width:140px"]{min-width:100% !important;}
  .stock-shell div[style*="min-width:130px"]{min-width:calc(50% - 4px) !important;}
}
@media(max-width:480px){
  /* PO items table: ensure scrollable */
  #purchaseOrderModal table.tbl{min-width:600px;}
  #poDetailModal table.tbl{min-width:500px;}
  #receiveGoodsModal table.tbl{min-width:600px;}
  #poLowStockOverlay table.tbl{min-width:700px;}
  #selectApprovedPOModal table.tbl{min-width:550px;}
  /* Action buttons wrap on small screens */
  #poDetailModal div[style*="display:flex;gap:10px;justify-content:flex-end"]{
    flex-direction:column !important;
  }
  #poDetailModal div[style*="display:flex;gap:10px;justify-content:flex-end"] button{
    width:100% !important;
    text-align:center !important;
  }
}

/* ── Report sub-tabs ── */
.report-subtabs-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.report-subtab-btn{background:transparent;color:var(--text);border-top:none;border-left:none;border-right:none;border-bottom:2px solid transparent;border-radius:0;padding:10px 18px;font-weight:600;cursor:pointer;min-height:44px;font-size:.92em;transition:all .2s ease;}
.report-subtab-btn:hover{color:var(--blue);border-bottom-color:var(--blue);}
.report-subtab-btn.active{background:transparent;color:var(--blue);border-top:none;border-left:none;border-right:none;border-bottom:2px solid var(--blue);border-radius:0;font-weight:700;}
body.light-mode .report-subtab-btn{background:transparent;color:#334155;border-top:none;border-left:none;border-right:none;border-bottom:2px solid transparent;}
body.light-mode .report-subtab-btn:hover{color:var(--blue);border-bottom-color:var(--blue);}
body.light-mode .report-subtab-btn.active{background:transparent;color:var(--blue);border-top:none;border-left:none;border-right:none;border-bottom:2px solid var(--blue);}
body.dark-mode .report-subtab-btn{background:transparent;color:var(--text);border-top:none;border-left:none;border-right:none;border-bottom:2px solid transparent;}
body.dark-mode .report-subtab-btn.active{background:transparent;color:var(--blue);border-top:none;border-left:none;border-right:none;border-bottom:2px solid var(--blue);}

/* ===== SUPPORT WIDGET ===== */
#supportWidgetBtn {
  position:fixed; bottom:24px; right:24px; z-index:8900;
  width:56px; height:56px; border-radius:50%;
  background:var(--blue,#2563eb); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.3);
  transition:transform .2s, box-shadow .2s;
  user-select:none;
}
#supportWidgetBtn:hover { transform:scale(1.1); box-shadow:0 6px 24px rgba(0,0,0,.4); }

.support-badge {
  position:absolute; top:-2px; right:-2px;
  background:var(--danger-text,#dc2626); color:#fff;
  font-size:10px; font-weight:700; border-radius:50%;
  min-width:18px; height:18px; line-height:18px;
  text-align:center; padding:0 3px;
}

#supportPanel {
  position:fixed; bottom:90px; right:24px; z-index:8950;
  width:500px; height:min(680px, calc(100vh - 110px));
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 -8px 32px rgba(0,0,0,.25);
  display:none; flex-direction:column; overflow:hidden;
}

.support-header {
  padding:14px 16px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-shrink:0;
}

.support-close-btn {
  background:none; border:none; font-size:1.4em; cursor:pointer;
  color:var(--muted); padding:0 4px; line-height:1;
}
.support-close-btn:hover { color:var(--text); }

.support-back-btn {
  background:none; border:none; font-size:1.1em; cursor:pointer;
  color:var(--muted); padding:2px 6px; line-height:1;
}
.support-back-btn:hover { color:var(--text); }

.support-action-btn {
  background:none; border:none; cursor:pointer;
  color:var(--muted); padding:2px 6px; line-height:1;
}
.support-action-btn:hover { color:var(--text); }

.support-ticket-list {
  flex:1; overflow-y:auto; padding:0;
}

.support-ticket-item {
  padding:12px 16px; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .15s;
}
.support-ticket-item:hover { background:var(--surface,rgba(0,0,0,.03)); }

.support-status-badge {
  font-size:.72em; font-weight:600; padding:2px 8px;
  border-radius:10px; white-space:nowrap; flex-shrink:0;
}
.support-status-open { background:var(--blue-bg,rgba(37,99,235,.12)); color:var(--blue,#2563eb); }
.support-status-in-progress { background:var(--warning-bg,rgba(245,158,11,.12)); color:var(--status-pending,#d97706); }
.support-status-resolved { background:var(--green-bg,rgba(22,163,74,.12)); color:var(--status-active,#16a34a); }
.support-status-closed { background:var(--muted-bg,rgba(100,116,139,.12)); color:var(--muted,#64748b); }

.support-empty {
  text-align:center; padding:40px 24px;
}

.support-btn-primary {
  width:100%; padding:10px 16px; border:none;
  background:var(--blue,#2563eb); color:#fff;
  border-radius:10px; font-size:.92em; font-weight:600;
  cursor:pointer; transition:background .15s;
}
.support-btn-primary:hover { opacity:.9; }
.support-btn-primary:disabled { opacity:.5; cursor:not-allowed; }

.support-btn-secondary {
  padding:8px 16px; border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  border-radius:8px; font-size:.85em; cursor:pointer;
}

.support-form-body {
  flex:1; overflow-y:auto; padding:16px;
}

.support-field {
  margin-bottom:14px;
}
.support-field label {
  display:block; font-size:.85em; font-weight:600;
  color:var(--text); margin-bottom:5px;
}
.support-field input,
.support-field select,
.support-field textarea {
  width:100%; padding:10px 12px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--input-bg,var(--surface)); color:var(--input-text,var(--text));
  font-size:.92em; font-family:inherit;
}
.support-field textarea {
  resize:vertical; min-height:80px;
}

.support-messages {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:8px;
}

.support-msg-tenant {
  align-self:flex-end; background:var(--blue,#2563eb); color:#fff;
  padding:10px 14px; border-radius:14px 14px 4px 14px;
  max-width:80%; font-size:.9em; line-height:1.4;
  word-break:break-word;
}

.support-msg-admin {
  align-self:flex-start; background:var(--surface,#f1f5f9); color:var(--text);
  padding:10px 14px; border-radius:14px 14px 14px 4px;
  max-width:80%; font-size:.9em; line-height:1.4;
  word-break:break-word;
}

.support-msg-system {
  align-self:center; color:var(--muted); font-size:.82em;
  font-style:italic; padding:4px 12px;
}

.support-input-area {
  padding:10px 14px; border-top:1px solid var(--line);
  display:flex; gap:6px; align-items:flex-end;
  flex-shrink:0;
}

.support-input-area textarea {
  flex:1; resize:none; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--input-bg,var(--surface)); color:var(--input-text,var(--text));
  font-size:15px; line-height:1.4; max-height:100px;
  min-height:40px; font-family:inherit;
}

.support-icon-btn {
  width:38px; height:38px; border:none; border-radius:50%;
  background:var(--surface); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.05em; flex-shrink:0;
  transition:background .15s;
}
.support-icon-btn:hover { background:var(--line); }
.support-icon-btn.active { background:var(--green,#16a34a); color:#fff; }

.support-screen-share-btn {
  display:none;
}

/* Mobile responsive */
@media(max-width:640px){
  #supportPanel {
    width:100vw; right:0; bottom:0;
    border-radius:16px 16px 0 0;
    height:85vh;
  }
  #supportWidgetBtn {
    bottom:16px; right:16px;
    width:50px; height:50px;
  }
  .support-screen-share-btn { display:none !important; }
}

/* Desktop: show screen share button */
@media(min-width:641px){
  .support-screen-share-btn { display:flex; }
}

/* P7 v3.7.6 fix: padding-bottom para que el FAB chat (#supportWidgetBtn) NO
   tape la última fila/botón del contenido principal. Se aplica al panel
   principal del tenant en mobile + tablet (≤1024 — coincide con el F1 sidebar
   drawer threshold). En desktop el chat sigue posicionado fuera del flujo
   normal de contenido. */
@media(max-width:1024px){
  body.layout-sidebar #panel,
  body.layout-classic #panel {
    padding-bottom:90px;
  }
}

/* ══════════════════════════════════════════════════════════════
   RECEPTION MODULE — Vehicle Intake for Workshops
   ══════════════════════════════════════════════════════════════ */

/* Wizard progress bar */
.rec-wizard-progress {
  display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:24px; flex-wrap:nowrap; overflow-x:auto;
}
.rec-wizard-step {
  display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px;
  font-size:.85em; font-weight:600; white-space:nowrap;
  background:var(--surface,#1e293b); color:var(--muted,#64748b); border:1px solid var(--line,#334155);
  transition: all .2s ease;
}
.rec-wizard-step.active {
  background:var(--blue,#2563eb); color:#fff; border-color:var(--blue,#2563eb);
}
.rec-wizard-step.completed {
  background:var(--status-active,#16a34a); color:#fff; border-color:var(--status-active,#16a34a);
}
.rec-wizard-connector {
  width:24px; height:2px; background:var(--line,#334155); flex-shrink:0;
}
.rec-wizard-connector.completed { background:var(--status-active,#16a34a); }

/* Fuel gauge */
.rec-fuel-gauge { display:flex; gap:4px; align-items:center; }
.rec-fuel-btn {
  padding:8px 14px; border-radius:8px; cursor:pointer; font-weight:600; font-size:.9em;
  background:var(--surface,#1e293b); color:var(--muted,#64748b); border:1px solid var(--line,#334155);
  transition: all .15s ease;
}
.rec-fuel-btn:hover { border-color:var(--blue,#2563eb); color:var(--text,#e2e8f0); }
.rec-fuel-btn.selected { background:var(--blue,#2563eb); color:#fff; border-color:var(--blue,#2563eb); }

/* Checklist toggles */
.rec-checklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.rec-check-item {
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px;
  background:var(--surface,#1e293b); border:1px solid var(--line,#334155); cursor:pointer;
  transition: all .15s ease; font-size:.9em;
}
.rec-check-item:hover { border-color:var(--blue,#2563eb); }
.rec-check-item.checked { border-color:var(--status-active,#16a34a); background:rgba(22,163,74,.08); }
.rec-check-item .rec-check-icon { font-size:1.3em; }

/* Photo grid */
.rec-photo-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px;
}
.rec-photo-thumb {
  position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1;
  border:1px solid var(--line,#334155); cursor:pointer; background:var(--surface,#1e293b);
}
.rec-photo-thumb img { width:100%; height:100%; object-fit:cover; }
.rec-photo-thumb .rec-photo-phase {
  position:absolute; top:4px; left:4px; padding:2px 8px; border-radius:6px;
  font-size:.7em; font-weight:700; background:rgba(0,0,0,.6); color:#fff;
}
.rec-photo-thumb .rec-photo-del {
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:var(--red); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.8em; font-weight:700;
}

/* Photo lightbox overlay */
.rec-lightbox {
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center;
}
.rec-lightbox img { max-width:95vw; max-height:90vh; border-radius:8px; }
.rec-lightbox-close {
  position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; border:none; cursor:pointer;
  font-size:1.3em; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* Timeline */
.rec-timeline { position:relative; padding-left:28px; }
.rec-timeline::before {
  content:""; position:absolute; left:10px; top:0; bottom:0; width:2px;
  background:var(--line,#334155);
}
.rec-timeline-item {
  position:relative; margin-bottom:20px; padding:14px 18px;
  background:var(--card,#0f172a); border:1px solid var(--line,#334155); border-radius:12px;
}
.rec-timeline-item::before {
  content:""; position:absolute; left:-22px; top:18px; width:10px; height:10px;
  border-radius:50%; background:var(--blue,#2563eb); border:2px solid var(--card,#0f172a);
}
.rec-timeline-item.delivered::before { background:var(--status-active,#16a34a); }
.rec-timeline-item.cancelled::before { background:var(--danger,#dc2626); }

/* Sub-tab buttons (underline pattern) */
.rec-subtabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.rec-subtab {
  padding:8px 16px; border-radius:0; cursor:pointer; font-weight:600; font-size:.88em;
  background:transparent; color:var(--text,#e2e8f0); border:none; border-bottom:2px solid transparent;
  transition: all .15s ease;
}
.rec-subtab:hover { color:var(--blue,#2563eb); }
.rec-subtab.active { background:transparent; color:var(--blue,#2563eb); border-bottom:2px solid var(--blue,#2563eb); font-weight:700; }

/* Status badges */
.rec-status-badge {
  display:inline-block; padding:2px 10px; border-radius:10px; font-size:.78em; font-weight:600;
}

/* Cards */
.rec-card {
  padding:16px 20px; background:var(--card,#0f172a); border:1px solid var(--line,#334155);
  border-radius:12px; margin-bottom:12px;
}
.rec-card-title {
  font-size:.82em; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--heading,#f1f5f9); margin-bottom:10px;
}
.rec-card-grid {
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:.88em;
}
.rec-card-label { color:var(--muted,#64748b); font-weight:600; }
.rec-card-value { color:var(--text,#e2e8f0); }

/* Customer/Vehicle select cards */
.rec-select-card {
  padding:12px 16px; border-radius:10px; cursor:pointer;
  background:var(--surface,#1e293b); border:1px solid var(--line,#334155);
  transition: all .15s ease;
}
.rec-select-card:hover { border-color:var(--blue,#2563eb); }
.rec-select-card.selected { border-color:var(--blue,#2563eb); background:rgba(37,99,235,.08); }

/* Light mode overrides */
body.light-mode .rec-wizard-step { background:var(--surface,#f8fafc); color:var(--muted,#64748b); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-wizard-step.active { background:var(--blue,#2563eb); color:#fff; }
body.light-mode .rec-wizard-step.completed { background:var(--status-active,#16a34a); color:#fff; }
body.light-mode .rec-fuel-btn { background:var(--surface,#f8fafc); color:var(--muted,#64748b); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-fuel-btn.selected { background:var(--blue,#2563eb); color:#fff; }
body.light-mode .rec-check-item { background:var(--surface,#f8fafc); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-check-item.checked { border-color:var(--status-active,#16a34a); background:rgba(22,163,74,.06); }
body.light-mode .rec-photo-thumb { background:var(--surface,#f8fafc); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-timeline::before { background:var(--line,#e2e8f0); }
body.light-mode .rec-timeline-item { background:var(--card,#fff); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-subtab { background:var(--surface,#f8fafc); color:var(--muted,#64748b); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-card { background:var(--card,#fff); border-color:var(--line,#e2e8f0); }
body.light-mode .rec-select-card { background:var(--surface,#f8fafc); border-color:var(--line,#e2e8f0); }

/* Diagnostic item rows responsive */
.rec-diag-item-row {
  display:grid; grid-template-columns:1fr 70px 110px 70px 30px; gap:6px; align-items:end; margin-bottom:6px;
}

/* Mobile responsive */
@media(max-width:768px){
  .rec-wizard-progress { gap:0; overflow-x:auto; padding-bottom:4px; }
  .rec-wizard-step { padding:6px 10px; font-size:.78em; }
  .rec-wizard-connector { width:12px; }
  .rec-checklist { grid-template-columns:1fr 1fr; }
  .rec-photo-grid { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:6px; }
  .rec-card-grid { grid-template-columns:1fr; gap:2px 0; }
  .rec-card-label { margin-top:6px; }
  .rec-subtabs { gap:4px; }
  .rec-subtab { padding:6px 12px; font-size:.82em; }
  .rec-fuel-gauge { flex-wrap:wrap; }
  .rec-diag-item-row { grid-template-columns:1fr 60px 90px 60px 30px; gap:4px; }
}

@media(max-width:430px){
  .rec-wizard-step { padding:5px 8px; font-size:.72em; }
  .rec-wizard-connector { width:8px; }
  .rec-checklist { grid-template-columns:1fr; }
  .rec-photo-grid { grid-template-columns:repeat(3,1fr); }
  .rec-fuel-btn { padding:6px 10px; font-size:.82em; }
  .rec-diag-item-row { grid-template-columns:1fr; gap:4px; }
}

/* ══ Reception / Appointments — mobile camera-first UX ══ */
/* Full-screen modals on phones (mecánicos con celular en taller) */
@media(max-width:640px){
  /* Tabla semanal de citas: sticky column hora con z-index correcto y scroll táctil */
  #apptCalGrid{
    -webkit-overflow-scrolling:touch;
  }
  #apptCalGrid th,
  #apptCalGrid td:first-child{
    z-index:10 !important;
    font-size:.8em !important;
  }
  /* Status badges: padding cómodo para lectura y mayor contraste visual */
  #recContent [style*="padding:3px 10px"],
  #apptContent [style*="padding:3px 10px"]{
    padding:6px 12px !important;
    min-height:28px !important;
    display:inline-flex !important;
    align-items:center !important;
  }
  .rec-modal-fullscreen-mobile{
    max-width:100vw !important;
    width:100vw !important;
    max-height:100vh !important;
    height:100vh !important;
    border-radius:0 !important;
    padding:0 !important;
  }
  /* Reception buttons: min-height 48px, más grandes para dedos */
  #recContent button,
  #recContent .btn,
  #apptContent button,
  #apptContent .btn{
    min-height:48px !important;
    font-size:15px !important;
  }
  /* Pequeños iconos (🗑) no necesitan 48px */
  #recContent button[style*="font-size:.85em"],
  #recContent button[style*="font-size:.9em"]{
    min-height:40px !important;
  }
  /* Photo thumbnails más grandes en móvil */
  #recContent img[style*="max-width:180px"],
  #recContent img[style*="max-width:200px"]{
    max-width:100% !important;
    width:100% !important;
    height:auto !important;
  }
  /* Inputs grandes para evitar zoom iOS (16px mínimo) */
  #recContent input[type="text"],
  #recContent input[type="email"],
  #recContent input[type="tel"],
  #recContent input[type="number"],
  #recContent input[type="date"],
  #recContent input[type="datetime-local"],
  #recContent textarea,
  #recContent select,
  #apptContent input[type="text"],
  #apptContent input[type="email"],
  #apptContent input[type="tel"],
  #apptContent input[type="number"],
  #apptContent textarea,
  #apptContent select{
    font-size:16px !important;
    min-height:44px !important;
  }
}
@media(max-width:430px){
  /* Action bar en columna en pantallas muy chicas */
  #recContent [style*="display:flex"][style*="flex-wrap:wrap"]{
    gap:8px !important;
  }
}

/* ── CSAT Survey Animations ── */
@keyframes csatSlideIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes csatFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes csatCheckDraw { to { stroke-dashoffset:0; } }

/* ── POS "Pro" layout (ventana nueva venta — sales.js renderNewSaleForm) ── */
.pos-grid{
  transition:all .25s ease;
}
.pos-card{
  transition:border-color .2s ease, box-shadow .2s ease;
}
.pos-card:focus-within{
  border-color:color-mix(in srgb, var(--blue) 55%, var(--line)) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent);
}
.pos-totals-card{
  position:relative;
  overflow:hidden;
}
.pos-totals-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(ellipse at top right, color-mix(in srgb, var(--blue) 14%, transparent), transparent 60%);
}
.pos-totals-card > *{
  position:relative;
  z-index:1;
}
.pos-actions .primary{
  transition:transform .12s ease, box-shadow .2s ease, filter .15s ease;
}
.pos-actions .primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}
.pos-actions .primary:active{
  transform:translateY(0);
}
/* Tablet — grid colapsa a 1 columna, resumen deja de ser sticky */
@media (max-width: 1100px){
  .pos-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .pos-sidebar{
    position:static !important;
  }
  .pos-totals-card{
    /* En tablet el resumen ya no es sticky — mantener prominente pero no dominante */
    padding:16px 18px !important;
  }
}
/* Mobile standard — tipografía ajustada y config bar en 1 col */
@media (max-width: 640px){
  .pos-shell{ padding:0 !important; }
  .pos-hero h2{ font-size:1.1em !important; }
  .pos-hero{ padding:14px 16px !important; gap:10px !important; }
  .pos-hero > div:first-child > div:first-child{ /* icono círculo */
    width:38px !important; height:38px !important; font-size:1.2em !important;
  }
  .pos-card{ padding:14px 14px !important; }
  .pos-card header{ gap:8px !important; margin-bottom:10px !important; }
  .pos-card header > div:first-child{ width:28px !important; height:28px !important; }
  .pos-totals-card > #saleTotalsDisplay > div:first-child{
    font-size:1.85em !important;
  }
  .pos-config-bar{
    grid-template-columns:1fr !important;
    padding:12px !important;
    gap:10px !important;
  }
  /* Descuento + Cupón: apilar en pantallas chicas para que no se apretujen */
  .pos-sidebar .pos-card > div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* CTA principal: min-height aumentado para tap fácil con dedo */
  .pos-actions .primary{
    min-height:56px !important;
    font-size:1em !important;
  }
  /* Help-tips en hero sobre fondo claro: sutil */
  .pos-hero .help-tip{ margin-left:4px; }
}
/* iPhone SE y celulares más chicos */
@media (max-width: 430px){
  .pos-card{ border-radius:12px !important; padding:12px !important; }
  .pos-totals-card > #saleTotalsDisplay > div:first-child{
    font-size:1.65em !important;
  }
  /* Tabla items: permitir scroll horizontal pero con min-width razonable */
  .pos-card .tbl{ min-width:560px; }
  /* Hero: apilar en columna */
  .pos-hero{ flex-direction:column !important; align-items:stretch !important; }
  .pos-hero > button{ width:100% !important; }
  /* Filtros pill: wrap con gap reducido */
  .pos-card button[id^="saleType"]{
    flex:1 1 auto;
    min-width:0;
    font-size:.8em !important;
    padding:8px 10px !important;
  }
  /* Cash session status bar: compacta en mobile */
  .pos-shell > div[style*="cashSessionActive"]{
    flex-direction:column !important;
    align-items:stretch !important;
  }
}
/* Filtros redondos (Todos / Productos / Servicios) — hover */
.pos-card button[id^="saleType"]:hover{
  filter:brightness(1.06);
}
/* Inputs touch-friendly (mobile/iOS): prevenir zoom automático al focus */
@media (max-width: 640px){
  .pos-card input[type="text"],
  .pos-card input[type="number"],
  .pos-card select,
  .pos-config-bar select,
  .pos-sidebar input[type="text"],
  .pos-sidebar input[type="number"],
  .pos-sidebar select{
    font-size:16px !important; /* iOS no hace zoom si >=16px */
  }
}

/* ── Modal Pre-Sale Payment "POS Pro" (presale.js openPreSalePaymentModal) ── */
.ps-pay-shell{
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 32px);
}
.ps-pay-total-card{
  position:relative;
  overflow:hidden;
}
.ps-pay-total-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at top right, color-mix(in srgb, var(--blue) 14%, transparent), transparent 60%);
}
.ps-pay-total-card > *{ position:relative; z-index:1; }
.ps-pay-main::-webkit-scrollbar,
.ps-pay-sidebar::-webkit-scrollbar{ width:6px; }
.ps-pay-main::-webkit-scrollbar-thumb,
.ps-pay-sidebar::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--blue) 30%, transparent); border-radius:3px; }
/* Tablet: grid colapsa */
@media (max-width: 1024px){
  .ps-pay-grid{
    grid-template-columns:1fr !important;
    max-height:none !important;
  }
  .ps-pay-main,
  .ps-pay-sidebar{
    max-height:none !important;
  }
}
/* Mobile: ajustes tipografía y padding */
@media (max-width: 640px){
  .ps-pay-shell{ border-radius:14px !important; }
  .ps-pay-header{ padding:14px 16px !important; gap:8px !important; }
  .ps-pay-header h3{ font-size:1em !important; }
  .ps-pay-header > div:first-child > div:first-child{
    width:36px !important; height:36px !important; font-size:1.2em !important;
  }
  .ps-pay-grid{ padding:14px !important; gap:12px !important; }
  .ps-pay-card{ padding:12px 14px !important; }
  .ps-pay-total-card > div:last-child{
    font-size:1.8em !important;
  }
  /* Tabla items scrollable horizontal */
  .ps-pay-card table{ min-width:460px; }
  /* CTA full-width natural + min-height mobile */
  .ps-pay-sidebar button.primary{ min-height:56px !important; }
  /* Anti-zoom iOS */
  .ps-pay-card input[type="number"],
  .ps-pay-card input[type="text"],
  .ps-pay-card select{
    font-size:16px !important;
  }
}
/* iPhone SE */
@media (max-width: 430px){
  .ps-pay-total-card > div:last-child{
    font-size:1.55em !important;
  }
  .ps-pay-shell{ border-radius:12px !important; }
  .ps-pay-grid{ padding:10px !important; }
}

/* ── Mobile autocomplete dropdowns + modales custom ────────────────
 * v10b (2026-05-10) audit equipo senior: dropdowns position:absolute
 * inline-styled (customerSearchResults, productSearchResults, etc.)
 * y modales sin sufijo "Modal" carecen de límites de viewport en
 * iPhone <430px. Se solapan con teclado virtual o desbordan pantalla.
 * Defense-in-depth: override por selector específico + atributo. */
@media (max-width: 430px) {
  /* Dropdowns autocomplete por id pattern */
  [id$="SearchResults"],
  [id$="searchResults"],
  .autocomplete-dropdown,
  .product-search-dropdown,
  .customer-search-dropdown {
    max-height: min(50vh, 280px) !important;
    max-width: calc(100vw - 16px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Modales custom sin sufijo Modal (id="customerNewForm", etc.) */
  [id$="Form"][style*="position:fixed"],
  [id$="form"][style*="position:fixed"],
  [id$="Picker"][style*="position:fixed"],
  [id$="Wizard"][style*="position:fixed"] {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 32px) !important;
    margin: 8px !important;
    overflow-y: auto !important;
  }
  /* Asegurar que ningún modal-overlay child quede oculto bajo keyboard mobile */
  .modal-overlay > div,
  [id$="Modal"] > div {
    max-height: min(85vh, calc(100vh - 64px)) !important;
    overflow-y: auto !important;
  }
}

/* Tablet portrait — modales más cómodos sin desbordar */
@media (min-width: 431px) and (max-width: 768px) {
  [id$="SearchResults"],
  [id$="searchResults"],
  .autocomplete-dropdown {
    max-height: min(60vh, 360px) !important;
  }
}

/* ==========================================================================
   2026-05-13: Override Chrome/Safari autofill UNIVERSAL — capa final
   --------------------------------------------------------------------------
   El override básico en línea ~344 (`input:-webkit-autofill`) tiene
   specificity (0,1,1) y es vencido en orden por reglas más profundas tipo
   `.admin-field input` (también 0,1,1 pero declarada después). Cuando el
   browser autofiltea (passwords guardados, direcciones, emails, ciudades,
   etc.) Chrome moderno ignora el `box-shadow inset` si una regla posterior
   con specificity igual o mayor setea `background-color` directo.
   Solución defense-in-depth para TODOS los casos reportados y futuros:
   - Selectores con specificity ALTA cubriendo todos los wrappers conocidos
     (.admin-field, .config-field, .pw-eye-wrap, modales, formularios).
   - Combinar `-webkit-box-shadow inset` + `background-color !important` +
     `-webkit-text-fill-color` + `caret-color`.
   - Agregar pseudo-class moderna `:autofill` (sin -webkit) además del
     prefijo legacy.
   - Animation hook `onAutoFillStart`/`onAutoFillEnd` opcional para JS detect.
   - Aplica a inputs de cualquier tipo (text, email, tel, password, search,
     url, number) y a select/textarea.
   ========================================================================== */
@keyframes onAutoFillStart { from {} to {} }
@keyframes onAutoFillEnd   { from {} to {} }

body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body input:-webkit-autofill:active,
body textarea:-webkit-autofill,
body textarea:-webkit-autofill:hover,
body textarea:-webkit-autofill:focus,
body select:-webkit-autofill,
body select:-webkit-autofill:hover,
body select:-webkit-autofill:focus,
body input:autofill,
body input:autofill:hover,
body input:autofill:focus,
body textarea:autofill,
body select:autofill,
body .admin-field input:-webkit-autofill,
body .admin-field select:-webkit-autofill,
body .admin-field textarea:-webkit-autofill,
body .admin-field input:autofill,
body .config-field input:-webkit-autofill,
body .config-field select:-webkit-autofill,
body .config-field input:autofill,
body .pw-eye-wrap > input:-webkit-autofill,
body .pw-eye-wrap > input:autofill,
body [class*="modal"] input:-webkit-autofill,
body [class*="modal"] input:autofill,
body form input:-webkit-autofill,
body form input:autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg, #ffffff) inset !important;
          box-shadow: 0 0 0 1000px var(--input-bg, #ffffff) inset !important;
  background-color: var(--input-bg, #ffffff) !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--input-text, #1e293b) !important;
  color: var(--input-text, #1e293b) !important;
  caret-color: var(--input-text, #1e293b) !important;
  border-color: var(--line, #e2e8f0) !important;
  transition: background-color 9999s ease-in-out 0s,
              color 9999s ease-in-out 0s !important;
  animation-name: onAutoFillStart !important;
  animation-duration: 1ms !important;
}

/* Estado "no-autofill" detectable via animationend para JS opcional */
body input:not(:-webkit-autofill),
body textarea:not(:-webkit-autofill),
body select:not(:-webkit-autofill) {
  animation-name: onAutoFillEnd;
  animation-duration: 1ms;
}

/* Light mode explícito (panel tenant tiene 2 themes) */
body.light-mode input:-webkit-autofill,
body.light-mode input:autofill,
body.light-mode .admin-field input:-webkit-autofill,
body.light-mode .admin-field input:autofill,
body.light-mode .config-field input:-webkit-autofill,
body.light-mode .config-field input:autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg, #ffffff) inset !important;
          box-shadow: 0 0 0 1000px var(--input-bg, #ffffff) inset !important;
  background-color: var(--input-bg, #ffffff) !important;
  -webkit-text-fill-color: var(--input-text, #1e293b) !important;
  color: var(--input-text, #1e293b) !important;
}

/* Dark mode explícito — vence a `body.dark-mode .admin-field input` */
body.dark-mode input:-webkit-autofill,
body.dark-mode input:autofill,
body.dark-mode .admin-field input:-webkit-autofill,
body.dark-mode .admin-field input:autofill,
body.dark-mode .config-field input:-webkit-autofill,
body.dark-mode .config-field input:autofill,
body.dark-mode form input:-webkit-autofill,
body.dark-mode form input:autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg, #1e293b) inset !important;
          box-shadow: 0 0 0 1000px var(--input-bg, #1e293b) inset !important;
  background-color: var(--input-bg, #1e293b) !important;
  -webkit-text-fill-color: var(--input-text, #f1f5f9) !important;
  color: var(--input-text, #f1f5f9) !important;
}