/* =============================================
   ALTA EKKLESIA — Rediseño visual (navbar, footer, sidebar)
   Copiado de la estructura/paleta de Diseño-AG.
   Solo estilos — no debe alterar validaciones ni lógica de las vistas.
   Se usa !important de forma deliberada: el layout carga múltiples hojas
   de estilo por página (CustomHeader.css, EncargadoPaisCustom.css, etc.)
   que pisan reglas genéricas; estas reglas deben ganar siempre.
   ============================================= */

/* FIX GLOBAL: style.bundle.css trae "i { color: #797CE3; }" (morado), un
   selector genérico sin !important que pinta CUALQUIER ícono <i> del sitio
   (bi-*, fa-*, fab, far, flaticon2-*) que no tenga su propio color explícito.
   Como este archivo se carga después, basta igualar la especificidad para
   que los íconos hereden el color de su contenedor (botón, badge, texto). */
i, .bi, [class*="fa-"], [class*="flaticon"] {
    color: inherit;
}

:root {
    --ag-topbar-height: 60px;
    --ag-border: #dde3ef;
    --ag-hover-bg: #f0f4f9;
    --ag-active-bg: #d6e4f7;
    --ag-active-text: #001A3F;
    --ag-text-primary: #1a2e4a;
    --ag-text-muted: #6b7a99;

    --Scale-Blue-60: #2564BF;
    --Scale-Blue-50: #4C80CB;
    --Scale-Blue-70: #1E529D;
    --Pastel-sky-100: #C8DEFF;
    --Scale-Cyan-10: #E9F8FF;
    --Background-white: #FFFFFF;

    --ds-primary: #2564BF;
    --ds-sky: #398AFF;
    --ds-teal: #50CFBC;
    --ds-cyan: #46C1FF;
    --ds-navy: #001A3F;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;
}

/* =============================================
   TOPBAR — barra completa de esquina a esquina
   ============================================= */
.ag-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--ag-topbar-height) !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--ag-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    z-index: 1000 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

.ag-topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.ag-topbar .ag-sidebar-toggle,
.ag-topbar .ag-sidebar-toggle i {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 6px !important;
    color: #14273e !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: background 0.22s ease !important;
}
.ag-topbar .ag-sidebar-toggle:hover { background: #f0f4f9 !important; }

.ag-brand {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: #0d1f3c !important;
}
.ag-brand-logo {
    height: 58px !important;
    width: auto !important;
    display: block !important;
}

.ag-topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ag-icon-btn {
    background: var(--ag-border) !important;
    border: none !important;
    cursor: pointer !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    color: var(--ag-text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background 0.22s ease, color 0.22s ease !important;
}
.ag-icon-btn:hover { background: #c8d4e8 !important; color: var(--ag-text-primary) !important; }
.ag-icon-btn img { display: block !important; }

.ag-user-chip {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #d6e4f7 !important;
    border-radius: 50px !important;
    padding: 5px 14px 5px 5px !important;
    cursor: pointer !important;
    transition: background 0.22s ease !important;
}
.ag-user-chip:hover { background: #c5d8f0 !important; }

.ag-user-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #2d5fa6 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}
.ag-user-avatar.lg {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
}

/* ── Iniciales de respaldo cuando el usuario no tiene foto de perfil ── */
.ag-avatar-iniciales {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #2564BF !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}
.ag-user-avatar .ag-avatar-iniciales {
    background: transparent !important;
    font-size: inherit !important;
    color: inherit !important;
}
.crr-profile-avatar .ag-avatar-iniciales,
.ag-profile-avatar .ag-avatar-iniciales {
    font-size: 26px !important;
    border-radius: 14px !important;
}

.ag-user-info {
    display: flex !important;
    flex-direction: column !important;
}
.ag-user-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #001A3F !important;
    line-height: 1.2 !important;
}
.ag-user-role {
    font-size: 11px !important;
    color: var(--ag-text-muted) !important;
    line-height: 1.2 !important;
}

/* El bloque aside+wrapper empieza debajo del topbar fijo */
.ag-page-body {
    padding-top: var(--ag-topbar-height) !important;
    min-height: 100vh !important;
}
/* El topbar fijo ya reserva su alto arriba; no dupliques espacio extra */
#kt_content {
    padding-top: 5px !important;
    margin-top: 0 !important;
}
#kt_content > div:first-child {
    margin-top: 0 !important;
}
#kt_subheader {
    margin-top: 0 !important;
}
#kt_aside_menu > .menu-nav {
    padding-top: 6px !important;
}

