b:root {
    --primary: #03315f;
    --secondary: #1d79ff; /* light blue */
    --tertiary: #43d337; /* green */
}

/* GENERAL */
/*body {
    font-family: 'Lato', sans-serif;
    color: #2b2b2b;
    margin: 0 !important;
    transition: 0.5s all ease-in-out;
    background: #ffffff;
    background: radial-gradient(circle,rgba(255, 255, 255, 1) 54%, rgba(211, 224, 242, 1) 100%)
}*/

h1, h2, h3, h4, h5, h6 {
    color: var(--primary);
    font-weight: bold;
}

.links > a {
    float: right;
}

.big {
    font-size: 1.2rem;
}

h2, .x-big {
    font-size: 1.5rem;
}

.small {
    font-size: 0.8rem;
}

.x-small {
    font-size: 0.7rem;
}

.border-top {
    border-top: 1px solid #fff !important;
}

.border-bottom {
    border-bottom: 1px solid #222 !important;
}
/* GENERAL */

/*** HEADER ***/

.menu-nav-item a {
    color: #03315f !important;
}
/*** HEADER ENDS ***/

/*** HOME ***/
.form-signin {
    width: 100%;
    max-width: 500px;
    padding: 15px;
    margin: auto;
    margin-bottom: 10%;
    margin-top: 1%;
    box-shadow: 0px 11px 15px 13px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 5px 8px rgba(0, 0, 0, 0.12), 0px 5px 5px 5px rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
    
}

/* ESPM */
/*#espmHome .img-espm,
#studentLife .img-espm {
    border-radius: 1rem;
    display: block;
    height: 200px;
}

.programs .bg-img {
    height: 200px;
}

.groups img {
    height: 90px;
    width: auto;
}
*/
/* Events */
.event {
    /*border: 1px solid #222;*/
    /*border-bottom-left-radius: 1rem;*/
    /*border-bottom-right-radius: 1rem;*/
    background-color: #f7f7f7;
    position: relative;
}

    .event .date {
        background-color: var(--secondary);
        color: #fff;
        height: 70px;
        padding-top: 1rem;
        position: absolute;
        right: 5px;
        text-align: center;
        top: -1px;
        width: 50px;
    }

    .event .name {
        background-color: var(--tertiary);
        border-top-left-radius: 0.4rem;
        color: #fff;
        height: auto;
        position: absolute;
        left: -15px;
        top: 20px;
        width: auto;
    }

    .event:before {
        content: '';
        background-color: #229219;
        border-bottom-left-radius: 0.5rem;
        height: 10px;
        left: -15px;
        position: absolute;
        top: 48px;
        width: 15px;
        z-index: -1;
    }

    .event .event-content i {
        color: #1d79ff;
        opacity: 0.1;
    }

#slideEvents .carousel-indicators li {
    background-color: var(--primary);
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

#slideEvents .carousel-control-next,
#slideEvents .carousel-control-prev {
    width: 5%;
}
/* Events Ends*/

/* News */


  .otros {
    color: #03315f;
}
#news,
#related {
    background-color: var(--primary);
    color: #fff;
}
/* News Ends*/
#contact i,
#contact .phones a {
    color: #03315f; 
}

#contact .phones p,
#contact .phones p > a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#contact .phones i {
    font-size: 1.5rem;
}



/*** TEMPLATE PAGE ***/
#contentPage img,
body.single img {
    border-radius: 1rem;
}
/*** TEMPLATE PAGE ENDS***/

/*** COODINADORES */
#coordinadores .circle {
    background-position: top;
    height: 110px;
    width: 110px;
}
/*** COODINADORES ENDS*/

/*** CUERPOS COLEGIADOS ***/
#colegiados table tr > td,
#colegiados table tr > th {
    padding: 0;
}
/*** CUERPOS COLEGIADOS ENDS ***/


/*** COSTOS MATRICULA ***/
.container-matricula {
    border: 1px solid var(--primary);
    color: var(--primary);
}

    .container-matricula .matricula-header {
        background-color: #ddd;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }
/*** COSTOS MATRICULA ENDS***/


/*** PROGRAMA ACADEMICO ***/
#subheader {
    background: #041e42;
}

    #subheader .academic-program {
        padding-top: 6rem;
    }

        #subheader .academic-program .circle {
            background-position: top;
            height: 200px;
        }

