/*
 * Sistema visual FMA
 * Capa transversal sobre Velzon/Bootstrap. Las vistas antiguas heredan este
 * aspecto sin perder sus clases ni sus inicializadores JavaScript.
 */
:root {
    --fma-navy-950: #07172c;
    --fma-navy-900: #0c2340;
    --fma-navy-800: #12345b;
    --fma-blue-700: #1857a4;
    --fma-blue-600: #236bc2;
    --fma-blue-100: #e9f2ff;
    --fma-cyan-500: #22a6b3;
    --fma-amber-500: #f2a43a;
    --fma-surface: #ffffff;
    --fma-surface-soft: #f6f8fc;
    --fma-canvas: #eef3f9;
    --fma-border: #dce5f0;
    --fma-text: #17253a;
    --fma-muted: #65758b;
    --fma-success: #16856b;
    --fma-danger: #c6424f;
    --fma-radius-sm: 9px;
    --fma-radius: 14px;
    --fma-radius-lg: 20px;
    --fma-shadow-sm: 0 1px 2px rgba(7, 23, 44, .04), 0 6px 18px rgba(7, 23, 44, .05);
    --fma-shadow: 0 12px 32px rgba(7, 23, 44, .09);
    --vz-primary: var(--fma-blue-600);
    --vz-primary-rgb: 35, 107, 194;
    --vz-body-bg: var(--fma-canvas);
    --vz-body-color: var(--fma-text);
    --vz-border-color: var(--fma-border);
    --vz-vertical-menu-width: 278px;
    --vz-vertical-menu-bg-dark: var(--fma-navy-900);
}

html,
body {
    min-height: 100%;
    background: var(--fma-canvas);
}

body {
    color: var(--fma-text);
    font-size: .925rem;
    letter-spacing: -.005em;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 96% 0, rgba(35, 107, 194, .09), transparent 28rem),
        radial-gradient(circle at 4% 100%, rgba(34, 166, 179, .07), transparent 24rem);
}

a {
    color: var(--fma-blue-700);
}

a:hover {
    color: var(--fma-navy-800);
}

/* Estructura */
.main-content {
    min-height: calc(100vh - 70px);
}

.page-content {
    padding: 86px 1.35rem 72px;
}

.page-content > .container-fluid {
    max-width: 1680px;
    margin-inline: auto;
}

/* Las vistas antiguas reservaban una franja superior para títulos y migas
   de pan. La navegación actual ya aporta ese contexto y el espacio se elimina. */
.page-content .page-title-box,
.page-content > .container-fluid > .row:has(.page-title-box),
.page-content > .container-fluid > .row:first-child.mb-4:has(h1, h2):not(:has(form, .card, .alert, table, input, button, select, textarea)) {
    display: none !important;
}

#page-topbar {
    height: 72px;
    border-bottom: 1px solid rgba(220, 229, 240, .9);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 4px 20px rgba(7, 23, 44, .045);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.navbar-header {
    height: 72px;
}

.header-item,
.topbar-user .btn {
    border-radius: 12px;
}

.topbar-user {
    border-radius: 14px;
    background: var(--fma-surface-soft);
}

.header-profile-user {
    padding: 3px;
    border: 1px solid var(--fma-border);
    background: var(--fma-surface);
}

.user-name-text {
    color: var(--fma-text) !important;
}

.dropdown-menu {
    padding: .55rem;
    border: 1px solid var(--fma-border);
    border-radius: 14px;
    box-shadow: var(--fma-shadow);
}

.dropdown-item {
    padding: .65rem .75rem;
    border-radius: 9px;
}

/* Navegación lateral */
html[data-layout="vertical"][data-sidebar="dark"] .app-menu.navbar-menu {
    border: 0;
    background:
        radial-gradient(circle at 15% -8%, rgba(51, 133, 225, .34), transparent 17rem),
        linear-gradient(180deg, var(--fma-navy-900) 0%, var(--fma-navy-950) 100%);
    box-shadow: 12px 0 34px rgba(7, 23, 44, .13);
}

