/**********************************************/
/*** NUEVOS ESTILOS SDWEB CORPORATE MANAGER ***/
/**********************************************/

/* Poppins, todos los pesos */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;700;800;900&display=swap');

/** NUEVAS VARIABLES **/
:root {
    /* Colores */
    --primario:#3d2a55; /* Violeta profesional sobrio — paleta Xogos do Eixo Atlántico 2026 */
        --primario-rgb: 61, 42, 85;
    --primario-dark: #251635; /* 50% + oscuro */
    --primario-medio: #574174; /* tamén usado para hover do sidebar */
    --primario-medio-link: #6a559b;
    --primario-light: #998fad; /* 50% + claro — gris-violeta desaturado */
    --primario-lighter: #d4d0dc; /* 80% + claro — neutro, sen tinte rosa */
    --primario-extra-light: #ededf0; /* 90% + claro — case neutro */
    --primario-highlight: #b0a6bf; /* hover sobre branco — desaturado para evitar rosa */
    --primario-highlight-medio: #cfc8d8;
    --primario-highlight-light:#e8e3ee;
    --primario-accent: #6a557a;
    --secundario: #deb64a; /* Dourado do logo V */
        --secundario-rgb: 222, 182, 74;
    --secundario-dark: #7d6116; /*50% + oscuro */
    --secundario-medio: #e6c877; /* 25% +  claro */
    --secundario-light: #eedaa4; /* 50% + claro */
    --secundario-extra-light:#fbf7ec; /* 90% + claro */
    --gris-oscuro: #666666;
    --gris-claro: #c3d3e2;
    --danger: #dd141b;
    --danger-dark: #6e090d; /* 50% + oscuro */
    --success: #78c842;
    --success-light: #bbe3a0; /* 50% + claro */
    --success-dark: #3b671d; /* 50% + oscuro */
    --progress: #fe5b48;
    --progress-dark: #a21100; /* 50% + oscuro */

    /* Tipografía */
    --font-family: 'Poppins', Arial, Helvetica, sans-serif;
    --icono-ff: FontAwesome;

    /* Tamaños de fuente */
    --min-vw:360;
    --max-vw:1920;
    --fs-scale: 1.2;
    --body-min-fs: 14;
    --body-max-fs: 16;
    --body-fs: calc((var(--body-min-fs) * 1px) + (var(--body-max-fs) - var(--body-min-fs)) * ((100vw - (var(--min-vw) * 1px)) / (var(--max-vw) - var(--min-vw))));
    --h6-fs: calc(var(--body-fs) * var(--fs-scale));
    --h5-fs: calc(var(--h6-fs) * var(--fs-scale));
    --h4-fs: calc(var(--h5-fs) * var(--fs-scale));
    --h3-fs: calc(var(--h4-fs) * var(--fs-scale));
    --h2-fs: calc(var(--h3-fs) * var(--fs-scale));
    --h1-fs: calc(var(--h2-fs) * var(--fs-scale));
    --small-fs: calc(var(--body-fs) * 0.9);

    /* Layouts */
    --header-height: 67px;
    --sidebar-left-w: 250px;

    /* Clamps */
    --120-60: clamp(60px, 50.307px + 2.6923vw, 120px);
    --90-45: clamp(45px, 34.626px + 2.8841vw, 90px);
    --80-60: clamp(60px, 55.384px + 1.2821vw, 80px);
    --80-40: clamp(40px, 30.77px + 2.5641vw, 80px);
    --60-30: clamp(30px, 23.077px + 1.9231vw, 60px);
    --50-25: clamp(25px, 19.24px + 1.6021vw, 50px);
    --40-20: clamp(20px, 15.384px + 1.2821vw, 40px);
    --40-30: clamp(30px, 27.693px + 0.641vw, 40px);
    --30-15: clamp(15px, 11.549px + 0.9610vw, 30px);
    --30-20: clamp(20px, 17.693px + 0.641vw, 30px);
    --20-10: clamp(10px, 7.693px + 0.6410vw, 20px) ;
    --24-18: clamp(18px, 16.616px + 0.3846vw, 24px);
    --15-10: clamp(10px, 8.845px + 0.3210vw, 15px);
    --10-5: clamp(5px, 3.856px + 0.3200vw, 10px);

    /* Radius */
    --form-radius: 5px;
    --btn-radius: 4px;
    --container-radius: 16px;
    --full-radius: 100vmax;

    /* Transitions */
    --tr00: all 0s linear;
    --tr02: all 0.2s ease-in-out;
    --tr04: all 0.4s ease-in-out;

    /* Sombras */
    --shadow-avatar: 3px 3px 5px 0px #999999;
    --shadow-dropdown: 2px 2px 4px 0px var(--primario-dark);
    --shadow-dropdown-before: 2px 1px 4px var(--primario-dark);
    --shadow-form-group: 2px 3px 6px 3px var(--primario-lighter);
    --shadow-modal-content: 4px 4px 12px #000000;

    /* Formularios */
    --form-item-min-width: 450px;
}

/** GENERALIDADES **/

/* Tipografía*/
body {
    font-family: var(--font-family);
    font-size: var(--body-fs);
    line-height: 1.2;
    background: #ffffff;

    /* Quito el overlay "modal-backdrop" */
    &.modal-open {

        .modal-backdrop.fade.in {
            display: none;
        }
    }
}

h6, .h6 {
    font-size: var(--h6-fs);
}
h5, .h5 {
    font-size: var(--h5-fs);
}
h4, .h4 {
    font-size: var(--h4-fs);
}
h3, .h3 {
    font-size: var(--h3-fs);
}
h2, .h2 {
    font-size: var(--h2-fs);
}
h1, .h1 {
    font-size: var(--h1-fs);
}
small, .small {
    font-size: var(--small-fs);
}

a {
    transition: var(--tr04);
}
a:hover {
    transition: var(--tr04);
}

/* Iconos */
.glyphicon {

    /* Sí */
    &.glyphicon-ok-circle {
        background-image: url('../images/icono_check_circulo.svg');
    }

    /* No */
    .glyphicon-ban-circle {
        background-image: url('../images/icono_prohibido.svg');
    }

    &.glyphicon-download-alt {
        font-size: 0;
        background-image: url('../images/icono_descarga_prim.svg');
        width: 32px;
        height: 32px;
        margin-left: var(--10-5);
        padding: 0;
        line-height: 1;
        background-color: #fff;
        color: var(--primario);
        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
        background-size: var(--h5-fs);
        background-repeat: no-repeat;
        background-position: top 3px center;
        border-radius: 3px;
        transition: var(--tr04);

        &:hover {
            background-color: var(--primario-highlight) !important;
            color: var(--primario-dark) !important;
            box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
        }
    }
}

/* Botones */
.btn, .btn[class*="btn-"], button#marcar-todos, button#crear-clases-button, button#crear-festivo-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 30px;
    padding: calc(var(--10-5) * 0.33) var(--10-5);
    border-radius: var(--btn-radius);
    color: var(--primario)!important;
    font-size: var(--body-fs);
    border: 1px solid var(--primario);
    transition: var(--tr02)!important;
    background-color: var(--primario-extra-light);
    letter-spacing: 1px;

    &.disabled {
        opacity: 0.5;
    }
}

button#calendar_schedule_save.btn[class*="btn-"] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 30px;
    padding: calc(var(--10-5) * 0.33) var(--10-5);
    border-radius: var(--btn-radius)!important;
    color: var(--primario)!important;
    font-size: var(--body-fs);
    border: 1px solid var(--primario)!important;
    transition: var(--tr02)!important;
    background-color: var(--primario-extra-light)!important;
    letter-spacing: 1px;

    &.disabled {
        opacity: 0.5;
    }
}
:is(.btn:is(.btn-primary, .btn-info, .btn-default), button#marcar-todos, button#calendar_schedule_save):is(:hover, :active, :focus, [aria-expanded="true"]) {
    box-shadow: none;
    background-color: var(--primario-highlight)!important;
    border-color: var(--primario-dark)!important;
    color: var(--primario) !important;
}
/* :is(.btn-success:not(.modal-ayuda), button#crear-clases-button, button#crear-festivo-button):is(:hover, :active, :focus) {
    background-color: var(--success)!important;
    border-color: var(--success-dark)!important;
    color: var(--primario);
} */
.btn-danger:is(:hover, :active, :focus) {
    background-color: var(--danger)!important;
    border-color: var(--danger-dark)!important;
    color: white!important;
}
.panel-footer .btn-group .btn + .float-left .btn {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn.dropdown-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    .caret {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--body-fs);
        height: var(--body-fs);
        border: none;
        color: inherit;
        transition: var(--tr04);

        &:after {
            content: '\f107';
            font-family: var(--icono-ff);
            font-size: inherit;
            font-weight: 900;
            color: inherit;
        }
    }

    &[aria-expanded="true"] {
        .caret {
            &:after {
                content: '\f106';
            }
        }
    }
}

/* Lista desplegable dropdown menú */
.dropdown .dropdown-menu, .btn-group .dropdown-menu  {
    height: 0;
    width: fit-content;
    top: calc(100% + 12px);
    right: 0;
    left: 0!important;
    margin: 0 auto;
    padding: 0;
    border: none;
    border-radius: var(--container-radius)!important;
    box-shadow: var(--shadow-dropdown);
    overflow: hidden;
    z-index: 1001;

    &:not(.dropdown-user) {
        min-width: 100%;
        max-width: 100%;
        left: 0;
    }

    &:before {
        display: none;
    }

    li {
        border: none;
        font-size: calc(var(--small-fs) - 2px);

        &:first-child {
            border-top-left-radius: var(--container-radius);
            border-top-right-radius: var(--container-radius);
            position: relative;

            &:before {
                --size: 16px;
                content: '';
                width: var(--size);
                height:var(--size);
                display: block;
                background-color: white;
                position: absolute;
                top: calc(var(--size) * -0.5);
                left: 0;
                right: 0;
                margin-inline: auto;
                transform: rotate(45deg);
                box-shadow: var(--shadow-dropdown-before);
            }

            a {
                position: relative;
                white-space: normal;
                border-top-left-radius: var(--container-radius)!important;
                border-top-right-radius: var(--container-radius)!important;
            }
        }

        &:last-child {
            border-bottom-left-radius: var(--container-radius);
            border-bottom-right-radius: var(--container-radius);

            a {
                border-bottom-left-radius: var(--container-radius)!important;
                border-bottom-right-radius: var(--container-radius)!important;
            }
        }

        a {
            padding: var(--10-5) var(--20-10);
            font-size: inherit;
            border-radius: 0 !important;
            color: var(--primario);
            background-color: white!important;
            transition: var(--tr04);
            white-space: normal;

            &:hover {
                background-color: var(--primario-highlight);
            }

            &:focus {
                background-color: white;
            }
        }
    }

    /* Menú de usuario */
    &.dropdown-user {

        li {

            a {
                display: flex;
                align-items: center;
                gap: 5px;
                white-space: nowrap;

                i.fa {
                    --size: var(--body-fs);
                    width: var(--size);
                    height: var(--size);
                    font-size: 0;
                    color: inherit;
                    margin: 0;
                    background-size: cover;
                    transition: var(--tr00);

                    /* Datos usuario */
                    a[href*="profile"] & {
                        background-image: url('../images/datos_usuario.svg');
                    }

                    /* Editar datos usuario */
                    a[href*="usuarios/edit"] & {
                        background-image: url('../images/datos_usuario.svg');
                    }

                    /* cambiar contraseña */
                    a[href*="change-password"] & {
                        background-image: url('../images/change_pass.svg');
                    }

                    /* salir */
                    a[href*="logout"] & {
                        background-image: url('../images/exit.svg');
                    }
                }
            }
        }
    }
}
.open .dropdown-menu {
    height: fit-content;
    overflow: visible;
}

/** ELEMENTOS DE FORMULARIOS  **/

/* Labels */
label {
    font-size: var(--body-fs);
    color: var(--primario);
    line-height: 1.4;
    font-weight: 500;

    &.control-label {
        margin-bottom: 4px;
        white-space: nowrap;

        &:empty {
            margin: 0;
        }
    }

    /* requeridos */
    &.marcado-obligatorio {
        display: flex;
        overflow: hidden;
        text-indent: -10px;
        margin-left: 10px;

        &:before {
            content: '*';
            position: absolute;
            margin-right: 10px;
            color: var(--danger);
            font-size: var(--body-fs);
            font-weight: 500;
        }
    }
}

/* Checkboxes */
.button-checkbox {
    display: none!important;
}

/* Inputs text, e-mail, number */
.input-group {
    display: flex;
}
input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea.form-control {
    float: none;
    width: 100%;
    padding: calc(var(--10-5) * 0.33) var(--10-5)!important;
    border-radius: var(--form-radius);
    color: var(--primario);
    font-size: var(--body-fs);
    border: 1px solid var(--primario);
    transition: var(--tr02);

    &::placeholder {
        color: var(--primario);
        opacity: 0.66;
    }

    &::-webkit-inner-spin-button {
        appearance: none;
    }

    &::-webkit-outer-spin-button {
        appearance: none;
    }

    &:focus {
        border-color: var(--primario-accent);
        box-shadow: 0 0 6px 2px var(--primario-accent);
    }

    ~ .input-group-addon {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        padding: calc(var(--10-5) * 0.33) var(--10-5);
        border: 1px solid var(--primario);
        border-left: none;
        border-radius: 0 var(--form-radius) var(--form-radius) 0;
        font-size: var(--body-fs);
        font-weight: 500;
        color: var(--primario);
        background-color: var(--primario-extra-light);
        transition: var(--tr02);
    }
}

/* Input Color */
label[for*="color"] {
    --size: calc(var(--body-fs) * 1.2);
    padding-left: var(--size);

    &:after {
        content: '';
        width: var(--size);
        height: var(--size);
        aspect-ratio: 1 / 1;
        float: left;
        margin-right: 5px;
        border-radius: var(--form-radius);
        background-image: url(../images/colores.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        left: 0;
        position: absolute;
    }
}
input[type="color"] {
    border: 1px solid var(--primario);
    width: auto;
    height: 34px;
    background-color: #e9e9e9;
    color: var(--primario);
    aspect-ratio: 2 / 1;
    cursor: pointer;
    transition: var(--tr04);
    float: none;

    &:hover {
        background-color: var(--primario-highlight);
    }
}
input[type="color"]::-webkit-color-swatch, input[type="color"]::-moz-color-swatch {
	width: 20px;
    height: 20px;
    border: 1px solid var(--primario);
    border-radius: var(--form-radius);
}

/* Inputs file */
input[type="file"] {
    &::file-selector-button {
        height: 34px;
        margin-right: var(--15-10);
        padding: calc(var(--10-5) * 0.33) var(--10-5) calc(var(--10-5) * 0.33) calc(var(--10-5) * 2 + var(--h6-fs));
        border-radius: var(--form-radius);
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: 1;
        transition: var(--tr02);
        cursor: pointer;
        background-image: url(../images/file_upload.svg);
        background-size: var(--h5-fs);
        background-repeat: no-repeat;
        background-position: var(--10-5) center;
        border: none;
        background-color: var(--primario-highlight-light);
        box-shadow: 3px 3px 5px 0px #999, #D6D6E7 0 -3px 0 inset;
        margin-left: 5px;
        margin-bottom: 10px;
    }

    &:hover::file-selector-button  {
        background-color: var(--primario-highlight);
        border-color: var(--primario-dark);
        transition: var(--tr02);
    }
}

/* Div Añadir adjunto */
#button-add-adjunt {
    height: 34px;
    padding: calc(var(--10-5) * 0.33) var(--10-5) calc(var(--10-5) * 0.33) calc(var(--10-5) * 2 + var(--h6-fs));
    font-size: inherit;
    background-image: url(../images/add_file_upload.svg);
    background-size: var(--h5-fs);
    background-repeat: no-repeat;
    background-position: var(--10-5) center;
    background-color: #e9e9ed;

    &:is(:hover, :active:hover) {
        background-color: var(--primario-highlight);
        border-color: var(--primario);
        color: var(--primario);
    }
}

/* Inputs checkbox y radio */
input[type="checkbox"], input[type="radio"] {
    --check-size: 16px;
    --color: var(--primario-highlight);
    --color-dark: var(--primario-medio-link);
    display: block !important;
    accent-color: var(--color, var(--secundario));
    cursor: pointer;
    float: none !important;
    width: var(--check-size, 16px);
    height: var(--check-size, 16px);
    margin: 0;
    border-radius: 4px;

    &:checked {
        /* --check-size: 12px;
        margin: 2px; */
        box-shadow: 0 0 0px 2px var(--color-dark, var(--secundario-dark));
    }
}

/* Select */
select, select.form-control {
    height: 30px;
    padding: calc(var(--10-5) * 0.33) var(--10-5);
    border-radius: var(--form-radius);
    border: 1px solid var(--primario);
    color: var(--primario);
    font-size: var(--body-fs);
    font-weight: 400;
    letter-spacing: 1px;
    text-align: center;
    background-color: var(--primario-extra-light);
    cursor: pointer;
    transition: var(--tr02);

    &:hover, &:focus {
        background-color: var(--primario-lighter);
        border-color: var(--primario-dark);
    }
}

/* Select 2 (custom select) */
span.select2.select2-container {
    width: 100% !important;

    .selection {
        width: 100% !important;
    }
}
.select2-container  {
    /* width: 100%; */

    .select2-selection {
        display: flex;
        align-items: center;
        height: 34px;
        padding: calc(var(--10-5) * 0.33) var(--10-5);
        border-radius: var(--form-radius);
        color: var(--primario);
        font-size: var(--body-fs);
        border: 1px solid var(--primario);
        transition: var(--tr02);

        .select2-selection__rendered {
            display: block;
            height: auto;
            width: calc(100% - 20px);
            padding: 0;
            color: var(--primario);
            line-height: 1;
            /* overflow: auto; */

            > .select2-search {
                max-width: 100%;

                * {
                    max-width: 100%;
                }
                input.select2-search__field {
                    margin-top: 0;
                    min-width: max-content!important;
                    max-width: 100%;
                }
            }

            .select2-selection__clear {
                order: 2;
                margin-inline: auto 0;
                margin-block: auto;
                font-size: var(--h6-fs);

                &:hover {
                    color: var(--danger);
                }
            }

            .select2-selection__choice {
                margin-top: auto;
                padding: 2px 6px;
                border: 1px solid var(--primario-lighter);
                border-radius: var(--form-radius);
                font-size: var(--small-fs);
                background-color: var(--primario-extra-light);
                color: var(--primario-medio);

                .select2-selection__choice__remove {
                    color: inherit;

                    &:hover {
                        color: var(--danger);
                    }
                }
            }
        }

        .select2-selection__placeholder {
            color: rgba(var(--primario-rgb), 0.66);
        }

        .select2-selection__arrow {
            right: var(--10-5);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;

            b {
                display: none;
            }

            &:before {
                content: '\f107';
                margin-top: -2px;
                color: var(--primario);
                transition: var(--tr04);
                font-size: var(--h6-fs);
                font-family: var(--icono-ff);
                font-weight: bold;
            }
        }

        &[aria-expanded="true"] {
            border-color: var(--primario-accent);
            box-shadow: 0 0 6px 2px var(--primario-accent);

            .select2-selection__arrow {

                &:before {
                    transform: rotate(180deg);
                }
            }
        }

        /* selección múltiple */
        &.select2-selection--multiple {
            height: fit-content;

            ul.select2-selection__rendered {
                position: relative;
                flex-wrap: wrap;
                overflow: hidden;
                width: 100%;
                height: fit-content;
                padding-right: 16px;

                .select2-selection__clear {
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }
        }
    }

    &.select2-container--disabled {
        .select2-selection--single {
            background-color: rgba(var(--primario-rgb), 0.06);
            cursor: not-allowed;
        }
    }
}

/* Select2 desplegado */
.select2-container--open .select2-dropdown {
    margin-top: var(--form-radius);
    border: 1px solid var(--primario) !important;
    border-radius: var(--form-radius) !important;
    box-shadow: var(--shadow-dropdown);

    .select2-results__option {

        &:hover, &.select2-results__option--highlighted {
            background-color: var(--primario-highlight);
            color: var(--primario);
        }

        &[aria-selected="true"] {
            background-color: var(--primario-lighter);
            color: var(--primario-medio);

            &:hover, &.select2-results__option--highlighted {
                background-color: var(--primario-highlight);
                color: var(--primario);
            }
        }
    }
}

/* Calendarios en inputs de fecha datetimepicker */
.datetimepicker {

    .datetimepicker-days {

        table {
            --day-w: 40px;
            position: relative;

            thead {

                tr {

                    &:first-of-type {
                        position: absolute;
                        top: 0;
                        width: 100%;
                        display: flex;
                    }

                    &:nth-of-type(2) {
                        border-top: 25px solid transparent;

                        th {
                            width: var(--day-w);
                            max-width: var(--day-w);
                        }
                    }
                }
            }

            tbody {

                tr {

                    td {
                        width: var(--day-w);
                        max-width: var(--day-w);
                    }
                }
            }
        }
    }
}

/* Texto ayuda */
.texto-ayuda {
    width: 100%;
    margin: var(--10-5) 0;
    font-size: calc(var(--small-fs) - 2px);
    font-style: oblique;
    color: var(--primario-medio);
}

/* Eliminar archivo */
.sdweb-eliminar-archivo {

    .row {
        display: flex;
        margin-block: var(--20-10) var(--10-5);
        gap: var(--10-5);

        &:before, &:after {
            display: none;
        }

        > * {
            flex-basis: fit-content;
            display: flex;
            align-items: stretch;
            padding: 0;
        }

        label {
            margin-bottom: 0;
            line-height: 1.2;
        }
    }
}

/* Padding de subida de archivos */
[class*="vich"] [class*="col"] {
    padding-inline: 0;
}
.vich-image {
    display: flex;
    flex-direction: column;

    > a:not(:has(img)) {
        display: flex;
        align-items: center;
        width: calc(100% + 10px);
        height: 100%;
        background-color: var(--primario-extra-light);
        padding-inline: calc(var(--10-5) + 10px) var(--10-5);
        padding-block: var(--10-5);
        margin-left: -10px;
        line-height: 1;

        &[href*="descarga"], &[href*="user_default_alumno.png"] {
            font-size: 0;
            background-image: url('../images/icono_descarga_prim.svg');
            width: 32px;
            height: 32px;
            margin-left: var(--10-5);
            padding: 0;
            line-height: 1;
            background-color: #fff;
            color: var(--primario);
            box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
            background-size: var(--h5-fs);
            background-repeat: no-repeat;
            background-position: top 3px center;
            border-radius: 3px;
            transition: var(--tr04);

            &:hover {
                background-color: var(--primario-highlight) !important;
                color: var(--primario-dark) !important;
                box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
            }
        }
    }
}

/* Errores */
.has-error {
    scroll-margin-top: var(--header-height);

    * {
        scroll-margin-top: var(--header-height);
    }

    .form-control {
        border-color: var(--danger);
        box-shadow: 0 0 6px 2px var(--danger);
    }
}

/* Botones interrogantes */
.form-group-with-help {
    display: flex;
    gap: 0 10px;
    flex-wrap: wrap;
    height: max-content;

    .btn.btn-success.modal-ayuda {
        --size: calc(var(--body-fs) * 1.3);
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--size);
        height: var(--size);
        aspect-ratio: 1 / 1;
        padding: 0;
        border: none;
        border-radius: var(--full-radius);
        background-color: var(--primario);

        &:before {
            content: '?';
            font-family: var(--font-family);
            font-size: var(--body-fs);
            line-height: 1;
            letter-spacing: 0;
            font-weight: 500;
            color: #fff;
        }

        &:is(:hover, :active, :focus) {
            border-color: var(--primario-accent)!important;
            background-color: var(--primario-accent)!important;
            transition: var(--tr04);
        }

        + div {
            display: flex;
            align-items: center;
            width: 100%!important;
            min-height: 34px;
        }
    }
}

/* TEXTO AYUDA */
.form-group:has( > label + div > input[type="checkbox"]) {
    display: flex;
    gap: 0 10px;
    flex-wrap: wrap;
    height: max-content;

    > label + div {
        overflow: visible !important;
        width: 100% !important;
        /* flex-direction: column; */
        height: auto !important;
        margin: 0 0 10px !important;
        gap: 10px;

        input[type="checkbox"] {
            position: relative!important;
        }

        .texto-ayuda {
            margin-block: 0!important;
        }
    }
}

/* Switcher */
.switch-container {
    gap: var(--10-5);
    margin-bottom: var(--30-20)!important;

    .switch-label {
        font-size: var(--body-fs);
        color: var(--primario-highlight);
        transition: all 0.4s ease-in-out;

        &.selected {
            color: var(--primario);
        }
    }

    .switch {
        width: 50px;
        height: 24px;
        margin: 0;

        .slider {
            background-color: var(--primario-highlight-medio) !important;
            box-shadow: 0 0 1px #2196F3;

            &:before {
                background-color: var(--primario)!important;
                height: 16px;
                width: 16px;
            }
        }
    }
}

/* Párrafos dentro de form-control */
.form-control p {
    margin-bottom: 0;
}

/* Grupos con bloques ocultos */
.form-group.form-field-input:has( > .hidden) {
    display: none;
}

/* Elementos deshabilitados */
.form-control, input {
    &[disabled], &[readonly] {
        border-color: var(--primario);
        background-color: #f1f3f8;
        cursor: not-allowed;
        opacity: 0.5;
    }
}

/** Barra de progreso pace **/
.pace .pace-progress  {
    height: var(--10-5);
    background-color: var(--secundario);
    border-radius: 0 var(--full-radius) var(--full-radius) 0;
    opacity: 0.7;
}

/** Scrollbars **/
    /** Firefox **/
* {
	scrollbar-width: auto;
	scrollbar-color: var(--secundario) transparent;
	scrollbar-gutter: auto;
}

    /** Chrome, Edge, y Safari **/
*::-webkit-scrollbar {
	width: 0.66rem;
	height: 0.66rem;
}
*::-webkit-scrollbar-track {
	background: transparent;
}
*::-webkit-scrollbar-thumb {
	background: var(--secundario);
	border-radius: 100vmax;
}

/***********************/
/*** PÁGINA DE LOGIN ***/
/***********************/
body#login-page {
    --color: #3d4d88;
    min-height: 100vh!important;
    background-size: cover!important;

    #page-wrapper {
        display: flex;
        justify-content: flex-end;
        height: 100% !important;
        min-height: 100vh;
        padding: 0px !important;
        color: var(--color);

        #panel_right_login {
            display: flex;
            height: fit-content;
            width: 33%;
            min-height: 100vh;
            background-color: #fff;
            padding: var(--60-30);
            box-shadow: -4px 0 12px var(--color);

            form {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: var(--15-10);
                max-width: 100%;
                margin-block: auto;

                .form-group {
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    width: var(--form-item-min-width);
                    max-width: 100%;

                    /* Logo*/
                    &:first-of-type {
                        justify-content: center;
                        width:100%;

                        .logo-login {
                            content: url(../images/logotipo.png);
                            max-width: 500px;
                            width: 100%;
                            height: auto;
                            display: block;
                            margin: 0 auto;
                        }
                    }

                    /* Contraseña */
                    .password-container {
                        position: relative;
                        width: 100%;

                        /* Ojito */
                        .glyphicon.toggle-password {
                            position: absolute;
                            right: var(--10-5);
                        }
                    }

                    /* Recordarme*/
                    &:last-of-type {
                        align-items: flex-start;
                    }
                    #remember_me {
                        margin-top: 2px;

                        &+ label {
                            margin: 0;
                            color: inherit;
                        }

                    }

                    /* Botón Entrar / Acceder */

                    &.submit {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        gap: 40px;
                        width: fit-content;
                        margin-top: 10px;
                        margin-inline: auto;
                        float: none;
                        padding: 0;
                        background-color: var(--primario);
                        border-radius: 100vmax;

                        &:before {
                            content: '';
                            --size: 30px;
                            width: var(--size);
                            height: var(--size);
                            position: absolute;
                            right: 6px;
                            background-color: var(--secundario);
                            top: 0;
                            bottom: 0;
                            margin-block: auto;
                            border-radius: 50%;
                            transition: 0.4s ease-in-out;
                        }

                        &:after {
                            content: '';
                            background: url(../images/icono_flecha_doble_primario.svg);
                            background-size: 200% 100%;
                            background-repeat: no-repeat;
                            background-position: center right;
                            overflow: hidden;
                            position: absolute;
                            right: 11px;
                            top: 0;
                            bottom: 0;
                            margin-block: auto;
                            --size: 20px;
                            width: var(--size);
                            height: var(--size);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            transition: 0.4s ease-in-out;
                        }

                        input {
                            align-content: center;
                            padding: 10px 50px 10px 15px;
                            width: fit-content;
                            background-color: transparent;
                            border-radius: 100vmax;
                            border: none;
                            z-index: 2;
                            text-transform: uppercase;
                            letter-spacing: 2px;
                            font-weight: bold;
                            color: #fff!important;
                            font-size: 17px;
                            text-align: center;
                            line-height: 20px;
                            height: auto;

                            &:hover, &:focus {
                                background-color: transparent!important;
                            }
                        }

                        &:hover, &:focus {
                            input {
                                background-color: transparent;
                                color: var(--primario)!important;
                            }

                            &:before {
                                width: 100%;
                                height: 100%;
                                right: 0;
                                border-radius: 100vmax;
                                transform-origin: right center;
                            }

                            &:after {
                                background-position: center left;
                                transform-origin: right center;
                            }
                        }
                    }
                }

                /* Mensaje bienvenida */
                > h2 {
                    margin-block: 0 20px;
                    font-size: var(--h4-fs);
                    font-weight: 600;
                    color: inherit;
                }

                > br {
                    display: none;
                }

                /*Iniciar sesión */
                > p {
                    font-size: var(--h6-fs);
                    color: inherit;
                    text-decoration: underline 2px var(--secundario);

                    strong {
                        font-weight: 500;
                    }
                }

                /* Mensaje de error */
                .alert {
                    position: absolute;
                    inset: 0;
                    margin: auto;
                    width: fit-content;
                    height: fit-content;
                    background-color: var(--danger);
                    color: white;
                    border-radius: var(--container-radius);
                    box-shadow: var(--shadow-modal-content);
                    border-color: var(--danger-dark);
                }
            }

        }

    }
}