#subInfo .row,
#featuresProgram {
    background-color: var(--primary);
    color: #fff;
}

    #featuresProgram hr {
        border: 1px solid #fff;
        width: 88%;
    }

#extraInfoProgram hr {
    background-color: var(--primary);
    border: none;
    height: 2px;
    width: 88%;
}

#featuresProgram ul > li,
#extraInfoProgram ul > li {
    margin-bottom: 1rem;
}

#extraInfoProgram .costos > p:first-of-type {
    align-items: center;
    display: flex;
    height: 2em;
    justify-content: center;
}
/*** PROGRAMA ACADEMICO ENDS***/

/*** BLOG ***/
#section-blog {
    background-color: var(--primary);
    color: #FFF;
}

#blog .carousel-control-prev,
#blog .carousel-control-next {
    color: var(--primary);
    opacity: 1;
    width: auto;
}

#blog .carousel-control-prev {
    left: -40px;
}

#blog .carousel-control-next {
    right: -40px;
}

#blog .carousel-indicators {
    bottom: -45px;
}

    #blog .carousel-indicators .active {
        background-color: var(--primary);
    }

    #blog .carousel-indicators li {
        background-color: #3a3a3a;
    }

.blog-02 h3:before,
.blog-02 h3:after {
    border-bottom: 1px solid #fff;
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 7%;
}

.blog-02 h3:before {
    margin-right: 10px;
}

.blog-02 h3:after {
    margin-left: 10px;
}

.widget-area ul > li > a,
.widget-area ul > li > a:visited,
.widget-area ul > li > a:active,
.widget-area ul > li > a:focus,
.post-navigation nav .nav-links a,
.post-navigation nav .nav-links span {
    color: var(--primary);
}

.wp-block-latest-posts,
.wp-block-categories {
    margin-left: 0;
}

    .wp-block-latest-posts li {
        display: block;
        padding: .75rem 1.25rem;
        border-bottom: 1px solid rgba(0,0,0,.125);
    }

.post-navigation nav {
    background-color: #fff !important;
}

    .post-navigation nav .nav-links a,
    .post-navigation nav .nav-links span {
        padding-right: 0.5rem;
    }

    .post-navigation nav .nav-links .current {
        font-weight: bold;
    }

.form-control, .form-control:focus {
    box-shadow: 0 0 0 0rem rgba(0,123,255,.25) !important;
    background: #eaeaea !important;
  
}

.btn-primary {
    color: #fff;
    background-color: #3E5167 !important;
    border-color: #03315f !important;
    border-radius: 43px !important;
    width: 70% !important;
}
/*** BLOG ENDS***/


/* MENU INSIDE PAGE */
.div-menu {
    border-bottom: 3px solid var(--primary);
}

ul.menu {
    padding: 0;
    margin-left: 0;
    margin-bottom: 0;
    text-align: center;
}

    ul.menu li {
        display: inline-flex;
        padding: 0.25rem 1rem;
        margin-bottom: 0;
    }

        ul.menu li > a {
            color: var(--primary);
        }

            ul.menu li > a:hover {
                text-decoration: underline;
            }
/* MENU INSIDE PAGE ENDS*/



/*** FOOTER ***/
#footer {
    background-image: url('/img/login/foto_footer.png');
    color: #fff;
    min-height: 626px;
    background-position: 50%;
    border-bottom: 7px solid #DF1306;
}

    #footer a {
        color: #FFF;
        display: block;
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    #footer hr {
        margin-top: 0;
        border-top: 1px solid #fff;
    }

    #footer .logos img {
        max-width: 80px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        filter: drop-shadow(2px 4px 6px #03315f);
    }

.transparency-white a {
    text-shadow: none !important;
}
/*** FOOTER ***/


.k-block, .k-draghandle, .k-grid-header, .k-grouping-header, .k-header, .k-pager-wrap, .k-treemap-tile, html .km-pane-wrapper .k-header {
    background-color: #DF1306 !important;
    color: white !important;
}

.k-window {
    background-color: #DF1306 !important;
}

.usrl {

    border-radius: 0px !important
}