@media (min-width: 768px) {
    html[data-layout="vertical"][data-sidebar-size="lg"] .navbar-menu {
        width: 278px;
    }

    html[data-layout="vertical"][data-sidebar-size="lg"] .main-content {
        margin-left: 278px;
    }

    html[data-layout="vertical"][data-sidebar-size="lg"] #page-topbar {
        left: 278px;
    }

    html[data-layout="vertical"][data-sidebar-size="lg"] .footer {
        left: 278px;
    }
}

.navbar-brand-box {
    height: 92px;
    padding: 12px 19px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: transparent;
}

.fma-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    color: #fff;
}

.fma-brand:hover {
    color: #fff;
}

.fma-brand__mark {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 60px;
    place-items: center;
}

.fma-brand__mark img {
    max-width: 42px;
    max-height: 56px;
    object-fit: contain;
}

.fma-brand__copy {
    min-width: 0;
    line-height: 1.12;
}

.fma-brand__copy strong,
.fma-brand__copy small {
    display: block;
}

.fma-brand__copy strong {
    font-size: .94rem;
    font-weight: 750;
    letter-spacing: -.01em;
}

.fma-brand__copy small {
    margin-top: 5px;
    color: rgba(255, 255, 255, .62);
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.navbar-menu #scrollbar {
    height: calc(100vh - 92px);
}

.navbar-menu .navbar-nav {
    padding: 10px 11px 28px;
}

.navbar-menu .fma-menu-context {
    margin: 4px 5px 12px;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .055);
}

.fma-menu-context__eyebrow {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .48);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.fma-menu-context strong {
    color: #fff;
    font-size: .84rem;
}

.navbar-menu .menu-title.fma-menu-title {
    margin: 14px 10px 5px;
    padding: 0;
    color: rgba(255, 255, 255, .42) !important;
    font-size: .64rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.navbar-menu .navbar-nav .nav-link.menu-link {
    position: relative;
    min-height: 42px;
    margin: 2px 0;
    padding: .66rem .8rem;
    border-radius: 11px;
    color: rgba(237, 244, 255, .74);
    font-size: .855rem;
    transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.navbar-menu .navbar-nav .nav-link.menu-link i {
    width: 23px;
    margin-right: 9px;
    color: rgba(156, 199, 251, .76);
    font-size: 1.08rem;
}

.navbar-menu .navbar-nav .nav-link.menu-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .075);
    transform: translateX(2px);
}

.navbar-menu .navbar-nav .nav-link.menu-link.active {
    color: #fff;
    background: linear-gradient(100deg, rgba(47, 128, 237, .34), rgba(34, 166, 179, .15));
    box-shadow: inset 3px 0 0 #69b7ff;
}

.navbar-menu .navbar-nav .nav-link.menu-link.active i {
    color: #8fd0ff;
}

.navbar-menu .navbar-nav .nav-link.menu-link.active::after {
    position: absolute;
    right: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #82d7de;
    content: "";
}

