/* ===========================================================================
   AXONIA ERP — base de componentes mobile-first
   ===========================================================================
   El sidebar ya es responsive (nav.css: drawer en < 1024px). Lo que falta y
   resuelve este archivo es el kit de componentes de las pantallas del ERP,
   pensado desde el celular hacia arriba: el vendedor y el repartidor trabajan
   en la calle, con una mano, a veces con sol de frente.

   Reglas de diseño que sigue todo el kit:
     · Objetivos táctiles de 44px mínimo (recomendación de accesibilidad).
     · Inputs de 16px de fuente: con menos, iOS hace zoom al enfocar y descuadra
       la pantalla.
     · Las tablas se convierten en tarjetas apiladas en mobile — una tabla con
       scroll horizontal es inusable en un celular.
     · Números tabulares en cantidades e importes: las columnas quedan alineadas
       y las diferencias de magnitud se ven de un vistazo.

   Prefijo `ax-` para no chocar con las clases del módulo base.
   =========================================================================== */

:root {
  /* Semántica de estado — se usan en las píldoras y en los bordes de tarjeta.
     Los estados del ERP se leen por color antes que por texto. */
  --ax-ok:        #16a34a;   /* confirmado, entregado, recibido      */
  --ax-ok-bg:     #dcfce7;
  --ax-warn:      #d97706;   /* pendiente, en preparación, parcial   */
  --ax-warn-bg:   #fef3c7;
  --ax-danger:    #dc2626;   /* cancelado, rechazado, sin stock      */
  --ax-danger-bg: #fee2e2;
  --ax-info:      #2563eb;   /* en ruta, despachado, en tránsito     */
  --ax-info-bg:   #dbeafe;
  --ax-neutral:   #6b7280;   /* borrador, inactivo                   */
  --ax-neutral-bg:#f3f4f6;

  --ax-surface:   #ffffff;
  --ax-line:      #e5e7eb;
  /* Borde de campos editables: más marcado que --ax-line (que es el de las
     tarjetas), si no el campo se pierde sobre una tarjeta blanca. */
  --ax-input-line:  #c3c9d2;
  --ax-input-hover: #8f98a6;
  /* Fondo de las secciones dentro de un modal: el modal es blanco, las
     secciones gris suave y los campos blancos encima. */
  --ax-section-fill: #f4f6f9;
  --ax-text:      #111827;
  --ax-text-soft: #6b7280;

  --ax-radius:    12px;
  --ax-radius-sm: 8px;
  --ax-gap:       12px;
  --ax-shadow:    0 1px 3px rgba(16, 24, 40, .08);
  --ax-shadow-lg: 0 8px 24px rgba(16, 24, 40, .12);

  /* Alto de la barra de acciones fija en mobile. El contenido reserva este
     espacio abajo para que el último campo no quede tapado. */
  --ax-actionbar-h: 68px;
}

/* El `user-select: none` global de styles.css impide copiar un SKU, un CUIT o
   un número de pedido. En las pantallas del ERP el texto se puede seleccionar. */
.ax-page, .ax-page * {
  user-select: text;
  -webkit-user-select: text;
}

/* ── Estructura de página ────────────────────────────────────────────────── */

.ax-page {
  padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
  max-width: 1400px;
  margin: 0 auto;
  color: var(--ax-text);
}

/* La hamburguesa vive en el header fijo, así que el encabezado de la página no
   necesita dejarle lugar. */
.ax-page-head {
  display: flex;
  flex-direction: column;
  gap: var(--ax-gap);
  margin-bottom: 16px;
}

.ax-page-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--color-titles-container, #061f37);
}

.ax-page-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--ax-text-soft);
  margin: 2px 0 0;
}

.ax-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Barra de herramientas (búsqueda + filtros) ──────────────────────────── */

.ax-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.ax-search {
  position: relative;
  flex: 1;
}

.ax-search input {
  width: 100%;
  height: 44px;
  padding: 0 12px 0 40px;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid var(--ax-input-line);
  border-radius: var(--ax-radius-sm);
  background: var(--ax-surface);
  color: var(--ax-text);
}

.ax-search input:hover { border-color: var(--ax-input-hover); }

.ax-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ax-text-soft);
  font-size: 14px;
  pointer-events: none;
}

/* Los chips bajan de renglón en vez de deslizarse de costado: cortados contra
   el borde, no se sabía que había más opciones a la derecha. */
.ax-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 4px;
  /* Separa los chips de la lista que viene abajo. */
  margin-bottom: 14px;
}

