/* =========================================================
   AXIOMA LAYOUT SYSTEM v7.0
   Clases de layout y componentes custom AXIOMA.
   Colores base los maneja AdminDashboardTheme.cs.
   ========================================================= */

/* =========================================================
   1. BASE
   ========================================================= */

html {
  font-family: var(--ax-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: var(--ax-scroll-behavior, smooth);
}

body {
  background-color: var(--ax-bg-app);
  color: var(--ax-text-primary);
  font-size: var(--ax-font-size-base);
  font-weight: var(--ax-font-weight-body); /* 400 — Inter calibrada (Alternativa A) */
  line-height: var(--ax-line-height-body); /* 1.35 — densidad OpenRouter */
  font-feature-settings: var(--ax-font-features-ui); /* liga/calt — fix de Chrome para Inter */
}

/* Alternativa A · features de datos: cifras tabulares, cero rayado y
   desambiguación I/l/1 · 0/O en códigos e importes. */
.mono-input .mud-input-slot,
.mono-input input,
.cell-numeric,
.col-amount,
.ax-stat-val.mono,
.erp-table {
  font-feature-settings: var(--ax-font-features-data);
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 1.5px solid color-mix(in srgb, var(--ax-primary) 65%, transparent);
  outline-offset: 1px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* =========================================================
   BOTONES — tamaño por defecto de todos los .mud-button
   Igual al .button de referencia (✎ Editar): padding 9px 14px.
   Las reglas específicas (ej. AppBar) sobrescriben esta base.
   ========================================================= */
.mud-button {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--ax-font-size-base); /* 13px */
  font-weight: 600;
  line-height: 1.4285;
  padding: 9px 14px;
  border-radius: var(--ax-radius-sm);
}

/* =========================================================
   2. CARDS
   ========================================================= */

.card,
.collapsible-section {
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow-sm);
  transition: all var(--ax-transition-base);
  overflow: hidden;
}

.card {
  padding: 12px 14px 6px 14px;
}

.card:hover {
  box-shadow: var(--ax-shadow);
  border-color: var(--ax-gray-300);
}

.card-glass {
  background: color-mix(in srgb, var(--ax-bg-card) 85%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--ax-bg-card) 50%, transparent);
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow-sm);
  overflow: hidden;
}

.card-elevated {
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-lg);
  box-shadow: var(--ax-shadow-md);
  overflow: hidden;
}

.card-highlight {
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  border-left: 3px solid var(--ax-primary);
}

/* =========================================================
   4. BOTONES CUSTOM
   ========================================================= */

.btn-primary {
  background: var(--ax-primary);
  color: var(--ax-primary-contrast);
  border-radius: var(--ax-radius-sm);
  font-weight: 500;
  transition: all var(--ax-transition-fast);
  box-shadow: var(--ax-shadow-xs);
}

.btn-primary:hover {
  background: var(--ax-primary-hover);
  box-shadow: var(--ax-shadow-primary);
  transform: translateY(-1px);
}

.btn-primary:active {
  background: var(--ax-primary-700);
  transform: translateY(0);
}

.btn-secondary {
  background: var(--ax-gray-100);
  color: var(--ax-gray-700);
  border: 1px solid var(--ax-gray-300);
  border-radius: var(--ax-radius-sm);
  font-weight: 500;
  transition: all var(--ax-transition-fast);
}

.btn-secondary:hover {
  background: var(--ax-gray-200);
  color: var(--ax-gray-900);
  border-color: var(--ax-gray-400);
}

.btn-ghost {
  background: transparent;
  color: var(--ax-gray-600);
  border: none;
  font-weight: 500;
  transition: all var(--ax-transition-fast);
}

.btn-ghost:hover {
  color: var(--ax-gray-900);
  background: var(--ax-gray-100);
}

.btn-success {
  background: var(--ax-success);
  color: var(--ax-success-contrast);
  border-radius: var(--ax-radius-sm);
  font-weight: 500;
  transition: all var(--ax-transition-fast);
}

.btn-success:hover {
  background: var(--ax-success-hover);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ax-success) 25%, transparent);
}

/* =========================================================
   6. ACCIONES
   ========================================================= */

.action {
  color: var(--ax-gray-500);
  transition: all 120ms ease;
}

.action:hover {
  color: var(--ax-gray-700);
}

.action-accent:hover {
  color: var(--ax-accent);
}

.action-delete:hover {
  color: var(--ax-error);
}

/* =========================================================
   7. SECCIONES Y TÍTULOS
   ========================================================= */

.section-title {
  display: flex;
  align-items: center;
  color: var(--ax-primary);
  font-size: var(--ax-font-size-base);
  font-weight: 700;
  letter-spacing: var(--ax-letter-spacing-widest);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--ax-border);
  gap: 8px;
}

.section-icon {
  color: var(--ax-gray-400);
  font-size: var(--ax-font-size-lg);
}

.page-title {
  font-family: var(--ax-font-display);
  font-size: var(--ax-font-size-4xl);
  font-weight: 700;
  color: var(--ax-gray-900);
  letter-spacing: var(--ax-letter-spacing-tight);
  line-height: 1.25;
}

.page-subtitle {
  font-family: var(--ax-font-family);
  font-size: var(--ax-font-size-lg);
  font-weight: 400;
  color: var(--ax-gray-500);
  margin-top: 4px;
  line-height: 1.5;
}

/* =========================================================
   8. LAYOUT DE PÁGINA
   ========================================================= */

.page-root {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2);
  padding: var(--ax-space-3) var(--ax-space-8) var(--ax-space-4) var(--ax-space-8);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ax-space-3);
  min-height: 48px;
  padding: 0 0 6px 0;
  margin-bottom: var(--ax-space-1);
  border-bottom: 1px solid var(--ax-border);
}

/* =========================================================
   9. MODO EDICIÓN
   ========================================================= */

.edit-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--ax-accent-100);
  border: 1px solid color-mix(in srgb, var(--ax-accent) 30%, transparent);
  border-radius: var(--ax-radius-full);
  font-family: var(--ax-font-family);
  font-size: var(--ax-font-size-sm);
  font-weight: 500;
  color: var(--ax-accent-600);
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-wider);
}

.edit-mode::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ax-accent);
  border-radius: 50%;
  animation: ax-pulse 2s infinite;
}

@keyframes ax-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* =========================================================
   10. SCROLL MODERNO
   ========================================================= */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--ax-gray-300);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--ax-gray-400);
}

/* =========================================================
   11. ESTADOS Y BADGES
   ========================================================= */

.badge-success {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--ax-success-100);
  color: var(--ax-success-600);
  font-size: var(--ax-font-size-sm);
  font-weight: 500;
  border-radius: var(--ax-radius-full);
}

.badge-success::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ax-success);
  border-radius: 50%;
}

.badge-inactive {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--ax-gray-100);
  color: var(--ax-gray-600);
  font-size: var(--ax-font-size-sm);
  font-weight: 500;
  border-radius: var(--ax-radius-full);
}

.badge-inactive::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ax-gray-400);
  border-radius: 50%;
}

.badge-warning {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--ax-warning-100);
  color: var(--ax-warning-hover);
  font-size: var(--ax-font-size-sm);
  font-weight: 500;
  border-radius: var(--ax-radius-full);
}

.badge-error {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--ax-error-100);
  color: var(--ax-error-hover);
  font-size: var(--ax-font-size-sm);
  font-weight: 500;
  border-radius: var(--ax-radius-full);
}

.badge-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--ax-info-100);
  color: var(--ax-info-hover);
  font-size: var(--ax-font-size-sm);
  font-weight: 500;
  border-radius: var(--ax-radius-full);
}

.badge-draft {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--ax-gray-100);
  color: var(--ax-gray-600);
  font-size: var(--ax-font-size-sm);
  font-weight: 500;
  border-radius: var(--ax-radius-full);
}

.badge-draft::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ax-gray-400);
  border-radius: 50%;
}

.badge-processing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--ax-primary-50);
  color: var(--ax-primary-700);
  font-size: var(--ax-font-size-sm);
  font-weight: 500;
  border-radius: var(--ax-radius-full);
}

.badge-processing::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ax-primary);
  border-radius: 50%;
  animation: ax-pulse 1.5s infinite;
}

/* =========================================================
   12. UTILIDADES DE COLOR
   ========================================================= */

.text-primary { color: var(--ax-primary); }
.text-accent { color: var(--ax-accent); }
.text-success { color: var(--ax-success); }
.text-warning { color: var(--ax-warning); }
.text-error { color: var(--ax-error); }
.text-muted { color: var(--ax-gray-500); }

.bg-primary { background-color: var(--ax-primary-100); }
.bg-accent { background-color: var(--ax-accent-100); }
.bg-success { background-color: var(--ax-success-100); }
.bg-gray { background-color: var(--ax-gray-100); }

/* =========================================================
   13. UTILIDADES DE ESPACIADO
   ========================================================= */

.m-0 { margin: 0; }
.mt-4 { margin-top: var(--ax-space-4); }
.mt-6 { margin-top: var(--ax-space-6); }
.mt-8 { margin-top: var(--ax-space-8); }
.mb-4 { margin-bottom: var(--ax-space-4); }
.mb-6 { margin-bottom: var(--ax-space-6); }

.p-4 { padding: var(--ax-space-4); }
.p-6 { padding: var(--ax-space-6); }
.px-6 { padding-left: var(--ax-space-6); padding-right: var(--ax-space-6); }
.py-4 { padding-top: var(--ax-space-4); padding-bottom: var(--ax-space-4); }

/* =========================================================
   14. UTILIDADES DE LAYOUT
   ========================================================= */

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--ax-space-1); }
.gap-2 { gap: var(--ax-space-2); }
.gap-3 { gap: var(--ax-space-3); }
.gap-4 { gap: var(--ax-space-4); }

/* =========================================================
   15. UTILIDADES DE BORDES Y SOMBRAS
   ========================================================= */

.rounded { border-radius: var(--ax-radius); }
.rounded-lg { border-radius: var(--ax-radius-lg); }
.rounded-full { border-radius: var(--ax-radius-full); }

.shadow { box-shadow: var(--ax-shadow); }
.shadow-md { box-shadow: var(--ax-shadow-md); }

/* =========================================================
   16. INTERACCIÓN
   ========================================================= */

.cursor-pointer { cursor: pointer; }
.transition { transition: all 200ms ease; }

.transition-colors {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hover-accent:hover {
  color: var(--ax-accent);
}

/* =========================================================
   18. WIDTH Y FLEX UTILITIES
   ========================================================= */

.w-100 { width: 100%; }
.w-auto { width: auto; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

/* =========================================================
   18.5 WIDTH Y FLEX UTILITIES — Campos de búsqueda estándar
   ========================================================= */

.ax-search-field {
  flex: 0 0 520px;
  width: 520px;
  max-width: 520px;
  min-width: 520px;
}

/* Foco sutil: borde delgado y sombra tenue para outlined */
.ax-search-field .mud-input-outlined.mud-focused .mud-input-outlined-border,
.ax-search-field .mud-input-outlined:focus-within .mud-input-outlined-border {
  border-color: color-mix(in srgb, var(--ax-primary) 35%, transparent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ax-primary) 6%, transparent) !important;
}

.ax-search-field .mud-input.mud-focused,
.ax-search-field .mud-input:focus-within {
  box-shadow: none !important;
}

.ax-search-field-lg {
  width: 100%;
  max-width: 400px;
  min-width: 240px;
}

.ax-search-field-sm {
  width: 100%;
  max-width: 240px;
  min-width: 160px;
}

@media (max-width: 599px) {
  .ax-search-field,
  .ax-search-field-lg,
  .ax-search-field-sm {
    max-width: 100%;
    min-width: auto;
  }
}

/* =========================================================
   18.6 INDICATIVO TELEFONICO — prefijo de pais integrado al
        numero de telefono en una sola fila (formularios).
   ========================================================= */

/* Fila que agrupa prefijo de pais + numero. En desktop van en la misma
   fila; en mobile se apilan (ver media query inferior). */
.ax-phone-group {
  display: flex;
  align-items: flex-start;
  gap: var(--ax-space-2);
}

/* Select del codigo de pais dentro del bloque Numero.
   Ancho identico a la lista de genero (ax-w-sm = 120px), alineado con
   el resto de selects semanticos del formulario. */
.ax-phone-prefix {
  flex: 0 0 120px;
  width: 120px;
  max-width: 120px;
  min-width: 120px;
}

.ax-phone-prefix .mud-input-control {
  margin-top: 0;
}

/* Variante compacta del indicativo (ax-w-xs = 58px). Opt-in por formulario;
   el base sigue en 120px para el resto de consumidores. */
.ax-phone-prefix--xs {
  flex: 0 0 58px;
  width: 58px;
  max-width: 58px;
  min-width: 58px;
}

/* La caja del numero ocupa el resto del ancho disponible. */
.ax-phone-number {
  flex: 1 1 auto;
  min-width: 0;
}

/* Al reves en mobile: se apila para no estrechar el numero. */
@media (max-width: 960px) {
  .ax-phone-group {
    flex-direction: column;
    gap: 0;
  }
  .ax-phone-prefix {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .ax-phone-number {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  .ax-phone-prefix ~ .mud-input,
  .ax-phone-prefix + .flex-grow-1 {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* Contador de registros ERP - bajo protagonismo. Dentro del toolbar de listado
   (.page-header-start) va en su propia línea, debajo del cuadro de búsqueda: allí
   se anula el padding-top que lo alineaba con la línea inferior del input. */
.ax-record-count {
  color: var(--ax-gray-500);
  font-weight: 500;
  font-size: var(--ax-font-size-xs);
  line-height: 1;
  display: inline-flex;
  align-items: flex-end;
  padding-top: 22px;
}

/* =========================================================
   19. DRAWER Y APPBAR
   ========================================================= */

.drawer {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--ax-border);
}

.drawer-gradient {
  background: var(--ax-gradient-main);
  border-right: 1px solid var(--ax-border);
}

.appbar {
  /* Fondo blanco sólido (--ax-bg-header); en dark usa la superficie del tema. */
  background: var(--ax-bg-header);
  border-bottom: 1px solid var(--ax-border);
  padding-left: 0;
  padding-right: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--mud-appbar-zindex, 1100);
  transition: margin-left 0.3s ease, width 0.3s ease;
}

/* Alineación con el contenido principal: el AppBar se corre junto al drawer */
.appbar.appbar-drawer-open {
  margin-left: var(--ax-drawer-width);
  width: calc(100% - var(--ax-drawer-width));
}

.appbar.appbar-drawer-closed {
  margin-left: 0;
  width: 100%;
}

@media (max-width: 960px) {
  .appbar.appbar-drawer-open,
  .appbar.appbar-drawer-closed {
    margin-left: 0;
    width: 100%;
  }
}

.appbar.appbar-stacked {
  height: var(--ax-appbar-height) !important;
  min-height: var(--ax-appbar-height) !important;
  padding: 0 0 0 0;
}

/* =========================================================
   APPBAR DE 3 BARRAS (prototipo Marinilla)
   Barra 1: crumb + tray | Barra 2: tabs | Barra 3: acciones
   ========================================================= */
.appbar-bars {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.bar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  box-sizing: border-box;
}

/* La fila 1 —la de las tabs del workspace— NO lleva línea inferior: el riel tenue de la fila
   ya separa por sí solo y la lengüeta activa se apoya en su propio borde. */

.bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

/* Fila 1: mismo fondo que la fila 2 (hereda el fondo del AppBar), sin el riel
   tenue anterior, y con un respiro superior propio. Sin border-bottom: ver .bar. */
.appbar-bar-top {
  padding-top: var(--ax-appbar-top-padding);
  background: transparent;
}

/* Las tabs del workspace ocupan el centro de la fila 1, junto al hamburguesa */
.appbar-bar-top .appbar-tabs-row {
  flex: 1;
  min-width: 0;
  height: var(--ax-appbar-top-row-height);
  align-items: center;
  gap: 20px;
  border: 0;
}

.crumb {
  color: var(--ax-primary);
  font-weight: 700;
  font-size: var(--ax-font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.round {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: var(--ax-font-size-lg);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms ease, color 150ms ease;
}

.round:hover {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
}

.appbar-bar-tabs {
  padding: 0 28px;
  min-width: 0;
}

.appbar-bar-actions {
  justify-content: flex-end;
  /* Respiro superior de la fila 2; el alto del token incluye este padding. */
  padding: var(--ax-space-1) 28px 2px;
  min-height: var(--ax-appbar-actions-height);
}

/* Sección de tabs de documentos abiertos (facturas): vive en la fila 2, a la izquierda de los
   botones de comando, como una franja APARTE de la del workspace (fila 1). La fila conserva su
   alto: las lengüetas se apoyan en su borde inferior. */
.appbar-bar-actions.appbar-bar-actions-tabs {
  justify-content: flex-start;
  gap: 16px;
}

.appbar-bar-actions.appbar-bar-actions-tabs .appbar-subtabs {
  flex: 0 1 auto;
  min-width: 0;
  height: var(--ax-appbar-actions-height);
}

/* Las píldoras de documentos comparten el alto del tab y, si la fila 2 es más
   baja, se recortan a ella para no desbordar (el contenedor .appbar-subtabs
   oculta el desborde vertical). */
.appbar-bar-actions.appbar-bar-actions-tabs .appbar-subtabs .appbar-tab {
  height: min(var(--ax-tab-height), calc(var(--ax-appbar-actions-height) - 4px));
}

/* Con la sección de documentos en la fila, los botones ocupan el espacio restante y empujan a la
   derecha. */
.appbar-bar-actions.appbar-bar-actions-tabs .appbar-actions-wrapper {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

@media (max-width: 960px) {
  .bar,
  .appbar-bar-tabs,
  .appbar-bar-actions {
    padding: 0 14px;
  }
}

.appbar-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 36px;
}

.appbar-section-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  flex-shrink: 0;
  align-self: stretch;
}

/* =========================================================
   APPBAR BRAND (logo + empresa + plan)
   ========================================================= */

.appbar-section-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 16px;
  flex-shrink: 0;
  align-self: stretch;
  width: var(--ax-drawer-width);
  box-sizing: border-box;
  transition: width 0.3s ease;
}

.appbar-section-brand.drawer-closed {
  width: 48px;
  padding: 0;
  justify-content: center;
}

.appbar-section-brand.drawer-closed .appbar-brand-logo,
.appbar-section-brand.drawer-closed .appbar-brand-meta {
  display: none;
}

.appbar-brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ax-primary) 0%, var(--ax-primary-hover) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ax-primary-contrast);
  font-weight: 700;
  font-size: var(--ax-font-size-sm);
  flex-shrink: 0;
}

