/* BASE + TOKENS (Design System). Documentación: docs/design/directiva-visual.md, sección "Design System".
   Valores neutros por defecto: la configuración de la tienda los sobreescribe (BrandHead -> BrandCss, en :root).

   Tres capas, en este orden de dependencia (una capa solo lee de las anteriores):
     1. IDENTIDAD  --brand-*          contrato con BrandCss.cs (lista blanca). Única fuente de verdad de la marca.
     2. DERIVADOS  --brand-surface…   mezclas color-mix() de la identidad (existentes; los usa tienda.css).
     3. SEMÁNTICA  --surface-*, --text-*, --border-*, --success/--warning/--info/--danger, --control-*, --fs-*…
                   ALIAS o mezclas de las capas 1-2: nombran el PROPÓSITO, no el color. Es lo que debe consumir todo CSS nuevo.
   Reglas:
     - Ningún color de identidad se escribe fuera de --brand-*. Las únicas excepciones son los tonos base de ESTADO
       (--status-*-base): son universales (verde/ámbar/azul), no de marca, y se mezclan con --brand-text/--brand-background
       para convivir con cualquier paleta, clara u oscura.
     - El color de marca es un ACENTO: CTA, navegación activa, badges, highlights. Superficies, textos y bordes son neutros
       derivados del texto/fondo. No pintar la interfaz con --brand-primary.
     - Las variables que referencian a otras se resuelven donde se DECLARAN: un contexto que redefine un token base
       (p. ej. .adm-shell con --radius-md) debe redeclarar también los alias que dependen de él (--control-radius). */