/** MODALES **/
.modal:not(.in) {
    transition: var(--tr00);
}
.modal.in {
    position: fixed;
    inset: 0;
    margin: auto;
    transition: var(--tr04);

    .modal-dialog {
        --margin-v: 5vh;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1000px;
        max-width: 80%;
        height: calc(100vh - var(--margin-v) * 2);
        margin: var(--margin-v) auto;

        .modal-content {
            --padding: var(--15-10);
            position: relative;
            max-width: 100%;
            max-height: 100%;
            margin: auto;
            padding: var(--padding);
            border: none;
            border-radius: var(--form-radius);
            box-shadow: var(--shadow-modal-content);
            /* overflow: auto; */

            .modal-header {
                padding: 0;
                border: none;

                .close {
                    --size: 30px;
                    width: var(--size);
                    height: var(--size);
                    position: absolute;
                    top: calc(var(--size) * -0.33);
                    margin: 0 !important;
                    right: calc(var(--size) * -0.33);
                    background-color: var(--primario-highlight);
                    opacity: 1;
                    color: var(--primario);
                    border-radius: var(--full-radius)!important;
                    z-index: 1;
                    text-shadow: none;

                    span {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        font-weight: 400;
                        font-size: var(--h5-fs);
                        line-height: 1;
                    }

                    &:hover {
                        opacity: 1;
                        box-shadow: var(--shadow-dropdown-before);
                        background-color: #fff;
                        color: var(--danger);
                    }
                }
            }

            .panel-body {
                margin-block: var(--15-10);

                .panel.panel-default {
                    margin: 0!important;
                    box-shadow: none;

                    .panel-heading {
                        position: relative;
                        width: calc(100% + var(--padding) * 2);
                        margin-top: calc(var(--padding) * -2 - 1px);
                        margin-left: calc(var(--padding) * -1);
                        border-radius: var(--form-radius) var(--form-radius) 0 0 !important;
                        padding: var(--padding) !important;
                        background-color: var(--primario-highlight) !important;
                        z-index: 0;

                        h4 {
                            font-size: var(--h5-fs);
                        }
                    }

                    .panel-footer {
                        width: calc(100% + var(--padding) * 2);
                        margin-bottom: calc(var(--padding) * -1);
                        margin-left: calc(var(--padding) * -1);
                        padding: 0!important;
                        border-radius: 0 0 var(--form-radius) var(--form-radius)!important;
                        background-color: var(--primario-highlight) !important;

                        > *:not(:empty) {
                            padding: var(--padding) !important;
                        }
                    }

                    /* botones */
                    .botones-controles-grupos {
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: var(--gap);
                        margin-bottom: var(--15-10);

                        > * {
                            float: none;
                            flex: 0 0 fit-content;
                            margin-bottom: 0!important;
                        }
                    }

                }

                .panel-body {

                    h4 {
                        color: var(--primario);
                        font-size: var(--h6-fs);
                        font-weight: 500;
                        margin-bottom: var(--10-5);
                    }

                    *:last-child {
                        margin-bottom: 0;
                    }

                    .panel-heading {
                        margin-top: calc(var(--padding) * -3 - 1px);
                    }

                    .panel-footer {
                        margin-bottom: calc(var(--padding) * -3);
                    }
                }

                #modalAlertaIbanContenido {
                    position: relative;

                    .panel-default-layout {
                        padding: 0;

                        .panel.panel-default {
                            border:none;

                            .panel-heading {
                                margin-top: calc(var(--padding) * -1 - 1px);

                                h4 {
                                    margin: 0;
                                }
                            }

                            .panel-body {
                                margin-block: var(--10-5);
                            }

                            .panel-footer {
                                position: relative;
                            }
                        }
                    }
                }

                #modalAlertaAsignaturasContenido {
                    .panel-default-layout {
                        padding: 0;

                        .panel.panel-default {
                            border:none;

                            .panel-heading {
                                margin-top: calc(var(--padding) * -3 - 1px);

                                h4 {
                                    margin: 0;
                                }
                            }

                            .panel-footer {
                                margin-bottom: calc(var(--padding) * -3 - 1px);
                            }
                        }
                    }
                }
            }

            .modal-body {
                padding: 0;

                .modal-title {
                    flex: 1 1 100%;
                    margin: calc(var(--padding) * -1) calc(var(--padding) * -1) var(--padding);
                    border-radius: var(--form-radius) var(--form-radius) 0 0;
                    font-size: var(--h5-fs);
                    line-height: 1.1;
                    color: var(--primario) !important;
                    background-color: var(--primario-highlight) !important;
                    padding: var(--20-10);
                    font-weight: 600;
                    border: none;
                    text-align: left;
                }

                .contenido:not(:has(*)) {
                    padding: var(--30-20);
                }

                form {
                    display: flex;
                    flex-direction: column;

                    label {
                        text-align: left;
                    }

                    input, .select2-container {
                        margin-bottom: var(--15-10);
                    }

                    button {
                        margin-left: auto;
                    }
                }
            }
        }
    }

    /* Crear Clase Crear Festivo*/
    &#modal_crear_clase, &#modal_crear_festivo {

        .modal-content > .panel-body {
            margin: calc(var(--padding) * -1)!important;
            border-radius: var(--form-radius);
            overflow: auto;
            padding: var(--15-10)!important;

            &:before, &:after {
                display: none;
            }

            #modalCrearClaseContenido, #modalCrearFestivoContenido {
                display: flex;

                *:not(.cke *) {
                    float: none;
                }

                .panel-default-layout {

                    .panel {
                        margin-bottom: 0;
                        box-shadow: none;
                    }

                    .panel-heading {
                        margin: calc(var(--padding) * -1) calc(var(--padding) * -1) var(--padding);
                        font-size: var(--h5-fs);
                        line-height: 1.1;
                        color: var(--primario);
                        background-color: var(--primario-highlight) !important;
                    }

                    .panel-body {
                        max-height: calc((90vh - var(--padding) * 2) - ((var(--h4-fs) * 1.1) + (var(--padding) * 4)));
                        margin-block: var(--15-10) 0!important;
                        padding-top: 6px!important;
                        overflow: auto;

                        [name="calendar_schedule_festive"] {
                            --gap: var(--15-10);
                            display: flex;
                            gap: var(--gap);
                            flex-wrap: wrap;

                            > * {
                                flex: 1 1 calc(50% - var(--gap));

                                > .form-field-input {
                                    padding: 5px;
                                    width: 100%!important;
                                }

                                &.form-group {
                                    margin: 0 0 0 5px!important;
                                }
                            }

                        }
                    }
                }

                form {
                    > .form-group {
                        box-shadow: none;
                        padding: 0;
                    }
                }
            }
        }
    }

    /* Modal aviso festivo creado */
    &#modal_contador_festivos {

        .modal-body {
            padding: 0;

            .modal-title {
                width: calc(100% + var(--padding) * 2);
                margin-top: calc(var(--padding) * -1 - 1px);
                margin-bottom: var(--20-10);
                margin-left: calc(var(--padding) * -1);
                border-radius: var(--form-radius) var(--form-radius) 0 0 !important;
                padding: var(--padding) !important;
                background-color: var(--primario-highlight) !important;
                z-index: 0;
                font-size: var(--h5-fs);
                color: var(--primario) !important;
            }
        }
    }

    &[id*="modal_confirmacion"], &#modal_aviso_alumno_matricula, &#modal-confirmar-sync-alumnos, &#confirm-master-delete, &#confirm-delete, &#modal_confirm_habilitar_inscripcion, &#modal_confirm_deshabilitar_inscripcion {

        h3 {
            position: relative;
            width: calc(100% + var(--padding) * 2);
            margin-top: calc(var(--padding) * -1 - 1px);
            margin-left: calc(var(--padding) * -1);
            border-radius: var(--form-radius) var(--form-radius) 0 0 !important;
            padding: var(--padding) !important;
            background-color: var(--primario-highlight) !important;
            z-index: 0;
            font-size: var(--h5-fs);
            color: var(--primario) !important;
        }

        .modal-footer {
            width: calc(100% + var(--padding) * 2);
            margin-left: calc(var(--padding) * -1);
            margin-bottom: calc(var(--padding) * -1 - 1px);
            background-color: var(--primario-highlight) !important;
            display: flex;
            border: none;
            border-radius: 0 0 var(--form-radius) var(--form-radius) !important;
            justify-content: flex-end;
            gap: 5px;

            button {
                all: unset;

                align-items: center;
                appearance: none;
                background-color: var(--primario-highlight-light);
                border-radius: 4px;
                border-width: 0;
                box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
                box-sizing: border-box;
                color: var(--primario);
                cursor: pointer;
                display: inline-flex;
                justify-content: space-between;
                line-height: 1;
                list-style: none;
                overflow: hidden;
                padding: var(--10-5) var(--15-10);
                position: relative;
                text-align: left;
                text-decoration:none;
                transition: box-shadow .15s,transform .15s;
                user-select: none;
                -webkit-user-select: none;
                touch-action: manipulation;
                white-space: nowrap;
                will-change: box-shadow,transform;
                font-size: calc(var(--small-fs) - 2px);
                font-weight: 400;
                gap: 5px;

                &:focus {
                    background-color: var(--primario-highlight) !important;
                    color: var(--primario-dark) !important;
                    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                }

                &:hover {
                    background-color: var(--primario-highlight) !important;
                    color: var(--primario-dark) !important;
                    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                    transform: translateY(-2px);
                }

                &:active {
                    background-color: var(--primario-highlight) !important;
                    color: var(--primario-dark) !important;
                    box-shadow: #D6D6E7 0 3px 7px inset;
                    transform: translateY(2px);
                }
            }
        }
    }

    &[id*="modal_confirmacion"] {
        .modal-body {
            padding-block: var(--20-10);
        }

        .modal-footer {
            padding-top: var(--20-10);
            margin-top: var(--20-10);
        }
    }

    &#modal-confirmar-sync-alumnos {

        h3 {
            width: calc(100% + var(--padding) * 4);
            margin-top: calc(var(--padding) * -3);
            margin-left: calc(var(--padding) * -2);
        }

        .modal-body {
            padding: 0;
            margin-block: var(--padding);
        }
    }

    /* Modal gestionar beca */
    &#modal_gestionar_beca {

        .modal-dialog {

            .modal-content {
                overflow: visible;

                /* .modal-header {

                } */

                .modal-body {
                    max-height: 100%;
                    padding: 0;

                    #modalGestionarBecaContenido {

                        #wrapper #page-wrapper {
                            min-height: unset !important;

                            .panel {
                                margin: 0;
                                box-shadow: none;
                            }

                            .panel-heading {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                font-size: var(--h4-fs);
                                font-weight: 600;
                                line-height: 1.1;
                                border: none;color: var(--primario);
                                position: relative;
                                width: calc(100% + var(--padding) * 2);
                                margin-top: calc(var(--padding) * -1 - 1px);
                                margin-left: calc(var(--padding) * -1);
                                border-radius: var(--form-radius) var(--form-radius) 0 0 !important;
                                padding: var(--padding) !important;
                                background-color: var(--primario-highlight) !important;
                                z-index: 0;
                            }

                            .panel-body {

                                &:before, &:after {
                                    display: none;
                                }

                                #ehabilisgestiondelaformacionbundle_planformacionmatricula {
                                    margin: 0;
                                    padding: var(--10-5);
                                    box-shadow: none;
                                }
                            }
                        }
                    }
                }

            }
        }
    }

    /* Modales añadir / qiutar alumnos / docentes */
    &:is(#modal_anadir_docentes, #modal_quitar_docentes, #modal_anadir_alumnos, #modal_quitar_alumnos){

        /* Simulo overlay */
        &::before {
            content: '';
            position: fixed;
            inset: 0;
            background-color: rgba(0,0,0,0.3);
        }
        /**********************/

        > .modal-dialog > .modal-content > .panel-body {
            max-height: calc(100vh - var(--margin-v) * 2 - var(--15-10) * 3);

            #modalAnadirDocentesContenido, #modalQuitarDocentesContenido, #modalAnadirAlumnosContenido, #modalQuitarAlumnosContenido {
                --gap: var(--15-10);

                * {
                    float: none;
                }

                /* filtros modal */
                > form {
                    margin-top: calc(var(--padding) * -2);
                    margin-left: calc(var(--padding) * -1);
                    margin-right: calc(var(--padding) * -1);
                    padding: calc(var(--padding) * 2) var(--padding) var(--padding);
                    border-top-left-radius: var(--form-radius);
                    border-top-right-radius: var(--form-radius);
                    background: var(--primario-light);

                    > .row {
                        display: flex;
                        flex-wrap: wrap;
                        gap: var(--gap);

                        &:before, &:after {
                            display: none;
                        }

                        > * {
                            flex: 1 1 calc(50% - var(--gap));
                            padding: 0!important;

                            &[class*="12"] {
                                flex: 1 1 100%;
                            }
                        }

                        &:last-of-type {
                            > * {
                                flex: 1 1 fit-content;
                                max-width: fit-content;
                            }
                        }
                    }

                    + .panel-default-layout {

                        .panel-heading {
                            margin-top: 0;
                            border-radius: 0!important;
                        }

                        form {

                            .panel-body {

                                .table-responsive {
                                    max-height: calc(75vh - 230px);
                                    overflow: auto;
                                }
                            }

                            .panel-footer {
                                margin-bottom: calc(var(--padding) * -2);
                            }
                        }
                    }
                }

            }
        }
    }

    /* Modales validar acta de calificaciones */
    &#modal_validar_acta {

        .modal-dialog {

            .modal-content {
                padding: 0;

                .panel-body {
                    margin: 0;
                    padding: 0;

                    #modalValidarActaCalificacionContenido {

                        .panel-default-layout {
                            padding: 0;

                            .panel.panel-primary.center-block {
                                margin: 0;

                                .panel-heading {
                                    /* display: flex; */
                                    justify-content: space-between;
                                    align-items: center;
                                    margin: 0 0 var(--padding);
                                    padding: var(--20-10);
                                    border-radius: var(--form-radius) var(--form-radius) 0 0;
                                    font-size: var(--h5-fs);
                                    line-height: 1.1;
                                    color: var(--primario);
                                    background-color: var(--primario-highlight) !important;
                                    font-weight: 600;
                                    border: none;
                                    /*****/
                                    display: grid;
                                    grid-template-columns: repeat(auto-fill, minmax(20px, auto));
                                    justify-content: stretch;
                                    /*****/

                                    &:before, &:after {
                                        display: none;
                                    }
                                }

                                .panel-body {

                                    form {

                                        &> .form-group {
                                            display: flex;
                                            flex-direction: column;
                                            gap: var(--padding);

                                            &> .grupo-campos {
                                                display: flex;
                                                flex-wrap: wrap;
                                                gap: var(--padding);

                                                &:before, &:after {
                                                    display: none;
                                                }

                                                /*Estado*/
                                                .form-field-input:not(.form-group) {
                                                    flex: 1 1 calc(33.33% - var(--padding));
                                                    display: flex;
                                                    align-items: center;
                                                    gap: 0;
                                                    width: fit-content;
                                                    min-width: var(--form-item-min-width);
                                                    max-width: 100%;
                                                    margin: 0;
                                                    padding: 0;

                                                    label {
                                                        display: flex;
                                                        align-items: center;
                                                        height: 100%;
                                                        white-space: nowrap;
                                                        margin: 0;
                                                        padding-inline: var(--10-5) calc(var(--10-5) + 10px);
                                                        padding-block: var(--10-5);
                                                        background-color: var(--primario-lighter);
                                                        font-size: var(--body-fs);
                                                        font-weight: 500;
                                                        line-height: 1;
                                                        color: var(--primario-dark);
                                                        clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
                                                        z-index: 2;
                                                    }

                                                    .select2 {
                                                        min-height: unset;
                                                        height: 100%;
                                                        margin: 0;
                                                        padding: 0;
                                                        border: none;
                                                        border-radius: 0;
                                                        box-shadow: none;
                                                        font-size: var(--body-fs);
                                                        color: var(--primario-dark);

                                                        .selection {
                                                            display: flex;
                                                            align-items: center;
                                                            width: calc(100% + 10px);
                                                            height: 100%;
                                                            background-color: var(--primario-extra-light);
                                                            padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                                                            padding-block: var(--10-5);
                                                            margin-left: -10px;
                                                            line-height: 1;

                                                            * {
                                                                all: unset;
                                                                min-width: fit-content;
                                                            }

                                                            .select2-selection__arrow {
                                                                display: none;
                                                            }
                                                        }
                                                    }
                                                }

                                                .form-group {
                                                    margin: 0;
                                                    padding: 0;
                                                }
                                            }

                                            &> .form-group  {
                                                width: fit-content;
                                                margin-left: auto;
                                                padding: 0;
                                            }
                                        }
                                    }
                                }

                            }

                        }
                    }
                }
            }
        }
    }

    /* Modal Añadir Alumno en las notifiaciones de las noticias */
    &#modal_anadir_usuarios_notificacion_noticia {

        .modal-dialog {
            .modal-content {
                overflow: visible;

                > .panel-body {
                    margin-bottom: 0!important;
                }

                #filters_anadir_usuarios_notificacion_noticia {

                    /* filtros modal */
                    form {
                        --gap: var(--15-10);
                        margin-top: calc(var(--padding) * -2);
                        margin-left: calc(var(--padding) * -1);
                        margin-right: calc(var(--padding) * -1);
                        padding: calc(var(--padding) * 2) var(--padding) var(--padding);
                        border-top-left-radius: var(--form-radius);
                        border-top-right-radius: var(--form-radius);
                        background: var(--primario-light);
                        display: flex;
                        flex-wrap: wrap;
                        gap: var(--gap);

                        > .row {
                            display: flex;
                            flex-wrap: wrap;
                            gap: var(--gap);

                            &:before, &:after {
                                display: none;
                            }

                            > * {
                                flex: 1 1 calc(50% - var(--gap));
                                padding: 0!important;
                                margin: 0!important;

                                &[class*="12"] {
                                    flex: 1 1 100%;
                                }
                            }

                            &:last-of-type {
                                > * {
                                    flex: 1 1 fit-content;
                                    max-width: fit-content;
                                }
                            }
                        }

                        + .panel-default-layout {

                            .panel-heading {
                                margin-top: 0;
                                border-radius: 0!important;
                            }

                            form {

                                .panel-body {
                                    margin-bottom: 0!important;

                                    .table-responsive {
                                        max-height: calc(75vh - 230px);
                                        overflow: auto;
                                    }
                                }

                                .panel-footer {
                                    margin-bottom: calc(var(--padding) * -2);
                                }
                            }
                        }
                    }
                }

                /* Resto modal */
                .panel.panel-default {

                    .panel-heading {
                        margin-top: 0;
                        border-radius: 0!important;
                    }
                }
            }
        }
    }

    /* Modal Privado */
    &#modal_privado {
        .modal-title {
            flex: 1 1 100%;
            margin: calc(var(--padding) * -1) calc(var(--padding) * -1) var(--padding);
            border-radius: var(--form-radius) var(--form-radius) 0 0;
            font-size: var(--h5-fs);
            line-height: 1.1;
            color: var(--primario) !important;
            background-color: var(--primario-highlight) !important;
            padding: var(--20-10);
            font-weight: 600;
            border: none;
            text-align: left;
        }

        .estado_modal.modal-body {
            padding-bottom: var(--15-10);
        }

        .modal-footer-privado {
            display: flex;
            gap: 5px;
            width: calc(100% + var(--padding) * 2);
            margin-bottom: calc(var(--padding) * -1);
            margin-left: calc(var(--padding) * -1);
            padding: var(--20-10);
            border-radius: 0 0 var(--form-radius) var(--form-radius)!important;
            background-color: var(--primario-highlight) !important;

            > *:not(:empty) {
                padding: var(--padding) !important;
            }

            .btn-secondary {

                &:hover {
                    background-color: var(--danger)!important;
                    border-color: var(--danger-dark)!important;
                    color: white!important;
                }
            }
        }
    }

    /* Modal Importer */
    &#modal_importer {

        #importer-file-explanation {
            margin-bottom: var(--15-10);
            padding: 0;
            background-color: #fff;
            border: none;
            border-radius: 0;

            p {
                text-align: left;
                font-family: var(--font-family);
                font-size: var(--body-fs);
                font-weight: 400;
                line-height: 1.2;
                color: #000;
            }
        }

        .modal-footer {
            border: none;
            background-color: var(--primario-highlight);
            color: var(--primario);
            padding: var(--padding) !important;
            margin-inline: calc(var(--padding) * -1);
            margin-bottom: calc(var(--padding) * -1);
            display: flex;
            justify-content: flex-end;
            gap: 5px;

            .btn-secondary {

                &:hover {
                    background-color: var(--danger)!important;
                    border-color: var(--danger-dark)!important;
                    color: white!important;
                }
            }
        }
    }

    /* Modal Update */
    &#modal_update.in {

        .modal-dialog {
            --margin-v: 5vh;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1000px;
            max-width: 80%;
            height: calc(100vh - var(--margin-v) * 2);
            margin: var(--margin-v) auto;
            inset: 0;

            .modal-content {
                overflow: visible;
                height: fit-content;

                [class*="titulo_"] {
                    color: var(--primario);
                    font-size: var(--h5-fs)!important;

                    * {
                        font-size: inherit!important;
                    }
                }

                .modal-body {

                    .tablas_calificacion_detalle {
                        max-height: 80vh;
                        overflow: auto;
                    }
                }

                table {
                    margin: 0 0 var(--30-20);
                    border-collapse: separate;
                    border: none;

                    thead {

                        tr {

                            &:first-of-type:not(:last-of-type) {

                                th {
                                    background-color: var(--primario-lighter);
                                    font-size: calc(var(--body-fs) + 1px);
                                }

                                th:first-child {
                                    border-left-color: var(--primario-lighter);
                                    border-radius: var(--container-radius) 0 0 0;
                                }

                                th:last-child {
                                    border-right-color: var(--primario-lighter);
                                    border-radius: 0 var(--container-radius) 0 0;
                                }

                                th:only-child {
                                    border-left-color: var(--primario-lighter);
                                    border-right-color: var(--primario-lighter);
                                    border-radius: var(--container-radius) var(--container-radius) 0 0;
                                }
                            }

                            ~ tr {

                                th {
                                    border-radius: 0!important;

                                    &:not([class*="col"]) {
                                        border-left-color: #fff;
                                    }
                                }
                            }
                        }
                    }

                    tr {

                        :is(th, td) {
                            padding: var(--10-5) var(--15-10);
                            vertical-align: middle;
                            white-space: nowrap;
                        }

                        th {
                            text-align: center;
                            font-weight: 500;
                            border-left: 1px solid var(--primario-extra-light);
                            border-bottom: 1px solid white;
                            background-color: var(--primario-extra-light);
                            border-top-color: var(--primario-extra-light);
                            color: var(--primario);

                            ~ th {
                                border-left-color: #fff;
                            }

                            &:first-of-type {
                                border-radius: var(--container-radius) 0 0 0;
                            }

                            &:last-of-type {
                                border-radius: 0 var(--container-radius) 0 0;
                            }

                            &:only-of-type {
                                border-radius: var(--container-radius) var(--container-radius) 0 0;
                            }

                        }

                        td {
                            border-right: 1px solid var(--primario-extra-light);
                            border-top: 1px solid var(--primario-extra-light);
                            border-left: none;
                            border-bottom: none;
                            background-color: white;

                            input:checked {
                                --check-size: 14px;
                            }

                            &:first-child {
                                border-left: 1px solid var(--primario-extra-light);
                            }
                        }

                        &:last-child {

                            td {
                                border-bottom: 1px solid var(--primario-extra-light);

                                &:first-child {
                                    border-bottom-left-radius: var(--container-radius);
                                }

                                &:last-child {
                                    border-bottom-right-radius: var(--container-radius);
                                }
                            }
                        }

                        &.highlight {
                            background: none!important;
                        }
                    }

                    thead {
                        td {
                            background-color: var(--primario-highlight-light);
                        }
                    }

                    tbody {

                        tr {
                            background-color: transparent!important;

                            &:hover td {
                                background-color: var(--primario-highlight-medio);
                            }

                            td:first-of-type {
                                border-left: 1px solid var(--primario-extra-light);
                            }

                            th {
                                background-color: var(--primario-highlight-light);
                                border-radius: 0!important;

                                &:last-child {
                                    border-right: 1px solid var(--primario-extra-light);
                                }
                            }

                            &:last-child {

                                th {
                                    border-bottom: 1px solid var(--primario-extra-light);
                                }

                                :is(th, td):first-of-type:not(:last-child) {
                                    border-bottom-left-radius: var(--container-radius)!important;
                                }

                                :is(th, td):last-of-type {
                                    border-bottom-right-radius: var(--container-radius)!important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &#modal_confirm_deshabilitar_inscripcion {
        .modal-title {
            flex: 1 1 100%;
            margin: calc(var(--padding) * -1) calc(var(--padding) * -1) var(--padding);
            border-radius: var(--form-radius) var(--form-radius) 0 0;
            font-size: var(--h5-fs);
            line-height: 1.1;
            color: var(--primario) !important;
            background-color: var(--primario-highlight) !important;
            padding: var(--20-10);
            font-weight: 600;
            border: none;
            text-align: left;
        }
        .modal-footer {
            border: none;
            background-color: var(--primario-highlight);
            color: var(--primario);
            padding: var(--padding) !important;
            margin-inline: calc(var(--padding) * -1);
            margin-bottom: calc(var(--padding) * -1);
            display: flex;
            gap: 5px;

            .btn-secondary {

                &:hover {
                    background-color: var(--danger)!important;
                    border-color: var(--danger-dark)!important;
                    color: white!important;
                }
            }
        }
    }

    /* MODAL AYUDA */
    &#modal_ayuda {
        div:empty {
            display: none;
        }

        .panel-body {
            margin-block: var(--15-10) 0 !important;

            .panel-footer {
                display: none;
            }
        }
    }
}

/** LAYOUTS **/
.row {
    margin-inline: 0;
}

/** HEADER **/
#wrapper nav.navbar.navbar-default {
    --gap: var(--40-20);
    display: flex;
    align-items: center;
    gap: var(--gap);
    height: var(--header-height);
    background-color: #fff;
    box-shadow: none;

    &:before, &:after {
        display: none;
    }

    /* Logotipo */
    .navbar-header {
        display: flex;
        justify-content: center;
        align-items: center;
        height: var(--header-height);
        width: var(--sidebar-left-w);
        margin: 0;

        .navbar-brand {
            width: 100%;
            height: 85%;
            margin: 5% 0 5% 5%;
            padding: 0;
            float: none;
            background-image: url(../images/logotipo.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            font-size: 0;
        }
    }

    /* Menú y Filtro */
    > :is(#collapse-menu, #collapse-rightnav).btn.btn-info {
        display: flex;
        align-items: center;
        gap: 5px;
        width: fit-content;
        height: calc(var(--body-fs)* 1.2);
        margin: 0;
        padding: 0;
        line-height: 1;
        font-weight: 500;
        border: none!important;
        background: none!important;
        border-radius: 0;
        color: var(--primario);
        overflow: hidden;
        transition: var(--tr00)!important;

        &:hover {
            color: var(--primario-accent)!important;
        }

        &:before {
            content:'';
            display: block;
            height: calc(var(--body-fs)* 1.3);
            width: auto;
            aspect-ratio: 1 / 1;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
    }

    > #collapse-menu.btn-info {

        /* Mimnimizar*/
        &:before {
            background-image: url('../images/minimizar_prim.svg');
        }

        &:hover {
            &:before {
                background-image: url('../images/minimizar_accent.svg');
            }
        }

        /* Maximizar */
        body:has(#page-wrapper.menu-active) {

            &:before {
                background-image: url('../images/maximizar_prim.svg');
            }

            &:hover {
                &:before {
                    background-image: url('../images/maximizar_accent.svg');
                }
            }
        }
    }

    > #collapse-rightnav.btn-info {

        /* Maximizar normal */
        &:before {
            background-image: url('../images/maximizar_prim.svg');
        }

        &:hover {
            &:before {
                background-image: url('../images/maximizar_accent.svg');
            }
        }

        /* Minimizar */
        body:has(#page-wrapper.right-nav-active) {

            &:before {
                background-image: url('../images/minimizar_prim.svg');
            }

            &:hover {
                &:before {
                    background-image: url('../images/minimizar_accent.svg');
                }
            }
        }
    }

    /* Menú usuario */
    ul.navbar-top-links {
        margin-left: auto;
        margin-right: var(--40-20);

        li.dropdown {
            margin: 0;

            a.dropdown-toggle {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: var(--10-5);
                padding: 0;
                color: var(--primario);
                transition: var(--tr04);
                background: none;

                .nav-user-name {
                    margin: 0;
                    font-size: var(--body-fs);
                    font-weight: 500;
                    color: inherit;
                    transition: var(--tr04);

                    .rolPr {
                        display: flex;
                        gap: 3px;
                        flex-wrap: wrap;
                        align-items:first baseline;

                        span {
                            font-size: calc(var(--small-fs) - 2px)!important;
                            font-weight: 300;

                            &:first-of-type {
                                font-size: var(--small-fs)!important;
                                font-weight: 400;
                            }
                        }
                    }
                }

                .fa.fa-user.fa-fw {
                    --avatar-size: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: var(--avatar-size);
                    width: var(--avatar-size);
                    aspect-ratio: 1;
                    margin: 0;
                    padding: 0;
                    border: 3px solid currentColor;
                    box-shadow: var(--shadow-avatar);
                    border-radius: var(--full-radius);
                    transition: var(--tr04);

                    &:before {
                        content: '';
                        display: block;
                        width: 100%;
                        height:100%;
                        background-image: url(../images/user-default.png);
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                }

                .fa.fa-caret-down {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: calc(100% - calc(var(--body-fs) / 2));
                    right: 0;
                    width: var(--body-fs);
                    height: var(--body-fs);
                    padding: var(--10-5);
                    margin: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: none;
                    border-radius: var(--full-radius);
                    background-color: var(--primario);
                    box-shadow: var(--shadow-avatar);
                    transition: var(--tr04);

                    &:before {
                        content: '\f107';
                        color: white;
                        transition: var(--tr04);
                    }
                }

                &:hover {
                    color: var(--primario-accent);
                    transition: var(--tr04);

                    .fa.fa-caret-down {
                        background-color: var(--primario-accent);
                        transition: var(--tr04);
                    }
                }
            }

            /* desplegado */
            &.open {

                .fa.fa-caret-down:before {
                    content: '\f106'!important;
                    transition: var(--tr04);
                }
            }
        }
    }
}

@media (max-width: 600px) {
    #wrapper nav.navbar.navbar-default {
        ul.navbar-top-links {
            li.dropdown {
                a.dropdown-toggle {
                    .nav-user-name {
                        .rolPr {
                            width: min-content;

                            span {
                                &:first-of-type {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/** SIDEBAR MENÚ **/
#wrapper #menu-sidebar {
    width: var(--sidebar-left-w);
    top: var(--header-height);
    padding: 0;
    background-color: var(--primario);
    max-height: calc(100vh - var(--header-height));

    ul#side-menu {
        max-height: 100%;
        overflow: auto;

        > li {
            border: none;

            &:hover {
                background-color: initial;
                color: #fff;
            }

            a {
                color: white;
                font-size: calc(var(--body-fs) - 2px);
                display: flex;
                align-items: flex-start;
                gap: 8px;
                padding: var(--10-5);
                font-weight: 400;
                line-height: 1.2;
                box-shadow: 0 1px 2px var(--primario-medio);
                background-color: unset;
                transition: var(--tr00);

                i.glyphicon {
                    display: none;
                }

                span.fa.arrow {
                    margin-left: auto;
                    font-size: inherit;
                    font-weight: 900;
                    color: whiteinherit;
                    float: none;
                    line-height: 1.2;

                    &:before {
                        content:'\f107';
                    }
                }

                &:hover, &:focus {
                    background-color: var(--primario-medio);
                    color: #fff;
                    margin: 0;
                }
            }

            > a {

                i.glyphicon {
                    display: block;
                    --size: var(--body-fs);
                    min-width: var(--size);
                    height: var(--size);
                    font-size: 0;
                    color: inherit;
                    margin: 0;
                    background-size: cover;
                    transition: var(--tr00);

                    /* Home */
                    #home & {
                        background-image: url('../images/home_blanco.svg');

                        a:hover & {
                            background-image: url('../images/home_prim.svg');
                        }

                        .active & {
                            background-image: url('../images/home_accent.svg');
                        }
                    }

                    /* Usuarios */
                    #personas & {
                        background-image: url('../images/secretaria_blanco.svg');

                        a:hover & { /*2c3862*/
                            background-image: url('../images/secretaria_prim.svg');
                        }

                        .active & { /*5377f5*/
                            background-image: url('../images/secretaria_accent.svg');
                        }
                    }

                    /* formación */
                    #ediciones-cursos & {
                        background-image: url('../images/mapa_titulaciones_blanco.svg');

                        a:hover & {
                            background-image: url('../images/mapa_titulaciones_prim.svg');
                        }

                        .active & {
                            background-image: url('../images/mapa_titulaciones_accent.svg');
                        }
                    }

                    /* Itinerarios */
                    #itinerarios & {
                        background-image: url('../images/itinerarios_blanco.svg');

                        a:hover & {
                            background-image: url('../images/itinerarios_prim.svg');
                        }

                        .active & {
                            background-image: url('../images/itinerarios_accent.svg');
                        }
                    }

                    /* Tareas */
                    #tareas & {
                        background-image: url('../images/gestion_matriculas_blanco.svg');

                        a:hover & {
                            background-image: url('../images/gestion_matriculas_prim.svg');
                        }

                        .active & {
                            background-image: url('../images/gestion_matriculas_accent.svg');
                        }
                    }

                    /* Documentación */
                    #documentacions & {
                        background-image: url('../images/manuales_blanco.svg');

                        a:hover & { /*2c3862*/
                            background-image: url('../images/manuales_prim.svg');
                        }

                        .active & { /*5377f5*/
                            background-image: url('../images/manuales_accent.svg');
                        }
                    }

                    /* Solicitud de formación */
                    #solicitudes-formacion & {
                        background-image: url('../images/solicitud_formacion_blanco.svg');

                        a:hover & { /*2c3862*/
                            background-image: url('../images/solicitud_formacion_prim.svg');
                        }

                        .active & { /*5377f5*/
                            background-image: url('../images/solicitud_formacion_accent.svg');
                        }
                    }

                    /* Gestión de expedientes */
                    #gestion-formacion & {
                        background-image: url('../images/gestion_expedientes_blanco.svg');

                        a:hover & { /*2c3862*/
                            background-image: url('../images/gestion_expedientes_prim.svg');
                        }

                        .active & { /*5377f5*/
                            background-image: url('../images/gestion_expedientes_accent.svg');
                        }
                    }

                    /* Plan de formación */
                    #planes & {
                        background-image: url('../images/plan_ordenacion_academica_blanco.svg');

                        a:hover & { /*2c3862*/
                            background-image: url('../images/plan_ordenacion_academica_prim.svg');
                        }

                        .active & { /*5377f5*/
                            background-image: url('../images/plan_ordenacion_academica_accent.svg');
                        }
                    }

                    /* Gestión económica */
                    #gestion-economica & {
                        background-image: url('../images/gestion_economica_blanco.svg');

                        a:hover & { /*2c3862*/
                            background-image: url('../images/gestion_economica_prim.svg');
                        }

                        .active & { /*5377f5*/
                            background-image: url('../images/gestion_economica_accent.svg');
                        }
                    }

                    /* Gestión de competencias */
                    #asignacion_competencias & {
                        background-image: url('../images/gestion_competencias_blanco.svg');

                        a:hover & { /*2c3862*/
                            background-image: url('../images/gestion_competencias_prim.svg');
                        }

                        .active & { /*5377f5*/
                            background-image: url('../images/gestion_competencias_accent.svg');
                        }
                    }

                    /* Informes */
                    #pantalla-informe & {
                        background-image: url('../images/explotacion_datos_blanco.svg');

                        a:hover & { /*2c3862*/
                            background-image: url('../images/explotacion_datos_prim.svg');
                        }

                        .active & { /*5377f5*/
                            background-image: url('../images/explotacion_datos_accent.svg');
                        }
                    }

                    /* Gestión de datos maestros */
                    #admin_maestros & {
                        background-image: url('../images/gestion_datos_maestros_blanco.svg');

                        a:hover & { /*2c3862*/
                            background-image: url('../images/gestion_datos_maestros_prim.svg');
                        }

                        .active & { /*5377f5*/
                            background-image: url('../images/gestion_datos_maestros_accent.svg');
                        }
                    }

                    /* Gestión de roles y permisos */
                    #roles_permisos & {
                        background-image: url('../images/gestion_administradores_blanco.svg');

                        a:hover & { /*2c3862*/
                            background-image: url('../images/gestion_administradores_prim.svg');
                        }

                        .active & { /*5377f5*/
                            background-image: url('../images/gestion_administradores_accent.svg');
                        }
                    }

                    /* Calidad / Encuestas */
                    #calidad_encuestas & {
                        background-image: url('../images/encuestas_blanco.svg');

                        a:hover & {
                            background-image: url('../images/encuestas_prim.svg');
                        }

                        .active & {
                            background-image: url('../images/encuestas_accent.svg');
                        }
                    }

                    /* Evaluaciones de Desempeño */
                    #evaluaciones_desempeno & {
                        background-image: url('../images/evaluaciones_desempeno_blanco.svg');

                        a:hover & {
                            background-image: url('../images/evaluaciones_desempeno_prim.svg');
                        }

                        .active & {
                            background-image: url('../images/evaluaciones_desempeno_accent.svg');
                        }
                    }
                }
            }

            &.current {
                > a {
                    background-color: var(--primario-extra-light);
                    color: var(--primario-accent)!important;

                    i.glyphicon, span.fa.arrow {
                        color: inherit!important;
                    }

                    &:hover {
                        background-color: var(--primario-highlight);
                        color: var(--primario)!important;
                        margin: 0;

                         i.glyphicon, span.fa.arro{
                            color: inherit!important;
                        }
                    }
                }
            }

            &.current_ancestor {

                ul.nav-second-level {

                    li {

                        &.current {
                            background-color: #fff;
                        }

                        &:not(.current) {
                            background-color: var(--primario-highlight-light);

                            a {
                                color: var(--primario-medio);

                                &:hover {
                                    color: var(--primario)!important;
                                }
                            }
                        }
                    }
                }
            }

            &.active {

                > a {
                    background-color: var(--primario-lighter);
                    color: var(--primario-accent)!important;

                    i.glyphicon, span.fa.arrow {
                        color: inherit!important;
                    }

                    &:hover {
                        background-color: var(--primario-highlight);
                        color: var(--primario)!important;
                        margin: 0;

                        i.glyphicon {
                            color: inherit!important;
                        }

                        span.fa.arrow {
                            color: inherit!important;

                            &:before {
                                content:'\f106';
                            }
                        }
                    }
                }

                > a {

                    span.fa.arrow {
                        &:before {
                            content:'\f106';
                        }
                    }
                }

               ul.nav-second-level li {
                    background: none;

                    a {
                        background-color: var(--primario-highlight-light);
                        color: var(--primario-medio) !important;

                        &:hover {
                            background-color: var(--primario-highlight);
                            color: var(--primario)!important;
                            margin: 0;

                            i.glyphicon {
                                color: inherit!important;
                            }
                        }
                    }
                }
            }
        }
    }
}