.appbar-brand-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.appbar-brand-name {
  font-size: var(--ax-font-size-base);
  font-weight: 700;
  color: var(--ax-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar-brand-plan {
  font-size: var(--ax-font-size-xs);
  font-weight: 500;
  color: var(--ax-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 960px) {
  .appbar-section-brand {
    gap: 8px;
    padding: 0 8px 0 12px;
  }

  .appbar-brand-meta {
    display: none;
  }
}

.appbar-section-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: var(--ax-appbar-padding-y) var(--ax-space-4) var(--ax-appbar-padding-y) var(--ax-space-4);
}

@media (max-width: 960px) {
  .appbar-section-menu {
    width: 40px;
  }

  .appbar-section-content {
    padding: var(--ax-appbar-padding-y) var(--ax-space-2);
  }
}

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

.appbar-row {
  display: flex;
  align-items: center;
  min-height: 36px;
}

.appbar-top-row {
  margin: 0;
  height: var(--ax-appbar-top-row-height);
  min-height: var(--ax-appbar-top-row-height);
  padding: 0;
}

.appbar-actions-row {
  height: var(--ax-appbar-actions-height);
  min-height: var(--ax-appbar-actions-height);
  margin-top: 0;
  padding: 0;
  border-top: 1px solid var(--ax-gray-100);
}

.appbar-menu-btn {
  width: 32px;
  height: 32px;
  color: var(--ax-gray-500);
}

.appbar-menu-btn:hover {
  background: var(--ax-gray-100);
  color: var(--ax-gray-900);
}

.appbar-menu-placeholder {
  display: none;
}

.appbar-title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.appbar-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ax-font-display); /* identidad: Sora */
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ax-gray-900);
  letter-spacing: var(--ax-letter-spacing-snug);
  line-height: 1.2;
  min-width: 0;
}

.appbar-title-action {
  font-size: var(--ax-font-size-base);
  font-weight: 500;
  color: var(--ax-primary);
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-wider);
  flex-shrink: 0;
}

.appbar-title-entity {
  font-weight: 600;
  color: var(--ax-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar-title-separator {
  color: var(--ax-gray-300);
  font-weight: 300;
  flex-shrink: 0;
}

.appbar-title-identifier {
  font-size: var(--ax-font-size-base);
  font-weight: 500;
  color: var(--ax-gray-500);
  font-family: var(--ax-font-mono);
  flex-shrink: 0;
}

.appbar-action-badge {
  margin-left: 2px;
  font-size: var(--ax-font-size-xs);
  padding: 2px 8px;
  border-radius: var(--ax-radius-full);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-wide);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.appbar-action-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.appbar-badge-edit {
  background: var(--ax-accent-100);
  color: var(--ax-accent-600);
  border: 1px solid color-mix(in srgb, var(--ax-accent) 30%, transparent);
}

.appbar-badge-edit::before {
  background: var(--ax-accent);
  animation: ax-pulse 2s infinite;
}

.appbar-badge-new {
  background: var(--ax-primary-50);
  color: var(--ax-primary-700);
  border: 1px solid color-mix(in srgb, var(--ax-primary) 20%, transparent);
}

.appbar-badge-new::before {
  background: var(--ax-primary);
}

.appbar-badge-default {
  background: var(--ax-gray-100);
  color: var(--ax-gray-600);
  border: 1px solid var(--ax-gray-200);
}

.appbar-badge-default::before {
  background: var(--ax-gray-400);
}

.appbar-system-tray {
  display: flex;
  align-items: center;
  gap: 4px;
}

.appbar-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--ax-gray-500);
  border-radius: 6px;
}

.appbar-icon-btn:hover {
  background: var(--ax-gray-100);
  color: var(--ax-gray-900);
}

.appbar-user-chip {
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
  transition: background 150ms ease;
}

.appbar-user-chip:hover {
  background: var(--ax-gray-100);
}

.user-avatar-mini {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--ax-primary), var(--ax-primary-hover));
  color: var(--ax-primary-contrast);
  font-size: var(--ax-font-size-2xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.appbar-actions-wrapper {
  display: flex;
  align-items: center;
  justify-content: safe flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
}

.appbar-actions-wrapper::-webkit-scrollbar {
  display: none;
}

/* =====================================================================
   ACCIONES DE APPBAR — apariencia GENERAL (Alternativa 2 · «Contorno hairline»).
   Aplica a TODAS las acciones del AppBar, en cualquier página. La jerarquía se
   resuelve por TINTA (color de borde y de texto), no por relleno ni sombra:
   ningún botón se rellena en reposo y el primario solo lleva un wash de marca
   al 7 %. Propuesta visual: alternativasbotones.html §2.
   Alta especificidad para vencer los Variants nativos de MudBlazor.
   La tipografía, el radio y la densidad NO se declaran aquí: los fija la
   sección «APPBAR ACTIONS DENSAS» para las cuatro intenciones por igual.
   ===================================================================== */

.appbar-actions-wrapper .mud-button.appbar-action-primary {
  background: color-mix(in srgb, var(--ax-primary) 7%, transparent);
  color: var(--ax-primary) !important; /* vence al texto de contraste de mud-button-filled */
  border: 1px solid var(--ax-primary);
  box-shadow: none;
}

.appbar-actions-wrapper .mud-button.appbar-action-primary:hover {
  background: color-mix(in srgb, var(--ax-primary) 14%, transparent);
  border-color: var(--ax-primary-hover);
  color: var(--ax-primary-hover) !important;
}

.appbar-actions-wrapper .mud-button.appbar-action-secondary,
.appbar-actions-wrapper .mud-button.appbar-action-ghost {
  border: 1px solid var(--ax-border);
  background: transparent;
  color: var(--ax-text-primary);
  white-space: nowrap;
  box-shadow: none;
}

.appbar-actions-wrapper .mud-button.appbar-action-secondary:hover,
.appbar-actions-wrapper .mud-button.appbar-action-ghost:hover {
  border-color: var(--ax-alpha-line-strong);
  background: var(--ax-alpha-hover);
  color: var(--ax-text-primary);
}

.appbar-actions-wrapper .mud-button.appbar-action-danger {
  border: 1px solid color-mix(in srgb, var(--ax-error) 55%, transparent);
  background: transparent;
  color: var(--ax-error);
  box-shadow: none;
}

.appbar-actions-wrapper .mud-button.appbar-action-danger:hover {
  background: var(--ax-error-bg);
  border-color: var(--ax-error);
  color: var(--ax-error-hover);
}

/* Foco visible (UI.md §9.5.4): el anillo del sistema, sin eliminar el outline
   nativo del navegador en el resto de elementos interactivos. */
.appbar-actions-wrapper .mud-button:focus-visible {
  box-shadow: var(--ax-shadow-focus);
}

@media (max-width: 960px) {
  .appbar-actions-wrapper {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .appbar-actions-wrapper::-webkit-scrollbar {
    display: none;
  }
}

.appbar-content-wrapper {
  flex: 1;
  margin-left: 8px;
  display: flex;
  align-items: center;
  transition: margin-left 0.3s ease;
}

.appbar-content-wrapper.drawer-open {
  margin-left: 288px;
}

@media (max-width: 960px) {
  .appbar-content-wrapper,
  .appbar-content-wrapper.drawer-open {
    margin-left: 8px;
  }
}

.appbar-title-section {
  display: flex;
  align-items: center;
}

.appbar-title-container {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.appbar-subtitle {
  font-size: var(--ax-font-size-sm);
  color: var(--ax-gray-500);
  font-weight: 400;
}

.appbar-brand {
  cursor: pointer;
  font-weight: 700;
  color: var(--ax-primary);
  font-size: 1rem;
  letter-spacing: var(--ax-letter-spacing-tight);
}

.appbar-brand:hover {
  opacity: 0.8;
}

.appbar-divider {
  color: var(--ax-gray-400);
  font-weight: 300;
}

.appbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  margin-left: 8px;
  border-left: 1px solid var(--ax-border);
}

.drawer-footer {
  border-top: 1px solid var(--ax-border);
  padding: 12px;
  background: var(--sidebar-bg);
}

/* =========================================================
    19.5 DRAWER CUSTOM (MudBlazor overrides estructurales)
    ========================================================= */

.mud-drawer.drawer {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--ax-border);
}

/* El drawer persistente/docked ocupa toda la altura desde el tope.
   El AppBar apilado va desplazado a la derecha del drawer (margin-left del
   drawer-width), así que NO debe empujar el drawer hacia abajo ni dejar la
   columna del drawer en blanco arriba (evita el hueco encima del menú). */
.mud-drawer.drawer.mud-drawer-docked,
.mud-drawer.drawer.mud-drawer-persistent {
  top: 0 !important;
  height: 100% !important;
}

.mud-drawer.drawer .mud-drawer-content {
  background: var(--sidebar-bg);
}

/* =========================================================
    19.6 APPBAR MUD-BLAZOR (override estructural)
    ========================================================= */

.appbar .mud-toolbar {
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
    20. MEDIA QUERIES
   ========================================================= */

@media (max-width: 960px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: calc(100vh - 180px);
  }

  .sidebar-layout .sidebar {
    max-height: 300px;
  }
}

@media (max-width: 600px) {
  .sidebar-layout {
    gap: 12px;
  }

  .sidebar-layout .sidebar {
    padding: 12px;
  }

  .route-list-scrollable {
    max-height: 200px;
  }

  .page-title {
    font-size: 1.1rem;
  }

  .page-subtitle {
    font-size: 0.8rem;
  }
}

/* =========================================================
   21. CAPAS VISUALES
   ========================================================= */

.bg-layer-0 {
  background-color: var(--ax-bg);
}

.bg-layer-1 {
  background-color: var(--ax-bg-sidebar);
}

.bg-layer-2 {
  background-color: var(--ax-bg-card);
}

.bg-layer-3 {
  background-color: var(--ax-bg-header);
}

.bg-layer-4 {
  background-color: var(--ax-bg-input);
}

/* =========================================================
   22. SOMBRAS
   ========================================================= */

.elevation-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.elevation-2 {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.elevation-3 {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   23. TOGGLE GROUP
   ========================================================= */

.toggle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  gap: 12px;
}

.toggle-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.toggle-icon {
  width: 28px;
  height: 28px;
  background: var(--ax-gray-100);
  border-radius: var(--ax-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ax-text-secondary);
  flex-shrink: 0;
}

.toggle-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.toggle-label {
  font-size: var(--ax-font-size-base);
  font-weight: 500;
  color: var(--ax-text-primary);
  line-height: 1.3;
}

.toggle-description {
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-secondary);
  line-height: 1.3;
}

/* =========================================================
   24. ERP COMPONENTES REUTILIZABLES
   ========================================================= */

.page-header-start,
.page-header-end {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2);
}

.page-header-start {
  flex: 1;
  flex-wrap: wrap;
}

.page-header-start > *:not(.ax-search-field) {
  flex: 0 0 auto;
  width: auto;
}

/* Contador de registros del toolbar de listado: vive DEBAJO del cuadro de búsqueda
   —su propia línea—, no al final de la fila de filtros. Ocupa el ancho completo
   (flex-basis 100% + order 1 lo empujan a la segunda línea) y anula el margen del
   modificador ms-* de la página y el padding que lo alineaba con la línea inferior
   del input. En mobile sigue oculto (ver «Ocultar record count en mobile»). */
.page-header-start > .ax-record-count {
  order: 1;
  flex: 1 0 100%;
  margin-inline-start: 0 !important;
  padding-top: 0;
}

@media (max-width: 599px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ax-space-2);
  }

  .page-header-start {
    flex-wrap: wrap;
  }

  .page-header-start > .ax-search-field {
    flex: 1 1 100%;
  }

  .page-header-end {
    justify-content: flex-end;
  }
}

