/*
 * CARGA DE ESTILOS
 * 1. bootstrap.min.css  — reset, grid, utilidades (d-flex, col-*, mt-*, etc.)
 * 2. site.css (este archivo) — design system AG, sobreescribe Bootstrap donde se necesita
 *
 * Para usar Bootstrap en vistas: col-md-6, d-flex, gap-3, mt-4, etc.
 * Para usar nuestros estilos: ag-*, frm-*, crd-*, mdl-*, alt-*, acd-*
 */

/* =============================================
   ALTA GESTIÓN – Global Styles
   ============================================= */

/* Los tokens (:root) viven en ag-tokens.css, que se carga antes que este archivo.
   No declarar colores nuevos en literal aquí — agregarlos a ag-tokens.css. */

/* jQuery Validation Unobtrusive alterna estas clases; el CSS que las oculta
   cuando el campo/formulario es válido vivía en el site.css de scaffolding
   original de ASP.NET MVC y nunca se portó — sin esto, cada mensaje de error
   queda visible aunque no haya error. */
.validation-summary-valid,
.field-validation-valid {
    display: none;
}
.field-validation-error {
    display: block;
    color: var(--ag-danger-strong);
    font-size: 12px;
    font-family: var(--ag-font-body);
    margin-top: 2px;
}
.input-validation-error {
    border-color: var(--ag-danger-strong) !important;
    box-shadow: 0 0 0 3px rgba(224,80,80,0.1) !important;
}
.ag-form-errors {
    background: var(--ag-danger-bg);
    border: 1px solid var(--ag-danger-border);
    color: var(--ag-danger);
    border-radius: var(--ag-radius-md);
    padding: 10px 14px;
    font-size: 13px;
    font-family: var(--ag-font-body);
    margin-bottom: 16px;
}
.ag-form-errors ul { margin: 0; padding-left: 18px; }

/* ── Override Bootstrap Reboot ── */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 14px;
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0 !important; /* Bootstrap JS añade padding-right al abrir modales */
    font-family: var(--ag-font-body) !important;
    font-size: 1rem;
    background-color: var(--ag-page-bg) !important;
    overflow-x: hidden;
}

/* ── Tipografía: Poppins para headings ── */
h1, h2, h3, h4, h5, h6,
.ag-brand-text,
.ag-nav-label,
.ag-footer-col-title,
.ag-footer-logo span {
    font-family: var(--ag-font-head);
    margin-bottom: 0;
}

h1 { font-size: 48px; line-height: 56px; font-weight: 700; }
h2 { font-size: 36px; line-height: 44px; font-weight: 700; }
h3 { font-size: 28px; line-height: 36px; font-weight: 600; }
h4 { font-size: 22px; line-height: 30px; font-weight: 600; }
h5 { font-size: 18px; line-height: 26px; font-weight: 500; }
h6 { font-size: 14px; line-height: 22px; font-weight: 500; }

/* ── Anular estilos que Bootstrap aplica a elementos nativos ── */
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
p { margin-bottom: 0; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Bootstrap container sigue disponible ── */
.container, .container-fluid,
.container-sm, .container-md,
.container-lg, .container-xl {
    /* Bootstrap gestiona estos, no los sobreescribimos */
}

.ag-body {
    background: var(--ag-page-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* =============================================
   TOP BAR
   ============================================= */
.ag-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ag-topbar-height);
    background: #ffffff;
    border-bottom: 1px solid var(--ag-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

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

.ag-sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    color: var(--ag-text-primary);
    font-size: 20px;
    line-height: 1;
    transition: background var(--ag-transition);
}
.ag-sidebar-toggle:hover { background: var(--ag-hover-bg); }

.ag-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ag-navy);
}
.ag-brand-icon {
    font-size: 22px;
    color: var(--ag-navy);
}
.ag-brand-text {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--ag-navy);
}

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

.ag-icon-btn {
    background: var(--ag-border);
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 16px;
    color: var(--ag-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ag-transition), color var(--ag-transition);
}
.ag-icon-btn:hover { background: var(--ag-blue-410); color: var(--ag-text-primary); }

.ag-user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ag-active-bg);
    border-radius: 50px;
    padding: 5px 14px 5px 5px;
    cursor: pointer;
    transition: background var(--ag-transition);
}
.ag-user-chip:hover { background: var(--ag-blue-430); }

.ag-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ag-primary-soft);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ag-user-avatar.lg {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

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

/* =============================================
   WRAPPER (sidebar + main)
   ============================================= */
.ag-wrapper {
    display: flex;
    margin-top: var(--ag-topbar-height);
    flex: 1;
}

/* =============================================
   SIDEBAR
   ============================================= */
.ag-sidebar {
    width: var(--ag-sidebar-width);
    min-height: calc(100vh - var(--ag-topbar-height));
    background: var(--ag-sidebar-bg);
    border-right: 1px solid var(--ag-border);
    position: fixed;
    top: var(--ag-topbar-height);
    left: 0;
    bottom: 0;
    transition: width var(--ag-transition);
    overflow: hidden;
    z-index: 900;
}

.ag-sidebar.collapsed {
    width: var(--ag-sidebar-collapsed);
}

.ag-sidebar-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px 0 12px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Nav groups */
.ag-nav-sections {
    flex: 1;
}

.ag-nav-group {
    margin-bottom: 6px;
}

.ag-nav-label {
    display: block;
    font-family: var(--ag-font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ag-nav-label-color);
    padding: 12px 18px 4px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--ag-transition);
}

.ag-sidebar.collapsed .ag-nav-label {
    opacity: 0;
    height: 18px;
    padding: 10px 0 4px;
    /* show dots in collapsed mode */
    overflow: visible;
}

.ag-sidebar.collapsed .ag-nav-label::after {
    content: '···';
    display: block;
    text-align: center;
    font-size: 10px;
    color: var(--ag-nav-label-color);
    letter-spacing: 0;
}

.ag-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin: 2px 10px 2px 8px;
    color: var(--ag-text-primary);
    text-decoration: none;
    font-size: 13.5px;
    border-radius: 8px;
    transition: background var(--ag-transition), color var(--ag-transition);
    white-space: nowrap;
    position: relative;
}

