/*
 * BIG AUTO — Design Tokens
 * Source of truth: design-system/MASTER.md §3
 * Bootstrap, Radzen y MudBlazor deben leer de estas variables, no declarar las suyas.
 */

:root {
  /* 2.1 Color — marca (valores tomados del logotipo, MASTER v1.3 §3.1) */
  --ba-primary: #1B408E;
  --ba-primary-hover: #163474;
  --ba-primary-dark: #122A5C;
  --ba-accent: #0669F9;
  --ba-accent-hover: #0054CC;
  --ba-red: #E50E20;

  /* 2.1b Escala del azul de marca (MASTER §3.1) */
  --ba-blue-900: #122A5C;   /* presionado */
  --ba-blue-800: #163474;   /* hover */
  --ba-blue-700: #1B408E;   /* base */
  --ba-blue-50: #F1F4F8;    /* fondo sutil */

  /* 2.1c Escala del rojo de marca (MASTER §3.1) */
  --ba-red-800: #B30B19;    /* error / acción destructiva */
  --ba-red-700: #E50E20;    /* marca */
  --ba-red-50: #FDECED;     /* fondo sutil */

  /* 2.2 Color — semántico */
  --ba-success: #198754;
  --ba-warning: #ffc107;
  --ba-danger: #B30B19;
  --ba-info: #0dcaf0;

  /* Par fondo/texto para banners de advertencia. --ba-warning es el amarillo
     de RELLENO (badge sólido); estos dos son la combinación de aviso sobre
     fondo claro. 7.06:1 — cumple AA con holgura. */
  --ba-warning-bg: #FFF3CD;
  --ba-warning-text: #7A4F01;

  /* Par fondo/texto de ESTADO POSITIVO ("Abierto ahora" en las sucursales).
     --ba-success es el verde de RELLENO; estos dos son la combinacion sobre
     fondo claro. 8.6:1 — AA con holgura, igual que el par de advertencia.
     El estado negativo reutiliza --ba-red-50 con --ba-danger (5.9:1). */
  --ba-success-bg: #D1E7DD;
  --ba-success-text: #0F5132;

  /* Par fondo/texto de INFORMACIÓN (etiqueta de etapa "En preparación" en
     Pedidos por Paquetería). --ba-info es el celeste de RELLENO (punto de
     estado); estos dos son la combinación sobre fondo claro, igual criterio
     que warning/success. 7.9:1 — AA con holgura. */
  --ba-info-bg: #CFF4FC;
  --ba-info-text: #055160;

  /* 2.3 Color — neutros */
  --ba-text: #212529;
  /* 5.15:1 sobre blanco · 4.88:1 sobre --ba-surface-alt (MASTER v1.4 §3.3).
     El valor anterior (#727575) daba 4.41:1 sobre surface-alt: fallaba AA
     justo donde más se usa (hover de fila, secciones alternas). */
  --ba-text-muted: #6B6E6E;
  --ba-surface: #ffffff;
  --ba-surface-alt: #f8f9fa;
  /* Borde DECORATIVO: separadores, divisiones de tarjeta, líneas de tabla.
     1.30:1 — sin requisito de contraste porque no delimita ningún control. */
  --ba-border: #dee2e6;
  /* Borde de CONTROL: 4.54:1 sobre blanco. WCAG exige 3:1 en el borde que
     delimita un control (MASTER §3.4 y §9).
     NO se aplica de forma global a los campos: Radzen y MudBlazor dibujan su
     propio borde y la regla se sumaba a el, produciendo un recuadro marcado.
     Usar solo en controles PROPIOS cuyo borde declaremos nosotros. */
  --ba-border-input: #767676;
  --ba-black: #000000;

  /* 2.4 Tipografía (MASTER §4.2) — Inter variable, autoalojada en
     /fonts/inter-variable.woff2. El respaldo es system-ui para que el texto
     se pinte de inmediato mientras Inter carga (font-display: swap). */
  --ba-font-base: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Escala de MASTER §4.3 — base 1rem = 16px, progresión 1.2 */
  --ba-text-display: 2.25rem; /* 36px · 700 · lh 1.1  · Precio destacado en ficha */
  --ba-text-h1: 1.875rem;     /* 30px · 700 · lh 1.15 · Título de página */
  --ba-text-h2: 1.5rem;       /* 24px · 600 · lh 1.2  · Encabezado de sección */
  --ba-text-h3: 1.25rem;      /* 20px · 600 · lh 1.3  · Nombre de producto en ficha */
  --ba-text-base: 1rem;       /* 16px · 400/600 · lh 1.5 · Cuerpo, botón, campo */
  --ba-text-sm: 0.875rem;     /* 14px · 400/500 · lh 1.4 · Metadatos, SKU, marca */
  --ba-text-xs: 0.75rem;      /* 12px · 600 · lh 1.3 · Etiqueta, badge, legal */

  /* Alias heredados — NO usar en código nuevo.
     Se conservan porque hay componentes que ya los referencian; se retiran
     cuando esas referencias migren a los tokens de arriba. */
  --ba-text-xxl: 2rem;      /* 32px · sin equivalente en §4.3 */
  --ba-text-xl: 1.5rem;     /* = --ba-text-h2 */
  --ba-text-lg: 1.25rem;    /* = --ba-text-h3 */
  --ba-text-md: 1.125rem;   /* 18px · sin equivalente en §4.3 */

  /* 2.5 Espaciado — escala de 4px */
  --ba-space-1: 0.25rem;   /* 4px */
  --ba-space-2: 0.5rem;    /* 8px */
  --ba-space-3: 0.75rem;   /* 12px */
  --ba-space-4: 1rem;      /* 16px */
  --ba-space-6: 1.5rem;    /* 24px */
  --ba-space-8: 2rem;      /* 32px */
  --ba-space-12: 3rem;     /* 48px */
  --ba-space-20: 5rem;     /* 80px */

  /* 2.6 Bordes, sombras y motion */
  --ba-radius-sm: 4px;
  --ba-radius-md: 8px;
  --ba-radius-lg: 12px;
  /* Escalón 4: solo el panel de acceso de /Autenticacion. Los tres anteriores
     son para componentes DENTRO de una pagina (boton, tarjeta, modal, buscador);
     este acompaña a un bloque que ocupa la mitad del viewport en escritorio.
     Propuesto en Pages/Autenticacion/CONVENCIONESAutenticacion.md §4. */
  --ba-radius-xl: 20px;
  --ba-radius-full: 50%;

  --ba-shadow-sm: 0 2px 4px rgba(0, 0, 0, .08);
  --ba-shadow-md: 0 4px 12px rgba(0, 0, 0, .15);
  --ba-shadow-lg: 0 6px 15px rgba(0, 0, 0, .20);
  /* Escalón 4: tarjeta de página completa (el panel de acceso de /Autenticacion,
     que ocupa buena parte del viewport). Los tres anteriores son para elementos
     DENTRO de una pagina; este es el unico que eleva la pagina sobre el fondo.
     Propuesto en Pages/Autenticacion/CONVENCIONESAutenticacion.md §4. */
  --ba-shadow-xl: 0 20px 60px rgba(15, 30, 77, .18);

  /* 2.6b Anillo de foco de dos capas (MASTER §7.4).
     Una sola capa desaparece sobre botones azules rellenos: el azul acción
     sobre el azul de marca da 2.03:1. La capa clara interior lo separa del
     relleno y la oscura exterior lo hace visible sobre fondo claro. */
  --ba-focus-inner: #FFFFFF;
  --ba-focus-outer: #122A5C;
  --ba-focus-offset: 2px;

  --ba-duration-fast: 150ms;
  --ba-duration-base: 250ms;
  --ba-easing: cubic-bezier(.4, 0, .2, 1);

  /* 2.7 Escala de profundidad (MASTER §5.5).
     Ocho valores, ninguno más. Prohibido declarar z-index numérico suelto.

     Los valores NO son 0/10/100/200...: el sitio convive con cuatro librerías
     que ya ocupan el rango bajo y medio, y una escala "limpia" quedaría por
     DEBAJO de ellas. Medido en los paquetes instalados:
       Bootstrap 5 : modal 1055, popover 1070, tooltip 1080
       Radzen      : hasta 1002  (paneles laterales usan --rz-dialog-zindex)
       MudBlazor   : runtime 1100-1600 (dialogo 1400) -- ver bloque --mud-zindex-*
       Swiper      : rango bajo
     Por eso las capas propias que deben ganarle a un diálogo de librería
     (overlay, modal, toast, tooltip) viven por encima de 1002. Las capas
     que conviven con el contenido normal (raised, sticky, dropdown) se
     quedan abajo a propósito: un dropdown NO debe taparle un modal.

     Si algo no queda encima, revisar PRIMERO si un ancestro con
     transform/filter/opacity<1 está creando contexto de apilamiento — de eso
     no escapa ningún z-index, por alto que sea. */
  --ba-z-base: 0;
  --ba-z-raised: 10;
  --ba-z-sticky: 100;
  --ba-z-dropdown: 1010;   /* sobre contenido y sticky, bajo los diálogos */
  --ba-z-overlay: 10000;   /* sobre los diálogos de librería */
  --ba-z-modal: 10010;
  --ba-z-modal-nested: 10015; /* un diálogo abierto DESDE dentro de otro diálogo o
     panel: confirmaciones Radzen desde ba-ppb-panel (Cancelar orden, Cancelar
     guía, etc.) y diálogos MudBlazor desde un drawer lateral. Radzen usa
     --rz-dialog-zindex: 1001 por defecto -- muy por debajo de ba-z-modal, así
     que sin esto quedan atrapadas detrás del panel. Ver pedidos-ba.css. */
  --ba-z-popup: 10018;     /* popups de Radzen (DropDown, DatePicker) montados en
     <body>: el JS de la libreria les fija z-index: 2000 inline, que queda DEBAJO
     de un dialogo en ba-z-modal-nested y hace que el desplegable no se vea al
     hacer clic. Va sobre los dialogos y bajo el toast. Ver pedidos-ba.css. */
  --ba-z-toast: 10020;     /* un toast debe verse aunque haya un modal abierto */
  --ba-z-tooltip: 10030;

  /* 2.7 bis Las capas que MudBlazor NO trae en su CSS pero inyecta en runtime.
     MudBlazor.min.css escribe los z-index como var(--mud-zindex-dialog),
     var(--mud-zindex-popover), etc. y NO los declara en su hoja. Pero el
     MudThemeProvider inyecta al final del <head> su propio <style> con :root
     { --mud-zindex-dialog: 1400; popover: 1200; snackbar: 1500; tooltip: 1600;
     drawer: 1100; appbar: 1300 }. Como ese <style> llega DESPUÉS de esta hoja
     con la misma especificidad, gana él y deja los diálogos en 1400 -- por
     debajo de un drawer lateral de Radzen (10015), que además se monta al
     final de <body> y gana los empates por orden de árbol. Por eso el
     ModalAgregarCarrito quedaba atrapado detrás del panel de promoción.

     Se mapean a la escala de arriba con !important: un !important de hoja gana
     a cualquier declaración normal, ya venga de un <style> inyectado después o
     de estilos inline (el corrector() de styleCorrector.js, que nadie llama,
     queda inofensivo). Los valores NO son los 1400/1500/1600 de MudBlazor
     porque esa escala no convive con Radzen: sus 1400 quedan bajo el drawer.
     Solo se tocan los overlays; NO --mud-zindex-appbar (1300) ni
     --mud-zindex-drawer (1100): el header y el drawer de MudBlazor funcionan
     con sus valores de runtime y fijarlos rompería el sticky del header.

     El ÚNICO empate de esta tabla es dialog (10015) contra un diálogo Radzen
     abierto en ba-z-modal-nested (10015), p. ej. una confirmación desde el
     panel de pedidos: lo gana Radzen porque se monta al final de <body>, que
     es exactamente lo que se quiere (la confirmación sobre su propio panel).
     El caso inverso --un diálogo MudBlazor sobre un drawer Radzen-- NO es un
     empate: el drawer vive en --ba-z-modal (10010) gracias a la regla
     .rz-dialog-side de pedidos-ba.css, y el diálogo le gana por 5. */
  --mud-zindex-dialog:   var(--ba-z-modal-nested) !important; /* 10015 */
  --mud-zindex-popover:  var(--ba-z-popup) !important;        /* 10018 */
  --mud-zindex-select:   var(--ba-z-popup) !important;        /* 10018 */
  --mud-zindex-snackbar: var(--ba-z-toast) !important;        /* 10020 */
  --mud-zindex-tooltip:  var(--ba-z-tooltip) !important;      /* 10030 */

  /* 2.8 Breakpoints (referencia — CSS no puede leer variables dentro de @media) */
  --ba-bp-sm: 640px;
  --ba-bp-md: 768px;
  --ba-bp-lg: 1024px;
  --ba-bp-xl: 1440px;
}