/* =============================================
   ASIDE (sidebar) — integración con Metronic KTAside, tema claro AG
   ============================================= */
@media (min-width: 992px) {
    .aside-fixed .aside {
        top: var(--ag-topbar-height) !important;
    }
}

.aside,
.aside-menu {
    background-color: #ffffff !important;
}
.aside {
    border-right: 1px solid var(--ag-border) !important;
}

.menu-icon-img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}

.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link {
    display: flex !important;
    align-items: center !important;
}
.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link > img {
    margin-right: 10px !important;
}

/* Menu links: texto oscuro sobre fondo blanco */
.aside-menu .menu-nav > .menu-item > .menu-link .menu-text,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-text {
    color: var(--ag-text-primary) !important;
    font-family: 'Public Sans', sans-serif !important;
    font-size: 13.5px !important;
}

/* Top-level items */
.aside-menu .menu-nav > .menu-item > .menu-link {
    border-radius: 6px !important;
    margin: 1px 10px !important;
    transition: background 0.15s !important;
}
.aside-menu .menu-nav > .menu-item > .menu-link:hover {
    background-color: var(--ag-hover-bg) !important;
}

/* Menú colapsado (solo íconos): centrar el ícono dentro del riel */
.aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-item > .menu-link {
    margin: 1px 6px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.aside-minimize:not(.aside-minimize-hover) .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
}
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
    background-color: var(--ag-active-bg) !important;
    border-left: 3px solid #001A3F !important;
}
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text {
    color: var(--ag-active-text) !important;
    font-weight: 600 !important;
}

/* Submenu items */
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link {
    border-radius: 6px !important;
    transition: background 0.15s !important;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link:hover {
    background-color: var(--ag-hover-bg) !important;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link {
    background-color: var(--ag-active-bg) !important;
}
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-active > .menu-link .menu-text {
    color: var(--ag-active-text) !important;
    font-weight: 600 !important;
}

/* Bullet dot color */
.aside-menu .menu-bullet.menu-bullet-dot > span {
    background-color: var(--ag-text-muted) !important;
}
.aside-menu .menu-item.menu-item-active > .menu-link .menu-bullet.menu-bullet-dot > span {
    background-color: #001A3F !important;
}

/* Arrow color */
.aside-menu .menu-arrow {
    color: var(--ag-text-muted) !important;
}

/* Scrollbar del aside */
.aside-menu-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.aside-menu-wrapper::-webkit-scrollbar { width: 4px; }
.aside-menu-wrapper::-webkit-scrollbar-track { background: transparent; }
.aside-menu-wrapper::-webkit-scrollbar-thumb { background: var(--ag-border); border-radius: 4px; }

/* =============================================
   FOOTER
   ============================================= */
.ag-footer {
    position: relative !important;
    overflow: hidden !important;
    background: var(--Scale-Blue-60) !important;
    color: rgba(255,255,255,0.85) !important;
}

.ag-footer-circle {
    position: absolute !important;
    border-radius: 50% !important;
    background: var(--Scale-Blue-50) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.ag-footer-circle--tr {
    width: 360px !important; height: 360px !important;
    top: -140px !important; right: -100px !important;
}
.ag-footer-circle--bl {
    width: 220px !important; height: 220px !important;
    bottom: -110px !important; left: -80px !important;
}

.ag-footer-main {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: 1.4fr 1.4fr 1fr 1fr !important;
    gap: 32px !important;
    padding: 44px 44px 28px !important;
}

.ag-footer-logo {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}
.ag-footer-logo-img {
    height: 88px !important;
    width: auto !important;
    display: block !important;
}

.ag-footer-tagline {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 26px !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
}

.ag-footer-developed {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Public Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: rgba(255,255,255,0.6) !important;
}
.ag-footer-developed span { color: rgba(255,255,255,0.6) !important; }
.ag-footer-dev-icon {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}
.ag-footer-dev-icon-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 5px !important;
    box-sizing: border-box !important;
}

.ag-footer-col-title {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 22px !important;
    color: var(--Scale-Cyan-10) !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--Scale-Cyan-10) !important;
    text-transform: uppercase !important;
}

.ag-footer-socials {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}
.ag-footer .ag-footer-social-btn,
a.ag-footer-social-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 24px !important;
    background-color: #C8DEFF !important;
    background-image: none !important;
    color: #2564BF !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: background-color 0.2s !important;
    flex-shrink: 0 !important;
}
.ag-footer .ag-footer-social-btn i {
    color: #2564BF !important;
}
.ag-footer .ag-footer-social-btn:hover {
    background-color: #ffffff !important;
}

