/* ============================================================================
   BRAND THEME — identidad visual por marca de la sucursal
   Se carga después de los CSS de cada página y sobreescribe solo el "shell"
   (header, sidebar, botones primarios, foco, links y tablas). Los colores
   semánticos (éxito, peligro, advertencia) y los iconos de módulos no cambian.
   ============================================================================ */

/* ── Paletas oficiales ─────────────────────────────────────────────────────── */

:root[data-brand="tovar"] {
    --accent-color: #004aad;
    --accent-dark: #003072;
    --accent-rgb: 0, 74, 173;
    --accent-light: rgba(0, 74, 173, 0.10);
    --sidebar-bg: #00234f;
    --brand-highlight: #ffc400;
    --on-brand: #ffffff;
    --link-color: #004aad;
    --control-color: #004aad;
    --control-rgb: 0, 74, 173;
}

:root[data-brand="proseguros"] {
    --accent-color: #c13b92;
    --accent-dark: #9a2e74;
    --accent-rgb: 193, 59, 146;
    --accent-light: rgba(193, 59, 146, 0.10);
    --sidebar-bg: #3a102e;
    --brand-highlight: #e877c1;
    --on-brand: #ffffff;
    --link-color: #c13b92;
    --control-color: #c13b92;
    --control-rgb: 193, 59, 146;
}

/* Ensenada: amarillo como color principal; rojo para enlaces y foco. */
:root[data-brand="ensenada"] {
    --accent-color: #f7ca22;
    --accent-dark: #c79a00;
    --accent-rgb: 247, 202, 34;
    --accent-light: rgba(247, 202, 34, 0.18);
    --sidebar-bg: #050202;
    --brand-highlight: #f7ca22;
    --on-brand: #050202;
    --link-color: #942322;
    --control-color: #942322;
    --control-rgb: 148, 35, 34;
}

/* Oficina 3 — Agencia de Seguros para Auto (verde claro, a pedido) */
:root[data-brand="auto"] {
    --accent-color: #22c55e;
    --accent-dark: #16a34a;
    --accent-rgb: 34, 197, 94;
    --accent-light: rgba(34, 197, 94, 0.14);
    --sidebar-bg: #0a3b28;
    --brand-highlight: #86efac;
    --on-brand: #052e1b;
    --link-color: #15803d;
    --control-color: #15803d;
    --control-rgb: 21, 128, 61;
}

/* ── Primer frame y shell ─────────────────────────────────────────────────── */

html[data-brand] {
    background: var(--sidebar-bg);
}

html[data-brand] .sidebar {
    background: var(--sidebar-bg);
}

html[data-brand] .sidebar-brand i {
    color: var(--brand-highlight);
}

html[data-brand] .nav-item:hover {
    background: rgba(var(--accent-rgb), 0.16);
}

html[data-brand] .nav-item.active {
    background: var(--accent-color);
    box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.35);
    color: var(--on-brand);
}

html[data-brand] .page-header,
html[data-brand] #app-header {
    background: var(--accent-color);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.24);
    color: var(--on-brand);
}

html[data-brand] #welcome-message {
    color: var(--on-brand);
}

/* Header amarillo de Ensenada: todo el texto e iconos en negro. */
:root[data-brand="ensenada"] .page-header .page-title,
:root[data-brand="ensenada"] .page-header .page-title i,
:root[data-brand="ensenada"] #welcome-message {
    color: #050202;
}

:root[data-brand="ensenada"] .page-header .sidebar-toggle-btn,
:root[data-brand="ensenada"] .page-header .btn-outline-light,
:root[data-brand="ensenada"] #app-header .btn-outline-light,
:root[data-brand="ensenada"] .page-header .btn-back {
    color: #050202;
    border-color: rgba(5, 2, 2, 0.38);
    background: rgba(255, 255, 255, 0.28);
}

:root[data-brand="ensenada"] .page-header .sidebar-toggle-btn:hover,
:root[data-brand="ensenada"] .page-header .btn-outline-light:hover,
:root[data-brand="ensenada"] #app-header .btn-outline-light:hover,
:root[data-brand="ensenada"] .page-header .btn-back:hover {
    color: #050202;
    border-color: rgba(5, 2, 2, 0.55);
    background: rgba(255, 255, 255, 0.45);
}