:root {
    /* 1. IDENTIDAD (fuente: configuración) */
    --brand-primary: #1f2937;
    --brand-secondary: #4b5563;
    --brand-accent: #2563eb;
    --brand-background: #ffffff;
    --brand-text: #111827;
    --brand-danger: #b91c1c;
    --brand-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --brand-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Texto sobre color de marca: BrandCss los calcula por contraste; estos son respaldo. */
    --brand-on-primary: #ffffff;
    --brand-on-accent: #ffffff;
    --brand-on-dark: #ffffff;
    /* Acento usable como texto sobre el fondo (BrandCss lo ajusta a AA); respaldo = acento mezclado con el texto. */
    --brand-accent-ink: color-mix(in srgb, var(--brand-accent) 70%, var(--brand-text));

    /* 2. DERIVADOS (superficies, bordes, textos secundarios) */
    --brand-surface: color-mix(in srgb, var(--brand-text) 5%, var(--brand-background));
    --brand-surface-2: color-mix(in srgb, var(--brand-text) 9%, var(--brand-background));
    --brand-muted: color-mix(in srgb, var(--brand-text) 66%, var(--brand-background));
    --brand-border: color-mix(in srgb, var(--brand-text) 16%, var(--brand-background));
    --brand-border-strong: color-mix(in srgb, var(--brand-text) 45%, var(--brand-background));
    --brand-accent-strong: color-mix(in srgb, var(--brand-accent) 82%, var(--brand-text));
    --brand-accent-soft: color-mix(in srgb, var(--brand-accent) 10%, var(--brand-background));
    --brand-danger-soft: color-mix(in srgb, var(--brand-danger) 9%, var(--brand-background));
    --brand-overlay: color-mix(in srgb, var(--brand-text) 62%, transparent);
    /* Fondo de banda con tinte de marca (secciones protagonistas de la tienda) */
    --brand-tint: color-mix(in srgb, var(--brand-accent) 6%, var(--brand-background));

    /* Hover de marca: se aleja del color base en dirección a su texto de contraste, así siempre se nota
       (aclara un primario oscuro, oscurece uno claro). El del acento es el derivado existente --brand-accent-strong. */
    --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 86%, var(--brand-on-primary));
    --brand-accent-hover: var(--brand-accent-strong);

    /* 3. SEMÁNTICA ----------------------------------------------------------------------------------------- */
    /* Superficies */
    --surface-page: var(--brand-background);              /* fondo general */
    --surface-card: var(--brand-background);              /* tarjetas, paneles (se separan por borde/sombra, no por gris) */
    --surface-soft: var(--brand-surface);                 /* bandas suaves, placeholders de imagen, resumen de carrito */
    --surface-strong: var(--brand-surface-2);             /* rellenos más marcados (skeleton, rayado sin imagen) */
    --surface-hover: color-mix(in srgb, var(--brand-text) 5.5%, var(--brand-background));
    --surface-elevated: var(--brand-background);          /* modales, drawers, popovers: siempre con --shadow-lg */
    --surface-tint: var(--brand-tint);                    /* banda protagonista con tinte de marca */
    --surface-accent-soft: var(--brand-accent-soft);      /* selección/activo suave */
    --surface-brand: var(--brand-primary);                /* franjas de marca (footer, hero sin foto, announcement bar) */
    --surface-dark: color-mix(in srgb, var(--brand-text) 94%, var(--brand-background)); /* superficie INVERTIDA: oscura en paletas claras, clara en oscuras */
    --surface-overlay: var(--brand-overlay);              /* velo de modales/drawers */
    /* Texto */
    --text-primary: var(--brand-text);
    --text-secondary: color-mix(in srgb, var(--brand-text) 80%, var(--brand-background));
    --text-muted: var(--brand-muted);                     /* 66%: metadatos, ayudas (AA sobre --surface-page) */
    --text-link: var(--brand-accent-ink);                 /* acento con contraste AA garantizado por BrandCss */
    --text-on-brand: var(--brand-on-primary);             /* sobre --surface-brand */
    --text-on-accent: var(--brand-on-accent);             /* sobre CTA de acento */
    --text-on-dark: var(--brand-on-dark);                 /* contraste calculado sobre --surface-dark por BrandCss */
    /* Bordes */
    --border-subtle: color-mix(in srgb, var(--brand-text) 10%, var(--brand-background)); /* divisores, contorno de tarjetas */
    --border-default: var(--brand-border);                /* separadores con presencia */
    --border-strong: var(--brand-border-strong);          /* controles de formulario, opciones de talle */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 35%, transparent);
    /* Estados (universales, no de marca). Cada uno: tono (texto/icono, AA sobre fondo claro) + -soft (fondo) + -border. */
    --status-success-base: #16a34a;
    --status-warning-base: #d97706;
    --status-info-base: #2563eb;
    --success: color-mix(in srgb, var(--status-success-base) 70%, var(--brand-text));
    --success-soft: color-mix(in srgb, var(--status-success-base) 11%, var(--brand-background));
    --success-border: color-mix(in srgb, var(--status-success-base) 30%, var(--brand-background));
    --warning: color-mix(in srgb, var(--status-warning-base) 65%, var(--brand-text));
    --warning-soft: color-mix(in srgb, var(--status-warning-base) 13%, var(--brand-background));
    --warning-border: color-mix(in srgb, var(--status-warning-base) 35%, var(--brand-background));
    --info: color-mix(in srgb, var(--status-info-base) 72%, var(--brand-text));
    --info-soft: color-mix(in srgb, var(--status-info-base) 9%, var(--brand-background));
    --info-border: color-mix(in srgb, var(--status-info-base) 28%, var(--brand-background));
    --danger: var(--brand-danger);                        /* el peligro sí es configurable: vive en --brand-danger */
    --danger-soft: var(--brand-danger-soft);
    --danger-border: color-mix(in srgb, var(--brand-danger) 35%, var(--brand-background));

    /* Forma. Escala nueva (--radius-sm…xl) + alias históricos (--radius, --r-ctrl, --r-media) que ya consume tienda.css */
    --radius-xs: .25rem;
    --radius-sm: .375rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1.25rem;
    --radius-pill: 999px;
    --radius: var(--radius-md);
    --r-ctrl: var(--radius-sm);
    --r-media: var(--radius-xs);
    /* Profundidad. xs…lg = escala del sistema (también la usa el panel); 1/2/3 = sombras editoriales de la tienda (históricas). */
    --shadow-xs: 0 1px 2px color-mix(in srgb, var(--brand-text) 6%, transparent);
    --shadow-sm: 0 1px 2px color-mix(in srgb, var(--brand-text) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--brand-text) 6%, transparent);
    --shadow-md: 0 2px 4px -2px color-mix(in srgb, var(--brand-text) 8%, transparent), 0 8px 20px -4px color-mix(in srgb, var(--brand-text) 12%, transparent);
    --shadow-lg: 0 8px 16px -8px color-mix(in srgb, var(--brand-text) 12%, transparent), 0 24px 48px -12px color-mix(in srgb, var(--brand-text) 24%, transparent);
    --shadow-1: 0 1px 2px color-mix(in srgb, var(--brand-text) 10%, transparent), 0 4px 12px color-mix(in srgb, var(--brand-text) 8%, transparent);
    --shadow-2: 0 10px 30px color-mix(in srgb, var(--brand-text) 16%, transparent);
    --shadow-3: 0 28px 60px -20px color-mix(in srgb, var(--brand-text) 34%, transparent);

    /* Controles: input, select, fecha, textarea (alto mínimo), botón, stepper de cantidad. Un solo sistema de alturas. */
    --control-height-sm: 2.25rem;                         /* 36px: solo con puntero fino (acciones de tabla) */
    --control-height: 2.75rem;                            /* 44px: base, mínimo táctil */
    --control-height-lg: 3rem;                            /* 48px: botón principal, opciones de talle/color */
    --control-height-xl: 3.5rem;                          /* 56px: CTA de compra, stepper de ficha, checkout */
    --control-radius: var(--radius-sm);
    --control-padding-x: .75rem;
    --control-bg: var(--surface-card);
    --control-border: var(--border-strong);

    /* Espaciado y ritmo vertical (única escala; no introducir valores sueltos) */
    --gutter: clamp(1rem, 4vw, 2rem);
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
    --space-5: clamp(1.25rem, 3vw, 1.75rem); --space-6: clamp(2rem, 6vw, 3.5rem);
    --section: clamp(2.75rem, 7vw, 5.5rem);
    /* Anchos de contenido */
    --maxw: 76rem;                                        /* contenedor estándar (.container) */
    --maxw-wide: 90rem;                                   /* catálogo/grillas que deben aprovechar el viewport */
    --maxw-text: 70ch;                                    /* lectura (políticas, descripciones) */

    /* Tipografía: escala fluida. Display/H1/H2 existentes + escala completa. */
    --fs-display: clamp(2.5rem, 1.2rem + 6vw, 5.25rem);   /* hero */
    --fs-h1: clamp(1.9rem, 1.2rem + 3vw, 3.25rem);        /* título de página */
    --fs-h2: clamp(1.4rem, 1.05rem + 1.6vw, 2.25rem);     /* título de sección */
    --fs-h3: clamp(1.15rem, 1.02rem + .6vw, 1.5rem);      /* subtítulo, título de bloque */
    --fs-section-title: var(--fs-h2);
    --fs-card-title: clamp(.9375rem, .91rem + .12vw, 1rem); /* nombre de producto en tarjeta */
    --fs-lead: clamp(1.05rem, 1rem + .5vw, 1.35rem);      /* bajada de hero/página */
    --fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
    --fs-small: .875rem;
    --fs-body-sm: var(--fs-small);
    --fs-label: .875rem;                                  /* rótulos de formulario */
    --fs-caption: .75rem;                                 /* eyebrow, badges, metadatos en mayúsculas */
    --fs-price: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); /* precio en tarjeta (protagonista, estilo marketplace) */
    --fs-price-lg: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); /* precio en ficha */
    --lh-tight: 1.05;                                     /* display */
    --lh-heading: 1.12;
    --lh-snug: 1.3;                                       /* títulos de tarjeta, labels */
    --lh-body: 1.55;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
    --tracking-tight: -.02em;                             /* títulos */
    --tracking-caps: .14em;                               /* textos en mayúsculas (eyebrow, caption) */

    /* Alturas del header público. Son FIJAS (no dependen del contenido) para que sticky y scroll-padding se calculen
       desde tokens: --header-h es la parte que queda pegada arriba al hacer scroll; la announcement bar no es sticky. */
    --announcement-h: 2.25rem;                            /* 36px */
    --header-row-h: 3.5rem;                               /* fila principal: 56px móvil, 64px tableta, 72px escritorio */
    --header-search-h: 3.25rem;                           /* fila del buscador: solo móvil (control de 44px + aire inferior) */
    --header-nav-h: 0rem;                                 /* fila de categorías: solo escritorio (44px) */
    --header-h: calc(var(--header-row-h) + var(--header-search-h) + var(--header-nav-h));
    --sticky-top: calc(var(--header-h) + var(--space-5)); /* top de filtros, info de ficha y resumen de carrito */

    /* Capas (z-index) */
    --z-sticky: 60;                                       /* barra de compra móvil, savebar */
    --z-header: 100;
    --z-drawer: 300;                                      /* filtros, menú móvil */
    --z-modal: 1100;
    --z-skip: 2000;

    /* Movimiento */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --t: .18s var(--ease);
    --t-slow: .35s var(--ease);
}
/* El alto del header cambia por breakpoint; --header-h y --sticky-top se recalculan solos (se declaran en el mismo :root). */
@media (min-width: 48rem) { :root { --header-row-h: 4rem; --header-search-h: 0rem; } }
@media (min-width: 60rem) { :root { --header-row-h: 4.5rem; --header-nav-h: 2.75rem; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
html, body {
    margin: 0;
    background: var(--brand-background);
    color: var(--brand-text);
    font-family: var(--brand-font-body);
    line-height: var(--lh-body);
}
body { font-size: var(--fs-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.is-locked { overflow: hidden; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--brand-font-heading); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; margin-block: 0 var(--space-4); }
h2 { font-size: var(--fs-h2); font-weight: 750; }
h1:focus { outline: none; }
a { color: var(--brand-accent-ink); text-underline-offset: .2em; }
::selection { background: color-mix(in srgb, var(--brand-accent) 30%, transparent); }

:focus-visible { outline: 3px solid var(--brand-accent-ink); outline-offset: 3px; }

/* .site-header (tienda) tiene su propio diseño en tienda.css; esta base queda solo para .admin-header. */
.admin-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .75rem var(--gutter);
    background: var(--brand-primary); color: var(--brand-on-primary, var(--brand-background));
}
.admin-header a { color: inherit; }
.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; padding-block: var(--space-5); }

/* Formularios */
.form-field { display: grid; gap: .375rem; margin-bottom: 1rem; }
.form-field label, .form-field legend { font-weight: 600; font-size: .95rem; }
.form-field input {
    min-height: var(--control-height); padding: .5rem var(--control-padding-x);
    border: 1px solid var(--control-border); border-radius: var(--control-radius);
    background: var(--brand-background); color: var(--brand-text);
    font: inherit;
}

/* Botón base: acento de marca, texto calculado por contraste */
.btn {
    min-height: var(--control-height-lg); padding: .5rem 1.5rem; border: 1px solid transparent; border-radius: var(--control-radius);
    background: var(--brand-accent); color: var(--brand-on-accent); font: inherit; font-weight: 700; letter-spacing: .01em; cursor: pointer;
}
.btn-link { background: transparent; text-decoration: underline; }
.alert-error { padding: .75rem 1rem; border-radius: var(--radius); background: var(--brand-danger-soft); color: var(--brand-danger); margin-bottom: 1rem; }
.login-card { max-width: 24rem; margin: 3rem auto; }

#blazor-error-ui {
    background: var(--brand-surface); color: var(--brand-text); border-top: 3px solid var(--brand-accent); bottom: 0; display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}