/* Estado compacto del menú lateral */
@media (min-width: 768px) {
    html[data-layout="vertical"][data-sidebar-size="sm"] {
        min-height: 100% !important;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .app-menu.navbar-menu {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 70px !important;
        height: 100vh !important;
        min-height: 0;
        padding: 72px 0 0;
        overflow: hidden;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-brand-box {
        top: 0;
        width: 70px;
        height: 72px;
        padding: 7px 8px !important;
        background: var(--fma-navy-900);
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .fma-brand {
        justify-content: center;
        gap: 0;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .fma-brand__mark {
        flex-basis: 42px;
        width: 42px;
        height: 56px;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .fma-brand__mark img {
        max-width: 34px;
        max-height: 50px;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .fma-brand__copy,
    html[data-layout="vertical"][data-sidebar-size="sm"] .fma-menu-context,
    html[data-layout="vertical"][data-sidebar-size="sm"] .fma-menu-title {
        display: none !important;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu #scrollbar {
        height: calc(100vh - 72px) !important;
        overflow: hidden;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .simplebar-mask,
    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .simplebar-content-wrapper {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav {
        align-items: center;
        padding: 5px 8px 18px;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav > .nav-item {
        width: 100%;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-link.menu-link,
    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item:hover > .nav-link.menu-link {
        position: relative;
        justify-content: center;
        width: 52px !important;
        min-width: 52px;
        min-height: 46px;
        margin: 3px auto;
        padding: 0 !important;
        overflow: hidden;
        border-radius: 12px;
        transform: none;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-link.menu-link span,
    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item:hover > .nav-link.menu-link span {
        display: none !important;
        padding: 0;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-link.menu-link i {
        width: auto;
        margin: 0 !important;
        font-size: 1.22rem;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-link.menu-link.active::after {
        display: none;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] .main-content {
        margin-left: 70px;
    }

    html[data-layout="vertical"][data-sidebar-size="sm"] #page-topbar,
    html[data-layout="vertical"][data-sidebar-size="sm"] .footer {
        left: 70px;
    }
}

/* Cabeceras de página */
.page-title-box {
    min-height: 64px;
    margin: 0 0 1.15rem;
    padding: 0;
    border-bottom: 0;
}

.page-title-box h4,
.page-content h1,
.page-content h2 {
    color: var(--fma-navy-900);
    font-weight: 750;
    letter-spacing: -.025em;
}

.page-title-box h4 {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.breadcrumb {
    margin-bottom: 0;
    padding: .42rem .7rem;
    border: 1px solid var(--fma-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
}

/* Superficies */
.card {
    border: 1px solid rgba(210, 222, 235, .9);
    border-radius: var(--fma-radius-lg);
    background: var(--fma-surface);
    box-shadow: var(--fma-shadow-sm);
}

.card-animate {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card-animate:hover {
    border-color: #bfd3e9;
    box-shadow: var(--fma-shadow);
    transform: translateY(-3px);
}

.card-header {
    min-height: 58px;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--fma-border);
    border-radius: var(--fma-radius-lg) var(--fma-radius-lg) 0 0 !important;
    background: var(--fma-surface) !important;
    color: var(--fma-text) !important;
}

.card-header.bg-primary {
    border-bottom-color: rgba(255, 255, 255, .16);
    background: linear-gradient(110deg, var(--fma-navy-800), var(--fma-blue-700)) !important;
    color: #fff !important;
}

.card-header.bg-primary :is(h1, h2, h3, h4, h5, h6, span, label) {
    color: inherit !important;
}

.card-title {
    color: inherit;
    font-weight: 700;
    letter-spacing: -.012em;
}

.card-body {
    padding: 1.15rem;
}

.fma-stat-card .card-body {
    padding: 1.25rem;
}

.fma-stat-card__icon {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    place-items: center;
    color: var(--fma-blue-700);
    background: var(--fma-blue-100);
    font-size: 1.35rem;
}

.fma-stat-card__value {
    color: var(--fma-navy-900);
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
}

.fma-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3.25rem);
    border: 0;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(109, 205, 226, .28), transparent 17rem),
        linear-gradient(125deg, var(--fma-navy-950), var(--fma-blue-700));
    box-shadow: 0 22px 55px rgba(12, 35, 64, .2);
}

.fma-hero::after {
    position: absolute;
    right: -70px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    content: "";
}

.fma-hero > * {
    position: relative;
    z-index: 1;
}

.fma-hero h1,
.fma-hero h2,
.fma-hero p {
    color: inherit;
}

.fma-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    padding: .38rem .7rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .08);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.fma-quick-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--fma-border);
    border-radius: 15px;
    color: var(--fma-text);
    background: var(--fma-surface);
    box-shadow: 0 5px 14px rgba(7, 23, 44, .04);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.fma-quick-link:hover {
    border-color: #b8cde4;
    color: var(--fma-navy-900);
    box-shadow: var(--fma-shadow-sm);
    transform: translateY(-2px);
}

.fma-quick-link i {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    place-items: center;
    color: var(--fma-blue-700);
    background: var(--fma-blue-100);
    font-size: 1.15rem;
}

.fma-quick-link strong,
.fma-quick-link small {
    display: block;
}

.fma-quick-link small {
    margin-top: 2px;
    color: var(--fma-muted);
}

/* Formularios */
.form-label {
    margin-bottom: .42rem;
    color: #34445a;
    font-size: .82rem;
    font-weight: 650;
}

.form-control,
.form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border: 1px solid #cad7e5;
    border-radius: var(--fma-radius-sm);
    color: var(--fma-text);
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(7, 23, 44, .025);
}

.form-control,
.form-select {
    padding: .56rem .75rem;
}

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #70a8e6;
    box-shadow: 0 0 0 3px rgba(35, 107, 194, .12);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: #6b7789;
    background-color: #edf2f7;
}

.form-text {
    color: var(--fma-muted);
    font-size: .76rem;
}

.form-check-input {
    border-color: #b8c8da;
}

.form-switch .form-check-input {
    width: 2.4em;
    height: 1.25em;
}

.input-group-text {
    border-color: #cad7e5;
    color: var(--fma-muted);
    background: #f4f7fb;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: .37rem .75rem;
    line-height: 1.7;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 8px;
    right: 8px;
}

.select2-dropdown {
    overflow: hidden;
    border-color: #cad7e5;
    border-radius: 10px;
    box-shadow: var(--fma-shadow);
}

/* Botones, estados y avisos */
.btn {
    min-height: 38px;
    border-radius: 10px;
    font-weight: 650;
    letter-spacing: -.006em;
    box-shadow: none;
}

.btn-sm {
    min-height: 32px;
    border-radius: 8px;
}

.btn-primary {
    border-color: var(--fma-blue-600);
    background: var(--fma-blue-600);
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--fma-blue-700);
    background: var(--fma-blue-700);
}

.btn-success {
    border-color: var(--fma-success);
    background: var(--fma-success);
}

.btn-outline-primary {
    border-color: #aac5e4;
    color: var(--fma-blue-700);
}

.btn-outline-primary:hover {
    border-color: var(--fma-blue-600);
    background: var(--fma-blue-600);
}

.badge {
    padding: .42em .68em;
    border-radius: 999px;
    font-weight: 650;
    letter-spacing: .01em;
}

.alert {
    border-width: 1px;
    border-radius: 13px;
    box-shadow: 0 4px 14px rgba(7, 23, 44, .035);
}

.nav-tabs {
    gap: .35rem;
    padding: .35rem;
    border: 1px solid var(--fma-border);
    border-radius: 13px;
    background: #edf2f8;
}

.nav-tabs .nav-link {
    border: 0;
    border-radius: 9px;
    color: var(--fma-muted);
    font-weight: 650;
}

.nav-tabs .nav-link.active {
    color: var(--fma-navy-900);
    background: #fff;
    box-shadow: 0 2px 7px rgba(7, 23, 44, .08);
}

/* Tablas y DataTables */
.table {
    --vz-table-color: var(--fma-text);
    --vz-table-border-color: #e2e9f1;
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: .76rem .72rem;
    vertical-align: middle;
}

.table > thead > tr > th,
.table thead.table-primary th,
.table thead tr.table-primary th,
.table > thead > tr.table-primary > * {
    border-top: 0;
    border-bottom: 1px solid #ccd9e7;
    color: #3b4d64;
    background: #edf3fa !important;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.table > tbody > tr {
    transition: background-color .13s ease;
}

.table-hover > tbody > tr:hover > *,
.table-striped > tbody > tr:nth-of-type(odd):hover > * {
    background-color: #f0f6fc;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --vz-table-accent-bg: #fafbfd;
}

.table-bordered > :not(caption) > * {
    border-color: #e2e9f1;
}

table:not(.dataTable) thead th {
    cursor: pointer;
    user-select: none;
}

table:not(.dataTable) thead th::after {
    margin-left: .38rem;
    color: #9aa9bb;
    content: "\2195";
    font-size: .72rem;
}

table:not(.dataTable) thead th[aria-sort="ascending"]::after {
    color: var(--fma-blue-700);
    content: "\2191";
}

table:not(.dataTable) thead th[aria-sort="descending"]::after {
    color: var(--fma-blue-700);
    content: "\2193";
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    min-height: 38px;
    margin: 0 .35rem;
    border: 1px solid #cad7e5;
    border-radius: 9px;
    background: #fff;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: #70a8e6;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(35, 107, 194, .12);
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.page-link {
    margin: 0 2px;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--fma-muted) !important;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.page-item.active .page-link {
    color: #fff !important;
    background: var(--fma-blue-600) !important;
    box-shadow: 0 4px 10px rgba(35, 107, 194, .2);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--fma-muted) !important;
    font-size: .8rem;
}

/* Modales */
.modal-content {
    overflow: hidden;
    border: 1px solid rgba(220, 229, 240, .8);
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(7, 23, 44, .26);
}

.modal-header {
    min-height: 64px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--fma-border);
    color: var(--fma-text);
    background: #fff;
}

.modal-header.bg-primary {
    border: 0;
    color: #fff;
    background: linear-gradient(110deg, var(--fma-navy-800), var(--fma-blue-700)) !important;
}

.modal-header.bg-primary .modal-title,
.modal-header.bg-primary .btn-close {
    color: #fff;
}

.modal-body {
    padding: 1.25rem;
    background: #f8fafc;
}

.modal-footer {
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--fma-border);
    background: #fff;
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 2rem);
}

.modal-dialog-scrollable .modal-body,
.modal.show .modal-body {
    overscroll-behavior: contain;
}

/* Perfil personal */
.fma-page-eyebrow {
    display: block;
    margin-bottom: .32rem;
    color: var(--fma-blue-700);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.fma-profile-form {
    padding-bottom: 1rem;
}

.fma-profile-summary {
    overflow: hidden;
}

.fma-profile-summary__cover {
    height: 118px;
    background:
        radial-gradient(circle at 80% 18%, rgba(103, 198, 222, .42), transparent 9rem),
        linear-gradient(120deg, var(--fma-navy-900), var(--fma-blue-700));
}

.fma-profile-summary .card-body {
    position: relative;
    margin-top: -66px;
    padding: 0 1.35rem 1.35rem;
}

.fma-profile-avatar-wrap {
    position: relative;
    display: inline-block;
}

.fma-profile-avatar {
    display: block;
    width: 132px;
    height: 132px;
    padding: 5px;
    border: 1px solid #d5e1ee;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 12px 32px rgba(7, 23, 44, .18);
}

.fma-profile-avatar--logo {
    padding: 12px;
    object-fit: contain;
}

.fma-profile-avatar-action {
    position: absolute;
    right: 2px;
    bottom: 7px;
    display: grid;
    width: 36px;
    height: 36px;
    border: 3px solid #fff;
    border-radius: 50%;
    place-items: center;
    color: #fff;
    background: var(--fma-blue-600);
    box-shadow: 0 5px 14px rgba(7, 23, 44, .18);
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease;
}

.fma-profile-avatar-action:hover {
    background: var(--fma-blue-700);
    transform: translateY(-1px);
}

.fma-profile-role {
    border: 1px solid #c9ddf4;
    color: var(--fma-blue-700);
    background: var(--fma-blue-100);
}

.fma-profile-meta {
    overflow: hidden;
    border: 1px solid var(--fma-border);
    border-radius: 14px;
    background: var(--fma-surface-soft);
}

.fma-profile-meta__item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem .95rem;
}

.fma-profile-meta__item + .fma-profile-meta__item {
    border-top: 1px solid var(--fma-border);
}

.fma-profile-meta__item > i {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    place-items: center;
    color: var(--fma-blue-700);
    background: var(--fma-blue-100);
    font-size: 1rem;
}

.fma-profile-meta__item span,
.fma-profile-meta__item small,
.fma-profile-meta__item strong {
    display: block;
    min-width: 0;
}

.fma-profile-meta__item small {
    margin-bottom: 2px;
    color: var(--fma-muted);
    font-size: .7rem;
}

.fma-profile-meta__item strong {
    overflow: hidden;
    color: var(--fma-text);
    font-size: .87rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fma-profile-image-field .form-control {
    font-size: .8rem;
}

.fma-profile-details .card-header {
    padding-block: 1rem;
}

.fma-section-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    place-items: center;
    color: var(--fma-blue-700);
    background: var(--fma-blue-100);
    font-size: 1.15rem;
}

.fma-section-icon--warning {
    color: #9a5d12;
    background: #fff1d8;
}

.fma-profile-actions {
    min-height: 70px;
    padding: .85rem 1.15rem;
    border-top: 1px solid var(--fma-border);
    border-radius: 0 0 var(--fma-radius-lg) var(--fma-radius-lg);
    background: #f8fafc;
}

/* Botones de documentos: button y enlace comparten exactamente la misma caja. */
.player-document-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    line-height: 1;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .fma-profile-summary {
        position: sticky;
        top: 96px;
    }
}

@media (max-width: 575.98px) {
    .fma-profile-summary__cover {
        height: 102px;
    }

    .fma-profile-avatar {
        width: 116px;
        height: 116px;
    }

    .fma-profile-summary .card-body {
        margin-top: -58px;
        padding-inline: 1rem;
    }

    .fma-profile-actions .btn {
        width: 100%;
    }
}

/* Pie y utilidades */
.footer {
    border-top: 1px solid var(--fma-border);
    color: var(--fma-muted);
    background: rgba(255, 255, 255, .72);
}

#back-to-top {
    border: 0;
    border-radius: 12px;
    background: var(--fma-navy-800);
    box-shadow: var(--fma-shadow);
}

:focus-visible {
    outline: 3px solid rgba(35, 107, 194, .28) !important;
    outline-offset: 2px;
}

/* Autenticación */
body.fma-auth-page {
    background: var(--fma-navy-950);
}

.fma-auth-page .auth-page-wrapper {
    background: linear-gradient(135deg, var(--fma-navy-950), var(--fma-navy-800)) !important;
}

.fma-auth-page .auth-one-bg-position {
    filter: saturate(.8);
}

.fma-auth-page .bg-overlay {
    background: linear-gradient(125deg, rgba(7, 23, 44, .95), rgba(18, 52, 91, .76)) !important;
    opacity: 1;
}

.fma-auth-page .auth-page-content .card {
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 22px;
    box-shadow: 0 28px 75px rgba(0, 0, 0, .28);
}

.fma-auth-page .header-text {
    max-width: 560px;
    margin: 1rem auto;
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    text-shadow: none;
}

.fma-auth-page .form-control {
    border: 1px solid #cad7e5;
    border-radius: 10px;
}

.fma-auth-page .btn-success:hover {
    transform: translateY(-1px);
}

.fma-auth-page .btn-success {
    border-color: var(--fma-blue-600) !important;
    background: var(--fma-blue-600) !important;
}

.fma-auth-page .btn-success:hover,
.fma-auth-page .btn-success:focus {
    border-color: var(--fma-blue-700) !important;
    background: var(--fma-blue-700) !important;
}

.fma-auth-page .footer {
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .72);
    background: var(--fma-navy-950);
}

.fma-auth-page .footer p {
    color: inherit;
}

@media (max-width: 991.98px) {
    :root {
        --vz-vertical-menu-width: 278px;
    }

    .page-content {
        padding: 84px .85rem 68px;
    }

    .navbar-brand-box {
        height: 72px;
    }

    .navbar-menu #scrollbar {
        height: calc(100vh - 72px);
    }
}

