/* -------------------------------------------------------------------
   Design tokens
------------------------------------------------------------------- */
:root {
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-border: #e3e5e9;
  --color-text: #1f2430;
  --color-text-muted: #6b7280;
  --color-primary: #d13323;
  --color-primary-dark: #a8281a;
  --color-sidebar-bg: #17181c;
  --color-sidebar-text: #c7c9d1;
  --color-sidebar-text-active: #ffffff;
  --radius: 10px;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  /* 2026-09-22 (pedido de Alejo: "la letra del menu hamburguesa queda
     muy grande") — Safari/iOS tiene un "auto-inflado" de texto que
     agranda solo por su cuenta el font-size real adentro de
     contenedores con scroll propio (overflow-y:auto) — exactamente el
     caso del dropdown del sidebar en celular. El font-size:14px de
     .nav-item ya estaba bien puesto, Safari lo estaba infllando sin
     que el CSS lo pidiera. Esto desactiva ese auto-inflado en toda la
     app. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
}

/* -------------------------------------------------------------------
   Login screen
------------------------------------------------------------------- */
.login-screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-image: url("/img/monostereo-pattern.webp");
  background-repeat: repeat;
  background-size: 420px 420px;
}

.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.login-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  display: block;
}

.login-card h1 {
  font-size: 22px;
  margin: 0 0 8px;
}

.login-card p {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0 0 24px;
}

.google-btn-slot {
  display: flex;
  justify-content: center;
}

.login-made-in {
  position: absolute;
  right: 20px;
  bottom: 16px;
  margin: 0;
  font-size: 12px;
  color: var(--color-text);
  letter-spacing: 0.3px;
}

/* -------------------------------------------------------------------
   App shell
------------------------------------------------------------------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Solo existe en celular/tablet (ver @media max-width 1024px). */
.sidebar-backdrop {
  display: none;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff;
}

.sidebar-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-logo span {
  display: block;
  font-size: 11px;
  color: var(--color-primary);
  letter-spacing: 2px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Items del menu con icono (2026-10-15, sidebar por areas estilo ERP de
   Venezia — ver NAV_TREE en shell.js). */
.nav-item,
.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-sidebar-text);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}

.nav-item:hover,
.nav-group-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.nav-item-active,
.nav-item-active:hover {
  background: var(--color-primary);
  color: var(--color-sidebar-text-active);
}

.nav-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

.nav-item-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grupo plegable: titulo (boton) + sub-items. */
.nav-group {
  display: flex;
  flex-direction: column;
}

.nav-group-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: 0.6;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

.nav-group-open .nav-group-chevron {
  transform: rotate(0deg);
}

/* El titulo del grupo que contiene la pantalla actual queda en blanco,
   para que se note en que area estas aunque el grupo este cerrado. */
.nav-group-has-active > .nav-group-toggle {
  color: #fff;
  font-weight: 600;
}

.nav-group-children {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px;
}

.nav-group-open > .nav-group-children {
  display: flex;
}

.nav-item-child {
  padding: 8px 12px 8px 22px;
  font-size: 13.5px;
}

.nav-item-child .nav-icon {
  width: 16px;
  height: 16px;
}

/* Pantallas todavia sin definir (ej. Customers > Pending) — mismo
   criterio que "Clientes potenciales" en el ERP de Venezia: se ven
   atenuadas pero se pueden abrir (muestran "Coming soon"). */
.nav-item-muted:not(.nav-item-active) {
  opacity: 0.45;
}

/* Seccion "DO NOT USE (Alejo's testing versions)" del sidebar
   (2026-09-18) — mismo look de item de nav pero en un color bien
   distinto (ambar) para que nadie del equipo la confunda con la
   version real de arriba. */
.sidebar-nav-divider {
  margin-top: 12px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5;
  color: #f0b23d;
  text-transform: uppercase;
}

.sidebar-nav-beta {
  border: 1px dashed rgba(240, 178, 61, 0.4);
  border-radius: 8px;
  padding: 6px;
}

.nav-item-beta {
  color: #f0b23d;
}

.nav-item-beta:hover {
  background: rgba(240, 178, 61, 0.12);
}

.nav-item-beta.nav-item-active {
  background: #f0b23d;
  color: #1f1500;
}

/* Boton + seccion colapsable "Old Database" (2026-09-22) — red de
   contencion mientras todo el equipo prueba la app nueva en
   produccion real. Colapsada por default (ver renderAppShell en
   shell.js), se abre con un click o sola si la ruta activa es una de
   las viejas (ver updateActiveNav). Mismo tono ambar que antes usaba
   "DO NOT USE" para que se note que es la version de respaldo, no la
   principal. */
.sidebar-old-db-toggle {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed rgba(240, 178, 61, 0.4);
  border-radius: 8px;
  background: transparent;
  color: #f0b23d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: left;
  cursor: pointer;
}

.sidebar-old-db-toggle:hover {
  background: rgba(240, 178, 61, 0.12);
}

.sidebar-old-db-section {
  border: 1px dashed rgba(240, 178, 61, 0.4);
  border-radius: 8px;
  padding: 6px;
  margin-top: 6px;
}

.nav-item-legacy {
  color: #f0b23d;
}

.nav-item-legacy:hover {
  background: rgba(240, 178, 61, 0.12);
}

.nav-item-legacy.nav-item-active {
  background: #f0b23d;
  color: #1f1500;
}

.main-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: 60px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.topbar-spacer {
  flex: 1;
}

/* "Quien esta online" (2026-08-20) — ver shell.js */
.presence-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.presence-label {
  font-size: 12px;
  color: var(--color-text-muted);
}

.presence-avatars {
  display: flex;
}

.presence-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  background: var(--color-primary);
  margin-left: -8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.presence-avatar:first-child {
  margin-left: 0;
}

.presence-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presence-avatar-initials {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
}

/* "Alguien esta actualizando el catalogo" (2026-09-02) — ver shell.js */
.catalog-upload-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 10px 16px;
  font-size: 13px;
}

.catalog-upload-toast .loading {
  padding: 0;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-border);
}

.user-name {
  font-size: 13px;
  color: var(--color-text-muted);
}

.logout-btn {
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text);
}

.logout-btn:hover {
  background: var(--color-bg);
}

.route-outlet {
  flex: 1;
  padding: 32px;
}

