/*
 * Capa de diseño inspirada en Mantis / Gradient Able.
 * Se aplica SOLO dentro de .mantis-app (la plantilla Templates/Mantis), por lo que
 * no afecta ninguna vista del Intranet actual aunque se cargue en la misma página.
 * No reemplaza Bootstrap ni Metronic: solo los repinta, para que DataTables,
 * select2, toastr, SweetAlert y los plugins existentes sigan funcionando igual.
 */

.mantis-app {
    /*
     * Primary y accent los define el tema institucional (mantis-themes.css).
     * Los semanticos salen de la paleta de Metronic (assets/css/style.bundle.css),
     * que es la que ya usa todo el Intranet: .m--bg-success, .m--bg-danger, etc.
     * Cada tono derivado lleva un literal de respaldo y luego el color-mix,
     * asi el navegador que no soporte color-mix se queda con el literal.
     */
    --mn-primary: #716aca;
    --mn-success: #34bfa3;
    --mn-warning: #ffb822;
    --mn-danger: #f4516c;
    --mn-info: #36a3f7;
    --mn-metal: #c4c5d6;
    --mn-accent: #716aca;

    --mn-primary-hover: #5c55b8;
    --mn-primary-soft: #eeedf8;
    --mn-success-soft: #eaf8f5;
    --mn-warning-soft: #fff7e8;
    --mn-danger-soft: #fdedf0;
    --mn-info-soft: #ebf5fe;
    --mn-metal-soft: #f4f4f7;

    --mn-success-text: #1f8f79;
    --mn-warning-text: #b37c00;
    --mn-danger-text: #c62d47;
    --mn-info-text: #1f79c4;

    --mn-primary-hover: color-mix(in srgb, var(--mn-primary) 82%, #000);
    --mn-primary-soft: color-mix(in srgb, var(--mn-primary) 12%, #fff);
    --mn-success-soft: color-mix(in srgb, var(--mn-success) 14%, #fff);
    --mn-warning-soft: color-mix(in srgb, var(--mn-warning) 16%, #fff);
    --mn-danger-soft: color-mix(in srgb, var(--mn-danger) 12%, #fff);
    --mn-info-soft: color-mix(in srgb, var(--mn-info) 12%, #fff);
    --mn-metal-soft: color-mix(in srgb, var(--mn-metal) 25%, #fff);

    --mn-success-text: color-mix(in srgb, var(--mn-success) 78%, #000);
    --mn-warning-text: color-mix(in srgb, var(--mn-warning) 68%, #000);
    --mn-danger-text: color-mix(in srgb, var(--mn-danger) 82%, #000);
    --mn-info-text: color-mix(in srgb, var(--mn-info) 82%, #000);

    --mn-focus-ring: rgba(0, 0, 0, .10);
    --mn-focus-ring-danger: rgba(0, 0, 0, .10);
    --mn-focus-ring: color-mix(in srgb, var(--mn-primary) 22%, transparent);
    --mn-focus-ring-danger: color-mix(in srgb, var(--mn-danger) 22%, transparent);

    /* El sidebar es una version oscura del color de marca, no un gris generico */
    --mn-nav-bg: #0b5380;
    --mn-nav-caption: rgba(255, 255, 255, .6);
    --mn-nav-text: rgba(255, 255, 255, .92);
    --mn-nav-text-dim: rgba(255, 255, 255, .8);
    --mn-nav-hover: rgba(255, 255, 255, .1);
    --mn-nav-active: rgba(255, 255, 255, .16);
    --mn-nav-border: rgba(255, 255, 255, .13);
    /* Apenas mas profundo que la marca, como el sidebar del Intranet actual */
    --mn-nav-bg: color-mix(in srgb, var(--mn-primary) 92%, #000);
    --mn-nav-hover: color-mix(in srgb, #fff 10%, transparent);
    --mn-nav-active: color-mix(in srgb, #fff 16%, transparent);
    --mn-nav-border: color-mix(in srgb, #fff 13%, transparent);

    --mn-sidebar-current: var(--mn-sidebar-w);

    --mn-text: #262626;
    --mn-text-secondary: #8c8c8c;
    --mn-text-muted: #bfbfbf;
    --mn-border: #f0f0f0;
    --mn-border-strong: #d9d9d9;
    --mn-bg: #fafafb;
    --mn-surface: #ffffff;

    --mn-radius: 8px;
    --mn-radius-sm: 6px;
    --mn-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    --mn-shadow-lg: 0 6px 20px rgba(0, 0, 0, .08);

    --mn-sidebar-w: 296px;
    --mn-sidebar-w-rail: 88px;
    --mn-header-h: 78px;

    font-family: 'Inter', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    color: var(--mn-text);
    background: var(--mn-bg);
    -webkit-font-smoothing: antialiased;
}

.mantis-app *,
.mantis-app *::before,
.mantis-app *::after {
    box-sizing: border-box;
}

.mantis-app h1, .mantis-app h2, .mantis-app h3,
.mantis-app h4, .mantis-app h5, .mantis-app h6 {
    color: var(--mn-text);
    font-weight: 600;
    margin-top: 0;
}

.mantis-app h1 { font-size: 2rem; }
.mantis-app h2 { font-size: 1.625rem; }
.mantis-app h3 { font-size: 1.375rem; }
.mantis-app h4 { font-size: 1.25rem; }
.mantis-app h5 { font-size: 1.125rem; }
.mantis-app h6 { font-size: 1rem; }

.mantis-app a { color: var(--mn-primary); text-decoration: none; }
.mantis-app a:hover { color: var(--mn-primary-hover); text-decoration: none; }

.mn-text-secondary { color: var(--mn-text-secondary) !important; }
.mn-text-muted { color: var(--mn-text-muted) !important; }
.mn-fw-600 { font-weight: 600 !important; }

/* ---------------------------------------------------------------- Layout */

.mn-shell { min-height: 100vh; }

.mantis-app.is-collapsed { --mn-sidebar-current: var(--mn-sidebar-w-rail); }

/* El header arranca despues del sidebar: la marca vive dentro del sidebar */
.mn-header {
    position: fixed;
    top: 0; right: 0;
    left: var(--mn-sidebar-current);
    height: var(--mn-header-h);
    background: var(--mn-surface);
    border-bottom: 1px solid var(--mn-border);
    display: flex;
    align-items: center;
    padding: 0 22px;
    z-index: 1030;
    transition: left .22s ease;
}

.mn-header__toggle {
    border: 0;
    background: transparent;
    color: var(--mn-text-secondary);
    font-size: 1.5rem;
    width: 46px; height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mn-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.mn-header__toggle:hover { background: var(--mn-bg); color: var(--mn-primary); }
.mn-header__spacer { flex: 1; }
.mn-header__actions { display: flex; align-items: center; gap: 10px; }

/* Los .dropdown de Bootstrap son bloques: sin esto el boton inline-flex se
   apoya en la linea base y la campana queda mas alta que el perfil. */
.mn-header__actions > .dropdown { display: flex; align-items: center; }

.mn-icon-btn {
    position: relative;
    width: 50px; height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--mn-text-secondary);
    border-radius: 50%;
    font-size: 1.75rem;
    cursor: pointer;
}

.mn-icon-btn:hover { background: var(--mn-bg); color: var(--mn-primary); }

.mn-icon-btn__badge {
    position: absolute;
    top: 4px; right: 3px;
    min-width: 21px; height: 21px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--mn-danger);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 21px;
    text-align: center;
}

.mn-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 14px 5px 5px;
    border-radius: 28px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.mn-user:hover { background: var(--mn-bg); }
.mn-user__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; font-size: 1.125rem !important; }
.mn-user__text { display: flex; flex-direction: column; line-height: 1.25; }
.mn-user__name { font-weight: 600; font-size: 1rem; }
.mn-user__role { font-size: .8125rem; color: var(--mn-text-secondary); letter-spacing: .05em; text-transform: uppercase; }

.mantis-app .dropdown-menu {
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius);
    box-shadow: var(--mn-shadow-lg);
    padding: 6px;
    font-size: .9375rem;
    min-width: 230px;
}

.mantis-app .dropdown-item { border-radius: var(--mn-radius-sm); padding: 9px 12px; color: var(--mn-text); }
.mantis-app .dropdown-item:hover { background: var(--mn-primary-soft); color: var(--mn-primary); }
.mantis-app .dropdown-item--danger { color: var(--mn-danger); }
.mantis-app .dropdown-item--danger:hover { background: var(--mn-danger-soft); color: var(--mn-danger); }
.mantis-app .dropdown-divider { border-color: var(--mn-border); margin: 6px 0; }

/* Sidebar */

.mn-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--mn-sidebar-current);
    background: var(--mn-nav-bg);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width .22s ease, transform .22s ease;
    overflow: hidden;
    box-shadow: 1px 0 0 var(--mn-border), 2px 0 12px rgba(0, 0, 0, .04);
}

/* Marca dentro del sidebar, a la altura del header */
/* La cabecera va en blanco: separa la marca del menu y acompana al header */
.mn-sidebar__brand {
    height: var(--mn-header-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    background: var(--mn-surface);
    border-bottom: 1px solid var(--mn-border);
    border-right: 1px solid var(--mn-border);
    color: var(--mn-text);
    flex-shrink: 0;
}

.mn-sidebar__brand:hover { color: var(--mn-text); }

.mn-sidebar__logo {
    width: 58px; height: 58px;
    border-radius: 15px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.mn-sidebar__logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

.mn-sidebar__brand-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.mantis-app .mn-sidebar__brand-name { font-size: 1.375rem; font-weight: 700; color: var(--mn-text); }
.mantis-app .mn-sidebar__brand-meta { font-size: .9375rem; color: var(--mn-text-secondary); font-weight: 600; letter-spacing: .06em; }

.mn-sidebar__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 0 24px; }
.mn-sidebar__scroll::-webkit-scrollbar { width: 5px; }
.mn-sidebar__scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }

.mn-sidebar__caption {
    padding: 18px 22px 8px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--mn-nav-caption);
    text-transform: uppercase;
    white-space: nowrap;
}

.mn-sidebar__scroll > .mn-sidebar__caption:first-child { padding-top: 4px; }

.mn-sidebar__nav { list-style: none; margin: 0; padding: 0 12px; }

.mantis-app .mn-sidebar__link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 13px 16px;
    margin-bottom: 4px;
    border-radius: 10px;
    color: var(--mn-nav-text);
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.mantis-app .mn-sidebar__link i {
    font-size: 1.625rem;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
    color: inherit;
}

.mantis-app .mn-sidebar__link:hover { background: var(--mn-nav-hover); color: #fff; }

/*
 * El fondo del sidebar ya es el color de marca, asi que el item activo se
 * resuelve con un velo claro y el icono en el color de acento del tema.
 */
.mantis-app .mn-sidebar__link.is-active {
    background: var(--mn-nav-active);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

.mantis-app .mn-sidebar__link.is-active i { color: var(--mn-accent); }

.mn-sidebar__badge {
    margin-left: auto;
    background: var(--mn-accent);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 10px;
}

/* Indice de secciones de la pagina */
/* Mismo cuerpo, peso y padding que el menu principal: la jerarquia es de color */
.mantis-app .mn-sidebar__nav--index .mn-sidebar__link {
    padding: 13px 16px;
    margin-bottom: 4px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--mn-nav-text-dim);
}

.mantis-app .mn-sidebar__nav--index .mn-sidebar__link:hover { color: #fff; }
.mantis-app .mn-sidebar__nav--index .mn-sidebar__link i { font-size: 1.625rem; width: 26px; }
.mantis-app .mn-sidebar__nav--index .mn-sidebar__link.is-active { box-shadow: none; color: #fff; }

/* ------------------------------ Estado colapsado: riel de iconos ------- */

.mantis-app.is-collapsed .mn-sidebar__brand { padding: 0; justify-content: center; }
.mantis-app.is-collapsed .mn-sidebar__brand-text,
.mantis-app.is-collapsed .mn-sidebar__badge,
.mantis-app.is-collapsed .mn-sidebar__link span { display: none; }

.mantis-app.is-collapsed .mn-sidebar__caption {
    padding: 14px 0 6px;
    text-align: center;
    font-size: 0;
}

/* La leyenda se reduce a un separador para no perder la agrupacion */
.mantis-app.is-collapsed .mn-sidebar__caption::after {
    content: '';
    display: block;
    width: 26px; height: 1px;
    margin: 0 auto;
    background: var(--mn-nav-border);
}

.mantis-app.is-collapsed .mn-sidebar__nav { padding: 0 12px; }

.mantis-app.is-collapsed .mn-sidebar__link {
    justify-content: center;
    gap: 0;
    padding: 13px 0;
    width: 58px;
    margin-left: auto;
    margin-right: auto;
}

.mantis-app.is-collapsed .mn-sidebar__link i { font-size: 1.625rem; width: auto; }

.mn-main {
    margin-left: var(--mn-sidebar-current);
    padding: calc(var(--mn-header-h) + 26px) 26px 48px;
    transition: margin-left .22s ease;
}

@media (max-width: 991.98px) {
    .mn-sidebar { transform: translateX(-100%); width: var(--mn-sidebar-w); box-shadow: var(--mn-shadow-lg); }
    .mn-header { left: 0; }
    .mn-main { margin-left: 0; padding-left: 16px; padding-right: 16px; }

    .mantis-app.is-collapsed { --mn-sidebar-current: 0px; }
    .mantis-app.is-collapsed .mn-sidebar { transform: translateX(0); }
    .mantis-app.is-collapsed .mn-sidebar__brand { padding: 0 18px; justify-content: flex-start; }
    .mantis-app.is-collapsed .mn-sidebar__brand-text,
    .mantis-app.is-collapsed .mn-sidebar__link span { display: flex; }
    .mantis-app.is-collapsed .mn-sidebar__link { justify-content: flex-start; gap: 14px; padding: 11px 14px; width: auto; }
    .mantis-app.is-collapsed .mn-sidebar__caption { font-size: .625rem; text-align: left; padding: 18px 22px 8px; }
    .mantis-app.is-collapsed .mn-sidebar__caption::after { display: none; }
}

/* Encabezado de página */

.mn-page-head { margin-bottom: 20px; }
.mn-page-head h1 { margin-bottom: 4px; }

.mn-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0; padding: 0;
    font-size: .875rem;
    color: var(--mn-text-secondary);
}

.mn-breadcrumb li::after { content: '/'; margin-left: 8px; color: var(--mn-text-muted); }
.mn-breadcrumb li:last-child::after { content: ''; }
.mn-breadcrumb li:last-child { color: var(--mn-text); font-weight: 500; }

/* ----------------------------------------------------------------- Cards */

.mn-card {
    background: var(--mn-surface);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius);
    box-shadow: var(--mn-shadow);
    margin-bottom: 24px;
}

.mn-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--mn-border);
}

.mn-card__title { font-size: 1.125rem; font-weight: 600; margin: 0; }
.mn-card__subtitle { font-size: .875rem; color: var(--mn-text-secondary); margin: 3px 0 0; }
.mn-card__tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.mn-card__body { padding: 20px; }
.mn-card__foot { padding: 16px 20px; border-top: 1px solid var(--mn-border); }

/* Tarjeta de indicador */

.mn-stat { display: flex; flex-direction: column; gap: 10px; }
.mn-stat__label { font-size: .875rem; color: var(--mn-text-secondary); }
.mn-stat__value { font-size: 1.875rem; font-weight: 600; display: flex; align-items: center; gap: 12px; }

.mn-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8125rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
}

.mn-trend--up { background: var(--mn-primary-soft); color: var(--mn-primary); }
.mn-trend--down { background: var(--mn-warning-soft); color: var(--mn-warning-text); }

/* --------------------------------------------------------------- Botones */

.mantis-app .btn {
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 500;
    border-radius: var(--mn-radius-sm);
    padding: .55rem 1.1rem;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mantis-app .btn:focus, .mantis-app .btn.focus { box-shadow: 0 0 0 3px var(--mn-focus-ring); }
.mantis-app .btn-sm { padding: .35rem .75rem; font-size: .875rem; }
.mantis-app .btn-lg { padding: .7rem 1.5rem; font-size: 1.0625rem; }

.mantis-app .btn-primary { background: var(--mn-primary); border-color: var(--mn-primary); color: #fff; }
.mantis-app .btn-primary:hover { background: var(--mn-primary-hover); border-color: var(--mn-primary-hover); }

.mantis-app .btn-secondary {
    background: var(--mn-surface);
    border-color: var(--mn-border-strong);
    color: var(--mn-text);
}

.mantis-app .btn-secondary:hover { background: var(--mn-bg); border-color: var(--mn-primary); color: var(--mn-primary); }

.mantis-app .btn-success { background: var(--mn-success); border-color: var(--mn-success); color: #fff; }
.mantis-app .btn-warning { background: var(--mn-warning); border-color: var(--mn-warning); color: #fff; }
.mantis-app .btn-danger { background: var(--mn-danger); border-color: var(--mn-danger); color: #fff; }
.mantis-app .btn-info { background: var(--mn-info); border-color: var(--mn-info); color: #fff; }

.mantis-app .btn-outline-primary { border-color: var(--mn-primary); color: var(--mn-primary); background: transparent; }
.mantis-app .btn-outline-primary:hover { background: var(--mn-primary); color: #fff; }
.mantis-app .btn-outline-secondary { border-color: var(--mn-border-strong); color: var(--mn-text-secondary); background: transparent; }
.mantis-app .btn-outline-secondary:hover { background: var(--mn-bg); color: var(--mn-text); }
.mantis-app .btn-outline-danger { border-color: var(--mn-danger); color: var(--mn-danger); background: transparent; }
.mantis-app .btn-outline-danger:hover { background: var(--mn-danger); color: #fff; }

.mantis-app .btn-link { color: var(--mn-primary); border: 0; }
.mantis-app .btn[disabled], .mantis-app .btn.disabled { opacity: .5; }

.mn-btn-icon { width: 35px; height: 35px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* --------------------------------------------------------------- Badges */

.mantis-app .badge,
.mantis-app .m-badge {
    display: inline-flex;
    align-items: center;
    font-size: .8125rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 4px;
    line-height: 1.5;
}

.mn-badge--primary { background: var(--mn-primary-soft); color: var(--mn-primary); }
.mn-badge--success { background: var(--mn-success-soft); color: var(--mn-success-text); }
.mn-badge--warning { background: var(--mn-warning-soft); color: var(--mn-warning-text); }
.mn-badge--danger { background: var(--mn-danger-soft); color: var(--mn-danger-text); }
.mn-badge--info { background: var(--mn-info-soft); color: var(--mn-info-text); }
.mn-badge--metal { background: var(--mn-metal-soft); color: var(--mn-text-secondary); }

.mn-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mn-dot--success { background: var(--mn-success); }
.mn-dot--warning { background: var(--mn-warning); }
.mn-dot--danger { background: var(--mn-danger); }
.mn-dot--metal { background: var(--mn-metal); }

/* --------------------------------------------------------------- Alertas */

.mantis-app .alert {
    border: 1px solid transparent;
    border-radius: var(--mn-radius-sm);
    padding: 14px 18px;
    font-size: .9375rem;
}

.mantis-app .alert-primary { background: var(--mn-primary-soft); border-color: var(--mn-primary); color: var(--mn-primary-hover); }
.mantis-app .alert-success { background: var(--mn-success-soft); border-color: var(--mn-success); color: var(--mn-success-text); }
.mantis-app .alert-warning { background: var(--mn-warning-soft); border-color: var(--mn-warning); color: var(--mn-warning-text); }
.mantis-app .alert-danger { background: var(--mn-danger-soft); border-color: var(--mn-danger); color: var(--mn-danger-text); }
.mantis-app .alert-info { background: var(--mn-info-soft); border-color: var(--mn-info); color: var(--mn-info-text); }
.mantis-app .alert-secondary { background: #fafafa; border-color: var(--mn-border); color: var(--mn-text-secondary); }

/* ------------------------------------------------------------ Formularios */

.mantis-app label { font-size: .875rem; font-weight: 500; color: var(--mn-text); margin-bottom: 7px; }
.mantis-app .required-form-label::after { content: ' *'; color: var(--mn-danger); }

.mantis-app .form-control {
    height: auto;
    min-height: 42px;
    padding: .5rem .85rem;
    font-size: .9375rem;
    color: var(--mn-text);
    background: var(--mn-surface);
    border: 1px solid var(--mn-border-strong);
    border-radius: var(--mn-radius-sm);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mantis-app .form-control:focus {
    border-color: var(--mn-primary);
    box-shadow: 0 0 0 3px var(--mn-focus-ring);
}

/*
 * Un <select> nativo no recentra su texto cuando min-height estira la caja: la
 * linea se queda pegada al padding superior. Con altura fija y sin padding
 * vertical, el navegador centra la opcion por si mismo. Se excluyen los select
 * de lista (multiple/size) porque ahi la altura si depende del contenido.
 */
.mantis-app select.form-control:not([multiple]):not([size]) {
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
}

.mantis-app .form-control::placeholder { color: var(--mn-text-muted); }
.mantis-app .form-control[readonly], .mantis-app .form-control:disabled { background: #f5f5f5; }
.mantis-app textarea.form-control { min-height: 90px; }

.mantis-app .form-control.is-invalid,
.mantis-app .form-control.input-validation-error {
    border-color: var(--mn-danger);
}

.mantis-app .form-control.is-invalid:focus,
.mantis-app .form-control.input-validation-error:focus {
    box-shadow: 0 0 0 3px var(--mn-focus-ring-danger);
}

.mantis-app .field-validation-error,
.mantis-app .invalid-feedback {
    display: block;
    font-size: .75rem;
    color: var(--mn-danger);
    margin-top: 4px;
}

.mn-form-help { font-size: .8125rem; color: var(--mn-text-secondary); margin-top: 5px; }

.mantis-app .input-group-text {
    background: var(--mn-bg);
    border-color: var(--mn-border-strong);
    color: var(--mn-text-secondary);
    font-size: .9375rem;
}

/* select2 con la piel de Mantis */

.mantis-app .select2-container--default .select2-selection--single,
.mantis-app .select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border: 1px solid var(--mn-border-strong);
    border-radius: var(--mn-radius-sm);
}

/* El interior del select2 simple se define mas abajo, en "Select2 afinado" */

.mantis-app .select2-container--default.select2-container--focus .select2-selection--multiple,
.mantis-app .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--mn-primary);
    box-shadow: 0 0 0 3px var(--mn-focus-ring);
}

.select2-dropdown { border-color: var(--mn-border-strong); border-radius: var(--mn-radius-sm); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--mn-primary); }

/* Checkbox / radio / switch de Metronic */

.mantis-app .m-checkbox > span,
.mantis-app .m-radio > span { border-color: var(--mn-border-strong); border-width: 1px; }

.mantis-app .m-checkbox > input:checked ~ span,
.mantis-app .m-radio > input:checked ~ span { border-color: var(--mn-primary); background: var(--mn-primary); }

.mantis-app .m-checkbox > input:checked ~ span::after { border-color: #fff; }

/*
 * El punto del radio: Metronic le pone "border: solid #7281a4" sin ancho, o sea
 * ~3px de borde oscuro sobre un punto de 6px. Con solo cambiar el background
 * el borde seguia tapandolo, asi que se blanquea tambien y se agranda un poco.
 */
.mantis-app .m-radio > input:checked ~ span::after {
    background: #fff;
    border-color: #fff;
    border-width: 0;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    margin-top: -4px;
}
.mantis-app .m-switch.m-switch--outline.m-switch--primary input:checked ~ span::before { border-color: var(--mn-primary); background: var(--mn-primary-soft); }
.mantis-app .m-switch.m-switch--outline.m-switch--primary input:checked ~ span::after { background: var(--mn-primary); }

/* --------------------------------------------------------------- Tablas */

.mantis-app .table { color: var(--mn-text); font-size: .9375rem; margin-bottom: 0; }

.mantis-app .table thead th {
    background: #fafafa;
    border-top: 0;
    border-bottom: 1px solid var(--mn-border);
    color: var(--mn-text-secondary);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 14px 16px;
    white-space: nowrap;
}

.mantis-app .table tbody td { border-top: 1px solid var(--mn-border); padding: 14px 16px; vertical-align: middle; }
.mantis-app .table.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.mantis-app .table.table-hover tbody tr:hover { background: var(--mn-bg); }
.mantis-app .table-bordered, .mantis-app .table-bordered td, .mantis-app .table-bordered th { border-color: var(--mn-border); }

.mantis-app .dataTables_wrapper .dataTables_length,
.mantis-app .dataTables_wrapper .dataTables_filter,
.mantis-app .dataTables_wrapper .dataTables_info,
.mantis-app .dataTables_wrapper .dataTables_paginate { font-size: .8125rem; color: var(--mn-text-secondary); }

.mantis-app .dataTables_wrapper .paginate_button.current,
.mantis-app .page-item.active .page-link { background: var(--mn-primary) !important; border-color: var(--mn-primary) !important; color: #fff !important; }

.mantis-app .page-link { color: var(--mn-text-secondary); border-color: var(--mn-border); font-size: .8125rem; }
.mantis-app .page-link:hover { color: var(--mn-primary); background: var(--mn-primary-soft); }

/*
 * Loader "Cargando..." de DataTables.
 * El wrapper no trae position:relative, asi que el div absoluto se colgaba de
 * cualquier ancestro posicionado, y custom.css lo empuja con top:100% debajo de
 * la tabla. Aqui se ancla al wrapper y se centra ENCIMA de las filas.
 */
.mantis-app .dataTables_wrapper { position: relative; }

.mantis-app .dataTables_wrapper div.dataTables_processing {
    top: 50%;
    left: 50%;
    width: 230px;
    margin-left: -115px;
    margin-top: -28px;
    z-index: 20;
    padding: 14px 0;
    background: var(--mn-surface);
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    box-shadow: var(--mn-shadow-lg);
    color: var(--mn-text);
    font-size: .875rem;
}

/* El markup de custom.js trae un .m-blockui con estilos inline; aqui sobra su caja */
.mantis-app .dataTables_wrapper div.dataTables_processing .m-blockui {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0;
}

/* ----------------------------------------------------------------- Tabs */

.mantis-app .nav-tabs { border-bottom: 1px solid var(--mn-border); }

.mantis-app .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--mn-text-secondary);
    font-size: .9375rem;
    font-weight: 500;
    padding: 13px 20px;
}

.mantis-app .nav-tabs .nav-link:hover { color: var(--mn-primary); border-bottom-color: var(--mn-primary-soft); }
.mantis-app .nav-tabs .nav-link.active { color: var(--mn-primary); background: transparent; border-bottom-color: var(--mn-primary); }

.mantis-app .nav-pills .nav-link {
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--mn-radius-sm);
    color: var(--mn-text-secondary);
    font-size: .875rem;
    padding: 8px 16px;
    cursor: pointer;
}

.mantis-app .nav-pills .nav-link:hover { background: var(--mn-bg); color: var(--mn-text); }
.mantis-app .nav-pills .nav-link:focus { box-shadow: 0 0 0 3px var(--mn-focus-ring); outline: 0; }
.mantis-app .nav-pills .nav-link.active { background: var(--mn-primary); color: #fff; }

/* ------------------------------------------------------------- Acordeón */

.mn-accordion .card { border: 1px solid var(--mn-border); border-radius: var(--mn-radius-sm); margin-bottom: 8px; }
.mn-accordion .card-header { background: var(--mn-surface); border-bottom: 0; padding: 0; }

.mn-accordion .card-header button {
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--mn-text);
    background: transparent;
    border: 0;
}

.mn-accordion .card-body { padding: 0 20px 18px; font-size: .9375rem; color: var(--mn-text-secondary); }

/* --------------------------------------------------------------- Modales */

.mantis-app .modal-content,
.modal.mn-modal .modal-content {
    border: 0;
    border-radius: var(--mn-radius);
    box-shadow: var(--mn-shadow-lg);
}

.modal.mn-modal .modal-header { border-bottom: 1px solid var(--mn-border); padding: 18px 20px; }
.modal.mn-modal .modal-title { font-size: 1.125rem; font-weight: 600; }
.modal.mn-modal .modal-body { padding: 22px; font-size: .9375rem; }
.modal.mn-modal .modal-footer { border-top: 1px solid var(--mn-border); padding: 14px 20px; }

/* -------------------------------------------------------------- Progreso */

.mantis-app .progress { height: 8px; border-radius: 4px; background: #f0f0f0; }
.mantis-app .progress-bar { background: var(--mn-primary); border-radius: 4px; }
.mantis-app .progress-bar.bg-success { background: var(--mn-success) !important; }
.mantis-app .progress-bar.bg-warning { background: var(--mn-warning) !important; }
.mantis-app .progress-bar.bg-danger { background: var(--mn-danger) !important; }

/* ------------------------------------------------------------ Utilidades */

.mn-divider { height: 1px; background: var(--mn-border); margin: 24px 0; border: 0; }

.mn-swatch { border-radius: var(--mn-radius-sm); padding: 16px; color: #fff; font-size: .75rem; font-weight: 600; }
.mn-swatch small { display: block; font-weight: 400; opacity: .85; font-family: 'SFMono-Regular', Consolas, monospace; }
.mn-swatch--primary { background: var(--mn-primary); }
.mn-swatch--accent { background: var(--mn-accent); }
.mn-swatch--success { background: var(--mn-success); }
.mn-swatch--warning { background: var(--mn-warning); }
.mn-swatch--danger { background: var(--mn-danger); }
.mn-swatch--info { background: var(--mn-info); }
.mn-swatch--metal { background: var(--mn-metal); }
.mn-swatch--text { background: var(--mn-text); }

.mn-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.mn-avatar--sm { width: 28px; height: 28px; font-size: .7rem !important; }
.mn-avatar--lg { width: 48px; height: 48px; font-size: 1rem !important; }

/* Avatar por iniciales: el Intranet no tiene imagen de usuario por defecto */
.mn-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mn-primary-soft);
    color: var(--mn-primary);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.mn-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--mn-border); }
.mn-timeline li { position: relative; padding: 0 0 22px 18px; font-size: .9375rem; }

.mn-timeline li::before {
    content: '';
    position: absolute;
    left: -29px; top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--mn-surface);
    border: 2px solid var(--mn-primary);
}

.mn-code {
    display: block;
    background: #fafafa;
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius-sm);
    padding: 12px 14px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .8125rem;
    color: #cf1322;
    white-space: pre-wrap;
    word-break: break-word;
}

.mn-section-anchor { scroll-margin-top: calc(var(--mn-header-h) + 16px); }


/* ----------------------------------------------- Pickers, editor y upload */

.daterangepicker,
.bootstrap-timepicker-widget.dropdown-menu,
.datepicker.dropdown-menu {
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius);
    box-shadow: var(--mn-shadow-lg);
    font-family: 'Inter', sans-serif;
    font-size: .8125rem;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
    background: var(--mn-primary) !important;
    background-image: none !important;
    color: #fff !important;
}

.daterangepicker td.in-range { background: var(--mn-primary-soft); color: var(--mn-primary); }
.daterangepicker .ranges li.active { background: var(--mn-primary); }
.datepicker table tr td.today { background: var(--mn-primary-soft) !important; color: var(--mn-primary) !important; }
.daterangepicker .drp-buttons .btn { font-size: .8125rem; }

.mantis-app .datepicker-inline,
.mantis-app .datepicker-inline table { width: 100%; }

.mantis-app .note-editor.note-frame {
    border: 1px solid var(--mn-border-strong);
    border-radius: var(--mn-radius-sm);
    box-shadow: none;
    margin-bottom: 0;
}

.mantis-app .note-editor.note-frame .note-toolbar {
    background: #fafafa;
    border-bottom: 1px solid var(--mn-border);
    padding: 8px 10px;
}

.mantis-app .note-editor.note-frame .note-editing-area .note-editable { font-size: .875rem; color: var(--mn-text); }
.mantis-app .note-editor.note-frame .note-statusbar { background: #fafafa; border-top: 1px solid var(--mn-border); }

.mantis-app .bootstrap-touchspin .btn { border-color: var(--mn-border-strong); color: var(--mn-text-secondary); }
.mantis-app .bootstrap-touchspin .btn:hover { color: var(--mn-primary); border-color: var(--mn-primary); }

/* Highcharts y Google Charts heredan la tipografía de la plantilla */
.mantis-app .highcharts-container text { font-family: 'Inter', sans-serif !important; }


/* ------------------------------------------------- Correcciones de detalle */

/* KPIs: todas las tarjetas de una fila con la misma altura */
.mn-card--equal { height: calc(100% - 24px); display: flex; flex-direction: column; }
.mn-card--equal .mn-card__body { flex: 1; display: flex; flex-direction: column; }

.mn-stat { flex: 1; justify-content: space-between; }
.mn-stat__value { min-height: 34px; }

/* El pie ocupa siempre lo mismo, lleve texto o barra de progreso */
.mn-stat__foot {
    display: flex;
    align-items: center;
    min-height: 22px;
    font-size: .8125rem;
}

.mn-stat__foot .progress { display: block; width: 100%; }
.mn-stat__foot .progress-bar { display: block; height: 100%; }

/* Checkbox y radio de Metronic: caja y texto centrados entre sí */
/*
 * Metronic posiciona la caja en absoluto desde top:0, asi que al cambiar el
 * tamano de la fuente el texto deja de acompanarla. Aqui la caja pasa a ser
 * un hermano flex del texto: quedan centrados entre si siempre.
 */
.mantis-app .m-checkbox,
.mantis-app .m-radio {
    /* display:flex (no inline) para que cada opcion ocupe su propia linea */
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 28px;
    margin-bottom: 12px;
    padding-left: 0;
    width: fit-content;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--mn-text);
    cursor: pointer;
    /* Metronic desplaza el label 1-2px; con la caja ya centrada sobra */
    position: relative;
    top: 0;
}

.mantis-app .m-checkbox > span,
.mantis-app .m-radio > span {
    /* En el markup de Metronic el <span> va despues del texto: order lo trae adelante */
    order: -1;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 0;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.mantis-app .m-radio > span { border-radius: 50%; }

.mantis-app .m-checkbox > input,
.mantis-app .m-radio > input { position: absolute; opacity: 0; width: 0; height: 0; }

.mantis-app .m-checkbox:last-child,
.mantis-app .m-radio:last-child { margin-bottom: 0; }

/* Los pickers siempre por encima de modales y cards */
.datepicker.dropdown-menu, .daterangepicker, .bootstrap-timepicker-widget { z-index: 1080 !important; }

/* Contador numérico: un solo bloque continuo, sin bordes dobles ni saltos */
.mantis-app .bootstrap-touchspin {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    flex-wrap: nowrap;
}

.mantis-app .bootstrap-touchspin > * { margin: 0; display: flex; }

.mantis-app .bootstrap-touchspin .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    text-align: center;
}

.mantis-app .bootstrap-touchspin .btn {
    height: 42px;
    min-width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mn-border-strong);
    background: var(--mn-bg);
    color: var(--mn-text-secondary);
    border-radius: 0;
    font-size: 1.0625rem;
    line-height: 1;
}

.mantis-app .bootstrap-touchspin .btn:hover { background: var(--mn-primary-soft); color: var(--mn-primary); }

.mantis-app .bootstrap-touchspin .input-group-text {
    height: 42px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mn-border-strong);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: var(--mn-bg);
    color: var(--mn-text-secondary);
    padding: 0 12px;
    white-space: nowrap;
}

/* Solo los extremos llevan esquina redondeada */
.mantis-app .bootstrap-touchspin > :first-child .btn,
.mantis-app .bootstrap-touchspin > :first-child .input-group-text { border-radius: var(--mn-radius-sm) 0 0 var(--mn-radius-sm); }
.mantis-app .bootstrap-touchspin > :last-child .btn,
.mantis-app .bootstrap-touchspin > :last-child .input-group-text { border-radius: 0 var(--mn-radius-sm) var(--mn-radius-sm) 0; }

/* Summernote: el placeholder ya no se monta sobre la barra de herramientas */
.mantis-app .note-editor.note-frame .note-editing-area { position: relative; }

.mantis-app .note-editor.note-frame .note-editable {
    padding: 20px 18px;
    min-height: 190px;
    font-size: .9375rem;
    line-height: 1.6;
}

.mantis-app .note-editor.note-frame .note-placeholder {
    padding: 20px 18px;
    color: var(--mn-text-muted);
    font-size: .9375rem;
    line-height: 1.6;
    pointer-events: none;
}

.mantis-app .note-editor.note-frame .note-toolbar .btn { height: 30px; padding: 0 8px; }
.mantis-app .note-editor.note-frame .note-statusbar .note-resizebar { padding-top: 2px; }

/* Zona de carga propia: evita que el autodiscover de Dropzone la tome antes de tiempo */
.mantis-app .mn-dropzone {
    position: relative;
    min-height: 170px;
    border: 2px dashed var(--mn-border-strong);
    border-radius: var(--mn-radius-sm);
    background: #fafafa;
    padding: 20px;
    transition: border-color .15s ease, background-color .15s ease;
}

.mantis-app .mn-dropzone:hover { border-color: var(--mn-primary); background: var(--mn-primary-soft); }
.mantis-app .mn-dropzone .dz-message { color: var(--mn-text-secondary); font-size: .875rem; margin: 2.5em 0; text-align: center; }
.mantis-app .mn-dropzone .dz-preview .dz-image { border-radius: var(--mn-radius-sm); }
.mantis-app .mn-dropzone .dz-preview .dz-remove { color: var(--mn-danger); font-size: .75rem; }


/* -------------------------------------------------------- Select2 afinado */

/* 1. Misma altura para simple, multiple y remoto */
.mantis-app .select2-container--default .select2-selection--single,
.mantis-app .select2-container--default .select2-selection--multiple {
    position: relative;
    min-height: 42px;
    padding: 0;
}

/*
 * Simple: altura fija y line-height igual al alto interior (42 menos los 2px de
 * borde). Centrar por line-height no depende de flex ni del "line-height: 0"
 * que Metronic pone en el contenedor, asi que el texto queda centrado siempre.
 */
.mantis-app .select2-container--default .select2-selection--single {
    height: 42px;
    display: block;
}

.mantis-app .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 46px 0 12px;
    width: 100%;
    color: var(--mn-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Multiple: la altura si crece con los chips seleccionados */
.mantis-app .select2-container--default .select2-selection--multiple {
    height: auto;
    display: flex;
    align-items: center;
}

.mantis-app .select2-container--default .select2-selection--single .select2-selection__placeholder,
.mantis-app .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: var(--mn-text-muted);
}

/*
 * La flecha propia de select2 se posiciona con top/margin calculados para su
 * altura original de 26px y se descuadra al agrandar el control. En vez de
 * recalcular sus offsets, se oculta y se dibuja un chevron propio sobre el
 * contenedor, que se centra solo sea cual sea la altura.
 */
.mantis-app .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }

.mantis-app .select2-container--default .select2-selection--single::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--mn-text-secondary);
    border-bottom: 2px solid var(--mn-text-secondary);
    border-radius: 1px;
    transform: rotate(45deg);
    pointer-events: none;
    transition: transform .15s ease, margin-top .15s ease;
}

.mantis-app .select2-container--default.select2-container--open .select2-selection--single::after {
    margin-top: -2px;
    transform: rotate(-135deg);
    border-color: var(--mn-primary);
}

/* 3. La equis alineada con la flecha, no debajo */
.mantis-app .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--mn-text-muted);
}

.mantis-app .select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--mn-danger); }

/* 4. El placeholder del multiple con la misma sangría que el simple */
.mantis-app .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 4px 8px;
    margin: 0;
}