/*
 * §2.4 Inter — @font-face (el comentario largo del subset sigue en site.css).
 *
 * Vive aqui y no en site.css porque site.min.css llega diferido: con el
 * @font-face alli, el navegador no podia usar Inter (aunque el preload de
 * App.razor ya la hubiera bajado) hasta que llegaba ese bundle, y el texto
 * cambiaba de ancho a mitad de carga -> CLS en cada primera visita.
 *
 * 'Inter Fallback': Arial reescalada a las metricas de Inter (valores de
 * capsize, los mismos que usa next/font). Mientras Inter carga, el texto ocupa
 * casi lo mismo y el cambio por swap no reacomoda renglones. Sin Arial
 * (Android) local() falla, la cara se ignora y se cae a system-ui como antes.
 */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2?v=3') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.06%;
}

/*
 * §2.4 Texto base del body — IGUAL al que deja Bootstrap al llegar.
 *
 * bootstrap.min.css carga diferido y su <link> va DESPUES de este archivo y de
 * site.min.css, asi que su regla `body` es la que gana al final: el texto que
 * hereda del body se ve en system-ui 16px/1.5, no en Inter. Antes este archivo
 * declaraba Inter y MudBlazor 14px/1.43: el primer pintado salia con eso y, al
 * llegar Bootstrap, todo el texto heredado se reacomodaba (CLS ~0.045 en el
 * listado, y el aviso de cookies saltaba 20px en todas las paginas).
 *
 * Estos valores copian los de Bootstrap 5 (--bs-body-*) para que el primer
 * pintado ya sea el definitivo. Aqui NO se decide el diseño: pasar el texto
 * base a Inter (MASTER §4.2) es un cambio visual pendiente que se hara aparte,
 * revisando pantallas; cuando se haga, cambiar esta regla Y el orden/regla de
 * Bootstrap juntos, o el salto vuelve.
 * Los elementos que piden var(--ba-font-base) explicitamente siguen en Inter.
 */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * AX-B1 — Enlace de salto al contenido (WCAG 2.4.1, nivel A).
 *
 * Aqui y no en site.css: site.min.css llega diferido y, hasta entonces, el
 * enlace se pintaba en flujo (24px de alto) y empujaba toda la pagina; al
 * llegar el bundle se ocultaba y todo subia -> CLS ~0.03 en cada pagina.
 * Tampoco en un .razor.css: lo usan DOS layouts (MainLayout e InitLayout).
 *
 * Fuera de pantalla por defecto (no display:none ni visibility:hidden: esos lo
 * sacan del orden de tabulacion). Al recibir foco se posiciona arriba a la
 * izquierda, por encima del header sticky.
 */