.page-header-start > .explorer-search-wrapper {
  flex: 1 1 100%;
  min-width: 0;
  max-width: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 599px) {
  .explorer-search-wrapper,
  .ax-search-field {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

.collapsible-section {
  padding: 0;
  margin-bottom: var(--ax-space-2);
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ax-space-2);
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background-color 150ms ease;
}

.collapsible-header:hover {
  background-color: var(--ax-gray-50);
}

.collapsible-content {
  padding: 0 12px 8px 12px;
}

.sticky-action-bar {
  position: sticky;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-3);
}

.right-detail-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ax-border);
}

.right-detail-drawer-body {
  padding: 16px;
  overflow-y: auto;
}

/* =========================================================
    26. FORMULARIOS ERP - Desktop First
    ========================================================= */

/* Contenedor principal de formularios densos */
.erp-form-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Secciones de formulario tipo ERP */
.erp-section {
  margin-bottom: 8px;
  padding: 10px 12px;
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-sm);
}

.erp-section:last-child {
  margin-bottom: 0;
}

/* Card plana para ERP (sin sombra) */
.card-flat {
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-sm);
  padding: 10px 12px;
}

/* Card con fondo alternado */
.card-alt {
  background: var(--ax-gray-50);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-sm);
  padding: 10px 12px;
}

/* Divider denso */
.divider-dense {
  margin: 8px 0;
  border-color: var(--ax-border);
}

/* =========================================================
    27. APPBAR DENSO
    ========================================================= */

.appbar-dense .appbar-top-row {
  min-height: 44px;
}

.appbar-dense .appbar-actions-row {
  min-height: 36px;
}

/* =========================================================
    28. FORMULARIO UNIFICADO ERP
    ========================================================= */

/* Contenedor de formulario tipo hoja continua (sin cards separadas).
   v9.2: reservado a CONTEXTO ESTRECHO (drawers, paneles laterales) —
   los formularios de pagina completa usan .form-grid + .panel (UI-FORMS 7.1b).
   Contexto de queries: los grids de captura colapsan segun el ancho
   REAL de la hoja (desconta drawer y paddings), no el del viewport. */
.erp-form-sheet {
  container-type: inline-size;
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  padding: var(--ax-space-4) var(--ax-space-4);
  box-shadow: var(--ax-shadow-soft);
}

/* Sección dentro de hoja unificada: solo línea divisoria, sin borde */
.erp-form-sheet .erp-section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0;
  margin-bottom: 0;
}

.erp-form-sheet .erp-section:not(:last-child) {
  position: relative;
  margin-bottom: 6px;
  padding-bottom: 6px;
}

.erp-form-sheet .erp-section:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ax-border);
  opacity: 0.3;
}

/* Columna individual dentro del grid */
.erp-form-column {
  min-width: 0;
}

/* =========================================================
      29. ENCABEZADO DE SECCION — INLINE DIVIDER (Alternativa C)
      ========================================================= */

.erp-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding-top: 14px;
  border-radius: var(--ax-radius-sm);
}

.erp-section-header-icon {
  color: var(--ax-primary);
  font-size: var(--ax-font-size-lg);
  flex-shrink: 0;
  opacity: 0.8;
}

.erp-section-header-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: var(--ax-font-size-base);
  font-weight: 600;
  letter-spacing: var(--ax-letter-spacing-wider);
  color: var(--ax-text-secondary);
  white-space: nowrap;
  text-transform: uppercase;
}

/* Línea divisoria del header de sección */
.erp-section-header-line {
  display: block;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ax-border) 0%, transparent 100%);
  margin-left: 10px;
  position: relative;
}

.erp-section-header-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 6px;
  height: 3px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-primary);
}

.erp-section-header-line::before {
  display: none;
}

/* =========================================================
     30. RESPONSIVE DESKTOP-FIRST
     ========================================================= */

/* Mobile: ultra compacto */
@media (max-width: 599px) {
  .page-root {
    padding: 8px 8px 4px 8px;
    gap: var(--ax-space-1);
  }

  .card {
    padding: 8px 10px 4px 10px;
  }

  .erp-section {
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
  }

  .erp-form-sheet {
    padding: 18px 10px 8px 10px;
  }

  .erp-section-title,
  .ax-field-group-title,
  .section-overline,
  .erp-section-overline {
    font-size: var(--ax-font-size-2xs); /* 10px */
    padding: 2px 0 4px 0;
    margin-bottom: 4px;
  }

  .erp-section-header {
    margin-bottom: 8px;
    gap: 8px;
  }

  .erp-section-header-title {
    font-size: var(--ax-font-size-base);
  }

  .appbar-action-badge {
    font-size: var(--ax-font-size-2xs);
    padding: 1px 6px;
  }

  .collapsible-header {
    padding: 6px 10px;
  }

  .collapsible-content {
    padding: 0 10px 6px 10px;
  }
}

/* =========================================================
   31. UTILIDADES DE DENSIDAD
   ========================================================= */

/* Espaciado mínimo */
.gap-0 { gap: 0; }

/* Padding denso */
.p-dense { padding: 8px 12px; }
.px-dense { padding-left: 12px; padding-right: 12px; }
.py-dense { padding-top: 8px; padding-bottom: 8px; }

/* Margin denso */
.mb-dense { margin-bottom: 8px; }
.mt-dense { margin-top: 8px; }

/* Texto mono para códigos/números */
.font-mono {
  font-family: var(--ax-font-mono);
}

/* Campo de captura con valor mono (identificaciones, numeros de contrato) */
.mono-input .mud-input-slot,
.mono-input input {
  font-family: var(--ax-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Números alineados a la derecha */
.text-right-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   32. ROLE CHECKLIST (Checkbox visual list)
   ========================================================= */

.role-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-space-2);
  justify-content: flex-end;
}

/* Rol como pill: borde hairline, fondo surface; seleccionado = triplete info */
.role-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--ax-alpha-line);
  border-radius: var(--ax-radius-full);
  background: var(--ax-surface);
  cursor: pointer;
  transition: all var(--ax-transition-fast);
  user-select: none;
}

/* Variante compacta del checklist (formulario de Suscripción): 2px menos de
   aire vertical por item. Se activa desde el contenedor para no alterar el
   padding del patrón base que comparten las demas pantallas. */
.role-checklist--tight .role-checklist-item {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Variante alineada al inicio (formulario de Suscripción): el patrón base
   alinea los items a la derecha; esta variante los devuelve al borde
   izquierdo del panel. */
.role-checklist--start {
  justify-content: flex-start;
}

.role-checklist-item:hover {
  background: var(--ax-alpha-hover);
  border-color: var(--ax-alpha-line-strong);
}

.role-checklist-item.selected {
  background: var(--ax-surface);
  border-color: var(--ax-alpha-line-strong);
}

.role-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ax-alpha-line-strong);
  border-radius: var(--ax-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ax-transition-fast);
  flex-shrink: 0;
}

.role-checkbox .mud-icon-size-small {
  font-size: var(--ax-font-size-md);
  color: var(--ax-primary-contrast-text);
  opacity: 0;
  transition: opacity var(--ax-transition-fast);
}

.role-checklist-item.selected .role-checkbox {
  background: var(--ax-primary);
  border-color: var(--ax-primary);
}

.role-checklist-item.selected .role-checkbox .mud-icon-size-small {
  opacity: 1;
}

.role-item-icon {
  font-size: var(--ax-font-size-xl) !important;
  color: var(--ax-text-muted);
  flex-shrink: 0;
}

.role-item-label {
  font-size: var(--ax-font-size-md);
  font-weight: 500;
  color: var(--ax-text-secondary);
  flex: 1;
}

.role-item-badge {
  font-size: var(--ax-font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-wide);
  color: var(--ax-text-muted);
  white-space: nowrap;
}

/* =========================================================
    Roles en rejilla 2x2 compacta (alternativa 2 — eco inmediato)
    Tile = icono + nombre (arriba) y area funcional (abajo)
    ========================================================= */
.role-grid-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ax-space-1x5, 6px);
}

.role-mini {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--ax-alpha-line);
  border-radius: var(--ax-radius);
  padding: 6px 10px;
  background: var(--ax-surface);
  cursor: pointer;
  transition: all var(--ax-transition-fast);
  user-select: none;
}

.role-mini:hover {
  border-color: var(--ax-alpha-line-strong);
  background: var(--ax-alpha-hover);
}

.role-mini .rm-top {
  display: flex;
  align-items: center;
  gap: var(--ax-space-1x5, 6px);
}

.role-mini .rm-top .mud-icon-size-small {
  font-size: var(--ax-font-size-md);
  color: var(--ax-text-muted);
}

.role-mini .rm-name {
  font-size: var(--ax-font-size-md);
  font-weight: 600;
  color: var(--ax-text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-mini .rm-sub {
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-muted);
}

.role-mini.selected {
  background: var(--ax-info-bg);
  border-color: color-mix(in srgb, var(--ax-primary) 30%, transparent);
}

.role-mini.selected .rm-name {
  color: var(--ax-info-text);
}

.role-mini.selected .rm-top .mud-icon-size-small {
  color: var(--ax-primary);
}

/* Helper como strip con triplete semantico (bg = 8% del color) */
.role-helper-text {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2);
  font-size: var(--ax-font-size-sm);
  font-weight: 500;
  min-height: 18px;
  padding: 8px 11px;
  border-radius: var(--ax-radius-md);
}

.role-helper-text.warning {
  color: var(--ax-warning-text);
  background: var(--ax-warning-bg);
}

.role-helper-text.success {
  color: var(--ax-success-text);
  background: var(--ax-success-bg);
}

/* =========================================================
    33. PANEL PATTERN (contenedor de pagina completa:
    Guiada por conteo y Libre por funcionalidad — v9.2)
    ========================================================= */

.panel {
  /* Panel elevado (v9.6) — receta base: vidrio blanco (--ax-panel-surface) + aro
     tinta, radio amplio y sombra en dos capas. Los tokens se autorreajustan por tema. */
  background: var(--ax-panel-bg);
  backdrop-filter: blur(var(--ax-panel-blur));
  -webkit-backdrop-filter: blur(var(--ax-panel-blur));
  border: 1px solid var(--ax-panel-rim);
  border-radius: var(--ax-radius-xl);
  box-shadow: var(--ax-shadow-panel);
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2x5);
  padding: var(--ax-space-3) var(--ax-space-4);
  /* Banda de cabecera: gris neutro plano (receta base) que separa el título del
     contenido; cierra con el aro tinta del panel. */
  background: linear-gradient(180deg, var(--ax-panel-band-top), var(--ax-panel-band-bottom));
  border-bottom: 1px solid var(--ax-panel-rim);
}

.panel-header h2 {
  font-family: var(--ax-font-display); /* identidad: Sora */
  font-size: var(--ax-font-size-base);
  font-weight: 600;
  color: var(--ax-text-primary);
  margin: 0;
  flex: 1;
}

.panel-header-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--ax-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.panel-header-icon .mud-icon-size-small {
  font-size: var(--ax-font-size-base) !important;
}

.panel-header-icon.coral {
  background: var(--ax-primary-100);
  color: var(--ax-primary);
}

.panel-header-icon.teal {
  background: var(--ax-indigo-100);
  color: var(--ax-indigo-600);
}

.panel-header-icon.gold {
  background: var(--ax-warning-100);
  color: var(--ax-warning);
}

/* Badge de panel como eyebrow: texto uppercase tenue, sin pastilla de fondo */
.panel-badge {
  font-size: var(--ax-font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-widest);
  color: var(--ax-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.panel-body {
  padding: 12px;
}

/* Panel accent via CSS variable (inline style from biome system) */
.panel[style*="--panel-accent"] {
  border-left: 3px solid transparent;
}

.panel[style*="--panel-accent"]:hover {
  border-left-color: var(--panel-accent);
}

/* Grid de paneles: el panel de modo fila tiene un ancho CONSTANTE del
   sistema, no se calcula:
     padding (24) + etiqueta (130) + gap (14) + campo md (190) = 358px
    Las 3 columnas lo fijan directo (358 como techo, 0 como piso para
   encoger en viewports entre 961 y 1180px) y space-between reparte el
   sobrante. En mobile (<=960px) apila en una columna. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 358px));
  justify-content: space-between;
  gap: var(--ax-space-5);
  align-items: stretch;
}

/* Modificadores según el número de paneles: sustituyen a un grid-template-columns
   inline en el markup (UI-FORMS.md §7.1b). Declarados antes del media query para que
   en <=960px todos los grids apilen en una columna. */
.form-grid-1 { grid-template-columns: minmax(0, 1fr); }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 358px)); justify-content: start; }

/* =========================================================
   41c. TAMAÑOS DE PANEL EN MODO FILA - tres niveles (sm/md/lg)
   Por defecto .form-grid fija los tres paneles a md (358px).
   Para paneles de distinto peso en una misma fila se opta por
   .form-grid-panel-sizes (columnas auto) + un modificador de nivel
   en cada .panel (.ax-panel-lg / .ax-panel-md / .ax-panel-sm).
   Niveles respecto al ancho base md:
     lg = md + 92px (450) · md = ancho del sistema (358) · sm = md - 10px (348)
   Solo aplica en desktop (>=961px); en mobile los paneles se apilan
   a 100% y se ignoran los niveles (UI-FORMS.md §7.3.1 v9.4).
   ========================================================= */
.form-grid-panel-sizes { grid-template-columns: repeat(3, auto); }

@media (min-width: 961px) {
  /* Los niveles van scopeados bajo .form-grid-panel-sizes: una regla
     .form-grid-panel-sizes .panel (2 clases) ganaria por especificidad a
     .ax-panel-* (1 clase) y aplanaria los tres anchos a auto. */
  .form-grid-panel-sizes .ax-panel-lg { width: 450px; }
  .form-grid-panel-sizes .ax-panel-md { width: 358px; }
  .form-grid-panel-sizes .ax-panel-sm { width: 348px; }
}

@media (max-width: 960px) {
  .form-grid-panel-sizes { grid-template-columns: 1fr; }
  .ax-panel-lg,
  .ax-panel-md,
  .ax-panel-sm { width: 100% !important; }
}

/* Panel que necesita el ancho completo (grillas de datos, arboles):
   ocupa su propia fila. Unica via autorizada para grid-column en el
   markup; prohibido el style inline (UI-FORMS 7.12). */
.panel-span-full { grid-column: 1 / -1; }

/* Panel que cubre solo el primer y segundo panel de una grilla de 3
   (lg 450 + md 358 + gap 20 = 828px): deja la tercera columna libre.
   En mobile (1 columna) el end line se recorta al rango disponible. */
.panel-span-two { grid-column: 1 / 3; }

/* Panel que arranca en la segunda columna y llega al borde derecho (col 2 → fin):
   alinea su borde izquierdo con el SEGUNDO panel de la grilla de 3. Solo en desktop;
   en mobile (1 columna) apila a ancho completo. */
@media (min-width: 961px) {
  .panel-span-from-2 { grid-column: 2 / -1; }
}

/* Categoria opt-in dentro de un .panel-body (paneles de pagina completa):
   division titular que separa momentos de decision dentro del mismo panel
   (ej. Ubicacion / Entrega). Banda tintada que cruza el panel de borde a
   borde: separa por banda, no por linea (sin trazos divisorios). */
.panel-category {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2);
  font-size: calc(0.845rem - 3px);
  font-weight: 600;
  letter-spacing: var(--ax-letter-spacing-wider);
  text-transform: uppercase;
  color: var(--ax-text-primary);
  margin: var(--ax-space-3) 0 6px 0;
  padding: 6px 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ax-primary) 4%, transparent), transparent 62%),
    var(--ax-gray-50);
}

