/* Frontend/estilos/utilidades.css — utilidades que reemplazan a los atributos style="" (CSP, R15).
 *
 * Se usan como  data-u="margin-top-14px cursor-pointer"  (varios tokens separados por espacio).
 * Reemplazan a un estilo en línea (normal, no !important): por eso NO llevan !important —una regla
 * de hoja con !important sigue ganándoles, como ganaba al estilo en línea— pero sí un selector de
 * especificidad (0,2,0) y van al final de la cascada, para ganarle a las reglas normales de las demás hojas.
 * Los valores que dependen de un dato (anchos de barras, posiciones…) no están acá: los aplica
 * componentes/estilos-dinamicos.js por CSSOM a partir de atributos data-mx-*.
 */

/* Nace oculto hasta que estilos-dinamicos.js lo convierte en display:none inline (evita el destello). */
[data-mx-oculto] { display: none; }

/* Variantes con nombre propio */
[data-u~="kpi-alerta"][data-u] { --accent-color: var(--red-txt, var(--red)); }
[data-u~="padding-4px-0"][data-u] { padding: 4px 0; }

/* Utilidades generadas a partir de los estilos en línea que tenía el frontend */
[data-u~="align-items-flex-start"][data-u] { align-items: flex-start; }
[data-u~="border-bottom-none"][data-u] { border-bottom: none; }
[data-u~="border-color-var-red"][data-u] { border-color: var(--red); }
[data-u~="border-left-1px-solid-var-border-2"][data-u] { border-left: 1px solid var(--border-2); }
[data-u~="cursor-default"][data-u] { cursor: default; }
[data-u~="cursor-pointer"][data-u] { cursor: pointer; }
[data-u~="flex-direction-column"][data-u] { flex-direction: column; }
[data-u~="margin-0"][data-u] { margin: 0; }
[data-u~="margin-0-0-12px"][data-u] { margin: 0 0 12px; }
[data-u~="margin-6px-0-0"][data-u] { margin: 6px 0 0; }
[data-u~="margin-bottom-14px"][data-u] { margin-bottom: 14px; }
[data-u~="margin-bottom-18px"][data-u] { margin-bottom: 18px; }
[data-u~="margin-left-2px"][data-u] { margin-left: 2px; }
[data-u~="margin-right-6px"][data-u] { margin-right: 6px; }
[data-u~="margin-right-8px"][data-u] { margin-right: 8px; }
[data-u~="margin-top-10px"][data-u] { margin-top: 10px; }
[data-u~="margin-top-12px"][data-u] { margin-top: 12px; }
[data-u~="margin-top-14px"][data-u] { margin-top: 14px; }
[data-u~="margin-top-16px"][data-u] { margin-top: 16px; }
[data-u~="margin-top-18px"][data-u] { margin-top: 18px; }
[data-u~="margin-top-22px"][data-u] { margin-top: 22px; }
[data-u~="margin-top-4px"][data-u] { margin-top: 4px; }
[data-u~="margin-top-6px"][data-u] { margin-top: 6px; }
[data-u~="margin-top-8px"][data-u] { margin-top: 8px; }
[data-u~="padding-left-12px"][data-u] { padding-left: 12px; }
[data-u~="white-space-pre-line"][data-u] { white-space: pre-line; }
[data-u~="width-auto"][data-u] { width: auto; }