.ag-footer-contact-item {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.ag-footer .ag-footer-contact-item,
.ag-footer .ag-footer-contact-item i,
.ag-footer .ag-footer-contact-item a {
    color: #ffffff !important;
}
.ag-footer-contact-item i { font-size: 13px !important; }
.ag-footer-contact-item a { color: inherit !important; text-decoration: none !important; }

.ag-footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ag-footer-links li {
    margin-bottom: 8px !important;
}
.ag-footer-links a {
    font-family: 'Public Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    color: var(--Background-white) !important;
    text-decoration: none !important;
    transition: opacity 0.2s !important;
}
.ag-footer-links a:hover { opacity: 0.75 !important; }

.ag-footer-iso {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 16px 44px !important;
}
.ag-footer .ag-iso-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.85) !important;
    flex-shrink: 0 !important;
    gap: 1px !important;
}
.ag-footer .ag-iso-badge span {
    color: rgba(255,255,255,0.85) !important;
}
.ag-iso-badge-icon {
    width: 22px !important;
    height: 22px !important;
    filter: brightness(0) invert(1) !important;
}
.ag-footer .ag-footer-iso-text,
.ag-footer .ag-footer-iso-text p {
    font-family: 'Public Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,0.65) !important;
    margin: 0 !important;
}
.ag-footer-iso-text p + p {
    margin-top: 4px !important;
}
@media (max-width: 900px) {
    .ag-footer-iso { padding: 14px 24px !important; }
}

.ag-footer-bottom {
    position: relative !important;
    z-index: 1 !important;
    background: var(--Scale-Blue-70) !important;
    text-align: center !important;
    padding: 14px !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.45) !important;
}
.ag-footer-bottom span { color: rgba(255,255,255,0.45) !important; }

@media (max-width: 900px) {
    .ag-footer-main {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
        padding: 32px 24px 20px !important;
    }
}
@media (max-width: 600px) {
    .ag-footer-main { grid-template-columns: 1fr !important; }
    .ag-topbar-left .ag-brand-logo { height: 34px !important; }
    .ag-user-info { display: none !important; }
}

/* =============================================
   BOTONES — design system (tomado de Diseño-AG/site.css)
   ============================================= */
.ag-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Public Sans', sans-serif !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}
.ag-btn[hidden] {
    display: none !important;
}
.ag-btn i, .ag-btn .bi {
    font-size: 1em !important;
    color: inherit !important;
}
.ag-btn--sm { font-size: 12px !important; padding: 6px 12px !important; }
.ag-btn--md { font-size: 13px !important; padding: 8px 16px !important; }
.ag-btn--lg { font-size: 14px !important; padding: 10px 20px !important; }

