/* ==========================================================================
   Marca Toctoc Vecinos (antes VecinON)
   Paleta y tipografía del kit de marca (versión "Clásico": violeta + lima).
   Se carga después del tema y de custom.css: todo lo de marca sale de acá.

   Uso:
   - Noche (#1E0B4B): header, botones principales, textos fuertes.
   - Violeta (#7C3AED): acento sobre fondo claro (links, foco, activos).
   - Lima (#C4F25A): el "ON". Solo sobre fondos oscuros o como relleno con
     texto Noche encima; nunca texto lima sobre blanco (no se lee).
   - Fondo de las páginas: siempre blanco. Lavanda solo para resaltar
     bloques chicos (avisos sin leer, hover).
   ========================================================================== */
:root {
    --vo-noche: #1E0B4B;
    --vo-noche-2: #2E1065;
    --vo-violeta: #7C3AED;
    --vo-violeta-oscuro: #6D28D9;
    --vo-violeta-profundo: #4C1D95;
    --vo-lima: #C4F25A;
    --vo-lima-oscuro: #A8D93B;
    --vo-lavanda: #FAF7FF;
    --vo-lavanda-2: #F3EEFF;
    --vo-borde: #E4DCF5;
    --vo-texto: #1E0B4B;
    --vo-texto-suave: #5B4B7A;
    --vo-texto-claro: #C9B8F0;
    --vo-blanco: #FFFFFF;
    /* Estados (errores, éxito, avisos): fuera de la paleta, solo para mensajes */
    --vo-error: #C2253A;
    --vo-error-fondo: #FDECEE;
    --vo-exito: #1F7A4A;
    --vo-exito-fondo: #E8F6EE;
    --vo-aviso: #8A5A00;
    --vo-aviso-fondo: #FFF5DB;
    --vo-fuente: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Colores del tema Porto */
    --primary: #7C3AED;
    --primary-100: #6D28D9;
    --primary-200: #5B21B6;
    --primary-300: #4C1D95;
    --primary--100: #8B5CF6;
    --primary--200: #A78BFA;
    --primary--300: #C4B5FD;
    --primary-rgba-0: rgba(124, 58, 237, 0);
    --primary-rgba-10: rgba(124, 58, 237, 0.1);
    --primary-rgba-20: rgba(124, 58, 237, 0.2);
    --primary-rgba-30: rgba(124, 58, 237, 0.3);
    --primary-rgba-40: rgba(124, 58, 237, 0.4);
    --primary-rgba-50: rgba(124, 58, 237, 0.5);
    --primary-rgba-60: rgba(124, 58, 237, 0.6);
    --primary-rgba-70: rgba(124, 58, 237, 0.7);
    --primary-rgba-80: rgba(124, 58, 237, 0.8);
    --primary-rgba-90: rgba(124, 58, 237, 0.9);
    --secondary: #1E0B4B;
    --secondary-100: #170838;
    --secondary-200: #12062C;
    --secondary-300: #0E0522;
    --secondary--100: #2E1065;
    --secondary--200: #3B1580;
    --secondary--300: #4C1D95;
    --quaternary: #1E0B4B;
    --dark: #1E0B4B;

    /* Bootstrap */
    --bs-primary: #7C3AED;
    --bs-primary-rgb: 124, 58, 237;
    --bs-dark: #1E0B4B;
    --bs-dark-rgb: 30, 11, 75;
    --bs-link-color: #6D28D9;
    --bs-link-color-rgb: 109, 40, 217;
    --bs-link-hover-color: #4C1D95;
    --bs-link-hover-color-rgb: 76, 29, 149;
    --bs-body-color: #1E0B4B;
    --bs-body-color-rgb: 30, 11, 75;
    --bs-body-bg: #FFFFFF;
    --bs-body-font-family: var(--vo-fuente);
    --bs-primary-bg-subtle: #F3EEFF;
    --bs-primary-border-subtle: #E4DCF5;
    --bs-primary-text-emphasis: #4C1D95;
}

/* Fondo blanco en todas las páginas (el header y el menú de abajo tienen el suyo) */
html,
body,
.body,
.main-content {
    background-color: var(--vo-blanco) !important;
}