.ba-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background-color: var(--ba-primary, #1B408E);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.ba-skip:focus,
.ba-skip:focus-visible {
  /* fixed y no absolute: debe verse aunque la pagina ya este scrolleada. */
  position: fixed;
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  overflow: visible;
  border-radius: 4px;
  /* Por encima del header sticky (--ba-z-sticky vale 100). */
  z-index: calc(var(--ba-z-sticky, 100) + 10);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/*
 * Radzen critico — copia del ACOMODO de standard-base.css (Radzen 125 KB, diferido
 * en App.razor con preload+onload).
 *
 * Sin esto, hasta que llegaba Radzen, RadzenStack/Row/Column/DataList/Card se
 * pintaban como bloques sin flex, gap ni margenes; al llegar se recolocaban:
 * en la home el carrusel de tendencias bajaba 18px y en el listado se movian
 * todas las tarjetas. Solo layout: colores, sombras y componentes interactivos
 * siguen llegando con Radzen. Las reglas son IDENTICAS a las de Radzen, asi que
 * cuando llega no cambia nada.
 *
 * Columnas: Size / SizeSM / SizeMD / SizeLG completas (1-12; hay tamanos calculados
 * como SizeLG="@(x ? 12 : 9)"). XS/XL/XX y los JustifyContent responsive no se
 * usan: si un componente empieza a usarlos, agregar aqui su regla o se movera al cargar. Al actualizar Radzen,
 * comparar estos valores con su standard-base.css.
 */
:root {
  --rz-gap: 1rem;
  --rz-row-gap: 1rem;
  --rz-card-padding: 1.25rem;
  --rz-card-border-radius: 4px;
  --rz-card-background-color: #ffffff;
  --rz-datalist-padding: 0.5rem;
  --rz-datalist-border-radius: 4px;
  --rz-datalist-item-border: 1px solid #e9eaed;
  --rz-datalist-item-shadow: none;
  --rz-datalist-item-padding: 1rem;
  --rz-datalist-item-background-color: #ffffff;
  --rz-datalist-item-margin-block: 0.5rem;
  --rz-datalist-item-margin-inline: 0.5rem;
}

.rz-display-flex { display: flex !important; }
.rz-flex-row { flex-direction: row !important; }
.rz-flex-column { flex-direction: column !important; }
.rz-align-items-normal { align-items: normal !important; }
.rz-align-items-stretch { align-items: stretch !important; }
.rz-align-items-center { align-items: center !important; }
.rz-align-items-start { align-items: start !important; }
.rz-align-items-end { align-items: end !important; }
.rz-align-items-flex-start { align-items: flex-start !important; }
.rz-align-items-flex-end { align-items: flex-end !important; }
.rz-justify-content-normal { justify-content: normal !important; }
.rz-justify-content-stretch { justify-content: stretch !important; }
.rz-justify-content-center { justify-content: center !important; }
.rz-justify-content-start { justify-content: start !important; }
.rz-justify-content-end { justify-content: end !important; }
.rz-justify-content-flex-start { justify-content: flex-start !important; }
.rz-justify-content-flex-end { justify-content: flex-end !important; }
.rz-justify-content-space-between { justify-content: space-between !important; }
.rz-justify-content-space-around { justify-content: space-around !important; }
.rz-justify-content-space-evenly { justify-content: space-evenly !important; }

.rz-stack { box-sizing: border-box; gap: var(--rz-gap); }

.rz-card {
  box-sizing: border-box;
  padding: var(--rz-card-padding);
  border-radius: var(--rz-card-border-radius);
  background-color: var(--rz-card-background-color);
}

.rz-datalist-content { box-sizing: border-box; position: relative; }
.rz-datalist-data { list-style: none; padding: var(--rz-datalist-padding); margin: 0; }
.rz-g { display: flex; flex-wrap: wrap; }
.rz-g > div,
.rz-datalist-data > li {
  border-radius: var(--rz-datalist-border-radius);
  border: var(--rz-datalist-item-border);
  box-shadow: var(--rz-datalist-item-shadow);
  padding: var(--rz-datalist-item-padding);
  background-color: var(--rz-datalist-item-background-color);
}
.rz-g > div {
  flex: 1 1 auto;
  margin-block: var(--rz-datalist-item-margin-block);
  margin-inline: var(--rz-datalist-item-margin-inline);
}
.rz-datalist-data > li {
  margin-block: var(--rz-datalist-item-margin-block);
  margin-inline: var(--rz-datalist-item-margin-inline);
}
.rz-datalist-data > li:first-child { margin-block-start: 0; }
.rz-datalist-data > li:last-child { margin-block-end: 0; }

/* Ancho de la columna n de 12: n * (100% - 11 gaps) / 12 + (n - 1) gaps. */
.rz-row { box-sizing: border-box; flex-wrap: wrap; column-gap: var(--rz-gap); row-gap: var(--rz-row-gap); }
.rz-row > [class^="rz-col"] { flex: 1 0 0%; }
.rz-row > [class*="rz-col-"] { flex: 0 0 auto; width: 100%; }
.rz-row > .rz-col-1 { max-width: calc((100% - 11 * var(--rz-gap)) / 12); flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); }
.rz-row > .rz-col-2 { max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); }
.rz-row > .rz-col-3 { max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); }
.rz-row > .rz-col-4 { max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); }
.rz-row > .rz-col-5 { max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); }
.rz-row > .rz-col-6 { max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); }
.rz-row > .rz-col-7 { max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); }
.rz-row > .rz-col-8 { max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); }
.rz-row > .rz-col-9 { max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); }
.rz-row > .rz-col-10 { max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); }
.rz-row > .rz-col-11 { max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); }
.rz-row > .rz-col-12 { max-width: 100%; flex-basis: 100%; }