.ag-nav-item i {
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.ag-nav-item:hover {
    background: var(--ag-hover-bg);
    color: var(--ag-text-primary);
    text-decoration: none;
}

    .ag-nav-item.active {
        background: var(--ag-active-bg);
        color: var(--ag-active-text);
        border-left: 3px solid var(--ag-primary);
        padding-left: 11px;
    }
.ag-nav-item.active:hover {
    background: var(--ag-active-bg);
    color: var(--ag-active-text);
}

.ag-nav-item span {
    transition: opacity var(--ag-transition);
}
.ag-sidebar.collapsed .ag-nav-item span {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.ag-sidebar.collapsed .ag-nav-item {
    margin: 2px 8px;
    padding: 9px;
    justify-content: center;
}

.ag-sidebar.collapsed .ag-nav-item.active {
    border-left: 3px solid var(--ag-primary);
    padding: 9px 0px 9px 6px;
    justify-content: center;
}

/* ── Submenú de 2º nivel ──
   Antes, el sidebar solo soportaba 1 nivel (.ag-nav-item suelto); el menú real
   de SGGC.Web tiene 3 niveles. .ag-nav-item--parent es un <button> con la misma
   apariencia que .ag-nav-item (ambas clases se aplican juntas en el markup).
   El colapsar/expandir usa el mismo patrón max-height que .acd-body. */
.ag-nav-item--parent {
    width: calc(100% - 18px);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.ag-nav-chevron {
    margin-left: auto;
    font-size: 12px;
    color: var(--ag-text-muted);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.ag-nav-item--parent[aria-expanded="true"] {
    background: var(--ag-hover-bg);
}
.ag-nav-item--parent[aria-expanded="true"] .ag-nav-chevron {
    transform: rotate(180deg);
}

.ag-nav-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.ag-nav-subitem {
    display: block;
    padding: 8px 14px 8px 46px;
    margin: 1px 10px 1px 8px;
    font-size: 13px;
    color: var(--ag-text-muted);
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
    transition: background var(--ag-transition), color var(--ag-transition);
}
.ag-nav-subitem:hover {
    background: var(--ag-hover-bg);
    color: var(--ag-text-primary);
    text-decoration: none;
}
.ag-nav-subitem.active {
    background: var(--ag-active-bg);
    color: var(--ag-active-text);
    font-weight: 500;
    /* Mismo tratamiento que .ag-nav-item.active (raíz, p.ej. "Calendario"): franja
       de 3px a la izquierda, restando esos 3px del padding-left para que el texto
       no se recorra. */
    border-left: 3px solid var(--ag-primary);
    padding: 8px 14px 8px 43px;
}
.ag-nav-subitem.active:hover {
    background: var(--ag-active-bg);
    color: var(--ag-active-text);
}

/* Un ítem con hijos DENTRO de un .ag-nav-sub (p.ej. "Gestión" > {módulo} > Procesos/
   Responsabilidades/Documentos, 3 niveles reales) — mismo look que .ag-nav-subitem
   pero como <button> con chevron propio. */
.ag-nav-sub .ag-nav-item--parent {
    padding: 8px 14px 8px 46px;
    margin: 1px 10px 1px 8px;
    font-size: 13px;
    color: var(--ag-text-muted);
}
.ag-nav-sub .ag-nav-item--parent:hover,
.ag-nav-sub .ag-nav-item--parent[aria-expanded="true"] {
    color: var(--ag-text-primary);
}
/* Un 2º nivel de anidación (submenú de un submenú) se indenta más. */
.ag-nav-sub .ag-nav-sub .ag-nav-subitem,
.ag-nav-sub .ag-nav-sub .ag-nav-item--parent {
    padding-left: 62px;
}
/* Mismo ajuste que .ag-nav-subitem.active (resta los 3px del border-left),
   pero con la especificidad necesaria para ganarle a la regla de arriba —
   si no, el texto de un ítem activo de 3er nivel queda corrido 3px respecto
   a sus hermanos no activos. */
.ag-nav-sub .ag-nav-sub .ag-nav-subitem.active {
    padding-left: 59px;
}

.ag-nav-subgroup-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ag-nav-label-color);
    padding: 8px 14px 4px 46px;
}

/* Sidebar colapsada: sin espacio para el texto, el submenú se muestra como
   flyout al pasar el mouse sobre el ítem padre, en vez de expandirse inline. */
.ag-sidebar.collapsed .ag-nav-item--parent .ag-nav-chevron { display: none; }
.ag-sidebar.collapsed .ag-nav-group { position: relative; }
.ag-sidebar.collapsed .ag-nav-item--parent:hover + .ag-nav-sub,
.ag-sidebar.collapsed .ag-nav-sub:hover {
    max-height: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 200px;
    background: var(--ag-sidebar-bg);
    border: 1px solid var(--ag-border);
    border-radius: 8px;
    box-shadow: var(--ag-shadow-card);
    padding: 6px;
    z-index: var(--ag-z-popover);
}
.ag-sidebar.collapsed .ag-nav-subitem {
    padding: 8px 12px;
    margin: 1px 0;
}

/* Sidebar footer */
.ag-sidebar-footer {
    border-top: 1px solid var(--ag-border);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.ag-sidebar-user-info {
    display: flex;
    flex-direction: column;
    transition: opacity var(--ag-transition);
    white-space: nowrap;
}
.ag-sidebar-user-info .ag-user-name {
    color: var(--ag-text-primary);
    font-size: 13px;
}
.ag-sidebar-user-info .ag-user-role {
    color: var(--ag-text-muted);
    font-size: 11px;
}
.ag-sidebar.collapsed .ag-sidebar-user-info {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* =============================================
   MAIN CONTENT
   ============================================= */
.ag-main {
    margin-left: var(--ag-sidebar-width);
    flex: 1;
    padding: 28px;
    min-height: calc(100vh - var(--ag-topbar-height));
    transition: margin-left var(--ag-transition);
}

.ag-sidebar.collapsed ~ .ag-main,
.ag-wrapper:has(.ag-sidebar.collapsed) .ag-main {
    margin-left: var(--ag-sidebar-collapsed);
}

body:has(.ag-sidebar.collapsed) .ag-footer {
    margin-left: var(--ag-sidebar-collapsed);
}

/* =============================================
   FOOTER
   ============================================= */
.ag-footer {
    background: var(--ag-navy);
    color: rgba(255,255,255,0.85);
    margin-left: var(--ag-sidebar-width);
    transition: margin-left var(--ag-transition);
}

.ag-footer-main {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1fr 1fr;
    gap: 32px;
    padding: 44px 44px 28px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Brand column */
.ag-footer-brand {}

.ag-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.ag-footer-logo i {
    font-size: 26px;
}

.ag-footer-tagline {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
    margin-bottom: 20px;
}

.ag-footer-developed {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
}
.ag-footer-dev-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* Contact column */
.ag-footer-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.ag-footer-socials {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.ag-footer-social-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.2s;
}
.ag-footer-social-btn:hover {
    background: rgba(255,255,255,0.22);
    color: #ffffff;
}

.ag-footer-contact-item {
    font-size: 12.5px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ag-footer-contact-item i { font-size: 13px; }

/* Link columns */
.ag-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ag-footer-links li {
    margin-bottom: 8px;
}
.ag-footer-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}
.ag-footer-links a:hover { color: #ffffff; }

/* ISO strip */
.ag-footer-iso {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 44px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ag-iso-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    flex-shrink: 0;
    gap: 1px;
}
.ag-iso-badge i { font-size: 16px; }
.ag-footer-iso p {
    font-size: 11.5px;
    color: rgba(255,255,255,0.6);
    margin: 0;
    line-height: 1.5;
}

/* Copyright */
.ag-footer-bottom {
    text-align: center;
    padding: 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
    .ag-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 32px 24px 20px;
    }
    .ag-footer-iso { padding: 14px 24px; }
}

@media (max-width: 600px) {
    .ag-sidebar { width: var(--ag-sidebar-collapsed); }
    .ag-sidebar .ag-nav-label { opacity: 0; }
    .ag-sidebar .ag-nav-item span { opacity: 0; width: 0; overflow: hidden; }
    .ag-sidebar .ag-sidebar-user-info { opacity: 0; width: 0; overflow: hidden; }
    .ag-main { margin-left: var(--ag-sidebar-collapsed); padding: 16px; }
    .ag-footer { margin-left: var(--ag-sidebar-collapsed); }
    .ag-footer-main { grid-template-columns: 1fr; }
    .ag-user-info { display: none; }
}

/* =============================================
   BREADCRUMB
   ============================================= */
.ag-breadcrumb {
    margin-bottom: 20px;
}
.ag-bc-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    padding: 0; margin: 0;
}
.ag-bc-item {
    display: flex; align-items: center;
    font-size: 12px;
    font-family: var(--ag-font-body);
}
.ag-bc-link {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--ag-active-bg);
    color: var(--ag-active-text);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.ag-bc-link:hover {
    background: var(--ag-blue-450);
    color: var(--ag-primary);
}
.ag-bc-link i { font-size: 14px; }
.ag-bc-sep {
    color: var(--ag-border);
    font-size: 10px;
    display: flex; align-items: center;
    padding: 0 4px;
}
.ag-bc-section {
    color: var(--ag-text-muted);
    font-weight: 500;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    background: transparent;
    letter-spacing: 0.02em;
    text-decoration: none;
}
a.ag-bc-section:hover { color: var(--ag-primary); background: var(--ag-hover-bg); }
.ag-bc-current {
    color: var(--ag-active-text);
    font-weight: 600;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--ag-active-bg);
    border: 1px solid var(--ag-blue-500);
}

/* =============================================
   BOTONES — design system
   ============================================= */

/* Base */
.ag-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    font-family: var(--ag-font-body);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    white-space: nowrap;
    text-decoration: none;
}
.ag-btn:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

/* Tamaños */
.ag-btn--sm  { font-size: 12px; padding: 6px 12px; }
.ag-btn--md  { font-size: 13px; padding: 8px 16px; }
.ag-btn--lg  { font-size: 14px; padding: 10px 20px; }

/* Icono solo */
.ag-btn--icon.ag-btn--sm { padding: 6px;  width: 28px; height: 28px; justify-content: center; border-radius: 8px; }
.ag-btn--icon.ag-btn--md { padding: 8px;  width: 34px; height: 34px; justify-content: center; border-radius: 8px; }
.ag-btn--icon.ag-btn--lg { padding: 10px; width: 40px; height: 40px; justify-content: center; border-radius: 9px; }

/* ── PRIMARY ──
   Antes usaba --ag-surface-accent (#1e4da1). Ese token es solo para superficies
   grandes tintadas (cabecera de página) — botones, bordes y estados de foco usan
   --ag-primary (#001A3F), que es el color que ya gobierna el resto de la
   interacción (sidebar activo, foco de inputs, checkbox/radio/toggle). */
.ag-btn--primary                           { background: var(--ag-primary); color: #fff; }
.ag-btn--primary:hover:not(:disabled)      { background: var(--ag-primary-hover); color: #fff; }
.ag-btn--primary.ag-btn--dark              { background: var(--ag-navy); color: #fff; }
.ag-btn--primary.ag-btn--ghost             { background: transparent; color: var(--ag-primary); border: none; }
.ag-btn--primary.ag-btn--ghost:hover:not(:disabled) { background: var(--ag-hover-bg); }
.ag-btn--primary.ag-btn--soft              { background: var(--ag-active-bg); color: var(--ag-primary); }
.ag-btn--primary.ag-btn--soft:hover:not(:disabled)  { background: var(--ag-blue-450); }
.ag-btn--primary.ag-btn--outline           { background: transparent; color: var(--ag-primary); border: 1.5px solid var(--ag-primary); }
.ag-btn--primary.ag-btn--outline:hover:not(:disabled) { background: var(--ag-active-bg); }

/* ── SUCCESS ── */
.ag-btn--success                           { background: var(--ag-success-strong); color: #fff; }
.ag-btn--success:hover:not(:disabled)      { background: var(--ag-success-dark); }
.ag-btn--success.ag-btn--soft              { background: var(--ag-success-bg-3); color: var(--ag-success-strong); }
.ag-btn--success.ag-btn--soft:hover:not(:disabled) { background: var(--ag-success-border-2); }
.ag-btn--success.ag-btn--outline           { background: transparent; color: var(--ag-success-strong); border: 1.5px solid var(--ag-success-strong); }
.ag-btn--success.ag-btn--outline:hover:not(:disabled) { background: var(--ag-success-bg-3); }

/* ── DANGER ── */
.ag-btn--danger                            { background: var(--ag-danger); color: #fff; }
.ag-btn--danger:hover:not(:disabled)       { background: var(--ag-danger-dark); }
.ag-btn--danger.ag-btn--soft               { background: var(--ag-danger-bg-3); color: var(--ag-danger); }
.ag-btn--danger.ag-btn--soft:hover:not(:disabled) { background: var(--ag-danger-border); }
.ag-btn--danger.ag-btn--outline            { background: transparent; color: var(--ag-danger); border: 1.5px solid var(--ag-danger); }
.ag-btn--danger.ag-btn--outline:hover:not(:disabled) { background: var(--ag-danger-bg-3); }

/* ── WARNING ── */
.ag-btn--warning                           { background: var(--ag-warning); color: #fff; }
.ag-btn--warning:hover:not(:disabled)      { background: var(--ag-warning-hover); }
.ag-btn--warning.ag-btn--soft              { background: var(--ag-warning-bg-3); color: var(--ag-warning-hover); }
.ag-btn--warning.ag-btn--soft:hover:not(:disabled) { background: var(--ag-warning-border); }
.ag-btn--warning.ag-btn--outline           { background: transparent; color: var(--ag-warning-hover); border: 1.5px solid var(--ag-warning); }
.ag-btn--warning.ag-btn--outline:hover:not(:disabled) { background: var(--ag-warning-bg-3); }

/* ── HEADER (sobre fondo azul) ── */
.ag-btn--header                            { background: #ffffff; color: var(--ag-surface-accent); }
.ag-btn--header:hover:not(:disabled)       { background: var(--ag-page-bg); color: var(--ag-surface-accent-hover); }

/* ── NEUTRAL ── */
.ag-btn--neutral                           { background: var(--ag-border); color: var(--ag-text-primary); }
.ag-btn--neutral:hover:not(:disabled)      { background: var(--ag-blue-420); }
.ag-btn--neutral.ag-btn--soft              { background: var(--ag-hover-bg); color: var(--ag-text-muted); }
.ag-btn--neutral.ag-btn--soft:hover:not(:disabled) { background: var(--ag-blue-250); }
.ag-btn--neutral.ag-btn--outline           { background: transparent; color: var(--ag-text-muted); border: 1.5px solid var(--ag-border); }
.ag-btn--neutral.ag-btn--outline:hover:not(:disabled) { background: var(--ag-hover-bg); }

/* Showcase layout */
.btn-section { margin-bottom: 32px; }
.btn-showcase-card {
    background: #fff;
    border: 1px solid var(--ag-border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.btn-showcase-card--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
}
.btn-showcase-label {
    font-family: var(--ag-font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ag-text-muted);
    margin-bottom: 4px;
}
.btn-showcase-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-state-tag {
    font-family: var(--ag-font-body);
    font-size: 11px;
    color: var(--ag-text-muted);
    min-width: 52px;
}
.btn-size-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* =============================================
   ACCORDION
   ============================================= */

.acd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.acd { display: flex; flex-direction: column; }

/* ── Item ── */
.acd-item { overflow: hidden; }

.acd-header {
    width: 100%; display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    background: none; border: none; cursor: pointer;
    padding: 15px 18px;
    text-align: left;
    transition: background 0.18s;
}
.acd-header:hover { background: var(--ag-hover-bg); }

.acd-title {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--ag-font-head);
    font-size: 13.5px; font-weight: 600;
    color: var(--ag-primary);
    flex: 1 1 auto; min-width: 0;
}
.acd-title i { font-size: 15px; flex-shrink: 0; color: var(--ag-primary-soft); }

.acd-chevron {
    font-size: 14px; color: var(--ag-text-muted);
    transition: transform 0.25s ease; flex-shrink: 0;
}
.acd-item--open > .acd-header .acd-chevron { transform: rotate(180deg); }

/* Envuelve las acciones (_AGRowActions) + el chevron en el lado derecho del
   header, cuando el nodo del árbol necesita botones de acción propios (p.ej.
   ObjetivoPlaneacion). flex-shrink:0 evita que un título largo lo comprima. */
.acd-header-actions {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

.acd-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.acd-body p {
    margin: 0;
    padding: 0 18px 16px;
    font-size: 13.5px; line-height: 1.6;
    font-family: var(--ag-font-body);
    color: var(--ag-text-muted);
}

/* ── Default style ── */
.acd--default {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.acd--default .acd-item { border-bottom: 1px solid var(--ag-border); }
.acd--default .acd-item:last-child { border-bottom: none; }
.acd--default .acd-item--open > .acd-header { background: var(--ag-blue-150); }

/* ── Filled Navy style ── */
.acd--filled { border-radius: 14px; overflow: hidden; }
.acd--filled .acd-item { border-bottom: 1px solid rgba(255,255,255,0.1); }
.acd--filled .acd-item:last-child { border-bottom: none; }

.acd--filled .acd-header { background: var(--ag-primary); }
.acd--filled .acd-header:hover { background: var(--ag-primary-hover); }
.acd--filled .acd-item--open > .acd-header { background: var(--ag-primary-hover); }

.acd--filled .acd-title { color: #fff; }
.acd--filled .acd-title i { color: var(--ag-info-border-2); }
.acd--filled .acd-chevron { color: rgba(255,255,255,0.6); }

.acd--filled .acd-body { background: var(--ag-blue-200); }
.acd--filled .acd-body p { color: var(--ag-text-primary); }

/* ── Border Left style ── */
.acd--border { display: flex; flex-direction: column; gap: 8px; }

.acd--border .acd-item {
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid var(--ag-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s;
}
.acd--border .acd-item--open {
    border-left-color: var(--ag-link);
}
.acd--border .acd-header { border-radius: 10px; }
.acd--border .acd-item--open > .acd-header { background: var(--ag-blue-100); }
.acd--border .acd-body p { padding-left: 18px; }

/* Bootstrap col-* gestiona el responsive del accordion */

/* =============================================
   ALERTS PAGE
   ============================================= */

.alt-section { padding: 24px; margin-bottom: 0; }

/* Trigger buttons */
.alt-trigger-row {
    display: flex; flex-wrap: wrap; gap: 12px;
}
.alt-trigger-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; border-radius: 10px; border: none;
    font-size: 13.5px; font-family: var(--ag-font-body);
    font-weight: 600; cursor: pointer;
    transition: opacity 0.18s, transform 0.15s;
}
.alt-trigger-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.alt-trigger--success { background: var(--ag-success-bg); color: var(--ag-success-text); }
.alt-trigger--error   { background: var(--ag-danger-bg); color: var(--ag-danger); }
.alt-trigger--warning { background: var(--ag-warning-bg); color: var(--ag-warning-text); }
.alt-trigger--info    { background: var(--ag-info-bg); color: var(--ag-info); }
.alt-trigger--confirm { background: var(--ag-confirm-bg); color: var(--ag-confirm); }

/* Inline alerts */
.alt-inline-list { display: flex; flex-direction: column; gap: 10px; }

.alt-inline {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 10px;
    font-size: 13.5px; font-family: var(--ag-font-body);
    font-weight: 500; overflow: hidden;
}
.alt-inline i:first-child { font-size: 16px; flex-shrink: 0; }
.alt-inline span:nth-child(2) { flex: 1; }

.alt-inline--success { background: var(--ag-success-bg-2); color: var(--ag-success-text); border: 1px solid var(--ag-success-border); }
.alt-inline--error   { background: var(--ag-danger-bg-2); color: var(--ag-danger); border: 1px solid var(--ag-danger-border-2); }
.alt-inline--warning { background: var(--ag-warning-bg-2); color: var(--ag-warning-dark); border: 1px solid var(--ag-warning-border-2); }
.alt-inline--info    { background: var(--ag-info-bg-2); color: var(--ag-info-dark); border: 1px solid var(--ag-info-border); }

.alt-inline-close {
    background: none; border: none; cursor: pointer;
    font-size: 16px; line-height: 1;
    opacity: 0.55; transition: opacity 0.15s;
    display: flex; align-items: center; flex-shrink: 0;
    color: inherit; padding: 0;
}
.alt-inline-close:hover { opacity: 1; }

.alt-inline-tag {
    font-size: 11px; font-weight: 700;
    padding: 2px 9px; border-radius: 20px;
    background: rgba(0,0,0,0.07);
    color: inherit; flex-shrink: 0;
    font-family: var(--ag-font-head);
    letter-spacing: 0.03em;
}

/* Alert dialogs */
.alt-dialog {
    background: #fff; border-radius: 18px;
    padding: 36px 32px 28px;
    max-width: 360px; width: 100%;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    box-shadow: 0 20px 60px rgba(0,26,63,0.18);
    transform: translateY(20px) scale(0.97); opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.mdl-overlay--visible .alt-dialog {
    transform: translateY(0) scale(1); opacity: 1;
}

.alt-dialog-icon {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 18px;
}
.alt-dialog-icon--success { background: var(--ag-success-bg); color: var(--ag-success); }
.alt-dialog-icon--error   { background: var(--ag-danger-bg); color: var(--ag-danger-strong); }
.alt-dialog-icon--warning { background: var(--ag-warning-bg); color: var(--ag-warning-strong); }
.alt-dialog-icon--info    { background: var(--ag-info-bg); color: var(--ag-info); }
.alt-dialog-icon--confirm { background: var(--ag-confirm-bg); color: var(--ag-confirm); }

.alt-dialog-title {
    font-family: var(--ag-font-head);
    font-size: 17px; font-weight: 700;
    color: var(--ag-primary); margin: 0 0 10px;
}
.alt-dialog-msg {
    font-size: 13.5px; color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
    line-height: 1.55; margin: 0 0 24px;
}
.alt-dialog-actions {
    width: 100%; display: flex; flex-direction: column; gap: 8px;
}
.alt-dialog-actions--row {
    flex-direction: row; justify-content: center; gap: 10px;
}

.alt-dialog-btn {
    padding: 11px 24px; border-radius: 10px; border: none;
    font-size: 14px; font-family: var(--ag-font-body);
    font-weight: 600; cursor: pointer; width: 100%;
    transition: opacity 0.18s;
}
.alt-dialog-actions--row .alt-dialog-btn { width: auto; flex: 1; }
.alt-dialog-btn:hover { opacity: 0.88; }

.alt-dialog-btn--success { background: var(--ag-success); color: #fff; }
.alt-dialog-btn--error   { background: var(--ag-danger-strong); color: #fff; }
.alt-dialog-btn--warning { background: var(--ag-warning-strong); color: #fff; }
.alt-dialog-btn--info    { background: var(--ag-info); color: #fff; }
.alt-dialog-btn--confirm { background: var(--ag-confirm); color: #fff; }
.alt-dialog-btn--ghost {
    background: var(--ag-hover-bg); color: var(--ag-text-primary);
    border: 1.5px solid var(--ag-border);
}

/* =============================================
   MODAL COMPONENTS
   ============================================= */

/* Demo launcher row */
.mdl-demo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}
.mdl-demo-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}
.mdl-demo-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--ag-active-bg); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--ag-primary);
}
.mdl-demo-info { flex: 1; }
.mdl-demo-title {
    font-family: var(--ag-font-head);
    font-size: 14px; font-weight: 600; color: var(--ag-primary);
}
.mdl-demo-desc {
    font-size: 12.5px; color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
}

/* Overlay */
.mdl-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 10, 30, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
.mdl-overlay--visible {
    opacity: 1; pointer-events: all;
}
.mdl-overlay--visible .mdl-dialog {
    transform: translateY(0); opacity: 1;
}

/* Dialog box */
.mdl-dialog {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,26,63,0.2);
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    transform: translateY(20px); opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    overflow: hidden;
}
.mdl-dialog--sm  { max-width: 480px; }
.mdl-dialog--lg  { max-width: 820px; }
.mdl-dialog--xl  { max-width: 1320px; }

/* Header */
.mdl-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ag-border);
    flex-shrink: 0;
    gap: 12px;
}
.mdl-header--blue { background: var(--ag-active-bg); border-bottom: none; }

.mdl-header-left { display: flex; flex-direction: column; gap: 2px; }
.mdl-title {
    font-family: var(--ag-font-head);
    font-size: 15px; font-weight: 600; color: var(--ag-primary);
}
.mdl-subtitle {
    font-size: 12px; color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
}
.mdl-close {
    width: 32px; height: 32px; border-radius: 8px;
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: var(--ag-text-muted);
    transition: background 0.18s, color 0.18s; flex-shrink: 0;
}
.mdl-close:hover { background: rgba(0,26,63,0.08); color: var(--ag-primary); }

/* Toolbar (table modal) */
.mdl-toolbar {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ag-border);
    gap: 12px; flex-shrink: 0;
}

/* Body */
.mdl-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}
.mdl-body--table {
    padding: 0;
    overflow-x: auto;
}

/* Footer */
.mdl-footer {
    display: flex; align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--ag-border);
    flex-shrink: 0;
}
.mdl-footer--between { justify-content: space-between; }

@media (max-width: 600px) {
    .mdl-demo-row { grid-template-columns: 1fr; }
    .mdl-dialog--lg { max-width: 100%; }
    .mdl-dialog--xl { max-width: 100%; }
}

/* =============================================
   CARDS PAGE
   ============================================= */

.crd-showcase { display: flex; flex-direction: column; gap: 32px; }

.crd-section {}
.crd-section-label {
    font-family: var(--ag-font-head);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--ag-nav-label-color);
    margin-bottom: 14px;
}

.crd-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: start;
}
.crd-row--mixed {
    grid-template-columns: 1fr 1fr;
}

/* ── Stat Card ── */
.crd-stat {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    display: flex; flex-direction: column; gap: 14px;
}
.crd-stat-top {
    display: flex; align-items: center; gap: 14px;
}
.crd-stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--ag-active-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--ag-primary); flex-shrink: 0;
}
.crd-stat-value {
    font-family: var(--ag-font-head);
    font-size: 26px; font-weight: 700;
    color: var(--ag-primary); line-height: 1.1;
}
.crd-stat-label {
    font-size: 12.5px; color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
    margin-top: 2px;
}
.crd-stat-footer {
    display: flex; align-items: center; gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--ag-border);
}
.crd-trend {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 700;
    font-family: var(--ag-font-body);
    padding: 2px 8px; border-radius: 20px;
}
.crd-trend--up   { background: var(--ag-success-bg); color: var(--ag-success-text); }
.crd-trend--down { background: var(--ag-danger-bg); color: var(--ag-danger); }
.crd-trend--neutral { background: var(--ag-hover-bg); color: var(--ag-text-muted); }
.crd-trend-label {
    font-size: 11.5px; color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
}

/* ── News Card ── */
.crd-news {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.crd-news-img {
    height: 160px; background: var(--ag-active-bg);
    display: flex; align-items: center; justify-content: center;
}
.crd-news-img-placeholder { font-size: 36px; color: var(--ag-blue-600); }
.crd-news-body { padding: 18px 20px 20px; }
.crd-news-date {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-family: var(--ag-font-body);
    background: var(--ag-active-bg); color: var(--ag-primary-soft);
    padding: 3px 10px; border-radius: 20px;
    margin-bottom: 10px; font-weight: 500;
}
.crd-news-title {
    font-family: var(--ag-font-head);
    font-size: 15px; font-weight: 600;
    color: var(--ag-primary); margin: 0 0 8px;
}
.crd-news-desc {
    font-size: 13px; color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
    line-height: 1.55; margin: 0 0 16px;
}
.crd-news-actions { display: flex; gap: 10px; }
.crd-btn-ghost {
    background: none; border: 1.5px solid var(--ag-border);
    border-radius: 8px; padding: 8px 16px;
    font-size: 13px; font-family: var(--ag-font-body);
    font-weight: 600; color: var(--ag-primary); cursor: pointer;
    transition: background 0.18s;
}
.crd-btn-ghost:hover { background: var(--ag-hover-bg); }
.crd-btn-primary {
    background: var(--ag-primary); border: none;
    border-radius: 8px; padding: 8px 18px;
    font-size: 13px; font-family: var(--ag-font-body);
    font-weight: 600; color: #fff; cursor: pointer;
    transition: background 0.18s;
}
.crd-btn-primary:hover { background: var(--ag-primary-hover); }

/* ── Institution Card ── */
.crd-institution {
    background: #fff; border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    display: flex; flex-direction: column; gap: 16px;
}
.crd-inst-main {
    display: flex; align-items: center; gap: 14px;
}
.crd-inst-logo {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--ag-active-bg); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--ag-primary);
}
.crd-inst-info { flex: 1; }
.crd-inst-name {
    font-family: var(--ag-font-head);
    font-size: 15px; font-weight: 600; color: var(--ag-primary);
}
.crd-inst-sub {
    font-size: 12px; color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
}
.crd-inst-arrow {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--ag-border);
    background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--ag-text-muted);
    transition: background 0.18s, color 0.18s; flex-shrink: 0;
}
.crd-inst-arrow:hover { background: var(--ag-hover-bg); color: var(--ag-primary); }
.crd-inst-stats {
    display: flex; gap: 0;
    border-top: 1px solid var(--ag-border);
    padding-top: 14px;
}
.crd-inst-stat {
    flex: 1; text-align: center;
    border-right: 1px solid var(--ag-border);
}
.crd-inst-stat:last-child { border-right: none; }
.crd-inst-stat-val {
    display: block;
    font-family: var(--ag-font-head);
    font-size: 18px; font-weight: 700; color: var(--ag-primary);
}
.crd-inst-stat-lbl {
    font-size: 11.5px; color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
}