/* ===========================================================================
   Shell responsive (2026-09-22, pedido de Alejo) — el sidebar fijo de
   220px se comia mas de la mitad de la pantalla en celular/tablet.
   Breakpoints usados en TODO el CSS responsive del proyecto (no hay
   custom media queries de CSS todavia asi que quedan como numeros
   literales, pero son siempre los mismos dos):
     - hasta 640px  = celular
     - 641-1024px   = tablet / compu con la ventana angosta
     - 1025px+      = desktop (sidebar de siempre, sin cambios)

   Debajo de 1025px el sidebar deja de ser una columna fija y pasa a
   ser un dropdown que cuelga del topbar (mismo elemento DOM, no se
   duplica el nav — ver toggleMobileNav_ en shell.js), con un boton
   de hamburguesa + logo chico que aparecen en el topbar. Por encima
   de 1024px, todo este bloque no hace nada (el sidebar de siempre).
   =========================================================================== */
.topbar-mobile-brand {
  display: none;
}

.sidebar-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.sidebar-mobile-toggle:hover {
  background: var(--color-bg);
}

.sidebar-mobile-toggle-icon {
  width: 18px;
  height: 14px;
  position: relative;
  display: block;
}

.sidebar-mobile-toggle-icon span,
.sidebar-mobile-toggle-icon span::before,
.sidebar-mobile-toggle-icon span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
}

.sidebar-mobile-toggle-icon span {
  top: 6px;
}

.sidebar-mobile-toggle-icon span::before {
  top: -6px;
}

.sidebar-mobile-toggle-icon span::after {
  top: 6px;
}

@media (max-width: 1024px) {
  .topbar-mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 12px;
  }

  .topbar-mobile-brand img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
  }

  .topbar-mobile-brand-word {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--color-text);
  }

  .sidebar-mobile-toggle {
    display: flex;
  }

  /* El sidebar deja de ser columna fija de 220px y pasa a ser un
     dropdown que cuelga del topbar (60px de alto), oculto por
     default (max-height: 0 + overflow hidden, no display:none, asi
     la transicion de apertura se puede animar). */
  .sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    /* 2026-10-15: pasa de dropdown a lo ancho a panel lateral que entra
       deslizando desde la izquierda (patron de menu hamburguesa de
       cualquier app) — con los grupos plegables el menu es mas largo y
       un drawer se maneja mejor con el dedo. */
    width: min(300px, 85vw);
    max-height: none;
    padding: 16px 12px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 45;
    background: var(--color-sidebar-bg);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    gap: 16px;
  }

  .sidebar.sidebar-mobile-open {
    transform: translateX(0);
  }

  /* Fondo oscurecido detras del menu abierto — tocarlo cierra el menu
     (el cierre en si lo maneja wireMobileNavToggle_ en shell.js). */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 44;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .sidebar-backdrop.sidebar-backdrop-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Items mas altos para tocar con el dedo. */
  .nav-item,
  .nav-group-toggle {
    padding: 12px 12px;
    font-size: 15px;
  }

  .nav-item-child {
    padding: 11px 12px 11px 22px;
    font-size: 14.5px;
  }

  /* El logo grande de siempre del sidebar ya se muestra chico en el
     topbar (.topbar-mobile-brand) — no hace falta repetirlo adentro
     del dropdown. */
  .sidebar-logo {
    display: none;
  }

  /* Topbar mas angosto: con hamburguesa + logo chico sumados, 24px de
     padding de cada lado sobraba espacio que hace falta para el
     contenido. */
  .topbar {
    padding: 0 14px;
  }

  /* En celular/tablet angosto el nombre completo (a veces un email
     largo) no entra al lado del logout — el avatar + iniciales ya
     identifican a quien esta logueado, y tocando "Logout" sigue
     andando igual. */
  .user-name {
    display: none;
  }

  .presence-label {
    display: none;
  }
}

@media (max-width: 640px) {
  .route-outlet {
    padding: 16px;
  }
}

/* -------------------------------------------------------------------
   Page / module content
------------------------------------------------------------------- */
.page h1 {
  margin: 0 0 4px;
  font-size: 24px;
}

.subtitle {
  color: var(--color-text-muted);
  margin: 0 0 24px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.module-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: transform 0.1s ease;
}

.module-card:not(.module-card-disabled):hover {
  transform: translateY(-2px);
}

.module-card-disabled {
  opacity: 0.55;
  cursor: default;
}

.module-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.module-card p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.section-title {
  margin: 36px 0 4px;
  font-size: 18px;
}

.upload-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.upload-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.upload-card > .subtitle {
  margin: 0 0 14px;
  font-size: 13px;
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  border: 2px dashed var(--color-border);
  border-radius: 10px;
  padding: 24px 12px;
  cursor: pointer;
  transition: border-color 0.1s ease, background 0.1s ease;
}

.dropzone:hover,
.dropzone-active {
  border-color: var(--color-primary);
  background: var(--color-bg);
}

.dropzone-icon {
  font-size: 20px;
  color: var(--color-text-muted);
}

.dropzone-text {
  font-size: 12px;
  color: var(--color-text-muted);
}

.upload-status {
  margin-top: 14px;
  font-size: 13px;
}

.upload-status-line {
  margin: 0 0 4px;
}

.upload-card-narrow {
  max-width: 620px;
}

.bulk-upload-step {
  margin-bottom: 20px;
}

.bulk-upload-step:last-child {
  margin-bottom: 0;
}

.bulk-upload-step-label {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 13px;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}

.badge-wip {
  background: #fdecea;
  color: var(--color-primary-dark);
}

.badge-soon {
  background: #eef0f3;
  color: var(--color-text-muted);
}

/* Panel de historial de respuestas (2026-10-15, orderResponses.js) —
   mismos colores que los botones SHIP/HOLD FOR MORE/CANCEL del mail
   (ver orderStatusEmail.ts > orderActionButtonsHtml_), para que el
   badge se reconozca de un vistazo como "la misma accion de siempre". */
.badge-ship {
  background: #e7f4ec;
  color: #3da35d;
}

.badge-hold {
  background: #fdf3e2;
  color: #a8731f;
}

.badge-cancel {
  background: #fbe9e9;
  color: #d9534f;
}

/* Marketing Center — listas de clientes (2026-10-15, marketing.js).
   Layout de 2 columnas: lista de listas a la izquierda (fija, scrollea
   si hay muchas), detalle de la lista elegida a la derecha (ocupa el
   resto). Mismo breakpoint que el resto de la app para colapsar a 1
   columna en mobile. */
.mkv2-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  margin-top: 16px;
  align-items: start;
}

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

.mkv2-lists-col {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 12px;
  max-height: 70vh;
  overflow-y: auto;
}

.mkv2-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.mkv2-list-row:hover {
  background: #F4F3EF;
}

.mkv2-list-row-active {
  background: #EAF2FB;
}

.mkv2-list-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mkv2-list-row-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkv2-list-delete-btn {
  color: var(--color-text-muted, #999);
  font-size: 13px;
  flex-shrink: 0;
}

.mkv2-detail-col {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 20px;
  min-height: 200px;
}

.mkv2-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mkv2-suggestions {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid #E3E1DA;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  max-height: 260px;
  overflow-y: auto;
  margin-top: 4px;
}

.mkv2-suggestion-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
}

