/*
 * =============================================================================
 * ARTEMIS HC — THEME OVERRIDE
 * =============================================================================
 * Este archivo sobreescribe los valores hardcodeados en bootstrap.css y
 * components.css con la paleta Artemis extraída de la imagen corporativa.
 *
 * Debe cargarse DESPUÉS de todos los demás CSS.
 * Paleta de referencia: allcolors.css / allcolors.md
 * =============================================================================
 */


/* =============================================================================
   1. BODY Y FONDO GENERAL
   bootstrap.css línea 11: body { background-color: #f8f8f8 }
   ============================================================================= */

body {
    background-color: #F8F3FC !important;
    color: #3A2050 !important;
}

a {
    color: #7840B0 !important;
}

a:hover {
    color: #4A2882 !important;
}


/* =============================================================================
   2. SIDEBAR — MODO OSCURO (menu-dark)
   components.css líneas 703–930
   Reemplaza: #10163a, #0c102a, #090d22, #060816, #050712
   ============================================================================= */

.main-menu.menu-dark {
    background: #26155A !important;
}

.main-menu.menu-dark .main-menu-header {
    background: #1A0825 !important;
}

.main-menu.menu-dark .main-menu-header .menu-search {
    background: #1A0825 !important;
    color: #E5D5F5 !important;
    border-color: #4A2882 !important;
}

.main-menu.menu-dark .main-menu-header .menu-search:focus {
    border-color: #7840B0 !important;
}

.main-menu.menu-dark .navigation {
    background: #26155A !important;
}

.main-menu.menu-dark .navigation .navigation-header {
    color: #F5A840 !important;
    background: transparent !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
}

.main-menu.menu-dark .navigation .navigation-header span {
    color: #F5A840 !important;
}

.main-menu.menu-light .navigation .navigation-header {
    color: #ffffff !important;
    background: #F5A840 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
}

.main-menu.menu-light .navigation .navigation-header span {
    color: #f8f8f8 !important;
}

/* SVG icons en navigation-header — dark: amber, light: lavender */
.main-menu.menu-dark .navigation .navigation-header svg path,
.main-menu.menu-dark .navigation .navigation-header svg {
    fill: #F5A840 !important;
}

.main-menu.menu-light .navigation .navigation-header svg path,
.main-menu.menu-light .navigation .navigation-header svg {
    fill: #ffffff !important;
}

.main-menu.menu-dark .navigation li a {
    color: #D5B8F0 !important;
}

.main-menu.menu-dark .navigation li a span.menu-sub-title {
    color: #9B60C8 !important;
}