@media (max-width: 575.98px) {
    .page-content {
        padding-inline: .5rem;
    }

    .page-title-box {
        align-items: flex-start !important;
        gap: .65rem;
    }

    .breadcrumb {
        display: none;
    }

    .card {
        border-radius: 15px;
    }

    .card-header {
        border-radius: 15px 15px 0 0 !important;
    }

    .card-body,
    .modal-body {
        padding: .9rem;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        width: 100%;
        margin-bottom: .65rem;
        text-align: left;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: calc(100% - 4.5rem);
    }

    .fma-hero {
        padding: 1.4rem;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Acciones compactas y alineadas en las tablas de gestión. */
.fma-table-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: .28rem;
    white-space: nowrap;
    vertical-align: middle;
}

.fma-table-actions form {
    display: inline-flex !important;
    align-items: center;
    margin: 0;
}

.fma-table-actions .btn,
.fma-table-actions > a {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.fma-table-actions i {
    margin: 0 !important;
    line-height: 1;
}

/* ============================================================================
   Unificación de diálogos y cabeceras
   ----------------------------------------------------------------------------
   Las vistas se escribieron con las variantes de color de Bootstrap: 82
   cabeceras de modal y 130 pies usan bg-info, frente a una sola cabecera con
   bg-primary. Aquí arriba solo había reglas para bg-primary, así que casi
   ningún diálogo recibía el estilo nuevo y seguían viéndose en cian plano.

   Se unifican todas las variantes neutras con el mismo degradado azul marino de
   la barra superior y de las plantillas de correo, y se conservan en color solo
   las que comunican algo: verde para confirmaciones, rojo para acciones
   destructivas y ámbar para avisos.
   ============================================================================ */

.modal-header.bg-info,
.modal-header.bg-secondary,
.modal-header.bg-dark,
.card-header.bg-info,
.card-header.bg-secondary,
.card-header.bg-dark {
    border: 0;
    color: #fff !important;
    background: linear-gradient(110deg, var(--fma-navy-800), var(--fma-blue-700)) !important;
}

.modal-header.bg-success,
.card-header.bg-success {
    border: 0;
    color: #fff !important;
    background: linear-gradient(110deg, #0f6b57, var(--fma-success)) !important;
}

.modal-header.bg-danger,
.card-header.bg-danger {
    border: 0;
    color: #fff !important;
    background: linear-gradient(110deg, #9d2f3b, var(--fma-danger)) !important;
}

.modal-header.bg-warning,
.card-header.bg-warning {
    border: 0;
    color: #40260a !important;
    background: linear-gradient(110deg, #f7bd63, var(--fma-amber-500)) !important;
}

/* bg-light es una cabecera clara: se deja en blanco, con el texto oscuro. */
.modal-header.bg-light {
    color: var(--fma-text) !important;
    background: #fff !important;
}

.modal-header:is(.bg-info, .bg-secondary, .bg-dark, .bg-success, .bg-danger) :is(.modal-title, h1, h2, h3, h4, h5, h6, span, label),
.card-header:is(.bg-info, .bg-secondary, .bg-dark, .bg-success, .bg-danger) :is(.card-title, h1, h2, h3, h4, h5, h6, span, label) {
    color: #fff !important;
}

.modal-header.bg-warning :is(.modal-title, h1, h2, h3, h4, h5, h6, span, label) {
    color: #40260a !important;
}

/* Aspa de cierre legible sobre cabecera oscura, la marquen o no con
   btn-close-white en la vista. */
.modal-header:is(.bg-info, .bg-secondary, .bg-dark, .bg-primary, .bg-success, .bg-danger) .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .8;
}

.modal-header:is(.bg-info, .bg-secondary, .bg-dark, .bg-primary, .bg-success, .bg-danger) .btn-close:hover {
    opacity: 1;
}

/* Los pies de color son lo que más envejece el diálogo. Se neutralizan, y con
   ellos los botones que se habían pensado para fondo coloreado. */
.modal-footer[class*="bg-"] {
    color: var(--fma-text) !important;
    background: #fff !important;
    border-top: 1px solid var(--fma-border);
}

/* Varias vistas traen pb-0 para pegar los botones al borde de color. Sin ese
   color, el pie necesita su espacio. */
.modal-footer.pb-0 {
    padding-bottom: .85rem !important;
}

.modal-footer .btn-light,
.modal-footer .btn-outline-light {
    color: var(--fma-text);
    background: #fff;
    border: 1px solid var(--fma-border);
}

.modal-footer .btn-light:hover,
.modal-footer .btn-outline-light:hover,
.modal-footer .btn-light:focus-visible,
.modal-footer .btn-outline-light:focus-visible {
    color: var(--fma-navy-800);
    background: var(--fma-surface-soft);
    border-color: #c4d3e6;
}

/* La acción principal del diálogo se escribió como btn-light porque destacaba
   sobre el pie de color. Sobre blanco necesita el tratamiento de botón
   primario para no confundirse con el de cerrar. */
.modal-footer button[type="submit"].btn-light,
.modal-footer input[type="submit"].btn-light {
    color: #fff;
    border: 0;
    background: linear-gradient(110deg, var(--fma-navy-800), var(--fma-blue-700));
    box-shadow: var(--fma-shadow-sm);
}

.modal-footer button[type="submit"].btn-light:hover,
.modal-footer input[type="submit"].btn-light:hover {
    color: #fff;
    background: linear-gradient(110deg, var(--fma-navy-900), var(--fma-blue-600));
}

/* Etiquetas de formulario dentro de los diálogos, con el mismo tono que el
   resto de la aplicación. */
.modal-body .form-label {
    color: var(--fma-muted);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .02em;
    margin-bottom: .32rem;
}

.modal-body .form-control:disabled,
.modal-body .form-control[readonly] {
    color: var(--fma-muted);
    background: #eef2f7;
}

/* Actas: filas compactas.
   En estas pantallas cada fila lleva un boton o un desplegable, y la altura
   minima que traen por defecto (38 px el boton, 42 px el campo) estiraba cada
   fila hasta cerca de 50 px. Aqui interesa ver muchos jugadores de una vez.
   El selector empieza por «table» para ganarle al <style> que cada vista del
   acta trae dentro, que fija el relleno de las celdas en 5 px. */
table#customerTable1 .btn,
table#customerTable2 .btn,
table#customerTable3 .btn,
table#customerTable4 .btn,
table#customerTable6 .btn,
table#customerTable7 .btn {
    min-height: 0;
    padding: .2rem .55rem;
    border-radius: 7px;
    line-height: 1.45;
}

table#customerTable1 .form-select,
table#customerTable1 .form-control,
table#customerTable2 .form-select,
table#customerTable3 .form-select,
table#customerTable3 .form-control,
table#customerTable4 .form-select,
table#customerTable6 .form-select,
table#customerTable7 .form-select {
    min-height: 0;
    height: auto;
    padding: .12rem 1.6rem .12rem .45rem;
    line-height: 1.45;
    background-position: right .4rem center;
}

table#customerTable1 > :not(caption) > * > *,
table#customerTable2 > :not(caption) > * > *,
table#customerTable3 > :not(caption) > * > *,
table#customerTable4 > :not(caption) > * > *,
table#customerTable6 > :not(caption) > * > *,
table#customerTable7 > :not(caption) > * > * {
    padding: .22rem .4rem;
}

table#customerTable1 .player-form,
table#customerTable2 .player-form,
table#customerTable3 .player-form,
table#customerTable4 .player-form,
table#customerTable6 .player-form,
table#customerTable7 .player-form {
    margin: 0;
}