.mkv2-suggestion-item:hover {
  background: #F4F3EF;
}

.mkv2-suggestion-empty {
  padding: 8px 12px;
}

/* Mensaje del cliente en Questions & Feedback — puede ser largo y
   tener saltos de linea; se respetan y se deja un ancho minimo comodo. */
.qfv2-message-cell {
  white-space: pre-wrap;
  min-width: 260px;
  max-width: 480px;
}

.orv2-subheading {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A18;
  margin: 24px 0 8px;
}

.mkv2-rule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.mkv2-rule-row .field-select {
  flex: 1;
}

.mkv2-rule-row .mkv2-rule-remove {
  flex-shrink: 0;
}

.notice {
  background: #fff8e6;
  border: 1px solid #f2d98a;
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.endpoint {
  display: inline-block;
  background: #f0f1f3;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  word-break: break-all;
}

.endpoint-list {
  padding-left: 18px;
  line-height: 1.8;
}

.error-banner {
  background: #fdecea;
  color: var(--color-primary-dark);
  padding: 12px 16px;
  border-radius: var(--radius);
}

.loading,
.empty-state {
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 24px 0;
}

/*
 * Spinner en ".loading" (2026-08-27): antes era texto estatico
 * ("Loading...", "Validating and saving customers...") — en cargas que
 * tardan un rato largo (ej. subir 1600+ clientes de una) daba la
 * sensacion de que la pantalla se habia colgado, sin ninguna senal de
 * que seguia trabajando. Se agrega ACA, en la clase compartida, para
 * que aplique solo con esto a TODOS los "Loading..." de toda la app
 * (Order Status, Shipment Requests, Customers, etc.) sin tener que
 * tocar cada mensaje uno por uno.
 */
.loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.loading::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: loading-spin 0.7s linear infinite;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/*
 * Mismo spinner, para botones ("Preparing export...", "Saving...",
 * "Sending...", etc. — ver js/lib/buttonLoading.js). currentColor hace
 * que el circulito tome el mismo color que el texto del boton, asi
 * funciona igual de bien en btn-primary (texto blanco) que en
 * btn-secondary (texto oscuro) sin tener que definir un color aparte
 * para cada variante.
 */
.btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: 0.85;
  animation: loading-spin 0.7s linear infinite;
}

/* -------------------------------------------------------------------
   Order Status module
------------------------------------------------------------------- */
.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.search-input {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  width: 280px;
  max-width: 100%;
}

/* 2026-09-22 (pedido de Alejo): el buscador de cada pantalla se movio
   de arriba de todo (header) a pegado arriba de la tabla/lista que
   filtra — es donde la gente lo espera encontrar. Ver Order Status,
   Customers y Product Requests. */
.table-search-row {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.table-search-row .search-input {
  width: 100%;
  max-width: 360px;
  flex: 1 1 240px;
}

/**
 * Columns picker (2026-10-06): boton "Columns ▾" + panel flotante con
 * checkboxes, al lado del buscador de Order Status. Mismo patron visual
 * que .wizard-modal (fondo blanco, --radius, --shadow-card) pero
 * posicionado absolute en vez de overlay — no bloquea el resto de la
 * pantalla, se cierra solo con un click afuera (ver wireColumnsPicker_
 * en orderStatus.js).
 */
.columns-picker {
  position: relative;
  flex: 0 0 auto;
}

.columns-picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 12px 16px;
  min-width: 200px;
}

.columns-picker-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-text, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.columns-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  /* separate + border-spacing:0 (2026-09-22), NO collapse — con
     columnas position:sticky, border-collapse:collapse es un bug
     conocido de los motores de render: la sombra/el fondo opaco de la
     columna pegada deja de "tapar" bien lo que va scrolleando por
     abajo, y se ve texto de otras columnas filtrandose por izquierda
     (justo lo que reporto Alejo). Con "separate" el resultado visual
     es identico (solo usamos border-bottom, nunca border en las 4
     puntas, asi que no aparecen bordes dobles) pero el sticky+sombra
     funciona bien. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

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

/* ===========================================================================
   Tablas responsive (2026-09-22, pedido de Alejo, referencia: como
   se ve el listado de pedidos de Shopify) — se aplica automaticamente
   a TODA tabla con clase .data-table, sin que cada modulo tenga que
   optar por nada:

   - Tablet / compu con ventana angosta (<=1024px): la tabla sigue
     siendo tabla, pero la primera columna queda "pegada" (sticky) al
     scrollear horizontal — mismo truco que usa Shopify, asi siempre
     se ve a que fila corresponde lo que estas mirando.
   - Celular (<=640px): la tabla se convierte en una lista de tarjetas
     (una por fila), mostrando "Label: valor" para cada columna — ver
     enhanceResponsiveTable() en js/lib/responsiveTable.js, que es
     quien completa el atributo data-label de cada <td> leyendo el
     texto del <th> correspondiente (ningun modulo tiene que escribir
     ese texto a mano). Order Status ademas tiene su propia tarjeta
     mas prolija (ver css de Order Status v2) que REEMPLAZA esta
     version generica en esa pantalla puntual.
   =========================================================================== */
@media (max-width: 1024px) {
  /* 2026-09-22 (pedido de Alejo): el divisor con sombra difuminada se
     veia raro/movedizo al scrollear — se cambia por una linea solida,
     la misma que ya separa el header del body (1px, var(--color-border)),
     mas prolija y consistente con el resto de la UI.
     transform: translateZ(0) (2026-09-22, pedido de Alejo: "la columna
     de ITEM baila al deslizar") — fuerza su propia capa de composicion
     en el navegador, que es el fix estandar para el "temblor" de
     columnas position:sticky en tablas durante el scroll en Safari/iOS
     (sin esto, el browser puede repintar la celda en el lugar
     equivocado por un frame mientras haces scroll rapido). */
  .data-table th:first-child,
  .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    transform: translateZ(0);
  }

  .data-table th:first-child {
    z-index: 3;
    background: var(--color-surface);
  }

  /* 2026-09-22 (pedido de Alejo): cuando la primera columna es el
     checkbox de seleccion (.checkbox-col, 36px de ancho fijo — ver
     Order Status y el paso "Choose Customer" de Shipment Requests), no
     alcanza con fijar solo esa — hay que fijar tambien la columna que
     sigue (Store/Customer, la que de verdad identifica la fila), que
     es la que el divisor tiene que marcar. En tablas SIN checkbox como
     primera columna, este selector simplemente no matchea nada y todo
     sigue como antes (solo la primera columna fija). */
  .data-table th.checkbox-col:first-child,
  .data-table td.checkbox-col:first-child {
    border-right: none;
  }

  .data-table th.checkbox-col:first-child + th,
  .data-table td.checkbox-col:first-child + td {
    position: sticky;
    left: 36px;
    z-index: 2;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    transform: translateZ(0);
  }

  .data-table th.checkbox-col:first-child + th {
    z-index: 3;
  }

  .clickable-row:hover td:first-child {
    background: var(--color-bg);
  }

  .clickable-row:hover td.checkbox-col:first-child + td {
    background: var(--color-bg);
  }

  /* 2026-09-22 (bug reportado por Alejo): el fondo blanco solido que
     le pusimos a la columna pegada (necesario para que tape lo que
     scrollea por atras) tambien tapaba el tinte amarillo/rojo de
     "old orders at risk of cancellation" en la columna Item de
     .item-detail-table — quedaba blanca en vez de pintada como el
     resto de la fila. Mismos colores exactos que .order-card-risk-*. */
  .order-card-risk-yellow .item-detail-table th:first-child,
  .order-card-risk-yellow .item-detail-table td:first-child {
    background: #fffaf0;
  }

  .order-card-risk-red .item-detail-table th:first-child,
  .order-card-risk-red .item-detail-table td:first-child {
    background: #fdf2f2;
  }
}