.ag-btn--primary { background: #2564BF !important; color: #fff !important; }
.ag-btn--primary:hover { background: #1d4f96 !important; color: #fff !important; }
.ag-btn--primary.ag-btn--soft { background: var(--ag-active-bg) !important; color: #2564BF !important; }
.ag-btn--primary.ag-btn--soft:hover { background: #c3d9f5 !important; }
.ag-btn--primary.ag-btn--outline { background: transparent !important; color: #2564BF !important; border: 1.5px solid #2564BF !important; }
.ag-btn--primary.ag-btn--outline:hover { background: var(--ag-active-bg) !important; }

.ag-btn--neutral { background: var(--ag-border) !important; color: var(--ag-text-primary) !important; }
.ag-btn--neutral:hover { background: #c8cfe0 !important; }
.ag-btn--neutral.ag-btn--soft { background: var(--ag-hover-bg) !important; color: var(--ag-text-muted) !important; }
.ag-btn--neutral.ag-btn--soft:hover { background: #e4e8f2 !important; }
.ag-btn--neutral.ag-btn--outline { background: transparent !important; color: var(--ag-text-muted) !important; border: 1.5px solid var(--ag-border) !important; }
.ag-btn--neutral.ag-btn--outline:hover { background: var(--ag-hover-bg) !important; }

.ag-btn--danger { background: #c0392b !important; color: #fff !important; }
.ag-btn--danger:hover { background: #962d22 !important; }
.ag-btn--danger.ag-btn--soft { background: #fde8e6 !important; color: #c0392b !important; }
.ag-btn--danger.ag-btn--soft:hover { background: #f9ccc8 !important; }
.ag-btn--danger.ag-btn--outline { background: transparent !important; color: #c0392b !important; border: 1.5px solid #c0392b !important; }
.ag-btn--danger.ag-btn--outline:hover { background: #fde8e6 !important; }

/* =============================================
   PANEL "PERFIL DEL MIEMBRO" (offcanvas)
   ============================================= */
.ag-user-panel {
    background: #fbfcfe !important;
}
.ag-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 20px !important;
}
.ag-panel-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #001A3F !important;
    margin: 0 !important;
}
.ag-profile-block {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}
.ag-profile-avatar {
    position: relative !important;
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0 !important;
}
.ag-profile-avatar .symbol-label {
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
    background-size: cover !important;
    background-position: center !important;
}
.ag-profile-badge {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #1a7a4a !important;
    border: 3px solid #fbfcfe !important;
}
.ag-profile-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.ag-profile-name {
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #001A3F !important;
    text-decoration: none !important;
}
.ag-profile-name:hover {
    color: #2564BF !important;
}
.ag-profile-role {
    font-family: 'Public Sans', sans-serif !important;
    font-size: 13px !important;
    color: var(--ag-text-muted) !important;
}
.ag-profile-btn {
    width: 100% !important;
    margin-bottom: 18px !important;
}
.ag-profile-btn img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) invert(1) !important;
}
.ag-panel-sep {
    border-top: 1px dashed var(--ag-border) !important;
    margin-bottom: 8px !important;
}
.ag-panel-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.ag-panel-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 8px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
}
.ag-panel-item:hover {
    background: var(--ag-hover-bg) !important;
}
.ag-panel-item-icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    background: var(--ag-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ag-panel-item-icon img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}
.ag-panel-item-title {
    font-family: 'Public Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #001A3F !important;
}
.ag-panel-item-sub {
    font-family: 'Public Sans', sans-serif !important;
    font-size: 12px !important;
    color: var(--ag-text-muted) !important;
}
.ag-panel-item--danger {
    margin-top: 6px !important;
}
.ag-panel-item-icon--danger {
    background: #FFD9DC !important;
}
.ag-panel-item-icon--danger img {
    filter: invert(35%) sepia(46%) saturate(1382%) hue-rotate(316deg) brightness(92%) contrast(90%) !important;
}
.ag-panel-item-title--danger {
    color: #D0626B !important;
}
.ag-panel-item--danger:hover {
    background: #FFC2C7 !important;
}

/* =============================================
   BREADCRUMB — componente "ag-breadcrumb" de Diseño-AG (site.css)
   ============================================= */
.ag-breadcrumb {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    width: auto !important;
    text-align: left !important;
    align-self: flex-start !important;
}
.ag-bc-list {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ag-bc-item {
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-family: 'Public Sans', sans-serif !important;
}
.ag-bc-section {
    color: var(--ag-text-muted) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: transparent !important;
    letter-spacing: 0.02em !important;
    transition: background 0.15s, color 0.15s !important;
}
.ag-bc-section:hover {
    background: var(--ag-active-bg) !important;
    color: var(--ag-active-text) !important;
}
.ag-bc-sep {
    color: var(--ag-border) !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 4px !important;
}
.ag-bc-current {
    color: var(--ag-active-text) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: var(--ag-active-bg) !important;
    border: 1px solid #b8d0ed !important;
}

/* =============================================
   AG-CARD — contenedor genérico (Diseño-AG)
   ============================================= */
.ag-card {
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}

/* =============================================
   CARD DE PERFIL — usado en Miembros/CambiarRol, MiPerfil, ...
   ============================================= */
.crr-profile-card {
    padding: 24px !important;
}
.crr-profile-top {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}
.crr-profile-avatar {
    position: relative !important;
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0 !important;
}
.crr-profile-avatar .symbol-label {
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
    background-size: cover !important;
    background-position: center !important;
}
.crr-profile-badge {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #1a7a4a !important;
    border: 3px solid #fff !important;
}
.crr-profile-name {
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #001A3F !important;
}

.crr-info-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}
.crr-info-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.crr-info-icon {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    border-radius: 9px !important;
    background: var(--ag-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.crr-info-icon img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}
.crr-info-text {
    font-family: 'Public Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #001A3F !important;
    word-break: break-word !important;
}

.crr-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    border-top: 1px dashed var(--ag-border) !important;
    padding-top: 16px !important;
}
.crr-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
}
.crr-nav-item:hover {
    background: var(--ag-hover-bg) !important;
}
.crr-nav-item.active {
    background: var(--ag-active-bg) !important;
    border-left: 3px solid #001A3F !important;
}
.crr-nav-icon {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    border-radius: 9px !important;
    background: var(--ag-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.crr-nav-item.active .crr-nav-icon {
    background: #fff !important;
}
.crr-nav-icon img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}
.crr-nav-text {
    font-family: 'Public Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #001A3F !important;
}

/* =============================================
   FORM SYSTEM — componentes "frm-*" de Diseño-AG (Formulario.cshtml)
   ============================================= */
.frm-card-header {
    background: #C8DEFF !important;
    border-radius: 14px 14px 0 0 !important;
    border-bottom: 1px solid var(--ag-border) !important;
    padding: 16px 24px !important;
}
.frm-card-title {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #18407A !important;
}
.frm-card-subtitle {
    font-family: 'Public Sans', sans-serif !important;
    font-size: 12.5px !important;
    color: #4a6fa5 !important;
    margin-top: 2px !important;
}
.frm-card-body {
    padding: 24px !important;
}
.frm-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 20px !important;
}
.frm-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #001A3F !important;
    font-family: 'Public Sans', sans-serif !important;
}
.frm-input {
    width: 100% !important;
    height: 44px !important;
    border: 1.5px solid var(--ag-border) !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    font-family: 'Public Sans', sans-serif !important;
    color: #001A3F !important;
    background: #fff !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.frm-input--disabled,
.frm-input:disabled,
.frm-input[readonly] {
    background: #f4f4f6 !important;
    border-color: #e0e0e6 !important;
    color: var(--ag-text-muted) !important;
}
.frm-select-wrap {
    position: relative !important;
}
.frm-select {
    width: 100% !important;
    height: 44px !important;
    border: 1.5px solid var(--ag-border) !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    font-family: 'Public Sans', sans-serif !important;
    color: #001A3F !important;
    background: #fff !important;
    background-image: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    color-scheme: light !important;
    cursor: pointer !important;
}
.frm-select::-ms-expand {
    display: none !important;
}
.frm-select::-webkit-details-marker,
.frm-select::-webkit-calendar-picker-indicator {
    display: none !important;
}
.frm-select:focus {
    border-color: #001A3F !important;
    box-shadow: 0 0 0 3px rgba(0,26,63,0.1) !important;
}
.frm-textarea {
    width: 100% !important;
    min-height: 100px !important;
    border: 1.5px solid var(--ag-border) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    font-family: 'Public Sans', sans-serif !important;
    color: #001A3F !important;
    background: #fff !important;
    outline: none !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}
.frm-textarea:focus {
    border-color: #001A3F !important;
    box-shadow: 0 0 0 3px rgba(0,26,63,0.1) !important;
}

/* ── Checkbox ── */
.frm-checkbox-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 24px !important;
}
.frm-checkbox {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    font-family: 'Public Sans', sans-serif !important;
    font-size: 13.5px !important;
    color: #001A3F !important;
    user-select: none !important;
}
.frm-checkbox input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
}
.frm-checkbox-box {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    border: 1.5px solid var(--ag-border, #dde3ef) !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}
.frm-checkbox-box i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 12px !important;
    color: #fff !important;
    opacity: 0 !important;
    transform: scale(0.6) !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}
.frm-checkbox input:checked + .frm-checkbox-box {
    background: #2564BF !important;
    border-color: #2564BF !important;
}
.frm-checkbox input:checked + .frm-checkbox-box i {
    opacity: 1 !important;
    transform: scale(1) !important;
}
.frm-checkbox input:focus-visible + .frm-checkbox-box {
    box-shadow: 0 0 0 3px rgba(37,100,191,0.15) !important;
}
.frm-checkbox-text {
    font-family: 'Public Sans', sans-serif !important;
}

/* ── Radio ── */
.frm-radio-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.frm-radio {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-family: 'Public Sans', sans-serif !important;
    font-size: 13.5px !important;
    color: #001A3F !important;
    user-select: none !important;
    transition: background 0.15s ease !important;
}
.frm-radio:hover {
    background: var(--ag-hover-bg, #f4f6fb) !important;
}
.frm-radio input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
}
.frm-radio-dot {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--ag-border, #dde3ef) !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color 0.15s ease !important;
}
.frm-radio-dot::after {
    content: "" !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #2564BF !important;
    opacity: 0 !important;
    transform: scale(0.5) !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}
.frm-radio input:checked + .frm-radio-dot {
    border-color: #2564BF !important;
}
.frm-radio input:checked + .frm-radio-dot::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}
.frm-radio input:checked ~ .frm-radio-text {
    font-weight: 700 !important;
    color: #2564BF !important;
}

/* ── Select2, reskin al estilo "frm-select" ── */
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    border: 1.5px solid var(--ag-border) !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    padding: 4px 6px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: #001A3F !important;
    box-shadow: 0 0 0 3px rgba(0,26,63,0.1) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--ag-active-bg) !important;
    border: none !important;
    color: #001A3F !important;
    border-radius: 6px !important;
    font-family: 'Public Sans', sans-serif !important;
    font-size: 12.5px !important;
}

/* ── Modal genérico ── */
.ag-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid var(--ag-border) !important;
}
.ag-modal-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #001A3F !important;
    margin: 0 !important;
}
.ag-modal-body {
    padding: 24px !important;
}
.ag-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 16px 24px !important;
    border-top: 1px solid var(--ag-border) !important;
}
.frm-card-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 8px !important;
    padding: 16px 24px 24px !important;
    border-top: 1px solid var(--ag-border) !important;
}
.frm-btn-save {
    background: #2564BF !important;
    border: none !important;
    cursor: pointer !important;
    font-family: 'Public Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #fff !important;
    padding: 10px 28px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.18s !important;
}
.frm-btn-save:hover {
    background: #163880 !important;
}
.frm-btn-save img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(0) invert(1) !important;
}