@media (min-width: 768px) {
  .rz-row > .rz-col-sm-1 { max-width: calc((100% - 11 * var(--rz-gap)) / 12); flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); }
  .rz-row > .rz-col-sm-2 { max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); }
  .rz-row > .rz-col-sm-3 { max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); }
  .rz-row > .rz-col-sm-4 { max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); }
  .rz-row > .rz-col-sm-5 { max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); }
  .rz-row > .rz-col-sm-6 { max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); }
  .rz-row > .rz-col-sm-7 { max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); }
  .rz-row > .rz-col-sm-8 { max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); }
  .rz-row > .rz-col-sm-9 { max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); }
  .rz-row > .rz-col-sm-10 { max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); }
  .rz-row > .rz-col-sm-11 { max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); }
  .rz-row > .rz-col-sm-12 { max-width: 100%; flex-basis: 100%; }
}

@media (min-width: 1024px) {
  .rz-row > .rz-col-md-1 { max-width: calc((100% - 11 * var(--rz-gap)) / 12); flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); }
  .rz-row > .rz-col-md-2 { max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); }
  .rz-row > .rz-col-md-3 { max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); }
  .rz-row > .rz-col-md-4 { max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); }
  .rz-row > .rz-col-md-5 { max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); }
  .rz-row > .rz-col-md-6 { max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); }
  .rz-row > .rz-col-md-7 { max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); }
  .rz-row > .rz-col-md-8 { max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); }
  .rz-row > .rz-col-md-9 { max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); }
  .rz-row > .rz-col-md-10 { max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); }
  .rz-row > .rz-col-md-11 { max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); }
  .rz-row > .rz-col-md-12 { max-width: 100%; flex-basis: 100%; }
}

