/* ============================================
   SISTEMA DE TEMAS - Santuario
   ============================================ */

/* TEMA 1: PARROQUIA (Rosa + Celeste + Dorado) */
[data-theme="parroquia"] {
    --color-primary: #C98B8B;
    --color-primary-dark: #A66E6E;
    --color-primary-light: #E8C4C4;
    --color-secondary: #7BA7C2;
    --color-secondary-dark: #5C8AA3;
    --color-accent: #C9A961;
    --color-accent-dark: #A88A4A;
    --color-sidebar-bg: #A66E6E;
    --color-sidebar-text: #FFFFFF;
    --color-sidebar-hover: #C98B8B;
    --color-sidebar-active: #E8C4C4;
    --color-navbar-bg: #FFFFFF;
    --color-navbar-text: #5C3A3A;
    --color-body-bg: #FDF8F8;
    --color-card-bg: #FFFFFF;
    --color-text-primary: #3D2828;
    --color-text-secondary: #7A5C5C;
    --color-border: #E8D5D5;
}

/* TEMA 2: CRISTO REY (Bordó + Blanco Hueso + Dorado) */
[data-theme="cristo-rey"] {
    --color-primary: #800020;
    --color-primary-dark: #5C0017;
    --color-primary-light: #B84D66;
    --color-secondary: #F5F5F0;
    --color-secondary-dark: #E0E0D8;
    --color-accent: #D4AF37;
    --color-accent-dark: #B8941F;
    --color-sidebar-bg: #5C0017;
    --color-sidebar-text: #F5F5F0;
    --color-sidebar-hover: #800020;
    --color-sidebar-active: #D4AF37;
    --color-navbar-bg: #F5F5F0;
    --color-navbar-text: #5C0017;
    --color-body-bg: #FAF9F7;
    --color-card-bg: #FFFFFF;
    --color-text-primary: #2D1A1F;
    --color-text-secondary: #6B4A52;
    --color-border: #E8E0D8;
}

/* TEMA 3: DULCE NOMBRE (Azul Marino + Crema + Naranja) */
[data-theme="dulce-nombre"] {
    --color-primary: #1B3A5C;
    --color-primary-dark: #0F2440;
    --color-primary-light: #4A6B8C;
    --color-secondary: #F5E6D3;
    --color-secondary-dark: #E6D0B5;
    --color-accent: #E67E22;
    --color-accent-dark: #C66515;
    --color-sidebar-bg: #0F2440;
    --color-sidebar-text: #F5E6D3;
    --color-sidebar-hover: #1B3A5C;
    --color-sidebar-active: #E67E22;
    --color-navbar-bg: #F5E6D3;
    --color-navbar-text: #0F2440;
    --color-body-bg: #FBF7F2;
    --color-card-bg: #FFFFFF;
    --color-text-primary: #1A2838;
    --color-text-secondary: #5A6B7C;
    --color-border: #E6D8C8;
}

/* TEMA 4: NEUTRO (Gris Pizarra + Blanco Humo + Verde) */
[data-theme="neutro"] {
    --color-primary: #334155;
    --color-primary-dark: #1E293B;
    --color-primary-light: #64748B;
    --color-secondary: #F8FAFC;
    --color-secondary-dark: #E2E8F0;
    --color-accent: #10B981;
    --color-accent-dark: #059669;
    --color-sidebar-bg: #1E293B;
    --color-sidebar-text: #F8FAFC;
    --color-sidebar-hover: #334155;
    --color-sidebar-active: #10B981;
    --color-navbar-bg: #F8FAFC;
    --color-navbar-text: #1E293B;
    --color-body-bg: #FAFBFC;
    --color-card-bg: #FFFFFF;
    --color-text-primary: #1E293B;
    --color-text-secondary: #64748B;
    --color-border: #E2E8F0;
}

/* ============================================
   APLICACIÓN DE VARIABLES A BOOTSTRAP
   ============================================ */

/* Sobreescribir variables de Bootstrap */
:root,
[data-theme] {
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 201, 139, 139;
    --bs-secondary: var(--color-secondary);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-dark);
}

/* Botones primarios */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* Botones de acento (nueva clase) */
.btn-accent {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
    font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus {
    background-color: var(--color-accent-dark) !important;
    border-color: var(--color-accent-dark) !important;
    color: #fff !important;
}

/* Outline primario */
.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Body */
body {
    background-color: var(--color-body-bg);
    color: var(--color-text-primary);
}

/* Cards */
.card {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
}
.card-header {
    border-bottom-color: var(--color-border);
}

/* Tablas */
.table-dark {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary-dark) !important;
}
.table-primary {
    background-color: var(--color-primary-light) !important;
    color: var(--color-text-primary);
}
.table-hover tbody tr:hover {
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* Inputs */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--color-primary) !important;
}
.badge.bg-info {
    background-color: var(--color-secondary-dark) !important;
    color: var(--color-text-primary) !important;
}

/* Links */
a {
    color: var(--color-primary);
}
a:hover {
    color: var(--color-primary-dark);
}

/* Navbar superior */
.top-navbar {
    background-color: var(--color-navbar-bg) !important;
    color: var(--color-navbar-text) !important;
    border-bottom: 1px solid var(--color-border);
}

/* Sidebar */
.sidebar {
    background-color: var(--color-sidebar-bg) !important;
    color: var(--color-sidebar-text) !important;
}
.sidebar .nav-link {
    color: var(--color-sidebar-text) !important;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}
.sidebar .nav-link:hover {
    background-color: var(--color-sidebar-hover) !important;
    border-left-color: var(--color-accent);
}
.sidebar .nav-link.active {
    background-color: var(--color-sidebar-hover) !important;
    border-left-color: var(--color-sidebar-active);
    font-weight: 600;
}
.sidebar .nav-link.text-muted {
    color: color-mix(in srgb, var(--color-sidebar-text) 60%, transparent) !important;
}

/* Encabezado del sidebar */
.sidebar-header {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-sidebar-text) !important;
    border-bottom: 2px solid var(--color-accent);
}

/* Alertas */
.alert-primary {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* Page heading */
h1, h2, h3 {
    color: var(--color-primary-dark);
}

/* Transición suave al cambiar tema */
body, .card, .sidebar, .btn, .badge, .table {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}