/* Tipografía de marca */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn,
input, select, textarea, button,
.form-control, .form-select,
.dropdown-menu,
.card, .alert, .badge, .table {
    font-family: var(--vo-fuente);
}
body { color: var(--vo-texto); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--vo-texto); letter-spacing: -0.01em; }

::selection { background: var(--vo-lima); color: var(--vo-noche); }

/* Links */
a { color: var(--vo-violeta-oscuro); }
a:hover, a:focus { color: var(--vo-violeta-profundo); }

/* Botones */
.btn-primary {
    --bs-btn-bg: #7C3AED;
    --bs-btn-border-color: #7C3AED;
    --bs-btn-hover-bg: #6D28D9;
    --bs-btn-hover-border-color: #6D28D9;
    --bs-btn-active-bg: #5B21B6;
    --bs-btn-active-border-color: #5B21B6;
    --bs-btn-disabled-bg: #7C3AED;
    --bs-btn-disabled-border-color: #7C3AED;
    --bs-btn-focus-shadow-rgb: 124, 58, 237;
}
.btn-outline-primary {
    --bs-btn-color: #6D28D9;
    --bs-btn-border-color: #7C3AED;
    --bs-btn-hover-bg: #7C3AED;
    --bs-btn-hover-border-color: #7C3AED;
    --bs-btn-active-bg: #6D28D9;
    --bs-btn-active-border-color: #6D28D9;
    --bs-btn-focus-shadow-rgb: 124, 58, 237;
}
.btn-dark {
    --bs-btn-bg: #1E0B4B;
    --bs-btn-border-color: #1E0B4B;
    --bs-btn-hover-bg: #2E1065;
    --bs-btn-hover-border-color: #2E1065;
    --bs-btn-active-bg: #2E1065;
    --bs-btn-active-border-color: #2E1065;
    --bs-btn-disabled-bg: #1E0B4B;
    --bs-btn-disabled-border-color: #1E0B4B;
    --bs-btn-focus-shadow-rgb: 30, 11, 75;
}
.btn-outline-dark {
    --bs-btn-color: #1E0B4B;
    --bs-btn-border-color: #1E0B4B;
    --bs-btn-hover-bg: #1E0B4B;
    --bs-btn-hover-border-color: #1E0B4B;
    --bs-btn-active-bg: #2E1065;
    --bs-btn-active-border-color: #2E1065;
    --bs-btn-focus-shadow-rgb: 30, 11, 75;
}
/* Botón "encendido": lima con texto Noche (llamados a la acción destacados) */
.btn-marca {
    --bs-btn-color: #1E0B4B;
    --bs-btn-bg: #C4F25A;
    --bs-btn-border-color: #C4F25A;
    --bs-btn-hover-color: #1E0B4B;
    --bs-btn-hover-bg: #A8D93B;
    --bs-btn-hover-border-color: #A8D93B;
    --bs-btn-active-color: #1E0B4B;
    --bs-btn-active-bg: #A8D93B;
    --bs-btn-active-border-color: #A8D93B;
    --bs-btn-focus-shadow-rgb: 196, 242, 90;
    font-weight: 700;
}

/* Formularios */
.form-control:focus,
.form-select:focus {
    border-color: var(--vo-violeta);
    box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .18);
}
.form-check-input:checked {
    background-color: var(--vo-violeta);
    border-color: var(--vo-violeta);
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .18); }
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--vo-violeta);
    border-color: var(--vo-violeta);
}

/* Menús, paginación y pestañas */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--vo-lavanda-2);
    color: var(--vo-noche) !important;
}
.page-link { color: var(--vo-violeta-oscuro); }
.page-item.active .page-link,
.active > .page-link {
    background-color: var(--vo-noche);
    border-color: var(--vo-noche);
    color: #fff;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--vo-noche);
}

/* Texto secundario en violeta grisáceo de marca */
.text-muted { color: var(--vo-texto-suave) !important; }

/* Carga inicial del tema: puntito en violeta */
.loading-overlay { background: var(--vo-blanco) !important; }