.h4mensaje {
    color: #03315F !important;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.convocatoria-btn {
    background: #DF1306;
    padding: 10px 30px 10px 30px;
    border-radius: 10px;
    color: #FFFFFF !important;
    text-decoration:none!important;
}

    .convocatoria-btn:hover {
        background: #CFD8E1;
        padding: 10px 30px 10px 30px;
        color: #DF1306 !important;
        border-color: #DF1306 !important;
    }

#contact {
padding-top:150px;
}

:root {
    --md-primary: #14479C; 
    --md-primary-hover: #0036B3;
    --md-bg: #f0f2f5;
    --md-surface: #ffffff;
}

body {
    font-family: 'Roboto', sans-serif;
    background: var(--md-bg);
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: var(--md-surface);
    border: none; 
    overflow: hidden; 
}



.card-header-custom {
    background: radial-gradient(circle,rgba(255, 255, 255, 1) 27%, #0B749B 80%, #085D7C 100%);
    color: white;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
}

    .card-header-custom h3 {
        font-weight: 500;
        margin: 0;
        font-size: 1.5rem;
    }

    .card-header-custom .sub-text {
        font-weight: 300;
        opacity: 0.9;
        font-size: 0.9rem;
        margin-top: 5px;
    }

/* Material Floating Inputs override */
.form-floating > .form-control {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background-color: #f8f9fa;
}

    .form-floating > .form-control:focus {
        border-color: var(--md-primary);
        box-shadow: 0 0 0 4px rgba(98, 0, 238, 0.1);
        background-color: #fff;
    }

.form-floating > label {
    color: #6c757d;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--md-primary);
    font-weight: 500;
}

/* Password Toggle Eye */
.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    z-index: 5;
    background: none;
    border: none;
    padding: 0;
}

    .password-toggle:hover {
        color: var(--md-primary);
    }

/* Buttons */
.btn-primary-material {
    background-color: var(--md-primary);
    border-color: var(--md-primary);
    border-radius: 50px; /* Pill shape */
    padding: 10px 24px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: white;
    width: 100%;
}

    .btn-primary-material:hover {
        background-color: var(--md-primary-hover);
        border-color: var(--md-primary-hover);
        box-shadow: 0 4px 8px rgba(0,0,0,0.25);
        transform: translateY(-1px);
        color: white;
    }

    .btn-primary-material:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
    color: #888;
}

    .divider::before, .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #dee2e6;
    }

    .divider:not(:empty)::before {
        margin-right: .5em;
    }

    .divider:not(:empty)::after {
        margin-left: .5em;
    }

/* ============================================================
    Kendo Grid + Kendo Window
  
   ============================================================ */

:root {
    /* ---- Paleta institucional (ajusta sólo estas 3 líneas) ---- */
    --espm-acento: #C72233; /* rojo/terracota del encabezado actual */
    --espm-acento-osc: #8c2a0f;
    --espm-acento-suave: rgba(178, 58, 24, 0.08);
    /* ---- Neutros ---- */
    --espm-tinta: #1c1f26;
    --espm-tinta-2: #5a6270;
    --espm-linea: rgba(28, 31, 38, 0.08);
    --espm-fondo: #ffffff;
    --espm-fondo-2: #f7f8fa;
    /* ---- Forma y profundidad ---- */
    --espm-radio: 14px;
    --espm-radio-sm: 8px;
    --espm-sombra: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.08);
    --espm-transicion: 160ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* ============================================================
   1. Contenedor del grid
   ============================================================ */
.grid-espm.k-grid {
    border: 1px solid var(--espm-linea) !important;
    border-radius: var(--espm-radio);
    overflow: hidden; /* recorta las esquinas del header */
    background: var(--espm-fondo);
    box-shadow: var(--espm-sombra);
    font-family: inherit;
    color: var(--espm-tinta);
}

/* ============================================================
   2. Encabezado
   ============================================================ */
/* El tema Fluent aplica background-color al propio <thead> (.k-table-thead),
   por eso tapaba el degradado del contenedor. Se neutraliza por variable
   y además se pinta el degradado directamente sobre el thead. */
.grid-espm .k-grid-header,
.grid-espm .k-table-thead,
.grid-espm .k-table-header {
    --kendo-table-header-bg: transparent;
    --kendo-table-header-text: #ffffff;
    --kendo-table-header-border: transparent;
    --kendo-component-bg: transparent;
}