@media (max-width: 640px) {
  .table-wrap:not(.table-wrap-no-cards) {
    overflow-x: visible;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }

  /* :not(.item-detail-table) (2026-09-22) — esa tabla puntual (grillas
     densas de SKU dentro de una orden expandida, ver Order Status,
     Shipment Requests y Product Requests) tiene su propio ancho fijo
     pensado para scroll horizontal + columna pegada, no para volverse
     tarjeta — cartelizarla rompia ese layout (min-width:880px peleando
     contra los td en flex). Queda afuera de esta conversion a
     proposito, en cualquier .table-wrap donde aparezca. */
  .table-wrap:not(.table-wrap-no-cards) .data-table:not(.item-detail-table) {
    border: none;
  }

  .table-wrap:not(.table-wrap-no-cards) .data-table:not(.item-detail-table) thead {
    display: none;
  }

  .table-wrap:not(.table-wrap-no-cards) .data-table:not(.item-detail-table) tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .table-wrap:not(.table-wrap-no-cards) .data-table:not(.item-detail-table) tr {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 4px 14px;
  }

  .table-wrap:not(.table-wrap-no-cards) .data-table:not(.item-detail-table) td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
    white-space: normal;
    position: static;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px dashed var(--color-border);
    padding: 8px 0;
  }

  .table-wrap:not(.table-wrap-no-cards) .data-table:not(.item-detail-table) td:last-child {
    border-bottom: none;
  }

  .table-wrap:not(.table-wrap-no-cards) .data-table:not(.item-detail-table) td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    text-align: left;
    flex-shrink: 0;
    padding-right: 10px;
  }

  .table-wrap:not(.table-wrap-no-cards) .data-table:not(.item-detail-table) td:empty::before {
    content: none;
  }

  /* Celdas sin dato (data-label vacio a proposito, ej. checkbox de
     seleccion) no arman una fila label:valor — quedan alineadas
     simples arriba de la tarjeta. */
  .table-wrap:not(.table-wrap-no-cards) .data-table:not(.item-detail-table) td[data-label=""] {
    justify-content: flex-start;
    border-bottom: none;
    padding-bottom: 0;
  }

  /* No hace falta tocar el scroll de .item-detail-table aca — vive
     adentro de .order-card-detail, que ya tiene su propio
     overflow-x:auto (ver mas abajo) independiente de este .table-wrap
     que la contiene. Sigue siendo tabla real con columna pegada
     tambien en celular, no solo en tablet. */
}

.pagination-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px;
}

.pagination-info {
  font-size: 13px;
  color: var(--color-text-muted);
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: var(--color-bg);
}

.muted {
  color: var(--color-text-muted);
  font-size: 12px;
}

.detail-panel {
  margin-top: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

/*
 * Customer detail: side drawer en vez de inline (2026-08-27) — con
 * 1700+ clientes en la tabla, el panel de detalle apareciendo ABAJO de
 * todo obligaba a scrollear toda la pagina cada vez que se abria un
 * cliente. Ahora es un panel fijo que se desliza desde la derecha,
 * tapando la tabla en vez de empujarla — se cierra con la X, clickeando
 * el fondo oscuro, o simplemente eligiendo otro cliente.
 */
.detail-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 30, 0.45);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.detail-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  /* 960px (menos 2x24px de padding = 912px de contenido) para que la
     tabla de detalle de items (min-width: 880px, ver .item-detail-table)
     entre completa sin scroll horizontal en pantallas normales. 94vw
     sigue siendo el techo en ventanas angostas — ahi .order-card-detail
     scrollea horizontal en vez de aplastar la columna Item. */
  width: min(960px, 94vw);
  background: var(--color-surface);
  box-shadow: -8px 0 28px rgba(15, 20, 30, 0.2);
  z-index: 41;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.detail-drawer.is-open {
  transform: translateX(0);
}

.detail-drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
}

.detail-drawer-close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.detail-header h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Checkbox "Include ACH discount note" (2026-08-28) — usado en
   .detail-actions (panel de detalle de cliente) y .bulk-bar (envio
   masivo). Texto chico, en linea con los botones de al lado. */
.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted, #666);
  white-space: nowrap;
  cursor: pointer;
}

.checkbox-inline input[type="checkbox"] {
  cursor: pointer;
}

.btn-primary,
.btn-secondary {
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-secondary:hover {
  background: var(--color-bg);
}

.stat-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.stat-box {
  background: var(--color-bg);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 140px;
}

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

.stat-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

/*
 * "Review cards" (2026-08-27): tarjetas clickeables grandes con fondo
 * blanco de verdad — a diferencia de .stat-box (que usa
 * --color-bg, casi el mismo gris que el fondo de la pagina, y por eso
 * ahi queda bien como numero suelto dentro de una barra de totales),
 * acá necesitamos que se vea clarisimo que es un elemento clickeable
 * aparte, no un numero mas de un resumen. Mismo estilo de card que
 * .table-wrap (blanco, borde, sombra) para que se sienta parte de la
 * misma familia visual que el resto de la app.
 */
.review-card-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.review-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 22px;
  min-width: 230px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.review-card:hover {
  border-color: var(--color-primary);
}

.review-card.review-card-active {
  border-color: var(--color-primary);
  background: #fdf1f0;
}

.review-card-label {
  display: block;
  font-size: 11px;
  color: #d93025;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.review-card {
  border-left: 4px solid #d93025;
}

.review-card-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #d93025;
}

.badge-ready {
  background: #e6f4ea;
  color: #1e7e34;
}