@media (min-width: 1280px) {
  .rz-row > .rz-col-lg-1 { max-width: calc((100% - 11 * var(--rz-gap)) / 12); flex-basis: calc((100% - 11 * var(--rz-gap)) / 12); }
  .rz-row > .rz-col-lg-2 { max-width: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); flex-basis: calc(2 * (100% - 11 * var(--rz-gap)) / 12 + 1 * var(--rz-gap)); }
  .rz-row > .rz-col-lg-3 { max-width: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); flex-basis: calc(3 * (100% - 11 * var(--rz-gap)) / 12 + 2 * var(--rz-gap)); }
  .rz-row > .rz-col-lg-4 { max-width: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); flex-basis: calc(4 * (100% - 11 * var(--rz-gap)) / 12 + 3 * var(--rz-gap)); }
  .rz-row > .rz-col-lg-5 { max-width: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); flex-basis: calc(5 * (100% - 11 * var(--rz-gap)) / 12 + 4 * var(--rz-gap)); }
  .rz-row > .rz-col-lg-6 { max-width: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); flex-basis: calc(6 * (100% - 11 * var(--rz-gap)) / 12 + 5 * var(--rz-gap)); }
  .rz-row > .rz-col-lg-7 { max-width: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); flex-basis: calc(7 * (100% - 11 * var(--rz-gap)) / 12 + 6 * var(--rz-gap)); }
  .rz-row > .rz-col-lg-8 { max-width: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); flex-basis: calc(8 * (100% - 11 * var(--rz-gap)) / 12 + 7 * var(--rz-gap)); }
  .rz-row > .rz-col-lg-9 { max-width: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); flex-basis: calc(9 * (100% - 11 * var(--rz-gap)) / 12 + 8 * var(--rz-gap)); }
  .rz-row > .rz-col-lg-10 { max-width: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); flex-basis: calc(10 * (100% - 11 * var(--rz-gap)) / 12 + 9 * var(--rz-gap)); }
  .rz-row > .rz-col-lg-11 { max-width: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); flex-basis: calc(11 * (100% - 11 * var(--rz-gap)) / 12 + 10 * var(--rz-gap)); }
  .rz-row > .rz-col-lg-12 { max-width: 100%; flex-basis: 100%; }
}

