/* ==========================================================================
   tokens.css — Sistema único de tokens claro/oscuro (SPEC-008, DESIGN.md §3)
   Cargado en base.html DESPUÉS de Bootstrap y del tema woox y ANTES de base.css.
   El oscuro sigue prefers-color-scheme (sin interruptor). Bootstrap 5.2 no trae
   modo de color: aquí se mapean los tokens --izt-* a sus variables --bs-* y a
   las variables por componente, para teñir sin declaraciones importantes.
   ========================================================================== */

/* ── Tokens (claro por defecto) ── */
:root {
    color-scheme: light dark;

    --izt-bg: #FFFFFF;
    --izt-bg-rgb: 255, 255, 255;
    --izt-surface: #F7F4F2;
    --izt-surface-rgb: 247, 244, 242;
    --izt-text: #1F2328;
    --izt-text-rgb: 31, 35, 40;
    --izt-muted: #5B6270;
    --izt-brand: #691C32;
    --izt-brand-rgb: 105, 28, 50;
    --izt-brand-hover: #7A223D;
    --izt-brand-subtle: #F9F0F2;
    --izt-on-brand: #FFFFFF;
    --izt-brand-solid: #691C32;     /* relleno guinda con texto blanco (bg-primary, casillas) */
    --izt-brand-solid-rgb: 105, 28, 50;
    --izt-line-control: #8A8F98;
    --izt-line: #E4DEDA;
    --izt-gold: #8C6D1F;
    --izt-success: #1A7F4B;
    --izt-danger: #B42318;
    --izt-field-bg: var(--izt-bg);

    /* Tipografía: pila del sistema (sin descargas, la CSP bloquea fuentes remotas) */
    --izt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --izt-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
    --izt-text-xs: 0.875rem;
    --izt-text-sm: 1rem;
    --izt-text-md: 1.125rem;
    --izt-text-lg: 1.25rem;
    --izt-text-xl: 1.5rem;
    --izt-text-2xl: 2rem;
    --izt-text-3xl: 2.5rem;

    /* Espaciado (escala de 4 px), radios y sombra */
    --izt-space-1: 4px;
    --izt-space-2: 8px;
    --izt-space-3: 12px;
    --izt-space-4: 16px;
    --izt-space-5: 24px;
    --izt-space-6: 32px;
    --izt-space-7: 48px;
    --izt-space-8: 64px;
    --izt-radius-control: 8px;
    --izt-radius-card: 12px;
    --izt-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* ── Mapa a Bootstrap 5.2 ── */
    --bs-body-bg: var(--izt-bg);
    --bs-body-bg-rgb: var(--izt-bg-rgb);
    --bs-body-color: var(--izt-text);
    --bs-body-color-rgb: var(--izt-text-rgb);
    --bs-body-font-family: var(--izt-font);
    --bs-body-line-height: 1.6;
    --bs-font-sans-serif: var(--izt-font);
    --bs-font-monospace: var(--izt-font-mono);
    --bs-border-color: var(--izt-line);
    --bs-border-color-translucent: var(--izt-line);
    --bs-link-color: var(--izt-brand);
    --bs-link-hover-color: var(--izt-brand-hover);
    --bs-code-color: var(--izt-brand);
    --bs-primary: var(--izt-brand-solid);
    --bs-primary-rgb: var(--izt-brand-solid-rgb);
}