.grid-espm .k-grid-header,
.grid-espm .k-grid-header-wrap,
.grid-espm .k-table-thead,
.grid-espm .k-table-header,
.grid-espm thead.k-table-thead {
    border: 0 !important;
    border-color: transparent !important;
    background: linear-gradient(180deg, var(--espm-acento) 0%, var(--espm-acento-osc) 100%) !important;
    background-color: var(--espm-acento) !important;
}

    .grid-espm .k-grid-header th,
    .grid-espm .k-grid-header .k-table-th,
    .grid-espm .k-table-thead .k-table-th,
    .grid-espm .k-table-thead > .k-table-row > th {
        background: transparent !important;
        background-color: transparent !important;
        color: #fff !important;
        border: 0 !important;
        color: #fff;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        padding: 14px 20px;
        white-space: nowrap;
    }

        /* separador fino entre columnas del encabezado */
        .grid-espm .k-grid-header th + th,
        .grid-espm .k-grid-header .k-table-th + .k-table-th {
            box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.16);
        }

    /* línea de luz al pie del encabezado */
    .grid-espm .k-grid-header::after {
        content: "";
        display: block;
        height: 2px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%);
    }

/* ============================================================
   3. Filas
   ============================================================ */
.grid-espm .k-grid-content {
    background: var(--espm-fondo);
}

.grid-espm .k-grid td,
.grid-espm .k-table-td {
    border: 0 !important;
    border-bottom: 1px solid var(--espm-linea) !important;
    padding: 16px 20px;
    font-size: 0.95rem;
    color: var(--espm-tinta);
    position: relative;
    transition: color var(--espm-transicion), transform var(--espm-transicion);
}

.grid-espm tr:last-child td,
.grid-espm .k-table-row:last-child .k-table-td {
    border-bottom: 0 !important;
}

/* sin zebra: se ve más limpio, el hover hace el trabajo */
.grid-espm .k-grid tr.k-alt,
.grid-espm .k-table-alt-row {
    background: transparent !important;
}

/* --- Hover: riel de acento a la izquierda + desplazamiento sutil --- */
.grid-espm tbody tr {
    cursor: pointer;
    transition: background var(--espm-transicion);
}

    .grid-espm tbody tr td:first-child::before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        bottom: 6px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--espm-acento);
        transform: scaleY(0);
        transform-origin: center;
        transition: transform var(--espm-transicion);
    }

    .grid-espm tbody tr:hover {
        background: var(--espm-acento-suave) !important;
    }

        .grid-espm tbody tr:hover td:first-child::before,
        .grid-espm tbody tr.k-selected td:first-child::before,
        .grid-espm tbody tr.k-state-selected td:first-child::before {
            transform: scaleY(1);
        }

        .grid-espm tbody tr:hover td:first-child {
            transform: translateX(4px);
            color: var(--espm-acento-osc);
            font-weight: 500;
        }

    /* --- Selección --- */
    .grid-espm tbody tr.k-selected,
    .grid-espm tbody tr.k-state-selected,
    .grid-espm tbody tr.k-selected td,
    .grid-espm tbody tr.k-state-selected td {
        background: var(--espm-acento-suave) !important;
        color: var(--espm-acento-osc) !important;
    }

    /* --- Foco de teclado visible (accesibilidad) --- */
    .grid-espm tbody tr:focus,
    .grid-espm tbody tr:focus-visible,
    .grid-espm .k-table-row.k-focus {
        outline: none;
        box-shadow: inset 0 0 0 2px var(--espm-acento);
        border-radius: var(--espm-radio-sm);
    }

/* ============================================================
   4. Botón de la columna "Seleccione"
   ============================================================ */
.grid-espm .k-button,
.grid-espm .btn {
    border-radius: 999px;
    border: 1px solid var(--espm-linea);
    background: var(--espm-fondo-2);
    color: var(--espm-tinta-2);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 18px;
    box-shadow: none;
    transition: all var(--espm-transicion);
}

    .grid-espm tbody tr:hover .k-button,
    .grid-espm tbody tr:hover .btn,
    .grid-espm .k-button:hover,
    .grid-espm .btn:hover {
        background: var(--espm-acento);
        border-color: var(--espm-acento);
        color: #fff;
        box-shadow: 0 4px 12px rgba(178, 58, 24, 0.28);
    }

    .grid-espm .k-button:active,
    .grid-espm .btn:active {
        transform: translateY(1px);
        box-shadow: none;
    }