.ax-chip {
  flex-shrink: 0;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ax-line);
  border-radius: 18px;
  background: var(--ax-surface);
  color: var(--ax-text-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.ax-chip.ax-chip-on {
  background: var(--color-btn, #2947ca);
  border-color: var(--color-btn, #2947ca);
  color: #fff;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;          /* objetivo táctil */
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--ax-radius-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}

.ax-btn-primary  { background: var(--color-btn, #2947ca); color: #fff; }
.ax-btn-primary:hover  { background: var(--color-btn-hover, #1b2e85); }

.ax-btn-ghost    { background: var(--ax-surface); color: var(--ax-text); border-color: var(--ax-line); }
.ax-btn-ghost:hover    { background: #f9fafb; }

.ax-btn-danger   { background: var(--ax-danger); color: #fff; }
.ax-btn-danger:hover   { background: #b91c1c; }

.ax-btn-success  { background: var(--ax-ok); color: #fff; }
.ax-btn-success:hover  { background: #15803d; }

.ax-btn[disabled], .ax-btn.ax-busy {
  opacity: .5;
  pointer-events: none;
}

/* Ancho completo: el patrón por defecto para la acción principal en mobile. */
.ax-btn-block { width: 100%; }

.ax-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }

/* Botón flotante para "crear" en listados largos: queda al alcance del pulgar. */
.ax-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--color-btn, #2947ca);
  color: #fff;
  font-size: 22px;
  box-shadow: var(--ax-shadow-lg);
  cursor: pointer;
  z-index: 800;
}

/* ── Tarjetas ────────────────────────────────────────────────────────────── */

.ax-card {
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow);
  padding: 14px;
  margin-bottom: 12px;
}

.ax-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ax-card-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.ax-card-meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--ax-text-soft);
  margin: 2px 0 0;
}

/* ── Píldoras de estado ──────────────────────────────────────────────────── */

.ax-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ax-pill-ok      { background: var(--ax-ok-bg);      color: #15803d; }
.ax-pill-warn    { background: var(--ax-warn-bg);    color: #b45309; }
.ax-pill-danger  { background: var(--ax-danger-bg);  color: #b91c1c; }
.ax-pill-info    { background: var(--ax-info-bg);    color: #1d4ed8; }
.ax-pill-neutral { background: var(--ax-neutral-bg); color: #4b5563; }

/* ── Números ─────────────────────────────────────────────────────────────── */
/* Cantidades, precios, costos y saldos. `tabular-nums` fija el ancho de cada
   dígito para que las columnas de una tabla queden alineadas verticalmente. */
.ax-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
  white-space: nowrap;
}

.ax-num-neg { color: var(--ax-danger); }

/* ── Formularios ─────────────────────────────────────────────────────────── */

.ax-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ax-gap);
}

.ax-field { display: flex; flex-direction: column; gap: 6px; }

.ax-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ax-text);
}

.ax-field label .ax-req { color: var(--ax-danger); margin-left: 2px; }

.ax-field input,
.ax-field select,
.ax-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  /* 16px exactos: con menos, iOS hace zoom automático al enfocar el campo. */
  font-size: 16px;
  font-weight: 400;
  color: var(--ax-text);
  background: var(--ax-surface);
  border: 1px solid var(--ax-input-line);
  border-radius: var(--ax-radius-sm);
  transition: border-color .15s;
}

.ax-field input:hover,
.ax-field select:hover,
.ax-field textarea:hover { border-color: var(--ax-input-hover); }

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

.ax-field input:focus,
.ax-field select:focus,
.ax-field textarea:focus {
  outline: 2px solid var(--color-btn, #2947ca);
  outline-offset: -1px;
  border-color: transparent;
}

/* Estado de error por campo — lo llena el front con los `details` que devuelve
   el errorHandler cuando la validación falla (code: VALIDATION_ERROR). */
.ax-field.ax-invalid input,
.ax-field.ax-invalid select,
.ax-field.ax-invalid textarea {
  border-color: var(--ax-danger);
  background: #fff5f5;
}

/* Sin mensaje no ocupa lugar: el renglón reservado dejaba un hueco entre
   cada campo del formulario. */
/* Un campo que no es inválido todavía pero hay que completar (ej. un costo en
   0 en un borrador de compra). */
.ax-input-alerta {
  border-color: var(--ax-danger) !important;
  background: #fff5f5 !important;
}

.ax-field-error {
  font-size: 12px;
  font-weight: 500;
  color: var(--ax-danger);
}

.ax-field-error:empty { display: none; }

.ax-field-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--ax-text-soft);
}

/* Barra de acciones fija al pie en mobile: guardar/cancelar siempre visibles
   sin tener que scrollear hasta el final de un formulario largo. */
.ax-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--ax-surface);
  border-top: 1px solid var(--ax-line);
  box-shadow: 0 -2px 12px rgba(16, 24, 40, .06);
  z-index: 700;
}

.ax-actionbar .ax-btn { flex: 1; }

/* Aplicar en el contenedor de la página cuando hay .ax-actionbar. */
.ax-has-actionbar { padding-bottom: calc(var(--ax-actionbar-h) + 24px); }

/* ── Listas (patrón principal en mobile) ─────────────────────────────────── */

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

/* Listados principales: en celular una tarjeta debajo de la otra; con más
   ancho, 2 y después 3 por renglón. No va en listas donde importa la
   sangría o el orden de lectura vertical (árbol de categorías, historial de
   eventos). */
@media (min-width: 768px) {
  .ax-list.ax-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (min-width: 1024px) {
  .ax-list.ax-list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ax-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 14px;
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-left: 4px solid var(--ax-neutral);
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* El borde izquierdo codifica el estado: se lee de un vistazo en una lista larga. */
.ax-list-item.ax-s-ok      { border-left-color: var(--ax-ok); }
.ax-list-item.ax-s-warn    { border-left-color: var(--ax-warn); }
.ax-list-item.ax-s-danger  { border-left-color: var(--ax-danger); }
.ax-list-item.ax-s-info    { border-left-color: var(--ax-info); }

.ax-list-body  { flex: 1; min-width: 0; }

/* Varias listas ponen píldoras de estado dentro del título ("Inactivo",
   "Por defecto"). Con nowrap + ellipsis, en un celular la píldora era lo
   primero que se cortaba. Ahora el nombre puede pasar a dos renglones y las
   píldoras bajan si no entran. */
.ax-list-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  overflow-wrap: anywhere;
}

.ax-list-title .ax-pill { flex-shrink: 0; }

/* En negro, no gris: el gris claro no se leía bien (pedido explícito). */
.ax-list-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--ax-text);
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.ax-list-side { text-align: right; flex-shrink: 0; }

/* ── Tablas responsive ───────────────────────────────────────────────────── */
/* En >= 768px es una tabla normal. En mobile cada fila se apila como tarjeta y
   el nombre de la columna sale del atributo `data-label` de cada celda:
     <td data-label="Cantidad" class="ax-num">12</td>                          */

.ax-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ax-surface);
  font-size: 14px;
}

.ax-table th {
  background: var(--color-titles-container, #061f37);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 10px;
  white-space: nowrap;
}

.ax-table td {
  padding: 10px;
  border-bottom: 1px solid var(--ax-line);
  font-weight: 400;
}

/* Título de una columna numérica: a la derecha, igual que sus datos. La clase
   la pone ax-ui.js mirando la primera fila de cada tabla. */
.ax-table th.ax-num { text-align: right; }

.ax-table tbody tr:hover td { background: #f9fafb; }

/* Inputs numéricos dentro de una grilla de carga: sin las flechitas del spinner.
   En una columna angosta se comen la mitad del ancho útil y tapan el número. */
.ax-table input[type="number"]::-webkit-outer-spin-button,
.ax-table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ax-table input[type="number"] {
  -moz-appearance: textfield;
}

@media (max-width: 767.98px) {
  .ax-table thead { display: none; }

  .ax-table, .ax-table tbody, .ax-table tr, .ax-table td { display: block; width: 100%; }

  /* Apilada, cada fila es su propia tarjeta blanca: la tabla no pinta fondo,
     si no quedaba un bloque blanco detrás de las tarjetas sobre el gris. */
  .ax-table { background: transparent; }

  .ax-table tr {
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-radius);
    box-shadow: var(--ax-shadow);
    margin-bottom: 10px;
    padding: 6px 0;
    background: var(--ax-surface);
  }

  /* Bloque con la etiqueta flotando a la izquierda, y no flex: una celda con
     "12 <span>u</span>" o con un nombre + un <div> de detalle tiene varios
     hijos, y con flex + space-between se desparramaban por la fila. Así el
     contenido fluye junto, alineado a la derecha, y los textos largos (email,
     CUIT, SKU) cortan en vez de salirse de la tarjeta. */
  .ax-table td {
    border-bottom: 0;
    padding: 7px 14px;
    text-align: right;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .ax-table td::before {
    content: attr(data-label);
    float: left;
    max-width: 48%;
    margin-right: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ax-text-soft);
    text-align: left;
    overflow-wrap: normal;
  }

  .ax-table td::after { content: ""; display: table; clear: both; }

  .ax-table td:not([data-label])::before { content: none; }

  /* Celdas con un campo editable o una barra: fila flex, el control ocupa el
     espacio que deja la etiqueta. */
  .ax-table td:has(input, select, textarea, .ax-bar, .ax-meter) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .ax-table td:has(input, select, textarea, .ax-bar, .ax-meter)::before {
    float: none;
    margin: 0;
    flex-shrink: 0;
  }
  .ax-table td:has(input, select, textarea, .ax-bar, .ax-meter)::after { content: none; }
  .ax-table td > input,
  .ax-table td > select { flex: 1; min-width: 0; max-width: 180px; }
  .ax-table td > .ax-bar,
  .ax-table td > .ax-meter,
  .ax-table td > .ax-row { flex: 1; }
}

/* En pantallas táctiles los campos dentro de una grilla van a 16px: con
   menos, iOS hace zoom al enfocarlos y descuadra la pantalla. */
@media (pointer: coarse) {
  .ax-table input,
  .ax-table select { font-size: 16px; min-height: 40px; }
}

/* ── Tarjetas de indicador ───────────────────────────────────────────────── */
/* Fila de totales arriba de un listado. En el celular van de a dos por fila
   (y bajan las que no entran): nada queda cortado contra el borde. */

.ax-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.ax-stat {
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  padding: 12px 14px;
  box-shadow: var(--ax-shadow);
}

.ax-stat { min-width: 0; }

.ax-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ax-text-soft);
  margin: 0 0 4px;
}

/* Un importe de ocho cifras en media pantalla: la fuente se achica con el
   ancho y, si aun así no entra, corta en vez de salirse de la tarjeta. */
