/*
 * VALSS Lite — hoja de COMPATIBILIDAD con el núcleo (Krayin v2.2.7 fijado).
 *
 * Separada a propósito de `brand.css`: allí vive la identidad visual del producto
 * (logotipo, firma, tipografía, paleta); aquí solo hay ajustes de maquetación que
 * corrigen defectos del núcleo que la capa de marca no puede resolver desde la
 * configuración. Ninguna regla de este archivo cambia colores, tipografías ni
 * componentes de marca, y ninguna requiere tocar `packages/Webkul/*`.
 *
 * Reglas de esta hoja:
 *  - Cada bloque nombra el archivo del núcleo al que responde y por qué.
 *  - Los selectores se anclan a algo semántico del núcleo (la URL de una acción,
 *    el `action` del formulario), nunca a la posición en el árbol.
 *  - Se usan `:has()` y `:focus-visible`, soportados por los navegadores que
 *    Krayin ya exige (Vite + módulos ES). Si un motor no los soporta, la regla se
 *    ignora y queda el comportamiento del núcleo: se degrada, no se rompe.
 *  - Solo maquetación: nada se oculta, nada se recorta y ningún control se quita.
 *
 * Cada bloque tiene su control de compatibilidad en `CompatSheetTest`: si el
 * núcleo cambia la pieza que se está compensando, la prueba falla y dice qué
 * revisar, en lugar de dejar la corrección en silencio.
 *
 * La atribución del login ya no se compensa aquí: la capa de marca la retira del
 * HTML con un override de presentación (Resources/overrides/admin/sessions).
 */

/* ==========================================================================
 * 1 · Tablero: la fila de filtros desborda a 390 px
 *
 * Núcleo: packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php,
 * plantilla `v-dashboard-filters`. La fila es un `div.flex.gap-1.5` con el
 * selector de rango (260 px, rótulo en `nowrap`) y «Exportar PDF» (117 px,
 * `:href` → /admin/dashboard/export-pdf): 383 px dentro de una caja de 358 px,
 * así que el botón se sale 9 px del viewport.
 *
 * Arreglo: dejar que la fila envuelva y alinear el botón a la derecha en la
 * segunda línea. El selector de rango no se estrecha (no se recorta su rótulo),
 * el botón no se oculta ni se reduce, y no aparece desplazamiento horizontal.
 * ========================================================================== */
@media (max-width: 640px) {
    div:has(> a[href*="/dashboard/export"]) {
        flex-wrap: wrap;
    }

    div:has(> a[href*="/dashboard/export"]) > a[href*="/dashboard/export"] {
        margin-left: auto;
    }
}

/* ==========================================================================
 * 2 · Login: el foco de los campos es casi invisible
 *
 * Núcleo: components/form/control-group/control.blade.php anula el anillo del
 * navegador (`input, textarea, select { outline: transparent solid 2px }`) y
 * solo oscurece el borde de #D1D5DB a #9CA3AF en `:focus`, un cambio de 2,3:1
 * con el fondo: por debajo del 3:1 que pide WCAG 1.4.11 para el indicador.
 *
 * Arreglo: un anillo de 2 px en el negro de marca (16:1 sobre la tarjeta) en
 * campos, enlace, botón y el control de ver la contraseña, solo en el formulario
 * de acceso (`action` del núcleo) y solo con `:focus-visible`. El color del
 * texto y de los bordes no se toca, y el estado de error sigue mandando porque
 * el borde rojo se mantiene.
 * ========================================================================== */
form[action$="/admin/login"] :is(input, button, a, [tabindex]):focus-visible {
    outline: 2px solid var(--vl-accent, #1C1C1C);
    outline-offset: 2px;
}