/** SIDEBAR FILTROS **/
#wrapper #nav-right {
    max-height: calc(100vh - var(--margin-top));
    --margin-top: calc(var(--header-height) + var(--small-fs) + var(--10-5) + 2px);
    margin-top: var(--margin-top);
    padding: var(--15-10);
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--primario-extra-light);
    color: var(--primario);

    #filters {
        max-height: 100%;
        overflow: auto;
        margin: 0;

        label {

            &.control-label {
                white-space: normal;
            }
        }

        select, select.form-control {
            background-color: #fff;

            &:focus {
                border-color: var(--primario-accent);
                box-shadow: 0 0 6px 2px var(--primario-accent);
            }
        }

        form {
            display: flex;
            flex-wrap: wrap;
            gap: var(--15-10);
            padding-inline: 5px;

            > * {
                flex: 1 1 100%;
                max-width: 100%;
                float: none;
                padding: 0;
            }

            .filter-date-range {
                display: flex;
                gap: 5px;
            }

            /*selects*/
            .select2-container {
                position: relative;

                .selection {

                    .select2-selection {

                        .select2-selection__rendered {
                            position: relative;

                            .select2-selection__clear {
                                top: 0;
                                bottom: 0;
                                margin-block: auto;
                                float: none;
                                left: 100%;
                                width: 15px;
                                height: 25px;
                                background-color: #fff;
                                position: absolute;
                                right: 0;
                                display: flex;
                                justify-content: flex-end;
                                align-items: center;

                            }
                        }
                    }
                }
            }

            .botones, > .form-group:has(button) {
                flex:0 0 fit-content !important;
                padding-bottom: 25px;

                + .form-group.col-lg-12.col-md-4 {
                    margin: 0;
                }
            }
        }

        button {
            all: unset;

            align-items: center;
            appearance: none;
            background-color: var(--primario-highlight-light);
            border-radius: 4px;
            border-width: 0;
            box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
            box-sizing: border-box;
            color: var(--primario);
            cursor: pointer;
            display: inline-flex;
            justify-content: space-between;
            line-height: 1;
            list-style: none;
            overflow: hidden;
            padding: var(--10-5) var(--15-10);
            position: relative;
            text-align: left;
            text-decoration:none;
            transition: box-shadow .15s,transform .15s;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            white-space: nowrap;
            will-change: box-shadow,transform;
            font-size: calc(var(--small-fs) - 2px);
            font-weight: 400;
            gap: 5px;

            &:focus {
                background-color: var(--primario-highlight) !important;
                color: var(--primario-dark) !important;
                box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
            }

            &:hover {
                background-color: var(--primario-highlight) !important;
                color: var(--primario-dark) !important;
                box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                transform: translateY(-2px);
            }

            &:active {
                background-color: var(--primario-highlight) !important;
                color: var(--primario-dark) !important;
                box-shadow: #D6D6E7 0 3px 7px inset;
                transform: translateY(2px);
            }
        }
    }
}