/* ── Module Card ── */
.crd-module {
    background: #fff; border-radius: 14px;
    padding: 24px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 10px;
}
.crd-module-icon {
    width: 60px; height: 60px; border-radius: 16px;
    background: var(--ag-active-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--ag-primary);
    margin-bottom: 4px;
}
.crd-module-name {
    font-family: var(--ag-font-head);
    font-size: 15px; font-weight: 600; color: var(--ag-primary);
}
.crd-module-desc {
    font-size: 12.5px; color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
    line-height: 1.5; flex: 1;
}
.crd-module-btn {
    width: 100%; margin-top: 8px;
    background: var(--ag-primary); color: #fff; border: none;
    border-radius: 10px; padding: 10px;
    font-size: 13.5px; font-family: var(--ag-font-body);
    font-weight: 600; cursor: pointer;
    transition: background 0.18s;
}
.crd-module-btn:hover { background: var(--ag-primary-hover); }

/* ── Role Card (Dark) ── */
.crd-role {
    background: var(--ag-primary); border-radius: 14px;
    padding: 22px 20px;
    box-shadow: 0 4px 16px rgba(0,26,63,0.25);
    display: flex; flex-direction: column; gap: 10px;
}
.crd-role-top {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.crd-role-badge {
    font-size: 11px; font-weight: 600;
    font-family: var(--ag-font-body);
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    padding: 3px 10px; border-radius: 20px;
}
.crd-role-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: rgba(255,255,255,0.8);
}
.crd-role-title {
    font-family: var(--ag-font-head);
    font-size: 16px; font-weight: 700;
    color: #ffffff;
}
.crd-role-desc {
    font-size: 12.5px; color: rgba(255,255,255,0.6);
    font-family: var(--ag-font-body);
    line-height: 1.5; flex: 1;
}
.crd-role-btn {
    margin-top: 6px;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 10px; padding: 9px 16px;
    font-size: 13px; font-family: var(--ag-font-body);
    font-weight: 600; color: #fff; cursor: pointer;
    transition: background 0.18s;
    text-align: center;
}
.crd-role-btn:hover { background: rgba(255,255,255,0.18); }