/* ============================================================
   5. Barra de desplazamiento delgada
   ============================================================ */
.grid-espm .k-grid-content,
.grid-espm .k-auto-scrollable,
.wnd-espm .k-window-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(28, 31, 38, 0.22) transparent;
}

    .grid-espm .k-grid-content::-webkit-scrollbar,
    .wnd-espm .k-window-content::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .grid-espm .k-grid-content::-webkit-scrollbar-thumb,
    .wnd-espm .k-window-content::-webkit-scrollbar-thumb {
        background: rgba(28, 31, 38, 0.2);
        border-radius: 999px;
    }

        .grid-espm .k-grid-content::-webkit-scrollbar-thumb:hover,
        .wnd-espm .k-window-content::-webkit-scrollbar-thumb:hover {
            background: rgba(28, 31, 38, 0.35);
        }

    .grid-espm .k-grid-content::-webkit-scrollbar-track,
    .wnd-espm .k-window-content::-webkit-scrollbar-track {
        background: transparent;
    }

/* ============================================================
   6. Ventana modal (Kendo Window)
   ------------------------------------------------------------
   El alcance funciona de dos formas, usa la que prefieras:
     a) sin tocar JS  ->  .k-window:has(#idPerfil)
     b) con clase     ->  $("#idPerfil").closest(".k-window").addClass("wnd-espm")
   ============================================================ */

/* ---- Fondo oscurecido ---- */
.k-overlay {
    background: rgba(16, 20, 28, 0.55) !important;
    backdrop-filter: blur(4px);
    opacity: 1 !important;
    animation: espm-overlay-in 200ms ease-out;
}