/* Banda de borde a borde: compensa el padding de 12px del .panel-body. */
.panel-body > .panel-category {
  margin-inline: -12px;
}

.panel-category:first-child { margin-top: 0; }

/* Formularios de pagina completa (Guiada y Libre): se centran con ancho
   maximo (patrón .content{max-width:1180px;margin:0 auto} del prototipo v10),
   no solo con padding: en pantallas anchas el gutter crece con la pantalla.

   IMPORTANTE — el shell de listado (`.master-detail`, UI-FORMS §7.0d) queda
   excluido: su panel-formulario tambien usa `.form-grid`, pero vive dentro del
   panel. Si el page-root se centrara al montarse ese formulario, el shell entero
   se estrecharia y se correria al seleccionar una fila. El centrado es exclusivo
   del formulario de pagina completa. */
.page-root:has(.form-grid):not(:has(.master-detail)),
.form-crumb-row:has(+ .page-root .form-grid) {
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Excepcion del contenedor para grillas con niveles sm/md/lg:
   450 + 358 + 348 + 2 gaps de 20 = 1196px de paneles; con el box de
   1180 (1132 utiles tras padding) la grilla desbordaba por la derecha y
   se comia su padding, haciendo ver el izquierdo del primer panel mayor.
   1260 = 1196 + 2x32 padding: los niveles caben exactos y el centrado
   reparte el respiro por igual en ambos lados. */
.page-root:has(.form-grid-panel-sizes):not(:has(.master-detail)) {
  max-width: 1260px;
}

@media (max-width: 960px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =========================================================
    33b. PRIMITIVAS OPENROUTER (v9.1)
    Chips por triplete semantico, stat-card eyebrow+valor,
    chip de atajo de teclado y control segmentado.
    Solo consumen tokens; sin hex literales.
    ========================================================= */

/* Chip de estado: bg = 8% del color, texto = paso oscuro (triplete) */
.ax-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--ax-radius-full);
  font-size: var(--ax-font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.ax-chip .ax-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.ax-chip-success { background: var(--ax-success-bg); color: var(--ax-success-text); }
.ax-chip-warning { background: var(--ax-warning-bg); color: var(--ax-warning-text); }
.ax-chip-error   { background: var(--ax-error-bg);   color: var(--ax-error-text); }
.ax-chip-info    { background: var(--ax-info-bg);    color: var(--ax-info-text); }
.ax-chip-neutral { background: var(--ax-alpha-hover); color: var(--ax-text-muted); }

/* Stat-card: label eyebrow arriba, valor bold abajo */
.ax-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ax-space-2x5);
  margin-bottom: var(--ax-space-4);
}

.ax-stat {
  border: 1px solid var(--ax-alpha-line);
  border-radius: var(--ax-radius-md);
  background: var(--ax-bg-card);
  padding: var(--ax-space-3);
  min-width: 0;
}

.ax-stat-lbl {
  font-size: var(--ax-font-size-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-widest);
  color: var(--ax-text-muted);
  font-weight: 600;
  margin-bottom: 5px;
}

.ax-stat-val {
  font-family: var(--ax-font-display); /* identidad: números importantes del dashboard */
  font-size: var(--ax-font-size-xl);
  font-weight: 700;
  letter-spacing: var(--ax-letter-spacing-tight);
  color: var(--ax-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ax-stat-val.mono {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-font-size-lg);
  letter-spacing: var(--ax-letter-spacing-wide);
}

/* Variante elevada (v9.6): la tarjeta resumen que flota sobre el degradado de página, con el
   mismo aro tinta y la misma sombra que .panel. Es la que usan las bandas de totales de las
   pantallas Consulta/Reporte (tablero de facturación, hub de reportes). */
.ax-stat--panel {
  background: var(--ax-panel-bg);
  border: 1px solid var(--ax-panel-rim);
  border-radius: var(--ax-radius-xl);
  box-shadow: var(--ax-shadow-panel);
  backdrop-filter: blur(var(--ax-panel-blur));
  -webkit-backdrop-filter: blur(var(--ax-panel-blur));
  padding: var(--ax-space-1x5) var(--ax-space-3);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ax-stat--panel .ax-stat-lbl {
  margin-bottom: 0;
  letter-spacing: var(--ax-letter-spacing-wider);
}

.ax-stat--panel .ax-stat-val {
  font-size: var(--ax-font-size-2xl);
  letter-spacing: var(--ax-letter-spacing-tightest);
  line-height: 1;
  white-space: normal;
}

/* Contexto de la cifra: qué mide y con qué filtros (una línea, nunca una segunda cifra). */
.ax-stat-sub {
  font-size: var(--ax-font-size-2xs);
  line-height: 1.2;
  color: var(--ax-text-secondary);
}

/* Numeral AXIOMA: mono + dígitos tabulares para cualquier cifra fuera de tabla. */
.ax-numero {
  font-family: var(--ax-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Chip de atajo de teclado (Ctrl K) dentro del buscador */
.ax-kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--ax-alpha-line);
  border-bottom-width: 2px;
  border-radius: var(--ax-radius-sm);
  padding: 1px 5px;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-font-size-2xs);
  font-weight: 500;
  color: var(--ax-text-muted);
  background: var(--ax-bg-input);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Control segmentado para filtros binarios/ternarios */
.ax-seg {
  display: inline-flex;
  border: 1px solid var(--ax-alpha-line);
  border-radius: var(--ax-radius);
  background: var(--ax-bg-input);
  overflow: hidden;
  flex-shrink: 0;
}

.ax-seg-btn {
  border: 0;
  border-right: 1px solid var(--ax-alpha-line);
  background: transparent;
  color: var(--ax-text-secondary);
  padding: 7px 11px;
  font-family: var(--ax-font-family);
  font-size: var(--ax-font-size-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ax-transition-fast), color var(--ax-transition-fast);
}

.ax-seg-btn:last-child {
  border-right: 0;
}

/* Estado deshabilitado: la opción ya está ocupada (p. ej. ya existe un
   período Vigente/Programado); no debe leerse como disponible. */
.ax-seg-btn:disabled,
.ax-seg-btn:disabled:hover {
  background: transparent;
  color: var(--ax-text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}

.ax-seg-btn:hover {
  background: var(--ax-alpha-hover);
  color: var(--ax-text-primary);
}

.ax-seg-btn.active {
  background: var(--ax-info-bg);
  color: var(--ax-info-text);
  font-weight: 600;
}

/* Foco sutil dentro del control segmentado (overflow:hidden recorta el
   outline global): anillo interno tenue en lugar de contorno externo. */
.ax-seg-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ax-primary) 55%, transparent);
}

/* =========================================================
    33c. TIRA DE SECUENCIA Y ECHO COMPUTADO (Guiada v9.3)
    Contenido panel-span-full que es una secuencia ORDENADA
    (ruta, turno, prioridad): la tabla representa conjuntos;
    la tira representa orden + punto de insercion.
    ========================================================= */

.seq-strip-wrap {
  overflow-x: auto;
  padding: var(--ax-space-2) 2px var(--ax-space-4);
  scrollbar-width: thin;
}

.seq-strip {
  display: flex;
  align-items: center;
  min-width: max-content;
}

.seq-node {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2);
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--ax-alpha-line);
  border-radius: var(--ax-radius-full);
  background: var(--ax-bg-card);
  white-space: nowrap;
  transition: border-color var(--ax-transition-fast);
}

.seq-node:hover {
  border-color: var(--ax-alpha-line-strong);
}

.seq-node-num {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ax-surface-2);
  color: var(--ax-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ax-font-size-xs);
  font-weight: 700;
  font-family: var(--ax-font-mono);
}

.seq-node-body {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.seq-node-title {
  font-size: var(--ax-font-size-sm);
  font-weight: 600;
  color: var(--ax-text-primary);
  font-family: var(--ax-font-mono);
}

.seq-node-sub {
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-secondary);
}

/* nodo del registro en creacion (el que se va a insertar) */
.seq-node.pending {
  border: 1.5px solid var(--ax-primary);
  background: var(--ax-primary-50);
}

.seq-node.pending .seq-node-num {
  background: var(--ax-primary);
  color: var(--ax-primary-contrast);
  font-size: var(--ax-font-size-2xs);
  font-weight: 800;
}

.seq-node.pending .seq-node-title {
  color: var(--ax-primary-700);
}

/* slot de insercion: el "+" entre nodos codifica referencia + direccion */
.seq-slot {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px dashed var(--ax-alpha-line-strong);
  background: var(--ax-bg-card);
  color: var(--ax-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all var(--ax-transition-fast);
}

.seq-slot:hover {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
  background: var(--ax-primary-50);
}

.seq-slot.selected {
  border-style: solid;
  border-color: var(--ax-primary);
  background: var(--ax-primary);
  color: var(--ax-primary-contrast);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ax-primary) 15%, transparent);
}

.seq-slot.selected::after {
  content: 'AQUÍ';
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--ax-font-size-2xs);
  font-weight: 800;
  letter-spacing: var(--ax-letter-spacing-widest);
  color: var(--ax-primary);
}

/* echo de un valor derivado de la captura (panel administrativo) */
.pos-readout {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2x5);
  padding: var(--ax-space-2x5) var(--ax-space-3);
  border: 1px dashed var(--ax-alpha-line-strong);
  border-radius: var(--ax-radius-md);
  background: var(--ax-gray-50);
}

.pos-readout-value {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-font-size-3xl);
  font-weight: 600;
  color: var(--ax-primary);
  line-height: 1;
}

.pos-readout-label {
  display: block;
  font-size: var(--ax-font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-widest);
  color: var(--ax-text-muted);
}

.pos-readout-sub {
  display: block;
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-secondary);
}

/* =========================================================
    34. ANCHO NATURAL DE CAMPOS (formularios cortos)
    ========================================================= */

.ax-field-sm .mud-input-control {
  max-width: 16.6667%;
}

.ax-field-md .mud-input-control {
  max-width: 33.3333%;
}

.ax-field-lg .mud-input-control {
  max-width: 66.6667%;
}

.ax-field-full .mud-input-control {
  max-width: 100%;
}

/* =========================================================
   34. CAMPOS ESTRUCTURALES
   ========================================================= */

.ax-structural .mud-input-control,
.ax-structural .mud-select {
  background: var(--ax-surface-2);
  border-radius: var(--ax-radius);
  padding: 0 4px;
}

.ax-structural .mud-input-outlined-border {
  border-color: var(--ax-border-soft);
}

.ax-structural .mud-input-label-outlined {
  font-weight: 600;
  color: var(--ax-text-primary);
}

/* =========================================================
   35. TABLAS DENSAS ERP
   ========================================================= */

.erp-table {
  --mud-table-rows-border-bottom: 1px solid var(--ax-grid-border-subtle);
  /* Espaciado vertical de las filas del cuerpo. Fuente única para todas las listas
     ERP: al subirlo, todos los listados (Terceros, Medidores, Inventario, etc.)
     respiran igual. El piso real del alto lo pone el contenido de la celda. */
  --ax-row-pad-y: 6px;
  background-color: var(--ax-grid-bg);
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--ax-font-size-md);
}

.erp-table thead tr {
  height: 32px;
  background-color: var(--ax-grid-header-bg);
  border-bottom: 1px solid var(--ax-grid-border-subtle);
}

.erp-table thead th {
  padding: 12px 16px;
  font-size: var(--ax-font-size-xs); /* 11px — como .data-table th de la propuesta */
  font-weight: 700;
  color: var(--ax-grid-header-text);
  letter-spacing: var(--ax-letter-spacing-wider);
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

.erp-table thead th:hover {
  color: var(--ax-text-primary);
}

.erp-table tbody tr {
  height: auto;
  min-height: 32px;
  border-bottom: 1px solid var(--ax-grid-border-subtle);
  background-color: var(--ax-surface);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.erp-table tbody tr:hover {
  background-color: var(--ax-grid-row-hover) !important;
}

.erp-table tbody tr.erp-table-row-alt {
  background-color: var(--ax-surface);
}

.erp-table tbody tr.erp-table-row-alt:hover {
  background-color: var(--ax-grid-row-hover) !important;
}

.erp-table tbody td {
  padding: var(--ax-row-pad-y) 12px;
  font-size: var(--ax-font-size-md);
  line-height: var(--ax-line-height-sm);
  font-weight: 450;
  color: var(--ax-grid-text);
  white-space: nowrap;
}

.erp-table thead th {
  padding: 6px 12px;
  font-size: var(--ax-font-size-md);
  font-weight: var(--ax-grid-header-weight, 600);
  color: var(--ax-grid-header-text);
  border-bottom: 1px solid var(--ax-border);
  white-space: nowrap;
  user-select: none;
}

.erp-table tbody tr.erp-row-selected {
  background-color: var(--ax-primary-50) !important;
  outline: none;
}

.erp-table tbody tr.erp-row-selected:hover {
  background-color: var(--ax-primary-50) !important;
}

.erp-table tbody tr.erp-row-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--ax-primary);
}

/* Hover del listado maestro del Explorer: efecto transitorio al pasar el mouse.
   Al quitarlo, la fila vuelve al fondo neutro salvo que sea la seleccionada
   (click/teclado), que conserva su resaltado persistente. */

/* Modo natural: el grid solo ocupa lo que sus columnas necesitan */
.erp-table.erp-table-natural,
.erp-table.erp-table-natural .mud-table-root {
  width: fit-content;
}