/* Bootstrap col-* gestiona el responsive de las cards */

/* =============================================
   FORM COMPONENTS
   ============================================= */

/* Layout */
.frm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.frm-col { display: flex; flex-direction: column; gap: 24px; }

.frm-section { padding: 24px; }
.frm-section-title {
    font-family: var(--ag-font-head);
    font-size: 13px;
    font-weight: 600;
    color: var(--ag-primary);
    margin: 0 0 16px;
}

.frm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; position: relative; }
.frm-field:last-child { margin-bottom: 0; }
.frm-field--inline { flex-direction: row; align-items: center; margin-bottom: 10px; }

.frm-label-row { display: flex; justify-content: space-between; align-items: center; }
.frm-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ag-primary);
    font-family: var(--ag-font-body);
}
.frm-label--disabled { color: var(--ag-text-muted); }

/* State badges */
.frm-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--ag-gray-subtle-bg-2);
    color: var(--ag-nav-label-color);
    font-family: var(--ag-font-body);
}
.frm-badge--error   { background: var(--ag-danger-bg); color: var(--ag-danger); }
.frm-badge--success { background: var(--ag-success-bg); color: var(--ag-success-text); }
.frm-badge--disabled{ background: var(--ag-gray-track); color: var(--ag-gray-thumb); }