.badge-pending {
  background: #fdecea;
  color: var(--color-primary-dark);
}

/* "PARTIALLY COMPLETE" (2026-08-24) — algo listo pero no todo. Mismo
   amarillo que .bulk-bar, para mantener un solo color de "atencion" en
   todo el sitio. */
.badge-partial {
  background: #fff8e6;
  color: #8a6d1a;
}

.checkbox-col {
  width: 36px;
  text-align: center;
}

.checkbox-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff8e6;
  border: 1px solid #f2d98a;
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
}

.search-input-full {
  width: 100%;
  margin-bottom: 16px;
}

.cutoff-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 13px;
}

.cutoff-bar-label {
  color: var(--color-text-muted);
}

.cutoff-bar-input {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
}

.cutoff-bar-active {
  font-weight: 600;
  color: var(--color-primary-dark);
}

.filter-pill {
  border-radius: 999px !important;
}

.item-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-large {
  padding: 12px 22px;
  font-size: 14px;
}

.btn-small {
  padding: 5px 10px;
  font-size: 12px;
}

/* Delete Customer (v2/customers.js) — mismo tamano que .btn-small, pero
   en rojo para distinguirlo claramente de Edit antes de un click
   destructivo (el confirm() del navegador es la segunda barrera). */
.btn-danger {
  border: 1px solid #d93025;
  color: #d93025;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  margin-left: 4px;
}

.btn-danger:hover {
  background: #fdeceb;
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: default;
}

.link-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.link-btn:hover {
  color: var(--color-primary-dark);
}

.orders-list-controls {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.request-id {
  background: #f0f1f3;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12px;
}

.badge-cancelled {
  background: #eef0f3;
  color: var(--color-text-muted);
}

.row-selected {
  background: #fdecea;
}

.notice-error {
  background: #fdecea;
  border-color: #f3b7ae;
  color: var(--color-primary-dark);
}

.notice-error ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

/* -------------------------------------------------------------------
   Shipment Requests wizard
------------------------------------------------------------------- */
.wizard-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.wizard-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
}

.wizard-step-number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.wizard-step-active {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.wizard-step-active .wizard-step-number {
  background: var(--color-primary);
  color: #fff;
}

.wizard-step-done .wizard-step-number {
  background: #1e7e34;
  color: #fff;
}

.wizard-step-done {
  cursor: pointer;
}

.wizard-step-done:hover {
  border-color: #1e7e34;
  background: var(--color-bg);
}

.wizard-step-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.wizard-step-panel h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.wizard-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.customer-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}

.order-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

/* "Old orders at risk of cancellation" (2026-09-22, pedido de Jeff via
   Alejo, ver getOrderRiskInfo_ en orderStatus.js) — el borde+fondo del
   card avisa de lejos, el banner de adentro explica por que. Rojo =
   21+ dias esperando desde release/order date sin nota que lo explique,
   amarillo = 14-20 dias ("getting old" pero todavia no urgente). */
.order-card-risk-yellow {
  border-color: #f0c419;
  background: #fffaf0;
}

.order-card-risk-red {
  border-color: #d9534f;
  background: #fdf2f2;
}

.osv2-risk-banner {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border-left: 4px solid;
}

.osv2-risk-banner-yellow {
  background: #fff8db;
  border-left-color: #f0c419;
  color: #7a5d00;
}

.osv2-risk-banner-red {
  background: #fbe4e2;
  border-left-color: #d9534f;
  color: #a12a25;
}

/* ===========================================================================
   Tarjetas de la lista de clientes en celular (2026-09-22, pedido de
   Alejo, referencia: listado de pedidos de la app de Shopify) — ver
   renderCustomerCards_ en js/modules/v2/orderStatus.js. Ocultas por
   default (solo existen para <=640px, ver media query abajo); arriba
   de eso sigue siendo la tabla de toda la vida, con su primera columna
   fija en tablet/compu angosta (ver reglas generales de .data-table).
   =========================================================================== */
.osv2-card-list {
  display: none;
}

@media (max-width: 640px) {
  .table-wrap-no-cards {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    overflow: visible;
  }

  .table-wrap-no-cards > table.data-table {
    display: none;
  }

  .osv2-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

.osv2-order-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
  cursor: pointer;
}

.osv2-order-card:active {
  background: var(--color-bg);
}

.osv2-order-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.osv2-order-card-top input[type="checkbox"] {
  flex-shrink: 0;
}

.osv2-order-card-title {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.osv2-order-card-amount {
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

/* 2026-09-22 (pedido de Alejo): la tarjeta muestra Total Ready (no
   Total Ordered) como monto principal — sin el encabezado de columna
   de la tabla de al lado, el numero solo no dice de que total se
   trata, asi que va con un puntito verde + "Total Ready" chiquito
   debajo, msimo lenguaje visual que un estado "listo"/"ready" en el
   resto de la app. */
.osv2-order-card-amount-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.osv2-order-card-amount-caption {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #1e7e34;
}

.osv2-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1e7e34;
  flex-shrink: 0;
}

.osv2-order-card-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.osv2-order-card-badges {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.osv2-order-card-badges:empty {
  display: none;
}

/* Badge "⚠️ N old orders" en la columna Old Orders de la lista principal
   de Order Status — mismo criterio de color que el card, version pill. */
.badge-risk-yellow {
  background: #f0c419;
  color: #4a3900;
}

.badge-risk-red {
  background: #d9534f;
  color: #fff;
}

.order-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--color-bg);
  font-size: 13px;
  flex-wrap: wrap;
}

/* 2026-09-22 (pedido de Alejo) — en celular reacomoda el header de
   cada orden dentro del drawer de detalle. .order-card-header lo
   reusan 3 pantallas con contenido distinto (Order Status tiene badge
   de status COMPLETE/PARTIALLY COMPLETE/INCOMPLETE, Shipment
   Requests/Select Orders no), asi que el orden final NO es el mismo
   en las dos — se distingue con :has() segun que checkbox tiene
   adentro (.osv2-order-select = Order Status, .sr-order-select =
   Shipment Requests), sin tocar el HTML de cada modulo. */
