/* ==========================================================================
   ADMIN REBRAND (solo estilos, sin lógica)
   Ajusta estos tokens para cambiar toda la paleta:
   - --rb-primary: color principal
   - --rb-primary-hover: hover del principal
   - --rb-bg: fondo global
   - --rb-card: fondo de cards
   - --rb-sidebar: fondo sidebar/dropdowns
   ========================================================================== */

:root,
.dark {
    /* Brand colors */
    --rb-primary: #0781FECC; /* rgba(7, 129, 254, 0.8) */
    --rb-primary-hover: #066ED7CC;
    --rb-secondary: #00C7B4CC; /* rgba(0, 199, 180, 0.8) */
    --rb-primary-soft: rgba(7, 129, 254, 0.15);
    --rb-bg: #0f0f0f;
    --rb-card: #171717;
    --rb-sidebar: #0b0b0b;
    --rb-border: rgba(255, 255, 255, 0.1);
}

html,
body,
#app {
    background-color: var(--rb-bg) !important;
}

/* Tokens de Tailwind theme (appadmin/resources/css/app.css) */
:root,
.dark {
    --background: oklch(0.12 0 0) !important;
    --card: oklch(0.15 0 0) !important;
    --primary: var(--rb-primary) !important;
    --ring: var(--rb-primary) !important;
    --sidebar: oklch(0.1 0 0) !important;
    --sidebar-primary: var(--rb-primary) !important;
}

/* Fondos azulados hardcoded -> neutros oscuros */
.bg-\[\#0b0c2a\],
.bg-\[\#1b2e4b\],
.dark\:bg-\[\#1b2e4b\],
.dark\:bg-\[\#1b2e4b60\] {
    background-color: var(--rb-sidebar) !important;
}

.bg-\[\#ebedf07a\] {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.border-\[\#797979\] {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Sidebar */
aside,
[class*="sidebar"],
.custom-sidebar-scroll {
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

[class*="bg-blue-600"],
.bg-\[\#058beb\] {
    background-color: var(--rb-primary) !important;
    border-color: var(--rb-primary) !important;
    color: #fff !important;
}

[class*="hover:bg-blue-500"]:hover {
    background-color: var(--rb-primary-hover) !important;
}

/* Textos azules -> naranja marca */
.text-blue-400,
.text-blue-500,
.text-indigo-400,
.text-indigo-500 {
    color: var(--rb-primary) !important;
}

.hover\:text-blue-300:hover,
.hover\:text-blue-400:hover,
.hover\:text-indigo-400:hover {
    color: var(--rb-primary) !important;
}

/* Fondos suaves de estado */
.bg-blue-500\/10,
.bg-indigo-500\/10 {
    background-color: rgba(7, 129, 254, 0.1) !important;
}

.bg-blue-500\/20,
.bg-indigo-500\/20 {
    background-color: rgba(7, 129, 254, 0.2) !important;
}

.bg-blue-400,
.bg-blue-500 {
    background-color: var(--rb-primary) !important;
}

/* Inputs / focus */
input:focus,
select:focus,
textarea:focus,
.custom-autocomplete:focus,
.select-dark:focus,
.focus-within\:border-primary\/50:focus-within {
    border-color: rgba(7, 129, 254, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(7, 129, 254, 0.18) !important;
    outline: none !important;
}

.focus\:ring-blue-500\/10:focus,
.focus\:ring-4:focus {
    --tw-ring-color: rgba(7, 129, 254, 0.2) !important;
}

/* Cards, modales y dropdowns */
.bg-card,
.bg-card\/40,
.bg-card\/50,
.rounded-2xl.border.border-white\/10.bg-\[\#0b0c2a\] {
    background-color: #161616 !important;
}

.border-white\/10 {
    border-color: var(--rb-border) !important;
}

/* Botones gradiente reutilizable */
.button-86,
.btn-primary,
[class*="btn-primary"] {
    background: linear-gradient(90deg, var(--rb-primary) 0%, var(--rb-secondary) 100%) !important;
    color: #fff !important;
}

.button-86:hover,
.btn-primary:hover,
[class*="btn-primary"]:hover {
    background: linear-gradient(90deg, var(--rb-primary-hover) 0%, var(--rb-secondary) 100%) !important;
}