/**
 * csp-utilities.css — Utilidades creadas para reemplazar `style="..."`
 * inline en plantillas, necesario tras eliminar `'unsafe-inline'` de la CSP
 * `style-src` (SOP 4.B, 2026-04-18).
 *
 * Grupos:
 *  - Layout helpers (spacers, columnas full-grid, min-height)
 *  - Empty states con borde dashed
 *  - Iconos de tamaño fijo en textos genericos
 *  - Colores dinamicos via CSS variables (--ax-color, --ax-bg-color)
 *
 * Los colores dinamicos se resuelven desde un atributo `data-ax-color` o
 * `data-ax-bg-color` via `app/static/js/csp_inline_styles.js` — el JS
 * escribe `element.style.X` (manipulacion DOM permitida por CSP).
 */

/* Spacers simples sin ancho fijado en utilidades Bootstrap */
.ax-spacer-32 { width: 32px; display: inline-block; }
.ax-spacer-40 { width: 40px; display: inline-block; }

/* Minimo de altura comun */
.ax-min-h-60vh { min-height: 60vh; }
.ax-min-h-16rem { min-height: 16rem; }

/* Tarjetas publicas con max-width centrado */
.ax-card-max-26 { max-width: 26rem; width: 100%; }
.ax-card-max-28 { max-width: 28rem; width: 100%; }
.ax-page-max-820 { max-width: 820px; }

/* Radio heredado de tokens publicos */
.ax-radius-public { border-radius: var(--public-radius); }
.ax-radius-public-lg { border-radius: var(--public-radius-lg); }
.ax-radius-public-top {
  border-top-left-radius: var(--public-radius);
  border-top-right-radius: var(--public-radius);
}

/* Empty state con borde dashed (usado en paneles sin contenido) */
.ax-empty-dashed { border-style: dashed !important; }

/* Iconos grandes en empty states */
.ax-icon-2rem { font-size: 2rem; }
.ax-icon-2-5rem { font-size: 2.5rem; }

/* Columna de ancho fijado 3rem (tablas de ranking) */
.ax-col-w-3 { width: 3rem; }

/* Celda full-width de un grid (grid-column: 1 / -1) */
.ax-grid-col-full { grid-column: 1 / -1; }

/* Estados visibles (controlados por JS — evita `style="display:none"`).
 * Sin `!important`: si el JS escribe `element.style.display = "flex"`
 * (manipulacion DOM, permitida por CSP), la inline prevalece sobre la clase.
 * Esto es identico al comportamiento previo con `style="display:none"` +
 * JS que lo sobrescribe.
 */
.ax-hidden { display: none; }

/* Soporte de colores dinamicos via variables CSS.
 * Los templates ponen `data-ax-color` / `data-ax-bg-color` con el hex que
 * viene de BD; el JS `csp_inline_styles.js` los aplica en runtime.
 */
.ax-dyn-bg { background-color: var(--ax-bg-color, transparent); }
.ax-dyn-text { color: var(--ax-color, inherit); }
.ax-dyn-bg-soft {
  /* Fondo del 12% del color base (pattern previo: `#RRGGBB1f`) */
  background-color: var(--ax-bg-color-soft, transparent);
}

/* HtmX indicator rules — suplen al `<style>` que HtmX inyecta por
 * defecto al arrancar, y que en CSP estricta (sin `'unsafe-inline'`
 * en style-src) seria bloqueado. Se desactiva el inyect via
 * `<meta name="htmx-config" content='{"includeIndicatorStyles":false}'>`
 * en `base_public.html` + `base_private.html`. Fuente: defaults de
 * htmx.org 2.0.x (`includeIndicatorStyles`).
 */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }
.htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }

/* Circulos de icono con tamanyo fijo.
 * Reemplazo de `style="width:Xpx;height:Xpx"` inline, prohibido por CSP
 * `style-src` sin `'unsafe-inline'`. Usados en el bloque hero y feature
 * cards de la home publica.
 */
.ax-icon-circle-48 { width: 48px; height: 48px; }
.ax-icon-circle-56 { width: 56px; height: 56px; }

/* Input sin sombra interna (pierde el box-shadow por defecto de Bootstrap
 * form-control cuando vive dentro de un input-group custom). Reemplazo de
 * `style="box-shadow: none;"` inline. */
.ax-input-no-shadow { box-shadow: none !important; }

/* Letter-spacing ampliado para titulos UPPERCASE sutiles (footer,
 * labels de seccion). Reemplazo de `style="letter-spacing: 0.05em"`. */
.ax-ls-wide { letter-spacing: 0.05em; }

/* Font size extra pequeno para badges "Pronto" y metadata menor.
 * Reemplazo de `style="font-size: 0.65rem"`. */
.ax-fs-xs { font-size: 0.65rem; }

/* Normalizacion visual de inputs (CSP-safe, sin style="..."). */
.ax-uppercase { text-transform: uppercase; }
.ax-lowercase { text-transform: lowercase; }

/* Preservar saltos de linea en contenido textual (notas, mensajes).
 * Reemplazo de `style="white-space: pre-wrap"`. */
.crm-nota-contenido,
.ax-ws-pre-wrap { white-space: pre-wrap; }

/* Barra de progreso de cuota LLM en /empresa/llm-config (F3.6).
 * Reemplazo de `style="height: 8px"` inline. */
.llm-cuota-progress { height: 8px; }