/* =============================================
   TABLA — componente "ag-table" de Diseño-AG (Home/Index.cshtml)
   ============================================= */
.ag-table-wrapper {
    overflow-x: auto !important;
}
table.ag-table {
    width: 100% !important;
    border-collapse: collapse !important;
}
.ag-table thead tr {
    background: #A6CAFF !important;
}
.ag-table th {
    padding: 13px 16px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #001A3F !important;
    text-align: left !important;
    white-space: nowrap !important;
}
.ag-table td {
    padding: 13px 16px !important;
    font-size: 13.5px !important;
    color: var(--ag-text-primary) !important;
    border-bottom: 1px solid var(--ag-border) !important;
    vertical-align: middle !important;
}
.ag-table tbody tr:last-child td {
    border-bottom: none !important;
}
.ag-table tbody tr:hover {
    background: var(--ag-hover-bg) !important;
}

.ag-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: 'Public Sans', sans-serif !important;
}
.ag-badge i, .ag-badge .bi {
    font-size: 1em !important;
    color: inherit !important;
}
.ag-badge-activo   { background: #e6f9f0 !important; color: #1a7f4e !important; }
.ag-badge-inactivo { background: #fde8e8 !important; color: #c0392b !important; }
.ag-badge-pendiente{ background: #fff4e0 !important; color: #b07a10 !important; }
.ag-badge-info      { background: #DEEDFF !important; color: #2564BF !important; }

.ag-td-actions {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
}
.ag-action-btn {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: opacity 0.18s !important;
}
.ag-action-btn:hover { opacity: 0.8 !important; }
.ag-action-neutral {
    background: var(--ag-border) !important;
    color: var(--ag-text-primary) !important;
}

.ag-table-avatar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.ag-table-avatar img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}
.ag-table-avatar-name {
    font-family: 'Public Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color: #001A3F !important;
}

/* Reskin de los controles nativos de DataTables (paginación/búsqueda/info),
   sin tocar el "dom"/config JS — solo CSS sobre sus clases por defecto. */
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid var(--ag-border) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-family: 'Public Sans', sans-serif !important;
    font-size: 13.5px !important;
    outline: none !important;
    margin-left: 6px !important;
}
.dataTables_wrapper .dataTables_info {
    font-family: 'Public Sans', sans-serif !important;
    font-size: 13px !important;
    color: var(--ag-text-muted) !important;
    padding-top: 14px !important;
}
.dataTables_wrapper .dataTables_paginate {
    padding-top: 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .page-link {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    margin-left: 4px !important;
    border: 1px solid var(--ag-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--ag-text-primary) !important;
    font-family: 'Public Sans', sans-serif !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}
/* Si el tema envuelve el botón en un <li class="page-item"><a class="page-link">,
   ambos elementos recibían borde/fondo propios y se veía como doble borde;
   dejamos el estilo solo en el elemento visible (page-link/paginate_button)
   y el contenedor <li> pasa a transparente. */
.dataTables_wrapper .dataTables_paginate li.paginate_button,
.dataTables_wrapper .dataTables_paginate li.page-item {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.active .paginate_button {
    background: #001A3F !important;
    color: #fff !important;
    border-color: #001A3F !important;
    font-weight: 600 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    opacity: 0.4 !important;
}
.dt-buttons {
    display: none !important;
}

/* Los estilos base del tema pintan "info/primary" en teal (#36C1BA) con
   !important sobre selectores muy específicos (p.ej. ".sorting_asc",
   ".text-primary", ".btn-info"). Forzamos el azul/gris de marca donde
   ese teal se filtra dentro de nuestras tablas y menús rediseñados. */
.ag-table thead th.sorting,
.ag-table thead th.sorting_asc,
.ag-table thead th.sorting_desc,
table.ag-table.dataTable thead th.sorting,
table.ag-table.dataTable thead th.sorting_asc,
table.ag-table.dataTable thead th.sorting_desc,
#tabla thead th.sorting,
#tabla thead th.sorting_asc,
#tabla thead th.sorting_desc,
#tablaRoles thead th.sorting,
#tablaRoles thead th.sorting_asc,
#tablaRoles thead th.sorting_desc {
    color: #001A3F !important;
}
.ag-action-btn i,
.ag-action-neutral i {
    color: var(--ag-text-primary) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}
.navi .navi-item .navi-icon i {
    color: var(--ag-text-primary) !important;
}

/* ── Buscador reusable (modales compartidos entre módulos: Encargados, etc.) ── */
.mbr-search-wrap {
    position: relative !important;
    max-width: 320px !important;
    width: 100% !important;
}
.mbr-search-wrap input.frm-input {
    padding-left: 38px !important;
}
.mbr-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* ── Selects que usan el plugin bootstrap-select (".selectpicker") junto a ".frm-select" ──
   Bootstrap-select envuelve el <select> original en un <div class="dropdown bootstrap-select">
   que hereda las mismas clases, así que ".frm-select" terminaba pintando DOS cajas anidadas
   (el wrapper + el botón interno con su propio estilo de Bootstrap). Se neutraliza el wrapper
   y se traslada todo el estilo de "frm-select" al botón real (".dropdown-toggle"). */
.bootstrap-select.frm-select {
    border: none !important;
    background: transparent !important;
    height: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.bootstrap-select.frm-select > .dropdown-toggle {
    width: 100% !important;
    height: 44px !important;
    border: 1.5px solid var(--ag-border, #dde3ef) !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'Public Sans', sans-serif !important;
    font-size: 13.5px !important;
    color: #001A3F !important;
    box-shadow: none !important;
}
.bootstrap-select.frm-select > .dropdown-toggle:focus,
.bootstrap-select.frm-select > .dropdown-toggle.focus {
    outline: none !important;
    border-color: #001A3F !important;
    box-shadow: 0 0 0 3px rgba(0,26,63,0.1) !important;
}
.bootstrap-select.frm-select .filter-option-inner-inner {
    color: #001A3F !important;
    font-family: 'Public Sans', sans-serif !important;
}
.bootstrap-select.frm-select .dropdown-menu {
    border: 1.5px solid var(--ag-border, #dde3ef) !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(0,26,63,0.12) !important;
}
.bootstrap-select.frm-select .bs-searchbox input.form-control {
    border-radius: 8px !important;
    border: 1.5px solid var(--ag-border, #dde3ef) !important;
}