/* Contenedor padre permite scroll horizontal */
.erp-table-wrapper {
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* En cualquier panel maestro del Explorer, la tabla ocupa TODO el ancho del contenedor.
   El MudPaper (card-flat erp-table-wrapper) es el contenedor directo de la tabla:
   se elimina su padding para que la tabla llegue borde a borde. */
.master-pane .erp-table-wrapper,
.master-pane .erp-table-wrapper .mud-paper,
.master-pane .erp-table-wrapper.card-flat {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  padding: 0 !important;
  display: block;
  flex: 1 1 auto;
  align-self: stretch;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

/* La tabla llena todo el ancho del panel (sin padding lateral) */
.master-pane .erp-table {
  width: 100% !important;
  max-width: 100%;
  table-layout: fixed;
}

/* v9.6: dentro del panel de vidrio la tabla no pinta fondo propio, para que la
   superficie semitransparente del panel (y el degradado de página detrás) se vean.
   Los estados hover/seleccionado siguen pintando su color. */
.master-pane .erp-table,
.master-pane .erp-table tbody tr,
.master-pane .erp-table tbody tr.erp-table-row-alt {
  background-color: transparent;
}

.master-pane .erp-table,
.master-pane .erp-table-wrapper .mud-table-root,
.master-pane .erp-table-wrapper table {
  width: 100%;
  max-width: 100%;
}

/* Datos del directorio pegados al borde izquierdo del panel */
.master-pane .erp-table .mud-table-cell,
.master-pane .erp-table .mud-table-head .mud-table-cell {
  padding-left: 0;
}

/* Celdas del body */
.erp-table .mud-table-cell,
.erp-table.mud-table-dense .mud-table-cell {
  padding: 2px 12px;
  font-size: var(--ax-font-size-md);
  line-height: var(--ax-line-height-sm);
  font-weight: 450;
  color: var(--ax-grid-text);
}

/* Forzar tamaño, color y peso uniforme en MudText dentro de celdas */
.erp-table .mud-table-cell .mud-typography-body2 {
  font-size: var(--ax-font-size-md) !important;
  font-weight: 450 !important;
  color: var(--ax-grid-text) !important;
}

/* Header cells */
.erp-table .mud-table-head .mud-table-cell,
.erp-table.mud-table-dense .mud-table-head .mud-table-cell {
  padding: 5px 12px;
  font-size: var(--ax-font-size-md);
  line-height: var(--ax-line-height-sm);
  font-weight: var(--ax-grid-header-weight);
  color: var(--ax-grid-header-text);
  letter-spacing: var(--ax-letter-spacing-wide);
  background-color: var(--ax-grid-header-bg);
  border-bottom: 1px solid var(--ax-grid-border-subtle);
}

/* Filas del body — fondo blanco uniforme, anular striped de MudBlazor */
.erp-table .mud-table-body .mud-table-row,
.erp-table.mud-table-dense .mud-table-body .mud-table-row,
.erp-table.mud-table-striped .mud-table-body .mud-table-row {
  height: auto;
  min-height: 32px;
  transition: background-color 150ms ease;
  border-bottom: 1px solid var(--ax-grid-border-subtle);
  background-color: var(--ax-surface) !important;
  cursor: pointer;
}

.erp-table .mud-table-body .mud-table-row:nth-child(even),
.erp-table.mud-table-dense .mud-table-body .mud-table-row:nth-child(even),
.erp-table.mud-table-striped .mud-table-body .mud-table-row:nth-child(even) {
  background-color: var(--ax-surface) !important;
}

/* Hover plano y sutil */
.erp-table .mud-table-row:hover,
.erp-table.mud-table-dense .mud-table-row:hover,
.erp-table.mud-table-striped .mud-table-body .mud-table-row:hover {
  background: var(--ax-grid-row-hover) !important;
}

.erp-table .mud-table-body .mud-table-row:nth-child(even):hover,
.erp-table.mud-table-dense .mud-table-body .mud-table-row:nth-child(even):hover,
.erp-table.mud-table-striped .mud-table-body .mud-table-row:nth-child(even):hover {
  background-color: var(--ax-grid-row-hover) !important;
}

/* Hover plano y sutil */
.erp-table .mud-table-row:hover,
.erp-table.mud-table-dense .mud-table-row:hover {
  background: var(--ax-grid-row-hover);
}

/* Filas alternadas (striped) — fondo blanco uniforme */
.erp-table .mud-table-body .mud-table-row:nth-child(even) {
  background-color: var(--ax-surface);
}

.erp-table .mud-table-body .mud-table-row:nth-child(even):hover {
  background-color: var(--ax-grid-row-hover);
}

/* Header row */
.erp-table .mud-table-head .mud-table-row,
.erp-table.mud-table-dense .mud-table-head .mud-table-row {
  height: 32px;
}

.erp-table .mud-table-cell .mud-checkbox {
  padding: 0;
}

.erp-table .mud-icon-button {
  width: 20px;
  height: 20px;
  padding: 2px;
}

.erp-table .mud-chip {
  height: 18px;
  font-size: var(--ax-font-size-xs);
  padding: 0 4px;
}

.erp-table .mud-chip .mud-icon-root {
  font-size: var(--ax-font-size-sm);
}

/* Paginador */
.erp-paginator .mud-table-pagination-toolbar {
  min-height: 24px;
  padding: 0 4px;
}

.erp-paginator .mud-table-pagination-select {
  font-size: var(--ax-font-size-xs);
}

/* =========================================================
   36. COLUMNAS DE ANCHO FIJO Y MAX-WIDTH
   ========================================================= */

/* Alineacion por defecto: IZQUIERDA para todas las celdas */
.erp-table .mud-table-cell {
  text-align: left;
}

/* Encabezados de columna centrados */
.erp-table .mud-table-head .mud-table-cell {
  text-align: center !important;
}

/* Alineacion derecha para numericos */
.erp-table .cell-numeric,
.erp-table .mud-table-cell.cell-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--ax-font-features-data);
}

/* Links / codigos de tabla */
.erp-table .cell-id-link,
.erp-table .mud-table-cell.cell-id-link {
  color: var(--ax-indigo-600);
  font-weight: 500;
  cursor: pointer;
  transition: color 150ms ease;
}

.erp-table .cell-id-link:hover,
.erp-table .mud-table-cell.cell-id-link:hover {
  color: var(--ax-indigo-700);
  text-decoration: underline;
}

/* Alineacion centro para iconos/acciones */
.erp-table .cell-center,
.erp-table .mud-table-cell.cell-center {
  text-align: center;
}

/* Estado: ancho predecible para chips/badges */
.erp-table .col-status,
.erp-table .mud-table-cell.col-status {
  width: 100px;
  white-space: nowrap;
}

/* Acciones: fit-content para iconos */
.erp-table .col-actions,
.erp-table .mud-table-cell.col-actions {
  width: 1%;
  white-space: nowrap;
}

/* ID / Codigo: ancho fijo compacto */
.erp-table .col-id,
.erp-table .mud-table-cell.col-id {
  width: 80px;
  text-align: left;
  white-space: nowrap;
}

/* Fechas: ancho fijo para formato dd/MM/yyyy */
.erp-table .col-date,
.erp-table .mud-table-cell.col-date {
  width: 110px;
  white-space: nowrap;
}

/* Importes / Numericos: ancho fijo + alineacion derecha */
.erp-table .col-amount,
.erp-table .mud-table-cell.col-amount {
  width: 120px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Columnas con max-width (ellipsis + tooltip) */
.erp-table .col-max-sm,
.erp-table .mud-table-cell.col-max-sm  { max-width: 150px; }

.erp-table .col-max-md,
.erp-table .mud-table-cell.col-max-md  { max-width: 300px; }

.erp-table .col-max-lg,
.erp-table .mud-table-cell.col-max-lg  { max-width: 450px; }

.erp-table .col-max-xl,
.erp-table .mud-table-cell.col-max-xl  { max-width: 600px; }

/* Ellipsis en columnas con limite */
.erp-table .mud-table-cell[class*="col-max"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile: limites mas agresivos */
@media (max-width: 599px) {
  .erp-table .col-max-sm,
  .erp-table .mud-table-cell.col-max-sm  { max-width: 80px; }

  .erp-table .col-max-md,
  .erp-table .mud-table-cell.col-max-md  { max-width: 120px; }

  .erp-table .col-max-lg,
  .erp-table .mud-table-cell.col-max-lg  { max-width: 160px; }

  .erp-table .col-max-xl,
  .erp-table .mud-table-cell.col-max-xl  { max-width: 200px; }

  /* En mobile, elimina el max-width fijo para permitir texto fluido */
  .erp-table .mud-table-cell[class*="col-max"] {
    max-width: none;
    white-space: normal;
    overflow: visible;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* =========================================================
   35.5. ANULACION DE ERP-TABLE EN MOBILE
   ========================================================= */

@media (max-width: 599px) {
  /* Restaurar ancho natural de la tabla */
  .erp-table.erp-table-natural,
  .erp-table.erp-table-natural .mud-table-root {
    width: 100%;
    min-width: 100%;
  }

  /* Eliminar scroll horizontal forzado del wrapper */
  .erp-table-wrapper {
    overflow-x: visible;
  }

  /* Padding reducido en mobile: menos espacio vertical entre filas */
  .erp-table .mud-table-cell,
  .erp-table.mud-table-dense .mud-table-cell {
    padding: 6px 16px;
    font-size: var(--ax-font-size-sm);
    color: var(--ax-text-primary) !important;
  }

  .erp-table .mud-table-cell .mud-typography-body2 {
    font-size: var(--ax-font-size-sm);
  }

  /* Restaurar header cells */
  .erp-table .mud-table-head .mud-table-cell,
  .erp-table.mud-table-dense .mud-table-head .mud-table-cell {
    padding: 6px 16px;
    font-size: var(--ax-font-size-sm);
    font-weight: 700;
    color: var(--ax-text-secondary);
    border-bottom: none;
  }

  /* Restaurar filas */
  .erp-table .mud-table-row,
  .erp-table.mud-table-dense .mud-table-row {
    min-height: auto;
    border-bottom: none;
  }

  .erp-table .mud-table-row:hover,
  .erp-table.mud-table-dense .mud-table-row:hover {
    background: transparent;
  }

  /* Restaurar header row */
  .erp-table .mud-table-head .mud-table-row,
  .erp-table.mud-table-dense .mud-table-head .mud-table-row {
    height: auto;
  }

  /* Restaurar checkbox */
  .erp-table .mud-table-cell .mud-checkbox {
    padding: inherit;
  }

  /* Restaurar icon buttons */
  .erp-table .mud-icon-button {
    width: 36px;
    height: 36px;
    padding: 6px;
  }

  /* Restaurar chips */
  .erp-table .mud-chip {
    height: auto;
    font-size: var(--ax-font-size-lg);
    padding: inherit;
  }

  .erp-table .mud-chip .mud-icon-root {
    font-size: 1rem;
  }

  /* Eliminar anchos fijos de columnas */
  .erp-table .col-status,
  .erp-table .mud-table-cell.col-status,
  .erp-table .col-actions,
  .erp-table .mud-table-cell.col-actions,
  .erp-table .col-id,
  .erp-table .mud-table-cell.col-id,
  .erp-table .col-date,
  .erp-table .mud-table-cell.col-date,
  .erp-table .col-amount,
  .erp-table .mud-table-cell.col-amount {
    width: auto;
    min-width: auto;
    white-space: normal;
    text-align: inherit;
  }

  /* Restaurar alineaciones especificas */
  .erp-table .cell-numeric,
  .erp-table .mud-table-cell.cell-numeric,
  .erp-table .col-amount,
  .erp-table .mud-table-cell.col-amount,
  .erp-table .cell-center,
  .erp-table .mud-table-cell.cell-center {
    text-align: inherit;
  }

  /* Restaurar paginador MudDataGrid */
  .erp-paginator .mud-table-pagination-toolbar {
    min-height: auto;
    padding: inherit;
  }

  .erp-paginator .mud-table-pagination-select {
    font-size: var(--ax-font-size-lg);
  }

  /* === Native HTML table → stacked cards en mobile === */

  .erp-table-wrapper {
    overflow-x: visible;
  }

  .erp-table,
  .erp-table tbody,
  .erp-table thead {
    display: block;
  }

  .erp-table thead {
    display: none;
  }

  .erp-table tbody tr {
    display: block;
    background: var(--ax-bg-card);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius);
    margin-bottom: var(--ax-space-3);
    padding: var(--ax-space-2);
    box-shadow: var(--ax-shadow-xs);
    transition: box-shadow var(--ax-transition-base);
  }

  .erp-table tbody tr:hover {
    box-shadow: var(--ax-shadow-sm);
  }

  .erp-table tbody tr.erp-row-selected {
    border-left: 3px solid var(--ax-primary);
    background: color-mix(in srgb, var(--ax-primary-50) 60%, var(--ax-bg-card));
  }

  .erp-table tbody tr.erp-row-selected:hover {
    background: color-mix(in srgb, var(--ax-primary-50) 60%, var(--ax-bg-card));
  }

  .erp-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-2);
    padding: 6px 8px;
    font-size: 0.8rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    border-bottom: 1px solid var(--ax-border);
  }

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

  .erp-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--ax-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex: 0 0 auto;
  }

  .erp-table tbody td > * {
    text-align: right;
    flex: 1 1 auto;
  }

  /* Paginator stack en mobile */
  .page-root > .erp-paginator-bar {
    flex-direction: column;
    gap: var(--ax-space-1) !important;
  }

  .page-root > .erp-paginator-bar > div {
    width: 100%;
    justify-content: space-between;
  }

  /* Ocultar record count en mobile (ahorra espacio) */
  .ax-record-count {
    display: none;
  }
}

/* =========================================================
   37. BREADCRUMB
   ========================================================= */

.erp-breadcrumb {
  padding: 8px 16px 4px 16px;
  margin-bottom: 0;
}

/* Dentro de .page-root el gutter de la página ya es el margen: la miga no suma el suyo (16px)
   y queda alineada con el título y el contenido de la pantalla. En pantallas sin .page-root la
   miga conserva su padding, porque es su único margen. */
.page-root .erp-breadcrumb {
  padding-left: 0;
  padding-right: 0;
}

.erp-breadcrumb .mud-breadcrumbs {
  padding: 0;
  margin: 0;
}

.erp-breadcrumb .mud-breadcrumbs-item {
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-secondary);
}

.erp-breadcrumb .mud-breadcrumbs-item a:hover {
  color: var(--ax-primary);
  text-decoration: underline;
}

/* Ultimo item: color primary */
.erp-breadcrumb .mud-breadcrumbs-item:last-child,
.erp-breadcrumb .mud-breadcrumb-item:last-child,
.erp-breadcrumb li:last-child .mud-breadcrumbs-item,
.erp-breadcrumb li:last-child .mud-breadcrumb-item,
.erp-breadcrumb li:last-child > a,
.erp-breadcrumb li:last-child > span,
.erp-breadcrumb li:last-child .mud-typography,
.erp-breadcrumb li:last-child [class*="mud-typography"] {
  color: var(--ax-primary);
  font-weight: 500;
}

.erp-breadcrumb .mud-breadcrumbs-separator {
  font-size: 1rem;
  color: var(--ax-text-muted);
}

/* =========================================================
   38. APPBAR ACTIONS DENSAS
   ========================================================= */

.appbar-actions-wrapper .mud-button {
  text-transform: none;
  letter-spacing: var(--ax-letter-spacing-wider);  /* aire entre letras para los CTA del AppBar */
  font-size: var(--ax-font-size-base);
  font-weight: 500;      /* el botón de acción no compite con el título de la página */
  border-radius: var(--ax-radius);
  min-height: 26px;
  padding: 3px 10px;
  transition: all var(--ax-transition-fast);
}

/* =========================================================
   39. RIGHT DETAIL DRAWER
   ========================================================= */

.right-detail-drawer .mud-drawer {
  background: var(--ax-bg-card);
  border-left: 1px solid var(--ax-border);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Drawer anclado: el panel arranca bajo las dos filas del AppBar en lugar de
   cubrirlas. El aside del MudDrawer carga puestas ambas clases (mud-drawer +
   el modificador), por eso se apunta directo al elemento y no con descendiente.
   Al liberar la franja del AppBar, la fila de acciones (donde FormBase registra
   «Guardar») queda visible y clicable. */
.right-detail-drawer.right-detail-drawer--docked {
  top: var(--ax-appbar-height) !important;
  height: calc(100vh - var(--ax-appbar-height)) !important;
  display: flex;
  flex-direction: column;
}

.right-detail-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ax-border);
  gap: var(--ax-space-2);
}

.right-detail-drawer-header.has-custom-header {
  align-items: flex-start;
}

.right-detail-drawer-header-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-1);
}

.right-detail-drawer-body {
  flex: 1;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
}

.right-detail-drawer-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--ax-border);
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2);
}

/* =========================================================
   39.1 DETALLE EN DRAWER
   ========================================================= */

.drawer-detail-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2);
}

.drawer-detail-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ax-text-primary);
  line-height: 1.25;
}