/* Base input */
.frm-input {
    width: 100%;
    height: 44px;
    border: 1.5px solid var(--ag-border);
    border-radius: 10px;
    padding: 0 14px;
    font-size: 13.5px;
    font-family: var(--ag-font-body);
    color: var(--ag-primary);
    background: #ffffff;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
}
.frm-input::placeholder { color: var(--ag-text-muted); }
.frm-input:focus, .frm-input--focus {
    border-color: var(--ag-primary);
    box-shadow: 0 0 0 3px rgba(0,26,63,0.1);
}
.frm-input--filled  { border-color: var(--ag-border); background: var(--ag-gray-subtle-bg); }
.frm-input--error   { border-color: var(--ag-danger-strong); box-shadow: 0 0 0 3px rgba(224,80,80,0.1); }
.frm-input--success { border-color: var(--ag-success); box-shadow: 0 0 0 3px rgba(26,158,95,0.1); }
.frm-input--disabled, .frm-input:disabled {
    background: var(--ag-gray-disabled-bg); border-color: var(--ag-gray-disabled-border); color: var(--ag-text-muted); cursor: not-allowed;
}
.frm-input--date { padding-right: 44px; }

/* Input with icon */
.frm-input-wrap { position: relative; display: flex; align-items: center; }
.frm-input-wrap .frm-input { width: 100%; padding-right: 44px; }
.frm-input-icon {
    position: absolute; right: 14px;
    font-size: 16px; line-height: 1; pointer-events: none;
}
.frm-icon--error   { color: var(--ag-danger-strong); }
.frm-icon--success { color: var(--ag-success); }
.frm-icon--date    { pointer-events: all; cursor: pointer; color: var(--ag-text-muted); }

/* Hints */
.frm-hint { font-size: 12px; font-family: var(--ag-font-body); }
.frm-hint--error   { color: var(--ag-danger-strong); }
.frm-hint--success { color: var(--ag-success); }

/* Select */
.frm-select-wrap { position: relative; }
.frm-select {
    width: 100%; height: 44px;
    border: 1.5px solid var(--ag-border);
    border-radius: 10px;
    padding: 0 40px 0 14px;
    font-size: 13.5px;
    font-family: var(--ag-font-body);
    color: var(--ag-primary);
    background: #ffffff;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.18s;
}
.frm-select:focus { border-color: var(--ag-primary); box-shadow: 0 0 0 3px rgba(0,26,63,0.1); }
.frm-select-arrow {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none; color: var(--ag-text-muted); font-size: 13px;
}

/* Textarea */
.frm-textarea {
    width: 100%; min-height: 100px;
    border: 1.5px solid var(--ag-border);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13.5px;
    font-family: var(--ag-font-body);
    color: var(--ag-primary);
    background: #ffffff;
    outline: none; resize: vertical;
    transition: border-color 0.18s;
    box-sizing: border-box;
}
.frm-textarea::placeholder { color: var(--ag-text-muted); }
.frm-textarea:focus { border-color: var(--ag-primary); box-shadow: 0 0 0 3px rgba(0,26,63,0.1); }

/* Checkbox */
.frm-check-group { display: flex; flex-direction: column; gap: 10px; }
.frm-check-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; font-family: var(--ag-font-body);
    color: var(--ag-primary); cursor: pointer; user-select: none;
}
.frm-check-item--disabled { color: var(--ag-text-muted); cursor: not-allowed; }

.frm-checkbox {
    width: 18px; height: 18px;
    border-radius: 4px;
    accent-color: var(--ag-primary);
    cursor: pointer; flex-shrink: 0;
}

