/* Merka SV — CSS propio (complementa a Tailwind)
   ------------------------------------------------------------------
   Tailwind (utilidades) se carga por Play CDN en desarrollo. Aquí van
   solo ajustes finos que conviene tener en un archivo real:
   tipografía base, x-cloak de Alpine, scrollbar y transiciones. */

:root {
    --marca-navy: #12294A;
    --marca-verde: #17B26A;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-feature-settings: "cv11", "ss01";
    text-rendering: optimizeLegibility;
}

/* Alpine.js: evita el "flash" de elementos con x-show antes de inicializar. */
[x-cloak] {
    display: none !important;
}

/* Transición suave entre modo claro y oscuro. */
html.dark,
html {
    transition: background-color .2s ease, color .2s ease;
}

/* Scrollbar discreta en navegadores WebKit. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .35);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, .55);
}

/* Enfocado accesible por teclado. */
:focus-visible {
    outline: 2px solid var(--marca-verde);
    outline-offset: 2px;
}