/* Header verde claro de Oficina 3: texto e iconos oscuros. */
:root[data-brand="auto"] .page-header .page-title,
:root[data-brand="auto"] .page-header .page-title i,
:root[data-brand="auto"] #welcome-message {
    color: #052e1b;
}

:root[data-brand="auto"] .page-header .sidebar-toggle-btn,
:root[data-brand="auto"] .page-header .btn-outline-light,
:root[data-brand="auto"] #app-header .btn-outline-light,
:root[data-brand="auto"] .page-header .btn-back {
    color: #052e1b;
    border-color: rgba(5, 46, 27, 0.38);
    background: rgba(255, 255, 255, 0.30);
}

:root[data-brand="auto"] .page-header .sidebar-toggle-btn:hover,
:root[data-brand="auto"] .page-header .btn-outline-light:hover,
:root[data-brand="auto"] #app-header .btn-outline-light:hover,
:root[data-brand="auto"] .page-header .btn-back:hover {
    color: #052e1b;
    border-color: rgba(5, 46, 27, 0.55);
    background: rgba(255, 255, 255, 0.48);
}

/* ── Tablas ───────────────────────────────────────────────────────────────── */

html[data-brand] .page-content .table thead {
    background: var(--sidebar-bg);
}

html[data-brand] .page-content .table-hover tbody tr:hover {
    background-color: rgba(var(--accent-rgb), 0.07);
}

/* ── Botones Bootstrap ────────────────────────────────────────────────────── */

html[data-brand] .btn-primary {
    --bs-btn-color: var(--on-brand);
    --bs-btn-bg: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-color: var(--on-brand);
    --bs-btn-hover-bg: var(--accent-dark);
    --bs-btn-hover-border-color: var(--accent-dark);
    --bs-btn-focus-shadow-rgb: var(--accent-rgb);
    --bs-btn-active-color: var(--on-brand);
    --bs-btn-active-bg: var(--accent-dark);
    --bs-btn-active-border-color: var(--accent-dark);
    --bs-btn-disabled-color: var(--on-brand);
    --bs-btn-disabled-bg: var(--accent-color);
    --bs-btn-disabled-border-color: var(--accent-color);
}

html[data-brand] .btn-outline-primary {
    --bs-btn-color: var(--link-color);
    --bs-btn-border-color: var(--link-color);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--link-color);
    --bs-btn-hover-border-color: var(--link-color);
    --bs-btn-focus-shadow-rgb: var(--control-rgb);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--link-color);
    --bs-btn-active-border-color: var(--link-color);
    --bs-btn-disabled-color: var(--link-color);
    --bs-btn-disabled-border-color: var(--link-color);
}

html[data-brand] .btn-link,
html[data-brand] .link-primary,
html[data-brand] .text-primary {
    color: var(--link-color) !important;
}

html[data-brand] .bg-primary,
html[data-brand] .text-bg-primary {
    background-color: var(--accent-color) !important;
    color: var(--on-brand) !important;
}

html[data-brand] .border-primary {
    border-color: var(--accent-color) !important;
}

/* ── Formularios ──────────────────────────────────────────────────────────── */

html[data-brand] .form-control:focus,
html[data-brand] .form-select:focus,
html[data-brand] .form-check-input:focus {
    border-color: var(--control-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--control-rgb), 0.22);
}

html[data-brand] .form-check-input:checked {
    background-color: var(--control-color);
    border-color: var(--control-color);
}

/* ── Navegación / paginación / tabs ───────────────────────────────────────── */

html[data-brand] .page-link {
    color: var(--link-color);
}

html[data-brand] .page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--control-rgb), 0.22);
}

html[data-brand] .active > .page-link,
html[data-brand] .page-link.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--on-brand);
}

html[data-brand] .nav-tabs .nav-link.active {
    color: var(--link-color);
}

html[data-brand] .dropdown-item.active,
html[data-brand] .dropdown-item:active {
    background: var(--accent-color);
    color: var(--on-brand);
}

html[data-brand] .accordion-button:not(.collapsed) {
    color: var(--link-color);
    background: var(--accent-light);
}

html[data-brand] .accordion-button:focus {
    border-color: var(--control-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--control-rgb), 0.22);
}

/* ── Barras de progreso ───────────────────────────────────────────────────── */

html[data-brand] .progress-bar.bg-primary {
    background-color: var(--accent-color) !important;
    color: var(--on-brand);
}