/* Wizard de pasos (modales tipo Objetivo de Planeación) */
.wiz-steps {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.wiz-step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wiz-circle {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
    font-family: var(--ag-font-body);
    background: var(--ag-gray-subtle-bg-2);
    color: var(--ag-text-muted);
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s;
}
.wiz-label {
    font-size: 13.5px; font-weight: 600;
    color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
    white-space: nowrap;
}
.wiz-line { height: 2px; flex: 1 1 40px; min-width: 24px; background: var(--ag-border); margin: 0 12px; }
.wiz-step.is-active .wiz-circle { background: var(--ag-primary); color: #fff; }
.wiz-step.is-active .wiz-label { color: var(--ag-primary); }
.wiz-step.is-complete .wiz-circle { background: var(--ag-success-strong); color: #fff; }
.wiz-step.is-complete .wiz-label { color: var(--ag-success-strong); }
.wiz-step.is-complete + .wiz-line { background: var(--ag-success-strong); }

.wiz-examples {
    background: var(--ag-gray-subtle-bg);
    border: 1px solid var(--ag-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 8px;
}
.wiz-examples-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ag-primary); margin-bottom: 4px; }
.wiz-examples-hint { font-size: 12px; color: var(--ag-text-muted); margin-bottom: 10px; }
.wiz-examples-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-chip {
    border: 1.5px solid var(--ag-border);
    background: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-family: var(--ag-font-body);
    color: var(--ag-primary);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}
.wiz-chip:hover { border-color: var(--ag-primary); background: var(--ag-active-bg); }
.wiz-chip strong { font-weight: 700; }

/* Radio */
.frm-radio {
    width: 18px; height: 18px;
    accent-color: var(--ag-primary);
    cursor: pointer; flex-shrink: 0;
}

/* Toggle */
.frm-toggle { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.frm-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.frm-toggle-track {
    width: 40px; height: 22px;
    background: var(--ag-blue-440);
    border-radius: 20px;
    transition: background 0.22s;
    position: relative;
    cursor: pointer;
}
.frm-toggle-track::after {
    content: '';
    position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%; background: #fff;
    transition: transform 0.22s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.frm-toggle-input:checked + .frm-toggle-track { background: var(--ag-primary); }
.frm-toggle-input:checked + .frm-toggle-track::after { transform: translateX(18px); }
.frm-toggle-input:disabled + .frm-toggle-track { background: var(--ag-gray-disabled-border); cursor: not-allowed; }

/* Search command box */
.frm-search-cmd {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--ag-border);
    border-radius: 10px; padding: 0 14px; height: 44px;
    background: #ffffff;
}
.frm-search-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ag-border); flex-shrink: 0;
}
.frm-search-cmd-input {
    flex: 1; border: none; outline: none;
    font-size: 13.5px; font-family: var(--ag-font-body);
    color: var(--ag-primary);
}
.frm-search-cmd-input::placeholder { color: var(--ag-text-muted); }
.frm-kbd {
    font-size: 11px; font-family: var(--ag-font-body);
    color: var(--ag-text-muted);
    background: var(--ag-hover-bg); border: 1px solid var(--ag-border);
    border-radius: 5px; padding: 2px 7px;
    white-space: nowrap;
}

/* Mini Calendar */
.frm-calendar {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
    background: #fff; border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,26,63,0.14);
    padding: 16px; width: 280px;
}
.cal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.cal-month-label {
    font-family: var(--ag-font-head); font-size: 14px;
    font-weight: 600; color: var(--ag-primary);
}
.cal-nav {
    background: none; border: none; cursor: pointer;
    color: var(--ag-text-muted); font-size: 14px;
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.cal-nav:hover { background: var(--ag-hover-bg); color: var(--ag-primary); }
.cal-grid { }
.cal-dow {
    display: inline-block; width: calc(100%/7);
    text-align: center; font-size: 11px;
    font-family: var(--ag-font-head); font-weight: 600;
    color: var(--ag-text-muted); padding: 4px 0;
}
.cal-days {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.cal-day {
    height: 32px; width: 100%;
    border: none; background: none; border-radius: 8px;
    font-size: 12.5px; font-family: var(--ag-font-body);
    color: var(--ag-primary); cursor: pointer;
    transition: background 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.cal-day:hover:not(.cal-day--other) { background: var(--ag-hover-bg); }
.cal-day--other { color: var(--ag-blue-460); }
.cal-day--today {
    border: 1.5px solid var(--ag-primary); font-weight: 600;
}
.cal-day--selected {
    background: var(--ag-primary) !important; color: #fff !important;
    font-weight: 600;
}
.cal-footer {
    display: flex; justify-content: space-between;
    border-top: 1px solid var(--ag-border); padding-top: 10px; margin-top: 8px;
}
.cal-foot-btn {
    background: none; border: none; cursor: pointer;
    font-size: 12.5px; font-family: var(--ag-font-body);
    color: var(--ag-primary); font-weight: 600; padding: 4px 8px;
    border-radius: 6px; transition: background 0.15s;
}
.cal-foot-btn:hover { background: var(--ag-hover-bg); }

/* Date range picker */

.cal-range-hint {
    font-size: 11.5px; font-family: var(--ag-font-body);
    color: var(--ag-primary-soft); font-weight: 600;
    text-align: center; margin-bottom: 8px;
    padding: 4px 10px; background: var(--ag-active-bg);
    border-radius: 6px;
}

.cal-day--range-start,
.cal-day--range-end {
    background: var(--ag-primary) !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: 8px;
}
.cal-day--in-range {
    background: var(--ag-active-bg) !important;
    color: var(--ag-primary);
    border-radius: 0;
}
.cal-day--range-start { border-radius: 8px 0 0 8px !important; }
.cal-day--range-end   { border-radius: 0 8px 8px 0 !important; }

/* Form card: Nuevo Usuario */
.frm-form-card { overflow: visible; }
.frm-card-header {
    border-bottom: 1px solid var(--ag-border);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.frm-card-title {
    font-family: var(--ag-font-head); font-size: 15px;
    font-weight: 600; color: var(--ag-primary);
}
.frm-card-body { padding: 24px; }
.frm-card-actions {
    display: flex; justify-content: center; gap: 16px;
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--ag-border);
}
.frm-btn-cancel {
    background: none; border: none; cursor: pointer;
    font-size: 14px; font-family: var(--ag-font-body);
    font-weight: 600; color: var(--ag-text-muted);
    padding: 10px 20px; border-radius: 10px;
    transition: color 0.18s, background 0.18s;
}
.frm-btn-cancel:hover { color: var(--ag-primary); background: var(--ag-hover-bg); }
.frm-btn-save {
    background: var(--ag-primary); color: #fff; border: none;
    cursor: pointer; font-size: 14px;
    font-family: var(--ag-font-body); font-weight: 600;
    padding: 10px 24px; border-radius: 10px;
    transition: background 0.18s;
}
.frm-btn-save:hover { background: var(--ag-primary-hover); }

@media (max-width: 860px) {
    .frm-grid { grid-template-columns: 1fr; }
}

/* Focus styles */
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--ag-focus-blue);
}

/* =============================================
   DATATABLES OVERRIDES
   ============================================= */
div.dt-container { font-family: var(--ag-font-body); font-size: 13px; color: var(--ag-text-primary); }

/* Wrapper top/bottom */
div.dt-layout-row { display: flex !important; align-items: center; justify-content: space-between !important; flex-wrap: wrap; gap: 10px; padding: 12px 16px; width: 100%; }
div.dt-layout-row:first-child { border-bottom: 1px solid var(--ag-border); }
div.dt-layout-row:last-child  { border-top: 1px solid var(--ag-border); }
div.dt-layout-start {
    margin-right: auto !important;
    flex: 0 0 auto;
    margin-left: 10px !important;
    margin-right: 10px !important;
}
div.dt-layout-end {
    margin-left: auto !important;
    flex: 0 0 auto;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

/* Length (mostrar N registros) */
div.dt-length label { display: flex; align-items: center; gap: 8px; color: var(--ag-text-muted); font-size: 12.5px; }
div.dt-length select {
    border: 1px solid var(--ag-border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12.5px;
    font-family: var(--ag-font-body);
    color: var(--ag-text-primary);
    background: #fff;
    outline: none;
}

/* Search */
div.dt-search { display: flex; align-items: center; gap: 8px; }
div.dt-search label { color: var(--ag-text-muted); font-size: 12.5px; }
div.dt-search input {
    border: 1px solid var(--ag-border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-family: var(--ag-font-body);
    color: var(--ag-text-primary);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}
div.dt-search input:focus { border-color: var(--ag-primary); }

/* Info */
div.dt-info { color: var(--ag-text-muted); font-size: 12px; }

/* Paginación */
div.dt-paging .dt-paging-button {
    border: 1px solid var(--ag-border) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--ag-text-primary) !important;
    padding: 4px 10px !important;
    font-size: 12.5px !important;
    font-family: var(--ag-font-body) !important;
    cursor: pointer;
    transition: background 0.15s;
    min-width: 32px;
    text-align: center;
}
div.dt-paging .dt-paging-button:hover:not(.disabled) { background: var(--ag-hover-bg) !important; border-color: var(--ag-surface-accent) !important; }
div.dt-paging .dt-paging-button.current { background: var(--ag-primary) !important; color: #fff !important; border-color: var(--ag-primary) !important; }
div.dt-paging .dt-paging-button.disabled { opacity: 0.4; cursor: not-allowed; }
div.dt-paging nav { display: flex; gap: 4px; }

/* Scroll wrapper */
div.dtfh-floatingparent, .dataTables_scrollBody { border: none !important; }
.dataTables_scrollBody::-webkit-scrollbar { height: 5px; }
.dataTables_scrollBody::-webkit-scrollbar-track { background: var(--ag-hover-bg); }
.dataTables_scrollBody::-webkit-scrollbar-thumb { background: var(--ag-border); border-radius: 4px; }

/* Sorting icons */
table.dataTable thead th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead th.dt-orderable-desc span.dt-column-order::after { opacity: 0.3; }
table.dataTable thead th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead th.dt-ordering-desc span.dt-column-order::after { opacity: 1; color: var(--ag-surface-accent); }

/* =============================================
   PAGE COMPONENTS
   ============================================= */
.ag-page-header {
    background: var(--ag-surface-accent);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.ag-page-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ag-page-header-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ag-page-title {
    font-family: var(--ag-font-head);
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}
.ag-page-subtitle {
    font-family: var(--ag-font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.70);
    margin: 2px 0 0;
}
.ag-page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Card container */
.ag-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    overflow: hidden;
}
.ag-card.frm-section--overflow {
    overflow: visible;
}

/* =============================================
   TABLE TOOLBAR
   ============================================= */
.ag-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    gap: 12px;
}

.ag-table-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ag-text-primary);
}

.ag-table-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ag-toolbar-label {
    font-size: 13.5px;
    color: var(--ag-text-primary);
}

.ag-input-sm {
    width: 60px;
    height: 34px;
    border: 1px solid var(--ag-border);
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13.5px;
    color: var(--ag-text-primary);
    text-align: center;
    outline: none;
    font-family: var(--ag-font-body);
}
.ag-input-sm:focus { border-color: var(--ag-primary-soft); }

/* DEPRECADO — alias de compatibilidad, usado hoy en Modal.cshtml.
   La API única de botón es .ag-btn (ver sección BOTONES): .ag-btn.ag-btn--primary.ag-btn--lg
   produce el mismo color (ambos usan --ag-primary) con radio/tamaño ligeramente distintos.
   Migrar los usos de .ag-btn-primary a .ag-btn--primary al re-skinear cada vista y borrar
   esta clase cuando no queden referencias. */
.ag-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ag-primary);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 9px 20px;
    font-size: 13.5px;
    font-family: var(--ag-font-body);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.ag-btn-primary:hover { background: var(--ag-primary-hover); }

.ag-btn-icon {
    width: 16px;
    height: 16px;
    background: rgba(255,255,255,0.25);
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}

/* Search box */
.ag-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--ag-border);
    border-radius: 10px;
    padding: 0 14px;
    height: 38px;
    background: #ffffff;
    min-width: 200px;
}
.ag-search-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ag-border);
    flex-shrink: 0;
}
.ag-search-input {
    border: none;
    outline: none;
    font-size: 13.5px;
    color: var(--ag-text-primary);
    font-family: var(--ag-font-body);
    flex: 1;
}
.ag-search-input::placeholder { color: var(--ag-text-muted); }

/* =============================================
   TABLE
   ============================================= */
.ag-table-wrapper {
    overflow-x: auto;
}

.ag-table {
    width: 100%;
    border-collapse: collapse;
}

.ag-table thead tr {
    background: var(--ag-blue-400);
}

.ag-table th {
    padding: 13px 16px;
    font-family: var(--ag-font-head);
    font-size: 13px;
    font-weight: 600;
    color: var(--ag-primary);
    text-align: left;
    white-space: nowrap;
}

.ag-th-check { width: 44px; }

.ag-table td {
    padding: 13px 16px;
    font-size: 13.5px;
    color: var(--ag-text-primary);
    border-bottom: 1px solid var(--ag-border);
    vertical-align: middle;
}

.ag-table tbody tr:last-child td {
    border-bottom: none;
}

.ag-table tbody tr:hover {
    background: var(--ag-hover-bg);
}

.ag-row-selected td {
    background: var(--ag-blue-300) !important;
}

/* Checkbox */
.ag-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--ag-primary);
    cursor: pointer;
    border-radius: 4px;
}

/* Badges */
.ag-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--ag-font-body);
}
.ag-badge-activo   { background: var(--ag-success-bg); color: var(--ag-success-text); }
.ag-badge-inactivo { background: var(--ag-danger-bg); color: var(--ag-danger); }
.ag-badge-pendiente{ background: var(--ag-warning-bg); color: var(--ag-warning-text); }

/* Action buttons */
.ag-td-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ag-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: opacity 0.18s;
}
.ag-action-btn:hover { opacity: 0.8; }

.ag-action-edit {
    background: var(--ag-primary);
    color: #ffffff;
    border-color: var(--ag-primary);
}
.ag-action-delete {
    background: var(--ag-danger-bg);
    color: var(--ag-danger);
    border-color: var(--ag-danger-border-3);
}
.ag-action-view {
    background: var(--ag-info-bg);
    color: var(--ag-info);
    border-color: var(--ag-info-border);
}
.ag-action-more {
    background: var(--ag-hover-bg);
    color: var(--ag-text-muted);
}