/* ---- Variables del tema Fluent, neutralizadas dentro de la ventana ---- */
:is(.wnd-espm, .k-window:has(#idPerfil)) {
    --kendo-window-bg: var(--espm-fondo);
    --kendo-window-border: transparent;
    --kendo-window-titlebar-bg: var(--espm-fondo);
    --kendo-window-titlebar-border: var(--espm-linea);
    --kendo-window-titlebar-text: var(--espm-tinta);
}

/* ---- Marco ---- */
:is(.wnd-espm, .k-window:has(#idPerfil)) {
    border: 0 !important;
    border-radius: 18px;
    overflow: hidden;
    background: var(--espm-fondo);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08), 0 24px 64px rgba(16, 24, 40, 0.22);
    animation: espm-window-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
    /* que nunca se salga de la pantalla, pese al width/height en línea */
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 48px) !important;
    flex-direction: column;
}

    /* Firma: filete de acento en el borde superior */
    :is(.wnd-espm, .k-window:has(#idPerfil))::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: linear-gradient(90deg, var(--espm-acento) 0%, var(--espm-acento-osc) 45%, rgba(178, 58, 24, 0.25) 100%);
        z-index: 2;
    }

    /* ---- Barra de título ---- */
    :is(.wnd-espm, .k-window:has(#idPerfil)) .k-window-titlebar {
        background: var(--espm-fondo) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--espm-linea) !important;
        padding: 18px 22px 16px;
        margin: 0;
        flex: 0 0 auto;
        cursor: move;
    }

    :is(.wnd-espm, .k-window:has(#idPerfil)) .k-window-title {
        color: var(--espm-tinta);
        font-size: 1.02rem;
        font-weight: 700;
        letter-spacing: -0.015em;
        line-height: 1.3;
    }

        /* pequeña marca de acento antes del título */
        :is(.wnd-espm, .k-window:has(#idPerfil)) .k-window-title::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 1em;
            margin-right: 10px;
            border-radius: 2px;
            background: var(--espm-acento);
            transform: translateY(2px);
        }

    /* ---- Botón de cerrar ---- */
    :is(.wnd-espm, .k-window:has(#idPerfil)) .k-window-titlebar-action {
        width: 34px;
        height: 34px;
        border: 0 !important;
        border-radius: 50%;
        background: transparent !important;
        color: var(--espm-tinta-2) !important;
        box-shadow: none !important;
        transition: background var(--espm-transicion), color var(--espm-transicion), transform var(--espm-transicion);
    }

        :is(.wnd-espm, .k-window:has(#idPerfil)) .k-window-titlebar-action:hover {
            background: var(--espm-acento-suave) !important;
            color: var(--espm-acento) !important;
            transform: rotate(90deg);
        }

        :is(.wnd-espm, .k-window:has(#idPerfil)) .k-window-titlebar-action:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(178, 58, 24, 0.28) !important;
        }

    /* ---- Cuerpo ---- */
    :is(.wnd-espm, .k-window:has(#idPerfil)) .k-window-content {
        padding: 22px;
        background: var(--espm-fondo) !important;
        border: 0 !important;
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* ---- Manijas de redimensionado: fuera, es un diálogo ---- */
    :is(.wnd-espm, .k-window:has(#idPerfil)) .k-resize-handle {
        display: none !important;
    }

/* ---- Pantallas chicas: casi a hoja completa ---- */
@media (max-width: 640px) {
    :is(.wnd-espm, .k-window:has(#idPerfil)) {
        width: calc(100vw - 20px) !important;
        left: 10px !important;
        border-radius: 14px;
    }

        :is(.wnd-espm, .k-window:has(#idPerfil)) .k-window-titlebar {
            padding: 14px 16px;
        }
}

@keyframes espm-overlay-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes espm-window-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   7. Bloque "Usuario": una sola línea, sin caja
   ------------------------------------------------------------
   Es un dato de solo lectura, no un campo: se muestra como
   rótulo + valor alineados, sin borde ni fondo.
   ============================================================ */
:is(.wnd-espm, .k-window:has(#idPerfil)) .input-group {
    display: flex !important;
    align-items: center;
    width: auto !important;
    max-width: 100%;
    gap: 10px;
    padding: 0 !important;
    margin: 0 0 4px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

    /* rótulo y valor con la MISMA métrica: así comparten línea */
    :is(.wnd-espm, .k-window:has(#idPerfil)) .input-group-text,
    :is(.wnd-espm, .k-window:has(#idPerfil)) .input-group .form-control,
    :is(.wnd-espm, .k-window:has(#idPerfil)) .form-control[readonly] {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        line-height: 1.5 !important;
        vertical-align: baseline;
    }

:is(.wnd-espm, .k-window:has(#idPerfil)) .input-group-text {
    flex: 0 0 auto;
    font-size: 0.78rem !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--espm-tinta-2) !important;
}

:is(.wnd-espm, .k-window:has(#idPerfil)) .input-group .form-control,
:is(.wnd-espm, .k-window:has(#idPerfil)) .form-control[readonly] {
    flex: 0 1 auto;
    width: auto !important;
    min-width: 0;
    font-size: 0.95rem !important;
    font-weight: 600;
    color: var(--espm-tinta) !important;
    cursor: default;
    text-overflow: ellipsis;
    field-sizing: content; /* se ajusta al texto donde exista */
    max-width: 24ch;
}

    :is(.wnd-espm, .k-window:has(#idPerfil)) .form-control[readonly]:focus {
        outline: none;
        box-shadow: none !important;
    }

/* ---- Título de instrucción ---- */
:is(.wnd-espm, .k-window:has(#idPerfil)) :is(h3, h4, .titulo-perfiles) {
    font-size: 1rem !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--espm-tinta);
    margin: 16px 0 12px !important;
}

/* la fila que envuelve al usuario no necesita tanto aire */
:is(.wnd-espm, .k-window:has(#idPerfil)) .row.mt-3.mb-3:first-child {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

/* ============================================================
   8. Responsive
   ============================================================ */
@media (max-width: 576px) {
    .grid-espm .k-grid-header th,
    .grid-espm .k-grid td,
    .grid-espm .k-table-td {
        padding: 12px 14px;
    }

    :is(.wnd-espm, .k-window:has(#idPerfil)) .k-window-content {
        padding: 16px;
    }

    .grid-espm .k-grid td {
        font-size: 0.9rem;
    }
}

/* ============================================================
   9. Movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .grid-espm *,
    :is(.wnd-espm, .k-window:has(#idPerfil)),
    :is(.wnd-espm, .k-window:has(#idPerfil)) *,
    .k-overlay {
        animation: none !important;
        transition: none !important;
    }

    .grid-espm tbody tr:hover td:first-child {
        transform: none;
    }
}