@media (max-width: 640px) {
  .order-card-header {
    gap: 8px 10px;
    row-gap: 6px;
  }

  /* Order Status: renglon 1 = check + numero de orden + badge de
     status; renglon 2 = fecha; renglon 3 = "X/Y ready - $Z"; renglon 4
     = "View Order". */
  .order-card-header:has(.osv2-order-select) .osv2-order-select {
    order: 1;
  }

  .order-card-header:has(.osv2-order-select) > strong {
    order: 2;
  }

  .order-card-header:has(.osv2-order-select) .badge {
    order: 3;
  }

  .order-card-header:has(.osv2-order-select) .muted {
    order: 4;
    flex-basis: 100%;
  }

  .order-card-header:has(.osv2-order-select) .order-ready-pill {
    order: 5;
    flex-basis: 100%;
  }

  .order-card-header:has(.osv2-order-select) .osv2-order-toggle {
    order: 6;
    flex-basis: 100%;
    text-align: left;
  }

  /* Shipment Requests/Select Orders: renglon 1 = check + numero de
     orden + fecha (no hay badge de status ahi, solo eventualmente uno
     de "Price issue"); renglon 2 = "X/Y ready - $Z" (+ el badge de
     price issue si hay, pega abajo porque el pill ya ocupa todo el
     ancho); renglon 3 = "Show items". */
  .order-card-header:has(.sr-order-select) .sr-order-select {
    order: 1;
  }

  .order-card-header:has(.sr-order-select) > strong {
    order: 2;
  }

  .order-card-header:has(.sr-order-select) .muted {
    order: 3;
  }

  .order-card-header:has(.sr-order-select) .order-ready-pill {
    order: 4;
    flex-basis: 100%;
  }

  .order-card-header:has(.sr-order-select) .badge {
    order: 5;
  }

  .order-card-header:has(.sr-order-select) .sr-order-toggle {
    order: 6;
    flex-basis: 100%;
    text-align: left;
  }

  /* Product Requests (sin checkbox por fila) — se deja como estaba,
     todo en fila hasta que no entra mas. */
  .order-card-header .pr-toggle {
    flex-basis: 100%;
    text-align: left;
  }
}

.order-select-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.item-cell-title {
  font-weight: 600;
  white-space: normal;
  word-break: break-word;
}

.item-cell-line {
  font-size: 12px;
  margin-top: 2px;
  white-space: normal;
  word-break: break-word;
}

/* Used for the "Item + numeric columns" detail tables in Order Status
   and Select Orders (Shipment Requests). table-layout: fixed with a
   fixed pixel width on every column but the first means the numeric
   columns line up at the same horizontal position across every order
   card on the page — each card is its own <table>, so without this
   they'd each auto-size independently based on their own content.

   Bug fix (2026-08-24): the first column had no min-width, so on a
   narrower viewport (e.g. a split/tiled browser window) the fixed
   130px numeric columns held their width and squeezed the Item column
   down to almost nothing — long titles ended up wrapping one letter
   per line. min-width on the table + the first column guarantees a
   legible minimum; the parent .order-card-detail (see below) scrolls
   horizontally instead of collapsing when there isn't enough room.

   Bug fix #2 (2026-08-27, same symptom, different cause): under
   table-layout:fixed, a browser computes each width:auto column's
   share as (table's OWN width) minus the sum of the OTHER columns'
   explicit widths — the table's min-width does NOT get added on top
   of that for the auto column specifically. Order Status' detail
   table has 6 fixed-width columns (6 x 110px = 660px), so the table
   needs AT LEAST 660 + 220 (first column's own min-width) = 880px to
   actually give the Item column its intended 220px — the previous
   720px min-width was 160px short, so even though "min-width" was
   technically being honored, the Item column was still only getting
   ~60px once the other 6 columns took their share, which is exactly
   the "one word per line" squeeze reported after the Order Status
   detail panel became a narrower side drawer instead of the full
   page. 880px covers every current usage of .item-detail-table
   (Order Status: 6 numeric columns; Shipment Requests' Select Orders
   step: 4; Product Requests: 6) — extra unused width beyond what a
   given table needs is harmless, so one shared minimum is simplest. */
.item-detail-table {
  table-layout: fixed;
  width: 100%;
  min-width: 880px;
}

.item-detail-table th:first-child,
.item-detail-table td:first-child {
  width: auto;
  min-width: 220px;
  white-space: normal;
}

.item-detail-table th:not(:first-child),
.item-detail-table td:not(:first-child) {
  width: 110px;
  text-align: center;
  white-space: nowrap;
}

/* 2026-09-22 (pedido de Alejo, tercer intento) — primero probamos
   achicar la tabla, despues probamos convertirla en "Label: valor"
   apilado — Alejo mando de referencia como Shopify muestra los items
   de un pedido en celular (foto + titulo + SKU/precio + cantidad
   grande a la derecha) y pidio ese mismo estilo, destacando los campos
   que a nosotros nos importan en vez de los de Shopify. En celular la
   tabla .item-detail-table se oculta del todo y en su lugar se usa
   .item-card-list, armada aparte en JS (ver renderItemCards_ en
   orderStatus.js y ordersStep.js) — no es una conversion generica de
   la tabla porque el orden/jerarquia de la info es distinto (cantidad
   grande arriba a la derecha, precio con el desglose al lado del SKU),
   no algo que un CSS generico pueda inferir solo. */
@media (max-width: 640px) {
  .item-detail-table {
    display: none;
  }
}

.item-card-list {
  display: none;
}