/* Dropdown de acciones de fila (_AGRowActions). Se apoya en el plugin de
   Bootstrap 5 ya cargado (data-bs-toggle="dropdown") solo re-vestido con los
   tokens AG, en vez de reimplementar el posicionamiento/teclado a mano. */
.ag-dropdown-menu {
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius-md);
    box-shadow: var(--ag-shadow-card);
    padding: 6px;
    min-width: 180px;
}
.ag-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--ag-font-body);
    color: var(--ag-text-primary);
}
.ag-dropdown-item:hover, .ag-dropdown-item:focus {
    background: var(--ag-hover-bg);
    color: var(--ag-text-primary);
}
.ag-dropdown-item i { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
.ag-dropdown-item--danger { color: var(--ag-danger); }
.ag-dropdown-item--danger:hover { background: var(--ag-danger-bg); color: var(--ag-danger); }
.ag-dropdown-divider { margin: 6px 4px; border-color: var(--ag-border); }

/* =============================================
   TABLE FOOTER / PAGINATION
   ============================================= */
.ag-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--ag-border);
}

.ag-table-info {
    font-size: 13px;
    color: var(--ag-text-muted);
}

.ag-pagination {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ag-page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--ag-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ag-text-primary);
    font-size: 13px;
    font-family: var(--ag-font-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, color 0.18s;
}
.ag-page-btn:hover:not(:disabled):not(.active) {
    background: var(--ag-hover-bg);
}
.ag-page-btn.active {
    background: var(--ag-primary);
    color: #ffffff;
    border-color: var(--ag-primary);
    font-weight: 600;
}
.ag-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
/* =============================================
   USER PANEL (perfil) — antes: offcanvas de Bootstrap/Metronic (#kt_quick_user)
   con el cargo fijo "Art Director" nunca reemplazado.
   ============================================= */
.ag-userpanel {
    position: fixed; inset: 0; z-index: var(--ag-z-modal);
    visibility: hidden; pointer-events: none;
}
.ag-userpanel--open { visibility: visible; pointer-events: all; }

.ag-userpanel-overlay {
    position: absolute; inset: 0;
    background: rgba(0, 10, 30, 0.45);
    opacity: 0; transition: opacity var(--ag-transition);
}
.ag-userpanel--open .ag-userpanel-overlay { opacity: 1; }

.ag-userpanel-drawer {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 320px; max-width: 90vw;
    background: var(--ag-sidebar-bg);
    box-shadow: var(--ag-shadow-modal);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex; flex-direction: column;
}
.ag-userpanel--open .ag-userpanel-drawer { transform: translateX(0); }

.ag-userpanel-header {
    display: flex; align-items: center; gap: 12px;
    padding: 20px; border-bottom: 1px solid var(--ag-border);
}
.ag-userpanel-header .ag-icon-btn { margin-left: auto; }
.ag-userpanel-body { padding: 20px; }

/* Layout de autenticación (_LayoutAGAuth): centra la tarjeta de login. La
   migración del contenido de Login/*.cshtml es trabajo de una ola posterior;
   esto solo da el contenedor. */
.ag-body--auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ag-navy);
    padding: 24px;
}

/* Tarjeta partida de las 3 páginas de Login/Recuperar/Reset: panel oscuro con
   el mensaje de bienvenida a la izquierda, formulario en blanco a la derecha. */
