/* ================================================================
   CODIPAJ Saltillo | Sistema de identidad visual
   Colores del logotipo: tomados del PNG proporcionado.
   Colores vicariales: conservar EXACTAMENTE los valores del GeoJSON.
   Tipografías: Tahoma (títulos) y Arial (texto).
   ================================================================ */
:root {
    /* Cinco tintas del logotipo */
    --codipaj-turquesa: #00979C;
    --codipaj-morado: #6E309F;
    --codipaj-magenta: #D30B54;
    --codipaj-azul: #0170C2;
    --codipaj-amarillo: #FCC000;

    /* Colores oficiales de las siete vicarías (GeoJSON) */
    --codipaj-vicaria-desierto: #EC7F37;
    --codipaj-vicaria-siderurgica: #D40A54;
    --codipaj-vicaria-centro: #01B0EF;
    --codipaj-vicaria-sureste: #92D051;
    --codipaj-vicaria-noreste: #0170C2;
    --codipaj-vicaria-noroeste: #6F2EA2;
    --codipaj-vicaria-suroeste: #FFBF04;

    /* Variantes tonales para texto y accesibilidad */
    --codipaj-turquesa-oscuro: #005C62;
    --codipaj-morado-oscuro: #532477;
    --codipaj-magenta-oscuro: #A50742;
    --codipaj-azul-oscuro: #005A9E;
    --codipaj-amarillo-texto: #664700;

    /* Superficies y texto neutros (no sustituyen colores de marca) */
    --codipaj-fondo: #F7F9FC;
    --codipaj-superficie: #FFFFFF;
    --codipaj-texto: #232734;
    --codipaj-texto-suave: #566173;
    --codipaj-borde: #DBE2EA;
    --codipaj-foco: rgba(110, 48, 159, .27);
    --codipaj-fuente-titulos: Tahoma, Arial, sans-serif;
    --codipaj-fuente-texto: Arial, Tahoma, sans-serif;

    /* Valores para componentes Bootstrap que hereden variables globales */
    --bs-body-font-family: var(--codipaj-fuente-texto);
    --bs-body-color: var(--codipaj-texto);
    --bs-body-bg: var(--codipaj-fondo);
    --bs-primary: var(--codipaj-morado);
    --bs-primary-rgb: 110, 48, 159;
    --bs-link-color: var(--codipaj-azul-oscuro);
    --bs-link-hover-color: var(--codipaj-magenta-oscuro);
}

html { font-family: var(--codipaj-fuente-texto); }
body {
    min-width: 0;
    margin: 0;
    font-family: var(--codipaj-fuente-texto);
    color: var(--codipaj-texto);
    background: var(--codipaj-fondo);
}

button, input, textarea, select { font-family: var(--codipaj-fuente-texto); }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--codipaj-fuente-titulos);
    color: var(--codipaj-morado-oscuro);
}

a { color: var(--codipaj-azul-oscuro); }
a:hover { color: var(--codipaj-magenta-oscuro); }

:focus-visible {
    outline: 3px solid var(--codipaj-morado);
    outline-offset: 3px;
}

/* Componentes habituales, sin modificar estilos particulares de Leaflet */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--codipaj-morado);
    --bs-btn-border-color: var(--codipaj-morado);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--codipaj-morado-oscuro);
    --bs-btn-hover-border-color: var(--codipaj-morado-oscuro);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--codipaj-morado-oscuro);
    --bs-btn-active-border-color: var(--codipaj-morado-oscuro);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--codipaj-morado);
    --bs-btn-disabled-border-color: var(--codipaj-morado);
}
.btn-outline-primary {
    --bs-btn-color: var(--codipaj-morado);
    --bs-btn-border-color: var(--codipaj-morado);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--codipaj-morado);
    --bs-btn-hover-border-color: var(--codipaj-morado);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--codipaj-morado-oscuro);
    --bs-btn-active-border-color: var(--codipaj-morado-oscuro);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--codipaj-morado);
    box-shadow: 0 0 0 .22rem var(--codipaj-foco);
}
.form-check-input:checked {
    background-color: var(--codipaj-morado);
    border-color: var(--codipaj-morado);
}

/* Estados de validación: manteniendo su semántica visual */
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #22743C; }
.invalid { outline: 1px solid #BD2444; }
.validation-message { color: #A50742; }
.blazor-error-boundary {
    background: #821C3C;
    padding: 1rem 1rem 1rem 1.25rem;
    color: #fff;
    border-left: 5px solid var(--codipaj-amarillo);
}
.blazor-error-boundary::before { content: '⚠ '; }
.blazor-error-boundary::after { content: 'Ocurrió un error inesperado.'; }
.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color, #666);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* Marcadores del mapa: se conserva su tipo (sede, rectoría, capilla). */
.marker-templo-wrapper { background: transparent; border: none; }
.pin-sede, .pin-rectoria, .pin-capilla {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
    border: 2px solid #fff;
}
.pin-sede { background: var(--codipaj-morado); color: #fff; }
.pin-rectoria { background: var(--codipaj-azul); color: #fff; }
.pin-capilla {
    background: #fff;
    color: var(--codipaj-magenta);
    border-color: var(--codipaj-magenta);
}