/*
 * MASTER §1 — el modo oscuro está descartado por decisión de producto.
 * Descartarlo obliga a declararlo: sin esto, el navegador de un usuario con el
 * SO en oscuro renderiza los controles NATIVOS (campos, selects, scrollbars)
 * en tonos oscuros sobre nuestro fondo blanco -> texto oscuro sobre campo
 * oscuro. Declararlo es lo que hace que la decisión se cumpla de verdad.
 */
:root {
  color-scheme: light;
}

/*
 * §4 Accesibilidad — :focus-visible SOLO en botones y enlaces.
 *
 * NO se declara nada para input/select/textarea, ni para los campos de Radzen
 * y MudBlazor: esos controles conservan su indicador de foco NATIVO / el de su
 * libreria, que es el que el usuario ya conoce.
 *
 * Historial (no volver a intentarlo sin probarlo en pantalla): se intento dos
 * veces poner un indicador propio en los campos y las dos veces se veia mal.
 * Primero un anillo de dos capas (marco azul grueso flotando alrededor del
 * campo) y luego un borde reforzado, que seguia produciendo un recuadro
 * marcado en los selectores de MudBlazor porque se suma al borde que la
 * libreria ya dibuja. Los campos se dejan en paz.
 */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--ba-focus-outer);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--ba-focus-inner);
}

/*
 * §4 Accesibilidad — prefers-reduced-motion global.
 * Anula duración de animaciones/transiciones propias y de vendor (Bootstrap,
 * Radzen, MudBlazor, Swiper) para quien lo solicite a nivel SO, sin tener que
 * envolver cada @keyframes/transition individualmente en los ~80 archivos
 * que los usan hoy.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * §7 Tipografía — truncado de títulos H1 en móvil.
 * El texto completo permanece en el DOM (Google indexa íntegro); solo se
 * recorta visualmente. En desktop no se aplica ningún límite.
 *
 * .h1-truncate-mobile   -> 2 líneas en <=950px (default recomendado)
 * .h1-truncate-mobile.is-1line -> 1 línea, para títulos que deban caber en la
 *                                 altura de una fila (más agresivo).
 *
 * 950px es el breakpoint que ya usan las páginas de catálogo (ssr-only-movil).
 * Navegadores sin soporte de -webkit-box muestran el H1 sin truncar: aceptable.
 */
@media screen and (max-width: 950px) {
  .h1-truncate-mobile {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Evita que un token largo (clave de parte) desborde el contenedor. */
    overflow-wrap: anywhere;
  }

  .h1-truncate-mobile.is-1line {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
}