.ax-stat-value {
  font-size: clamp(16px, 4.6vw, 20px);
  font-weight: 700;
  margin: 0;
  font-variant-numeric: tabular-nums;
  /* Solo corta si el importe no entra ni solo en su renglón (celulares muy
     angostos); el ancho mínimo de las columnas evita llegar a eso. */
  overflow-wrap: break-word;
}

/* Desde tablet las columnas son más anchas: "$ 34.968.500,00" entra entero. */
@media (min-width: 768px) {
  .ax-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.ax-stat-value.ax-alert { color: var(--ax-danger); }

/* ── Visualización de datos ──────────────────────────────────────────────────
   Decisiones tomadas y verificadas con el validador de paletas:

   · Los rankings comparan MAGNITUD, así que usan un solo hue (azul secuencial).
     Una paleta categórica acá sería peor: repartiría colores por posición y el
     color pasaría a significar "puesto 3" en vez de identificar algo.
   · El azul #2a78d6 pasa las seis validaciones sobre fondo blanco (≥3:1).
   · Los estados (entregado / no entregado) SIEMPRE van con ícono y etiqueta.
     Rojo y verde se confunden bajo deuteranopía — medido: ΔE 4.1, muy por
     debajo del piso de 8. El color es refuerzo, nunca el dato.
   · Se evita la dupla warning/serious de la paleta de estado en una misma
     vista: entre sí miden ΔE 13.6 en visión normal, por debajo del piso de 15.

   La interfaz del ERP es solo modo claro, igual que el resto del módulo base.
──────────────────────────────────────────────────────────────────────────────*/

.ax-viz {
  /* Hue secuencial para magnitud. Un solo hue, nunca una rueda de colores. */
  --viz-seq:      #2a78d6;
  --viz-seq-soft: #cde2fb;
  /* Pista y ejes recesivos: son referencia, no dato. */
  --viz-track:    #e1e0d9;
  --viz-muted:    #898781;
  /* Estado: siempre acompañado de ícono + etiqueta. */
  --viz-ok:       #0ca30c;
  --viz-bad:      #d03b3b;
}

/* Barra dentro de una celda de tabla. La tabla ES la vista de datos: la barra
   solo agrega la comparación visual, y el número ya está en su propia columna
   (por eso no se repite encima de la barra). */
.ax-bar {
  display: block;
  height: 8px;
  background: var(--viz-track);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}

.ax-bar > span {
  display: block;
  height: 100%;
  background: var(--viz-seq);
  /* Extremo redondeado del lado del dato, recto contra la línea de base. */
  border-radius: 0 4px 4px 0;
  transition: width .3s ease;
}

/* Barra negativa: un margen bajo cero no puede parecer un logro. */
.ax-bar > span.ax-bar-neg { background: var(--viz-bad); }

/* Medidor de cumplimiento: una razón contra un límite. La marca del 100% es la
   referencia, no un dato, así que va en el gris recesivo. */
.ax-meter {
  position: relative;
  height: 10px;
  background: var(--viz-track);
  border-radius: 5px;
  overflow: hidden;
  min-width: 90px;
}

.ax-meter > span {
  display: block;
  height: 100%;
  background: var(--viz-seq);
  border-radius: 0 5px 5px 0;
}

/* Superó el objetivo: se distingue por tono más oscuro del MISMO hue, no por
   otro color. Cambiar de hue diría "otra cosa", no "más". */
.ax-meter > span.ax-meter-full { background: #184f95; }

/* Píldora de estado. El ícono y el texto son el dato; el color es refuerzo. */
.ax-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ax-status-ok  { color: #0a7a0a; }
.ax-status-bad { color: #b12f2f; }

/* Cifra principal de un panel. Figuras proporcionales, no tabulares: no está
   alineada en columna con nada. */
.ax-hero {
  font-size: clamp(24px, 8vw, 34px);
  overflow-wrap: anywhere;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

@media (min-width: 768px) {
  .ax-hero { font-size: 42px; }
}

/* ── Layout de reportes (.ax-viz) ─────────────────────────────────────────
   Tres planos para que la pantalla no sea una hoja en blanco:
     · la cifra principal en una tarjeta oscura, el ancla de cada reporte;
     · los indicadores con un ícono de color que dice de qué es cada número;
     · las tarjetas con encabezado en franja gris y el contenido en blanco.
   Los colores de los íconos son decoración de interfaz: no codifican datos
   (los datos van en los gráficos, con su paleta validada). */

.ax-viz {
  --rep-borde: #e3e7ee;
  --rep-franja: #f6f7fa;
  --rep-oscuro-1: #1e293b;
  --rep-oscuro-2: #334155;
}

/* Tarjeta con encabezado: la franja gris separa el título del dato. */
.ax-viz .ax-card { border-color: var(--rep-borde); border-radius: 14px; }
.ax-viz .ax-card:has(> .ax-card-head) { padding: 0; overflow: hidden; }
.ax-viz .ax-card > .ax-card-head {
  margin: 0;
  padding: 12px 16px;
  background: var(--rep-franja);
  border-bottom: 1px solid var(--rep-borde);
}
.ax-viz .ax-card > .ax-card-head ~ * { padding-inline: 16px; }
.ax-viz .ax-card > .ax-card-head + * { padding-top: 14px; }
.ax-viz .ax-card > .ax-card-head ~ *:last-child { padding-bottom: 16px; }

.ax-viz .ax-card-title { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.ax-viz .ax-card-title > i {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 9px;
  font-size: 13px;
  color: #2a78d6; background: #e3eefc;
}
.ax-viz .ax-card-head .ax-card-meta { margin-left: 40px; }

/* Tablas de reporte: encabezado claro en vez del azul marino, filas alternas. */
.ax-viz .ax-table th {
  background: #eef1f6;
  color: #475569;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--rep-borde);
}
.ax-viz .ax-table tbody tr:nth-child(even) td { background: #fafbfc; }
.ax-viz .ax-table tbody tr:hover td { background: #f1f5fb; }
@media (max-width: 767.98px) {
  .ax-viz .ax-table tbody tr:nth-child(even) td { background: transparent; }
}

/* Cifra principal: tarjeta oscura con el número en blanco. */
.axviz-hero {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: #e2e8f0;
  background: linear-gradient(135deg, var(--rep-oscuro-1), var(--rep-oscuro-2)) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18) !important;
}
.axviz-hero::after {
  /* Ícono grande de fondo: lo pone cada vista con data-icono. */
  content: attr(data-icono);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -6px;
  bottom: -18px;
  font-size: 110px;
  line-height: 1;
  color: rgba(255, 255, 255, .06);
  pointer-events: none;
}
.axviz-hero .ax-stat-label { color: #94a3b8; }
.axviz-hero .ax-hero { color: #fff; }
.axviz-hero .ax-muted,
.axviz-hero .ax-field-hint { color: #cbd5e1; }
.axviz-hero .ax-strong { color: #fff; }
.axviz-hero .ax-delta {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}
.axviz-hero .ax-delta-up   { color: #4ade80; }
.axviz-hero .ax-delta-down { color: #fca5a5; }
.axviz-hero .ax-delta-flat { color: #cbd5e1; }
.axviz-hero .ax-empty, .axviz-hero .ax-empty h3 { color: #cbd5e1; }

/* Cifra principal + indicadores. En el celular, uno debajo del otro; en
   desktop, la tarjeta oscura a la izquierda y la grilla a la derecha. */
.axviz-resumen { display: grid; gap: 12px; margin-bottom: 16px; }
.axviz-resumen > .ax-card, .axviz-resumen > .ax-stats { margin-bottom: 0; }
@media (min-width: 1100px) {
  .axviz-resumen { grid-template-columns: minmax(320px, 1fr) 2fr; align-items: stretch; }
  .axviz-resumen > .axviz-hero { display: flex; flex-direction: column; justify-content: center; }
  .axviz-resumen > .ax-stats { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-content: start; }
}

/* Con el ícono al lado, un importe de ocho cifras necesita tarjetas más
   anchas para no partirse. */
@media (min-width: 768px) {
  .ax-viz .ax-stats { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); }
}

/* Indicador con ícono. */
.axviz-kpi {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-color: var(--rep-borde);
  border-radius: 14px;
}
.axviz-kpi-icono {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 11px;
  font-size: 15px;
}
.axviz-kpi-texto { min-width: 0; }

/* Celular: el ícono va arriba y el número usa todo el ancho de la tarjeta
   (al costado, "$ 77.457.250,00" se partía a mitad de número). */
@media (max-width: 767.98px) {
  .axviz-kpi { flex-direction: column; gap: 8px; }
  .axviz-kpi-icono { width: 32px; height: 32px; font-size: 13px; border-radius: 9px; }
  .axviz-kpi .ax-stat-value { font-size: clamp(15px, 4.4vw, 19px); overflow-wrap: normal; white-space: nowrap; }
}
.axviz-kpi-nota { margin: 2px 0 0; font-size: 11px; color: var(--ax-text-soft); }

.axviz-tono-azul    .axviz-kpi-icono { color: #2a78d6; background: #e3eefc; }
.axviz-tono-violeta .axviz-kpi-icono { color: #4a3aa7; background: #ecebfa; }
.axviz-tono-verde   .axviz-kpi-icono { color: #0f7a52; background: #e2f4ec; }
.axviz-tono-ambar   .axviz-kpi-icono { color: #b45309; background: #fdf0de; }
.axviz-tono-rojo    .axviz-kpi-icono { color: #b91c1c; background: #fde8e8; }
.axviz-tono-gris    .axviz-kpi-icono { color: #475569; background: #eceff4; }

/* Nota explicativa: celeste tenue con ícono, no una tarjeta blanca más. */
.axviz-nota {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: #eaf2fd;
  color: #1e3a5f;
  font-size: 13px;
  line-height: 1.45;
}
.axviz-nota > i { color: #2a78d6; margin-top: 2px; }
.axviz-nota p { margin: 0; }
.axviz-nota a { color: #1d5fb4; font-weight: 600; }

/* Filtro de fechas: una barra compacta. En desktop, presets y fechas en la
   misma fila. */
.axviz-rango { padding: 12px 14px !important; }
.axviz-rango .ax-filters { margin-bottom: 10px !important; }
.axviz-rango .ax-field label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ax-text-soft); }
@media (min-width: 1100px) {
  .axviz-rango { display: flex; align-items: flex-end; gap: 16px; }
  .axviz-rango .ax-filters { margin-bottom: 0 !important; flex-shrink: 0; padding-bottom: 2px; }
  .axviz-rango .ax-form-grid { flex: 1; gap: 12px; }
  .axviz-rango .ax-field input,
  .axviz-rango .ax-field select { min-height: 40px; padding-block: 6px; }
}

/* ── Gráficos (axviz.lineas / axviz.barras) ─────────────────────────────── */

.axviz-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ax-text-soft);
}
.axviz-leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.axviz-key-linea { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }

.axviz-lienzo { width: 100%; outline: none; touch-action: pan-y; }
.axviz-lienzo:focus-visible { outline: 2px solid var(--color-btn, #2947ca); outline-offset: 4px; border-radius: 6px; }
.axviz-svg { display: block; max-width: 100%; overflow: visible; }

.axviz-grilla  { stroke: #e1e0d9; stroke-width: 1; }
.axviz-base    { stroke: #c3c2b7; stroke-width: 1; }
.axviz-cursor  { stroke: #898781; stroke-width: 1; }
.axviz-banda   { fill: #f0efec; }
.axviz-eje     { font-size: 11px; fill: #898781; font-variant-numeric: tabular-nums; }
.axviz-banda-txt { font-size: 10px; fill: #898781; text-transform: uppercase; letter-spacing: .06em; }
.axviz-etiqueta  { font-size: 12px; font-weight: 700; fill: var(--ax-text); }

.axviz-barras { display: flex; flex-direction: column; gap: 4px; }
.axviz-barra-fila {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 4px;
  border-radius: 8px;
  cursor: default;
  outline: none;
}
.axviz-barra-fila:hover, .axviz-barra-fila:focus-visible { background: #f5f6f8; }
/* Nombres largos ("Pequeños electrodomésticos") parten con guion por sílaba,
   no a mitad de letra. */
.axviz-barra-nombre { font-size: 13px; overflow-wrap: break-word; hyphens: auto; line-height: 1.25; }
.axviz-barra-pista { display: flex; align-items: center; gap: 8px; min-width: 0; }
.axviz-barra {
  height: 18px;
  min-width: 2px;
  background: var(--viz-seq, #2a78d6);
  /* Recto contra la línea de base, redondeado en el extremo del dato. */
  border-radius: 0 4px 4px 0;
  transition: filter .15s;
}
.axviz-barra-fila:hover .axviz-barra, .axviz-barra-fila:focus-visible .axviz-barra { filter: brightness(1.12); }
.axviz-barra-valor { font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.axviz-tabla { margin-top: 10px; font-size: 12px; }
.axviz-tabla summary { cursor: pointer; color: var(--ax-text-soft); min-height: 32px; display: flex; align-items: center; }

.axviz-tip {
  position: fixed;
  z-index: 1300;
  min-width: 150px;
  max-width: min(300px, calc(100vw - 16px));
  padding: 8px 10px;
  background: #fff;
  border: 1px solid rgba(11, 11, 11, .1);
  border-radius: 8px;
  box-shadow: var(--ax-shadow-lg);
  pointer-events: none;
  font-size: 12px;
}
.axviz-tip-titulo { margin: 0 0 4px; font-weight: 700; color: var(--ax-text-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.axviz-tip-fila { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.axviz-tip-fila strong { color: var(--ax-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.axviz-tip-fila span:last-child { color: var(--ax-text-soft); }
.axviz-tip-key { width: 12px; height: 3px; border-radius: 2px; flex-shrink: 0; }

/* Variación contra el período anterior. */
.ax-delta { font-size: 12px; font-weight: 600; white-space: nowrap; }
.ax-delta-up   { color: #006300; }
.ax-delta-down { color: #b12f2f; }
.ax-delta-flat { color: var(--viz-muted); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
/* Diálogo centrado en todos los tamaños, con 12px de margen a los costados
   en el celular. Se abre agregando la clase `ax-open`. */

.ax-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  /* Arriba deja libre el header de la app: el modal se centra en el espacio
     que queda debajo y nunca lo tapa. */
  padding: calc(var(--ax-top, 52px) + 12px) 12px max(12px, env(safe-area-inset-bottom, 0px));
  background: rgba(16, 24, 40, .55);
}

.ax-modal.ax-open { display: flex; }

/* Alto máximo: 78% de la pantalla. Un detalle largo scrollea por dentro en
   vez de ocupar todo el alto; se sigue viendo la página detrás. */
.ax-modal-box {
  background: var(--ax-surface);
  width: 100%;
  max-height: min(78vh, 100%);
  max-height: min(78dvh, 100%);
  display: flex;
  flex-direction: column;
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow-lg);
  overflow: hidden;
  animation: axPop .18s ease-out;
}

@keyframes axPop {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ax-modal-box { animation: none; }
}

/* Tres planos para que el modal no sea todo blanco:
     · encabezado gris oscuro, el mismo del header de la app;
     · cuerpo gris claro;
     · tarjetas, tablas y campos en blanco encima.
   Así se distingue a simple vista qué es un bloque de datos y qué es fondo. */
.ax-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  /* A mitad de camino entre el gris del header de la app (#4E4E4E) y el
     blanco. Con un fondo así de claro el texto blanco no se lee: título y X
     van en gris oscuro. */
  background: #D2D2D2;
  color: #1f2937;
  flex-shrink: 0;
}

.ax-modal-title { font-size: 16px; font-weight: 700; margin: 0; color: #1f2937; }

.ax-modal-close {
  background: none;
  border: 0;
  border-radius: 10px;
  font-size: 26px;
  line-height: 1;
  color: rgba(31, 41, 55, .75);
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.ax-modal-close:hover { color: #111827; background: rgba(0, 0, 0, .08); }
.ax-modal-close:focus-visible { outline: 2px solid var(--color-btn, #2947ca); outline-offset: -2px; }

/* El cuerpo es lo único que scrollea: cabecera y botones quedan siempre a la vista. */
.ax-modal-body {
  padding: 14px;
  background: #f1f3f6;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
}

/* Bloques de datos de solo lectura dentro de un detalle (Proveedor, Depósito,
   Total…): son una .ax-form-grid sin campos editables. Van en tarjeta blanca
   y de a dos columnas, que en el celular ahorra la mitad del alto. */
.ax-modal-body .ax-form-grid:not(:has(.ax-field)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding: 12px 14px;
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
}
.ax-modal-body .ax-form-grid:not(:has(.ax-field)) p { margin: 0; overflow-wrap: anywhere; }
.ax-modal-body .ax-form-grid:not(:has(.ax-field)) .ax-stat-label { margin-bottom: 2px; }

/* Las tablas del detalle, como tarjeta blanca también en desktop. */
.ax-modal-body .ax-table { border-radius: var(--ax-radius); overflow: hidden; }

/* Los títulos de sección dentro del cuerpo ("Renglones", "Recepciones"). */
.ax-modal-body > h3 { color: var(--ax-text-soft); text-transform: uppercase; letter-spacing: .04em; font-size: 12px !important; }

/* Con tres acciones ("Editar · Borrar · Enviar al proveedor") no entran en
   una fila de celular: bajan a otra en vez de partir cada texto en dos. */
.ax-modal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ax-surface);
  border-top: 1px solid var(--ax-line);
  flex-shrink: 0;
}

.ax-modal-foot .ax-btn { flex: 1 1 auto; }

/* Banda de error del formulario, para los mensajes que no son de un campo
   puntual (ej. "Ya existe un producto con ese SKU"). */
.ax-form-error {
  display: none;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--ax-danger-bg);
  color: #b91c1c;
  border-radius: var(--ax-radius-sm);
  font-size: 13px;
  font-weight: 500;
}

.ax-form-error.ax-open { display: block; }

/* ── Estado vacío ────────────────────────────────────────────────────────── */

.ax-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ax-text-soft);
}

.ax-empty i { font-size: 40px; opacity: .35; margin-bottom: 12px; display: block; }
.ax-empty h3 { font-size: 15px; font-weight: 600; color: var(--ax-text); margin: 0 0 6px; }
.ax-empty p  { font-size: 13px; font-weight: 400; margin: 0 0 18px; }

/* ── Utilidades ──────────────────────────────────────────────────────────── */

.ax-row     { display: flex; align-items: center; gap: 8px; }
.ax-row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ax-spacer  { flex: 1; }
.ax-muted   { color: var(--ax-text-soft); font-weight: 400; }
.ax-strong  { font-weight: 700; }
.ax-hide    { display: none !important; }

/* Visible solo en mobile / solo en desktop. */
.ax-only-mobile  { display: block; }
.ax-only-desktop { display: none; }

/* Un scrollIntoView a una sección no la deja escondida bajo el header fijo. */
.ax-page [id] { scroll-margin-top: calc(var(--ax-top, 52px) + 8px); }

/* ── Solo celular ────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  /* Los botones de ícono de cada fila (editar, borrar, ver, llamar) y los
     chips de filtro llegan a 44px: con 36px se tocaba el de al lado. */
  .ax-btn-sm { min-height: 44px; min-width: 44px; }
  .ax-chip { height: 40px; }

  /* El FAB flota sobre el final de la lista: se deja lugar para que no tape
     el último renglón ni el botón "Siguiente" del paginador. */
  .ax-page:has(> .ax-fab) {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  /* Con la barra de acciones visible (ej. "Guardar (3)" en Listas de
     Precios), el FAB sube para no taparle el botón. */
  .ax-actionbar:not(.ax-hide) ~ .ax-fab {
    bottom: calc(var(--ax-actionbar-h) + 16px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Breakpoint tablet / desktop ─────────────────────────────────────────── */

@media (min-width: 768px) {
  .ax-page { padding: 24px; }

  .ax-page-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .ax-page-title { font-size: 24px; }

  .ax-toolbar { flex-direction: row; align-items: center; }
  .ax-search  { max-width: 380px; }

  .ax-form-grid { grid-template-columns: repeat(2, 1fr); }
  .ax-field-wide { grid-column: 1 / -1; }

  /* En desktop las acciones vuelven al flujo normal del documento. */
  /* En desktop la barra es una tarjeta al pie del contenido, con aire a los
     costados: sin padding lateral el total y los botones quedaban pegados al
     borde. */
  .ax-actionbar {
    position: static;
    align-items: center;
    justify-content: flex-end;
    margin-top: 16px;
    padding: 14px 18px;
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-radius);
    box-shadow: var(--ax-shadow);
  }
  .ax-actionbar .ax-btn { flex: 0 0 auto; min-width: 130px; }
  .ax-has-actionbar { padding-bottom: 24px; }

  .ax-fab { display: none; }

  .ax-only-mobile  { display: none; }
  .ax-only-desktop { display: block; }
  /* Misma especificidad que .ax-page-actions y viene después: sin esto la
     fila de botones del encabezado perdía el flex. */
  .ax-page-actions.ax-only-desktop { display: flex; }

  /* Más aire alrededor del diálogo cuando hay lugar. */
  .ax-modal { padding: calc(var(--ax-top, 52px) + 24px) 24px 24px; }
  .ax-modal-box {
    max-width: 720px;
    border-radius: var(--ax-radius);
  }
  .ax-modal-foot { justify-content: flex-end; }
  .ax-modal-foot .ax-btn { flex: 0 0 auto; min-width: 130px; }
}

@media (min-width: 1200px) {
  .ax-form-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Placeholders ────────────────────────────────────────────────────────── */
/* Gris clarito: es un ejemplo, no un valor cargado, y no se tiene que
   confundir con uno. */
input::placeholder,
textarea::placeholder {
  color: #b8bec8;
  opacity: 1;
}

/* ── Campo de importe con "$" adelante ───────────────────────────────────── */
/* <div class="ax-money"><input data-monto="2"></div>. El "$" no forma parte
   del valor: ax.monto() sigue leyendo solo el número. */
.ax-money { position: relative; }

.ax-money::before {
  content: "$";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--ax-text-soft);
  pointer-events: none;
}

.ax-field .ax-money input { padding-left: 28px; }

/* ── Modal grande (formularios con muchos campos) ────────────────────────── */
/* En mobile es igual que cualquier modal. En desktop se ensancha para que
   entren 3 campos por renglón y 4 en las tarjetas de contactos/direcciones. */
@media (min-width: 768px) {
  .ax-form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ax-modal-lg .ax-modal-box { max-width: 1040px; }
  .ax-modal-lg .ax-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ax-modal-lg .ax-form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Formularios compactos en desktop ────────────────────────────────────── */
/* Los 44px de alto y la letra de 16px son por el celular (dedo e iOS, que
   hace zoom con menos de 16px). Con mouse se ven enormes: desde 1024px los
   campos y botones bajan a un tamaño de escritorio. */
@media (min-width: 1024px) {
  .ax-form-grid { gap: 10px 14px; }
  .ax-field { gap: 4px; }
  .ax-field label { font-size: 12px; }

  .ax-field input,
  .ax-field select,
  .ax-field textarea {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 14px;
  }

  .ax-field textarea { min-height: 64px; }

  .ax-money::before { left: 10px; font-size: 14px; }
  .ax-field .ax-money input { padding-left: 24px; }

  /* Checkbox dentro de la grilla ("Activo"): alineado con los campos de al lado. */
  .ax-field .ax-check { min-height: 36px; font-size: 14px; font-weight: 400; }

  .ax-btn    { min-height: 38px; font-size: 14px; }
  .ax-btn-sm { min-height: 32px; padding: 0 10px; }

  .ax-modal-body { padding: 16px 18px; }
}

/* ── Secciones de un formulario ──────────────────────────────────────────── */
/* Título gris en mayúsculas (como los h3 del cuerpo del modal) y debajo UNA
   tarjeta blanca (.ax-card) con los campos. Si la sección tiene varios
   renglones (contactos, direcciones), van en la misma tarjeta separados por
   una línea, no cada uno en su propia tarjeta. */
.ax-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  margin: 4px 0 8px;
}

.ax-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ax-text);
}

.ax-section-item + .ax-section-item {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ax-line);
}

.ax-section-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

/* ── Modal blanco con secciones grises ───────────────────────────────────── */
/* Al revés que en la página (fondo gris, tarjetas blancas): dentro del modal
   el fondo es blanco y cada sección es un bloque gris suave, así los campos
   blancos se recortan contra la sección. */
.ax-modal-body { background: var(--ax-surface); }

.ax-modal-body .ax-card,
.ax-modal-body .ax-form-grid:not(:has(.ax-field)) {
  background: var(--ax-section-fill);
  box-shadow: none;
}

/* Renglón de resumen dentro de una sección (un contacto, una dirección): el
   detalle se edita en un modal aparte que se abre encima. */
.ax-section-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Dos secciones lado a lado (ej. Contactos | Direcciones de entrega). En
   mobile, una debajo de la otra. */
@media (min-width: 1024px) {
  .ax-section-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    align-items: start;
  }

  /* El modal grande usa todo el alto debajo del header de la app (el 78% del
     resto de los modales lo obligaba a scrollear). */
  .ax-modal-lg .ax-modal-box {
    max-height: calc(100vh - var(--ax-top, 52px) - 24px);
    max-height: calc(100dvh - var(--ax-top, 52px) - 24px);
  }
}

/* ── Botones de ícono (lápiz, tacho, +, ojo, llamar…) ────────────────────── */
/* Cuadrado gris oscuro con el ícono en blanco. Se reconocen por ser
   .ax-btn-ghost.ax-btn-sm con `title` (todo botón de solo ícono lleva title
   para el tooltip); los que tienen texto ("Anterior", "Usar mi ubicación")
   no lo llevan y quedan como estaban. */
.ax-btn-ghost.ax-btn-sm[title] {
  background: #4E4E4E;
  border-color: #4E4E4E;
  color: #fff;
}

.ax-btn-ghost.ax-btn-sm[title]:hover {
  background: #2f2f2f;
  border-color: #2f2f2f;
}

.ax-btn-ghost.ax-btn-sm[title]:disabled { opacity: .45; }

/* Tamaño de los botones de ícono: la mitad del botón chico normal. En mobile
   el cuadrado se ve de 22px pero el área de toque sigue siendo de 44px (el
   ::after invisible), si no se tocaba el botón de al lado. */
.ax-btn-ghost.ax-btn-sm[title] {
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 5px;
  font-size: 11px;
}

@media (max-width: 1023.98px) {
  .ax-btn-ghost.ax-btn-sm[title]::after {
    content: "";
    position: absolute;
    inset: -11px;
  }

  /* Separación extra entre botones vecinos: así las áreas de toque de 44px no
     se pisan (22px de botón + 22px entre uno y otro). */
  .ax-btn-ghost.ax-btn-sm[title] + .ax-btn-ghost.ax-btn-sm[title] { margin-left: 14px; }
}

@media (min-width: 1024px) {
  .ax-btn-ghost.ax-btn-sm[title] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 10px;
  }
}

/* Tarjetas que se abren al tocarlas (role="button"): se levantan al pasar
   el mouse para que se note que son clickeables. */
.ax-list-item[role="button"] { transition: box-shadow .15s, transform .15s; }
.ax-list-item[role="button"]:hover { box-shadow: var(--ax-shadow-lg); transform: translateY(-1px); }
.ax-list-item[role="button"]:focus-visible { outline: 2px solid var(--color-btn, #2947ca); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ax-list-item[role="button"]:hover { transform: none; }
}

/* ── Catálogo tipo tienda (Cargar Pedido) ────────────────────────────────── */
/* Mobile-first: 2 tarjetas por renglón en el celular, 3 en tablet, 4 en
   desktop. Foto arriba, datos y botón abajo; el botón queda pegado al pie
   para que todos los de un renglón estén a la misma altura. */
.ax-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 768px)  { .ax-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1024px) { .ax-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ax-shop-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.ax-shop-card {
  display: flex;
  flex-direction: column;
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}

.ax-shop-card:hover { box-shadow: var(--ax-shadow-lg); transform: translateY(-2px); }
.ax-shop-card:focus-visible { outline: 2px solid var(--color-btn, #2947ca); outline-offset: 2px; }
.ax-shop-card.is-en-pedido { border-color: var(--ax-ok); box-shadow: 0 0 0 1px var(--ax-ok); }
.ax-shop-card.is-no-vendible { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .ax-shop-card:hover { transform: none; }
}

.ax-shop-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid var(--ax-line);
  /* overflow:hidden anula el alto mínimo por contenido: sin esto una foto
     alta estiraba el recuadro y el aspect-ratio dejaba de valer. */
  overflow: hidden;
}

.ax-shop-foto img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
}
.ax-shop-foto > i { font-size: 36px; color: #c3c9d2; }

.ax-shop-badge { position: absolute; top: 8px; left: 8px; z-index: 1; }

.ax-shop-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding: 10px 12px 12px;
}

.ax-shop-marca {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ax-text);
}

/* Nombre en hasta dos renglones: tarjetas parejas aunque el nombre sea largo. */
.ax-shop-nombre {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ax-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.ax-shop-precio { margin: 6px 0 0; font-size: 18px; font-weight: 700; color: var(--ax-text); }
.ax-shop-iva,
.ax-shop-stock  { margin: 0; font-size: 12px; color: var(--ax-text); }

/* El botón se va al pie de la tarjeta (margin-top:auto) y lo que tiene arriba
   le deja 10px de aire. */
.ax-shop-cta { margin-top: auto; }
.ax-shop-body > :nth-last-child(2) { margin-bottom: 10px; }
.ax-shop-body .ax-pill { align-self: flex-start; max-width: 100%; white-space: normal; }

/* ── Detalle del producto: carrusel + datos ──────────────────────────────── */
/* Mobile: carrusel arriba y datos abajo. Desktop: lado a lado. */
.ax-modal-producto .ax-producto { display: flex; flex-direction: column; gap: 14px; }

@media (min-width: 768px) {
  .ax-modal-producto .ax-modal-box { max-width: 880px; }
  .ax-modal-producto .ax-producto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
}

.ax-producto-nombre { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: var(--ax-text); }
.ax-producto-sku    { margin: 2px 0 0; font-size: 12px; color: var(--ax-text); }
.ax-producto-info .ax-shop-precio { font-size: 22px; margin-top: 10px; }

.ax-carrusel {
  position: relative;
  background: #fff;
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  overflow: hidden;
}

.ax-carrusel-pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ax-carrusel-pista::-webkit-scrollbar { display: none; }

.ax-carrusel-pista img {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  padding: 16px;
  scroll-snap-align: center;
}

.ax-carrusel-vacio {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #c3c9d2;
}

.ax-carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(78, 78, 78, .85);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ax-carrusel-flecha:hover { background: #2f2f2f; }
.ax-carrusel-ant { left: 8px; }
.ax-carrusel-sig { right: 8px; }

.ax-carrusel-puntos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

/* El punto se ve de 8px pero se toca en 24px. */
.ax-carrusel-puntos button {
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ax-carrusel-puntos button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c3c9d2;
}
.ax-carrusel-puntos button.is-on::before { background: var(--color-btn, #2947ca); }

/* ── Cargar Pedido: cabecera compacta ────────────────────────────────────── */
/* Con el cliente elegido, la tarjeta del paso 1 queda en un renglón: nombre y
   CUIT arriba, dirección · depósito · pago · crédito abajo, y a la derecha los
   botones de ubicación y de cambiar. */
.ax-pedido-resumen {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ax-pedido-resumen-icono { font-size: 18px; color: var(--ax-text); flex-shrink: 0; }
.ax-pedido-resumen-datos { flex: 1; min-width: 0; }

.ax-pedido-resumen-nombre {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ax-text);
  overflow-wrap: anywhere;
}

.ax-pedido-resumen-sub {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--ax-text);
  overflow-wrap: anywhere;
}

/* La barra plegada es una tarjeta de un renglón: poco padding. */
.ax-card.ax-pedido-resumen { padding: 10px 14px; margin-bottom: 0; }

/* Paso 1: "Registrar mi ubicación" a la derecha del buscador de clientes. */
.ax-pedido-geo { gap: 8px; flex-wrap: wrap; }
@media (min-width: 768px) { .ax-pedido-geo { margin-left: auto; flex-shrink: 0; } }

/* Ubicación ya registrada: el botón de ícono pasa a verde. */
.ax-btn-ghost.ax-btn-sm[title].ax-btn-ok { background: var(--ax-ok); border-color: var(--ax-ok); }

/* Buscador + categoría + Catálogo/Mi pedido en la misma fila desde tablet. */
.ax-pedido-toolbar .ax-filters { margin-bottom: 0; padding-bottom: 0; }
.ax-pedido-toolbar { margin-bottom: 14px; }

@media (min-width: 768px) {
  .ax-pedido-toolbar .ax-filters { margin-left: auto; flex-wrap: nowrap; }
}

/* Mi pedido: foto chica + nombre + código. */
.ax-pedido-prod { display: flex; align-items: center; gap: 10px; }
.ax-pedido-prod img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--ax-line);
  border-radius: 6px;
  flex-shrink: 0;
}
.ax-pedido-prod > i { width: 40px; text-align: center; font-size: 18px; color: #c3c9d2; flex-shrink: 0; }

/* Cargar Pedido, paso 1: solo el cliente (depósito automático y forma de
   pago en la vista Pedido). No hace falta que el select cruce toda la pantalla. */
@media (min-width: 768px) {
  .ax-pedido-cliente-grid { grid-template-columns: minmax(0, 560px); }
}

/* Pedido: "Entrega y pago" en dos columnas desde tablet (la dirección más
   ancha que la forma de pago). */
@media (min-width: 768px) {
  .ax-pedido-cierre { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* Tarjeta de producto 20% más baja: foto 5:4 en vez de cuadrada, menos aire
   y botón chico. */
.ax-shop-foto { aspect-ratio: 5 / 4; }
.ax-shop-foto img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
.ax-shop-body { padding: 8px 10px 10px; }
.ax-shop-nombre { font-size: 13px; }
.ax-shop-precio { margin-top: 4px; font-size: 16px; }
.ax-shop-iva,
.ax-shop-stock { font-size: 11px; }
.ax-shop-body > :nth-last-child(2) { margin-bottom: 8px; }
.ax-shop-cta { min-height: 34px; font-size: 13px; }

/* Botón secundario: borde y texto en el azul de la suite. Para la acción
   alternativa al lado de la principal (ej. "Guardar borrador" junto a
   "Confirmar"); el ghost blanco se veía como desactivado. */
.ax-btn-outline {
  background: var(--ax-surface);
  color: var(--color-btn, #2947ca);
  border: 1px solid var(--color-btn, #2947ca);
  font-weight: 600;
}
.ax-btn-outline:hover { background: #eef1fc; }
.ax-btn-outline:active { background: #dfe5fa; }

/* Texto que cambia según el ancho, dentro de una línea (ej. "Borrador" en el
   celular y "Guardar borrador" en desktop). */
.ax-solo-desktop { display: none; }
@media (min-width: 768px) {
  .ax-solo-desktop { display: inline; }
  .ax-solo-mobile  { display: none; }
}

/* ── Fotos del producto (formulario) ─────────────────────────────────────── */
/* Dos espacios lado a lado (también en el celular: son chicos). Vacío: caja
   punteada con "Subir foto". Con foto: la foto entera y debajo cambiar/quitar. */
.ax-fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 420px;
}

.ax-foto-slot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.ax-foto-titulo { margin: 0; font-size: 12px; font-weight: 600; color: var(--ax-text); }

.ax-foto-caja {
  aspect-ratio: 4 / 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: var(--ax-surface);
  border: 2px dashed var(--ax-input-line);
  border-radius: var(--ax-radius-sm);
  color: var(--ax-text);
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
}

.ax-foto-caja i { font-size: 22px; }
.ax-foto-caja:hover { border-color: var(--color-btn, #2947ca); color: var(--color-btn, #2947ca); }
.ax-foto-caja:focus-visible { outline: 2px solid var(--color-btn, #2947ca); outline-offset: 2px; }
.ax-foto-caja:disabled { cursor: wait; }

.ax-foto-caja.con-foto { border-style: solid; border-width: 1px; border-color: var(--ax-line); }
.ax-foto-caja img { width: 100%; height: 100%; object-fit: contain; }

.ax-foto-acciones { gap: 8px; }

/* Filas de tabla y tarjetas grandes que se abren al tocarlas (Productos,
   Equipos de Venta): mismo aviso visual que las tarjetas de listado. */
.ax-table tbody tr[role="button"] { cursor: pointer; }
.ax-table tbody tr[role="button"]:focus-visible { outline: 2px solid var(--color-btn, #2947ca); outline-offset: -2px; }

.ax-card[role="button"] { cursor: pointer; transition: box-shadow .15s; }
.ax-card[role="button"]:hover { box-shadow: var(--ax-shadow-lg); }
.ax-card[role="button"]:focus-visible { outline: 2px solid var(--color-btn, #2947ca); outline-offset: 2px; }

/* Texto solo para lectores de pantalla (ej. la etiqueta de un campo cuyo
   título ya lo da la sección). */
.ax-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Secciones lado a lado dentro del modal grande: cada mitad lleva 2 columnas
   de campos (con 3 quedaban apretados). */
@media (min-width: 1024px) {
  .ax-modal-lg .ax-section-cols .ax-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Modal grande en desktop: secciones más juntas para que el formulario
   entre sin scroll en una notebook (1366×768). */
@media (min-width: 1024px) {
  .ax-modal-lg .ax-section-head { min-height: 24px; margin: 0 0 6px; }
  .ax-modal-lg .ax-card { margin-bottom: 10px; padding: 12px 14px; }
  .ax-modal-lg .ax-field textarea { min-height: 52px; }
}

/* Campo que ocupa 2 columnas de la grilla (ej. Nombre en Productos). En
   mobile la grilla tiene una sola columna y no hace falta. */
@media (min-width: 768px) {
  .ax-field-span2 { grid-column: span 2; }
}

/* En el modal grande de desktop, las cajas de foto más bajas (16:10): con
   4:3 empujaban el formulario de Productos y aparecía scroll. */
@media (min-width: 1024px) {
  .ax-modal-lg .ax-foto-caja { aspect-ratio: 16 / 10; }
}

/* Tres secciones en un renglón (Productos: Precio | Stock | Fotos). */
@media (min-width: 1024px) {
  .ax-section-cols.ax-section-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tarjeta que es una lista de renglones (ej. Integrantes de un equipo): sin
   padding propio, cada renglón trae el suyo; el último sin línea abajo. */
.ax-card.ax-card-lista { padding: 0; overflow: hidden; }
.ax-card-lista-nota { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--ax-line); }
.ax-card-lista label:last-child { border-bottom: 0 !important; }

/* Con muchas filas la lista scrollea por dentro y no estira el modal. */
@media (min-width: 1024px) {
  .ax-modal-lg .ax-card-lista #eqf-miembros { max-height: 360px; overflow-y: auto; }
}

/* ── Sistema de botones ──────────────────────────────────────────────────────
   · ax-btn-primary         azul lleno: la acción principal (Guardar, Confirmar,
                            Entregar, Recibir).
   · ax-btn-outline         borde y texto azul: acciones secundarias (Editar,
                            Anterior/Siguiente, Etiquetas, Usar mi ubicación).
   · ax-btn-ghost           neutro: salir sin hacer nada (Cancelar, Cerrar,
                            Descartar). Con title y .ax-btn-sm = botón de ícono.
   · ax-btn-danger-outline  borde y texto rojo: borra o anula (Borrar,
                            Cancelar pedido, Quitar renglón).
   · ax-btn-danger          rojo lleno: SOLO la confirmación dentro de un
                            diálogo que pregunta si borrar/anular.
   El verde (ax-btn-success) ya no se usa: las acciones principales van en
   azul como en el resto de la suite. */

/* Neutro: borde visible y texto oscuro (antes casi no se distinguía y
   parecía desactivado). */
.ax-btn-ghost {
  border-color: var(--ax-input-line);
  font-weight: 600;
}
.ax-btn-ghost:hover { background: #f3f5f8; border-color: var(--ax-input-hover); }
.ax-btn-ghost:active { background: #e9edf2; }

.ax-btn-danger-outline {
  background: var(--ax-surface);
  color: var(--ax-danger);
  border: 1px solid var(--ax-danger);
  font-weight: 600;
}
.ax-btn-danger-outline:hover { background: #fef2f2; }
.ax-btn-danger-outline:active { background: #fee2e2; }

/* Deshabilitado, para todos: se ve apagado y no reacciona al mouse. */
.ax-btn:disabled,
.ax-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ── Diálogo de confirmación / aviso (ax.confirmar, ax.avisar) ───────────── */
/* Reemplaza a confirm()/alert() del navegador. Angosto y centrado; ícono de
   color según el tono; en mobile los botones van a lo ancho como en el resto
   de los modales. */
.ax-dialogo .ax-modal-box { max-width: 440px; }
.ax-dialogo .ax-modal-body { text-align: center; padding: 22px 20px 16px; }

.ax-dialogo-icono { font-size: 40px; margin-bottom: 10px; }
.ax-dialogo-pregunta { color: var(--color-btn, #2947ca); }
.ax-dialogo-peligro,
.ax-dialogo-error    { color: var(--ax-danger); }
.ax-dialogo-exito    { color: var(--ax-ok); }
.ax-dialogo-info     { color: var(--color-btn, #2947ca); }

.ax-dialogo-titulo { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--ax-text); }
.ax-dialogo-mensaje { font-size: 14px; color: var(--ax-text); line-height: 1.45; }
.ax-dialogo-mensaje p { margin: 0 0 6px; }
.ax-dialogo-mensaje p:last-child { margin-bottom: 0; }

/* Resumen en renglones (ej. confirmar pedido): dato a la izquierda, valor a la
   derecha, en un bloque gris como las secciones de los modales. */
.ax-dialogo-mensaje .ax-dialogo-dato {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  text-align: left;
  background: var(--ax-section-fill);
  border-bottom: 1px solid var(--ax-line);
}
.ax-dialogo-mensaje .ax-dialogo-dato:first-child { border-radius: var(--ax-radius-sm) var(--ax-radius-sm) 0 0; }
.ax-dialogo-mensaje .ax-dialogo-dato:last-child { border-bottom: 0; border-radius: 0 0 var(--ax-radius-sm) var(--ax-radius-sm); font-size: 16px; }
.ax-dialogo-dato strong { text-align: right; overflow-wrap: anywhere; }

.ax-dialogo .ax-modal-foot { justify-content: center; }
.ax-dialogo .ax-modal-foot .ax-btn[hidden] { display: none; }

/* Ajuste / transferencia de stock: tarjeta con el producto y el saldo. */
.ax-stock-producto-nombre { margin: 0; font-size: 14px; color: var(--ax-text); }
.ax-stock-saldo { margin: 6px 0 0; font-size: 14px; color: var(--ax-text); }
.ax-stock-saldo-ok  { color: var(--ax-ok); font-weight: 700; margin-left: 4px; }
.ax-stock-saldo-neg { color: var(--ax-danger); font-weight: 700; margin-left: 4px; }

/* Bloque de filtros de un listado (ej. Movimientos de Stock). Mobile: dos
   campos por renglón y el botón abajo a lo ancho. Desktop: todo en una fila. */
.ax-filtros-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
}
.ax-filtros-acciones { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.ax-filtros-acciones .ax-btn { width: 100%; }

@media (min-width: 1024px) {
  .ax-filtros-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
  .ax-filtros-acciones { grid-column: auto; }
  .ax-filtros-acciones .ax-btn { width: auto; min-height: 36px; }
}

/* Orden de compra: resultados del buscador de productos dentro de la tarjeta
   de Renglones (lista blanca que scrollea) y tabla de recepción. */
.ax-oc-resultados {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 12px;
  background: var(--ax-surface);
  border: 1px solid var(--ax-input-line);
  border-radius: var(--ax-radius-sm);
}
.ax-r-lineas { margin-bottom: 12px; }
/* Buscador dentro de una tarjeta (ej. Renglones de la OC): a todo el ancho;
   el max-width de 380px es para la barra de los listados. */
.ax-card > .ax-search { max-width: none; }

/* Armar envío: con muchos pedidos pendientes la lista scrollea por dentro y
   no estira el modal (desktop). */
@media (min-width: 1024px) {
  .ax-modal-lg .ax-ev-pendientes { max-height: 420px; overflow-y: auto; padding-right: 4px; }
}

/* ── Fecha: a mano o con calendario (ax.mejorarFechas) ───────────────────── */
/* Campo de texto dd/mm/aaaa (teclado numérico) y, a la derecha, el ícono de
   calendario. El input date real queda invisible justo encima del ícono:
   tocar el ícono abre el calendario nativo; tocar el texto, el teclado. */
.ax-fecha { position: relative; }
.ax-field .ax-fecha input[type="text"] { padding-right: 44px; }
.ax-field .ax-fecha input.ax-fecha-mal { border-color: var(--ax-danger); background: #fff5f5; }

.ax-fecha-icono {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-btn, #2947ca);
  pointer-events: none;
}

.ax-field .ax-fecha input.ax-fecha-nativa {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}