.drawer-detail-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ax-space-2);
  font-size: var(--ax-font-size-lg);
  color: var(--ax-text-secondary);
}

.drawer-detail-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ax-space-1);
  margin-top: var(--ax-space-1);
}

.drawer-detail-section {
  margin-bottom: var(--ax-space-4);
}

.drawer-detail-section:last-child {
  margin-bottom: 0;
}

.drawer-detail-section-title {
  font-size: var(--ax-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-wider);
  color: var(--ax-text-muted);
  margin-bottom: var(--ax-space-2);
}

.drawer-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ax-space-3);
}

.drawer-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-detail-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ax-font-size-sm);
  color: var(--ax-text-muted);
}

.drawer-detail-label .mud-icon-size-small {
  font-size: var(--ax-font-size-lg);
  opacity: 0.7;
}

.drawer-detail-field-wide {
  grid-column: 1 / -1;
}

.drawer-detail-value {
  font-size: var(--ax-font-size-lg);
  font-weight: 500;
  color: var(--ax-text-primary);
  word-break: break-word;
}

.drawer-detail-value-empty {
  color: var(--ax-text-muted);
  font-style: italic;
}

/* =========================================================
   40. ICONO DE SECCION ERP
   ========================================================= */

.erp-section-header-icon {
  color: var(--ax-primary);
}

/* =========================================================
    40. GRIDS DE FORMULARIO ERP (1, 2 y 3 columnas con proporciones)
    ========================================================= */

/* Grid de 1 columna (catálogos simples, hasta 6 campos) */
.erp-form-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ax-space-4);
  align-items: start;
  max-width: 600px;
}

/* En formularios de 1 columna, todos los items ocupan el ancho completo */
.erp-form-grid-1 .mud-grid-item,
.erp-form-grid-1 .mud-grid-item.xs-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* En mobile, el grid de 1 columna ocupa todo el ancho disponible */
@media (max-width: 599px) {
  .erp-form-grid-1 {
    max-width: 100%;
  }
}

/* Grid de 2 columnas (entidades medianas, hasta 12 campos)
   Sin tope de ancho: la captura llena la hoja en desktop-first.
   El colapso a 1 columna se decide por el ANCHO DEL CONTENEDOR
   (ver @container sobre .erp-form-sheet), no por el viewport. */
.erp-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ax-space-4);
  align-items: start;
}

/* Modificadores de proporción para 2 columnas */
.erp-form-grid-2-60-40 { grid-template-columns: minmax(0, 60%) minmax(0, 40%); }
.erp-form-grid-2-40-60 { grid-template-columns: minmax(0, 40%) minmax(0, 60%); }
.erp-form-grid-2-70-30 { grid-template-columns: minmax(0, 70%) minmax(0, 30%); }
.erp-form-grid-2-30-70 { grid-template-columns: minmax(0, 30%) minmax(0, 70%); }

/* Grid de 3 columnas (entidades maestras complejas, más de 12 campos) */
.erp-form-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ax-space-5);
  align-items: start;
}

/* Modificadores de proporción para 3 columnas */
.erp-form-grid-3-50-25-25 { grid-template-columns: minmax(0, 50%) minmax(0, 25%) minmax(0, 25%); }
.erp-form-grid-3-40-40-20 { grid-template-columns: minmax(0, 40%) minmax(0, 40%) minmax(0, 20%); }
.erp-form-grid-3-25-50-25 { grid-template-columns: minmax(0, 25%) minmax(0, 50%) minmax(0, 25%); }

.erp-form-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-3);
}

.erp-column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  padding: 0 0 6px 0;
  font-size: var(--ax-font-size-base);
  font-weight: 700;
  letter-spacing: var(--ax-letter-spacing-wide);
  color: var(--ax-text-primary);
  border-bottom: 1px solid var(--ax-border);
}

/* Grupo interno dentro de una columna ERP */
.erp-column-group {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2);
}

/* Grupos a nivel de hoja (fuera del grid de columnas — ej. grupos full-width
   como 'Entrega y Ruta'): respiro entre momentos de decision (Guiada, >= space-4) */
.erp-form-sheet > .erp-column-group:not(:first-child) {
  margin-top: var(--ax-space-5);
}

.erp-column-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.845rem;
  font-weight: 600;
  color: var(--ax-text-primary);
  padding: 0;
  margin: 0 0 4px 0;
}

.erp-field-full {
  width: 100%;
}

.erp-field-half {
  width: 100%;
}

/* Colapso por ANCHO DE HOJA (container query): con el drawer abierto o zoom
   alto la hoja mide menos que el viewport; decidir por viewport dejaba
   2 columnas ilegibles o colapsaba demasiado tarde. */
@container (max-width: 900px) {
  .erp-form-grid-2,
  .erp-form-grid-2-60-40,
  .erp-form-grid-2-40-60,
  .erp-form-grid-2-70-30,
  .erp-form-grid-2-30-70,
  .erp-form-grid-3,
  .erp-form-grid-3-50-25-25,
  .erp-form-grid-3-40-40-20,
  .erp-form-grid-3-25-50-25 {
    grid-template-columns: 1fr;
    gap: var(--ax-space-3);
  }
}

@media (max-width: 600px) {
  .erp-column-title {
    margin-bottom: 6px;
  }

  .erp-column-group-title {
    font-size: var(--ax-font-size-base);
    padding: 0 0 4px 0;
    margin-bottom: 2px;
  }
}


/* Comportamiento solamente */
/* Ancho fijo */
.col-fixed {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Ancho natural según contenido */
.col-natural {
    width: fit-content;
    min-width: 120px;
    max-width: 280px;
    white-space: nowrap;
}

/* Absorbe el espacio restante */
.col-fill {
    width: auto;
    min-width: 0;
}

/* =========================================================
   41. FORM FIELD - Etiqueta externa AXIOMA
   ========================================================= */

.ax-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--ax-form-gap-label-input);  /* label -> input (v9.x) */
  margin-bottom: 6px;    /* respiracion entre campos, complementa Spacing="1" */
  width: 100%;
}

.ax-form-field-label {
  display: block;
  font-size: calc(var(--ax-font-size-base) + 4px); /* 17px — label sobre el dato (v9.1, +4px) */
  font-weight: 500;
  color: color-mix(in srgb, var(--ax-text-secondary) 68%, var(--ax-text-muted)); /* sube a primary cuando el campo enfoca (v9.5) */
  line-height: 1.2;
  padding: 0 4px;
  text-transform: none;      /* mayúscula inicial, no all-caps */
  letter-spacing: 0.01em;
  transition: color var(--ax-transition-fast);
}

/* Foco sincronizado: al hacer clic/teclear en el input, el label toma el
   mismo color del borde de foco (.mud-input.mud-focus cubre textfields;
   :focus cubre selects y controles propios). */
.ax-form-field:has(.mud-input.mud-focus) .ax-form-field-label,
.ax-form-field:has(:focus) .ax-form-field-label {
  color: var(--ax-primary);
}

/* Indicador de obligatorio: asterisco coral (v9.x), coincide con altA */
.ax-form-field-required {
  display: inline;
  color: var(--ax-coral-500);
  font-weight: 700;
  margin-left: 2px;
}

.ax-form-field-input {
  width: 100%;
}

/* Valor de solo lectura dentro de un FormField (panel informativo): sin caja de input,
   con el mismo alto de fila que un control outlined para no romper la rejilla de filas. */
.ax-form-field-readonly {
  display: flex;
  align-items: center;
  min-height: 32px;   /* = alto del input outlined (overrides v9.3) */
  padding: 0 4px;
  font-size: var(--ax-font-size-base);
  font-weight: 600;
  color: var(--ax-text-primary);
}

/* Ajuste sutil para inputs outlined de UNA LÍNEA sin label interno.
   El textarea multiline NO recibe este padding (usa su propio padding en overrides).
   v9.1: con altura y line-height iguales el texto centra solo; se anula
   la compensacion de 1px/3px que existia para el texto de 14px.
   (La altura la fija overrides: 32px desde v9.3 · B′.) */
.ax-form-field .mud-input-control .mud-input.mud-input-outlined:not(:has(> textarea)) {
  padding-top: 0;
  padding-bottom: 0;
}

/* =========================================================
   41b. MODO FILA - etiqueta a la izquierda (Guiada, v9.4)
   Opt-in por panel: .panel-body--rows. Solo desktop (>=961px);
   por debajo del breakpoint se hereda el layout original
   (label arriba, input abajo, ancho 100%) sin overrides.
   ========================================================= */
@media (min-width: 961px) {
  .form-grid .panel-body--rows .ax-form-field {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    margin-bottom: 0;
    padding: 3px 0;
  }

  .form-grid .panel-body--rows .ax-form-field-label {
    text-align: right;
  }

  /* Excepcion multilinea: etiqueta arriba, alineada a la izquierda.
     gap:0 anula el row-gap heredado del layout base; la separacion la fija
     solo el margin-bottom del label (4px). */
  .form-grid .panel-body--rows .ax-form-field--stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .form-grid .panel-body--rows .ax-form-field--stack .ax-form-field-label {
    text-align: left;
    margin-bottom: var(--ax-form-gap-label-input);
  }

  /* El label SIEMPRE queda en su columna de 130px, sin importar el ancho del
     campo: el tamaño del input no mueve la etiqueta (.ax-w-lg/.ax-w-full solo
     limitan el ancho del control, no su ubicación). */

  /* Excepcion segmentada: un lg/full cuyo control es .ax-seg NO apila la
     etiqueta — el seg mide lo que miden sus opciones (ancho intrinseco),
     no es un valor largo que necesite aire. La etiqueta vuelve a su
     columna de 130px, alineada a la derecha. */
  .form-grid .panel-body--rows .ax-form-field.ax-w-lg:has(.ax-seg),
  .form-grid .panel-body--rows .ax-form-field.ax-w-full:has(.ax-seg) {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
  }

  /* La selección por tarjetas conserva la misma columna de etiqueta que los
     demás controles, aunque el campo use todo el ancho disponible. */
  .form-grid .panel-body--rows .ax-form-field.ra-operario-field {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
  }

  .form-grid .panel-body--rows .ax-form-field.ra-operario-field .ax-form-field-label {
    text-align: right;
    margin-bottom: 0;
  }

  .form-grid .panel-body--rows .ax-form-field.ra-operario-field .ax-form-field-input {
    max-width: none;
  }

  .ra-ruta-nombre,
  .ra-ruta-periodo {
    display: block;
  }

  .ra-ruta-periodo {
    color: var(--ax-text-muted);
    font-size: var(--ax-font-size-xs);
  }

  .form-grid .panel-body--rows .ax-form-field.ax-w-lg:has(.ax-seg) .ax-form-field-label,
  .form-grid .panel-body--rows .ax-form-field.ax-w-full:has(.ax-seg) .ax-form-field-label {
    text-align: right;
    margin-bottom: 0;
  }

  /* Label alineado a la columna de los demas labels, pero el grupo
     (indicativo + numero) en su propia fila separada debajo. */
  .form-grid .panel-body--rows .ax-field-phone-stacked {
    grid-template-rows: auto auto;
    row-gap: 2px;
  }

  .form-grid .panel-body--rows .ax-field-phone-stacked .ax-form-field-label {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
  }

  .form-grid .panel-body--rows .ax-field-phone-stacked .ax-form-field-input {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Sub-categoria dentro del panel modo fila: agrupa campos afines bajo un titulo. */
  .form-grid .panel-body--rows .ax-rows-group {
    padding-top: 3px;
  }

  /* Fila con accion contigua dentro del panel modo fila (p.ej. Ruta de entrega
     + «Cambiar Ruta»): el campo cede ancho y la accion no se comprime, asi la
     accion vive en el mismo renglon del campo y no en uno propio. */
  .form-grid .panel-body--rows .ax-row-inline {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
    padding: 3px 0;
  }

  .form-grid .panel-body--rows .ax-row-inline .ax-form-field {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    border-top: 0;
    padding: 0;
    margin-bottom: 0;
  }

  .form-grid .panel-body--rows .ax-row-inline > .mud-button-root {
    flex: 0 0 auto;
  }

  .form-grid .panel-body--rows .ax-rows-group-title {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 3px 0;
    text-align: right;
    font-size: var(--ax-font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ax-gray-500);
  }

  /* Anchos semanticos por tipo de dato: el input mide lo que mide el valor.
     xs = codigo corto (6 digitos, NIT) · sm = fechas, tipos, genero
     md = catalogos, identificacion, nombres, telefonos
     lg = valores largos (nombre comercial) · full = libre (email, direccion,
     razon social, textarea, autocomplete) */
  .ax-form-field.ax-w-xs .ax-form-field-input { max-width: 58px; }
  .ax-form-field.ax-w-sm .ax-form-field-input { max-width: 120px; }
  .ax-form-field.ax-w-md .ax-form-field-input { max-width: 190px; }
  .ax-form-field.ax-w-lg .ax-form-field-input { max-width: 270px; }
  .ax-form-field.ax-w-full .ax-form-field-input { max-width: 100%; }
}

/* ===== Wizard de creación de Suscripción ===== */
/* El shell del wizard vive dentro de .erp-form-sheet (page-root > hoja única).
   El stepper y el resumen no llevan cromo de tarjeta propio. */
.wizard-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ax-space-2);
  padding: var(--ax-space-3) var(--ax-space-4);
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-md);
}

/* Stepper dentro de la hoja: se integra como encabezado de la hoja, sin tarjeta */
.wizard-suscripcion .wizard-stepper {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0 10px 0;
  margin-bottom: var(--ax-space-3);
  border-bottom: 1px solid var(--ax-border);
}

/* (v9.1: el tope de .erp-form-grid-2 se elimino; la hoja ya llena el ancho) */

.wizard-step {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--ax-radius-sm);
  transition: background 0.15s ease;
  user-select: none;
}

.wizard-step:hover {
  background: var(--ax-gray-100);
}

.wizard-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ax-gray-200);
  color: var(--ax-gray-600);
  font-size: var(--ax-font-size-base);
  font-weight: 700;
  border: 1px solid var(--ax-border);
}

.wizard-step-active .wizard-step-indicator {
  background: var(--ax-primary);
  color: var(--ax-on-primary);
  border-color: var(--ax-primary);
}

.wizard-step-done .wizard-step-indicator {
  background: var(--ax-success);
  color: var(--ax-on-success);
  border-color: var(--ax-success);
}

.wizard-step-title {
  font-weight: 600;
  color: var(--ax-text-muted);
}

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

.wizard-step-line {
  flex: 0 0 24px;
  height: 2px;
  background: var(--ax-border);
  border-radius: 2px;
}

.wizard-step-line-done {
  background: var(--ax-success);
}

.wizard-actions {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2);
  margin-top: var(--ax-space-2);
}

.wizard-errores {
  margin: 0;
  padding-left: 1.1rem;
}

/* Resumen persistente (columna lateral dentro de la hoja) */
.wizard-resumen {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2);
  position: sticky;
  top: var(--ax-space-4);
}

.wizard-resumen-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  border-radius: var(--ax-radius-sm);
  cursor: pointer;
  transition: background var(--ax-transition-fast);
}

.wizard-resumen-item:hover {
  background: var(--ax-gray-100);
}

.wizard-resumen-item-active {
  background: var(--ax-primary-50);
}

.wizard-resumen-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 960px) {
  .wizard-suscripcion .erp-form-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .wizard-suscripcion .wizard-resumen {
    position: static;
  }
}

