/* ============================================================================
   MARKET arg — sistema de diseño. Monocromático: #000, #FFF y opacidad
   100/70/40/20%. El único color de la pantalla es la foto del producto.
   ============================================================================ */

/* Las @font-face viven en wwwroot/css/fonts.css (generado, ver el encabezado de
   ese archivo). Se carga antes que esto desde App.razor.                      */

/* --- Tokens --------------------------------------------------------------- */

:root {
    /* Paleta — lo único que existe */
    --mk-negro: #000;
    --mk-blanco: #fff;

    /* Escala de opacidad del manual, sobre fondo claro.
       Solo 100% y 70% son válidos para TEXTO (40% da 2,9:1 de contraste y es
       ilegible). 40% y 20% son para bordes, divisores y fondos. */
    --mk-tinta-100: rgba(0, 0, 0, 1);
    --mk-tinta-70: rgba(0, 0, 0, .70);
    --mk-tinta-40: rgba(0, 0, 0, .40);
    --mk-tinta-20: rgba(0, 0, 0, .20);

    /* La misma escala en negativo, para los bloques de fondo negro */
    --mk-tinta-inv-100: rgba(255, 255, 255, 1);
    --mk-tinta-inv-70: rgba(255, 255, 255, .70);
    --mk-tinta-inv-40: rgba(255, 255, 255, .40);
    --mk-tinta-inv-20: rgba(255, 255, 255, .20);

    /* Superficies y acentos semánticos. La web es monocromática y de un solo tema (claro):
       --mk-fondo = fondo de página y paneles; --mk-fondo-sutil = fondos de foto/tarjeta;
       --mk-acento = fondo de CTA/ticks/marcas; --mk-acento-tinta = tinta sobre el acento. */
    --mk-fondo: #fff;
    --mk-fondo-sutil: rgba(0, 0, 0, .04);
    --mk-acento: #000;
    --mk-acento-tinta: #fff;

    /* Tipografía */
    --mk-font-titulo: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mk-font-texto: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Tracking. El wordmark del logo NO se altera (norma del manual). */
    --mk-tracking-logo: .38em;
    --mk-tracking-rotulo: .18em;

    /* Reducción mínima del logo en digital, del manual */
    --mk-logo-min: 183px;

    /* Alto MÍNIMO del header en desktop (min-height en MainLayout.razor.css): con la nav en una línea
       es su alto real, sin depender de la métrica de línea de Poppins. */
    --mk-header-min: 5.5rem;

    /* Alto REAL del header: lo que usa todo lo que se engancha justo debajo (el sidebar y la toolbar
       sticky del catálogo), para que no quede un hueco ni la tape. Vale el mínimo, pero cuando la nav
       baja a otra línea (los géneros salen de la data: en tablet o ventana chica no entran) el header
       crece, y el script de App.razor lo mide y lo pisa con el alto de verdad. Son dos variables, y no
       una, porque el header no puede tomar su min-height de lo que mide él mismo: no volvería a achicarse. */
    --mk-header-alto: var(--mk-header-min);
}

/* Debajo de 640px el header pasa a DOS filas (logo arriba, nav abajo — ver el
   @media max-width:640px de MainLayout.razor.css), así que necesita más alto que en desktop.
   Se redefine acá, no en MainLayout.razor.css, porque son los CONSUMIDORES de la variable
   (la toolbar sticky del catálogo) los que necesitan el valor correcto en cada ancho — este
   token vive en el host, que es justamente el que sabe cuánto mide su propio header. */
@media (max-width: 640px) {
    :root {
        --mk-header-min: 9rem;
    }
}

/* --- Base ---------------------------------------------------------------- */

html {
    /* La marca es monocromática y NO tiene tema oscuro. Sin esto, los navegadores en modo oscuro del
       sistema (Firefox, mobile) aplican su UA oscuro —fondo y controles de formulario negros— y el sitio
       se ve negro. Forzar 'light' fija el render en claro en todos lados. */
    color-scheme: light;
    /* Scroll suave para los saltos con ancla, como el "volver arriba" del catálogo. */
    scroll-behavior: smooth;
}

html, body {
    font-family: var(--mk-font-texto);
    color: var(--mk-tinta-100);
    background: var(--mk-fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mk-font-titulo);
    font-weight: 600;
    letter-spacing: -.01em;
}