/* ── Oscuro: solo se redefinen los tokens y lo que Bootstrap fija en literales ── */
@media (prefers-color-scheme: dark) {
    :root {
        --izt-bg: #15171A;
        --izt-bg-rgb: 21, 23, 26;
        --izt-surface: #1D2024;
        --izt-surface-rgb: 29, 32, 36;
        --izt-text: #E0E0E0;
        --izt-text-rgb: 224, 224, 224;
        --izt-muted: #9AA3AD;
        --izt-brand: #E6B7C4;
        --izt-brand-rgb: 230, 183, 196;
        --izt-brand-hover: #F0CAD5;
        --izt-brand-subtle: #2A2026;
        --izt-on-brand: #14101A;
        --izt-line: #2B2F34;
        --izt-gold: #D6B25E;
        --izt-success: #4ADE80;
        --izt-danger: #FF9A9A;
        --izt-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* Utilidades de Bootstrap que leen --bs-*-rgb: se re-tiñen en el propio elemento */
    .text-primary { --bs-primary-rgb: var(--izt-brand-rgb); }
    .text-dark { --bs-dark-rgb: var(--izt-text-rgb); }
    .bg-warning.text-dark,
    .bg-info.text-dark { --bs-dark-rgb: 33, 37, 41; }
    .bg-light { --bs-light-rgb: var(--izt-surface-rgb); }
    .text-success { --bs-success-rgb: 74, 222, 128; }
    .text-danger { --bs-danger-rgb: 255, 154, 154; }

    /* Cajas blancas (bg-white o fondo #fff en línea, puente hasta la fase 4): dentro se restituye la paleta clara para que
       texto, campos y enlaces no queden claros sobre blanco. registro.css oscurece las suyas. */
    @supports selector(:not(.a *)) {
        :is(.bg-white, [style*="background: #fff;"]):not(.registro-v2 *):not(.tienda-grupo) {
            color-scheme: light;
            color: #1F2328;
            --izt-bg: #FFFFFF;
            --izt-bg-rgb: 255, 255, 255;
            --izt-surface: #F7F4F2;
            --izt-surface-rgb: 247, 244, 242;
            --izt-text: #1F2328;
            --izt-text-rgb: 31, 35, 40;
            --izt-muted: #5B6270;
            --izt-brand: #691C32;
            --izt-brand-rgb: 105, 28, 50;
            --izt-brand-hover: #7A223D;
            --izt-brand-subtle: #F9F0F2;
            --izt-on-brand: #FFFFFF;
            --izt-line-control: #8A8F98;
            --izt-line: #E4DEDA;
            --izt-gold: #8C6D1F;
            --izt-success: #1A7F4B;
            --izt-danger: #B42318;
            --izt-field-bg: #FFFFFF;
            --bs-body-color: #1F2328;
            --bs-body-color-rgb: 31, 35, 40;
            --bs-border-color: #E4DEDA;
            --bs-link-color: #691C32;
            --bs-link-hover-color: #7A223D;
            --bs-code-color: #691C32;
        }
        :is(.bg-white, [style*="background: #fff;"]):not(.registro-v2 *):not(.tienda-grupo) .form-select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        }
        :is(.bg-white, [style*="background: #fff;"]):not(.registro-v2 *):not(.tienda-grupo) .btn-close:not(.btn-close-white) { filter: none; }
    }
    .tienda-grupo { --bs-white-rgb: var(--izt-surface-rgb); }

    /* Alertas: Bootstrap 5.2 no trae paleta oscura */
    .alert-success { --bs-alert-color: #75B798; --bs-alert-bg: #051B11; --bs-alert-border-color: #0F5132; }
    .alert-danger { --bs-alert-color: #EA868F; --bs-alert-bg: #2C0B0E; --bs-alert-border-color: #842029; }
    .alert-warning { --bs-alert-color: #FFDA6A; --bs-alert-bg: #332701; --bs-alert-border-color: #664D03; }
    .alert-info { --bs-alert-color: #6EDFF6; --bs-alert-bg: #032830; --bs-alert-border-color: #087990; }
    .alert-secondary { --bs-alert-color: #A7ACB1; --bs-alert-bg: #161719; --bs-alert-border-color: #41464B; }
    .alert-primary { --bs-alert-color: var(--izt-brand); --bs-alert-bg: var(--izt-brand-subtle); --bs-alert-border-color: #5A2A3A; }

    /* Caret del select (SVG con trazo oscuro fijo) e icono de cierre */
    .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
    .btn-close:not(.btn-close-white) { filter: invert(1) grayscale(100%) brightness(200%); }

    /* Puente hasta quitar los style= (fases 2-4): los títulos con color fijo en línea (guinda, azul marino) se vuelven ilegibles en oscuro y un style= solo se vence con una declaración importante */
    :is(h1, h2, h3, h4, h5, h6)[style*="color"]:not(.text-white) { color: var(--izt-brand) !important; }
    .tienda-grupo .artesano-nombre { color: var(--izt-gold); }
    footer { background-color: var(--izt-surface); }
}

/* ── Base ── */
body {
    background-color: var(--izt-bg);
    color: var(--izt-text);
}

/* Bootstrap fija estas utilidades como importantes con un gris literal: solo se vencen igual */
.text-muted,
.text-black-50 { color: var(--izt-muted) !important; }

hr { border-top-color: var(--izt-line); opacity: 1; }
::placeholder { color: var(--izt-muted); opacity: 1; }
.form-text { color: var(--izt-muted); }
.invalid-feedback { color: var(--izt-danger); }

/* ── Campos de formulario ── */
.form-control,
.form-select {
    background-color: var(--izt-field-bg);
    color: var(--izt-text);
    border-color: var(--izt-line-control);
    border-radius: var(--izt-radius-control);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--izt-surface);
    color: var(--izt-muted);
    border-color: var(--izt-line);
}

select option,
.form-select option {
    background-color: var(--izt-field-bg);
    color: var(--izt-text);
}

/* Autocompletado del navegador: conserva el fondo y el texto del tema */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--izt-text);
    -webkit-box-shadow: 0 0 0 1000px var(--izt-field-bg) inset;
    caret-color: var(--izt-text);
}

.input-group-text {
    background-color: var(--izt-surface);
    color: var(--izt-text);
    border-color: var(--izt-line-control);
}

.form-check-input {
    background-color: var(--izt-field-bg);
    border-color: var(--izt-line-control);
}

.form-check-input:checked {
    background-color: var(--izt-brand-solid);
    border-color: var(--izt-brand-solid);
}

/* ── Botones ── */
.btn-primary {
    --bs-btn-color: var(--izt-on-brand);
    --bs-btn-bg: var(--izt-brand);
    --bs-btn-border-color: var(--izt-brand);
    --bs-btn-hover-color: var(--izt-on-brand);
    --bs-btn-hover-bg: var(--izt-brand-hover);
    --bs-btn-hover-border-color: var(--izt-brand-hover);
    --bs-btn-active-color: var(--izt-on-brand);
    --bs-btn-active-bg: var(--izt-brand-hover);
    --bs-btn-active-border-color: var(--izt-brand-hover);
    --bs-btn-disabled-color: var(--izt-on-brand);
    --bs-btn-disabled-bg: var(--izt-brand);
    --bs-btn-disabled-border-color: var(--izt-brand);
    --bs-btn-focus-shadow-rgb: var(--izt-brand-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--izt-brand);
    --bs-btn-border-color: var(--izt-brand);
    --bs-btn-hover-color: var(--izt-on-brand);
    --bs-btn-hover-bg: var(--izt-brand);
    --bs-btn-hover-border-color: var(--izt-brand);
    --bs-btn-active-color: var(--izt-on-brand);
    --bs-btn-active-bg: var(--izt-brand-hover);
    --bs-btn-active-border-color: var(--izt-brand-hover);
    --bs-btn-disabled-color: var(--izt-brand);
    --bs-btn-disabled-border-color: var(--izt-brand);
    --bs-btn-focus-shadow-rgb: var(--izt-brand-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--izt-muted);
    --bs-btn-border-color: var(--izt-line-control);
    --bs-btn-hover-color: var(--izt-bg);
    --bs-btn-hover-bg: var(--izt-muted);
    --bs-btn-hover-border-color: var(--izt-muted);
    --bs-btn-active-color: var(--izt-bg);
    --bs-btn-active-bg: var(--izt-muted);
    --bs-btn-active-border-color: var(--izt-muted);
    --bs-btn-disabled-color: var(--izt-muted);
    --bs-btn-disabled-border-color: var(--izt-line-control);
}

/* ── Componentes con variables propias ── */
.card {
    --bs-card-bg: var(--izt-surface);
    --bs-card-border-color: var(--izt-line);
    --bs-card-cap-bg: rgba(var(--izt-text-rgb), 0.04);
    --bs-card-color: var(--izt-text);
}

.list-group {
    --bs-list-group-color: var(--izt-text);
    --bs-list-group-bg: var(--izt-surface);
    --bs-list-group-border-color: var(--izt-line);
    --bs-list-group-action-color: var(--izt-text);
    --bs-list-group-action-hover-color: var(--izt-text);
    --bs-list-group-action-hover-bg: var(--izt-bg);
    --bs-list-group-action-active-color: var(--izt-text);
    --bs-list-group-action-active-bg: var(--izt-bg);
    --bs-list-group-disabled-color: var(--izt-muted);
    --bs-list-group-disabled-bg: var(--izt-surface);
    --bs-list-group-active-bg: var(--izt-brand-solid);
    --bs-list-group-active-border-color: var(--izt-brand-solid);
}

.dropdown-menu {
    --bs-dropdown-color: var(--izt-text);
    --bs-dropdown-bg: var(--izt-surface);
    --bs-dropdown-border-color: var(--izt-line);
    --bs-dropdown-link-color: var(--izt-text);
    --bs-dropdown-link-hover-color: var(--izt-text);
    --bs-dropdown-link-hover-bg: var(--izt-bg);
    --bs-dropdown-divider-bg: var(--izt-line);
    --bs-dropdown-header-color: var(--izt-muted);
}

.modal {
    --bs-modal-color: var(--izt-text);
    --bs-modal-bg: var(--izt-surface);
    --bs-modal-border-color: var(--izt-line);
    --bs-modal-header-border-color: var(--izt-line);
    --bs-modal-footer-border-color: var(--izt-line);
}

.table {
    --bs-table-color: var(--izt-text);
    --bs-table-border-color: var(--izt-line);
    --bs-table-striped-color: var(--izt-text);
    --bs-table-striped-bg: rgba(var(--izt-text-rgb), 0.05);
    --bs-table-active-color: var(--izt-text);
    --bs-table-active-bg: rgba(var(--izt-text-rgb), 0.1);
    --bs-table-hover-color: var(--izt-text);
    --bs-table-hover-bg: rgba(var(--izt-text-rgb), 0.075);
}

.pagination {
    --bs-pagination-color: var(--izt-brand);
    --bs-pagination-bg: var(--izt-surface);
    --bs-pagination-border-color: var(--izt-line);
    --bs-pagination-hover-color: var(--izt-brand-hover);
    --bs-pagination-hover-bg: var(--izt-bg);
    --bs-pagination-hover-border-color: var(--izt-line);
    --bs-pagination-focus-color: var(--izt-brand-hover);
    --bs-pagination-focus-bg: var(--izt-bg);
    --bs-pagination-active-color: #FFFFFF;
    --bs-pagination-active-bg: var(--izt-brand-solid);
    --bs-pagination-active-border-color: var(--izt-brand-solid);
    --bs-pagination-disabled-color: var(--izt-muted);
    --bs-pagination-disabled-bg: var(--izt-surface);
    --bs-pagination-disabled-border-color: var(--izt-line);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--izt-muted);
    --bs-breadcrumb-item-active-color: var(--izt-muted);
}

/* Zonas de carga de archivos (texto de ayuda) */
.dropzone-area__text,
.dropzone-area__subtext { color: var(--izt-muted); }