/* Item activo en sidebar oscuro — cambia el gradiente verde por Artemis */
.main-menu.menu-dark .navigation > li.active > a,
.main-menu.menu-dark .navigation > li ul .active {
    background: linear-gradient(118deg, #7840B0, #CC7AA8) !important;
    box-shadow: 0 0 10px 1px rgba(120, 64, 176, 0.6) !important;
    -webkit-box-shadow: 0 0 10px 1px rgba(120, 64, 176, 0.6) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}

.main-menu.menu-dark .navigation > li ul .active > a {
    color: #ffffff !important;
}

/* Item abierto/grupo activo */
.main-menu.menu-dark .navigation > li.open > a,
.main-menu.menu-dark .navigation > li.sidebar-group-active > a {
    background: #1E1050 !important;
    color: #E5D5F5 !important;
}

/* Sub-niveles */
.main-menu.menu-dark .navigation > li .active {
    background: #1E1050 !important;
}

.main-menu.menu-dark .navigation > li .active > a {
    color: #CC7AA8 !important;
}

.main-menu.menu-dark .navigation > li .active .hover > a,
.main-menu.menu-dark .navigation > li ul .hover > a,
.main-menu.menu-dark .navigation > li ul:hover > a {
    background: #1E1050 !important;
    color: #E5D5F5 !important;
}

.main-menu.menu-dark .navigation > li > ul,
.main-menu.menu-dark .navigation > li ul li {
    background: #1A0825 !important;
}

.main-menu.menu-dark .navigation > li ul li > a {
    color: #C5A0E8 !important;
}

.main-menu.menu-dark ul.menu-popout .active > a {
    background: #7840B0 !important;
    color: #fff !important;
}

/* Switch en dark layout */
body.dark-layout .hide-scroll-top-switch .custom-switch .custom-control-label:before,
body.dark-layout .collapse-sidebar .custom-switch .custom-control-label:before {
    background-color: #26155A !important;
}


/* =============================================================================
   3. SIDEBAR — MODO CLARO (menu-light)
   components.css líneas 472–700
   Reemplaza: #415679, #526a94
   ============================================================================= */

.main-menu.menu-light {
    background: #3A2050 !important;
    color: #3A2050 !important;
    border-right: 1px solid rgba(120, 64, 176, 0.12) !important;
}

.main-menu.menu-light .main-menu-header .menu-search {
    background: #F0E8FA !important;
    color: #3A2050 !important;
    border-color: rgba(120, 64, 176, 0.25) !important;
}

.main-menu.menu-light .main-menu-header .menu-search:focus {
    border-color: #7840B0 !important;
}

.main-menu.menu-light .navigation {
    background: #FFFFFF !important;
}

.main-menu.menu-light .navigation li a {
    color: #3A2050 !important;
}

.main-menu.menu-light .navigation li a i,
.main-menu.menu-light .navigation li a svg {
    color: #7840B0 !important;
    fill: #7840B0 !important;
}

.main-menu.menu-light .navigation li a span.menu-sub-title {
    color: #9B60C8 !important;
}

/* Item activo en sidebar claro — toque sutil, sin gradiente agresivo */
.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-light .navigation > li ul .active {
    background: rgba(120, 64, 176, 0.1) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    color: #7840B0 !important;
    border-left: 3px solid #7840B0 !important;
    border-radius: 0 !important;
}

.main-menu.menu-light .navigation > li ul .active > a {
    color: #7840B0 !important;
}

.main-menu.menu-light .navigation > li .active > a {
    color: #7840B0 !important;
}

.main-menu.menu-light .navigation > li .active {
    background: rgba(120, 64, 176, 0.06) !important;
}

/* Item abierto/grupo activo en modo claro */
.main-menu.menu-light .navigation > li.open > a,
.main-menu.menu-light .navigation > li.sidebar-group-active > a {
    background: rgba(120, 64, 176, 0.06) !important;
    color: #7840B0 !important;
}

.main-menu.menu-light .navigation > li ul li {
    background: #FFFFFF !important;
    color: #3A2050 !important;
}

.main-menu.menu-light .navigation > li ul li > a {
    color: #3A2050 !important;
}

.main-menu.menu-light .navigation > li ul li:hover > a {
    color: #7840B0 !important;
}

.main-menu.menu-light ul.menu-popout {
    background: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(120, 64, 176, 0.15) !important;
    border: 1px solid rgba(120, 64, 176, 0.12) !important;
}


/* =============================================================================
   4. NAVBAR / HEADER
   ============================================================================= */

.header-navbar,
.header-navbar.navbar-light,
.header-navbar.floating-nav,
nav.header-navbar {
    background: #3A2050 !important;
    color: #ffffff !important;
}

.header-navbar .navbar-container .nav-item .nav-link {
    color: #ffffff !important;
}

.header-navbar .navbar-container .nav-item .nav-link:hover {
    color: #ffffff !important;
}

/* Dropdown del header */
.header-navbar .dropdown-menu {
    background: #7b7394 !important;
    border-color: #4A2882 !important;
}

.header-navbar .dropdown-menu .dropdown-item {
    color: #D5B8F0 !important;
}

.header-navbar .dropdown-menu .dropdown-item:hover {
    background: #4A2882 !important;
    color: #ffffff !important;
}


/* =============================================================================
   5. BOTONES — Bootstrap .btn-primary y variantes
   ============================================================================= */

.btn-primary,
.btn-primary.btn-gradient-bg {
    background-color: #7840B0 !important;
    border-color: #7840B0 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #4A2882 !important;
    border-color: #4A2882 !important;
    box-shadow: 0 8px 25px -8px #7840B0 !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    border-color: #7840B0 !important;
    color: #7840B0 !important;
}

.btn-outline-primary:hover {
    background-color: #7840B0 !important;
    color: #ffffff !important;
}

.btn-danger {
    background-color: #CC4878 !important;
    border-color: #CC4878 !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    background-color: #A02858 !important;
    border-color: #A02858 !important;
}

.btn-warning {
    background-color: #F5A840 !important;
    border-color: #F5A840 !important;
    color: #ffffff !important;
}

.btn-warning:hover {
    background-color: #D87820 !important;
    border-color: #D87820 !important;
}

.btn-info {
    background-color: #9B60C8 !important;
    border-color: #9B60C8 !important;
    color: #ffffff !important;
}

.btn-info:hover {
    background-color: #7848A8 !important;
    border-color: #7848A8 !important;
}

.btn-success {
    background-color: #7840B0 !important;
    border-color: #7840B0 !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: #4A2882 !important;
    border-color: #4A2882 !important;
    box-shadow: 0 8px 25px -8px rgba(120, 64, 176, 0.6) !important;
    color: #ffffff !important;
}

.btn-outline-success {
    border-color: #7840B0 !important;
    color: #7840B0 !important;
}

.btn-outline-success:hover {
    background-color: #7840B0 !important;
    color: #ffffff !important;
}

.badge-success {
    background-color: #7840B0 !important;
    color: #ffffff !important;
}


/* =============================================================================
   5b. VUESAX BUTTONS — success/primary type
   Los botones Vuesax usan --vs-color via rgba(). Sobreescribimos directamente
   background y color para ganar sobre los estilos compilados en app.js
   ============================================================================= */

/* Botón flat success (los iconos en los cards de médicos) */
.vs-button--success {
    --vs-color: 120, 64, 176 !important;
}

.vs-button--success.vs-button--flat,
button.vs-button.vs-button--success.vs-button--flat {
    color: rgba(120, 64, 176, 1) !important;
}

.vs-button--success.vs-button--flat:hover,
button.vs-button.vs-button--success.vs-button--flat:hover {
    background: rgba(120, 64, 176, 0.15) !important;
    color: rgba(120, 64, 176, 1) !important;
}

/* Botón sólido success */
.vs-button--success:not(.vs-button--flat):not(.vs-button--border):not(.vs-button--transparent) {
    background: rgba(120, 64, 176, 1) !important;
    box-shadow: 0px 8px 20px -6px rgba(120, 64, 176, 0.6) !important;
}

/* Botón border success */
.vs-button--success.vs-button--border {
    border: 2px solid rgba(120, 64, 176, 1) !important;
    color: rgba(120, 64, 176, 1) !important;
}

/* Vuesax primary (por si acaso) */
:root {
    --vs-primary: 120, 64, 176;
    --vs-success: 120, 64, 176;
    --vs-danger:  204, 72, 120;
    --vs-warn:    245, 168, 64;
    --vs-dark:     26,  8,  37;
}


/* =============================================================================
   5c. VUE-MULTISELECT — Tags de diagnósticos y selects múltiples
   vue-multiselect usa #41b883 (verde Vue.js) hardcodeado en su CSS.
   ============================================================================= */

.multiselect__tag {
    background: #7840B0 !important;
    color: #ffffff !important;
}

.multiselect__tag-icon:after {
    color: #E5D5F5 !important;
}

.multiselect__tag-icon:focus,
.multiselect__tag-icon:hover {
    background: #4A2882 !important;
}

.multiselect__tag-icon:focus:after,
.multiselect__tag-icon:hover:after {
    color: #ffffff !important;
}

.multiselect__option--highlight,
.multiselect__option--highlight:after {
    background: #7840B0 !important;
    color: #ffffff !important;
}

.multiselect__option--selected.multiselect__option--highlight,
.multiselect__option--selected.multiselect__option--highlight:after {
    background: #CC4878 !important;
    color: #ffffff !important;
}

.multiselect__spinner:before,
.multiselect__spinner:after {
    border-top-color: #7840B0 !important;
}

.multiselect__tags {
    border-color: #D5B8F0 !important;
}

.multiselect__tags:focus-within {
    border-color: #7840B0 !important;
    box-shadow: 0 3px 10px 0 rgba(120, 64, 176, 0.15) !important;
}

.multiselect__input:focus,
.multiselect__single:focus {
    border-color: #7840B0 !important;
}


/* =============================================================================
   6. CARDS
   ============================================================================= */

/* Todas las cards — fondo blanco, acento lateral púrpura */
.card {
    background: #ffffff !important;
    border: none !important;
    border-left: 4px solid #7840B0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 16px 0 rgba(120, 64, 176, 0.1) !important;
}

.card .card-header {
    background: rgba(120, 64, 176, 0.06) !important;
    border-bottom: 1px solid rgba(120, 64, 176, 0.12) !important;
    color: #26155A !important;
    font-weight: 600 !important;
}

.card .card-footer {
    background: rgba(120, 64, 176, 0.04) !important;
    border-top: 1px solid rgba(120, 64, 176, 0.12) !important;
}

.card-title {
    color: #26155A !important;
    font-weight: 600 !important;
}

.card-text {
    color: #3A2050 !important;
}

/* Excluir cards con fondo propio para que no hereden el border-left */
body .card.bg-primary,
body .card.bg-especialista,
body .bg-especialista {
    border-left: none !important;
}


/* =============================================================================
   7. TABLAS
   ============================================================================= */

.table thead th {
    background-color: #E5D5F5 !important;
    color: #26155A !important;
    border-color: #D5B8F0 !important;
}

.table td,
.table th {
    border-color: #EAD8F8 !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(120, 64, 176, 0.04) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(120, 64, 176, 0.08) !important;
}


/* =============================================================================
   8. FORMULARIOS — inputs, selects
   ============================================================================= */

.form-control:focus {
    border-color: #7840B0 !important;
    box-shadow: 0 3px 10px 0 rgba(120, 64, 176, 0.15) !important;
}

.form-control {
    border-color: #D5B8F0 !important;
    color: #3A2050 !important;
}


/* =============================================================================
   9. BADGES Y PILLS
   ============================================================================= */

.badge-primary {
    background-color: #7840B0 !important;
}

.badge-danger {
    background-color: #CC4878 !important;
}

.badge-warning {
    background-color: #F5A840 !important;
}

.badge-info {
    background-color: #9B60C8 !important;
}


/* =============================================================================
   10. PAGINACIÓN
   ============================================================================= */

.page-item.active .page-link {
    background-color: #7840B0 !important;
    border-color: #7840B0 !important;
    color: #ffffff !important;
}

.page-link {
    color: #7840B0 !important;
}

.page-link:hover {
    background-color: #E5D5F5 !important;
}


/* =============================================================================
   11. ALERTS
   ============================================================================= */

.alert-primary {
    background: rgba(120, 64, 176, 0.12) !important;
    color: #4A2882 !important;
    border-color: #D5B8F0 !important;
}

.alert-danger {
    background: rgba(204, 72, 120, 0.12) !important;
    color: #881848 !important;
    border-color: #F5AFAF !important;
}

.alert-warning {
    background: rgba(245, 168, 64, 0.12) !important;
    color: #A04800 !important;
    border-color: #FFD3A9 !important;
}

.alert-info {
    background: rgba(155, 96, 200, 0.12) !important;
    color: #603088 !important;
    border-color: #D5B8F0 !important;
}


/* =============================================================================
   12. SCROLLBAR (Webkit)
   ============================================================================= */

::-webkit-scrollbar-thumb {
    background: #7840B0 !important;
}

::-webkit-scrollbar-track {
    background: #F0E5FA !important;
}


/* =============================================================================
   13. CARDS DE MÉDICOS / ESPECIALISTAS (.bg-especialista)
   Estos estilos sobreescriben los inyectados por Vue en runtime.
   Se usa body + selector para ganar en especificidad sin !important en Vue.
   ============================================================================= */

/* --- Cards de médicos (.bg-especialista) --- */
/* Mismo estilo limpio que el resto de cards */

body .bg-especialista,
html body .card.bg-especialista {
    background: #ffffff !important;
    border: none !important;
    border-left: 4px solid #7840B0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 16px 0 rgba(120, 64, 176, 0.1) !important;
}

body .bg-especialista .card-body {
    border-top: none !important;
}

body .bg-especialista .badge-success,
body .bg-especialista .badge.badge-pill {
    background-color: rgba(120, 64, 176, 0.1) !important;
    color: #7840B0 !important;
    border: 1px solid rgba(120, 64, 176, 0.25) !important;
    font-weight: 600 !important;
}

body .bg-especialista .card-title,
body .bg-especialista .card-title a,
body .bg-especialista .b-card-title a {
    color: #26155A !important;
    font-weight: 600 !important;
}

body .bg-especialista .card-title a:hover,
body .bg-especialista .b-card-title a:hover {
    color: #7840B0 !important;
}

body .bg-especialista .card-text,
body .bg-especialista .b-card-text {
    color: #3A2050 !important;
}


/* --- Cards de especialidades (bg-variant="primary") --- */
/* Fondo claro con acento — menos saturado y más legible */

body .card.bg-primary {
    background: #ffffff !important;
    border: none !important;
    border-left: 4px solid #7840B0 !important;
    box-shadow: 0 2px 16px 0 rgba(120, 64, 176, 0.1) !important;
}

body .card.bg-primary .card-header {
    background: rgba(120, 64, 176, 0.07) !important;
    border-bottom: 1px solid rgba(120, 64, 176, 0.12) !important;
    color: #7840B0 !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.02em !important;
}

body .card.bg-primary .card-title,
body .card.bg-primary .b-card-title {
    color: #26155A !important;
    font-weight: 600 !important;
}

body .card.bg-primary a,
body .card.bg-primary a.text-white {
    color: #3A2050 !important;
}

body .card.bg-primary a:hover,
body .card.bg-primary a.text-white:hover {
    color: #7840B0 !important;
}

body .card.bg-primary .fa,
body .card.bg-primary .fas,
body .card.bg-primary .far,
body .card.bg-primary i[class*="fa"] {
    color: #7840B0 !important;
}


/* =============================================================================
   6. SIDEBAR MENU ITEMS — BOTONES ANIMADOS
   ============================================================================= */

.main-menu.menu-light .navigation .nav-item > a {
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    margin: 0.4rem 0.5rem !important;
    border-left: 3px solid transparent !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.main-menu.menu-light .navigation .nav-item > a:hover,
.main-menu.menu-light .navigation .nav-item > a:focus,
.main-menu.menu-light .navigation .nav-item > a:active {
    background: rgba(120, 64, 176, 0.12) !important;
    border-left-color: #7840B0 !important;
    box-shadow: 0 4px 12px rgba(120, 64, 176, 0.15) !important;
    /* nada de translate: el link NO se debe correr al pasar el mouse */
    transform: none !important;
}

/* Items activos */
.main-menu.menu-light .navigation > li.active > a {
    background: rgba(120, 64, 176, 0.15) !important;
    border-left-color: #7840B0 !important;
    color: #7840B0 !important;
    box-shadow: 0 4px 12px rgba(120, 64, 176, 0.2) !important;
}

/* Iconos con animación */
.main-menu.menu-light .navigation .nav-item > a svg,
.main-menu.menu-light .navigation .nav-item > a i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.main-menu.menu-light .navigation .nav-item > a:hover svg,
.main-menu.menu-light .navigation .nav-item > a:hover i {
    transform: scale(1.1) !important;
}

/* =============================================================================
   7. FIX SIDEBAR — CLICKS BLOQUEADOS EN PANTALLAS ANGOSTAS
   =============================================================================
   El tema trae un ".drag-target" (franja invisible de 40px a la izquierda para
   abrir el menú con swipe en móvil). En anchos < 768px queda con z-index 1036,
   por encima del sidebar (.main-menu = z-index 1031), y tapa la zona de los
   iconos del menú, "corriendo" el link y bloqueando el click en el módulo.
   Este layout no usa el drawer deslizable, así que lo dejamos pasar los clicks. */
.drag-target {
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Al angostar la ventana, app-menu.js agrega "menu-collapsed" al body (aunque
   el sidebar sigue expandido porque este layout no es vertical-menu-modern).
   Eso dispara un popout que CLONA el título del item y lo fija arriba con
   position:fixed -> "el link se va arriba al pasar el mouse".
   El clon se agrega como hijo directo de .main-menu-content, así que lo
   ocultamos sin tocar los items reales del menú (que van dentro de .navigation). */
.main-menu-content > a.menu-title,
.main-menu-content > span.menu-title {
    display: none !important;
}