/** BLOQUE CENTRAL **/
#wrapper #page-wrapper {
    min-height: 100vh!important;
    margin-left: var(--sidebar-left-w);
    margin-right: 0;
    padding-top: var(--header-height) !important;
    padding-bottom: 0!important;
    padding-inline: var(--15-10)!important;
    border: none;
    transition: margin-left 0.55s cubic-bezier(0.4, 1.05, 0.6, 1),
                margin-right 0.55s cubic-bezier(0.4, 1.05, 0.6, 1);
    position: relative;
    /* z-index: 1000; */

    &.menu-active {
        margin-left: 0;
    }

    &.right-nav-active {
        margin-right: 360px;
    }

    > .row {
        margin: 0;

        > .panel {
            border: none;
            box-shadow: none;
        }

        /** PORTADA CON BLOQUES - DISEÑO PREMIUM **/

        &> .col-md-12:not(.panel-default-layout) {
            padding: 0;

            .divPadre {
                --gap: 30px;
                --transition-time: 0.6s;
                --card-radius: 20px;
                display: grid;
                grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
                grid-auto-rows: auto;
                grid-auto-flow: dense;
                gap: var(--gap);
                padding: 10px 0 0 0;

                .enlaceA {
                    text-decoration: none;
                    position: relative;

                    .panel {
                        display: flex;
                        flex-direction: column;
                        justify-content: stretch;
                        position: relative;
                        width: 100%;
                        height: auto;
                        aspect-ratio: 1.5 / 1;
                        margin:0;
                        border:none;
                        border-radius: var(--card-radius);
                        /* Sombra premium oscura y profunda */
                        box-shadow:
                            0 10px 25px rgba(22, 28, 49, 0.15),
                            0 6px 12px rgba(44, 56, 98, 0.12),
                            0 3px 6px rgba(44, 56, 98, 0.08),
                            inset 0 1px 0 rgba(255, 255, 255, 0.5),
                            inset 0 -1px 0 rgba(44, 56, 98, 0.05);
                        text-align: center;
                        overflow:hidden;
                        transition:
                            transform var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1),
                            box-shadow var(--transition-time) ease-in-out;
                        transform-style: preserve-3d;

                        /* Fondo premium con tonos oscuros sutiles */
                        background: linear-gradient(145deg,
                            #fafbfd 0%,
                            #f4f6fa 50%,
                            #fafbfd 100%);
                        border: 1px solid rgba(44, 56, 98, 0.08);

                        :is(.flip-card-front, .flip-card-back) {
                            position: absolute;
                            display: flex;
                            justify-content: stretch;
                            align-content: center;
                            flex-direction: column;
                            width: 100%;
                            height: 100%;
                            backface-visibility: hidden;
                            -webkit-backface-visibility: hidden;
                        }

                        /* FRONT card */
                        .flip-card-front {
                            background-color: transparent;
                            opacity:1;
                            transition: all var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1);
                            position: relative;

                            /* Badge con indicador de atajo de teclado */
                            &::after {
                                content: 'Alt+' attr(data-shortcut);
                                position: absolute;
                                top: 10px;
                                right: 10px;
                                padding: 4px 8px;
                                line-height: 1;
                                text-align: center;
                                background: #f8f8f8;
                                color: var(--primario);
                                font-size: calc(var(--small-fs) - 2px);
                                font-weight: 400;
                                border-radius: 12px;
                                box-shadow: 0 2px 8px rgba(44, 56, 98, 0.35), 0 0 0 2px rgba(72, 92, 161, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
                                z-index: 10;
                                opacity: 1;
                                transform: scale(1);
                                transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                                pointer-events: none;
                                white-space: nowrap;
                                letter-spacing: 0.3px;
                            }

                            &> * {
                                display: flex;
                                justify-content: center;
                                align-content: center;
                            }

                            .icono {
                                --color1: var(--primario-dark);
                                --color2: var(--primario-light);
                                display: flex;
                                justify-content:center;
                                align-items: center;
                                height: 40%;
                                background: linear-gradient(135deg, var(--color1) 0%, var(--color2) 100%);
                                border-bottom-left-radius: 50% 25%;
                                border-bottom-right-radius: 50% 25%;
                                position: relative;

                                &:after {
                                    content: '';
                                    width: 100%;
                                    height: 100%;
                                    position: absolute;
                                    bottom: -2px;
                                    border-bottom-left-radius: 50% 25%;
                                    border-bottom-right-radius: 50% 25%;
                                    z-index: -1;
                                    filter: blur(4px);
                                    background: var(--primario-dark);
                                }

                                .glyphicon:before {
                                    color:white;
                                    font-size: 30px;
                                }
                            }

                            .title {
                                height: 55%;
                                padding: 30px 20px;
                                background-color: transparent;

                                &> * {
                                    display: flex;
                                    justify-content: center;
                                    align-items:center;
                                    width: 100%;
                                    height: auto;
                                }

                                > h2 {
                                    margin: 0;
                                    font-size: var(--h4-fs);
                                    font-weight: 500;
                                    line-height: 1.3;
                                    color: var(--primario);
                                    letter-spacing: -0.5px;
                                    text-shadow: 0 1px 3px rgba(44, 56, 98, 0.08);
                                }
                            }
                        }

                        /* BACK card - Reverso con colores corporativos */
                        .flip-card-back {
                            display: flex;
                            justify-content: center;
                            align-content: center;
                            padding: 35px 30px;
                            background-color: #fff;
                            opacity:0;
                            transform: rotateY(180deg);
                            transition: all var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1);

                            h5 {
                                position: relative;
                                z-index: 1;
                                margin-bottom: 15px;
                                font-size: var(--h5-fs);
                                font-weight: 700;
                                line-height: 1.3;
                                color: var(--primario);
                                text-shadow: 0 2px 4px rgba(44, 56, 98, 0.08);
                            }

                            p {
                                position: relative;
                                z-index: 1;
                                line-height: 1.6;
                                font-size: var(--body-fs);
                                color: var(--primario-medio);
                                font-weight: 400;
                                text-shadow: 0 1px 2px rgba(44, 56, 98, 0.03);
                            }
                        }
                    }

                    &:hover {

                        .panel {
                            transform: rotateY(180deg) translateY(-8px);
                            /* Sombra elevada premium con tonos oscuros
                            box-shadow:
                                0 25px 50px rgba(22, 28, 49, 0.2),
                                0 15px 30px rgba(44, 56, 98, 0.15),
                                0 8px 16px rgba(44, 56, 98, 0.1),
                                0 0 2px rgba(44, 56, 98, 0.3),
                                0 0 40px rgba(125, 97, 22, 0.12);*/

                            /* FRONT card */
                            .flip-card-front {
                                opacity:0;
                                transition: all var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1);

                                /* Animar badge al hacer hover */
                                &::after {
                                    transform: scale(1.15);
                                }

                                .icono::before {
                                    opacity: 1;
                                }
                            }

                            /* BACK card */
                            .flip-card-back {
                                backface-visibility: visible;
                                opacity:1;
                                transition: all var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1);
                            }
                        }
                    }
                }
            }
        }

        /* Animación flotante para los iconos */
        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        /* Animación para elementos de filtros */
        @keyframes slideInFilter {
            0% {
                opacity: 0;
                transform: translateX(20px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /*************************/

        /*Breadcrumbs*/
        #enlaces_migas {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--10-5);
            background-color: transparent;
            padding: 0;
            font-size: var(--small-fs);
            margin-bottom: var(--10-5);

            li {
                margin: 0;

                a {
                    display: inline-flex;
                    align-items: center;
                    gap: var(--10-5);
                    font-size: var(--small-fs);
                    line-height: 1;
                    color: var(--primario);
                    transition: var(--tr04);

                    &:hover {
                        color: var(--primario-accent);
                        text-decoration: none;
                        transition: var(--tr04);
                    }
                }

                &:first-child {
                    font-size: 0;

                    a {

                        &:before {
                            content: '';
                            --size: var(--body-fs);
                            width: var(--size);
                            height: var(--size);
                            font-size: 0;
                            color: inherit;
                            margin: 0;
                            background-size: cover;
                            transition: var(--tr00);
                            background-image: url('../images/home_prim.svg');
                        }
                    }
                }

                &:not(:first-child) {

                    a {
                        padding-left: calc(var(--10-5) / 2);
                    }
                }

                &:last-child {

                    a {
                        font-weight: 500;
                    }
                }
            }

            /* Título del aula en el calendatrio */

            &+ .form-group.float-right {
                width: 100%;
                padding: var(--15-10) 0 var(--10-5);
                text-align: center;

                h3#aulario-text-date {
                    margin: 0;
                    padding: 0;
                }
            }
        }

        /* Formulario Crear clases en calendario */
        > .form-group {
            width: fit-content;
            float: none;
            margin-left: auto;
            padding: 0;

            button {
                width: fit-content;
                min-height: unset;
                margin-top: var(--30-20);
            }
        }

        /* Pestañas */
        #nav-tab.nav-tabs {
            border: none;

            li {
                margin: 0;

                a {
                    --border-width: 2px;
                    margin-right: 0.1rem;
                    padding: var(--10-5) var(--15-10) calc(var(--10-5) - var(--border-width));
                    border: none;
                    border-bottom: var(--border-width) solid var(--primario-lighter);
                    border-radius: 0;
                    background-color: var(--primario-lighter);
                    color: var(--primario);
                    font-size: var(--small-fs);
                    line-height: 1;

                    &.active {
                        font-weight: 700;
                        background-color: var(--primario-extra-light);
                        border-bottom-color: var(--primario-accent);
                        pointer-events: none;
                    }

                    &:hover {
                        background-color: var(--primario-highlight);
                        border-bottom-color: var(--primario-highlight);
                        color: var(--primario);
                    }
                }
            }
        }

        .panel-default-layout {
            padding: 0;

            > .panel.panel-default {
                border: none;
                margin-bottom: var(--20-10);
            }
        }
        .panel-primary {
            border: none;
            box-shadow: none;
        }

        /* encabezado */
        .panel-heading {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--10-5);
            flex-wrap: wrap;
            padding: var(--20-10);
            font-size: var(--h4-fs);
            font-weight: 500;
            line-height: 1.1;
            background-color: var(--primario);
            color: #fff;
            border: none;
            border-bottom: 2px solid var(--secundario);
            border-radius: 0;
            position: relative;

            &::before {
                display: none !important;
            }

            .tooltip.in .tooltip-inner {
                background-color: #000!important;
            }

            > * {
                flex: 1 1 auto;
            }

            /* Iconos */
            > .float-left > .glyphicon {
                margin-right: 15px;
                font-size: 0;
                line-height: 1.5;
                filter: brightness(0) invert(1);
            }
            .glyphicon-ok {
                width: var(--h2-fs);
                height: var(--h2-fs);
                font-size: 0;
                background-image: url('../images/icono_ok_prim.svg');
                background-size: contain;
            }
            .glyphicon-pencil {
                width: var(--h4-fs);
                height: var(--h4-fs);
                margin-right: 10px;
                font-size: 0;
                background-image: url('../images/icono_pencil_prim.svg');
                background-size: contain;
            }
            .glyphicon-plus {
                width: var(--h4-fs);
                height: var(--h4-fs);
                margin-right: 10px;
                font-size: 0;
                background-image: url('../images/icono_crear_prim.svg');
                background-size: contain;
            }
            #dropdownMenuLink {
                all: unset;

                align-items: center;
                appearance: none;
                background-color: var(--primario-highlight-light);
                border-radius: 4px;
                border-width: 0;
                box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
                box-sizing: border-box;
                color: var(--primario);
                cursor: pointer;
                display: inline-flex;
                justify-content: space-between;
                line-height: 1;
                list-style: none;
                overflow: hidden;
                padding: var(--10-5) var(--15-10);
                position: relative;
                text-align: left;
                text-decoration:none;
                transition: box-shadow .15s,transform .15s;
                user-select: none;
                -webkit-user-select: none;
                touch-action: manipulation;
                white-space: nowrap;
                will-change: box-shadow,transform;
                font-size: calc(var(--small-fs) - 2px);
                font-weight: 400;
                gap: 5px;
                height: 32px;

                .caret {
                    border-top: 6px solid var(--primario);
                    border-right: 6px solid transparent;
                    border-left: 6px solid transparent;
                }

                & .tui-full-calendar-content {
                    font-size: calc(var(--small-fs) - 2px);
                    font-weight: 400;
                }

                &:focus {
                    background-color: var(--primario-highlight) !important;
                    color: var(--primario-dark) !important;
                    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                }

                &:hover {
                    background-color: var(--primario-highlight) !important;
                    color: var(--primario-dark) !important;
                    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                    transform: translateY(-2px);
                }

                &:active {
                    background-color: var(--primario-highlight) !important;
                    color: var(--primario-dark) !important;
                    box-shadow: #D6D6E7 0 3px 7px inset;
                    transform: translateY(2px);
                }

                &:before {
                    content: '';
                    width: var(--h6-fs);
                    height: var(--h6-fs);
                    font-size: 0;
                    background-image: url('../images/icono_descarga_prim.svg');
                    background-size: contain;
                }
            }

            /* Botones */
            .btn-group {
                display: flex;

                *:not([class*="dropdown"], .modal-content, .close) {
                    background-color: unset;
                }

                #anadir-alumnos-button {
                    margin-left: auto;
                }

                .form-group {
                    margin-bottom: 0;
                }
            }

            /* Botones de validar / desvalidar selección de clases */
            #validar-clases-seleccionadas, #desvalidar-clases-seleccionadas {
                position: unset!important;
            }

            &:before, &:after {
                display: none;
            }

            > [class*="col"] {
                max-width: fit-content;
            }

            > .row {
                --gap: var(--10-5);
                display: flex;
                justify-content: space-between;
                align-items: center;
                row-gap: calc(var(--gap) * 1.66);
                column-gap: var(--gap);
                flex-wrap: wrap;
                width: 100%;

                &:before, &:after {
                    display: none;
                }

                > div {
                    padding: 0;
                    width: fit-content;

                    /* Título*/
                    &:first-child {
                        display: flex;
                        align-items: center;
                        margin-right: auto;

                        h4 {
                            margin: 0;
                            font-weight: 500;
                        }

                        /* Gestión de cobros -> Código de matrícula */
                        .datos-alumno-matricula {
                            font-size: var(--body-fs);

                            > div {
                                width: 100%;

                                ul {
                                    display: inline-flex;
                                    gap: var(--gap);
                                    flex-wrap: wrap;
                                    padding: 0;
                                    list-style: none;

                                    br {
                                        display:none;
                                    }

                                    li {
                                        display: flex;
                                        flex-grow: 1;
                                        white-space: nowrap;
                                        font-size: 0;
                                        font-weight: 500;

                                        key {
                                            margin: 0;
                                            padding-inline: var(--10-5) calc(var(--10-5) + 10px);
                                            padding-block: 5px;
                                            background-color: var(--primario-highlight);
                                            font-size: var(--body-fs);
                                            color: var(--primario-dark);
                                            clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
                                        }

                                        value {
                                            width: 100%;
                                            margin-left: -10px;
                                            font-size: var(--body-fs);
                                            background-color: var(--primario-lighter);
                                            padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                                            padding-block: 5px;
                                            color: var(--primario);

                                            a {
                                                color: var(--primario-medio);

                                                &:hover {
                                                    color: var(--primario-accent);
                                                    text-decoration: none;

                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    /* Botones */
                    &:nth-child(2) {
                        margin-left: auto;
                        font-size: var(--body-fs);

                        > div {
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            gap: var(--10-5);

                            label {
                                margin-bottom: 0;
                                margin-right: 5px;
                                font-weight: 500;
                                color: #fff;

                                &:has(+ select) {
                                    font-size: calc(var(--small-fs) - 2px);
                                    font-weight: 400;
                                    color: #fff;
                                }
                            }

                            select {
                                align-items: center;
                                background-color: /*var(--primario-highlight-medio);*/ #fff;
                                border-radius: 4px;
                                border-width: 0;
                                box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
                                box-sizing: border-box;
                                color: var(--primario);
                                cursor: pointer;
                                display: inline-flex;
                                justify-content: space-between;
                                line-height: 1;
                                list-style: none;
                                overflow: hidden;
                                padding: 0 5px 0 var(--10-5);
                                position: relative;
                                text-align: left;
                                text-decoration:none;
                                transition: box-shadow .15s,transform .15s;
                                user-select: none;
                                -webkit-user-select: none;
                                touch-action: manipulation;
                                white-space: nowrap;
                                will-change: box-shadow,transform;
                                font-size: calc(var(--small-fs) - 2px);
                                font-weight: 400;
                                gap: 5px;
                            }

                            > :is(.btn, .btn-group) {
                                font-size: var(--small-fs);
                                border-radius: var(--btn-radius);
                                display: flex;
                                align-items: center;
                                gap: 10px;

                                .float-right {
                                    float: none;
                                    order: 1;

                                    a.btn-sm.btn-default.glyphicon {
                                        order: 1;
                                        width: var(--h6-fs);
                                        height: var(--h6-fs);
                                        margin-left: var(--10-5);
                                        padding: 0;
                                        font-size: var(--h6-fs);
                                        line-height: 1;
                                        background-color: transparent;
                                        color: var(--primario);
                                        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
                                        background-size: 90%;
                                        background-repeat: no-repeat;
                                        background-position: center;

                                        &:hover, &:focus {
                                            color: var(--primario-accent);
                                            text-decoration: none;
                                        }

                                        /* Iconos */
                                        &.glyphicon-th-list {
                                            width: var(--h4-fs);
                                            height: var(--h4-fs);
                                            font-size: 0;
                                            background-image: url('../images/icono_volver_prim.svg');
                                            background-size: contain;
                                        }

                                        &.glyphicon-edit {
                                            width: var(--h4-fs);
                                            height: var(--h4-fs);
                                            font-size: 0;
                                            background-image: url('../images/icono_editar_prim.svg');
                                        }

                                        &.glyphicon-stats {
                                            width: var(--h4-fs);
                                            height: var(--h4-fs);
                                            font-size: 0;
                                            background-image: url('../images/icono_resumen_prim.svg');
                                        }

                                        &.glyphicon-duplicate {
                                            width: var(--h4-fs);
                                            height: var(--h4-fs);
                                            font-size: 0;
                                            background-image: url('../images/icono_clonar_prim.svg');
                                        }

                                        &.glyphicon-eye-open {
                                            width: var(--h4-fs);
                                            height: var(--h4-fs);
                                            font-size: 0;
                                            background-image: url('../images/icono_ojo_prim.svg');
                                        }

                                        &:hover, &:focus {
                                            opacity: 0.8;;
                                            text-decoration: none;
                                        }

                                        + .hidden-xs.btn.btn-info.dropdown-toggle {
                                            border-radius: var(--form-radius);
                                        }
                                    }

                                    + .dropdown.btn-group {

                                        .hidden-xs.btn.btn-info.dropdown-toggle {
                                            border-radius: var(--btn-radius);
                                        }
                                    }
                                }

                                /*único*/
                                &:only-child, :first-child:last-child {
                                    border-radius: var(--btn-radius);
                                }

                                /* Primero de varios */
                                &:first-child:not(:last-child) {
                                    /* border-top-right-radius: 0;
                                    border-bottom-right-radius: 0; */
                                    border-radius: var(--btn-radius);
                                }

                                /* los del medio */
                                ~ :is(.btn, .btn-group):not(:last-child) {
                                    /* border-radius: 0; */
                                    border-radius: var(--btn-radius);
                                }


                                /* Último de varios */
                                &:last-of-type:not(:first-of-type) {
                                    /* border-top-left-radius: 0;
                                    border-bottom-left-radius: 0; */
                                    border-radius: var(--btn-radius);
                                }

                                .btn {
                                    border-radius: var(--btn-radius);

                                    &.updateGrades {
                                        border-radius: var(--btn-radius)!important;
                                    }

                                    &.calificacion-total {
                                        border-top-right-radius: var(--btn-radius)!important;
                                        border-bottom-right-radius: var(--btn-radius)!important;
                                    }

                                    &[data-target="#modalImportar"] {
                                        border-right: none;
                                    }
                                }
                            }
                        }
                    }

                    /* Filtros con display none */
                    &:nth-child(3){
                        display: none;
                    }
                }

                + .col-md-12 {
                    display: none;
                }
            }

            /* Botones en edición */
            > [class*="float-"] {
                flex: 0 0 fit-content;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }

            > .float-right {
                margin-left: auto;

                > .btn-group {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 3px;
                    width: fit-content;
                    margin-left: auto;
                    min-height: 30px;
                    margin-top: -2px;

                    .grupo-campos {
                        margin-top: -2px;
                        padding: 0;
                    }

                    /* Botón exportar remesas */
                    .dropdown.remesas-show-export {
                        max-height: fit-content;
                        display: flex;
                        margin-left: 5px;
                    }

                    > a.btn-sm.btn-default.glyphicon {
                        order: 1;
                        width: 32px;
                        height: 32px;
                        margin-left: var(--10-5);
                        padding: 0;
                        font-size: var(--h5-fs);
                        line-height: 1;
                        background-color: #fff;
                        color: var(--primario);
                        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
                        background-size: var(--h5-fs);
                        background-repeat: no-repeat;
                        background-position: top 3px center;

                        &:hover {
                            background-color: var(--primario-highlight) !important;
                            color: var(--primario-dark) !important;
                            box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                            transform: translateY(-2px);
                        }

                        /* Iconos */
                        &.glyphicon-th-list {
                            font-size: 0;
                            background-image: url('../images/icono_volver_prim.svg');
                        }

                        &.glyphicon-edit {
                            font-size: 0;
                            background-image: url('../images/icono_editar_prim.svg');
                        }

                        &.glyphicon-stats {
                            font-size: 0;
                            background-image: url('../images/icono_resumen_prim.svg');
                        }

                        &.glyphicon-duplicate {
                            font-size: 0;
                            background-image: url('../images/icono_clonar_prim.svg');
                        }

                        &.glyphicon-download-alt {
                            font-size: 0;
                            background-image: url('../images/icono_descarga_prim.svg');
                        }

                        &.glyphicon-lock {
                            font-size: 0;
                            background-image: url('../images/icono_candado_prim.svg');
                        }

                        &.glyphicon-eye-open {
                            font-size: 0;
                            background-image: url('../images/icono_ojo_prim.svg');
                        }

                        &:hover, &:focus {
                            opacity: 0.8;;
                            text-decoration: none;
                        }

                        + .hidden-xs.btn.btn-info.dropdown-toggle {
                            border-radius: var(--form-radius);
                        }
                    }

                    > a:not(.glyphicon), > button:not(.glyphicon), > .dropdown.btn-group {
                        border-radius: var(--form-radius) !important;
                        margin: 0;

                        > .btn.dropdown-toggle {
                            border-radius: var(--form-radius) !important;
                        }
                    }

                    > :last-child {
                        border-top-right-radius: var(--form-radius);
                        border-bottom-right-radius: var(--form-radius);

                        button:only-of-type {
                            border-radius: var(--form-radius);
                        }
                    }

                }
            }
        }

        /* Info */
        .class-div-info, .alert-info {
            --gap: var(--10-5);
            position: relative;
            width: 100%;
            margin-bottom: var(--15-10);
            padding: var(--15-10);
            background-color: var(--primario-highlight-medio);
            color: #333;

            .fa-info-circle, .glyphicon-info-sign {
                display: none;
            }

            ul {
                display: block;
                margin-left: var(--15-10);

                li {
                    margin-bottom: var(--10-5);
                }
            }
            &.table {
                background-color: transparent;
                padding: 0;
            }

            > * {
                flex: 1 1 calc(33.33% - var(--gap));
                display: flex;
                align-items: center;
                gap: 0;
                width: fit-content;
                max-width: 100%;
                margin: 0;
                padding: 0;
                font-size: 15px;
                /* color: #333;
                font-weight: 400!important; */

                .control-label:not(:empty) {
                     display: flex;
                     align-items: center;
                     height: 100%;
                     white-space: nowrap;
                     margin: 0;
                     padding-inline: var(--10-5) calc(var(--10-5) + 10px);
                     padding-block: var(--10-5);
                     background-color: var(--primario-lighter);
                     font-size: var(--body-fs);
                     font-weight: 500;
                     line-height: 1;
                     color: var(--primario-dark);
                     clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
                }

                div:not([class]):not(:empty) {
                    display: flex;
                    align-items: center;
                    width: calc(100% + 10px);
                    height: 100%;
                    background-color: var(--primario-extra-light);
                    padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                    padding-block: var(--10-5);
                    margin-left: -10px;
                    line-height: 1;
                }
            }

            > p {
                flex: 1 1 auto;
            }

            &.table {
                display: flex;
                flex-wrap: wrap;
                gap: var(--gap);
                margin-top: var(--15-10);
            }

            &:not(.table):before {
                content: '';
                display: block;
                width: var(--h5-fs);
                height: var(--h5-fs);
                background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M19.5099 5.85L13.5699 2.42C12.5999 1.86 11.3999 1.86 10.4199 2.42L4.48992 5.85C3.51992 6.41 2.91992 7.45 2.91992 8.58V15.42C2.91992 16.54 3.51992 17.58 4.48992 18.15L10.4299 21.58C11.3999 22.14 12.5999 22.14 13.5799 21.58L19.5199 18.15C20.4899 17.59 21.0899 16.55 21.0899 15.42V8.58C21.0799 7.45 20.4799 6.42 19.5099 5.85ZM11.2499 7.75C11.2499 7.34 11.5899 7 11.9999 7C12.4099 7 12.7499 7.34 12.7499 7.75V13C12.7499 13.41 12.4099 13.75 11.9999 13.75C11.5899 13.75 11.2499 13.41 11.2499 13V7.75ZM12.9199 16.63C12.8699 16.75 12.7999 16.86 12.7099 16.96C12.5199 17.15 12.2699 17.25 11.9999 17.25C11.8699 17.25 11.7399 17.22 11.6199 17.17C11.4899 17.12 11.3899 17.05 11.2899 16.96C11.1999 16.86 11.1299 16.75 11.0699 16.63C11.0199 16.51 10.9999 16.38 10.9999 16.25C10.9999 15.99 11.0999 15.73 11.2899 15.54C11.3899 15.45 11.4899 15.38 11.6199 15.33C11.9899 15.17 12.4299 15.26 12.7099 15.54C12.7999 15.64 12.8699 15.74 12.9199 15.87C12.9699 15.99 12.9999 16.12 12.9999 16.25C12.9999 16.38 12.9699 16.51 12.9199 16.63Z" fill="%233d2a55"></path></g></svg>');
                background-size: cover;
                position: absolute;
                top: -5px;
                left: -5px;
                z-index: 1;
            }

            &:not(.table):after {
                content: '';
                display: block;
                width: calc(var(--h5-fs) + 2px);
                height: calc(var(--h5-fs) + 4px);
                position: absolute;
                top: -7px;
                left: -6px;
                background-color: var(--primario-highlight-medio);
                z-index: 0;
                clip-path: polygon(50% 0, 100% 20%, 100% 80%, 50% 100%, 0 80%, 0 20%);
            }
        }

        /* Cuerpo */
        .panel-body {
            padding: 0;
            margin-block: var(--15-10)!important;
            margin-inline: 0 !important;
            float: none;
            border: none;

            #modal_ayuda {
                margin-block: var(--15-10) 0 !important;
            }

            /** Deshacer float de bootstrap **/
            div[class*="col"] {
                float: none;
                padding: 0;
            }

            /* Pestañas dentro del panel body */
            .card {

                .card-body {

                    .custom-tab {

                        nav {

                            #nav-tab {
                                display: flex;
                                flex-wrap: wrap;
                                gap: var(--10-5);
                                margin-bottom: var(--15-10);

                                &:before, &:after {
                                    display: none;
                                }

                                a {
                                    --color: #3c3c3b;
                                    --bg-color: #f5f5f5;
                                    --border-color: #ccc;
                                    position: relative;
                                    padding: var(--10-5) var(--24-18);
                                    color: var(--color);
                                    background-color: var(--bg-color);
                                    text-decoration: none !important;
                                    opacity: 0.6;
                                    clip-path: polygon(10px 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);

                                    &::before {
                                        content: '';
                                        display: block;
                                        width: 5px;
                                        height: 100%;
                                        background-color: var(--primario);
                                        position: absolute;
                                        left: 5px;
                                        transform: skew(-14deg);
                                        top: 0px;
                                    }

                                    &:hover {
                                        opacity: 1;
                                        --color: var(--primario-light);
                                        --bg-color: var(--primario-extra-light);
                                        --border-color: var(--primario-light);
                                        border-bottom: 4px solid var(--primario);
                                    }

                                    &.active {
                                        --color: var(--primario);
                                        --bg-color: var(--primario-lighter);
                                        --border-color: var(--primario);
                                        border-bottom: 4px solid var(--primario);
                                        opacity: 1;
                                    }
                                }
                            }
                        }

                        #nav-tabContent {

                            h4 {
                                color: var(--primario);
                                font-size: var(--h5-fs)!important;
                                margin-bottom: var(--15-10);
                            }
                        }
                    }
                }
            }

            > h3 {
                color: var(--primario);
                font-weight: 500;
                margin-block: var(--15-10);
                font-size: var(--h6-fs);
            }

            /* Filtros Rápidos */
            #filtros-rapidos {
                display: flex;
                margin-bottom: var(--15-10);
                flex-wrap: wrap;
                --gap: var(--15-10);
                gap: var(--gap);
                align-items: center;
                padding: var(--20-10);
                border: none;
                border-radius: 0;
                margin-inline: 0px;
                width: 100%;
                max-width: 100%;
                box-shadow: none;
                background-color: rgba(var(--primario-rgb), 0.05);

                > * {
                    flex: 0 1 100%;
                    padding: 0;

                    &.form-inline  {
                        label {
                            display: flex;
                            gap: var(--10-5);
                            align-items: center;
                            width: fit-content;
                            flex-direction: row;
                        }
                    }

                    &.qsearch-box {
                        input {
                            width: auto;
                        }
                    }
                }
            }

            /* Tabla Adaptaciones */
            #ver_maestro_equivalencia {

                #tablaAdaptaciones {
                    flex: 1 1 100%;

                    #cabeceraTablaAdaptaciones {

                        .row {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            gap: 0;

                            &:before, &:after {
                                display: none;
                            }

                            h5 {
                                width: 100%;
                                align-items: center;
                                padding: var(--20-10);
                                font-size: var(--h6-fs);
                                background-color: var(--primario-highlight-medio);
                                color: var(--primario);
                                display: flex;
                                margin-block: 0;
                            }

                            h6 {
                                width: 100%;
                                align-items: center;
                                padding-block: var(--10-5) var(--20-10);
                                font-size: var(--h6-fs);
                                color: var(--primario);
                                display: flex;
                                margin-block: 0;
                                text-decoration: underline 2px var(--primario-accent);
                            }

                            &:last-of-type {
                                gap: 0 10px;
                                padding: var(--15-10);
                                background-color: var(--primario-highlight-light);

                                > [class*="columna"] {
                                    max-width: 100%;
                                    margin: 0;
                                    padding: 0;
                                    width: fit-content;
                                    display: flex;
                                    align-items: center;
                                    line-height: 1;

                                    .form-group {

                                        label {
                                            margin: 0;
                                        }
                                    }

                                    > * {
                                        margin: 0;
                                        padding-inline: 0!important;
                                    }
                                }

                                .columnaOrigen {
                                    position: relative;

                                    .form-group {
                                        display: flex;
                                        flex-direction: column;
                                    }

                                    &:after {
                                        content: '';
                                        --size: 25px;
                                        height: var(--size);
                                        width: var(--size);
                                        margin-block: auto;
                                        background-image: url(../images/chevron-double-right.svg);
                                        background-size: 80%;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        border-radius: 50%;
                                        margin-left: 5px;
                                    }
                                }
                                .columnaDestino {
                                    position: relative;

                                    .form-group {
                                        display: flex;
                                        flex-direction: column;
                                    }
                                }
                            }
                        }

                        hr {
                            display: none;
                        }
                    }

                    > #cuerpoTablaAdaptaciones {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        gap: 0;

                        &:before, &:after {
                            display: none;
                        }

                        hr {
                            display: none;
                        }

                        .fila-adaptacion {
                            margin: 0 0 var(--10-5);
                            border: none;
                            padding: var(--15-10);
                            color: var(--primario);
                            display: flex;
                            gap: 0 30px;
                            flex-wrap: wrap;
                            background-color: #f6f6f6;

                            .col-lg-1.col-md-1.col-1 {
                                flex: 1 1 100%;
                                margin-bottom: var(--10-5);
                                padding: 0;

                                label {
                                    padding-left: 0 var(--20-10);
                                    font-size: var(--body-fs);
                                    color: var(--primario);
                                    text-transform: capitalize;

                                    &:after {
                                        content:':';
                                    }
                                }

                                span.input {
                                    font-size: var(--body-fs);
                                    color: var(--primario);
                                }
                            }

                            > [class*="columna"] {
                                max-width: 100%;
                                margin: 0;
                                width: calc(50% - 15px);
                                display: flex;
                                align-items: flex-start;
                                line-height: 1;
                                flex-wrap: wrap;
                                padding: var(--15-10);
                                min-width: unset;
                                border: 1px solid var(--primario-highlight);
                                border-radius: var(--form-radius);

                                h6 {
                                    width: 100%;
                                    font-size: var(--body-fs);
                                    color: var(--primario);
                                    margin-bottom: var(--10-5);
                                }

                                > * {
                                    margin: 0;
                                }

                                .container-fluid {
                                    width: 100%;
                                    margin-bottom: 15px;
                                    padding: 0;

                                    &:last-of-type {
                                        margin-bottom: 0;
                                    }

                                    &:only-of-type {
                                        margin: 0;
                                    }

                                    .fila-asignatura {
                                        display: flex;
                                        flex-direction: row;
                                        flex-wrap: nowrap;
                                        gap: 5px;

                                        &:before, &:after {
                                            display: none;
                                        }

                                        > * {
                                            width: fit-content;
                                            padding: 0;
                                            margin: 0;

                                            &.numero-creditos {
                                                max-width: fit-content;
                                                height: fit-content;
                                                padding: 5px;
                                                background: var(--primario-highlight);
                                                margin: -5px 0;
                                                border-radius: var(--form-radius);
                                                color: var(--primario-dark);
                                                font-weight: 500;
                                            }
                                        }
                                    }
                                }

                            }

                            .columnaOrigen {
                                position: relative;

                                &:after {
                                    content: '';
                                    --size: 25px;
                                    height: var(--size);
                                    width: var(--size);
                                    margin-block: auto;
                                    background-image: url(../images/chevron-double-right.svg);
                                    background-size: 80%;
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    border-radius: 50%;
                                    position: absolute;
                                    bottom: 0;
                                    right: -30px;
                                    top: 0;
                                }
                            }
                        }
                    }
                }

                /* Responsive */
                @media (max-width:999px) {

                    #tablaAdaptaciones {
                        > #cuerpoTablaAdaptaciones {
                            .fila-adaptacion {
                                flex-direction: column;

                                .col-lg-1.col-md-1.col-1 {
                                    width: 100%;
                                    flex: unset;
                                }

                                > [class*="columna"] {
                                    width: 100%;

                                    &.columnaOrigen {
                                        margin-bottom: 30px;

                                        &::after {
                                            margin-block: 0;
                                            bottom: unset;
                                            top: calc(100% + 3.5px);
                                            right: 0;
                                            left: 0;
                                            margin-inline: auto;
                                            transform: rotate(90deg);
                                        }
                                    }
                                }
                            }
                        }
                    }

                }
            }

            /* Tabla Adaptaciones Dentro de un form */
            form {
                #tablaAdaptaciones {

                    #cabeceraTablaAdaptaciones {

                        .row {
                            display: flex;
                            flex-direction: row-reverse;
                            flex-wrap: wrap;
                            gap: var(--gap) calc(var(--gap) * 2);

                            &:before, &:after {
                                display: none;
                            }

                            > [class*="columna"] {
                                flex: 1 1 calc(50% - var(--gap));
                                width: fit-content;
                                min-width: var(--form-item-min-width);
                                max-width: 100%;
                                margin: 0;
                                padding: 0;
                            }

                            .columnaOrigen {

                                > .form-group {
                                    position: relative;
                                    padding: 0;

                                    &:after {
                                        content: '';
                                        --size: 25px;
                                        height: var(--size);
                                        width: var(--size);
                                        position: absolute;
                                        bottom: 5px;
                                        right: calc(var(--size) * -1 - 3.5px);
                                        background-image: url(../images/chevron-double-right.svg);
                                        background-size: 80%;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        border-radius: 50%;
                                    }
                                }
                            }
                        }

                        hr {
                            display: none;
                        }
                    }

                    > #cuerpoTablaAdaptaciones {
                        position: relative;
                        margin-bottom: var(--40-30);

                        hr {
                            display: none;
                        }

                        :is(div, span)[class*="col-"] {
                            width: 100%;
                            padding: 0;
                        }

                        > .row {

                            &.fila-adaptacion {
                                display: flex;
                                flex-wrap: wrap;
                                gap: var(--gap) calc(var(--gap) * 2);
                                margin: 0;
                                border: none;
                                padding: var(--15-10) 0;
                                color: var(--primario);

                                .botonEliminarGrupo {
                                    display: flex;
                                    align-items: center;
                                    gap: var(--15-10);

                                    label {
                                        margin: 0;
                                    }
                                }

                                .columnaOrigen {
                                    position: relative;

                                    &:after {
                                        content: '';
                                        --size: 25px;
                                        height: var(--size);
                                        width: var(--size);
                                        position: absolute;
                                        bottom: 0;
                                        top: 0;
                                        right: calc(var(--size) * -1 - 3.5px);
                                        margin-block: auto;
                                        background-image: url(../images/chevron-double-right.svg);
                                        background-size: 80%;
                                        background-repeat: no-repeat;
                                        background-position: center;
                                    }
                                }

                                .columnaDestino {
                                    .numero-creditos:not(:empty) {
                                        display: flex;
                                        align-items: center;
                                        width: fit-content;
                                        height: 34px;
                                        padding: 5px 10px;
                                        background-color: var(--primario-extra-light);
                                        border-radius: var(--form-radius);
                                        font-size: var(--body-fs);
                                        font-weight: 500;
                                        color: var(--primario);
                                    }
                                }

                                .columnaOrigen, .columnaDestino {
                                    flex: 1 1 calc(50% - var(--gap));
                                    display: flex;
                                    flex-direction: column;
                                    gap: var(--gap);
                                    max-width: calc(50% - var(--gap));
                                    padding: var(--20-10);
                                    border-radius: var(--form-radius);
                                    border: 1px solid var(--primario);

                                    h6 {
                                        font-size: calc(var(--body-fs) + 2px);
                                    }

                                    &> * {
                                        width: 100%;
                                    }

                                    [class*="botonAgregarAsignatura"], [class*="botonEliminarAsignatura"]{
                                        display: flex;
                                        align-items: center;
                                        gap: var(--15-10);

                                        label {
                                            margin: 0;
                                        }
                                    }

                                    [class*="botonEliminarAsignatura"] {
                                        order: 2;
                                        height: fit-content;
                                        margin-top: auto;
                                    }

                                    .container-fluid {
                                        display: flex;
                                        flex-grow: 1;

                                        &:before, &:after {
                                            display: none;
                                        }

                                        .row {
                                            padding:  0;
                                            flex-grow: 1;

                                            &:before, &:after {
                                                display: none;
                                            }
                                        }
                                    }
                                }

                                .row.fila-asignatura {
                                    max-width: 100%;

                                    &:before, &:after {
                                        display: none;
                                    }
                                }

                                &:before, &:after {
                                    display: none;
                                }

                                > div {
                                    flex: 1 1 100%;
                                    padding: 0;

                                    > div {
                                        padding: 0;

                                        > .row {
                                            display: flex;
                                            flex-wrap: wrap;
                                            gap: var(--gap);
                                            margin: 0;
                                            border: none;
                                            padding: var(--15-10) 0;

                                            > div {
                                                flex: 1 1 100%;
                                                padding: 0;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    /* Pie tabla adaptaciones */
                    > #pieTablaAdaptaciones {
                        --gap: var(--15-10);
                        display: flex;
                        gap: var(--gap);
                        flex-wrap: wrap;

                        &:before, &:after {
                            display: none;
                        }

                        > * {
                            flex: 1 1 100%;
                            max-width: 100%;
                            padding: 0;

                            &:empty {
                                display: none;
                            }
                        }

                        #botonAgregarGrupo {
                            display: flex;
                            align-items: center;
                            gap: var(--15-10);

                            label {
                                margin: 0;
                            }
                        }
                    }
                }
            }

            /** TABLAS **/
            .table-responsive {
                margin: 0;
                border: none;

                > h3 {
                    color: var(--primario);
                    font-weight: 500;
                    margin-block: var(--15-10);
                    font-size: var(--h6-fs);
                }

                &:has(~ .table-responsive) {
                    tr th:not(:last-child) {
                        border-right: none;
                    }

                    tr:last-child th {
                        border-bottom-color: var(--primario-extra-light);
                    }
                }

                &~ .table-responsive {
                    margin-top: vaR(--20-10);
                }

                table {
                    margin: 0;
                    border-collapse: separate;
                    border: none;

                    thead {

                        tr {

                            &:first-of-type:not(:last-of-type) {

                                th {
                                    background-color: var(--primario-lighter);
                                    font-size: calc(var(--body-fs) + 1px);
                                }

                                th:first-child {
                                    border-left-color: var(--primario-lighter);
                                    border-radius: var(--container-radius) 0 0 0;
                                }

                                th:last-child {
                                    border-right-color: var(--primario-lighter);
                                    border-radius: 0 var(--container-radius) 0 0;
                                }

                                th:only-child {
                                    border-left-color: var(--primario-lighter);
                                    border-right-color: var(--primario-lighter);
                                    border-radius: var(--container-radius) var(--container-radius) 0 0;
                                }
                            }

                            ~ tr {

                                th {
                                    border-radius: 0!important;

                                    &:not([class*="col"]) {
                                        border-left-color: #fff;
                                    }
                                }
                            }
                        }
                    }

                    tr {

                        :is(th, td) {
                            padding: var(--10-5) var(--15-10);
                            vertical-align: middle;
                            white-space: nowrap;

                            a, span.glyphicon-check {
                                color: var(--primario-medio-link);
                                margin: 0;

                                &:hover {
                                    color: var(--primario-accent);
                                    text-decoration: none;
                                }

                                /* Iconos */
                                &.glyphicon {
                                    --size: 18px;

                                    &.glyphicon-search, &.glyphicon-edit, &.glyphicon-stats, &.glyphicon-ban-circle , &.glyphicon-eye-open, &.glyphicon-check, &.glyphicon-download-alt {

                                        &:before {
                                            content: '';
                                            width: var(--size);
                                            height: var(--size);
                                            display: block;
                                            background-size: cover;
                                        }
                                    }

                                    &.glyphicon-search {

                                        &:before {
                                            background-image: url('../images/icono_ver_prim.svg');
                                        }
                                    }

                                    &.glyphicon-edit{

                                        &:before {
                                            background-image: url('../images/icono_editar_prim.svg');
                                        }
                                    }

                                    &.glyphicon-stats {

                                        &:before {
                                            background-image: url('../images/icono_resumen_prim.svg');
                                        }
                                    }


                                    /* Sí */
                                    &.glyphicon-ok-circle {
                                        background-image: url('../images/icono_check_circulo.svg');
                                    }

                                    /* No */
                                    .glyphicon-ban-circle {
                                        background-image: url('../images/icono_prohibido.svg');
                                    }

                                    &.glyphicon-eye-open {

                                        &:before {
                                            background-image: url('../images/icono_ojo_prim.svg');
                                        }
                                    }

                                    &.glyphicon-check {

                                        &:before {
                                            background-image: url('../images/icono_check_success.svg');
                                        }
                                    }

                                    &.glyphicon-download-alt {
                                        background: none;
                                        width: auto;
                                        height: auto;
                                        box-shadow: none;
                                        border-radius: 0;
                                        margin-left: 0;
                                        background-color: transparent;

                                        &:before {
                                            background-image: url('../images/icono_descarga_prim.svg');
                                        }
                                    }

                                }
                            }

                            /* Avatar */
                            &.alturaFoto {
                                --size: 50px;
                                width: fit-content;
                                text-align: center;
                                color: var(--primario);

                                img {
                                    width: var(--size);
                                    max-width: var(--size);
                                    height: var(--size);
                                    margin: auto;
                                    border: 3px solid currentColor;
                                    box-shadow: var(--shadow-avatar);
                                    border-radius: var(--full-radius);
                                    object-fit: contain;
                                }
                            }

                            /** Faltas de asistencia a clase **/
                            &.clase-container {

                                .checkbox-container {
                                    display: flex;

                                    input {
                                        width: 100%;
                                    }

                                    > input[style="display: block;"] {
                                        display: block!important;
                                    }
                                    > input[style="display: none;"] {
                                        display: none!important;
                                    }
                                }
                            }


                            input[type="checkbox"] {
                                display: inline!important;
                            }

                            &.faltaAsistencia-clase {
                                box-shadow: inset 0px 0px 16px var(--color);
                            }
                            /* Tipo de falta 01 */
                            &.faltaAsistencia-clase[tipo-falta="01"] {
                                --color: var(--danger);
                            }

                            /* Tipo de falta 03 */
                            &.faltaAsistencia-clase[tipo-falta="03"] {
                                --color: orange;
                            }

                            /* Tipo de falta 02 */
                            &.faltaAsistencia-clase[tipo-falta="02"] {
                                --color: var(--success-light);
                            }

                            /* Tipo de falta 04 */
                            &.faltaAsistencia-clase[tipo-falta="04"] {
                                --color: var(--success-light);
                            }

                            /* No tiene falta de asistencia */
                            &.faltaAsistencia-clase.faltaAsistencia-noHasFaltaAsistencia {
                                --color: var(--success);
                            }
                        }

                        th {
                            text-align: center;
                            font-weight: 500;
                            border-left: 1px solid var(--primario-extra-light);
                            border-bottom: 1px solid white;
                            background-color: var(--primario-extra-light);
                            border-top-color: var(--primario-extra-light);
                            color: var(--primario);

                            /** Input marcar-todas-clases checked **/
                            input#marcar-todas-clases[value="1"] {
                                appearance: none;
                                border: 2px solid var(--primario-medio-link);
                                background-color: var(--primario-highlight);
                                background-image: url(../images/check-input-checked.svg);
                                border-radius: 3px;
                                background-size: 150%;
                                background-repeat: no-repeat;
                                background-position: center;
                                margin-bottom: -2px;
                            }

                            /***************************************/

                            ~ th {
                                border-left-color: #fff;
                            }

                            &.sorted {
                                position: relative;

                                &:after {
                                    content: '';
                                    height: 5px;
                                    background-image: linear-gradient(var(--primario-extra-light) 0%, var(--primario-accent) 100%);
                                    width: 100%;
                                    position: absolute;
                                    left: 0;
                                    bottom: 0;
                                }

                                a {
                                    color: var(--primario-accent);
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    gap: 5px;

                                    &:after {
                                        color: inherit;
                                        transition: var(--tr04);
                                        font-family: var(--icono-ff);
                                        font-size: var(--h6-fs);
                                        font-weight: 900;
                                    }

                                    &.asc:after {
                                        content: '\f106';
                                    }

                                    &.desc:after {
                                        content: '\f107';
                                    }

                                    &:hover {
                                        color: var(--primario-medio-link);
                                    }
                                    &:focus {
                                        text-decoration: none;
                                    }
                                }
                            }

                            &:first-of-type {
                                border-radius: var(--container-radius) 0 0 0;
                            }

                            &:last-of-type {
                                border-radius: 0 var(--container-radius) 0 0;
                            }
                            &:only-of-type {
                                border-radius: var(--container-radius) var(--container-radius) 0 0;
                            }

                        }

                        td {
                            border-right: 1px solid var(--primario-extra-light);
                            border-top: 1px solid var(--primario-extra-light);
                            border-left: none;
                            border-bottom: none;
                            background-color: white;

                            input:checked {
                                --check-size: 14px;
                            }


                            &:first-child {
                                border-left: 1px solid var(--primario-extra-light);
                            }

                            /* Estados */
                            [class*="estado"] {
                                width: fit-content;
                                margin-inline: auto;
                                display: inline-flex;
                                align-items: center;
                                border-radius: var(--full-radius);
                                padding: 5px var(--10-5);
                                font-size: var(--small-fs);
                                font-weight: 600;
                                border: 1px solid transparent;
                                white-space: nowrap;
                            }

                            :is(.estado_ejecucion, .estado_aceptado, .estado_matriculado, .estado_iniciado, .estado_activo,.estado_sincronizado) {
                                background-color: #edf7e5;
                                color: var(--success-dark);
                                border-color: var(--success);
                            }

                            .estado_preinscripcion {
                                background-color: #f3e8f6;
                                color: #7b1a96;
                                border-color: #ae00c4;
                            }

                            .estado_publicado {
                                background-color: #e4f3f1;
                                color: #005c53;
                                border-color: #008175;
                            }

                            .estado_certificacion  {
                                background-color: #e3f5f6;
                                color: #008a93;
                                border-color: #00b5c0;
                            }

                            :is(.estado_solicitado, .estado_pendiente, .estado_validado, .estado_aprobado) {
                                background-color: var(--primario-highlight-light);
                                color: #0f5f93;
                                border-color: #1573b3;
                            }

                            :is(.estado_cerrado, .estado_privado, .estado_rechazado, .estado_cancelada, .estado_inactivo,.estado_no_sincronizado) {
                                background-color: #fef2f2;
                                color: var(--danger-dark);
                                border-color: var(--danger);
                            }

                            .estado_borrador {
                                background-color: #fdeef0;
                                color: #b3002a;
                                border-color: #e60032;
                            }

                            :is(.estado_finalizada, .estado_finalizado) {
                                background-color: #f3f2e6;
                                color: #6b6928;
                                border-color: #b6b44f;
                            }

                            .estado_bloqueado {
                                background-color: #efefef;
                                color: #3d3d3d;
                                border-color: #565656;
                            }

                            .estado_matricula {
                                background-color: #feeeed;
                                color: #c42618;
                                border-color: #fc2e1d;
                            }
                        }

                        &:last-child {

                            td {
                                border-bottom: 1px solid var(--primario-extra-light);

                                &:first-child {
                                    border-bottom-left-radius: var(--container-radius);
                                }

                                &:last-child {
                                    border-bottom-right-radius: var(--container-radius);
                                }
                            }
                        }

                        &.highlight {
                            background: none!important;
                        }
                    }

                    thead {
                        td {
                            background-color: var(--primario-highlight-light);
                        }
                    }

                    tbody {

                        tr {
                            background-color: transparent!important;

                            &:hover td {
                                background-color: var(--primario-highlight-medio);
                            }

                            td:first-of-type {
                                border-left: 1px solid var(--primario-extra-light);
                            }

                            th {
                                background-color: var(--primario-highlight-light);
                                border-radius: 0!important;

                                &:last-child {
                                    border-right: 1px solid var(--primario-extra-light);
                                }
                            }

                            &:last-child {

                                th {
                                    border-bottom-left-radius: var(--container-radius)!important;
                                    border-bottom-color: var(--primario-highlight-light);

                                    + td {
                                        border-bottom-left-radius: 0!important;
                                    }
                                }

                                td:first-of-type:not(:last-child) {
                                    border-bottom-left-radius: var(--container-radius);
                                }

                                td:last-of-type {
                                    border-bottom-right-radius: var(--container-radius);
                                }

                                td:only-of-type:not(:last-child) {
                                    border-bottom-left-radius: var(--container-radius);
                                    border-bottom-right-radius: var(--container-radius);
                                }
                            }

                            &#total-importe-hitos-matricula-row {

                                td {
                                    background-color: var(--primario-extra-light);
                                    font-size: calc(var(--body-fs) + 1px);
                                    font-weight: 500;

                                    &.total-importe-hitos-label {
                                        text-align: right;
                                    }
                                }
                            }

                            /* Gestión económica - Resumen económico */
                            &.primera {
                                td {
                                    border-top: 2px solid var(--primario-lighter);
                                }
                            }
                            /*totales*/
                            &.primera ~ tr:last-child {
                                td {
                                    background-color: var(--primario-extra-light);
                                    font-size: var(--h6-fs);
                                    font-weight: 500;
                                    border-width: 1px;
                                    border-color: var(--primario-lighter);
                                }
                            }
                        }
                    }
                }

                ~ .table-responsive, table ~ table {
                    margin-block: var(--20-10);
                }

                + .panel-footer {
                    margin-top: var(--40-30);
                }
            }

            /** LISTAS (unidades organizativas) **/
            ul.arbolHijo-sdweb {

                li.padre-sdweb {
                    margin-bottom: var(--15-10);

                    a {
                        font-size: var(--body-fs);
                        color: var(--primario);

                        &:hover {
                            text-decoration: none;
                            color: var(--primario-accent);
                        }
                    }
                }

                ul.arbolHijo-sdweb {
                    margin-top: var(--10-5);
                }
            }

            /***********************************/
            /* Formulario Editar DATOS GENERAL */
            /***********************************/
            form:not([name="form-detalle"]), form > div[id] {

                /* Subapartados */
                > .form-group {
                    float: none;
                    width: calc(100% - 4px);
                    margin-inline: 2px;
                    margin-bottom: var(--40-20);
                    padding: var(--20-10);
                    border: none;
                    border-radius: 0;
                    box-shadow: var(--shadow-form-group);

                    /* Título subapartado */
                    > label.control-label.grupo-campos-label {
                        margin: 0 0 var(--20-10);
                        font-size: var(--h5-fs);
                        color: var(--primario);
                        line-height: 1.1;
                    }

                    > .grupo-campos {
                        --gap: var(--15-10);
                        float: none;
                        padding: 0;
                        display: flex;
                        flex-wrap: wrap;
                        gap: var(--gap);

                        &:before, &:after {
                            display: none;
                        }

                        ~ .grupo-campos.row {
                            margin-top: var(--15-10)
                        }

                        > :is(.form-group, .form-field-input) {
                            flex: 1 1 calc(33.33% - var(--gap));
                            width: fit-content;
                            min-width: var(--form-item-min-width);
                            max-width: 100%;
                            margin: 0;
                            padding: 0;

                            /* form group width: 100% */
                            &[class*="12"] {
                                flex: 1 1 100%;
                            }

                            .radio {

                                label {
                                    position: relative;
                                    padding-left: var(--20-10);

                                    input {
                                        left: 0;
                                        margin: 2px 0 0!important;

                                        &:checked {
                                            --check-size: 16px;
                                            box-shadow: none;
                                        }
                                    }
                                }
                            }
                        }

                        label ~ div[class=""] {
                            --check-size: 16px;
                            --color: var(--primario-highlight);
                            --color-dark: var(--primario-medio-link);
                            position: relative;
                            top: 2px;
                            display: inline-flex !important;
                            width: var(--check-size);
                            height: var(--check-size);
                            margin-left: var(--10-5);
                            margin-right: var(--20-10);
                            padding: 0 !important;
                            border-radius: 4px;
                            overflow: hidden;

                            input[type="checkbox"]:checked {
                                --check-size: 16px;
                                position: absolute;
                                inset: 0;
                                /*margin: auto;*/
                                margin: auto 2px;
                                width: calc(var(--check-size) - 4px);
                                height: calc(var(--check-size) - 4px);
                                box-shadow: 0 0 0px 2px var(--color-dark, var(--secundario-dark));
                                accent-color: var(--color, var(--secundario));
                            }
                        }
                    }
                }

                /* Botones */
                > .form-group:not(.form-field-input) {
                    width: fit-content!important;
                    float: left!important;
                    margin: 0 var(--10-5) var(--15-10) 0!important;
                    padding: 0!important;
                    box-shadow: none!important;

                    > button {
                        width: fit-content;

                        &.btn.disabled {
                            opacity: 0.5;
                            color: var(--primario);
                            background-color: var(--primario-extra-light);
                            cursor: not-allowed;

                            &:hover {
                                color: var(--primario)!important;
                                background-color: var(--primario-extra-light)!important;
                            }
                        }
                    }
                }

                #buttons-table-ajax {
                    margin-bottom: var(--10-5);
                }

                /* SUBAPARTADOS CAJAS, PAGOS e HITOS */
                :is(#cajas, #pagos, #hitos):not(:empty) {
                    --gap: var(--15-10);
                    width: calc(100% - 4px);
                    margin-inline: 2px;
                    margin-block: var(--20-10) var(--40-20);
                    padding: var(--20-10)!important;
                    border: none;
                    border-radius: 0;
                    box-shadow: var(--shadow-form-group);
                    display: flex;
                    flex-direction: column;
                    /*flex-wrap: wrap;*/
                    float: none;
                    clear: both;

                    h3 {
                        color: var(--primario);
                        font-weight: 500;
                        margin-block: var(--15-10);
                        margin-inline: 0;
                        font-size: var(--h6-fs);
                    }

                    > .table-responsive {
                        max-width: 100%;
                        overflow: auto;
                        margin-bottom: var(--15-10);

                        table {
                            margin-bottom: var(--15-10);
                            color: var(--primario);

                            thead {

                                tr {

                                    th {
                                        border-bottom: none;
                                        border-right: none;
                                        border-left: 1px solid #fff;
                                        border-top: 1px solid #fff;
                                        border-radius: 0!important;
                                        font-size: var(--small-fs);

                                        &:first-child {
                                            border-left: 1px solid var(--primario-extra-light);
                                        }

                                        &:last-child {
                                            border-right: 1px solid var(--primario-extra-light);
                                        }

                                        &:only-child {
                                            border-left: 1px solid var(--primario-extra-light);
                                            border-right: 1px solid var(--primario-extra-light);
                                        }

                                    }

                                    &:first-of-type {

                                        th {
                                            background-color: var(--primario-lighter);

                                            &:first-child {
                                                border-left: 1px solid var(--primario-lighter);
                                            }

                                            &:last-child {
                                                border-right: 1px solid var(--primario-lighter);
                                            }

                                            &:only-child {
                                                border-left: 1px solid var(--primario-lighter);
                                                border-right: 1px solid var(--primario-lighter);
                                            }
                                        }
                                    }
                                }
                            }

                            tbody {

                                tr {

                                    td {
                                        border-bottom: none;
                                        border-right: none;
                                        border-left: 1px solid var(--primario-extra-light);
                                        border-top: 1px solid var(--primario-extra-light);
                                        border-radius: 0!important;
                                        font-size: var(--small-fs);

                                        &:last-of-type {
                                            border-right: 1px solid var(--primario-extra-light);
                                        }
                                    }

                                    &:last-of-type {

                                        td {
                                            border-bottom: 1px solid var(--primario-extra-light);

                                            &:first-child {
                                                border-bottom-left-radius: var(--container-radius);
                                            }

                                            &:last-child {
                                                border-bottom-right-radius: var(--container-radius);
                                            }

                                            &:only-child {
                                                border-bottom-left-radius: var(--container-radius);
                                                border-bottom-right-radius: var(--container-radius);
                                            }
                                        }
                                    }

                                    th {
                                        font-size: var(--body-fs);
                                        border-radius: 0 !important;
                                        border-color: var(--primario-extra-light);
                                    }
                                }

                                &.asignaturas {

                                    tr:nth-last-child(2) {
                                        td {
                                            border-bottom: 1px solid var(--primario-extra-light);

                                            &:first-of-type {
                                                border-bottom-left-radius: var(--container-radius)!important;
                                            }

                                            &:last-of-type {
                                                border-bottom-right-radius: var(--container-radius)!important;
                                            }

                                            &:only-of-type {
                                                border-bottom-left-radius: var(--container-radius)!important;
                                                border-bottom-right-radius: var(--container-radius)!important;
                                            }
                                        }
                                    }
                                }

                                /* Asignaturas ajenas */
                                &.tablaAsignaturaAjena {
                                    .form-group[class*="2"] {
                                        width: auto;
                                    }
                                }
                            }

                            tfoot {

                                td {
                                    border-radius: 0!important;
                                    font-size: var(--h6-fs);
                                    font-weight: 600;
                                    background-color: var(--primario-lighter);
                                }
                            }
                        }
                    }

                    .caja-footer {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        flex-wrap: wrap;
                        gap: var(--10-5);
                        padding: var(--15-10);
                        background-color: var(--primario-extra-light);
                        color: var(--primario);

                        > * {
                            flex: 0 0 fit-content;
                            padding: 0;
                            max-width: 100%;

                            span:not([id]) {
                                font-size: var(--small-fs);
                                font-style: italic;
                            }

                            span[id] {
                                margin-left: 5px;
                                font-weight: 500;
                            }
                        }

                        + .panel-footer {
                            display: none;
                        }

                    }
                }

                #pagos {

                    .table-responsive {

                        table {
                            width: fit-content;
                            max-width: 100%;
                            margin: 0;

                            tbody {

                                tr {
                                    display: flex;
                                    align-items: center;
                                    gap: 0;
                                    width: 100%;
                                    max-width: 100%;
                                    margin: 0 0 10px;
                                    padding: 0;

                                    th {
                                        display: flex;
                                        align-items: center;
                                        height: 100%;
                                        white-space: nowrap !important;
                                        margin: 0;
                                        padding-inline: var(--10-5) calc(var(--10-5) + 10px);
                                        padding-block: var(--10-5);
                                        background-color: var(--primario-lighter);
                                        font-size: var(--h6-fs) !important;
                                        font-weight: 500;
                                        line-height: 1;
                                        color: var(--primario-dark);
                                        clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
                                        z-index: 1;

                                        &:after {
                                            content: ':';
                                            margin-left: 2px;
                                        }

                                    }

                                    td {
                                        border: none!important;

                                        &:empty {
                                            display: none;
                                        }
                                    }

                                    td:not(:empty) {
                                        display: flex;
                                        align-items: center;
                                        width: max-content;
                                        height: 100%;
                                        background-color: var(--primario-extra-light);
                                        padding-inline: calc(var(--10-5) + 10px);
                                        padding-block: var(--10-5);
                                        margin-left: -10px;
                                        border-block: 1px solid var(--primario-extra-light)!important;
                                        line-height: 1;
                                        font-size: var(--h6-fs) !important;
                                        flex-grow: 1;

                                        &:first-of-type {
                                            clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
                                        }

                                        + td:not(:empty)  {

                                            margin-left: -8px;
                                            clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
                                        }
                                    }

                                    &:last-of-type {
                                        th, td {
                                            font-weight: 600;
                                        }
                                    }

                                    /* campo totalizador intermedio */
                                    td[colspan="3"]:empty {

                                        + td:last-of-type {
                                            margin-left: 0;
                                            font-weight: 600;
                                            width: calc(100% - 10px);
                                            clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
                                            justify-content: flex-end;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                /* Selects */
                select {
                    width: 100%;
                    height: 34px;
                    min-width: max-content;
                    float: none;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    padding: calc(var(--10-5) * 0.33) var(--30-20) calc(var(--10-5) * 0.33) var(--10-5);
                    border-radius: var(--form-radius);
                    color: var(--primario);
                    font-size: var(--body-fs);
                    border: 1px solid var(--primario);
                    background-color: #fff;
                    transition: var(--tr02);

                    &:hover {
                        background-color: inherit;
                    }

                    &:focus {
                        border-color: var(--primario-accent);
                        box-shadow: 0 0 6px 2px var(--primario-accent);
                    }
                }

                /* Totalizadores */
                #totalizadores {
                    flex: 1 1 100%;
                    padding: var(--20-10) !important;
                    line-height: 1.1;
                    background-color: var(--primario-extra-light);
                    border: none;
                    border-radius: 0;
                    color: var(--primario);


                    #total {
                        display: flex;
                        flex-wrap: wrap;

                        h3 {
                            flex: 1 1 100%;
                        }

                        p {
                            display: inline-flex;
                            flex: 1 1 calc(33.33% - var(--gap));
                            margin: 0;

                            .importe_texto {
                                margin: 0;
                                padding-inline: var(--10-5) calc(var(--10-5) + 10px);
                                padding-block: 5px;
                                background-color: var(--primario-highlight);
                                font-size: var(--body-fs);
                                color: var(--primario-dark);
                                clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
                                white-space: nowrap;
                            }

                            .importe_numero {
                                width: 100%;
                                margin-left: -10px;
                                font-size: var(--body-fs);
                                background-color: var(--primario-lighter);
                                padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                                padding-block: 5px;
                                color: var(--primario);
                            }
                        }
                    }
                }
            }

            /* Formulario editar Crear adaptaciones Alumno */
            form[name="ehabilisgestiondelaformacionbundle_titulacionadaptacion"] {

                > * {
                    flex: 1 1 calc(33.33% - var(--gap)) !important;
                    padding: 0 !important;
                    box-shadow: none!important;

                    &:not([class*="12"]) {
                        max-width: fit-content;
                    }
                }

                #cajas {
                    box-shadow: none!important;
                    padding: 0!important;
                }
            }

            /* Formulario editar Crear Reconocimientos Alumno */
            form[name="ehabilisgestiondelaformacionbundle_titulacionreconocimiento"], form[name="ehabilisgestiondelaformacionbundle_titulacionreconocimiento"] > div[id], form[name="ehabilisgestiondelaformacionbundle_titulacionadaptacion"], form[name="ehabilisgestiondelaformacionbundle_titulacionadaptacion"] > div[id] {
                :is(#cajas, #pagos, #hitos):not(:empty) {
                    margin-bottom: 0;

                    > .table-responsive {
                        padding: 0;

                        table {
                            border-collapse: collapse;

                            tbody {
                                &.asignaturas {
                                    tr {

                                        td[style*="#a79797"] {
                                            font-weight: 500;
                                            background-color:var(--primario-extra-light)!important;
                                        }

                                        td[rowspan] {
                                            border-bottom: 1px solid var(--primario-extra-light);
                                        }

                                        &:nth-last-child(2) {
                                            td {
                                                border-radius: 0!important;
                                            }
                                        }

                                        &.asignatura {

                                            + tr {
                                                td:nth-last-child(n-1) {
                                                    border-right: 1px solid var(--primario-extra-light);
                                                }

                                                /*td:last-child {
                                                    display: none;
                                                }*/
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            /* Formulario editar Grupo */
            #ehabilisgestiondelaformacionbundle_planformacioncursoagrupamientocurso_grupoNombre {
                float: none;
                display: flex;
                padding: 0;
                gap: var(--gap);
            }

            /* Formulario repartir plazas */
            #ehabilisgestiondelaformacionbundle_planformacioncurso_gruposAsignaturaActivos {

                * {
                    float: none;
                }

                #ehabilisgestiondelaformacionbundle_planformacioncurso_gruposAsignaturaActivos_0 {
                    display: flex;
                    gap: var(--gap);
                    padding: 0;

                    > * {
                        flex: 1 1 calc(33.33% - var(--gap));
                        max-width: fit-content;
                        padding: 0;

                        &:has( > .hidden) {
                            display: none;
                        }
                    }
                }

                #ehabilisgestiondelaformacionbundle_planformacioncurso_plazasMaximo, #ehabilisgestiondelaformacionbundle_planformacioncurso_plazasUsadas {
                    max-width: fit-content;
                }
            }

            /* Formulario Crear Fichero Cuaderno 57 */
            form[name="ehabilisgestiondelaformacionbundle_ficherocuaderno57"] {

                #buttons-table-ajax {
                    flex: 1 1 100%!important;
                }
            }

            /* Formulario Crear - modificar matrícula */
            form[name="ehabilisgestiondelaformacionbundle_planformacionmatricula"] {
                :is(#cajas, #pagos, #hitos):not(:empty) {
                    > .table-responsive {
                        table {
                            tr {
                                :is(th, td) {
                                    white-space: initial;
                                }

                                td:nth-last-of-type(2):has(+ .hidden) {
                                    border-right: 1px solid var(--primario-extra-light)!important;
                                }

                                &:nth-last-of-type(2) {
                                    td:nth-last-of-type(2):has(+ .hidden) {
                                        border-bottom-right-radius: var(--container-radius) !important;
                                    }
                                }
                            }

                            /* Asignaturas ajenas*/
                            tbody.tablaAsignaturaAjena {
                                td {
                                    .form-group {
                                        padding: 0;
                                        width: 100%;

                                        [id*="ehabilisgestiondelaformacionbundle_asignaturaajena_grupoNombre"]:not(input) {
                                            padding: 0;

                                            + div[id] {
                                                margin: auto;
                                                width: fit-content;
                                            }
                                        }
                                    }

                                    /*nota tipo */
                                    .notaTipo {
                                        + .select2.select2-container {
                                            .select2-selection__placeholder {
                                                margin-right: 20px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            /* Formulario crear / editar titulación y Noticia*/
            form[name*="ehabilisgestiondelaformacionbundle_titulacion"], form[name="ehabilisgestiondelaformacionbundle_noticia"] {

                > .form-group {

                    > .grupo-campos {

                        div[id] {
                            display: flex;
                            flex-wrap: wrap;
                            gap: var(--gap);
                            padding: 0;

                            > * {
                                flex: 1 1 calc(33.33% - var(--gap));
                                padding: 0;

                                input {
                                    width: 100%;
                                }
                            }
                        }

                        .grupo-campos{
                            display: flex;
                            flex-wrap: wrap;
                            gap: var(--gap);
                            padding: 0;

                            > * {
                                flex: 1 1 calc(33.33% - var(--gap));
                                padding: 0;

                                &[class*="12"] {
                                    flex: 1 1 100%;
                                }
                            }

                            /* Grupos de traducción */
                            &.grupo-traduccion {
                                float: none;

                                &:before, &:after {
                                    display: none;
                                }

                                > * {
                                    flex: 1 1 calc(33.33% - var(--gap))!important;
                                    margin: 0;
                                }

                                .grupo-campos[id*="subGrupo"] {
                                    flex-direction: column;

                                    > * {
                                        width: 100%;
                                        margin: 0;
                                    }
                                }

                                + [id*="div-add-traduccion"] {
                                    margin-top: var(--10-5);
                                    width: fit-content;

                                    input[type="button"] {
                                        padding: calc(var(--10-5) * 0.33) var(--10-5);
                                    }
                                }
                            }
                        }

                        #div-add-adjunt {
                            width: 100%;

                            input#button-add-adjunt {
                                flex: 0 1 auto;
                                padding: calc(var(--10-5) * 0.33) var(--10-5) calc(var(--10-5) * 0.33) calc(var(--10-5) * 2 + var(--h6-fs));
                            }
                        }
                    }

                    > .form-group {
                        padding: 0;

                        .grupo-campos {
                            --gap: var(--15-10);
                            display: flex;
                            flex-wrap: wrap;
                            gap: var(--gap);
                            padding: 0;

                            &:before, &:after {
                                display: none;
                            }

                            > * {
                                flex: 1 1 calc(33.33% - var(--gap));
                                padding: 0;

                                &[class*="12"] {
                                    flex: 1 1 100%;
                                }
                            }
                        }
                    }
                }
            }

            /* Formulario Crear - Inscripción */
            form[name*="ehabilisgestiondelaformacionbundle_planformacioncursosolicitud"] {

                #ehabilisgestiondelaformacionbundle_planformacioncursosolicitud {

                    > div {

                        &:first-of-type {
                            flex: 1 1 100%;
                        }
                    }
                }
            }

            /********************************/
            /** Visualizaciones en General **/
            /********************************/
            form[name="form-detalle"] {
                --gap: 4px;
                display: flex;
                flex-wrap: wrap;
                gap: var(--gap);
                width: calc(100% - 4px);
                margin-inline: 2px;
                margin-bottom: var(--40-20);
                padding: var(--20-10);
                border: none;
                border-radius: 0;
                box-shadow: var(--shadow-form-group);

                &:before, &:after {
                    display: none;
                }

                br {
                    display: none;
                }

                > .form-group {
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--gap);
                    width: 100%;
                    padding: 0;

                    &:before, &:after {
                        display: none;
                    }

                    &:has(> .estado_privado) {

                        .estado_privado {
                            margin: 0;
                            color: inherit;
                            border-radius: var(--full-radius);
                            padding: 5px var(--10-5);
                            font-size: var(--small-fs);
                            font-weight: 500;
                            border: none;
                            background-color: var(--danger);
                            color: white;
                            box-shadow: none;
                        }
                    }

                    /* Estado */

                    div.estado_detalle {

                        .well[class*="estado"] {
                            margin: 0;
                            display: inline-flex;
                            align-items: center;
                            border-radius: var(--full-radius);
                            padding: 5px var(--10-5);
                            font-size: var(--small-fs);
                            font-weight: 600;
                            border: 1px solid transparent;
                            background-color: transparent;
                            box-shadow: none;
                            white-space: nowrap;


                            &:is(.estado_ejecucion, .estado_aceptado, .estado_matriculado, .estado_iniciado, .estado_activo,.estado_sincronizado) {
                                background-color: #edf7e5;
                                color: var(--success-dark);
                                border-color: var(--success);
                            }

                            &.estado_preinscripcion {
                                background-color: #f3e8f6;
                                color: #7b1a96;
                                border-color: #ae00c4;
                            }

                            &.estado_publicado {
                                background-color: #e4f3f1;
                                color: #005c53;
                                border-color: #008175;
                            }

                            &.estado_certificacion  {
                                background-color: #e3f5f6;
                                color: #008a93;
                                border-color: #00b5c0;
                            }

                            &:is(.estado_solicitado, .estado_pendiente, .estado_validado, .estado_aprobado) {
                                background-color: var(--primario-highlight-light);
                                color: #0f5f93;
                                border-color: #1573b3;
                            }

                            &:is(.estado_cerrado, .estado_privado, .estado_rechazado, .estado_cancelada, .estado_inactivo,.estado_no_sincronizado) {
                                background-color: #fef2f2;
                                color: var(--danger-dark);
                                border-color: var(--danger);
                            }

                            &.estado_borrador {
                                background-color: #fdeef0;
                                color: #b3002a;
                                border-color: #e60032;
                            }

                            &:is(.estado_finalizada, .estado_finalizado) {
                                background-color: #f3f2e6;
                                color: #6b6928;
                                border-color: #b6b44f;
                            }

                            &.estado_bloqueado {
                                background-color: #efefef;
                                color: #3d3d3d;
                                border-color: #565656;
                            }

                            &.estado_matricula {
                                background-color: #feeeed;
                                color: #c42618;
                                border-color: #fc2e1d;
                            }
                        }
                    }

                    /*Label títulos*/
                    > label.grupo-campos-label.control-label:not(:empty) {
                        flex: 1 1 100%;
                        display: inline-block;
                        margin: var(--20-10) 0 var(--15-10);
                        padding: 0;
                        font-size: var(--h5-fs);
                        line-height: 1.1;
                        font-weight: 500;
                        color: var(--primario);
                        text-decoration: 2px underline var(--primario-accent);
                        background: none;

                        &:after {
                            color: inherit;
                            margin-left: -3px;
                        }
                    }

                    /* El div de la foto, como no tiene clase que lo identifique uso :has */
                    &:has(a img.img-responsive.miniatura) {
                        --size: var(--80-60);
                        background: none;

                        div[class*="col"]:has(a img.img-responsive.miniatura) {
                            flex: 1 1 100%;

                            label.control-label:empty {

                                + a {
                                    position: relative;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    width: var(--size);
                                    height: var(--size);
                                    aspect-ratio: 1;
                                    margin: 0 0 var(--20-10);
                                    overflow: hidden;
                                    border: 3px solid currentColor;
                                    box-shadow: var(--shadow-avatar);
                                    border-radius: var(--full-radius);
                                    padding: 0;
                                    background: none;
                                    color: var(--primario);

                                    > img.img-responsive.miniatura {
                                        position: absolute;
                                        inset: -100%;
                                        width: 100%;
                                        height: auto;
                                        object-fit: contain;
                                        margin: auto;
                                        padding: 0;
                                        background-color: #ffffff;
                                    }

                                    &:hover {
                                        color: var(--primario-accent);
                                    }
                                }
                            }
                        }

                        &:after {
                            display: none;
                        }


                    }
                    /***************************fin avatar *************************************/

                    > div[class*="col"] {
                        flex: 1 1 calc(33.33% - var(--gap));
                        display: flex;
                        align-items: center;
                        gap: 0;
                        width: fit-content;
                        max-width: 100%;
                        margin: 0;
                        padding: 0;

                        > div:not([class]) {
                            height: 100%;
                        }

                        /* div width:100% */
                        &[class*="12"] {
                            flex: 1 1 100%;
                        }

                        /* labels */
                        .control-label:not(:empty) {
                            display: flex;
                            align-items: center;
                            height: 100%;
                            white-space: nowrap;
                            margin: 0;
                            padding-inline: var(--10-5) calc(var(--10-5) + 10px);
                            padding-block: var(--10-5);
                            background-color: var(--primario-lighter);
                            font-size: var(--body-fs);
                            font-weight: 500;
                            line-height: 1;
                            color: var(--primario-dark);
                            clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);

                            &+ div[class=""] {
                                display: flex;
                                align-items: center;
                                flex-wrap: wrap;
                                width: calc(100% + 10px);
                                height: 100%;
                                margin: 0 0 0 -10px;
                                padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                                padding-block: var(--10-5);
                                border: none;
                                border-radius: 0;
                                box-shadow: none;
                                font-size: var(--body-fs);
                                line-height: 1;
                                color: var(--primario-dark);
                                background-color: var(--primario-extra-light);
                            }
                        }

                        .form-control {
                            width: 100%;
                            min-height: unset;
                            height: 100%;
                            margin: 0;
                            padding: 0;
                            border: none;
                            border-radius: 0;
                            box-shadow: none;
                            font-size: var(--body-fs);
                            color: var(--primario-dark);

                            > *:not(:empty) {
                                display: flex;
                                align-items: center;
                                width: calc(100% + 10px);
                                height: 100%;
                                background-color: var(--primario-extra-light);
                                padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                                padding-block: var(--10-5);
                                margin-left: -10px;
                                line-height: 1;
                            }
                        }

                        &.vich_file a, > a {
                            display: flex;
                            align-items: center;
                            width: calc(100% + 10px);
                            height: 100%;
                            background-color: var(--primario-extra-light);
                            padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                            padding-block: var(--10-5);
                            margin-left: -10px;
                            line-height: 1;

                            .icon_files {
                                content: url(../images/file_download.svg);
                                height: 28px;
                                width: auto;
                                background-color: white;
                                border-radius: var(--full-radius);
                                padding: 2px;
                            }

                            &:hover {
                                .icon_files {
                                    content: url(../images/file_download_bl.svg);
                                    background-color: var(--primario-accent);
                                }
                            }

                            &[href*="descarga"]:not(:has(img)) {
                                font-size: 0;
                                background-image: url('../images/icono_descarga_prim.svg');
                                width: 32px;
                                height: 32px;
                                margin-left: var(--10-5);
                                padding: 0;
                                line-height: 1;
                                background-color: #fff;
                                color: var(--primario);
                                box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
                                background-size: var(--h5-fs);
                                background-repeat: no-repeat;
                                background-position: top 3px center;
                                border-radius: 3px;
                                transition: var(--tr04);

                                &:hover {
                                    background-color: var(--primario-highlight) !important;
                                    color: var(--primario-dark) !important;
                                    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                                }
                            }

                            &[href*="descarga"]:has(img) {
                                background: none;
                                max-width: min(350px, 90%);
                                max-height: min(350px, 90%);
                            }
                        }

                        .well:not(:empty) {
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            width: calc(100% + 10px);
                            height: 100%;
                            overflow: auto;
                            margin:0 0 0 -10px;
                            padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                            padding-block: var(--10-5);
                            border: none;
                            border-radius: 0;
                            box-shadow: none;
                            background-color: var(--primario-extra-light);
                            font-size: var(--body-fs);
                            line-height: 1;
                            color: var(--primario-dark);

                            > * {
                                flex: 1 1 100%;
                            }
                        }

                        > .well:empty {
                            width: calc(100% + 10px);
                            height: 100%;
                            padding: 0;
                            margin-left: -10px;
                            margin-bottom: 0;
                            border: none;
                            border-radius: 0;
                            box-shadow: none;
                            background-color: var(--primario-extra-light);
                        }
                    }

                    /* Color asignatura */
                    .consulta-campo.colorAsignatura {
                        background-color: var(--primario-extra-light);

                        label:before {
                            content:'';
                            --size: calc(var(--body-fs) * 1.2);
                            width: var(--size);
                            height: var(--size);
                            aspect-ratio: 1 / 1;
                            float: left;
                            margin-right: 5px;
                            border-radius: var(--form-radius);
                            background-image: url(../images/colores.png);
                            background-size: cover;
                            background-repeat: no-repeat;
                            background-position: center;
                        }

                        .form-control {
                            width: auto;
                            height: 66%;
                            aspect-ratio: 1;
                            margin-left: var(--15-10);
                            border-radius: var(--form-radius);
                        }

                    }

                    /* Consulta-campo con tabla */
                    .consulta-campo.tabla, .consulta-campo:has(table) {
                        flex: 1 1 100%;
                        flex-direction: column;
                        align-items: stretch;

                        .control-label:not(:empty) {
                            width: 100%!important;
                            height: fit-content;
                            padding-inline: var(--20-10);
                            clip-path: unset;
                        }

                        /* Elementos vacíos */
                        .well:empty {
                            display: none;
                        }

                        .well:not(:empty) {
                            width: 100%!important;
                            max-width: 100%;
                            overflow: auto;
                            min-height: unset;
                            margin:0;
                            padding: var(--20-10) var(--10-5);

                            > * {
                                width: auto;
                                max-width: 100%;
                                line-height: 1.2;

                                &:has(table) {
                                    overflow: auto;
                                }
                            }
                        }
                    }

                    /* Tablas */
                    .table {
                        min-width: fit-content;
                        margin: 0;

                        &:not(:has(td:not(:empty))) {
                            display: none;
                        }

                        th {
                            padding: 5px 10px 0px;
                            color: var(--primario);
                            border-bottom: 2px solid var(--primario-light);
                            font-weight: 500;
                            background-color: var(--primario-lighter);
                            font-size: var(--body-fs);
                            white-space: nowrap;

                            &:first-child {
                                border-top-left-radius: var(--container-radius);
                            }

                            &:last-child {
                                border-top-right-radius: var(--container-radius);
                            }
                        }

                        td {
                            padding: var(--10-5);
                            border-top: none;
                            color: var(--primario);
                            border-bottom: 1px solid var(--primario-extra-light);
                            text-align: left;
                            font-size: var(--small-fs);
                            background-color: #fff;
                            white-space: nowrap;

                            p {
                                margin: 0;
                            }
                        }

                        tbody tr {
                            background: none;

                            &:last-child {

                                td {
                                    border-bottom: none;
                                }

                                td:first-child {
                                    border-radius: 0 0 0 var(--container-radius);
                                }

                                td:last-child {
                                    border-radius: 0 0 var(--container-radius) 0;
                                }

                                td:only-child {
                                    border-radius: 0 0 var(--container-radius) var(--container-radius);
                                }
                            }
                        }
                    }
                }
            }

            > div.row {
                --gap: 4px;
                display: flex;
                flex-wrap: wrap;
                gap: var(--gap);
                width: calc(100% - 4px);
                margin-inline: 2px;
                margin-bottom: var(--40-20);
                padding: var(--20-10);
                border: none;
                border-radius: 0;
                box-shadow: var(--shadow-form-group);

                &:has(.graficas-dashboard-container) {
                    padding: 0;
                    box-shadow: none;

                    .class-div-info {

                        + div {
                            margin-top: 0!important;
                        }
                    }
                }

                &:has(> .table-responsive:only-child):has(table):not(:has(td)) {
                    display: none!important;
                }

                &[class*="grafica-detalle"]:has(img[alt="Sin datos"]) {
                    display: none!important;
                }

                &[class*="tabla-detalle"] {
                    margin-bottom: 0 !important;
                    padding: 0 !important;
                    box-shadow: none !important;

                    /** TABLAS **/
                    .table-responsive {
                        margin: 0;
                        border: none;

                        table {
                            margin: 0;
                            border-collapse: separate;
                            border: none;

                            thead {

                                tr {

                                    &:first-of-type:not(:last-of-type) {

                                        th {
                                            background-color: var(--primario-lighter);
                                            font-size: calc(var(--body-fs) + 1px);
                                        }

                                        th:first-child {
                                            border-left-color: var(--primario-lighter);
                                            border-radius: var(--container-radius) 0 0 0;
                                        }

                                        th:last-child {
                                            border-right-color: var(--primario-lighter);
                                            border-radius: 0 var(--container-radius) 0 0;
                                        }

                                        th:only-child {
                                            border-left-color: var(--primario-lighter);
                                            border-right-color: var(--primario-lighter);
                                            border-radius: var(--container-radius) var(--container-radius) 0 0;
                                        }
                                    }

                                    ~ tr {

                                        th {
                                            border-radius: 0!important;

                                            &:not([class*="col"]) {
                                                border-left-color: #fff;
                                            }
                                        }
                                    }
                                }
                            }

                            tr {

                                :is(th, td) {
                                    padding: var(--10-5) var(--15-10);
                                    vertical-align: middle;
                                    white-space: nowrap;

                                    a, span.glyphicon-check {
                                        color: var(--primario-medio-link);
                                        margin: 0;

                                        &:hover {
                                            color: var(--primario-accent);
                                            text-decoration: none;
                                        }
                                    }
                                }

                                th {
                                    text-align: center;
                                    font-weight: 500;
                                    border-left: 1px solid var(--primario-extra-light);
                                    border-bottom: 1px solid white;
                                    background-color: var(--primario-extra-light);
                                    border-top-color: var(--primario-extra-light);
                                    color: var(--primario);

                                    ~ th {
                                        border-left-color: #fff;
                                    }

                                    &.sorted {
                                        position: relative;

                                        &:after {
                                            content: '';
                                            height: 5px;
                                            background-image: linear-gradient(var(--primario-extra-light) 0%, var(--primario-accent) 100%);
                                            width: 100%;
                                            position: absolute;
                                            left: 0;
                                            bottom: 0;
                                        }

                                        a {
                                            color: var(--primario-accent);
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            gap: 5px;

                                            &:after {
                                                color: inherit;
                                                transition: var(--tr04);
                                                font-family: var(--icono-ff);
                                                font-size: var(--h6-fs);
                                                font-weight: 900;
                                            }

                                            &.asc:after {
                                                content: '\f106';
                                            }

                                            &.desc:after {
                                                content: '\f107';
                                            }

                                            &:hover {
                                                color: var(--primario-medio-link);
                                            }
                                            &:focus {
                                                text-decoration: none;
                                            }
                                        }
                                    }

                                    &:first-of-type {
                                        border-radius: var(--container-radius) 0 0 0;
                                    }

                                    &:last-of-type {
                                        border-radius: 0 var(--container-radius) 0 0;
                                    }
                                    &:only-of-type {
                                        border-radius: var(--container-radius) var(--container-radius) 0 0;
                                    }

                                }

                                td {
                                    border-right: 1px solid var(--primario-extra-light);
                                    border-top: 1px solid var(--primario-extra-light);
                                    border-left: none;
                                    border-bottom: none;
                                    background-color: white;

                                    input:checked {
                                        --check-size: 14px;
                                    }


                                    &:first-child {
                                        border-left: 1px solid var(--primario-extra-light);
                                    }
                                }

                                &:last-child {

                                    td {
                                        border-bottom: 1px solid var(--primario-extra-light);

                                        &:first-child {
                                            border-bottom-left-radius: var(--container-radius);
                                        }

                                        &:last-child {
                                            border-bottom-right-radius: var(--container-radius);
                                        }
                                    }
                                }

                                &.highlight {
                                    background: none!important;
                                }
                            }

                            thead {
                                td {
                                    background-color: var(--primario-highlight-light);
                                }
                            }

                            tbody {

                                tr {
                                    background-color: transparent!important;

                                    &:hover td {
                                        background-color: var(--primario-highlight-medio);
                                    }

                                    td:first-of-type {
                                        border-left: 1px solid var(--primario-extra-light);
                                    }

                                    th {
                                        background-color: var(--primario-highlight-light);
                                        border-radius: 0!important;

                                        &:last-child {
                                            border-right: 1px solid var(--primario-extra-light);
                                        }
                                    }

                                    &:last-child {

                                        th {
                                            border-bottom-left-radius: var(--container-radius)!important;
                                            border-bottom-color: var(--primario-highlight-light);

                                            + td {
                                                border-bottom-left-radius: 0!important;
                                            }
                                        }

                                        td:first-of-type:not(:last-child) {
                                            border-bottom-left-radius: var(--container-radius);
                                        }

                                        td:last-of-type {
                                            border-bottom-right-radius: var(--container-radius);
                                        }

                                        td:only-of-type:not(:last-child) {
                                            border-bottom-left-radius: var(--container-radius);
                                            border-bottom-right-radius: var(--container-radius);
                                        }
                                    }
                                }
                            }
                        }

                        + .panel-footer {
                            margin-top: var(--40-30);
                        }
                    }
                }

                &:before, &:after {
                    display: none;
                }

                br {
                    display: none;
                }

                &:before, &:after {
                    display: none;
                }

                .consulta-campo.sdweb-show-grupo-label {
                    flex: 1 1 100%;
                    display: inline-block;
                    margin: var(--20-10) 0 var(--10-5);

                    label.control-label:not(:empty) {
                        margin: 0;
                        padding: 0;
                        font-size: var(--h5-fs);
                        line-height: 1.1;
                        font-weight: 500;
                        color: var(--primario);
                        text-decoration: 2px underline var(--primario-accent);
                        background: none;
                    }

                    &:after {
                        color: inherit;
                        margin-left: -3px;
                    }
                }

                .consulta-campo:not(.sdweb-show-grupo-label) {
                    flex: 1 1 calc(33.33% - var(--gap));
                    display: flex;
                    align-items: center;
                    gap: 0;
                    width: fit-content;
                    max-width: 100%;
                    margin: 0;
                    padding: 0;

                    /* Consulta-campo width:100% */
                    /* &[class*="12"] {
                        flex: 1 1 100%;
                    } */

                    /* labels */
                    .control-label:not(:empty) {
                        display: flex;
                        align-items: center;
                        height: 100%;
                        min-height: calc(var(--body-fs) + var(--10-5) * 2);
                        white-space: nowrap;
                        margin: 0;
                        padding-inline: var(--10-5) calc(var(--10-5) + 10px);
                        padding-block: var(--10-5);
                        background-color: var(--primario-lighter);
                        font-size: var(--body-fs);
                        font-weight: 500;
                        line-height: 1;
                        color: var(--primario-dark);
                        clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);

                        &+ div[class=""] {
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            width: calc(100% + 10px);
                            height: 100%;
                            min-height: calc(var(--body-fs) + var(--10-5) * 2);
                            margin: 0 0 0 -10px;
                            padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                            padding-block: var(--10-5);
                            border: none;
                            border-radius: 0;
                            box-shadow: none;
                            font-size: var(--body-fs);
                            line-height: 1;
                            color: var(--primario-dark);
                            background-color: var(--primario-extra-light);
                        }
                    }

                    .form-control {
                        width: 100%;
                        min-height: unset;
                        height: 100%;
                        margin: 0;
                        padding: 0;
                        border: none;
                        border-radius: 0;
                        box-shadow: none;
                        font-size: var(--body-fs);
                        color: var(--primario-dark);

                        > *:not(:empty) {
                            display: flex;
                            align-items: center;
                            width: calc(100% + 10px);
                            height: 100%;
                            background-color: var(--primario-extra-light);
                            padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                            padding-block: var(--10-5);
                            margin-left: -10px;
                            line-height: 1;
                        }
                    }

                    &.vich_file a, > a {
                        display: flex;
                        align-items: center;
                        width: calc(100% + 10px);
                        height: 100%;
                        background-color: var(--primario-extra-light);
                        padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                        padding-block: var(--10-5);
                        margin-left: -10px;
                        line-height: 1;

                        .icon_files {
                            content: url(../images/file_download.svg);
                            height: 28px;
                            width: auto;
                            background-color: white;
                            border-radius: var(--full-radius);
                            padding: 2px;
                        }

                        &:hover {
                            .icon_files {
                                content: url(../images/file_download_bl.svg);
                                background-color: var(--primario-accent);
                            }
                        }
                    }

                    .well:not(:empty) {
                        display: flex;
                        align-items: center;
                        width: calc(100% + 10px);
                        height: 100%;
                        overflow: auto;
                        margin:0 0 0 -10px;
                        padding-inline: calc(var(--10-5) + 10px) var(--10-5);
                        padding-block: var(--10-5);
                        border: none;
                        border-radius: 0;
                        box-shadow: none;
                        background-color: var(--primario-extra-light);
                        font-size: var(--body-fs);
                        line-height: 1;
                        color: var(--primario-dark);
                    }

                    > .well:empty {
                        width: calc(100% + 10px);
                        height: 100%;
                        padding: 0;
                        margin-left: -10px;
                        margin-bottom: 0;
                        border: none;
                        border-radius: 0;
                        box-shadow: none;
                        background-color: var(--primario-extra-light);
                    }
                }

                /* Color asignatura */
                .consulta-campo.colorAsignatura {
                    background-color: var(--primario-extra-light);

                    label:before {
                        content:'';
                        --size: calc(var(--body-fs) * 1.2);
                        width: var(--size);
                        height: var(--size);
                        aspect-ratio: 1 / 1;
                        float: left;
                        margin-right: 5px;
                        border-radius: var(--form-radius);
                        background-image: url(../images/colores.png);
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                    }

                    .form-control {
                        width: auto;
                        height: 66%;
                        aspect-ratio: 1;
                        margin-left: var(--15-10);
                        border-radius: var(--form-radius);
                    }

                }

                /* Consulta-campo con tabla */
                .consulta-campo.tabla, .consulta-campo:has(table td:not(:empty)) {
                    flex: 1 1 100%;
                    flex-direction: column;
                    align-items: stretch;

                    .control-label:not(:empty) {
                        width: 100%!important;
                        height: fit-content;
                        padding-inline: var(--20-10);
                        clip-path: unset;
                    }

                    /* Elementos vacíos */
                    .well:empty {
                        display: none;
                    }

                    .well:not(:empty) {
                        width: 100%!important;
                        max-width: 100%;
                        overflow: auto;
                        min-height: unset;
                        margin:0;
                        padding: var(--20-10) var(--10-5);

                        > * {
                            width: auto;
                            max-width: 100%;
                            line-height: 1.2;

                            &:has(table) {
                                overflow: auto;
                            }
                        }
                    }
                }

                /* Tablas */
                .table {
                    min-width: fit-content;
                    margin: 0;

                    &:not(:has(td:not(:empty))) {
                        display: none;
                    }

                    th {
                        padding: 5px 10px 0px;
                        color: var(--primario);
                        border-bottom: 2px solid var(--primario-light);
                        font-weight: 500;
                        background-color: var(--primario-lighter);
                        font-size: var(--body-fs);
                        white-space: nowrap;

                        &:first-child {
                            border-top-left-radius: var(--container-radius);
                        }

                        &:last-child {
                            border-top-right-radius: var(--container-radius);
                        }
                    }

                    td {
                        padding: var(--10-5);
                        border-top: none;
                        color: var(--primario);
                        border-bottom: 1px solid var(--primario-extra-light);
                        text-align: left;
                        font-size: var(--small-fs);
                        background-color: #fff;
                        white-space: nowrap;

                        p {
                            margin: 0;
                        }
                    }

                    tbody tr {
                        background: none;

                        &:last-child {

                            td {
                                border-bottom: none;
                            }

                            td:first-child {
                                border-radius: 0 0 0 var(--container-radius);
                            }

                            td:last-child {
                                border-radius: 0 0 var(--container-radius) 0;
                            }

                            td:only-child {
                                border-radius: 0 0 var(--container-radius) var(--container-radius);
                            }
                        }
                    }
                }
            }

            /* Visualización Con cabecera (por ejemplo clases) */
            .cabecera, > .col-12:first-child {
                display: flex;
                flex-direction: column;
                --gap: var(--10-5);
                gap: var(--gap);
                margin-bottom: var(--20-10);

                .resumen-sdweb-contenedor.row {
                    display: flex;
                    flex-direction: column;
                    gap: var(--gap);

                    &:before, &:after {
                        display: none;
                    }

                    .resumen-sdweb-fila {
                        display: flex !important;
                        align-items: center;
                        gap: 0;
                        width: fit-content;
                        min-width: var(--form-item-min-width);
                        max-width: 100%;
                        margin: 0;
                        padding: 0;
                        font-size: 0;

                        > [class*="col"] {
                            display: flex !important;
                            align-items: center;
                            gap: 0;
                            width: fit-content;
                            min-width: var(--form-item-min-width);
                            max-width: 100%;
                            margin: 0;
                            padding: 0;
                            font-size: 0;
                        }

                        b {
                            display: flex;
                            align-items: center;
                            height: 100%;
                            white-space: nowrap;
                            margin: 0;
                            padding-inline: var(--10-5) calc(var(--10-5) + 10px);
                            padding-block: var(--10-5);
                            background-color: var(--primario-lighter);
                            font-size: var(--body-fs);
                            font-weight: 500;
                            line-height: 1;
                            color: var(--primario-dark);
                            clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
                        }

                        span {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: calc(100% + 10px);
                            height: 100%;
                            background-color: var(--primario-extra-light);
                            padding: var(--10-5);
                            margin-left: -10px;
                            font-size: var(--body-fs);
                            line-height: 1;
                        }
                    }
                }
            }

            /* Listado de unidad organizativa */
            .table-responsive {

                > div:not([class]) {
                    border: 1px solid var(--primario-extra-light);
                    border-radius: var(--container-radius);
                    padding: var(--15-10);

                    ul.arbolHijo-sdweb {
                        padding-left: var(--20-10);
                        font-size: var(--h6-fs);

                        li.padre-sdweb {
                            margin-block: var(--15-10);
                            font-weight: 500;

                            li.padre-sdweb {
                                font-weight: 400;
                                font-size: var(--body-fs);

                                li.padre-sdweb {
                                    font-weight: 300;
                                    font-size: var(--small-fs);
                                }
                            }

                            a {
                                color: var(--primario);

                                &:hover {
                                    color: var(--primario-medio-link);
                                    text-decoration: none;
                                }
                            }

                            &::marker {
                                color: var(--primario-medio-link);
                            }
                        }
                    }
                }
            }

            /* GRÁFICAS */
            .row.graficas_estadisticos {
                padding: 0;
                box-shadow: none;

                .panel-default-layout {
                    --column-w: 400px;
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(var(--column-w), 1fr));
                    grid-auto-flow: dense;
                    gap: var(--20-10);

                    > .separador-fila {
                        display: none;
                    }

                    > [class*="graph-"] {
                        margin: 0;
                        padding: var(--10-5);
                        box-shadow: var(--shadow-form-group);
                        border-radius: var(--form-radius);

                        .chart-title {
                            margin-block: var(--10-5);
                            text-align: center;
                            font-size: var(--h6-fs);
                            color: var(--primario);
                            font-weight: 500;
                        }

                        [id*="info-"] {
                            width: fit-content;
                            margin-block: var(--10-5);

                            a {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: fit-content;
                                height: 30px;
                                padding: calc(var(--10-5) * 0.33) var(--10-5);
                                border-radius: var(--btn-radius);
                                color: var(--primario) !important;
                                font-size: var(--body-fs);
                                border: 1px solid var(--primario);
                                transition: var(--tr02) !important;
                                background-color: var(--primario-extra-light);
                                letter-spacing: 1px;

                                &:hover, &:focus {
                                    background-color: var(--primario-highlight);
                                    text-decoration: none;
                                }
                            }
                        }

                        [id*="leyenda-"] {

                            ul:not(:empty) {
                                list-style: none;
                                width: fit-content;
                                margin-inline: auto;
                                margin-bottom: var(--15-10);
                                padding: var(--10-5);
                                background-color: var(--primario-highlight-medio);
                                border-radius: var(--form-radius);
                                box-shadow: var(--shadow-avatar);


                                li {
                                    color: var(--primario);
                                    margin-block: 5px;

                                    &:last-child {
                                        margin-bottom: 0;
                                    }
                                }
                            }
                        }

                        .chart-notes {
                            display: flex;
                            flex-direction: column;
                            gap: var(--10-5);

                            a {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: fit-content;
                                min-height: 30px;
                                padding: calc(var(--10-5) * 0.33) var(--10-5);
                                border-radius: var(--btn-radius);
                                color: var(--primario) !important;
                                font-size: var(--body-fs);
                                border: 1px solid var(--primario);
                                transition: var(--tr02) !important;
                                background-color: var(--primario-extra-light);
                                letter-spacing: 1px;

                                &:hover, &:focus  {
                                    background-color: var(--primario-highlight);
                                    text-decoration: none;
                                }
                            }

                        }

                        /* Sin datos */
                        &:has(img[alt="Sin datos"]) {
                            display: none;
                        }
                    }

                    .graph-informe-global-left {

                        > #user-acciones-trimestre-participantes {
                            box-shadow: none;
                            padding: 0;
                        }
                    }
                }
            }

            #graph-wrapper-acciones-formativas-fechas, #graph-wrapper-accion-formativa-generos {
                --column-w: 400px;

                canvas {
                    margin: 0;
                    padding: var(--10-5);
                    box-shadow: var(--shadow-form-group);
                    border-radius: var(--form-radius);
                    max-width: var(--column-w);
                    height: auto !important;
                }

                ~ [id*="info-"] {
                    width: fit-content;
                    margin-block: var(--10-5);

                    a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: fit-content;
                        height: 30px;
                        padding: calc(var(--10-5) * 0.33) var(--10-5);
                        border-radius: var(--btn-radius);
                        color: var(--primario) !important;
                        font-size: var(--body-fs);
                        border: 1px solid var(--primario);
                        transition: var(--tr02) !important;
                        background-color: var(--primario-extra-light);
                        letter-spacing: 1px;

                        &:hover, &:focus {
                            background-color: var(--primario-highlight);
                            text-decoration: none;
                        }
                    }
                }

                ~ [id*="leyenda-"] {

                    ul:not(:empty) {
                        list-style: none;
                        width: fit-content;
                        margin-inline: auto;
                        margin-bottom: var(--15-10);
                        padding: var(--10-5);
                        background-color: var(--primario-highlight-medio);
                        border-radius: var(--form-radius);
                        box-shadow: var(--shadow-avatar);


                        li {
                            color: var(--primario);
                            margin-block: 5px;

                            &:last-child {
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }

            #graph-wrapper-accion-formativa-generos {

                iframe {
                    display: none;
                }
            }

            div:has(.graph-informe-global-left, .graph-informe-global-right) {
                flex-wrap: wrap;

                > * {
                    flex: 1 1 100%;
                }

                .graph-informe-global-left {
                    --column-w: 400px;
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(var(--column-w), 1fr));
                    grid-auto-flow: dense;
                    gap: var(--20-10);

                    #user-acciones-trimestre-participantes/*, #user-participacion-accion-formativa*/ {
                        padding: var(--10-5);
                        box-shadow: var(--shadow-form-group);
                        border-radius: var(--form-radius);
                        height: auto !important;
                        margin-bottom: var(--30-20);
                        margin-inline: auto;

                        .chart-title {
                            margin-block: var(--10-5);
                            text-align: center;
                            font-size: var(--h6-fs);
                            color: var(--primario);
                            font-weight: 500;
                        }

                        [id*="graph-"] {
                            margin: 0;

                            ~ [id*="info-"] {
                                width: fit-content;
                                margin-block: var(--10-5);
                                margin-left: auto;

                                a {
                                    align-items: center;
                                    appearance: none;
                                    background-color: var(--primario-highlight-light);
                                    border-radius: 4px;
                                    border-width: 0;
                                    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
                                    box-sizing: border-box;
                                    color: var(--primario);
                                    cursor: pointer;
                                    display: inline-flex;
                                    justify-content: space-between;
                                    line-height: 1;
                                    list-style: none;
                                    overflow: hidden;
                                    padding: var(--10-5) var(--15-10);
                                    position: relative;
                                    text-align: left;
                                    text-decoration:none;
                                    transition: box-shadow .15s,transform .15s;
                                    user-select: none;
                                    -webkit-user-select: none;
                                    touch-action: manipulation;
                                    white-space: nowrap;
                                    will-change: box-shadow,transform;
                                    font-size: calc(var(--small-fs) - 2px);
                                    font-weight: 400;
                                    gap: 5px;

                                    &:focus {
                                        background-color: var(--primario-highlight) !important;
                                        color: var(--primario-dark) !important;
                                        box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                                    }

                                    &:hover {
                                        background-color: var(--primario-highlight) !important;
                                        color: var(--primario-dark) !important;
                                        box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                                        transform: translateY(-2px);
                                    }

                                    &:active {
                                        background-color: var(--primario-highlight) !important;
                                        color: var(--primario-dark) !important;
                                        box-shadow: #D6D6E7 0 3px 7px inset;
                                        transform: translateY(2px);
                                    }
                                }
                            }

                            ~ [id*="leyenda-"] {

                                ul:not(:empty) {
                                    list-style: none;
                                    width: fit-content;
                                    margin-inline: auto;
                                    margin-bottom: var(--15-10);
                                    padding: var(--10-5);
                                    background-color: var(--primario-highlight-medio);
                                    border-radius: var(--form-radius);
                                    box-shadow: var(--shadow-avatar);


                                    li {
                                        color: var(--primario);
                                        margin-block: 5px;

                                        &:last-child {
                                            margin-bottom: 0;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &:has(#user-acciones-trimestre-participantes) {
                        display: flex;
                    }
                }

                .graph-informe-global-right {

                    .chart-title {
                        margin-block: var(--10-5);
                        text-align: center;
                        font-size: var(--h6-fs);
                        color: var(--primario);
                        font-weight: 500;
                    }

                    &:has(.table-responsive) {
                        --gap: 4px;
                        display: flex;
                        flex-direction: column;
                        gap: var(--gap);
                        width: calc(100% - 4px);
                        margin-inline: 2px;
                        margin-bottom: var(--40-20);
                        padding: 0;
                        border: none;
                        border-radius: 0;
                        box-shadow: none;

                        .chart-title {
                            margin: 0 0 var(--30-15);
                            font-size: var(--h5-fs);
                            line-height: 1.1;
                            font-weight: 600;
                            color: var(--primario);
                            text-decoration: 2px underline var(--primario-accent);
                            background: none;
                            text-align: left;
                        }
                    }
                }
            }

            /*http://desarrollo.sdweb.es/producto_ehabilis_manager_corporate_base/app_dev.php/cursos/informe/matriculas/523*/
            > div.row[style="margin-left: 5%;"] {
                margin-left: 0!important;
                padding: 0;
                box-shadow: none;
            }

            .panel-default-layout:has([class*="graph-"]) {
                --column-w: 400px;
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(var(--column-w), 1fr));
                grid-auto-flow: dense;
                gap: var(--20-10);

                > .separador-fila {
                    display: none;
                }

                > [class*="graph-"] {
                    margin: 0;
                    padding: var(--10-5);
                    box-shadow: var(--shadow-form-group);
                    border-radius: var(--form-radius);

                    .chart-title {
                        margin-block: var(--10-5);
                        text-align: center;
                        font-size: var(--h6-fs);
                        color: var(--primario);
                        font-weight: 500;
                    }

                    [id*="info-"] {
                        width: fit-content;
                        margin-block: var(--10-5);

                        a {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: fit-content;
                            height: 30px;
                            padding: calc(var(--10-5) * 0.33) var(--10-5);
                            border-radius: var(--btn-radius);
                            color: var(--primario) !important;
                            font-size: var(--body-fs);
                            border: 1px solid var(--primario);
                            transition: var(--tr02) !important;
                            background-color: var(--primario-extra-light);
                            letter-spacing: 1px;

                            &:hover, &:focus {
                                background-color: var(--primario-highlight);
                                text-decoration: none;
                            }
                        }
                    }

                    [id*="leyenda-"] {

                        ul:not(:empty) {
                            list-style: none;
                            width: fit-content;
                            margin-inline: auto;
                            margin-bottom: var(--15-10);
                            padding: var(--10-5);
                            background-color: var(--primario-highlight-medio);
                            border-radius: var(--form-radius);
                            box-shadow: var(--shadow-avatar);


                            li {
                                color: var(--primario);
                                margin-block: 5px;

                                &:last-child {
                                    margin-bottom: 0;
                                }
                            }
                        }
                    }

                    .chart-notes {
                        display: flex;
                        flex-direction: column;
                        gap: var(--10-5);

                        a {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: fit-content;
                            min-height: 30px;
                            padding: calc(var(--10-5) * 0.33) var(--10-5);
                            border-radius: var(--btn-radius);
                            color: var(--primario) !important;
                            font-size: var(--body-fs);
                            border: 1px solid var(--primario);
                            transition: var(--tr02) !important;
                            background-color: var(--primario-extra-light);
                            letter-spacing: 1px;

                            &:hover, &:focus  {
                                background-color: var(--primario-highlight);
                                text-decoration: none;
                            }
                        }

                    }

                    /* Sin datos */
                    &:has(img[alt="Sin datos"]) {
                        display: none;
                    }
                }
            }
        }

        /* Footer Premium */
        .panel-footer {
            padding: var(--20-10);
            background-color: var(--primario);
            border: none;
            border-top: 2px solid var(--secundario);
            color: #fff;
            position: relative;

            &::before {
                display: none;
            }

            #deleteForm {
                box-shadow: none!important;
                padding: 0!important;
                margin: 0!important;
            }

            /* Fila de arriba */
            #total-registros {
                .total-count {
                    padding: 0;
                    margin-bottom: var(--20-10);
                    font-size: var(--small-fs);
                    font-style: italic;
                }
            }

            /* Fila de abajo */
            > .row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: var(--30-15) var(--10-5);
                width: 100%;

                &:before, &:after {
                    display: none;
                }

                > div {
                    flex: 1 1 fit-content;
                    display: flex;
                    gap: var(--10-5);
                    padding: 0;
                    text-align: unset;
                    max-width: 100%;

                    /* Paginación */
                    ul.pagination {
                        display: flex;
                        justify-content: center;
                        justify-content: flex-end;
                        align-items: center;
                        gap: var(--10-5);
                        flex-wrap: wrap;
                        width: fit-content;
                        width: 100%;
                        max-width: 100%;
                        margin: 0 0 0 auto;

                        li {
                            --size: var(--40-30);
                            width: fit-content;

                            a, span {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: var(--size);
                                height: var(--size);
                                aspect-ratio: 1 / 1;
                                margin: 0;
                                padding: 0;
                                border: none;
                                border-radius: var(--full-radius);
                                background-color: var(--primario-light);
                                font-size: var(--small-fs);
                                color: #fff;

                                &:hover {
                                    background-color: var(--primario-highlight);
                                    color: var(--primario);
                                }
                            }

                            &.active {

                                a, span {
                                    background-color: var(--primario-highlight);
                                    pointer-events: none;
                                    color: var(--primario);
                                }
                            }

                            &:first-child, &:last-child {

                                a, span {
                                    min-width: fit-content;
                                    padding-inline: var(--15-10);
                                    aspect-ratio: unset;
                                    width: auto;
                                }
                            }

                            &.disabled {

                                a, span {
                                    background-color: var(--primario-lighter);
                                    color: var(--primario-medio)
                                }

                                &:not(:first-child, :last-child) {

                                    a, span {
                                        background: transparent;
                                        align-items: flex-end;
                                        width: fit-content;
                                        aspect-ratio: unset;
                                        pointer-events: none;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


/*******************/
/*** CALENDARIOS ***/
/*******************/

#wrapper #page-wrapper .row {

    > #all-buttons {
        margin-top: 0;
        padding-block: var(--10-5);

        #head-buttons {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            height: fit-content;
            margin: 0 auto;

            #center-buttons {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                row-gap: var(--10-5);
                width: 500px;

                #change-view-buttons {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: var(--20-10);
                }

                button {
                    float: none;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: fit-content;
                    height: 30px;
                    padding: calc(var(--10-5) * 0.33) var(--10-5);
                    border-radius: var(--form-radius);
                    color: var(--primario);
                    font-size: var(--body-fs);
                    font-weight: 400;
                    font-family: var(--font-family);
                    border: 1px solid var(--primario);
                    transition: var(--tr02);
                    background-color: var(--primario-lighter);
                    box-shadow: var(--shadow-avatar);

                    &.selected {
                        font-weight: 500;
                        background-color: var(--primario-highlight);
                        color: var(--primario-dark);
                    }

                    &:hover {
                        background-color: var(--primario-highlight);
                    }

                    &.today {
                        background-color: #fff;

                        &:hover {
                            background-color: var(--primario-highlight);
                        }
                    }
                }

                #render-range {
                    flex: 1 1 100%;
                    margin-left: var(--10-5);
                    padding: 0;
                    font-family: var(--font-family);
                    font-size: var(--h5-fs);
                    font-weight: 800;
                    color: var(--primario);
                    line-height: 1;
                }
            }

            > .nav-button {
                --size: 34px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: var(--size);
                height: var(--size);
                margin-top: 3px;
                background: none!important;
                text-indent: unset!important;

                &:before {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: var(--size);
                    height: var(--size);
                    aspect-ratio: 1 / 1;
                    border: 1px solid currentColor;
                    border-radius: var(--full-radius);
                    font-family: var(--icono-ff);
                    font-size: var(--h5-fs);
                    font-weight: 800;
                    color: var(--primario);
                    line-height: 1;
                    background-color: #fff;
                    box-shadow: var(--shadow-avatar);
                }

                &:hover:before {
                    background-color: var(--primario-highlight);
                }

                &:active:before {
                    transform: scale(0.95);
                    transform-origin: center center;
                }

                &.prev {
                    &:before {
                        content: '\f104';
                        padding-right: 2px;
                    }
                }

                &.next {
                    &:before {
                        content: '\f105';
                        padding-left: 2px;
                    }
                }
            }
        }
    }

    #calendar-container {
        --bg-popup: #fff;
        --padding: var(--15-10);
        height: fit-content!important;
        margin-top: 0;
        font-family: var(--font-family);

        /*Popups ver más*/
        .tui-full-calendar-layout {

            .tui-full-calendar-floating-layer {
                width: fit-content !important;
                height: auto !important;
                max-width: 80% !important;
                max-height: 60vh !important;
                box-shadow: var(--shadow-modal-content);
                border-radius: 1rem;
                isolation: isolate;

                .tui-full-calendar-month-guide.tui-full-calendar-month-guide-focused, .tui-full-calendar-month-guide-cover {
                    inset: 0!important;
                    border-radius: var(--form-radius) !important;
                    height: inherit !important;
                    padding: 4px!important;

                    * {
                        color: rgba(0,0,0,0.3)!important;
                        padding: 0!important;
                    }
                }

                .tui-full-calendar-month-guide.tui-full-calendar-month-guide-focused {
                    background-color:  #e9f0fe !important;
                    opacity: 1;
                }

                .tui-full-calendar-month-more {
                    padding-bottom: 0;
                    border-radius: 1rem;
                    overflow: hidden;

                    .tui-full-calendar-month-more-list {
                        max-height: calc(60vh - 100px)!important;
                        padding-bottom: 2rem !important;
                        overflow: auto;

                        > div {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
        /***************/

        /*encabezado días semana VISTA MES */
        .tui-full-calendar-month-dayname {
            height: 31px !important;
            margin: 0;
            border: none !important;
            background: none !important;

            .tui-full-calendar-month-dayname-item {
                margin: 0 !important;
                background-color: #fff !important;
                color: #000;
                font-size: var(--body-fs);
                font-weight: 400;
                letter-spacing: 1px;
                border-bottom: 2px solid #000 !important;

                span {
                    color: inherit!important;
                    font-weight: inherit;
                }
            }
        }

        /*encabezado días semana VISTA SEMANA */
        .tui-full-calendar-week-container {
            isolation: isolate;

            .tui-full-calendar-dayname-layout {
                height: 31px !important;
                margin: 0;
                border: none !important;
                background: none !important;

                * {
                    max-height: 100%;
                }

                .tui-full-calendar-dayname-container {
                    background-color: #fff !important;
                    border: none!important;

                    .tui-full-calendar-dayname {
                        margin: 0 !important;
                        background-color: #fff !important;
                        border-bottom: 2px solid #000;

                        .tui-full-calendar-dayname-date-area {
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            span {
                                color: #000;
                                font-size: var(--body-fs);
                                font-weight: 400;
                                line-height: 1;
                                letter-spacing: 1px;

                                &.tui-full-calendar-dayname-date {
                                    font-weight: 600;
                                }
                            }
                        }
                    }
                }
            }
        }

        /* Grid de la semana VISTA MES */
        .tui-full-calendar-month-week-item {

            /* primera fila */
            &:first-child {
                .tui-full-calendar-weekday-grid-line {
                    border-top: none!important;
                }
            }

            /* última fila */
            &:last-child {

                .tui-full-calendar-weekday-grid-line {
                    border-bottom-width: 2px!important;
                }
            }

            .tui-full-calendar-weekday-grid-more-schedules {
                position: absolute;
                right: 0;
                color: var(--primario-accent);

                &:hover {
                    color: var(--primario);
                }
            }
        }

        .tui-full-calendar-weekday-grid {
            border-radius: 0!important;

            /*Colores de las casillas */
            /*Mes vigente*/
            .tui-full-calendar-weekday-grid-line {
                background: #fff  !important;
                border-left: 2px solid #000 !important;
                border-bottom: 2px solid #000 !important;
                border-top: none !important;

                &:last-child {
                    border-right: 2px solid #000 !important;
                }

                /* Día de hoy */
                &.tui-full-calendar-today .tui-full-calendar-weekday-grid-date-decorator {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 32px;
                    height: 32px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: auto;
                    border: 1px solid var(--secundario-dark);
                    background: var(--secundario) !important;
                    color: #3c3c3b;
                    font-weight: 500;
                }
            }

            /* Mes pasado y siguiente */
            .tui-full-calendar-weekday-grid-line.tui-full-calendar-extra-date {
                background: #eaeaea !important;

                .tui-full-calendar-weekday-grid-date {
                    color: #a3a3a3!important;
                }
            }
        }

        /* Grid de la semana VISTA SEMANA */
        .tui-full-calendar-timegrid-container  {

            /* Columna Horas */
            .tui-full-calendar-timegrid-timezone {
                border-right: 2px solid #000!important;
                background-color: #fff!important;

                .tui-full-calendar-timegrid-hour {

                    * {
                        color: #000;
                        font-size: var(--body-fs);
                        font-weight: 400;
                        line-height: 1;
                        letter-spacing: 1px;
                    }
                }

                .tui-full-calendar-timegrid-hourmarker {

                    .tui-full-calendar-timegrid-hourmarker-time {
                        color: #087fe7!important;
                        font-size: var(--h5-fs)!important;
                        font-weight: 600!important;
                    }
                }
            }

            /* Grid central */
            .tui-full-calendar-timegrid-right {

                /* Filas */
                .tui-full-calendar-timegrid-h-grid {
                    background-color: #fff !important;

                    /*filas*/
                    .tui-full-calendar-timegrid-gridline {
                        border-bottom: 2px solid #000 !important;

                        &:last-child {
                            border-bottom: 4px solid var(--primario-extra-light);
                        }
                    }
                }

                /* Columnas */
                .tui-full-calendar-timegrid-schedules {

                    .tui-full-calendar-timegrid-schedules-container {
                        height: 100%;

                        .tui-full-calendar-time-date {
                            border-right: 2px solid #000 !important;

                            /*CLASES Y EVENTOS */

                            .tui-full-calendar-time-date-schedule-block-wrap {
                                margin-right: 0!important;

                                .tui-full-calendar-time-date-schedule-block {
                                    min-width:65px;
                                    margin: 2px;
                                    padding: 0!important;

                                    &:hover {

                                        .tui-full-calendar-time-schedule {
                                            box-shadow: 0 0 8px 2px #fff;
                                            z-index: 9998;
                                            transition: var(--tr02);

                                            ~ .tui-full-calendar-time-resize-handle {
                                                z-index: 9999;
                                                transition: var(--tr02);
                                            }
                                        }
                                    }

                                    /* Notas del calendario */
                                    .tui-full-calendar-time-schedule {
                                        color: #000!important;
                                        border-radius: var(--form-radius) !important;



                                        .tui-full-calendar-time-schedule-content {
                                            --padding: 3px;
                                            width: 100%;
                                            max-height: 100%;
                                            display: block;
                                            padding: var(--padding);
                                            border: 1px solid #000 !important;
                                            border-radius: var(--form-radius) !important;
                                            overflow: hidden;
                                            color: inherit;

                                            span.title-hour:not(:empty) {
                                                padding: 3px;
                                                display: flex;
                                                align-items: center;
                                                background-color: #ccc;
                                                color: #000;
                                                border-bottom: 1px solid currentColor;
                                                line-height: 1;
                                                font-weight: 500;
                                                font-size: var(--small-fs);
                                                margin-top: calc(var(--padding) * -1);
                                                margin-inline: calc(var(--padding) * -1);
                                                margin-bottom: var(--padding);
                                            }
                                        }

                                        /* Colores */
                                        /* Cursos*/
                                        &[class*="course"] {
                                            --color: #35aedd;
                                        }

                                        /* Tareas */
                                        &[class*="assing"] {
                                            --color: #ff6ed6;
                                        }

                                        /* Videoconferencia */
                                        &[class*="videoconference"] {
                                            --color: #fdc666;
                                        }

                                        /* Última hora */
                                        &[class*="notice"] {
                                            --color: #00f526;
                                        }

                                        /* Festivo */
                                        &[class*="festivo"] {
                                            --color:  #ff1818;
                                        }

                                        /*Cambio el color de la letra según el color de fondo*/
                                        &[style*="background-color:#000000"] {
                                            color: #fff!important;

                                            .tui-full-calendar-time-schedule-content {
                                                border-color: #3c3c3b!important
                                            }
                                        }

                                        /* CLASE VALIDADADA */
                                        &.validada {
                                            .tui-full-calendar-time-schedule-content {
                                                span.title-hour:not(:empty) {
                                                    &:after {
                                                        content: '';
                                                        width: var(--small-fs);
                                                        height: var(--small-fs);
                                                        margin-left: auto;
                                                        background-image: url(../images/validada.png);
                                                        background-size: var(--small-fs);
                                                        background-position: center;
                                                        background-repeat: no-repeat;
                                                    }
                                                }
                                            }
                                        }

                                        /* CLASE RESERVADA */
                                        &.reservada {
                                            .tui-full-calendar-time-schedule-content {
                                                span.title-hour:not(:empty) {
                                                    &:after {
                                                        content: '';
                                                        width: var(--small-fs);
                                                        height: var(--small-fs);
                                                        margin-left: auto;
                                                        background-image: url(../images/reservada3.png);
                                                        background-size: var(--small-fs);
                                                        background-position: center;
                                                        background-repeat: no-repeat;
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    .tui-full-calendar-time-resize-handle.handle-x {
                                        background-color: #3c3c3b;
                                        margin-left: 1px !important;
                                        height: 8px;
                                        bottom: 0px;
                                        width: 100%;
                                        background-position: center;
                                        filter: invert(1);
                                        border-radius: 0 0 var(--form-radius) var(--form-radius);
                                        border: 1px solid #ccc;
                                    }
                                }
                            }

                            &:last-child {
                                margin-left: -4px;
                            }
                        }

                        /* Hoy */
                        .tui-full-calendar-today {
                            background-color: rgba(255,255,255,0);

                            .tui-full-calendar-time-date-schedule-block-wrap {
                                background-color: rgba(var(--primario-rgb), 0.06);
                            }
                        }
                    }

                }

                /* Líneas */
                .tui-full-calendar-timegrid-hourmarker {

                    [class*="tui-full-calendar-timegrid-hourmarker-line"] {
                        border-color: #087fe7!important;
                        border-width: 2px!important;
                        box-shadow: 0 2px 4px #25dbf3, 0 -2px 4px #25dbf3;

                        &[style*="border-top: none;"] {
                            box-shadow: none;
                        }
                    }

                    .tui-full-calendar-timegrid-todaymarker {
                        background-color: #087fe7 !important;
                        box-shadow: 0 0px 4px 2px #25dbf3;
                        z-index: 9;
                    }
                }

            }

        }

        /* Nota del día */
        .tui-full-calendar-weekday-schedule {
            --color: var(--secundario);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: fit-content !important;
            padding: 0;
            border-radius: var(--form-radius) !important;
            box-shadow: var(--shadow-avatar);
            color: #3c3c3b !important;
            margin-top: 10px;
            background-color: var(--primario-extra-light) !important;

            &:before {
                content: '';
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                border-radius: var(--form-radius) !important;
            }

            &:hover:before {
                background-color: rgba(255,255,255,0.2);
                transition: var(--tr02);
            }

            * {
                padding: 0;
                color: inherit!important;
                font-size: var(--small-fs);
                line-height: 1.5;
            }

            .tui-full-calendar-weekday-schedule-title {
                padding: 2px 4px;
                border: 1px solid var(--secundario-dark);
                border-radius: var(--form-radius);
                width: 100%;

                .title-hour:not(:empty) {
                    height: 100%;
                    display: block;
                    float: left;
                    margin-left: -4px;
                    margin-right: 4px;
                    padding: 4px;
                    border-top-left-radius: var(--form-radius);
                    border-bottom-left-radius: var(--form-radius);
                    background-color: #ccc;
                    font-size: var(--small-fs) !important;
                    font-weight: 500;
                    color: #000 !important;
                    width: 50px;
                }
            }
        }

        .tui-full-calendar-weekday-schedule-block  {
            margin-top: -10px!important;
        }

        /* POPUPS */

        .tui-full-calendar-popup.tui-full-calendar-popup-detail {
            --color: #000;

            /*contenedor*/
            .tui-full-calendar-popup-container {
                width: 400px;
                min-width: unset;
                height: auto;
                padding: 0 !important;
                background-color: #fff;
                box-shadow: var(--shadow-modal-content);
                border-radius: var(--form-radius);
                position: relative;

                /*encabezado*/
                .tui-full-calendar-section-header {
                    background-color: var(--primario-highlight);
                    padding: calc(var(--padding) / 2) var(--padding);
                    border-radius: var(--form-radius) var(--form-radius) 0 0;

                    .tui-full-calendar-schedule-title {
                        display: inline-block;
                        width: 100%;
                        text-align: center;
                        font-size: var(--h6-fs);
                        font-weight: 600;
                        line-height: 1.2;
                        color: var(--color);

                        * {
                            all: inherit;
                        }
                    }
                }

                /*detalles*/
                .tui-full-calendar-section-detail {
                    margin-bottom: 0;
                    padding: 10px 15px;

                    .container-fluid > .row {

                        /*ETIQUETAS*/
                        label {
                            margin-bottom: 0;
                        }

                        /* Clase validada y reservada */
                        &.clase-validada, &.clase-reservada {
                            --size: 25px;
                            position: absolute;
                            top: calc(var(--size) * -0.5);
                            right: calc(var(--size) * -0.5);
                            width: var(--size);
                            height: var(--size);
                            font-size: 0;

                            &:before {
                                content: '';
                                width: var(--size);
                                height: var(--size);
                                margin-left: auto;
                                background-size: contain;
                                background-position: center;
                                background-repeat: no-repeat;
                                background-color: #e8e8e8;
                                border-radius: 50%;
                                box-shadow: 2px 2px 12px -5px #000, 2px -2px 12px -5px #000;
                            }
                        }

                        /*validada*/
                        &.clase-validada {

                            &:before {
                                background-image: url(../images/validada.png);
                            }

                        }

                        /*reservada*/
                        &.clase-reservada {

                            &:before {
                                background-image: url(../images/reservada.png);
                                border: 2px solid #000;
                                background-size: 70%;
                            }
                        }

                        &.reserva {
                            --size: 25px;
                            position: absolute;
                            top: calc(var(--size) * -0.5);
                            right: calc(var(--size) * -0.5);
                            width: var(--size);
                            height: var(--size);
                            font-size: 0;

                            &:before {
                                content: '';
                                width: var(--size);
                                height: var(--size);
                                margin-left: auto;
                                background-size: contain;
                                background-position: center;
                                background-repeat: no-repeat;
                                background-color: #e8e8e8;
                                border-radius: 50%;
                                box-shadow: 2px 2px 12px -5px #000, 2px -2px 12px -5px #000;
                                background-image: url(../images/reservada.png);
                                border: 2px solid #000;
                                background-size: 70%;
                            }
                        }

                        /*DOCENTES*/
                        &.docente, &:nth-of-type(1) {
                            margin-bottom: 10px;

                            label {
                                color: #000;
                            }
                        }

                        /*FECHAS*/
                        .date-label {
                            display: flex;
                            gap: 5px;
                            align-items: center;
                            justify-content: center;
                            margin-bottom: 15px;

                            /*inicio y fin*/
                            .date-init, .date-end {
                                color: #000;
                                border-radius: 0;
                                background-image: none;
                                position: relative;
                                padding: 5px 10px;
                                display: flex;
                                align-items: center;
                                gap: 7px;
                                margin: 0;

                                p {
                                    all: unset;
                                }

                                /*iconos*/
                                &:before {
                                    content: '';
                                    width: var(--body-fs);
                                    height: var(--body-fs);
                                    background-position: center;
                                    background-size: contain;
                                    background-repeat: no-repeat;
                                }
                            }
                            /*inicio*/
                            .date-init {
                                background-color: #39a935 !important;


                                /*icono*/
                                &:before {
                                    background-image: url(../images/calendar-icon-date-star-grafito.svg);
                                }
                            }

                            /*fin*/
                            .date-end {
                                background-color: #ebb53f !important;

                                /*icono*/
                                &:before {
                                    background-image: url(../images/calendar-icon-date-end-grafito.svg);
                                }
                            }

                        }

                        /*LUGAR*/
                        &.lugar, &:nth-of-type(3)  {
                            padding-bottom: 5px;
                            border-bottom: 1px solid #3c3c3b;
                            margin-bottom: 5px;

                            > b {
                                font-size: var(--body-fs);
                                text-decoration: underline 2px;
                                margin-bottom: 5px;
                            }

                            > div {
                                display: flex;
                                gap: 0 5px;
                                flex-wrap: wrap;

                                &:before, &:after {
                                    display: none;
                                }

                                * {
                                    margin: 0;
                                    padding: 0;
                                }
                            }
                        }

                        /*GRUPO*/
                        &.grupo, &:nth-of-type(4)  {
                            padding-bottom: 5px;
                            border-bottom: 1px solid #3c3c3b;
                            margin-bottom: 5px!important;

                            b {
                                margin-bottom: 5px;
                                font-size: var(--body-fs);
                                text-decoration: underline 2px;
                                color: #3c3c3b;
                            }

                            > div {
                                display: flex;
                                align-items: center;
                                gap: 0 5px;
                                flex-wrap: wrap;
                                padding: 0;

                                &:before, &:after {
                                    display: none;
                                }

                                * {
                                    line-height: var(--h6-fs);
                                    margin: 0;
                                    padding: 0;
                                }

                               .title {
                                    font-size: var(--body-fs);
                                    text-decoration: underline 2px;
                                    margin-bottom: 5px;
                                }
                            }
                        }
                    }

                    /* la fila de la etiqueta NO tiene bien puesta la clase */
                    [clas="row"], .etiqueta {
                        .schedule-label.description {
                            margin: 0;
                            font-size: var(--small-fs);
                            text-align: center;
                            background-color: #e8e8e8;
                            border-radius: 0;
                            padding: 5px;
                        }
                    }
                }
            }
            /*botones*/
            .tui-full-calendar-section-button {
                border: none;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                gap: 5px;
                margin-bottom: 10px;
                padding: 5px var(--15-10);

                div {
                    display: none;
                }

                button {
                    width: fit-content !important;
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    height: 30px;
                    margin: 0;
                    padding: calc(var(--10-5) * 0.33) var(--10-5);
                    border-radius: var(--form-radius);
                    color: var(--primario);
                    font-size: var(--body-fs);
                    font-weight: 400;
                    font-family: var(--font-family);
                    border: 1px solid var(--primario);
                    transition: var(--tr02);
                    background-color: var(--primario-lighter);
                    gap: 5px;

                    * {
                        transition: var(--tr02);
                    }

                    .tui-full-calendar-icon {
                        margin: 0;
                        position: unset;
                        width: var(--small-fs);
                        height: var(--small-fs);
                        background-size: 12px;
                        background-position: center;
                        background-repeat: no-repeat;

                        /*Edit*/
                        &.tui-full-calendar-ic-edit {
                            background-image: url('data:image/svg+xml,<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="%233d2a55"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M0 0h48v48H0z" fill="none"></path><g id="Shopicon"><rect x="33.172" y="4.343" transform="matrix(0.7071 -0.7071 0.7071 0.7071 3.473 29.5565)" width="8.485" height="12.485"></rect><polygon points="27.172,12 4,35.172 4,44 12.829,44 38.829,18 36,20.828 "></polygon></g></g></svg>');
                            filter: none;
                            background-size: cover;
                        }

                        /*Borrar*/
                        &.tui-full-calendar-ic-delete {
                            background-image: url('data:image/svg+xml,<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="%233d2a55"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M0 0h48v48H0z" fill="none"></path><g id="Shopicon"><path d="M42,8H32c0-2.206-1.794-4-4-4h-8c-2.206,0-4,1.794-4,4H6v4h36V8z"></path><path d="M22,36h-4V16h-8v24.286C10,42.334,11.794,44,14,44h20c2.206,0,4-1.666,4-3.714V16h-8v20h-4V16h-4V36z"></path></g></g></svg>');
                            filter: none;
                            background-size: cover;
                        }

                        /*Editar Clase Mastra */
                        &.tui-full-calendar-popup-edit-master {
                            background-image: url('data:image/svg+xml,<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="%233d2a55"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M0 0h48v48H0z" fill="none"></path><g id="Shopicon"><rect x="33.172" y="4.343" transform="matrix(0.7071 -0.7071 0.7071 0.7071 3.473 29.5565)" width="8.485" height="12.485"></rect><polygon points="27.172,12 4,35.172 4,44 12.829,44 38.829,18 36,20.828 "></polygon></g></g></svg>');
                            filter: none;
                            background-size: cover;
                        }
                    }

                    .tui-full-calendar-content {
                        width: fit-content;
                        min-width: unset;
                        height: auto;
                        position: unset;
                        font-size: var(--small-fs);
                        color: inherit!important;
                    }

                    &:hover, &:focus {
                        background-color: var(--primario-highlight)!important;
                        border-color: var(--primario-dark)!important;
                        color: var(--primario-dark) !important;

                        &.tui-full-calendar-popup-delete {
                            background-color: var(--danger)!important;
                            border-color: var(--danger-dark);
                            color: #fff!important;

                            .tui-full-calendar-icon {
                                filter: brightness(0) invert(1);
                            }
                        }
                    }
                }
            }

            /* Barra superior */
            .tui-full-calendar-popup-top-line {
                /*--height: 8px;
                left: 0;
                right: 0;
                width: calc(100% - var(--padding) * 2);
                height: var(--height);
                margin: -2px auto auto;
                background-color: var(--color) !important;
                box-shadow: 0px -2px 8px -2px var(--primario-dark);
                border-radius: var(--form-radius);*/
                display: none;
            }

            /* Flechas bocadillo*/
            #tui-full-calendar-popup-arrow {

                &.tui-full-calendar-arrow-left {

                    .tui-full-calendar-popup-arrow-fill {
                        border-right-color: var(--bg-popup);
                    }
                }

                &.tui-full-calendar-arrow-right {

                    .tui-full-calendar-popup-arrow-fill {
                        border-left-color: var(--bg-popup);
                    }
                }
            }
        }

        /* Colores según el tipo de nota del calendario */
        :is([class*="schedule-"], [class*="popup-"]) {

            /* Cursos*/
            &[class*="course"] {
                --color: #35aedd;
            }

            /* Tareas */
            &[class*="assing"] {
                --color: #ff6ed6;
            }

            /* Videoconferencia */
            &[class*="videoconference"] {
                --color: #fdc666;
            }

            /* Última hora */
            &[class*="notice"] {
                --color: #00f526;
            }

            /* Festivo */
            &[class*="festivo"] {
                --color:  #ff1818;

                .tui-full-calendar-popup-container {
                    aspect-ratio: unset;
                }
            }
        }
    }
}

/* Ajustillos varios */
.panel-heading + .advertencia:has(p:not(:empty)) {
    margin-top: var(--15-10);
    background-color: #f4b1b3;
    padding: var(--15-10);
    border: 2px solid var(--danger);
    border-radius: var(--form-radius);
    width: fit-content;
    margin-inline: auto;

    p {
        margin: 0;
    }
}

.estado-inscripcion-button {

    br {
        display: none;
    }
}

/* Listado seguimiento fundae */
#wrapper #page-wrapper {
    > .row {
        .graficas-seguimiento-container {
            display: flex;
            flex-wrap: wrap;
            gap: var(--15-10);
            justify-content: center;
            margin-top: var(--15-10);

            > [class*="graph-informe-global"] {
                flex: 1 1 400px;
                max-width: 500px;
                margin: 0;
                padding: var(--10-5);
                box-shadow: var(--shadow-form-group);
                border-radius: var(--form-radius);
                height: auto !important;

                .chart-title {
                    margin-block: var(--10-5);
                    text-align: center;
                    font-size: var(--h6-fs);
                    color: var(--primario);
                    font-weight: 500;
                }

                canvas {
                    max-width: 100%;
                    height: auto !important;
                    padding: 0!important;
                    box-shadow: none!important;
                }
            }
        }
    }
}

/* GESTIÓN DE ROLES Y PERMISOS  - Recursos */
.buscador-roles {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--10-5);

    > * {
        padding: 0;
        width: fit-content;
        text-align: left;
    }
}

#jerarquiaPermisos {
    width: calc(100% - 4px);
    margin-block: var(--15-10) var(--40-30);
    padding: var(--20-10);
    box-shadow: var(--shadow-form-group);

    /* Nodo */
    .jstree-node:not(.jstree-leaf) {

        /* Cerrado */
        &.jstree-closed {

            > .jstree-icon.jstree-ocl {
                background: none;

                &:before{
                    content: '\f105';
                    font-family: var(--icono-ff);
                    font-weight: 900;
                    font-size: var(--h5-fs);
                    font-style: normal;
                    color: var(--primario-medio);

                    &:hover {
                        color: var(--primario-accent);
                    }
                }
            }
        }

        /* Abierto */
        &.jstree-open {

            > .jstree-icon.jstree-ocl {
                background: none;

                &:before{
                    content: '\f107';
                    font-family: var(--icono-ff);
                    font-weight: 900;
                    font-size: var(--h5-fs);
                    font-style: normal;
                    color: var(--primario-medio);

                    &:hover {
                        color: var(--primario-accent);
                    }
                }
            }
        }
    }

    /* fila seleccionada */
    .jstree-wholerow-clicked {
        background: none;
    }

    /* fila hover */
    .jstree-wholerow-hovered {
        background: none;
        background-color: var(--primario-highlight-light);
    }

    /* fila normal */
    .jstree-anchor {
        margin-bottom: 5px;
    }

    & .jstree-clicked {
        color: var(--primario-accent);
        font-weight: 500;

        & .jstree-icon.jstree-checkbox {
            border-color: var(--primario-medio-link);
            background-color: var(--primario-highlight);
            color: var(--primario-medio-link);
            background-image: url(../images/check_recursos.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    }

    & .jstree-icon.jstree-checkbox {
        --check-size: 16px;
        width: var(--check-size);
        height: var(--check-size);
        margin: 3px 6px 3px 0;
        border: 2px solid #8f8f9d;
        border-radius: 4px;
        background: none;
    }
}

#wrapper #page-wrapper {
    > .row {
        .panel-body {

            form {

                /* apartados */
                .seccion {
                    float: none;
                    width: calc(100% - 4px);
                    margin-inline: 2px;
                    margin-bottom: var(--40-20);
                    padding: var(--20-10);
                    border: none;
                    border-radius: 0;
                    box-shadow: var(--shadow-form-group);

                    /* Select maestro */
                    &.maestro {
                        margin-bottom: var(--15-10);
                        margin-inline: 0px;
                        width: 100%;
                        max-width: 100%;
                        box-shadow: none;
                        background-color: rgba(var(--primario-rgb), 0.05);
                    }

                    /*Título apartado*/
                    label.grupo-campos-label {
                        margin: 0 0 var(--20-10);
                        font-size: var(--h5-fs);
                        color: var(--primario);
                        line-height: 1.1;

                        &:empty {
                            display: none;
                        }
                    }

                    /* grupo de campos */
                    .grupo-campos {
                        --gap: var(--15-10);
                        float: none;
                        padding: 0;
                        display: flex;
                        flex-wrap: wrap;
                        gap: var(--gap);

                        /*campos */
                        > .form-group, > .form-field-input {
                            flex: 1 1 calc(33.33% - var(--gap));
                            width: fit-content;
                            min-width: max(fit-content, var(--form-item-min-width));
                            max-width: 100%;
                            margin: 0;
                            padding: 0;

                            /* form group width: 100% */
                            &[class*="12"] {
                                flex: 1 1 100%;
                            }

                            /* Radio */
                            &.radio {

                                label {
                                    position: relative;
                                    padding-left: var(--20-10);

                                    input {
                                        left: 0;
                                        margin: 2px 0 0!important;
float: none;
                    width: calc(100% - 4px);
                    margin-inline: 2px;
                    margin-bottom: var(--40-20);
                    padding: var(--20-10);
                    border: none;
                    border-radius: 0;
                    box-shadow: var(--shadow-form-group);
                                        &:checked {
                                            --check-size: 16px;
                                            box-shadow: none;
                                        }
                                    }
                                }
                            }

                            /* Selects */
                            select {
                                width: 100%;
                                height: 34px;
                                min-width: max-content;
                                float: none;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                padding: calc(var(--10-5) * 0.33) var(--30-20) calc(var(--10-5) * 0.33) var(--10-5);
                                border-radius: var(--form-radius);
                                color: var(--primario);
                                font-size: var(--body-fs);
                                border: 1px solid var(--primario);
                                background-color: #fff;
                                transition: var(--tr02);

                                &:hover {
                                    background-color: inherit;
                                }

                                &:focus {
                                    border-color: var(--primario-accent);
                                    box-shadow: 0 0 6px 2px var(--primario-accent);
                                }
                            }

                            /* Botones interrogantes */
                            &.form-group-with-help {
                                display: flex;
                                gap: 0 10px;
                                flex-wrap: wrap;
                                height: max-content;

                                .btn.btn-success.modal-ayuda {
                                    --size: calc(var(--body-fs) * 1.3);
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    width: var(--size);
                                    height: var(--size);
                                    aspect-ratio: 1 / 1;
                                    padding: 0;
                                    border: none;
                                    border-radius: var(--full-radius);
                                    background-color: var(--primario);

                                    &:before {
                                        content: '?';
                                        font-family: var(--font-family);
                                        font-size: var(--body-fs);
                                        line-height: 1;
                                        letter-spacing: 0;
                                        font-weight: 500;
                                        color: #fff;
                                    }

                                    &:is(:hover, :active, :focus) {
                                        border-color: var(--primario-accent)!important;
                                        background-color: var(--primario-accent)!important;
                                        transition: var(--tr04);
                                    }

                                    + div {
                                        display: flex;
                                        align-items: center;
                                        width: 100%!important;
                                        min-height: 34px;
                                    }
                                }
                            }

                            /* Div con Botones */
                            &.form-buttons {
                                width: fit-content!important;
                                float: left!important;
                                margin: 0 var(--10-5) var(--15-10) 0!important;
                                padding: 0!important;
                                box-shadow: none!important;

                                button {
                                    width: fit-content;

                                    &.btn.disabled {
                                        opacity: 0.5;
                                        color: var(--primario);
                                        background-color: var(--primario-extra-light);
                                        cursor: not-allowed;
                                    }

                                    &:hover {
                                        color: var(--primario)!important;
                                        background-color: var(--primario-extra-light)!important;
                                    }
                                }
                            }
                        }

                    }
                }

                /* botones */
                .form-group.botones {
                    display: flex;
                    gap: var(--10-5);
                    justify-content: flex-end;
                    flex-wrap: wrap;
                    padding: 0 !important;
                    box-shadow: none !important;
                    width: 100% !important;
                    float: none !important;
                    margin: 0 !important;

                    > * {
                        flex: 0 1 fit-content;
                    }
                }

                &.form-horizontal[name="comparativa_competencia"] {
                    padding: var(--20-10);
                    border: none;
                    border-radius: 0;
                    margin-bottom: var(--15-10);
                    margin-inline: 0px;
                    width: 100%;
                    max-width: 100%;
                    box-shadow: none;
                    background-color: rgba(var(--primario-rgb), 0.05);
                    display: flex;
                    gap: var(--15-10);
                    align-items: flex-start;
                    flex-wrap: wrap;

                    > .row {
                        flex: 1 1 calc(50% - var(--15-10) );
                        margin: 0!important;

                        &:last-of-type {
                            flex: 1 1 100%;

                            > div {
                                margin-top: 0;
                                margin-left: auto;
                                width: fit-content;
                            }
                        }

                        * {
                            max-width: 100%;
                            margin-inline: 0;
                        }
                    }
                }
            }

            /* Competencias js tree */
            #jstree_demo_div {
                --gap: 4px;
                display: flex;
                flex-wrap: wrap;
                gap: var(--gap);
                width: calc(100% - 4px);
                margin-inline: 2px;
                margin-bottom: var(--40-20);
                padding: var(--20-10);
                border: none;
                border-radius: 0;
                box-shadow: var(--shadow-form-group);

                ul.jstree-wholerow-ul {

                    li {

                        &.jstree-node {
                            display: flex;
                            width: 100%;
                            flex-wrap: wrap;

                            .jstree-wholerow {
                                display: none!important;
                            }

                            /*icono + - */
                            .jstree-icon.jstree-ocl {
                                width: 24px !important;
                                height: 24px !important;
                                min-width: 24px !important;
                                min-height: 24px !important;
                                justify-content: center;
                                align-items: center;
                                border-radius: var(--btn-radius) !important;
                                color: var(--primario) !important;
                                font-size: var(--body-fs);
                                border: none !important;
                                transition: var(--tr02) !important;
                                background-color: var(--primario-extra-light) !important;
                                letter-spacing: 1px;
                                box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
                                font-weight: 400;
                                font-style: normal;

                                &:hover {
                                    background-color: var(--primario-highlight) !important;
                                    color: var(--primario-dark) !important;
                                    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset !important;
                                    transform: translateY(-2px);
                                }

                                &:before {
                                    font-weight: 400;
                                    font-size: var(--body-fs);
                                }
                            }

                            a[id*="categoriacontractual"], .grupo-item, .competencia-item, .persona-item {
                                background-color: #fff !important;
                                border-left-color: var(--primario) !important;
                                color: var(--primario) !important;
                                font-size: var(--body-fs);
                                height: fit-content;
                                padding: var(--10-5) var(--15-10) !important;
                                min-height: unset !important;
                                box-shadow: var(--shadow-avatar) !important;

                                &.grupo-item, &.persona-item {
                                    border-left-color: var(--primario-light) !important;
                                }

                                &.competencia-item {
                                    border-left-color: var(--primario-lighter) !important;

                                    .competencia-name {
                                        margin: 0 !important;
                                        display: flex;
                                        align-items: center;

                                        .competencia-name-link {
                                            color: var(--primario-medio) !important;
                                            font-size: var(--body-fs);
                                        }

                                        &:hover {

                                            .competencia-name-link {
                                                color: var(--primario-accent) !important;
                                            }
                                        }
                                    }

                                }
                            }
                        }
                    }

                    ul.jstree-children {
                        flex: 1 1 100%;
                        margin-left: var(--30-15);
                    }
                }
            }

            /* DASHBOARD - COMPETENCIAS tarjetas claras */
            > .row.kpi-row {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: stretch;
                --gap: 5px;
                gap: var(--gap) !important;
                flex-wrap: wrap;
                background: #fff;
                color: var(--primario) !important;
                padding: 0 !important;
                border-radius: 0;
                margin-inline: 0 !important;
                box-shadow: none;

                > div {
                    flex: 1 1 max(200px, calc(25% - var(--gap))) !important;
                    min-width: max(200px, calc(25% - var(--gap))) !important;
                    min-height: 100%;

                    .kpi-card {
                        min-height: 100%;
                        color: var(--primario-dark, #161c31);
                        padding: var(--15-10);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 0;
                        border-radius: var(--form-radius, 8px);
                        background: linear-gradient(135deg, var(--primario-extra-light, #f0f2f8) 0%, var(--primario-lighter, #dde1ef) 100%);
                        border: 1px solid var(--primario-lighter, #ccd2e8);
                        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                        transition: transform 0.2s;

                        &:hover {
                            transform: translateY(-3px);
                            box-shadow: 0 4px 12px rgba(44,56,98,0.15);
                        }

                        .kpi-content {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            text-align: center;
                            gap: 8px;
                            flex: 1;
                            width: 100%;
                        }

                        /*icono*/
                        .kpi-icon-wrapper {
                            width: 38px;
                            height: 38px;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-shrink: 0;
                            background: var(--primario, #2c3862);
                            color: #fff;

                            .glyphicon {
                                --size: 18px;
                                width: var(--size);
                                height: var(--size);
                                min-width: var(--size);
                                min-height: var(--size);
                                background-size: contain;
                                background-position: center;
                                background-repeat: no-repeat;
                                font-size: 0;
                                display: flex;
                                filter: brightness(0) invert(1);

                                &.glyphicon-bookmark {
                                    background-image: url(../images/icono_total_compet.svg);
                                }

                                &.glyphicon-user {
                                    background-image: url(../images/icono_personas_compet.svg);
                                }

                                &.glyphicon-book {
                                    background-image: url(../images/icono_cursos_compet.svg);
                                }

                                &.glyphicon-signal {
                                    background-image: url(../images/icono_promedio_compet.svg);
                                }
                            }
                        }

                        .kpi-info {
                            flex: 1;
                            min-width: 0;
                            width: 100%;
                            text-align: center;
                        }

                        .kpi-value {
                            font-size: var(--h4-fs, 1.5em);
                            font-weight: 700;
                            line-height: 1.1;
                            margin: 0 0 4px 0;
                            padding: 0;
                            background: none;
                            border-radius: 0;
                            aspect-ratio: unset;
                            text-shadow: none;
                            box-shadow: none;
                            min-width: unset;
                            max-height: unset;
                            color: var(--primario, #2c3862);
                        }

                        .kpi-label {
                            opacity: 1;
                            margin: 0 0 5px 0;
                            font-size: var(--small-fs, 0.72em);
                            color: var(--primario-medio, #485ca1);
                            font-weight: 600;
                            text-transform: uppercase;
                            letter-spacing: 0.3px;
                            line-height: 1.3;
                        }
                    }
                }
            }

            > .graficas-row {
                display: flex;
                flex-wrap: wrap;
                margin-inline: 0;
                --gap: var(--15-10);
                gap: var(--gap);

                > .grafica-col {
                    flex: 1 1 calc(50% - var(--gap));
                    padding: var(--10-5);
                    box-shadow: var(--shadow-form-group);
                    border-radius: var(--form-radius);
                    height: auto !important;
                    margin-bottom: var(--gap);

                    .panel.panel-default {
                        margin: 0;
                        border: none;

                        .panel-heading {
                            padding: 0;
                            margin-block: var(--10-5);
                            text-align: center;
                            font-size: var(--h6-fs);
                            color: var(--primario);
                            font-weight: 500;
                            background: none;

                            &:before, &:after {
                                height: 0;
                                opacity: 0;
                                visibility: hidden;
                            }

                            strong {
                                font-weight: 500;
                            }
                        }
                    }
                }

                /* Brechas de competencia por puesto */
                + .row {
                    box-shadow: none;
                    padding: 0;

                    .panel.panel-default {
                        margin: 0;
                        border: none;
                        box-shadow: none;

                        .panel-heading {
                            padding: 0;
                            margin: 0;
                            font-size: var(--h5-fs);
                            line-height: 1.1;
                            font-weight: 500;
                            color: var(--primario);
                            text-decoration: 2px underline var(--primario-accent);
                            background: none;

                            &:before {
                             display: none!important;
                            }
                        }

                        .panel-body {

                            /** TABLAS **/
                            .table-responsive {
                                margin: 0;
                                border: none;

                                table {
                                    margin: 0;
                                    border-collapse: separate;
                                    border: none;

                                    thead {

                                        tr {

                                            &:first-of-type:not(:last-of-type) {

                                                th {
                                                    background-color: var(--primario-lighter);
                                                    font-size: calc(var(--body-fs) + 1px);
                                                }

                                                th:first-child {
                                                    border-left-color: var(--primario-lighter);
                                                    border-radius: var(--container-radius) 0 0 0;
                                                }

                                                th:last-child {
                                                    border-right-color: var(--primario-lighter);
                                                    border-radius: 0 var(--container-radius) 0 0;
                                                }

                                                th:only-child {
                                                    border-left-color: var(--primario-lighter);
                                                    border-right-color: var(--primario-lighter);
                                                    border-radius: var(--container-radius) var(--container-radius) 0 0;
                                                }
                                            }

                                            ~ tr {

                                                th {
                                                    border-radius: 0!important;

                                                    &:not([class*="col"]) {
                                                        border-left-color: #fff;
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    tr {

                                        :is(th, td) {
                                            padding: var(--10-5) var(--15-10);
                                            vertical-align: middle;
                                            white-space: nowrap;

                                            a, span.glyphicon-check {
                                                color: var(--primario-medio-link);
                                                margin: 0;

                                                &:hover {
                                                    color: var(--primario-accent);
                                                    text-decoration: none;
                                                }
                                            }
                                        }

                                        th {
                                            text-align: center;
                                            font-weight: 500;
                                            border-left: 1px solid var(--primario-extra-light);
                                            border-bottom: 1px solid white;
                                            background-color: var(--primario-extra-light);
                                            border-top-color: var(--primario-extra-light);
                                            color: var(--primario);

                                            ~ th {
                                                border-left-color: #fff;
                                            }

                                            &.sorted {
                                                position: relative;

                                                &:after {
                                                    content: '';
                                                    height: 5px;
                                                    background-image: linear-gradient(var(--primario-extra-light) 0%, var(--primario-accent) 100%);
                                                    width: 100%;
                                                    position: absolute;
                                                    left: 0;
                                                    bottom: 0;
                                                }

                                                a {
                                                    color: var(--primario-accent);
                                                    display: flex;
                                                    justify-content: center;
                                                    align-items: center;
                                                    gap: 5px;

                                                    &:after {
                                                        color: inherit;
                                                        transition: var(--tr04);
                                                        font-family: var(--icono-ff);
                                                        font-size: var(--h6-fs);
                                                        font-weight: 900;
                                                    }

                                                    &.asc:after {
                                                        content: '\f106';
                                                    }

                                                    &.desc:after {
                                                        content: '\f107';
                                                    }

                                                    &:hover {
                                                        color: var(--primario-medio-link);
                                                    }
                                                    &:focus {
                                                        text-decoration: none;
                                                    }
                                                }
                                            }

                                            &:first-of-type {
                                                border-radius: var(--container-radius) 0 0 0;
                                            }

                                            &:last-of-type {
                                                border-radius: 0 var(--container-radius) 0 0;
                                            }
                                            &:only-of-type {
                                                border-radius: var(--container-radius) var(--container-radius) 0 0;
                                            }

                                        }

                                        td {
                                            border-right: 1px solid var(--primario-extra-light);
                                            border-top: 1px solid var(--primario-extra-light);
                                            border-left: none;
                                            border-bottom: none;
                                            background-color: white;

                                            input:checked {
                                                --check-size: 14px;
                                            }


                                            &:first-child {
                                                border-left: 1px solid var(--primario-extra-light);
                                            }
                                        }

                                        &:last-child {

                                            td {
                                                border-bottom: 1px solid var(--primario-extra-light);

                                                &:first-child {
                                                    border-bottom-left-radius: var(--container-radius);
                                                }

                                                &:last-child {
                                                    border-bottom-right-radius: var(--container-radius);
                                                }
                                            }
                                        }

                                        &.highlight {
                                            background: none!important;
                                        }
                                    }

                                    thead {
                                        td {
                                            background-color: var(--primario-highlight-light);
                                        }
                                    }

                                    tbody {

                                        tr {
                                            background-color: transparent!important;

                                            &:hover td {
                                                background-color: var(--primario-highlight-medio);
                                            }

                                            td:first-of-type {
                                                border-left: 1px solid var(--primario-extra-light);
                                            }

                                            th {
                                                background-color: var(--primario-highlight-light);
                                                border-radius: 0!important;

                                                &:last-child {
                                                    border-right: 1px solid var(--primario-extra-light);
                                                }
                                            }

                                            &:last-child {

                                                th {
                                                    border-bottom-left-radius: var(--container-radius)!important;
                                                    border-bottom-color: var(--primario-highlight-light);

                                                    + td {
                                                        border-bottom-left-radius: 0!important;
                                                    }
                                                }

                                                td:first-of-type:not(:last-child) {
                                                    border-bottom-left-radius: var(--container-radius);
                                                }

                                                td:last-of-type {
                                                    border-bottom-right-radius: var(--container-radius);
                                                }

                                                td:only-of-type:not(:last-child) {
                                                    border-bottom-left-radius: var(--container-radius);
                                                    border-bottom-right-radius: var(--container-radius);
                                                }
                                            }
                                        }
                                    }
                                }

                                + .panel-footer {
                                    margin-top: var(--40-30);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ===== EVALUACIÓN DESEMPEÑO - RADIO BUTTONS DISTRIBUIDOS ===== */

/* Forzar que el control-group ocupe todo el ancho y use flexbox */
.form-group.col-lg-12 .control-group {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Cada label con radio button ocupa espacio equitativo */
.form-group.col-lg-12 .control-group label.radio-inline-label {
    flex: 1 1 auto !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    min-width: 150px !important;
    box-sizing: border-box !important;
    font-weight: normal !important;
    font-size: 15px !important;
}

/* Estado hover */
.form-group.col-lg-12 .control-group label.radio-inline-label:hover {
    background: #f5f5f5 !important;
}

/* Label que contiene input checked */
.form-group.col-lg-12 .control-group label.radio-inline-label:has(input:checked) {
    background: #e3f2fd !important;
}

/* Input radio dentro del label */
.form-group.col-lg-12 .control-group label.radio-inline-label input[type="radio"] {
    margin: 0 10px 0 0 !important;
    flex-shrink: 0 !important;
    position: static !important;
}


/** BOTONES EN GENERAL **/
.panel-heading, .panel-body, .panel-footer {

    .btn-group {
        gap: var(--10-5);
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .float-left {
            float: none;
        }

        form {
            margin: 0;
            display: inline-flex;
        }
    }

    button.btn, a.btn {
        all: unset;

        align-items: center;
        position: relative !important;
        inset: unset !important;
        appearance: none;
        background-color: var(--primario-highlight-light) !important;
        border-radius: 4px !important;
        border-width: 0;
        box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
        box-sizing: border-box;
        color: var(--primario) !important;
        cursor: pointer;
        display: inline-flex;
        justify-content: space-between;
        line-height: 1;
        list-style: none;
        overflow: hidden;
        padding: var(--10-5) var(--15-10);
        position: relative;
        text-align: left;
        text-decoration: none;
        transition: box-shadow .15s,transform .15s !important;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        white-space: nowrap;
        will-change: box-shadow,transform;
        font-size: calc(var(--small-fs) - 2px);
        font-weight: 400;
        gap: 5px;
        max-height: 32.35px;

        /* .caret {
            border-top: 6px solid var(--primario);
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
        } */

        .tui-full-calendar-content {
            font-size: calc(var(--small-fs) - 2px);
            font-weight: 400;
        }

        &:focus {
            background-color: var(--primario-highlight) !important;
            color: var(--primario-dark) !important;
            box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset !important;
        }

        &:hover {
            background-color: var(--primario-highlight) !important;
            color: var(--primario-dark) !important;
            box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset!important;
            transform: translateY(-2px);
        }

        &:active {
            background-color: var(--primario-highlight) !important;
            color: var(--primario-dark) !important;
            box-shadow: #D6D6E7 0 3px 7px inset !important;;
            transform: translateY(2px);
        }
    }
}

/* Ocultar campos ONE_TO_MANY / MANY_TO_MANY sin datos en vistas show.
   Se usa el selector del contenedor de campos del CRUD (.form-field-input)
   para no afectar a secciones custom con tablas cargadas por AJAX. */
.form-field-input:has(> .well tbody:empty),
.form-field-input:has(> .well tbody:not(:has(tr))) {
  display: none !important;
}


/** INFORMES **/
.graficas-dashboard-container {
    padding: 4px !important;
    margin: -4px -4px 0!important;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 8px) !important;

    > .graficas-row {
        --gap: var(--15-10);
        gap: var(--gap);
        width: calc(100% - 4px) !important;
        margin-inline: 2px !important;
        padding: 0;
        border: none;
        border-radius: 0;


        > .grafica-col {
            flex: 1 1 calc(50% - var(--gap));
            box-shadow: var(--shadow-form-group);
            border-radius: var(--form-radius);
            height: auto !important;
            margin-bottom: var(--gap);

            &:not(:has(*)) {
                display: none !important;
            }

            .panel.panel-default {
                margin: 0;
                padding: var(--10-5) !important;
                border: none;

                .panel-heading {
                    margin-block: var(--10-5);
                    text-align: center;
                    font-size: var(--h6-fs) !important;
                    color: var(--primario) !important;
                    font-weight: 500 !important;
                    background: none !important;

                    &:before, &:after {
                        height: 0;
                        opacity: 0;
                        visibility: hidden;
                    }

                    strong {
                        font-weight: 500;
                    }
                }

                .panel-body {

                    /* leyenda */
                    [id*="info-"] {
                        width: fit-content;
                        margin-bottom: var(--10-5);
                        margin-top: auto;
                        margin-left: auto;

                        a {
                            align-items: center;
                            appearance: none;
                            background-color: var(--primario-highlight-light);
                            border-radius: 4px;
                            border-width: 0;
                            box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
                            box-sizing: border-box;
                            color: var(--primario);
                            cursor: pointer;
                            display: inline-flex;
                            justify-content: space-between;
                            line-height: 1;
                            list-style: none;
                            overflow: hidden;
                            padding: var(--10-5) var(--15-10);
                            position: relative;
                            text-align: left;
                            text-decoration:none;
                            transition: box-shadow .15s,transform .15s;
                            user-select: none;
                            -webkit-user-select: none;
                            touch-action: manipulation;
                            white-space: nowrap;
                            will-change: box-shadow,transform;
                            font-size: calc(var(--small-fs) - 2px);
                            font-weight: 400;
                            gap: 5px;

                            &:focus {
                                background-color: var(--primario-highlight) !important;
                                color: var(--primario-dark) !important;
                                box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                            }

                            &:hover {
                                background-color: var(--primario-highlight) !important;
                                color: var(--primario-dark) !important;
                                box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                                transform: translateY(-2px);
                            }

                            &:active {
                                background-color: var(--primario-highlight) !important;
                                color: var(--primario-dark) !important;
                                box-shadow: #D6D6E7 0 3px 7px inset;
                                transform: translateY(2px);
                            }
                        }
                    }

                    [id*="leyenda-"] {

                        ul:not(:empty) {
                            list-style: none;
                            display: flex;
                            flex-direction: column;
                            gap: 5px;
                            width: fit-content;
                            margin-inline: auto;
                            margin-bottom: var(--15-10);
                            padding: var(--10-5);
                            background-color: var(--primario-highlight-light);
                            border-radius: var(--form-radius);
                            box-shadow: var(--shadow-avatar);


                            li {
                                font-size: calc(var(--small-fs) - 2px);
                                color: var(--primario);
                                margin-block: 0px;

                                strong {
                                    font-weight: 600!important;
                                }

                                &:last-child {
                                    margin-bottom: 0;
                                }
                            }
                        }
                    }

                    .chart-notes {
                        display: flex;
                        flex-direction: column;
                        gap: var(--10-5);
                        margin-top: auto;
                        background: none;
                        border: none;
                        color: #333;
                        font-size: 15px;
                        font-weight: 400;
                        text-align: left;
                        box-shadow: none;
                        line-height: 1.2;
                        border-radius: 0;
                        padding: 0;

                        a {
                            width: fit-content;
                            align-items: center;
                            appearance: none;
                            background-color: var(--primario-highlight-light);
                            border-radius: 4px;
                            border-width: 0;
                            box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
                            box-sizing: border-box;
                            color: var(--primario);
                            cursor: pointer;
                            display: inline-flex;
                            justify-content: space-between;
                            line-height: 1;
                            list-style: none;
                            overflow: hidden;
                            padding: var(--10-5) var(--15-10);
                            position: relative;
                            text-align: left;
                            text-decoration:none;
                            transition: box-shadow .15s,transform .15s;
                            user-select: none;
                            -webkit-user-select: none;
                            touch-action: manipulation;
                            will-change: box-shadow,transform;
                            font-size: calc(var(--small-fs) - 2px);
                            font-weight: 400;
                            gap: 5px;

                            &:focus {
                                background-color: var(--primario-highlight) !important;
                                color: var(--primario-dark) !important;
                                box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                            }

                            &:hover {
                                background-color: var(--primario-highlight) !important;
                                color: var(--primario-dark) !important;
                                box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
                                transform: translateY(-2px);
                            }

                            &:active {
                                background-color: var(--primario-highlight) !important;
                                color: var(--primario-dark) !important;
                                box-shadow: #D6D6E7 0 3px 7px inset;
                                transform: translateY(2px);
                            }
                        }
                    }
                }
            }
        }

        /* Brechas de competencia por puesto */
        + .row {

            .panel.panel-default {
                margin: 0;
                border: none;
                box-shadow: none;

                .panel-heading {
                    padding: 0;
                    margin: 0;
                    font-size: var(--h5-fs);
                    line-height: 1.1;
                    font-weight: 500;
                    color: var(--primario);
                    text-decoration: 2px underline var(--primario-accent);
                    background: none;
                }

                .panel-body {

                    /** TABLAS **/
                    .table-responsive {
                        margin: 0;
                        border: none;

                        table {
                            margin: 0;
                            border-collapse: separate;
                            border: none;

                            thead {

                                tr {

                                    &:first-of-type:not(:last-of-type) {

                                        th {
                                            background-color: var(--primario-lighter);
                                            font-size: calc(var(--body-fs) + 1px);
                                        }

                                        th:first-child {
                                            border-left-color: var(--primario-lighter);
                                            border-radius: var(--container-radius) 0 0 0;
                                        }

                                        th:last-child {
                                            border-right-color: var(--primario-lighter);
                                            border-radius: 0 var(--container-radius) 0 0;
                                        }

                                        th:only-child {
                                            border-left-color: var(--primario-lighter);
                                            border-right-color: var(--primario-lighter);
                                            border-radius: var(--container-radius) var(--container-radius) 0 0;
                                        }
                                    }

                                    ~ tr {

                                        th {
                                            border-radius: 0!important;

                                            &:not([class*="col"]) {
                                                border-left-color: #fff;
                                            }
                                        }
                                    }
                                }
                            }

                            tr {

                                :is(th, td) {
                                    padding: var(--10-5) var(--15-10);
                                    vertical-align: middle;
                                    white-space: nowrap;

                                    a, span.glyphicon-check {
                                        color: var(--primario-medio-link);
                                        margin: 0;

                                        &:hover {
                                            color: var(--primario-accent);
                                            text-decoration: none;
                                        }
                                    }
                                }

                                th {
                                    text-align: center;
                                    font-weight: 500;
                                    border-left: 1px solid var(--primario-extra-light);
                                    border-bottom: 1px solid white;
                                    background-color: var(--primario-extra-light);
                                    border-top-color: var(--primario-extra-light);
                                    color: var(--primario);

                                    ~ th {
                                        border-left-color: #fff;
                                    }

                                    &.sorted {
                                        position: relative;

                                        &:after {
                                            content: '';
                                            height: 5px;
                                            background-image: linear-gradient(var(--primario-extra-light) 0%, var(--primario-accent) 100%);
                                            width: 100%;
                                            position: absolute;
                                            left: 0;
                                            bottom: 0;
                                        }

                                        a {
                                            color: var(--primario-accent);
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            gap: 5px;

                                            &:after {
                                                color: inherit;
                                                transition: var(--tr04);
                                                font-family: var(--icono-ff);
                                                font-size: var(--h6-fs);
                                                font-weight: 900;
                                            }

                                            &.asc:after {
                                                content: '\f106';
                                            }

                                            &.desc:after {
                                                content: '\f107';
                                            }

                                            &:hover {
                                                color: var(--primario-medio-link);
                                            }
                                            &:focus {
                                                text-decoration: none;
                                            }
                                        }
                                    }

                                    &:first-of-type {
                                        border-radius: var(--container-radius) 0 0 0;
                                    }

                                    &:last-of-type {
                                        border-radius: 0 var(--container-radius) 0 0;
                                    }
                                    &:only-of-type {
                                        border-radius: var(--container-radius) var(--container-radius) 0 0;
                                    }

                                }

                                td {
                                    border-right: 1px solid var(--primario-extra-light);
                                    border-top: 1px solid var(--primario-extra-light);
                                    border-left: none;
                                    border-bottom: none;
                                    background-color: white;

                                    input:checked {
                                        --check-size: 14px;
                                    }


                                    &:first-child {
                                        border-left: 1px solid var(--primario-extra-light);
                                    }
                                }

                                &:last-child {

                                    td {
                                        border-bottom: 1px solid var(--primario-extra-light);

                                        &:first-child {
                                            border-bottom-left-radius: var(--container-radius);
                                        }

                                        &:last-child {
                                            border-bottom-right-radius: var(--container-radius);
                                        }
                                    }
                                }

                                &.highlight {
                                    background: none!important;
                                }
                            }

                            thead {
                                td {
                                    background-color: var(--primario-highlight-light);
                                }
                            }

                            tbody {

                                tr {
                                    background-color: transparent!important;

                                    &:hover td {
                                        background-color: var(--primario-highlight-medio);
                                    }

                                    td:first-of-type {
                                        border-left: 1px solid var(--primario-extra-light);
                                    }

                                    th {
                                        background-color: var(--primario-highlight-light);
                                        border-radius: 0!important;

                                        &:last-child {
                                            border-right: 1px solid var(--primario-extra-light);
                                        }
                                    }

                                    &:last-child {

                                        th {
                                            border-bottom-left-radius: var(--container-radius)!important;
                                            border-bottom-color: var(--primario-highlight-light);

                                            + td {
                                                border-bottom-left-radius: 0!important;
                                            }
                                        }

                                        td:first-of-type:not(:last-child) {
                                            border-bottom-left-radius: var(--container-radius);
                                        }

                                        td:last-of-type {
                                            border-bottom-right-radius: var(--container-radius);
                                        }

                                        td:only-of-type:not(:last-child) {
                                            border-bottom-left-radius: var(--container-radius);
                                            border-bottom-right-radius: var(--container-radius);
                                        }
                                    }
                                }
                            }
                        }

                        + .panel-footer {
                            margin-top: var(--40-30);
                        }
                    }
                }
            }
        }
    }
}

/* Estilos para el scroll de arriba */
.double-scroll-container {
    position: relative;
    width: 100%;
}

.scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    height: 20px;
    margin-bottom: 5px;
}

.scroll-top {
    -ms-overflow-style: scrollbar;
    scrollbar-width: auto;
}
/* Fin estilos para el scroll de arriba */
}