a {
    color: var(--mk-tinta-100);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

a:hover {
    color: var(--mk-tinta-70);
}

/* Foco visible y monocromático: accesibilidad sin salirse de la paleta. */
:focus-visible {
    outline: 2px solid var(--mk-tinta-100);
    outline-offset: 2px;
}

h1:focus {
    outline: none;
}

/* --- Wordmark: "MARKET" con tracking abierto. --------------------------- */

.mk-logo {
    font-family: var(--mk-font-titulo);
    font-weight: 400;
    letter-spacing: var(--mk-tracking-logo);
    text-transform: uppercase;
    white-space: nowrap;
    min-width: var(--mk-logo-min);
    text-decoration: none;
}

.mk-logo-tagline {
    font-family: var(--mk-font-texto);
    letter-spacing: var(--mk-tracking-rotulo);
    text-transform: uppercase;
    font-size: .5em;
}

/* Versión negativa: bloques de fondo negro (portadas, hero, footer). */
.mk-negativo {
    background: var(--mk-negro);
    color: var(--mk-blanco);
}

.mk-negativo a,
.mk-negativo .mk-logo {
    color: var(--mk-blanco);
}

.mk-negativo :focus-visible {
    outline-color: var(--mk-blanco);
}

/* Rótulos tipo señalética (códigos de artículo, metadatos, categorías). */
.mk-rotulo {
    font-family: var(--mk-font-texto);
    letter-spacing: var(--mk-tracking-rotulo);
    text-transform: uppercase;
    font-size: .75rem;
    color: var(--mk-tinta-70);
}

/* --- Retema de Bootstrap: neutraliza su azul/grises vía custom properties. --- */

:root {
    --bs-primary: #000;
    --bs-primary-rgb: 0, 0, 0;
    --bs-link-color: #000;
    --bs-link-hover-color: rgba(0, 0, 0, .7);
    --bs-body-color: #000;
    --bs-body-font-family: var(--mk-font-texto);
    --bs-border-color: rgba(0, 0, 0, .2);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(0, 0, 0, .7);
    --bs-btn-hover-border-color: rgba(0, 0, 0, .7);
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem #000;
}

.form-check-input:checked {
    background-color: #000;
    border-color: #000;
}

/* --- Validación y errores ------------------------------------------------
   Sin rojo ni verde: el manual no los tiene. El estado se comunica con peso,
   borde y texto, que es lo que hace la señalética del propio manual. */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mk-tinta-40);
}

.invalid {
    outline: 2px solid var(--mk-tinta-100);
}

.validation-message {
    color: var(--mk-tinta-100);
    font-weight: 600;
}

.blazor-error-boundary {
    background: var(--mk-negro);
    color: var(--mk-blanco);
    padding: 1rem;
    font-family: var(--mk-font-texto);
}

.blazor-error-boundary::after {
    content: "Ocurrió un error.";
}

/* --- Fotos de producto --------------------------------------------------
   La foto es lo único con color en la pantalla, así que va sobre blanco puro
   y sin filtros ni overlays que le alteren el color de la prenda. */

.mk-foto {
    display: block;
    width: 100%;
    height: auto;
    background: var(--mk-fondo);
}

/* ============================================================================
   ÁTOMOS DE UI COMPARTIDOS
   Piezas genéricas reutilizables por cualquier módulo — NO son el layout de una
   página concreta. El layout específico de cada módulo vive en su propia hoja:
     _content/MarketCatalogo.Catalogo.Ui/catalogo.css
     _content/MarketCatalogo.Institucional.Ui/institucional.css
   (misma frontera que el resto del monolito modular: el host no conoce los
   internos de cada módulo).
   ============================================================================ */

/* Migas de pan: señalética chica, separadas por chevrons. */
.mk-migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.mk-migas a { text-decoration: none; }
.mk-migas a:hover { text-decoration: underline; }
.mk-migas > span { color: var(--mk-tinta-40); }

/* Estados vacíos (sin resultados, no encontrado, error de carga). */
.mk-vacio {
    padding: 3rem 0;
    color: var(--mk-tinta-70);
}

/* Pastillas (talle / color / disponibilidad / etiquetas en general). */
.mk-pastillas {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
}

.mk-pastilla {
    border: 1px solid var(--mk-tinta-40);
    padding: .3rem .8rem;
    font-size: .85rem;
    min-width: 2.4rem;
    text-align: center;
}

/* CTA: el botón principal (negro pleno), único énfasis fuerte del sistema. */
.mk-cta {
    display: inline-block;
    padding: .8rem 2rem;
    background: var(--mk-acento);
    color: var(--mk-acento-tinta);
    text-decoration: none;
    letter-spacing: var(--mk-tracking-rotulo);
    text-transform: uppercase;
    font-size: .8rem;
}

.mk-cta:hover { background: var(--mk-tinta-70); color: var(--mk-acento-tinta); }