/* DataTables dentro de un modal: pie sin solapamientos.
   El proyecto cargaba dos versiones de DataTables a la vez y la antigua, que
   maqueta el pie con «float», ganaba a la nueva. Retirada la duplicada, esto
   queda como defensa: en un modal no hay ancho para poner el recuento y la
   paginacion en la misma linea, asi que se apilan. */
/* La ventana «Ascender jugador» ya no muestra el recuento (info: false).
   Esto queda para cualquier otra tabla dentro de un modal que si lo muestre. */
.modal .dataTables_wrapper .dataTables_info,
.modal .dataTables_wrapper .dataTables_paginate {
    float: none;
    width: 100%;
    margin: 0;
    padding-top: .35rem;
    text-align: center;
}

.modal .dataTables_wrapper .dataTables_paginate {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding-top: .5rem;
}

.modal .dataTables_wrapper .dataTables_length,
.modal .dataTables_wrapper .dataTables_filter {
    float: none;
    display: inline-block;
    text-align: left;
}

.modal .dataTables_wrapper .dataTables_filter {
    float: right;
}

/* Con muchas paginas, la lista de numeros no debe desbordar el modal. */
.modal .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: .25rem .55rem;
    line-height: 1.3;
}

/* Las dos tablas de «Ascender jugador» viven dentro de una ventana estrecha.
   La clase «nowrap» de DataTables obliga a una sola linea por celda, y con
   nombres largos la tabla se salia y aparecia una barra de desplazamiento
   lateral. Aqui interesa mas que quepa que que no parta el nombre. */
table#customerTable6,
table#customerTable7,
table#customerTable6 th,
table#customerTable6 td,
table#customerTable7 th,
table#customerTable7 td {
    white-space: normal;
}

.modal .dataTables_wrapper {
    overflow-x: visible;
}