@media (max-width: 640px) {
  .item-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

.item-card {
  /* Sin background propio a proposito — deja ver lo que tenga atras
     (blanco del drawer normalmente, o el tinte amarillo/rojo de
     .order-card-risk-* cuando aplica), mismo criterio que ya usamos
     para que ese tinte no quede tapado. */
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

/* 2026-09-22 (pedido de Alejo, ajuste sobre la v9): todo lo que es
   info del disco (titulo, artista, SKU, release date, unit price) va
   apilado arriba SIN el numero grande al costado — algunos titulos
   son larguisimos y competian por espacio con la cantidad. Abajo de
   una linea de puntos, una sola linea con lo operativo:
   "X of Y ready - $Z". */
.item-card-title {
  font-weight: 700;
  font-size: 14px;
}

.item-card-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.item-card-bottom {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
  font-size: 13px;
  font-weight: 600;
}

.order-ready-pill {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.order-card-detail {
  padding: 0 14px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.order-card-detail.collapsed {
  display: none;
}

.qty-input {
  width: 64px;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
}

.qty-input:disabled {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.details-group {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  margin: 0;
}

.details-group legend {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  padding: 0 6px;
}

.details-group-full {
  grid-column: 1 / -1;
}

.field-group {
  margin-top: 14px;
}

/* Selector de staff para CC en el modal de nota del report (2026-10-15,
   ver promptReportNote_ en orderStatus.js) — .checkbox-inline por si
   solo trae white-space:nowrap, este wrap es lo que permite que varios
   nombres salten de linea en vez de desbordar el modal. */
.osv2-cc-staff-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 6px;
}

.field-group:first-child {
  margin-top: 0;
}

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 4px;
}

.field-select,
.field-input,
.field-textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

.field-textarea {
  min-height: 70px;
  resize: vertical;
}

.address-fields .field-group:first-child {
  margin-top: 0;
}

#sr-address-fields:not(:empty) {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}

.review-section {
  border-top: 1px solid var(--color-border);
  padding: 16px 0;
  font-size: 13px;
  line-height: 1.6;
}

.review-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* Special Requests callout (2026-08-31) — mismo criterio que el mail
   real al deposito (ver convertTextToHtml_ en ShipmentRequests.gs):
   rojo y amarillo lo mas vibrante posible, para que no pase
   desapercibido ni siquiera en esta vista previa dentro del wizard. */
.special-requests-callout {
  background-color: #ffff00;
  color: #ff0000;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
}

.review-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.review-section-header h3 {
  margin: 0;
  font-size: 14px;
}

.review-order-block {
  margin-bottom: 10px;
}

.review-order-block ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.review-order-list {
  margin: 4px 0 0;
  padding-left: 18px;
}

.review-order-list li {
  margin-bottom: 4px;
}

.success-panel {
  text-align: left;
}

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

.wizard-step-panel-section {
  border-top: 1px solid var(--color-border);
  margin-top: 24px;
  padding-top: 20px;
}

.wizard-step-panel-section h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.address-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  align-items: start;
}

.address-fields-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.address-fields-row .field-group,
.address-fields-row-3 .field-group {
  margin-top: 0;
}

.address-preview {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-bg);
  border-radius: 8px;
  font-size: 13px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  cursor: pointer;
}

.checkbox-label input {
  margin: 0;
}

.checkbox-list {
  margin-top: 8px;
}

.checkbox-list .checkbox-label:first-child {
  margin-top: 8px;
}

.checkbox-list textarea {
  margin-top: 8px;
}

.checkbox-list textarea:disabled {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

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

  .address-fields-row,
  .address-fields-row-3 {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   Customers v2 — edicion inline en la tabla + popups de Addresses/Payment
   (2026-09-21, ver js/modules/v2/customers.js).
   =========================================================================== */

.cuv2-editable-table td {
  vertical-align: middle;
  padding: 6px 8px;
}

.cuv2-editable-table .cuv2-cell-input {
  width: 100%;
  min-width: 90px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 7px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
}

.cuv2-editable-table .cuv2-cell-input:hover {
  border-color: var(--color-border);
}

.cuv2-editable-table .cuv2-cell-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.cuv2-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  white-space: nowrap;
}

.cuv2-row-actions .btn-small {
  white-space: nowrap;
}

.cuv2-row-save-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Popup generico para Addresses / Payment Method — reemplaza la
   navegacion a una pantalla aparte (pedido de Alejo, 2026-09-21). */
.cuv2-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 24, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 1000;
  overflow-y: auto;
}

.cuv2-modal-panel {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

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

.cuv2-modal-header h2 {
  margin: 0;
  font-size: 16px;
}

.cuv2-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0 4px;
}

.cuv2-modal-close:hover {
  color: var(--color-text);
}

.cuv2-modal-body {
  padding: 20px;
  overflow-y: auto;
}

.cuv2-table-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* ===========================================================================
   Home — panel de "Novedades" con banners ilustrados (2026-09-21,
   reemplaza la grilla de tarjetas de modulos — ver js/modules/home.js
   y js/newsBanners.js).
   =========================================================================== */

.news-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.news-banner-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

a.news-banner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.news-banner-image {
  width: 100%;
  aspect-ratio: 400 / 220;
  background: var(--color-bg);
}

.news-banner-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.news-banner-body {
  padding: 14px 16px 18px;
}

.news-banner-body h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.news-banner-body p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ===========================================================================
   Home v2 — carrusel de "Novedades" (home_banners, Supabase Storage) +
   panel de administracion (subir/reordenar/borrar). 2026-09-21.
   =========================================================================== */

.hov2-carousel-wrap {
  position: relative;
  margin-bottom: 28px;
}

.hov2-banner-edit-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.hov2-banner-edit-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}

/* "Data Sources" vuelve a estar siempre-visible en Home (2026-10-15,
   revertido el boton/popup "Manual Data Upload" de 2026-10-07 — ver
   home.js). */
.hov2-section-heading {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A18;
  margin: 24px 0 4px;
}

.hov2-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  max-height: 460px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
}

@media (max-width: 720px) {
  .hov2-carousel {
    aspect-ratio: 3 / 1;
    max-height: 260px;
  }
}

.hov2-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hov2-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: block;
}

.hov2-carousel-slide-active {
  opacity: 1;
  pointer-events: auto;
}

.hov2-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hov2-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hov2-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.65);
}

.hov2-carousel-arrow-prev {
  left: 12px;
}

.hov2-carousel-arrow-next {
  right: 12px;
}

.hov2-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.hov2-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0;
}

.hov2-carousel-dot-active {
  background: #fff;
  transform: scale(1.25);
}

.hov2-banner-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.hov2-banner-file-btn {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  background: var(--color-bg);
}

.hov2-banner-upload-row .field-input {
  flex: 1;
  min-width: 200px;
}

/* ===========================================================================
   Order Status v2 — notas por orden (orders.note, 2026-09-21, pedido de
   Alejo). Checkbox por orden + toolbar de acciones en bloque + badge de
   nota visible en la tarjeta.
   =========================================================================== */

.osv2-order-select {
  margin-right: 4px;
}

/* Celeste clarito a proposito (2026-09-22, pedido de Alejo): antes era
   amarillo, igual que el cartel de "old orders at risk" — ahora que ESE
   existe de verdad, una nota en amarillo se confundia con una alerta.
   La nota es solo informativa (contexto de un vendedor), no un aviso de
   riesgo, asi que va en un color tranquilo, no de alarma. */
.osv2-order-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: #e6f4fb;
  border-left: 4px solid #6fb6dc;
  padding: 8px 12px;
  font-size: 13px;
  color: #1c5a7a;
  margin: 0 0 10px;
  border-radius: 0 6px 6px 0;
}

.osv2-order-note-author {
  font-size: 12px;
  font-weight: 600;
  color: #2f7699;
  white-space: nowrap;
}

.osv2-notes-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  flex-wrap: wrap;
}

/* Preview del mail de Shipment Request (2026-10-15) — iframe con el HTML
   real que recibe el deposito (ver loadEmailPanel en reviewStep.js). */
.sr-email-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 8px;
}

.sr-email-preview {
  width: 100%;
  height: 720px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #f0efea;
}

@media (max-width: 640px) {
  .sr-email-preview {
    height: 560px;
  }
}

/* Report Responses — acciones por fila + nota interna debajo de la
   linea (2026-10-15). */
.orv2-row-actions {
  white-space: nowrap;
  text-align: right;
}

.orv2-row-actions .btn-small + .btn-small {
  margin-left: 6px;
}

.data-table tr.orv2-row-has-note > td {
  border-bottom: none;
}