.mantis-app .select2-container--default .select2-selection--multiple .select2-search--inline { margin: 0; }

.mantis-app .select2-container--default .select2-selection--multiple .select2-search__field {
    margin: 0;
    padding-left: 4px;
    height: 30px;
    line-height: 30px;
    font-size: .9375rem;
}

.mantis-app .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0;
    padding: 3px 10px;
    background: var(--mn-primary-soft);
    border: 1px solid var(--mn-primary);
    border-radius: 4px;
    color: var(--mn-primary);
    font-size: .8125rem;
}

.mantis-app .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--mn-primary);
    margin-right: 6px;
    font-weight: 700;
}

/* 2. La opción resaltada necesita texto claro para no perderse */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] * {
    background: var(--mn-primary);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--mn-primary-soft);
    color: var(--mn-primary);
    font-weight: 600;
}

.select2-container--default .select2-results__option { padding: 10px 14px; font-size: .9375rem; }
.select2-container--default .select2-search--dropdown { padding: 8px; }

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--mn-border-strong);
    border-radius: var(--mn-radius-sm);
    padding: 7px 10px;
    font-size: .875rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--mn-primary);
    outline: 0;
}

/* Estado de error sobre el control de select2 */
.mantis-app .has-error .select2-container--default .select2-selection--single,
.mantis-app .has-error .select2-container--default .select2-selection--multiple {
    border-color: var(--mn-danger);
}

