/* Variables CSS para el tema azul */
:root {
    --theme-default: #062f6e !important;
    --theme-secondary: #f5a706 !important;
    --bs-primary: #062f6e !important;
    --bs-primary-rgb: 6,47,110 !important;
    --primary-color: 6,47,110 !important;
    --bs-link-color: #062f6e !important;
    --bs-link-hover-color: #05275c !important;
    --bs-link-color-rgb: 6,47,110 !important;
    --bs-link-hover-color-rgb: 10, 41, 81 !important;
    --bs-btn-bg: #062f6e !important;
    --bs-btn-border-color: #062f6e !important;
    --bs-btn-hover-bg: #05275c !important;
    --bs-btn-hover-border-color: #05275c !important;
    --bs-btn-active-bg: #041f4a !important;
    --bs-btn-active-border-color: #041f4a !important;
    --bs-primary-border-subtle: #6b8cc4 !important;
    --bs-primary-bg-subtle: #cfe2ff !important;
    --bs-primary-text-emphasis: #041f4a !important;
}

/* Sobrescribir clases específicas de Bootstrap */
.btn-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #062f6e !important;
    --bs-btn-border-color: #062f6e !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #05275c !important;
    --bs-btn-hover-border-color: #05275c !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #041f4a !important;
    --bs-btn-active-border-color: #041f4a !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: #062f6e !important;
    --bs-btn-disabled-border-color: #062f6e !important;
}

.bg-primary {
    background-color: #062f6e !important;
}

.text-primary {
    color: #062f6e !important;
}

.border-primary {
    border-color: #062f6e !important;
}

.alert-primary {
    color: #041f4a !important;
    background-color: rgba(6,47,110, 0.1) !important;
    border-color: rgba(6,47,110, 0.3) !important;
}

select.form-control {
    --bs-form-select-bg-img: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3E%3C/svg%3E");
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: .375rem 2.25rem .375rem .75rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    width: 100%;
}
ul.pagination {
    margin-top:15px !important;
}
ul.pagination li a {
    background-color: unset !important;
    border: 1px solid #062f6e !important;
    padding: 7px 10px !important;
    margin:5px 0px !important;
}
/*
 * Menú lateral en pantallas chicas (< 1200px): arranca colapsado mostrando solo los íconos (riel).
 * `sidebar.js` pone `sidebar-open` (colapsado) al cargar; el botón de menú lo expande encima del contenido.
 * Aquí solo el ancho y el margen del contenido; el interior del riel está en `css/sidebar.css` (sección 7).
 */
@media (max-width: 1199.98px) {
    .page-wrapper.compact-wrapper .page-body-wrapper { margin-left: 72px !important; }
    .page-wrapper.compact-wrapper .page-sidebar { box-shadow: 0 4px 40px rgba(0, 0, 0, .25); }
    .page-wrapper.compact-wrapper.sidebar-open .page-sidebar { left: 0; width: 72px; box-shadow: 0 4px 20px rgba(0, 0, 0, .08); }
}
@media (max-width: 575.98px) {
    .page-wrapper.compact-wrapper .page-body-wrapper { margin-left: 60px !important; }
    .page-wrapper.compact-wrapper.sidebar-open .page-sidebar { width: 60px; }
}

/*
 * Logo del header (`site/headerApp.php`): el bloque del logotipo va en azul de marca en TODOS los anchos (el tema lo vuelve
 * transparente por debajo de 1200px). Encima va el logotipo blanco de Melchor (`.light-logo`, img/logo-white.png) y, por debajo
 * de 1200px —menú en riel de iconos—, solo la M blanca (`.dark-logo`, img/logo-mini-white.png). El botón del menú se invierte
 * a blanco para que no se pierda sobre el azul.
 */
.page-header .logo-wrapper { background-color: var(--theme-default) !important; }
.page-header .logo-wrapper .light-logo { display: block; height: 40px; width: auto; max-width: none; }
.page-header .logo-wrapper .dark-logo { display: none; }
@media (max-width: 1199.98px) {
    .page-header .logo-wrapper { width: auto !important; padding: 12px 14px !important; gap: 12px; }
    .page-header .logo-wrapper .light-logo { display: none !important; }
    .page-header .logo-wrapper .dark-logo { display: block !important; height: 46px; width: auto !important; margin: -4px 0; }
    .page-header .logo-wrapper .close-btn { background-color: rgba(255, 255, 255, .18) !important; color: #fff !important; }
    .page-header .logo-wrapper .close-btn:hover { background-color: rgba(255, 255, 255, .32) !important; }
    .page-header .logo-wrapper .close-btn .svg-color { stroke: #fff !important; }
}

/*
 * Menú de la foto de perfil (`site/headerApp.php`): cada opción con su ícono de color sobre un cuadro tenue, para
 * distinguirlas de un vistazo. Cerrar sesión va en rojo.
 */
.profile-body .menu-icono {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px;
    width: 28px; height: 28px; border-radius: 8px; font-size: 14px;
}
header ul[class*=header-]>li.profile-nav .custom-menu .profile-body .menu-icono svg { width: 16px; height: 16px; }
.profile-body .menu-icono--mi-perfil { color: #6f42c1; background: #6f42c11a; }
.profile-body .menu-icono--perfil { color: #0d6efd; background: #0d6efd1a; }
.profile-body .menu-icono--correo { color: #fd7e14; background: #fd7e141a; }
.profile-body .menu-icono--whatsapp { color: #128c4b; background: #25d3661f; }
.profile-body .menu-icono--salir { color: #dc3545; background: #dc35451a; }
.profile-body .menu-icono--salir .svg-color { stroke: #dc3545; }
@media (min-width: 576px) {
    header ul[class*=header-]>li.profile-nav .custom-menu .profile-body { width: 220px; }
}

/*
 * Foto de perfil de la persona (`backend\helpers\AvatarUsuario`, docs/perfil-usuario/): la imagen que subió o un círculo
 * con sus iniciales. En el encabezado reemplaza al avatar genérico del tema (que traía fondo amarillo y relleno).
 */
.avatar-usuario { display: block; border-radius: 50%; object-fit: cover; }
.avatar-usuario--iniciales {
    display: grid; place-items: center; width: 38px; height: 38px; color: #fff; font-weight: 700; font-size: 14px;
    letter-spacing: .02em; background: linear-gradient(135deg, #062f6e, #1b57a8); user-select: none;
}
.user-img img.avatar-usuario { padding: 0; background: none; object-fit: cover; }
.user-img .avatar-usuario--iniciales { border: 1px solid var(--shape-border); }
@media (max-width: 767.98px) { .user-img .avatar-usuario--iniciales { width: 35px; height: 35px; } }
@media (max-width: 575.98px) { .user-img .avatar-usuario--iniciales { width: 32px; height: 32px; font-size: 12px; } }