.ag-auth-shell {
    display: flex;
    width: 100%;
    min-height: 520px;
    border-radius: var(--ag-radius-xl);
    overflow: hidden;
    box-shadow: var(--ag-shadow-modal);
}
.ag-auth-hero {
    flex: 1 1 45%;
    background: linear-gradient(160deg, var(--ag-navy) 0%, var(--ag-primary) 100%);
    color: #ffffff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}
.ag-auth-logo { width: 140px; margin-bottom: 12px; }
.ag-auth-hero h1 {
    font-family: var(--ag-font-head);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}
.ag-auth-hero p {
    font-family: var(--ag-font-body);
    font-size: 13.5px;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin: 0;
}
.ag-auth-panel {
    flex: 1 1 45%;
    background: #ffffff;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ag-auth-title {
    font-family: var(--ag-font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--ag-primary);
    margin: 0 0 6px;
}
.ag-auth-subtitle {
    font-family: var(--ag-font-body);
    font-size: 13px;
    color: var(--ag-text-muted);
    margin: 0 0 24px;
}
.ag-auth-links {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 20px;
}
.ag-auth-links a {
    font-size: 12.5px;
    color: var(--ag-link);
    text-decoration: none;
}
.ag-auth-links a:hover { text-decoration: underline; }
.ag-auth-requisitos {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ag-auth-requisitos li {
    font-size: 12.5px;
    color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ag-auth-requisitos i { color: var(--ag-primary-soft); font-size: 12px; }
@media (max-width: 720px) {
    .ag-auth-shell { flex-direction: column; max-width: 420px; }
    .ag-auth-hero { padding: 28px; }
}

/* Variante clara de Login/Index, portada del clon de diseño de referencia
   "altaekklesia-signin-design" (mismo grupo GTILA/Global Teams International) —
   estructura, tipografía, radios y breakpoints tomados de ahí, remapeados a
   nuestros tokens --ag-* y con nuestros propios assets/copy (las imágenes de esa
   referencia son placeholders de otro producto, no las usamos). Recuperar/Reset
   se quedan con .ag-auth-shell/.ag-auth-hero/.ag-auth-panel originales (hero
   oscuro) — estas reglas solo aplican con el modificador --claro. */
.ag-body--auth-claro {
    background: var(--ag-page-bg);
    padding: 0;
    align-items: stretch;
}

.ag-auth-shell--claro {
    /* La referencia usa CSS grid 1fr/1fr en vez del flex 45/45 que tenía antes
       — resultado equivalente (50/50 real) pero más simple/robusto. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #ffffff;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    /* Acento propio de esta referencia (azul más claro que nuestro navy de marca),
       escoped aquí para no tocar --ag-primary global usado en el resto del sistema. */
    --ag-auth-accent: #2564bf;
    --ag-auth-accent-hover: #1e529d;
}

.ag-auth-hero--claro {
    background: linear-gradient(180deg, #eaf2ff 0%, #f5f8fe 100%);
    color: var(--ag-text-primary);
    padding: 56px 48px;
    justify-content: space-between;
}
.ag-auth-hero-content {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}
.ag-auth-hero--claro h1 {
    font-size: 36px;
    line-height: 44px;
    color: var(--ag-auth-accent);
    margin: 0 0 16px;
}
.ag-auth-hero--claro p {
    font-family: var(--ag-font-head);
    font-weight: 700;
    color: var(--ag-active-text);
    font-size: 19px;
    line-height: 27px;
    margin: 0;
}
/* AG_LogIn.png es un lienzo cuadrado (1042x1042) con una cuña transparente en
   la esquina superior izquierda; el arte real (las burbujas) vive en la franja
   central-derecha. object-fit:cover con aspect-ratio panorámico recorta esa
   cuña vacía en vez de mostrarla como espacio en blanco dentro de un cuadrado. */
/* Sin recorte: AG_LogIn.png es un lienzo cuadrado con las 3 burbujas repartidas
   en casi toda la altura (una versión recortada 16:9 dejaba la burbuja de abajo
   fuera de cuadro). Se muestra completo; la cuña transparente de la esquina
   superior izquierda se funde con el degradado del panel. */
.ag-auth-hero-illustration {
    width: 100%;
    max-width: 480px;
    margin: 0 auto 32px;
}
.ag-auth-hero-illustration img {
    width: 100%;
    height: auto;
    display: block;
}
.ag-auth-hero-brand {
    display: flex; align-items: center; gap: 10px;
}
.ag-auth-hero-brand img { height: 32px; width: auto; object-fit: contain; }
.ag-auth-hero-brand span {
    font-family: var(--ag-font-body);
    font-size: 14px;
    color: var(--ag-text-muted);
}
@media (min-width: 1300px) {
    .ag-auth-hero-content, .ag-auth-hero-brand { margin-left: 100px; }
}

.ag-auth-panel--claro {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 56px 64px;
}
.ag-auth-panel--claro .ag-form-errors,
.ag-auth-panel--claro form { width: 100%; max-width: 500px; }

.ag-auth-brand {
    display: flex; align-items: center; gap: 10px;
    width: 100%; max-width: 500px;
    margin-bottom: 32px;
}
.ag-auth-brand img { height: 88px; width: auto; object-fit: contain; }
.ag-auth-brand span {
    font-family: var(--ag-font-head);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.02em;
    color: var(--ag-active-text);
}

/* .ag-auth-panel--claro tiene align-items:center para centrar el bloque de 500px
   (marca/form) dentro del panel — sin ancho propio, el título/subtítulo se
   encogían a su contenido y quedaban centrados sueltos, desalineados del borde
   izquierdo real de los inputs. Se les da el mismo ancho que .ag-auth-brand/form
   (100%, tope 500px) y text-align:left explícito para que su borde izquierdo
   coincida con el de los campos. */
.ag-auth-panel--claro .ag-login-title,
.ag-auth-panel--claro .ag-auth-title {
    width: 100%;
    max-width: 500px;
    text-align: left;
    font-size: 30px;
    margin: 0 0 8px;
}
.ag-auth-panel--claro .ag-auth-subtitle {
    width: 100%;
    max-width: 500px;
    text-align: left;
    font-size: 15px;
    margin: 0 0 28px;
}
.ag-auth-panel--claro .frm-input {
    height: 54px;
    border-radius: var(--ag-radius-md);
    font-size: 15px;
}
.ag-auth-panel--claro .frm-input:focus {
    border-color: var(--ag-auth-accent);
    box-shadow: none;
}

.ag-auth-remember-row {
    display: flex; align-items: center; justify-content: space-between;
    margin: -4px 0 20px;
    font-size: 13px;
    font-family: var(--ag-font-body);
}
.ag-auth-remember-row label {
    display: flex; align-items: center; gap: 8px;
    color: var(--ag-text-primary);
    cursor: pointer;
}
.ag-auth-remember-row .frm-checkbox { accent-color: var(--ag-auth-accent); }
.ag-auth-remember-row a { color: var(--ag-auth-accent); font-weight: 600; text-decoration: none; }
.ag-auth-remember-row a:hover { text-decoration: underline; }

.ag-auth-panel--claro .ag-btn--primary {
    background: var(--ag-auth-accent);
    height: 56px;
    border-radius: var(--ag-radius-md);
    font-size: 15px;
}
.ag-auth-panel--claro .ag-btn--primary:hover { background: var(--ag-auth-accent-hover); }

.ag-auth-register {
    text-align: center;
    font-size: 14px;
    color: var(--ag-text-primary);
    font-family: var(--ag-font-body);
    margin: 22px 0 0;
}
.ag-auth-register a { color: var(--ag-auth-accent); text-decoration: none; font-weight: 600; }
.ag-auth-register a:hover { text-decoration: underline; }

.ag-auth-badge {
    display: flex; gap: 14px; align-items: flex-start;
    margin-top: 28px;
    padding: 16px;
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius-md);
    background: var(--ag-gray-subtle-bg);
}
.ag-auth-badge i { font-size: 22px; color: var(--ag-auth-accent); flex-shrink: 0; margin-top: 2px; }
.ag-auth-badge p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ag-text-muted);
    font-family: var(--ag-font-body);
}
.ag-auth-badge strong { color: var(--ag-text-primary); }

@media (max-width: 900px) {
    .ag-auth-shell--claro { grid-template-columns: 1fr; }
    .ag-auth-hero--claro { display: none; }
    .ag-auth-panel--claro { padding: 40px 28px; }
}

.ag-page-ellipsis {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

/* =============================================
   LOADING (bloqueo de página) — AG.loading()
   Sustituye a KTApp.blockPage/unblockPage (~84 llamadas legado, ver
   ag-compat.js). Pieza nueva del design system, no existía en Metronic.
   ============================================= */
.ag-loading-overlay {
    position: fixed; inset: 0; z-index: var(--ag-z-loading);
    background: rgba(0, 10, 30, 0.35);
    display: flex; align-items: center; justify-content: center;
}
.ag-loading-box {
    background: #fff;
    border-radius: var(--ag-radius-lg);
    box-shadow: var(--ag-shadow-modal);
    padding: 28px 36px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ag-spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--ag-border);
    border-top-color: var(--ag-primary);
    border-radius: 50%;
    animation: ag-spin 0.7s linear infinite;
}
@keyframes ag-spin {
    to { transform: rotate(360deg); }
}
.ag-loading-text {
    font-size: 13px; font-family: var(--ag-font-body);
    color: var(--ag-text-muted);
}

/* =============================================
   TOAST — AG.toast()
   Notificaciones no bloqueantes, apiladas en la esquina. Pieza nueva del
   design system (Metronic no tenía equivalente propio).
   ============================================= */
.ag-toast-host {
    position: fixed; top: 20px; right: 20px; z-index: var(--ag-z-toast);
    display: flex; flex-direction: column; gap: 10px;
    max-width: 360px;
}
.ag-toast {
    display: flex; align-items: center; gap: 10px;
    background: #fff;
    border-radius: var(--ag-radius-md);
    box-shadow: var(--ag-shadow-card);
    padding: 12px 14px;
    border-left: 4px solid var(--ag-info);
    font-family: var(--ag-font-body); font-size: 13.5px;
    color: var(--ag-text-primary);
    transform: translateX(24px); opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.ag-toast--open { transform: translateX(0); opacity: 1; }
.ag-toast--success { border-left-color: var(--ag-success); }
.ag-toast--error   { border-left-color: var(--ag-danger-strong); }
.ag-toast--warning { border-left-color: var(--ag-warning-strong); }
.ag-toast--info    { border-left-color: var(--ag-info); }
.ag-toast i { font-size: 16px; flex-shrink: 0; }
.ag-toast--success i { color: var(--ag-success); }
.ag-toast--error i   { color: var(--ag-danger-strong); }
.ag-toast--warning i { color: var(--ag-warning-strong); }
.ag-toast--info i    { color: var(--ag-info); }
.ag-toast-message { flex: 1; }
.ag-toast-close {
    background: none; border: none; padding: 2px;
    color: var(--ag-text-muted); cursor: pointer;
    display: flex; align-items: center;
}
.ag-toast-close:hover { color: var(--ag-text-primary); }

/* =============================================
   MAPA DE MACROPROCESOS (ProcesosGobierno/Inicio)
   Reutiliza .acd-grid/.acd--default; solo agrega el
   colapso a 1 columna que .acd-grid no define.
   ============================================= */
@media (max-width: 900px) {
    #carrilesMapaProcesos.acd-grid {
        grid-template-columns: 1fr;
    }
}

/* .acd-item hereda overflow:hidden de la base del acordeón (pensado para el
   recorte de bordes redondeados). El menú de acciones (_AGRowActions) de un
   proceso con más de 2 acciones se renderiza como dropdown dentro del propio
   .acd-header, y ese overflow:hidden lo recorta contra el borde del item —
   mismo síntoma que .ag-card, mismo arreglo puntual que .frm-section--overflow. */
.ag-proceso-nodo {
    overflow: visible;
}

/* Mismo síntoma en el árbol de ObjetivoPlaneacion: _NodoArbol también cuelga un
   _AGRowActions (dropdown "···") del .acd-header, y el .acd-item hijo lo recorta. */
.ag-objetivo-nodo {
    overflow: visible;
}

/* =============================================
   ÁRBOL DE ESTRUCTURA ORGANIZACIONAL
   (EstructuraOrganizacional/Inicio)
   Reutiliza el acordeón .acd/.acd--default; agrega
   solo lo que ese componente no cubre: la guía de
   indentación por nivel, la fila hoja de usuario y
   el estado "vacante".
   ============================================= */
.ag-estructura-nodo {
    overflow: visible; /* mismo motivo que .ag-proceso-nodo */
}

/* .acd-header reparte a sus hijos con space-between. Una unidad no lleva botones de
   acción, así que sin esto su título se iría al extremo derecho del encabezado en vez de
   quedar pegado al chevron, y la indentación del árbol dejaría de leerse. */
.ag-estructura-nodo > .acd-header > .acd-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* El acordeón base rota el chevron 180°, con lo que un "chevron-right" abierto termina
   apuntando a la izquierda. En un árbol la convención es que apunte hacia abajo, sobre el
   contenido que despliega. */
.ag-estructura-nodo.acd-item--open > .acd-header .acd-chevron {
    transform: rotate(90deg);
}

/* Cada nivel de anidación se indenta y arrastra una línea guía vertical: es lo que
   mantiene legible la jerarquía cuando pasa de 3 niveles de profundidad. */
.ag-estructura-hijos {
    padding: 0 0 6px 20px;
    margin-left: 18px;
    border-left: 1px solid var(--ag-border);
}

/* El nombre del nodo es el enlace al detalle existente; hereda el color del
   .acd-title para no romper la jerarquía tipográfica del acordeón. */
.ag-estructura-link {
    color: inherit;
    text-decoration: none;
}
.ag-estructura-link:hover { text-decoration: underline; }

/* Fila de usuario: es hoja del árbol, no un acordeón, así que no puede reutilizar
   .acd-header (que asume cursor/chevron de colapso). */
.ag-estructura-usuario {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 7px 18px 7px 4px;
    font-family: var(--ag-font-body);
    font-size: 13px; color: var(--ag-text-primary);
    border-radius: var(--ag-radius-sm);
}
.ag-estructura-usuario:hover { background: var(--ag-hover-bg); }
.ag-estructura-usuario-datos {
    display: flex; align-items: center; gap: 9px; min-width: 0;
}
.ag-estructura-usuario-datos i { color: var(--ag-primary-soft); flex-shrink: 0; }
.ag-estructura-usuario-correo {
    color: var(--ag-text-muted); font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Puesto sin usuario asignado. La franja ámbar se ve sin necesidad de leer el badge,
   que es lo que se busca cuando el árbol está muy expandido. Va como inset shadow y no
   como border-left para no desplazar 3px el contenido del encabezado. */
.ag-estructura-nodo--vacante > .acd-header {
    box-shadow: inset 3px 0 0 var(--ag-warning-strong);
}

/* Contadores del encabezado (áreas / puestos / usuarios / vacantes). */
.ag-estructura-resumen {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.ag-estructura-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px;
    border-radius: var(--ag-radius-sm);
    background: var(--ag-blue-150);
    border: 1px solid var(--ag-border);
    font-family: var(--ag-font-body); font-size: 12.5px;
    color: var(--ag-text-muted);
}
.ag-estructura-chip strong {
    font-family: var(--ag-font-head); font-size: 14px;
    color: var(--ag-text-primary);
}
.ag-estructura-chip--vacante {
    background: var(--ag-warning-bg);
    border-color: var(--ag-warning-border);
    color: var(--ag-warning-text);
}
.ag-estructura-chip--vacante strong { color: var(--ag-warning-dark); }
.ag-login-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    color: #001A3F;
    margin: 0 0 10px;
}
.ag-brand-img {
    width:40px
}