/* =========================================================
   50. UTILIDADES DE TEXTO (pulido Fase 5)
   ========================================================= */

.font-weight-bold {
  font-weight: 700;
}

.font-weight-semibold {
  font-weight: 600;
}

.text-transform-none {
  text-transform: none;
}

.empty-state-icon {
  font-size: 48px;
  opacity: 0.5;
}

/* Etiqueta de la estadística: el «qué» del número (pendientes, leídas, avance, completadas…).
   Va un punto por encima del texto atenuado —tono secundario y peso de etiqueta—: la cifra manda,
   pero el rótulo se lee sin esfuerzo. Acompaña a `.kpi-value` / `.kpi-card` en las barras de
   indicadores de todas las pantallas. */
.kpi-label {
  color: var(--ax-text-secondary);
  font-weight: 600;
}

.kpi-value {
  font-weight: 700;
}

.kpi-card {
  display: flex;
  align-items: center;
  gap: var(--ax-space-2);
  padding: var(--ax-space-1) var(--ax-space-2);
  border-radius: var(--ax-radius);
  border: 1px solid var(--ax-border);
  background: var(--ax-bg-card);
}

.bg-gray-50 {
  background-color: var(--ax-gray-50);
}

.code-block {
  font-family: var(--ax-font-mono);
  background-color: var(--ax-gray-900);
  color: var(--ax-success-200);
  padding: var(--ax-space-2);
  border-radius: var(--ax-radius-sm);
}

.callout-info {
  background-color: var(--ax-info-100);
  border-left: 4px solid var(--ax-info);
}

.callout-success {
  background-color: var(--ax-success-100);
  border-left: 4px solid var(--ax-success);
}

.callout-primary {
  background-color: var(--ax-primary-50);
  border-left: 4px solid var(--ax-primary);
}

/* =========================================================
   43. MASTER-DETAIL SPLIT VIEW (opción A)
   ========================================================= */
.master-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: stretch;
  gap: var(--ax-space-3);
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Listados (patrón «list explorer» / «list panel»): las tarjetas de la página usan una sombra
   +10% para despegar un poco más del fondo neutro. Se hereda a los paneles descendientes
   (panel maestro, panel lateral, tarjetas). */
.directory-page,
.master-detail {
  --ax-shadow-panel: var(--ax-shadow-panel-list);
}

.master-detail > .master-pane {
  min-width: 0;
  min-height: 0;
  grid-column: 1;
}

.master-detail > .master-pane .page-root {
  width: 100%;
}

.master-detail > .panel-pane {
  min-width: 0;
  grid-column: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Panel elevado (v9.6): mismo tratamiento de vidrio que el panel maestro. */
  background: var(--ax-panel-bg);
  backdrop-filter: blur(var(--ax-panel-blur));
  -webkit-backdrop-filter: blur(var(--ax-panel-blur));
  border: 1px solid var(--ax-panel-rim);
  border-radius: var(--ax-radius-xl);
  box-shadow: var(--ax-shadow-panel);
  overflow: hidden;
  align-self: stretch;
}
/* Header del panel lateral fijo */
.panel-pane-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ax-space-2);
  padding: var(--ax-space-3) var(--ax-space-4);
  border-bottom: 1px solid var(--ax-border);
}

.panel-pane-header-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-1);
}

/* Cuerpo del panel lateral fijo (scroll propio) */
.panel-pane-body {
  flex: 1;
  min-height: 0;
  padding: var(--ax-space-4);
  overflow-y: auto;
}

/* Footer del panel lateral fijo */
.panel-pane-footer {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2);
  padding: var(--ax-space-3) var(--ax-space-4);
  border-top: 1px solid var(--ax-border);
}

.panel-pane-footer-divider {
  height: 1px;
  background-color: var(--ax-border);
  margin: var(--ax-space-1) 0;
}

/* Estado vacío del panel lateral cuando no hay fila seleccionada */
.panel-pane-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ax-space-2);
  text-align: center;
  padding: var(--ax-space-10) var(--ax-space-4);
  color: var(--ax-text-muted);
  flex: 1;          /* ocupa el panel y centra el mensaje verticalmente */
  min-height: 0;
}

/* =========================================================
   44. PANEL DE BÚSQUEDA PREMIUM (Explorer)
   ========================================================= */

.explorer-search-panel {
  background: var(--ax-bg-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-md);
  box-shadow: var(--ax-shadow-sm);
  padding: var(--ax-space-3);
  margin-bottom: var(--ax-space-3);
}

.explorer-search-box {
  width: 100%;
  max-width: 520px;
  min-width: 360px;
}

.explorer-search-box .mud-input-control {
  width: 100%;
  max-width: 100%;
}

.explorer-search-box .mud-input-control .mud-input {
  width: 100%;
  max-width: 100%;
}

.explorer-search-box .mud-input-control .mud-input > input.mud-input-root {
  font-size: var(--ax-font-size-lg);
}

/* Propuesta A: campo equilibrado de 44 px, cómodo sin perder densidad ERP. */
.explorer-search-box .mud-input-control,
.explorer-search-box .mud-input-control .mud-input {
  height: 44px;
  min-height: 44px;
}

.explorer-search-box .mud-input-control .mud-input {
  display: flex;
  align-items: center;
}

.explorer-search-box .mud-input-control .mud-input > input.mud-input-root {
  height: 44px;
  line-height: 44px;
}

.explorer-search-box .mud-input-adornment-start {
  height: 44px;
  display: inline-flex;
  align-items: center;
}

.explorer-search-box .mud-input-adornment-start .mud-icon {

  font-size: var(--ax-font-size-4xl);
  color: var(--ax-gray-500);
}

.explorer-filter-toggle {
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
  padding: 6px 10px;
}

.explorer-filter-panel {
  margin-top: var(--ax-space-3);
  padding: var(--ax-space-4);
  background: var(--ax-gray-50);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  animation: ax-slide-down 160ms ease-out;
}

@keyframes ax-slide-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.explorer-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ax-space-4);
  align-items: end;
}

.explorer-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-1);
}

.explorer-filter-group-title {
  display: flex;
  align-items: center;
  font-size: var(--ax-font-size-sm);
  font-weight: 600;
  color: var(--ax-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-wider);
}

.explorer-filter-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.explorer-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ax-space-2);
  margin-top: var(--ax-space-3);
  padding-top: var(--ax-space-2);
  border-top: 1px dashed var(--ax-border);
}

.explorer-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--ax-primary-50);
  color: var(--ax-primary-700);
  border: 1px solid color-mix(in srgb, var(--ax-primary) 20%, transparent);
  border-radius: var(--ax-radius-full);
  font-size: var(--ax-font-size-base);
  font-weight: 500;
  line-height: 1;
  transition: all 120ms ease;
}

.explorer-filter-chip:hover {
  background: var(--ax-primary-100);
}

.explorer-filter-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
}

.explorer-filter-chip button:hover {
  opacity: 1;
}

.explorer-filter-chip.chip-success {
  background: var(--ax-success-100);
  color: var(--ax-success-700);
  border-color: color-mix(in srgb, var(--ax-success) 20%, transparent);
}

.explorer-filter-chip.chip-success:hover {
  background: var(--ax-success-200);
}

.explorer-filter-chip.chip-inactive {
  background: var(--ax-gray-100);
  color: var(--ax-gray-700);
  border-color: var(--ax-gray-300);
}

.explorer-filter-chip.chip-inactive:hover {
  background: var(--ax-gray-200);
}

.explorer-filter-chip.chip-default {
  background: var(--ax-info-50);
  color: var(--ax-info-700);
  border-color: color-mix(in srgb, var(--ax-info) 20%, transparent);
}

.explorer-filter-chip.chip-default:hover {
  background: var(--ax-info-100);
}