/* Mensajes de validación */
.mantis-app .field-validation-error {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: var(--mn-danger);
    margin-top: 6px;
}

.mantis-app .field-validation-error::before {
    content: '\26A0';
    font-size: .8125rem;
    line-height: 1;
}


/* --------------------------------------------------- Pie del DataTable */

/* La info y la paginacion van abajo: a la izquierda y a la derecha */
.mantis-app .mn-dt-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid var(--mn-border);
}

.mantis-app .mn-dt-foot .dataTables_info {
    padding: 0;
    font-size: .875rem;
    color: var(--mn-text-secondary);
}

.mantis-app .mn-dt-foot .dataTables_paginate { margin: 0; padding: 0; }
.mantis-app .mn-dt-foot .pagination { margin: 0; }

@media (max-width: 575.98px) {
    .mantis-app .mn-dt-foot { justify-content: center; }
}

/* Botonera de acciones de la fila */
.mantis-app .mn-row-actions { display: inline-flex; gap: 6px; white-space: nowrap; }
.mantis-app .mn-row-actions .btn { flex-shrink: 0; }

/*
 * El icono hereda el font-size de .btn-sm (.875rem) y en un boton de 38px se ve
 * pequeño. Aqui se agranda solo dentro de la botonera de fila, sin tocar el
 * tamaño del boton ni los iconos del resto del sistema.
 */