.orv2-note-row > td {
  padding-top: 0;
}

.orv2-note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  background: #fff8e6;
  border-left: 4px solid #f2b705;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
}

.orv2-note-text {
  white-space: pre-wrap;
  color: var(--color-text);
  font-weight: 600;
}

.orv2-note-meta {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Textos de varios renglones (2026-10-15): tarjetas guardadas en
   Customers > Edit Payment, y las instrucciones en el resumen del paso
   Review de Shipment Request — respetan los saltos de linea. */
.cuv2-payment-label-text,
.pre-wrap {
  white-space: pre-wrap;
}

/* -------------------------------------------------------------------
   Email Builder (Marketing Center, 2026-10-15) — formulario a la
   izquierda, preview del mail a la derecha.
------------------------------------------------------------------- */
.ebv2-layout {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: 24px;
  align-items: start;
}

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

.ebv2-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.ebv2-step-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.ebv2-headlines,
.ebv2-group-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ebv2-headline-option,
.ebv2-group-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.ebv2-headline-option span {
  font-weight: 700;
}

.ebv2-group-option span:nth-of-type(1) {
  flex: 1;
}

.ebv2-suggestion {
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
}

.ebv2-suggestion img,
.ebv2-noimg {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: #ecebe6;
  display: inline-block;
}

.ebv2-suggestion > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ebv2-product-card {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.ebv2-product-card img,
.ebv2-noimg-lg {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.ebv2-preview {
  width: 100%;
  height: 1100px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #f0efea;
}

.ebv2-preview-empty {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 60px 20px;
  text-align: center;
  color: var(--color-text-muted);
}

.ebv2-product-card + .ebv2-product-card {
  margin-top: 8px;
}

.ebv2-remove-product {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ebv2-remove-product:hover {
  color: #d93025;
  border-color: #d93025;
}

.ebv2-products-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 13px;
}

/* Email Builder: paso de idioma + aviso "ya se mando" (2026-10-15). */
.ebv2-languages {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ebv2-language-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.ebv2-already-sent {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #8a5a00;
  background: #fff6e0;
  border-left: 3px solid #e8a838;
  border-radius: 4px;
  padding: 5px 8px;
}

/* Email History (2026-10-15). */
.ehv2-products {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.ehv2-product {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  line-height: 1.3;
}

.ehv2-product img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.ehv2-recipients {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.6;
  word-break: break-word;
}

/* Finance > My Commissions (2026-10-15, commissions.js) — reemplaza la
   planilla "Invoices summary". */
.cmv2-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.cmv2-title-actions {
  display: flex;
  gap: 8px;
}
.cmv2-filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}
.cmv2-filter {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}
.cmv2-gap-note {
  margin: -8px 0 16px;
  font-size: 13px;
}
.cmv2-stat-strong {
  background: #fdecea;
}
.cmv2-stat-strong .stat-value {
  color: var(--color-primary-dark);
}
.data-table th.num,
.data-table td.num {
  text-align: right;
  white-space: nowrap;
}
.cmv2-periods-table tfoot td {
  border-top: 2px solid #ddd;
  font-weight: 600;
}
.cmv2-period-row {
  cursor: pointer;
}
.cmv2-period-row:hover td {
  background: #fafafa;
}
.cmv2-period-active td {
  background: #fff3f2 !important;
}
.cmv2-unpaid {
  color: #d93025;
  font-weight: 700;
}
.cmv2-invoice-filters {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cmv2-invoice-filters .field-select {
  width: auto;
  min-width: 170px;
}
.cmv2-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.cmv2-invoices-wrap {
  overflow-x: auto;
}
.cmv2-invoices-table td {
  vertical-align: top;
}
.cmv2-invoices-table .field-input,
.cmv2-invoices-table .field-select {
  padding: 4px 6px;
  font-size: 13px;
  min-width: 0;
}
.cmv2-money {
  width: 90px;
  text-align: right;
}
.cmv2-notes {
  width: 160px;
}
.cmv2-status-PAID {
  color: #1e7e34;
  font-weight: 600;
}
.cmv2-status-PENDING {
  color: #8a6d1a;
  font-weight: 600;
}
.cmv2-status-UNPAID {
  color: #d93025;
  font-weight: 600;
}
.cmv2-excluded td {
  opacity: 0.55;
}
.cmv2-src {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  background: #eef0f3;
  color: var(--color-text-muted);
  vertical-align: middle;
}
.cmv2-src-webhook {
  background: #e6f4ea;
  color: #1e7e34;
}
.cmv2-src-manual {
  background: #fff8e6;
  color: #8a6d1a;
}
.cmv2-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.cmv2-form-grid .field-group:first-child {
  margin-top: 0;
}
.cmv2-span2 {
  grid-column: span 2;
}
@media (max-width: 640px) {
  .cmv2-form-grid {
    grid-template-columns: 1fr;
  }
  .cmv2-span2 {
    grid-column: span 1;
  }
}

/* Email Builder — titulo personalizado (2026-10-16) */
.ebv2-custom-headline-input {
  margin-top: 2px;
}

/* Order Status — selector de idioma del modal de envio (2026-10-16) */
.osv2-language-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* Order Status — Assigned Staff editable en la tabla (2026-10-20) */
.osv2-staff-select {
  padding: 4px 6px;
  font-size: 13px;
  min-width: 130px;
  width: auto;
}
.osv2-staff-saved {
  border-color: #3da35d !important;
  box-shadow: 0 0 0 2px #e6f4ea;
}

/* Order Status — panel "Showing" vertical con totales por vendedor
   (2026-10-20). Cada fila es un filtro clickeable. */
#osv2-scope-bar {
  display: block;
  padding: 6px 8px;
  overflow-x: auto;
}
.osv2-staff-panel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.osv2-staff-panel th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
}
.osv2-staff-panel th.num,
.osv2-staff-panel td.num {
  text-align: right;
  white-space: nowrap;
}
.osv2-staff-panel td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}
.osv2-staff-panel tbody tr:last-child td {
  border-bottom: none;
}
.osv2-staff-panel tbody tr:hover td {
  background: #fafafa;
}
.osv2-staff-panel .osv2-staff-all td {
  font-weight: 700;
}
.osv2-staff-panel .osv2-staff-active td {
  background: #fdecea !important;
  color: var(--color-primary-dark);
  font-weight: 700;
}
.osv2-staff-panel .osv2-staff-active td:first-child {
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* Order Status — filtros del mail en el popup de envio (2026-10-20) */
.osv2-report-filters {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 12px;
  align-items: center;
  justify-content: start;
}
.osv2-report-filters input[type="date"]:disabled {
  opacity: 0.45;
}
@media (max-width: 520px) {
  .osv2-report-filters {
    grid-template-columns: 1fr;
  }
}