.explorer-filter-chip-clear {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: transparent;
  color: var(--ax-primary);
  border: none;
  border-radius: var(--ax-radius-full);
  font-size: var(--ax-font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms ease;
}

.explorer-filter-chip-clear:hover {
  background: var(--ax-primary-50);
}

/* =========================================================
   45. DIRECTORIO / TARJETAS (presentación CardTemplate)
   Look prototipo Marinilla: lista de tarjetas + panel detalle.
   ========================================================= */

/* --- Master pane como panel (list-head + cards + footer) ---
   La lista (maestro) ocupa el 36% del ancho; el detalle el 64%. */
/* --- Alto del shell: la fila ocupa el alto disponible bajo el AppBar ---
   El AppBar es fixed y .mud-main-content ya reserva su altura; se descuentan los
   paddings del .page-root. Es `height`, no `min-height`: la fila NO crece con el
   contenido, así que el listado y el panel tienen siempre la misma posición y el
   mismo alto (cada uno scrollea por dentro). */
.master-detail {
  grid-template-columns: minmax(300px, 36fr) minmax(0, 64fr);
  gap: 16px;
  height: calc(100vh - var(--ax-appbar-height) - var(--ax-space-3) - var(--ax-space-4));
}

/* Sin detalle seleccionado: el panel maestro ocupa todo el ancho */
.master-detail > .master-pane:only-child {
  grid-column: 1 / -1;
}

/* Columna maestra: un solo panel que envuelve búsqueda + tabla + paginación */
.master-pane .explorer-page-root {
  width: 100%;
  padding: 0; /* el .page-root base añade 12px 16px: se elimina para que la tabla toque los bordes del panel */
  /* Panel elevado (v9.6): misma superficie de vidrio que .panel — radio amplio,
     sombra en dos capas y aro tenue sobre el degradado de página. */
  background: var(--ax-panel-bg);
  backdrop-filter: blur(var(--ax-panel-blur));
  -webkit-backdrop-filter: blur(var(--ax-panel-blur));
  border: 1px solid var(--ax-panel-rim);
  border-radius: var(--ax-radius-xl);
  box-shadow: var(--ax-shadow-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;   /* llena el alto de la fila del shell */
  min-height: 0;
}

/* El listado (tabla) ocupa el resto del panel y scrollea por dentro:
   el paginador queda anclado al pie y el shell no cambia de alto con el contenido. */
.master-pane .erp-table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.explorer-master-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 16px 0; /* 10px: densidad — libera altura para las 10 filas del master */
}

.explorer-master-header h2 {
  font: 700 var(--ax-font-size-4xl) var(--ax-font-display);
  letter-spacing: var(--ax-letter-spacing-tighter);
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

.explorer-master-header small {
  color: var(--muted);
  font-size: var(--ax-font-size-sm);
  font-weight: 500;
}

/* Estados vacío / cargando dentro del panel (sin doble borde: el panel ya es el contenedor) */
.master-pane .explorer-page-root > .card-flat:not(.erp-table-wrapper) {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 32px 16px;
}

/* --- Buscador + filtros dentro del panel, sin espacio al borde --- */
.explorer-search-panel {
  background: transparent;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 3px 16px 6px 16px; /* el cuadro sube (top 3px) y pierde padding inferior (6px) */
  margin-bottom: 0;
}

.explorer-search-panel .page-header {
  flex-wrap: wrap;
  gap: 8px 10px;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* El .page-header-end está vacío en el Explorer: con gap + space-between robaba ~12px
   al buscador. Al ocultarlo, .page-header-start (flex:1) llena todo el ancho. */
.explorer-search-panel .page-header-end {
  display: none;
}

.explorer-search-box {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.explorer-search-box .mud-input-control,
.explorer-search-box .mud-input-control .mud-input,
.explorer-search-box .mud-input-control .mud-input > input.mud-input-root,
.explorer-search-box .mud-input-adornment-start {
  height: 34.5px;
  min-height: 34.5px;
  line-height: 34.5px;
}

.explorer-search-box .mud-input-adornment-start .mud-icon {
  font-size: 1.1rem;
}

.explorer-search-panel .ax-search-field {
  max-width: none;
  width: 100%;
  min-width: 0;
}

.explorer-search-panel .ax-search-field .mud-input-control {
  width: 100%;
  max-width: 100%;
}

.explorer-search-panel .ax-record-count {
  color: var(--muted);
  font-size: var(--ax-font-size-sm);
}

/* ==== Acciones del buscador (Filtros / Actualizar) — estilo Salesforce ====
   Botones integrados a la derecha del campo de búsqueda: pill compacto con
   borde hairline, fondo de superficie e icono/acento índigo en hover activo. */
.ax-search-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  min-width: 34px;
  padding: 0 11px;
  border: 1px solid var(--ax-border);
  border-radius: 6px;
  background: var(--ax-surface);
  color: var(--ax-text-secondary);
  font: 600 12.5px var(--ax-font-family);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.ax-search-action .mud-icon {
  font-size: 1.05rem;
}

.ax-search-action:hover {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
  background: var(--ax-primary-50);
}

.ax-search-action:active {
  transform: translateY(0);
}

.ax-search-action.active {
  background: var(--ax-primary-100);
  border-color: var(--ax-primary);
  color: var(--ax-primary);
  box-shadow: 0 0 0 3px var(--ax-primary-100);
}

/* Botón de filtros: solo icono (sin etiqueta), cuadrado como el de actualizar */
.explorer-filters-toggle {
  padding: 0;
  width: 34px;
}

.explorer-refresh-btn {
  padding: 0;
  width: 34px;
}

/* El campo de búsqueda ocupa el espacio restante junto al botón Filtros */
.explorer-search-wrapper > .explorer-search-box {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

/* Fila de filtros desplegada bajo el buscador, alineada a la izquierda */
.explorer-search-panel .page-header-start > .explorer-filters-row {
  flex: 1 1 100%;
  min-width: 0;
  width: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* El segmento de filtro con muchas opciones puede envolver a una segunda
   línea dentro de la fila de filtros. Al apilar, cada botón conserva su
   borde completo para que el conjunto se lea como celdas de un segmento. */
.explorer-filters-row .ax-seg {
  flex-wrap: wrap;
  max-width: 100%;
}
.explorer-filters-row .ax-seg .ax-seg-btn {
  border: 1px solid var(--ax-alpha-line);
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
}
.explorer-filters-row .ax-seg .ax-seg-btn:last-child {
  border-right: 1px solid var(--ax-alpha-line);
}
.explorer-filters-row .ax-seg .ax-seg-btn:first-child {
  border-left: 0;
}

/* --- Lista de tarjetas --- */
.explorer-card-list {
  padding: 6px 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: transparent;
}

.explorer-card-item {
  border-radius: 8px;
  margin: 1px 0;
  cursor: pointer;
  outline: none;
  background: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}

.explorer-card-selected {
  border-radius: 8px;
  background: var(--ax-selected);
  box-shadow: inset 0 0 0 1px var(--ax-primary);
}

/* ===== Listado Medidores: tabla de 3 columnas (Medidor + Tipo + Estado) =====
   Mismo tratamiento que el listado de Terceros. GLOBALES (no scoped): las celdas se
   renderizan via RenderTreeBuilder en el Explorer, por lo que el CSS scoped del
   componente NO les aplica. */

.erp-table .med-col-medidor {
  width: 50%;
}

.erp-table .med-col-tipo {
  width: 20%;
}

.erp-table .med-col-estado {
  width: 30%;
}

.erp-table td.med-col-medidor,
.erp-table td.med-col-tipo,
.erp-table td.med-col-estado {
  font-size: var(--ax-font-size-base); /* 13px — body de la referencia */
  line-height: 1.3;
  font-weight: 400;
  white-space: normal;
  vertical-align: middle;
  padding: var(--ax-row-pad-y) 12px;   /* densidad de filas: fuente única --ax-row-pad-y */
}

.med-medidor {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.med-avatar {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 10px;
  background: var(--ax-primary-50);
  color: var(--ax-primary);
}

.med-medidor-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.med-medidor-text b {
  font-weight: 600;
  color: var(--ax-text-primary);
  font-size: var(--ax-font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.med-medidor-text small {
  font-size: var(--ax-font-size-xs); /* 11px — dato secundario */
  color: var(--ax-text-muted);
  font-weight: 500;
  font-family: var(--ax-font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Paginación como footer del panel --- */
.master-pane .erp-paginator-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 8px 16px; /* densidad: libera altura para las 10 filas del master */
  margin: 0;
  color: var(--muted);
  font-size: var(--ax-font-size-sm);
}

.master-pane .erp-paginator-info {
  color: var(--muted);
  font-size: var(--ax-font-size-sm);
  white-space: nowrap;
}

.master-pane .erp-paginator-pages {
  display: flex;
  gap: 6px;
  align-items: center;
}

.master-pane .erp-page-btn {
  min-width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 7px;
  font: 600 12px var(--ax-font-family);
  cursor: pointer;
  padding: 0 6px;
}

.master-pane .erp-page-btn:hover {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
}

.master-pane .erp-page-btn.active {
  background: var(--ax-primary);
  border-color: var(--ax-primary);
  color: var(--ax-primary-contrast-text);
}

/* --- Panel lateral (shell) --- */
.panel-pane {
  /* Panel elevado (v9.6): mismo tratamiento de vidrio que el panel maestro. */
  background: var(--ax-panel-bg);
  backdrop-filter: blur(var(--ax-panel-blur));
  -webkit-backdrop-filter: blur(var(--ax-panel-blur));
  border: 1px solid var(--ax-panel-rim);
  border-radius: var(--ax-radius-xl);
  box-shadow: var(--ax-shadow-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: stretch;
}

/* Fila del breadcrumb con el estado del registro en edición a la derecha */
.form-crumb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 var(--ax-space-8);    /* alinea con el gutter horizontal de .page-root */
}

.form-crumb-row .erp-breadcrumb {
  flex: 1;
  min-width: 0;
}

/* Panel que encierra el estado del registro, alineado a la derecha */
.status-panel {
  display: flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
}

/* Relevancia del breadcrumb en la fila del formulario (armonía con el panel de estado) */
.form-crumb-row .erp-breadcrumb .mud-breadcrumbs-item {
  font-size: var(--ax-font-size-md);
  font-weight: 500;
  color: var(--ax-text-secondary);
}

.form-crumb-row .erp-breadcrumb .mud-breadcrumbs-item:last-child {
  font-weight: 600;
  color: var(--ax-primary);
}
/* ===== Listado Terceros: tabla de 2 columnas (Tercero + Contacto) =====
   GLOBALES (no scoped): las celdas se renderizan via RenderTreeBuilder en el
   Explorer, por lo que el CSS scoped del componente NO les aplica. */

.erp-table .tc-col-tercero {
  width: 55%;
}

.erp-table .tc-col-contacto {
  width: 45%;
}

.erp-table .tc-col-estado {
  width: 0%;
}

.erp-table td.tc-col-tercero,
.erp-table td.tc-col-contacto,
.erp-table td.tc-col-estado {
  font-size: var(--ax-font-size-base); /* 13px — body de la referencia */
  line-height: 1.3;
  font-weight: 400;
  white-space: normal;
  vertical-align: middle;
  padding: var(--ax-row-pad-y) 12px;   /* densidad de filas: fuente única --ax-row-pad-y */
}

.tc-tercero {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tc-avatar {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 10px;
  background: var(--ax-primary-50);
  color: var(--ax-primary);
}

.tc-tercero-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.tc-tercero-text b {
  font-weight: 600; /* .person-name */
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-tercero-text small {
  font-size: var(--ax-font-size-xs); /* 11px — .person-id */
  color: var(--ax-text-secondary);   /* tono subido: el dato se lee, no se adivina */
  font-weight: 500;
  font-family: var(--ax-font-mono); /* JetBrains Mono */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chip de estado dentro de la celda (RenderTreeBuilder del Explorer):
   compacto y alineado al inicio bajo el texto. */
.tc-tercero-text .ax-chip {
  margin-top: 4px;
  align-self: flex-start;
}

.tc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

/* Columna Estado: estado + suscripciones apilados */
.tc-estado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 2px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: var(--ax-font-size-xs); /* 11px — como .status de la propuesta */
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

.chip-estado-activo {
  background: var(--green-soft);
  border-color: transparent;
  color: var(--green);
}

.chip-estado-inactivo {
  background: var(--ax-gray-100);
  border-color: transparent;
  color: var(--muted);
}

.chip-rol {
  background: var(--blue-soft);
  border-color: transparent;
  color: var(--blue);
}

.chip-susc {
  background: var(--gold-soft);
  border-color: transparent;
  color: var(--gold);
}

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

.tc-contacto-val {
  color: var(--ax-text-primary);
  font-weight: 500;
  font-size: var(--ax-font-size-base); /* base — hereda de la celda, como la referencia */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-contacto-tel {
  color: var(--ax-text-secondary); /* tono subido: mismo criterio que .tc-tercero-text small */
  font-weight: 450;
}

/* Listado Conceptos de Cargo: fila de estado y fila de categoría dentro de la
   columna Concepto (el chip de estado baja a su propia fila). */
.tc-concepto-estado {
  margin-top: 3px;
}

.tc-concepto-cat {
  margin-top: 2px;
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-xs);
  font-weight: 500;
}

/* ===== Listado Artículos de Inventario: tabla de 2 columnas (Artículo + Familia) =====
   GLOBALES (no scoped): las celdas se renderizan via RenderTreeBuilder en el
   Explorer, por lo que el CSS scoped del componente NO les aplica. */

.erp-table .pi-col-articulo {
  width: 60%;
}

.erp-table .pi-col-familia {
  width: 40%;
}

.erp-table td.pi-col-articulo,
.erp-table td.pi-col-familia {
  font-size: var(--ax-font-size-base); /* 13px — body de la referencia */
  line-height: 1.3;
  font-weight: 400;
  white-space: normal;
  vertical-align: middle;
  padding: var(--ax-row-pad-y) 12px; /* densidad de filas: fuente única --ax-row-pad-y */
}

.pi-articulo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pi-avatar {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 10px;
  background: var(--ax-primary-50);
  color: var(--ax-primary);
}

.pi-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.pi-text b {
  font-weight: 600;
  color: var(--ax-text-primary);
  font-size: var(--ax-font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pi-text small {
  font-size: var(--ax-font-size-xs); /* 11px — código en mono */
  color: var(--ax-text-muted);
  font-weight: 500;
  font-family: var(--ax-font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pi-familia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.pi-familia-val {
  color: var(--ax-text-primary);
  font-weight: 500;
  font-size: var(--ax-font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   Personalización de paleta y superficies AXIOMA
   ========================================================= */
.palette-picker {
  position: relative;
}

.palette-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  width: 238px;
  padding: 6px;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  background: var(--ax-bg-card);
  box-shadow: var(--ax-shadow-md);
}

.palette-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--ax-radius-sm);
  background: transparent;
  color: var(--ax-text-primary);
  text-align: left;
  cursor: pointer;
}

.palette-option:hover,
.palette-option.selected {
  border-color: var(--ax-border-focus);
  background: var(--ax-primary-50);
}

.palette-option strong,
.palette-option small {
  display: block;
}

.palette-option strong {
  font-size: var(--ax-font-size-sm);
}

.palette-option small {
  margin-top: 2px;
  color: var(--ax-text-secondary);
  font-size: var(--ax-font-size-2xs);
}

.palette-swatch {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--ax-radius-full);
}

.palette-swatch-teal { background: var(--ax-palette-teal); }
.palette-swatch-indigo { background: var(--ax-palette-indigo); }
.palette-swatch-electrico { background: var(--ax-palette-electrico); }
.palette-swatch-cian { background: var(--ax-palette-cian); }
.palette-check {
  margin-left: auto;
  color: var(--ax-primary);
  font-weight: 800;
}

/* =========================================================
   SELECTOR DE ESCALA DE TIPOGRAFÍA — muestra "A" en el menú.
   Tamaños fijos (px) para que la previsualización no se vea
   afectada por la escala activa.
   ========================================================= */
.fontscale-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex: none;
  font-weight: 700;
  line-height: 1;
  color: var(--ax-primary);
}

.fontscale-a-sm { font-size: 12px; }
.fontscale-a-md { font-size: 15px; }
.fontscale-a-lg { font-size: 18px; }

/* Contrato base de cards: una superficie, un borde y una elevación consistente. */
.ax-card,
.card,
.detail-card {
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius);
  background: var(--ax-bg-card);
  box-shadow: var(--ax-elev-1);
}

.ax-card-elevated {
  box-shadow: var(--ax-elev-2);
}

.ax-card-header {
  border-bottom: 1px solid var(--ax-border-light);
  color: var(--ax-text-primary);
}

/* =========================================================
   51. MASTER-DETAIL DRILL-DOWN (ancho estrecho, ≤960px)
   Con PanelPresentation="Drill" el panel reemplaza al listado en
   ancho estrecho y se vuelve con .panel-drill-back. En desktop el
   shell se comporta igual que el master-detail de dos columnas (§43/§45).
   ========================================================= */

/* La barra «Volver» solo existe en modo drill y solo en ancho estrecho. */
.panel-drill-bar {
  display: none;
}

.panel-drill-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--ax-border);
  border-radius: 6px;
  background: var(--ax-surface);
  color: var(--ax-text-secondary);
  font: 600 12.5px var(--ax-font-family);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.panel-drill-back:hover {
  border-color: var(--ax-primary);
  color: var(--ax-primary);
  background: var(--ax-primary-50);
}

@media (max-width: 960px) {
  /* Una sola columna: se anulan los grid-column de §43 para que no se cree
     una columna implícita (el detalle vive en la columna 2 en desktop).
     Sin alto forzado: en mobile manda el contenido (drill). */
  .master-detail--drill {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    gap: var(--ax-space-3);
  }

  .master-detail--drill > .master-pane,
  .master-detail--drill > .panel-pane {
    grid-column: 1;
  }

  /* Sin selección: solo el listado. Con detalle abierto: solo el detalle. */
  .master-detail--drill > .panel-pane {
    display: none;
  }

  .master-detail--drill.master-detail--panel-open > .master-pane {
    display: none;
  }

  .master-detail--drill.master-detail--panel-open > .panel-pane {
    display: flex;
  }

  .master-detail--drill .panel-drill-bar {
    display: flex;
    align-items: center;
    padding: var(--ax-space-2) var(--ax-space-3);
    border-bottom: 1px solid var(--ax-border);
  }

  /* En estrecho el listado manda el alto: no se reservan las 10 filas de desktop. */
  .master-detail--drill .explorer-page-root {
    min-height: 0;
  }
}

/* ===== Listado Períodos Tarifarios: tabla de 3 columnas =====
   (Período + Tipo de tarifa · Vigencia · Activo)
   GLOBALES (no scoped): las celdas se renderizan vía RenderTreeBuilder en el
   Explorer, por lo que el CSS scoped del componente NO les aplica. */

.erp-table td.ttp-col-periodo,
.erp-table td.ttp-col-vigencia,
.erp-table td.ttp-col-activo {
  font-size: var(--ax-font-size-base);
  line-height: 1.3;
  vertical-align: middle;
  white-space: normal;
  padding: var(--ax-row-pad-y) 12px;
}

.ttp-cell-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.ttp-cell-title {
  font-weight: 600;
  color: var(--ax-text-primary);
  font-size: var(--ax-font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ttp-cell-range {
  color: var(--ax-text-secondary);
  font-family: var(--ax-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== Listado Config. Contable de Movimientos: celda de 2 líneas =====
   (Clasificación Contable arriba + Tipo de Movimiento abajo, en la misma celda)
   GLOBALES (no scoped): las celdas se renderizan vía RenderTreeBuilder en el
   Explorer, por lo que el CSS scoped del componente NO les aplica. */

.cmc-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
}

.cmc-cell-title {
  font-weight: 600;
  color: var(--ax-text-primary);
  font-size: var(--ax-font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dato secundario en texto humanista, no mono: el tipo de movimiento es una
   palabra (Compra, Transferencia…), no un código ni un monto (UI.md §1.3.6). */
.cmc-cell-sub {
  font-size: var(--ax-font-size-xs);
  color: var(--ax-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   52. COMPOSICIÓN DE REPORTE (Consulta/Reporte)
   Ingredientes compartidos por las pantallas que leen y analizan:
   la fila de gráficos y el reparto en barras. Se combinan con
   .panel (contenedor), .ax-stat--panel (tarjetas resumen) y
   .erp-table (tabla densa). Solo consumen tokens.
   ========================================================= */

/* ---------- Fila de gráficos: dos lecturas del mismo dato ----------
   Auto-fit: dos columnas cuando hay ancho, una sola cuando no. Una pantalla puede
   ajustar la proporción con su clase propia sin redefinir el ingrediente. */
.ax-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ax-space-4);
  align-items: center;
}

.ax-grafico {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2);
  min-width: 0;
}

/* Eyebrow del gráfico: nombra la lectura, no el dato (el panel ya nombra el conjunto). */
.ax-grafico-titulo {
  font-size: var(--ax-font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ax-letter-spacing-wide);
  color: var(--ax-text-muted);
}

/* ---------- Reparto: ranking de barras ----------
   Cada fila se compara contra el tramo más alto del propio ranking; el valor (y su
   porcentaje, opcional) va a la derecha, sin ejes. El color lo aporta quien pinta. */
.ax-reparto {
  display: flex;
  flex-direction: column;
  gap: var(--ax-space-2);
  min-width: 0;
}

.ax-reparto-fila {
  display: grid;
  grid-template-columns: minmax(96px, 148px) minmax(0, 1fr) 74px;
  gap: var(--ax-space-2);
  align-items: center;
  font-size: var(--ax-font-size-xs);
}

.ax-reparto-nombre {
  color: var(--ax-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Código de la clasificación en el reparto: mono y tenue, delante del nombre. */
.ax-reparto-codigo {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-font-size-xs);
  font-weight: 600;
  color: var(--ax-text-muted);
  margin-right: 6px;
}

.ax-reparto-pista {
  display: block;
  height: 9px;
  border-radius: var(--ax-radius-full);
  background: var(--ax-gray-100);
  overflow: hidden;
}

.ax-reparto-pista i {
  display: block;
  height: 100%;
  border-radius: var(--ax-radius-full);
  transition: width var(--ax-transition-base);
}

.ax-reparto-v {
  text-align: right;
  font-size: var(--ax-font-size-sm);
  font-weight: 700;
  color: var(--ax-text-primary);
}

.ax-reparto-v small {
  display: block;
  font-size: var(--ax-font-size-2xs);
  font-weight: 400;
  color: var(--ax-text-muted);
}

@media (max-width: 900px) {
  .ax-reparto-fila {
    grid-template-columns: minmax(84px, 118px) minmax(0, 1fr) 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-reparto-pista i { transition: none; }
}