.mantis-app .mn-row-actions .btn > i { font-size: 1.125rem; line-height: 1; }


/* --------------------------------------------------------- Paginacion UI */

/* Los page-link son <button>: hay que neutralizar el estilo nativo */
.mantis-app .pagination .page-link {
    background: var(--mn-surface);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius-sm);
    margin: 0 3px;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    font-size: .875rem;
    line-height: 1;
    cursor: pointer;
}

.mantis-app .pagination .page-item.disabled .page-link {
    color: var(--mn-text-muted);
    background: var(--mn-bg);
    cursor: not-allowed;
}

.mantis-app .pagination .page-link:focus { box-shadow: 0 0 0 3px var(--mn-focus-ring); outline: 0; }

/* El acordeon crece para que la card empareje sin estirar el contenido */
.mn-card--equal .mn-card__body > :last-child { margin-bottom: 0; }


/* ------------------------------------------------- Zona de carga: mensaje */

.mantis-app .mn-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 210px;
    cursor: pointer;
}

/* El mensaje no debe robarle el cursor ni el clic a la zona */
.mantis-app .mn-dropzone .dz-message,
.mantis-app .mn-dropzone .dz-message * { cursor: pointer; }

/* Salvo las miniaturas ya cargadas, que tienen sus propias acciones */
.mantis-app .mn-dropzone.dz-started { cursor: default; }
.mantis-app .mn-dropzone .dz-preview { cursor: default; }
.mantis-app .mn-dropzone .dz-preview .dz-remove { cursor: pointer; }

.mantis-app .mn-dropzone .dz-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    text-align: center;
    color: var(--mn-text-secondary);
}

.mantis-app .mn-dropzone .dz-message i {
    font-size: 2.75rem;
    color: var(--mn-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.mantis-app .mn-dropzone .dz-message strong { font-size: 1rem; font-weight: 600; color: var(--mn-text); }
.mantis-app .mn-dropzone .dz-message span { font-size: .875rem; }
.mantis-app .mn-dropzone .dz-message small { font-size: .8125rem; color: var(--mn-text-muted); }

/* Si Dropzone igual genera su boton por defecto, que no rompa el diseno */
.mantis-app .mn-dropzone .dz-button {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Al soltar archivos el mensaje se corre arriba y deja lugar a las miniaturas */
.mantis-app .mn-dropzone.dz-started { align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; }
.mantis-app .mn-dropzone.dz-started .dz-message { display: none; }


/* ------------------------------------------------ Submenu y sub-submenu */

/* El disparador es un <button>: hay que neutralizar el estilo nativo */
.mantis-app .mn-sidebar__toggle {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.mantis-app .mn-sidebar__caret {
    margin-left: auto;
    font-size: 1rem !important;
    width: auto !important;
    transition: transform .2s ease;
    opacity: .7;
}

.mantis-app .mn-has-sub.is-open > .mn-sidebar__toggle > .mn-sidebar__caret { transform: rotate(90deg); }
.mantis-app .mn-has-sub.is-open > .mn-sidebar__toggle { color: #fff; }

/* El submenu se despliega con una guia vertical que marca el nivel */
.mantis-app .mn-sidebar__sub {
    list-style: none;
    margin: 2px 0 6px;
    padding: 0 0 0 26px;
    display: none;
    border-left: 1px solid var(--mn-nav-border);
    margin-left: 26px;
}

.mantis-app .mn-has-sub.is-open > .mn-sidebar__sub { display: block; }

.mantis-app .mn-sidebar__sub .mn-sidebar__link {
    padding: 9px 14px;
    font-size: .9375rem;
    font-weight: 400;
    color: var(--mn-nav-text-dim);
    gap: 11px;
}

.mantis-app .mn-sidebar__sub .mn-sidebar__link i { font-size: .875rem; width: 18px; }
.mantis-app .mn-sidebar__sub .mn-sidebar__link:hover { color: #fff; }

/* Tercer nivel: un escalon mas de sangria y tipografia */
.mantis-app .mn-sidebar__sub .mn-sidebar__sub { margin-left: 18px; padding-left: 18px; }
.mantis-app .mn-sidebar__sub .mn-sidebar__sub .mn-sidebar__link { font-size: .875rem; padding: 8px 14px; }

/* En el riel no hay lugar para desplegar: se ocultan los submenus */
.mantis-app.is-collapsed .mn-sidebar__sub { display: none !important; }
.mantis-app.is-collapsed .mn-sidebar__caret { display: none; }

/* ------------------------------------------------------- Notificaciones */

.mantis-app .mn-notifications {
    width: 380px;
    max-width: calc(100vw - 24px);
    padding: 0;
    overflow: hidden;
}

.mantis-app .mn-notifications__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mn-border);
}

.mantis-app .mn-notifications__head strong { font-size: .9375rem; }
.mantis-app .mn-notifications__head .btn-link { font-size: .8125rem; }

.mantis-app .mn-notifications__list { max-height: 380px; overflow-y: auto; }

.mantis-app .mn-notification {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mn-border);
}

.mantis-app .mn-notification:last-child { border-bottom: 0; }
.mantis-app .mn-notification.is-unread { background: var(--mn-primary-soft); }

.mantis-app .mn-notification__icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.mantis-app .mn-notification__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mantis-app .mn-notification__body strong { font-size: .875rem; font-weight: 600; }
.mantis-app .mn-notification__body span { font-size: .8125rem; color: var(--mn-text-secondary); }
.mantis-app .mn-notification__body small { font-size: .75rem; color: var(--mn-text-muted); }

.mantis-app .mn-notification__close {
    border: 0;
    background: transparent;
    color: var(--mn-text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease;
}

.mantis-app .mn-notification:hover .mn-notification__close { opacity: 1; }
.mantis-app .mn-notification__close:hover { background: var(--mn-danger-soft); color: var(--mn-danger); }

.mantis-app .mn-notifications__empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 38px 16px;
    color: var(--mn-text-muted);
    font-size: .875rem;
}

.mantis-app .mn-notifications__empty i { font-size: 2.25rem; }
.mantis-app .mn-notifications.is-empty .mn-notifications__list,
.mantis-app .mn-notifications.is-empty .mn-notifications__head .btn-link { display: none; }
.mantis-app .mn-notifications.is-empty .mn-notifications__empty { display: flex; }

/* El contador se esconde cuando no queda nada por leer */
.mn-icon-btn__badge.is-hidden { display: none; }

/* ------------------------------------------------- Radios dentro de .m-option
 *
 * .m-option es una tarjeta de Metronic que no tiene equivalente en Mantis, asi
 * que se conserva tal cual. Su radio, en cambio, va anidado y sin texto dentro
 * de .m-option__control, y el repintado de mas arriba (que vuelve .m-radio un
 * flex y saca el <span> del posicionamiento absoluto) le descuadra la tarjeta.
 * Aqui se le devuelve la geometria original de Metronic solo en ese contexto.
 */
.mantis-app .m-option .m-radio {
    display: inline-block;
    align-items: normal;
    gap: 0;
    min-height: 0;
    width: auto;
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 1rem;
}

.mantis-app .m-option .m-radio > span {
    order: 0;
    position: absolute;
    top: 1px;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0;
}

/* El punto interior vuelve a los 6px de Metronic, centrado sobre el circulo */
.mantis-app .m-option .m-radio > input:checked ~ span::after {
    width: 6px;
    height: 6px;
    margin-left: -3px;
    margin-top: -3px;
}

/* --------------------------------------- Pestañas en la cabecera de tarjeta
 *
 * .mn-card__tools es un item flex sin tope de encogido, asi que un <ul.nav-tabs>
 * dentro de la cabecera se comprime y hace wrap: las pestañas caen en rejilla y
 * el titulo se parte en varias lineas. Aqui la cabecera vuelve a ser una sola
 * fila. El borde inferior lo pone .mn-card__head, no el <ul>, para no duplicarlo.
 */
.mantis-app .mn-card__head > .mn-card__tools { flex-shrink: 0; }

.mantis-app .mn-card__head .nav-tabs {
    flex-wrap: nowrap;
    border-bottom: 0;
    margin-bottom: -18px;
    margin-top: -18px;
}

.mantis-app .mn-card__head .nav-tabs .nav-link {
    white-space: nowrap;
    padding: 13px 14px;
}

/* Ninguna imagen dentro de una tarjeta o un modal se sale de su contenedor */
.mantis-app .mn-card img,
.modal.mn-modal .modal-body img { max-width: 100%; height: auto; }