:root {
    --bg-color: #281B53;
    --bg-color-hover: #7412BF;
    --bg-button: #47328f;
    --bg-button-hover: #291960;
    --bg-table: #47328f;
}

@font-face {
    font-family: 'Gotham';
    src: url(../Fonts/Gotham.otf);
}

@font-face {
    font-family: 'Gotham-bold';
    src: url(../Fonts/gotham-bold.otf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Calibri;
    font-size: 13pt;
    background-color: #ebebf8;
}

/*@media screen and (min-width: 1024px) {
    body {
        font-size: 13px;
    }
}*/

a {
    transition: all 0.5s linear;
}

.header {
    background: #303E48;
    z-index: 100;
    height: 52px;
    padding: 10px;
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .header {
        height: 62px;
    }
}

.title-header, .title-header-login {
    background: rgba(2,184,172,1);
    background: -moz-linear-gradient(left, rgba(2,184,172,1) 0%, rgba(255,202,8,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(2,184,172,1)), color-stop(100%, rgba(255,202,8,1)));
    background: -webkit-linear-gradient(left, rgba(2,184,172,1) 0%, rgba(255,202,8,1) 100%);
    background: -o-linear-gradient(left, rgba(2,184,172,1) 0%, rgba(255,202,8,1) 100%);
    background: -ms-linear-gradient(left, rgba(2,184,172,1) 0%, rgba(255,202,8,1) 100%);
    background: linear-gradient(to right, rgba(2,184,172,1) 0%, rgba(255,202,8,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02b8ac', endColorstr='#ffca08', GradientType=1 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 280px;
    font-family: Arial;
    font-size: 22pt;
}

.title-header {
    padding-left: 35px;
    display: none;
}

@media screen and (min-width: 768px) {
    .title-header, .title-header-login {
        font-size: 28pt;
        width: 300px;
        padding-left: 0;
        display: block;
    }
}

.header_bottom {
    background: rgba(2,184,172,1);
    background: -moz-linear-gradient(left, rgba(2,184,172,1) 0%, rgba(195,193,75,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(2,184,172,1)), color-stop(100%, rgba(195,193,75,1)));
    background: -webkit-linear-gradient(left, rgba(2,184,172,1) 0%, rgba(195,193,75,1) 100%);
    background: -o-linear-gradient(left, rgba(2,184,172,1) 0%, rgba(195,193,75,1) 100%);
    background: -ms-linear-gradient(left, rgba(2,184,172,1) 0%, rgba(195,193,75,1) 100%);
    background: linear-gradient(to right, rgba(2,184,172,1) 0%, rgba(195,193,75,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02b8ac', endColorstr='#c3c14b', GradientType=1 );
    height: 20px;
}

.header-logo2 {
}

    .header-logo2 a {
        float: left;
    }

    .header-logo2 h2 {
        color: #fff;
        font-size: 17px;
        margin: 6px 0 0 10px;
        display: inline-block;
    }

@media screen and (min-width: 768px) {
    .header-logo2 h2 {
        font-size: 22px;
    }
}

.header-logo3 {
    color: #fff;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

@media screen and (min-width: 768px) {
    .header-logo3 {
        top: 24px;
    }
}

.header-logo4 {
    right: 3px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex:inherit;
    -webkit-flex: inherit;
    flex: inherit;
    top: 12px;
}

@media screen and (min-width: 768px) {
    .header-logo4 {
        top: 17px;
    }
}

.header-z9 {
    width: 100%;
    height: 50px;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
}

.header-close {
    /*background: #e21f19;*/
    color: #000;
    background: #bd1723;
    border: none;
    text-decoration: none;
    font-size: 12px;
    border-radius: 5px;
    margin: 0 3px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-weight: 200;
    color: #fff;
}

@media screen and (min-width: 768px) {
    .header-close {
    }
}

.header-close span {
    padding: 7px;
}

.header-close:hover {
    background: #a41621;
    color: #fff;
    transition: all 0.4s linear;
}

.header-glos {
    background: #fff;
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    border-radius: 3px;
    border: 1px solid #000;
    padding: 6px 6px 3px 6px;
    margin: 5px;
}

    .header-glos:hover {
        background: #aaa;
    }

#bg-Authentication {
    background: url('../img/Fondos/fondo_z9.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
}

/*LOGIN*********************/
.l-contents {
    margin: auto;
}


@media screen and (min-width: 768px) {
    .l-contents {
        max-width: 100%;
        padding: 0 5px;
    }
}

@media screen and (min-width: 1025px) {
    .l-contents {
        max-width: 99%;
        padding: 0 5px;
    }
}

@media screen and (min-width: 768px) {
    .flex-index {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-height: calc(100vh - 100px);
    }
}

.login-title {
    color: #fff;
    margin-top: 30px;
}

.login-title-h1 {
    font-family: Arial;
    text-align: center;
    font-size: 20px;
    padding: 0 15px;
}

@media screen and (min-width: 768px) {
    .login-title-h1 {
        font-size: 30px;
    }
}

.login-index {
    position: relative;
    margin: auto;
    /*z-index: 200;*/
    padding: 30px 0 80px 0;
    width: 400px;
}

@media screen and (min-width: 768px) {
    .login-index {
        margin: auto;
        width: 400px;
        padding: 30px 0;
    }
}

.login-content {
    background: #fff;
    /*box-shadow: inset 0px 0px 48px 2px rgba(0, 0,0, 0.9);*/
    padding: 30px;
    color: #000;
    font-family: Arial;
    font-weight: 100;
    border-radius: 10px;
    margin: 20px;
}

@media screen and (min-width: 1025px) {
    .login-content {
        padding: 30px 40px 50px 40px;
    }
}

.login-titulo {
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    margin: 5px;
}

    .login-titulo span {
        color: var(--bg-color) !important;
    }

.login-h1 {
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    margin: 5px;
}


.login-p {
    margin: 15px 0;
    text-align: center;
}

.login-input {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 10px auto;
    margin-bottom: 20px;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .login-input {
        width: 100%;
    }
}

@media screen and (min-width: 1025px) {
    .login-input {
        width: 100%;
    }
}

.login-input label {
    background: var(--bg-color);
    color: #000;
    display: block;
    padding: 6px;
    width: 40px;
    text-align: center;
}

    .login-input label i {
        font-size: 22px !important;
    }

.login-input input, .login-input textarea {
    width: 280px;
    padding: 10px;
    font-family: Arial;
    font-weight: 200;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid #ced4da;
    border-radius: 2px;
    /*background-color: #ddd;*/
}

.login-select {
    width: 100%;
    padding: 10px;
    font-family: Arial;
    font-weight: 200;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid #ced4da;
    border-radius: 2px;
    /*background-color: #ddd;*/
}

.input-submit {
    color: white;
    /*text-transform: uppercase;*/
    margin: 1em auto;
    background: #C01623;
    width: 100%;
    clear: both;
    display: block;
    border: double white;
    box-shadow: none;
    outline: none;
    resize: none;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    border-radius: .5em;
    transition: all 0.4s linear;
    cursor: pointer;
}

@media screen and (min-width: 480px) {
    .input-submit {
        width: 100%;
    }
}

.input-submit:hover {
    background: #C01623;
}

.input-login {
    background: var(--bg-color) !important;
}

.login-link {
    display: block;
    color: #000;
    text-align: center;
    font-size: 16px !important;
    margin: 10px auto;
}

    .login-link:hover {
        color: lightskyblue;
    }

.reveal-modal-bg,
.reveal-modal-bg2,
.reveal-modal-bg3,
.reveal-modal-bg4,
.reveal-modal-bg5,
.reveal-modal-bg6,
.reveal-modal-bg7,
.reveal-modal-bg8,
.reveal-modal-bg9,
.reveal-modal-bg10,
.reveal-modal-bg11,
.reveal-modal-bg12,
.reveal-modal-bg13,
.reveal-modal-bg14 {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    /*z-index: 1200;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.reveal-modal-bg15 {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.reveal-modal-bg16 {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.reveal-modal-bg17 {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.reveal-modal-bg18 {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.reveal-modal-bg19 {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.reveal-modal-bg20 {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.reveal-modal-bg21 {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.reveal-modal-bg22 {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.reveal-modal-bg2 {
    z-index: 401;
}

.reveal-modal-bg3 {
    z-index: 501;
}

.reveal-modal-bg4 {
    z-index: 601;
}

.reveal-modal-bg5 {
    z-index: 601;
}

.reveal-modal-bg6 {
    z-index: 601;
}

.reveal-modal-bg7 {
    z-index: 601;
}

.reveal-modal-bg8 {
    z-index: 601;
}

.modal-sobre-header {
    z-index: 1200;
}

.ui-datepicker {
    z-index: 1300 !important;
}

.modal-contrasena {
    width: 360px;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    position: absolute;
    top: 10px;
    left: calc(50% - 180px);
    z-index: 500;
    text-align: center;
}

    .modal-contrasena h2 {
        font-weight: 200;
        margin: 10px 0 30px 0;
    }

    .modal-contrasena p {
        margin: 0 0 30px 0;
    }

    .modal-contrasena .cont-box-input {
        width: 90%;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        font-size: 15px;
    }

        .modal-contrasena .cont-box-input::-webkit-input-placeholder {
            font-weight: 100;
        }

        .modal-contrasena .cont-box-input::-moz-placeholder {
            font-weight: 100;
        }

        .modal-contrasena .cont-box-input::-ms-input-placeholder {
            font-weight: 100;
        }

    .modal-contrasena .cont-box-submit {
        width: 260px;
        margin: 20px 0 10px;
    }

    .modal-contrasena .cont-box-cancel {
        width: 260px;
        margin: 0px 0 10px;
    }

    .modal-contrasena a {
        color: #000;
        font-size: 15px;
    }

        .modal-contrasena a:hover {
            color: #e21f19;
        }

@media screen and (min-width: 768px) {
    .modal-contrasena {
        width: 500px;
        padding: 25px;
        top: calc(50% - 180px);
        left: calc(50% - 250px);
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.95);
    }
}

.cont-box-cancel {
    background: #000;
    color: #fff !important;
    padding: 4px;
    border: none;
    width: 260px;
    border-radius: 6px;
    font-size: 18px !important;
    cursor: pointer;
    font-family: Arial;
    transition: all 0.4s linear;
    margin: 0px auto;
}

    .cont-box-cancel:hover {
        background: #333;
    }

    .cont-box-cancel label {
        width: 100% !important;
        display: inline-block;
        border: 1px solid #aaa;
        padding-top: 5px;
        padding-bottom: 6px;
        cursor: pointer;
    }

.cont-box {
    margin: 8px 0 0 0;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .cont-box {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}
/*FIN LOGIN*****************/

/*FORMULARIO***************/
.cont-header {
    height: auto;
    margin: 10px 0 5px 10px;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .cont-header {
        margin: 20px 0 5px 10px;
    }
}

.cont-header-h1 {
    font-size: 20px;
    color: var(--bg-color);
}

@media screen and (min-width: 768px) {
    .cont-header-h1 {
        font-size: 24px;
    }
}

.cont-header-h2 {
    font-size: 16px;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}

@media screen and (min-width: 768px) {
    .cont-header-h2 {
        font-size: 20px;
    }
}

.cont-header-h3 {
    
    border-bottom: 1px solid #aaa;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
    .cont-header-h3 {
        font-size: 14pt;
    }
}

.cont-header-popup {
    font-size: 20px;
    text-align: center;
    padding: 20px 0 20px 0;
}

@media screen and (min-width: 768px) {
    .cont-header-popup {
        font-size: 24px;
    }
}

.section1 {
    background: #fff !important;
    padding: 25px 10px 20px 10px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    margin: 5px 0 10px 0;
    width: 100%;
    min-height:500px;
}

@media screen and (min-width: 768px) {
    .section1 {
        padding: 20px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 14px;
    }
}

.section2 {
    /*background: #fff;
    padding: 20px;
    text-align: left;
    border: 1px solid #000;
    border-radius: 20px;*/
    margin: 10px auto 15px auto;
    width: 100%;
}


/*@media screen and (min-width:1424px) {
    .section2 {
        width: 70%;
    }
}*/

.icon, .icon2, .icon3, .icon4 {
    display: inline-block;
    margin: 0 0 0 0px;
    border-radius: 4px;
    cursor: pointer;
    height: 25px;
    width: 25px;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
}

.icon3 {
    height: 30px !important;
    width: 30px !important;
    padding: 0px !important;
    margin-left: 3px;
    margin-right: 3px;
}

.icon3 {
    height: 14px !important;
    width: 14px !important;
    padding: 0px !important;
    margin-left: 2px;
    margin-right: 2px;
}

.icon4 {
    height: 17px !important;
    width: 17px !important;
    padding: 0px !important;
    margin-left: 2px;
    margin-right: 2px;
}

.icon {
    background-color: var(--bg-color) !important;
}

.icon4 {
    /*    background-color: #3AB0C8;
*/ background-color: #bd1723;
}

    .icon div, .icon2 div, .icon3 div, .icon4 div {
        background-size: 100%;
        width: 100%;
        height: 100%;
    }

        .icon2 div:hover {
            background-size: 100%;
            width: 100%;
            height: 100%;
        }

        .icon3 div:hover {
            background-size: 100%;
            width: 100%;
            height: 100%;
        }

        .icon4 div:hover {
            background-size: 100%;
            width: 100%;
            height: 100%;
        }

.icon:hover {
    background-color: #e21f19;
}

.iconBloqueo {
    background: url(../img/Iconos/block.png) top left;
}

.iconBuscar {
    background: url(../img/Iconos/buscar.svg) top left;
}

.iconDescargar {
    background: url(../img/Iconos/descargar.png) top left;
}

.iconRptDeclaracion {
    background: url(../img/Iconos/iconRptDeclaracion.svg) top left;
}

.iconRptPadronAsoc {
    background: url(../img/Iconos/iconRptPadronAsoc.svg) top left;
}

.iconDetalle {
    background: url(../img/Iconos/Detalle.svg) top left;
}

.iconGuardar {
    background: url(../img/Iconos/guardar.png) top left;
}

.iconAgregar {
    background: url(../img/Iconos/add.svg) top left;
}

    .iconAgregar:hover {
        background: url(../img/Iconos/add2.svg) top left;
    }

.iconEditar {
    background: url(../img/Iconos/edit.svg) top left;
}

.iconVer {
    background: url(../img/Iconos/ver.png) top left;
}

.iconDetalle {
    background: url(../img/Iconos/buscar.png) top left;
}

.iconEditar:hover {
    background: url(../img/Iconos/edit2.svg) top left;
}

.iconEditar3 {
    background: url(../img/Iconos/edit3.svg) top left;
}

.iconEliminar {
    background: url(../img/Iconos/delete.svg) top left;
}

    .iconEliminar:hover {
        background: url(../img/Iconos/delete2.svg) top left;
    }

.iconLista {
    background: url(../img/Iconos/list.svg) top left;
}


.iconDetalle {
    background: url(../img/Iconos/detail.svg) top left;
}

.iconMail {
    background: url(../img/Iconos/mail-send.svg) top left;
}

.iconPaseInvitado {
    background: url(../img/Iconos/pase_invitado.svg) top left;
}

.iconVideo {
    background: url(../img/Iconos/video-player.svg) top left;
}

.iconDetalleVista {
    background: url(../img/Iconos/see.svg) top left;
}

.iconRptInscritosPeriodo {
    background: url(../img/Iconos/survey.svg) top left;
}

.iconMostrarPassword {
    background: url(../img/Iconos/eye1.svg) top left;
}

.iconOcultarPassword {
    background: url(../img/Iconos/eye1.svg) top left;
}

.iconMostrarPassword {
    background: url(../img/Iconos/eye2.svg) top left;
}

.iconCopiar {
    background: url(../img/Iconos/copy.svg) top left;
}

.iconArriba {
    background: url(../img/Iconos/up.svg) top left;
}

.iconAbajo {
    background: url(../img/Iconos/down.svg) top left;
}

.iconOk {
    background: url(../img/Iconos/ok2.svg) top left;
}

.iconSeleccionar {
    background: url(../img/Iconos/select.svg) top left;
}

.iconChart {
    background: url(../img/Iconos/iconChart.svg) top left;
}
    .iconChart:hover {
        background: url(../img/Iconos/iconChart-hover.svg) top left;
    }
.iconUbicacion {
    background: url(../img/Iconos/location.svg) center  left;
    background-repeat:no-repeat;
}

.iconHorometro {
    background: url(../img/Iconos/meter.svg) center left;
    background-repeat: no-repeat;
}

.iconProximo {
    background: url(../img/Iconos/calendar.svg) center left;
    background-repeat: no-repeat;
}

.iconAbastecimiento {
    background: url(../img/Iconos/oil.svg) center left;
    background-repeat: no-repeat;
}

.label {
    display: inline-block;
    text-align: left;
    padding: 6px;
}

@media screen and (min-width: 640px) {
    .label {
        text-align: right;
    }
}

.input-text {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 6px;
    border-radius: 4px;
    font-family: Arial;
    font-weight: 100;
}

    .input-text:disabled {
        background: #e9e9e9;
        border: 1px solid #e9e9e9;
        color: #000;
    }

/*FORMULARIOS RESPONSIVE*/
.formulario-4-columnas.ed-container,
.formulario-4-columnas .ed-container {
    max-width: 100%;
}

.formulario-4-columnas .section2 {
    width: 100%;
}

.formulario-4-columnas .fila-formulario-4 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex {
        width: 100%;
    }

.formulario-cabecera-acciones {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

    .formulario-cabecera-acciones .cont-header {
        flex: 1 1 auto;
    }

.menu-equipo-acciones {
    position: relative;
    flex: 0 0 auto;
    margin: 8px 0 0 auto;
}

.menu-equipo-toggle {
    min-width: 96px;
    margin: 0;
}

.boton-back-gris {
    width: 90px;
    background: #ffffff !important;
    color: #281b53 !important;
}

    .boton-back-gris:hover {
        background: #281b5314 !important;
    }

.menu-equipo-flotante {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 700;
    width: 230px;
    padding: 6px;
    background: #fff;
    border: 1px solid #d8d9dd;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.menu-equipo-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 7px 8px;
    border: 0;
    background: transparent;
    color: #222;
    font-family: Arial;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

    .menu-equipo-opcion:hover {
        background: #f0f2f5;
    }

    .menu-equipo-opcion img {
        flex: 0 0 auto;
    }

    .menu-equipo-opcion span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

@media screen and (max-width: 480px) {
    .formulario-cabecera-acciones {
        align-items: stretch;
        flex-direction: column;
    }

    .menu-equipo-acciones {
        width: 100%;
        margin-top: 0;
    }

    .menu-equipo-toggle,
    .menu-equipo-flotante {
        width: 100%;
    }
}

@media screen and (min-width: 1024px) {
    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex {
        width: 50%;
        padding-left: .25rem;
        padding-right: .25rem;
    }

    body.menu-oculto .formulario-4-columnas .fila-formulario-4 > .ed-item.flex {
        width: 33.333333%;
    }

    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex > .label:first-child {
        width: 30%;
        padding-left: 0;
        padding-right: 4px;
    }

    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex > .input-text.m-60,
    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex > select.input-text.m-60,
    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex > .campo-busqueda,
    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex > .campo-busqueda-multiple {
        width: 70%;
    }

    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex > .input-text.m-10 {
        width: 15%;
    }

    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex > .input-text.m-50 {
        width: 55%;
    }

    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex > .input-text.m-55 {
        width: 65%;
    }

    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex > .input-text.m-35 {
        width: 40%;
    }

    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex > select.input-text.m-25 {
        width: 30%;
    }
}

@media screen and (min-width: 1366px) {
    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex {
        width: 33.333333%;
    }

    body.menu-oculto .formulario-4-columnas .fila-formulario-4 > .ed-item.flex {
        width: 25%;
    }
}

@media screen and (min-width: 1670px) {
    .formulario-4-columnas .fila-formulario-4 > .ed-item.flex,
    body.menu-oculto .formulario-4-columnas .fila-formulario-4 > .ed-item.flex {
        width: 25%;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1365px) {
    body.menu-oculto .formulario-4-columnas .evitar-huerfano-3 > .ed-item.flex:nth-last-child(-n+4),
    body.menu-oculto .formulario-4-columnas .fila-par-en-3 > .ed-item.flex {
        width: 50%;
    }
}

@media screen and (min-width: 1366px) and (max-width: 1669px) {
    .formulario-4-columnas .evitar-huerfano-3 > .ed-item.flex:nth-last-child(-n+4),
    .formulario-4-columnas .fila-par-en-3 > .ed-item.flex {
        width: 50%;
    }

    body.menu-oculto .formulario-4-columnas .evitar-huerfano-3 > .ed-item.flex:nth-last-child(-n+4),
    body.menu-oculto .formulario-4-columnas .fila-par-en-3 > .ed-item.flex {
        width: 25%;
    }
}

.campo-busqueda,
.campo-busqueda-multiple {
    position: relative;
    display: inline-flex;
    align-items: center;
}

    .campo-busqueda > .input-text {
        width: 100%;
        padding-right: 40px;
    }

    .campo-busqueda-multiple > .input-text:last-of-type {
        padding-right: 40px;
    }

    .campo-busqueda > .icon,
    .campo-busqueda-multiple > .icon {
        position: absolute;
        top: 50%;
        right: 0;
        margin: 0;
        transform: translateY(-50%);
    }
/*FIN FORMULARIOS RESPONSIVE*/

.input-button,
.input-button-cancel {
    display: block;
    width: 100%;
    margin: 15px auto;
    padding: 9px 18px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}


/* PRINCIPAL */

.input-button {
    background: var(--bg-button);
    color: #fff;
    border: 1px solid var(--bg-color);
}

    .input-button:hover {
        background: var(--bg-button-hover);
        border-color: var(--bg-button-hover);
    }

    .input-button:focus-visible {
        outline: 3px solid rgba(40, 27, 83, 0.20);
        outline-offset: 2px;
    }


    /* DESHABILITADOS */

    .input-button:disabled,
    .input-button-cancel:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

        .input-button:disabled:hover {
            background: var(--bg-color);
            border-color: var(--bg-color);
        }

        .input-button-cancel:disabled:hover {
            background: #fff;
            color: #495057;
            border-color: #adb5bd;
        }

/* CANCELAR / SECUNDARIO */

.input-button-cancel {
    background: #ffffff;
    color: #281b53;
    border: 1px solid #281b53;
}

    .input-button-cancel:hover {
        background: #f1f3f5;
        color: #212529;
        border-color: #868e96;
    }

    .input-button-cancel:focus-visible {
        outline: 3px solid rgba(108, 117, 125, 0.20);
        outline-offset: 2px;
    }


    .input-button label,
    .input-button div,
    .input-button-cancel label {
        width: 100% !important;
        display: inline-block;
        padding-top: 5px;
        padding-bottom: 6px;
        cursor: pointer;
    }

@media screen and (min-width: 480px) {
    .input-button, .input-button-cancel {
        width: 260px;
    }
}

.input-button-toolbar {
    display: block;
    width: 100px;
    padding: 7px 5px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    background: var(--bg-button);
    color: #fff;
    border: 1px solid var(--bg-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

    .input-button-toolbar:hover {
        background: var(--bg-button-hover);
        border-color: var(--bg-button-hover);
    }

    .input-button-toolbar:focus-visible {
        outline: 3px solid rgba(40, 27, 83, 0.20);
        outline-offset: 2px;
    }

.input-checkbox, .input-checkbox2 {
    display: none;
}

    .input-checkbox + .input-checkbox-lab, .input-checkbox2 + .input-checkbox-lab {
        cursor: pointer;
        font-weight: 200 !important;
    }

.input-checkbox-lab:before {
    /*content: '✗';*/
    content: '';
    font-size: 24px;
    line-height: 0.95;
    font-weight: bold !important;
    font-family: "Arial";
    background: #fff;
    border: 1px solid #9E9E9E;
    border-radius: 6px;
    display: inline-block;
    height: 24px;
    width: 24px;
    margin: 0 7px 0 0;
    text-align: center;
    vertical-align: middle;
    color: red;
}

.input-checkbox:checked + .input-checkbox-lab:before {
    content: "✓";
    font-size: 25px;
    color: #31a713;
    font-weight: bold !important;
}

.input-checkbox:disabled + .input-checkbox-lab:before {
    background-color: #e5e7e9;
}

.input-checkbox2:checked + .input-checkbox-lab:before {
    content: "✗";
    font-size: 25px;
    color: red;
    font-weight: bold !important;
}

.text-color1 {
    background-color: #faf5b9;
}

.modal-registrar {
    width: 96%;
    min-width: 380px;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    position: absolute;
    top: calc(2%);
    left: calc(2%);
    max-height: 96vh;
    z-index: 500;
    overflow: auto;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .modal-registrar {
        left: calc(50% - 350px);
        width: 700px;
        padding: 25px;
        top: 5%;
        height: auto;
        max-height: 90vh;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.95);
        position: absolute;
    }
}

.modal-tabla-compacta-responsive {
    width: 96%;
    max-width: 600px;
    min-width: 0;
    left: 2%;
}

@media screen and (min-width: 768px) {
    .modal-tabla-compacta-responsive {
        width: 600px;
        left: calc(50% - 300px);
    }
}

.modal-registrar1 {
    width: 98%;
    min-width: 400px;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    position: absolute;
    top: calc(2%);
    left: calc(2%);
    max-height: 96vh;
    z-index: 500;
    overflow: auto;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .modal-registrar1 {
        left: calc(45% - 400px);
        width: 1000px;
        padding: 25px;
        top: 5%;
        height: auto;
        max-height: 90vh;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.95);
        position: absolute;
    }
}

.modal-registrar2 {
    width: 96%;
    min-width: 70%;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    position: absolute;
    top: calc(2%);
    left: calc(2%);
    max-height: 96vh;
    z-index: 500;
    overflow: auto;
    text-align: center;
}

@media screen and (min-width: 1200px) {
    .modal-registrar2 {
        left: calc(50% - 450px);
        width: 70%;
        padding: 25px;
        top: 5%;
        height: auto;
        max-height: 90vh;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.95);
        position: absolute;
    }
}

.label-cliente {
    color: black;
    display: table-cell;
    width: 40px;
    height: 40px;
    margin: 20px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
}

.checkbox-cliente[type=checkbox] {
    display: none;
}

    .checkbox-cliente[type=checkbox]:checked + .checkbox-cliente {
        background-color: green;
    }

/*FIN FORMULARIO***********/

/*OVERLAY POPUP***********/
.overlayPrincipal {
    position: fixed;
    top: 0;
    left: 0; /*background: rgb(200, 200, 200);*/
    /*background-image: url(../img/fondos/transparente.png);*/
    background-color: #000;
    opacity: 0.4;
    filter: alpha(opacity=40);
    display: block; /*-moz-opacity: 0.3;     opacity: 0.3;*/
}

.overlayPopup {
    position: fixed;
    top: 0;
    left: 0; /*background: rgb(200, 200, 200);*/
    background-image: url(../img/fondos/transparente.png);
    display: none; /*-moz-opacity: 0.3;     opacity: 0.3;*/
}
/*FIN*********************/

.foto {
    width: 200px;
    height: 200px;
    background-color: #eee;
    margin: 0 auto;
    border: 1px solid #444;
}

.foto2 {
    width: 300px;
    height: 300px;
    background-color: #eee;
    margin: 0 auto;
    border: 1px solid #444;
}

.fotoRecurso {
    width: 250px;
    height: auto;
    background-color: #eee;
    margin: 0 auto;
    border: 1px solid #444;
}

.select-busqueda {
    position: absolute;
    display: none;
    margin-left: 0;
    margin-top: 35px;
    height: 100px;
}

    .select-busqueda option {
        background-color: #fff;
    }

@media screen and (min-width: 768px) {
    .select-busqueda {
        position: absolute;
        display: none;
        margin-left: 0px;
    }
}

.div-busqueda {
    position: absolute;
    display: none;
    margin-left: 0;
    margin-top: 35px;
    height: auto;
    background-color: #fff !important;
}

    .div-busqueda div {
        cursor: pointer;
        padding: 3px;
    }

        .div-busqueda div:hover {
            background-color: #ccc;
        }

@media screen and (min-width: 768px) {
    .div-busqueda {
        position: absolute;
        display: none;
        margin-left: 0px;
    }
}
/*TABLE***********************************/
.container-table {
    overflow-x: auto;
    padding: 0;
    margin: 0;
}

.tabla-ancha-responsive,
.tabla-compacta-responsive {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

    .tabla-ancha-responsive > table {
        width: 100% !important;
        min-width: 760px;
        max-width: none;
    }

    .tabla-compacta-responsive > table {
        min-width: 320px;
        max-width: none;
    }

.listado-ancho-completo.ed-container {
    width: 100%;
    max-width: none;
}

.listado-ancho-completo .container-table {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .listado-ancho-completo.ed-container {
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width: 1670px) {
    #gridEquipos th:nth-child(6),
    #gridEquipos td:nth-child(6) {
        width: 50% !important;
        min-width: 260px;
        white-space: nowrap;
    }
}

@media screen and (max-width: 1669px) {
    #gridEquipos th:nth-child(6),
    #gridEquipos td:nth-child(6) {
        white-space: normal;
    }
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0px 10px 0;
}

    table th {
        border: solid 1px #aaa;
        padding: 5px 5px;
        background: var(--bg-table) !important;
        /*background-color: #dadaf8;*/
        text-align: center;
        color: #fff;
        font-weight:normal;
        border: none;
    }

    table tr[class="filter"] th {
        padding: 1px;
        background: var(--bg-table) !important;
        /*background-color: #dadaf8;*/
    }

    table th input {
        display: block;
        width: 100%;
        border: 1px solid #aaa;
        padding: 4px;
        border-radius: 4px;
        
    }


    table td {
        border: solid 1px #d8d9dd;
        padding: 5px 5px;
        font-weight: 100;
        cursor: pointer;
    }


tbody {
    text-align: left;
}

tfoot td {
    padding: 0;
    border: none;
}

.cont-nav {
    margin: 10px 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

    .cont-nav a {
        text-decoration: none;
        background: var(--bg-color);
        color: white !important;
        display: block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 34px;
        border-radius: 20%;
        font-size: 18px;
        margin: 0 2px;
    }

        .cont-nav a:hover {
            background: var(--bg-color-hover);
        }

    .cont-nav p {
        font-size: 11px;
        line-height: 34px;
        color: var(--bg-color) !important;
    }

@media screen and (min-width: 768px) {
    .cont-nav p {
        font-size: 15px;
    }
}

.cont-nav-n {
    font-weight: bold;
    text-align: center;
    padding: 5px;
    border: 1px solid var(--bg-color);
    border-radius: 4px;
    width: 40px;
    margin: 0 5px;
    color: var(--bg-color);
}

/*FIN TABLE*******************************/

/*TABLE RESPONSIBLE*/
@media (max-width: 768px) {
    .tableResponsive table,
    .tableResponsive thead,
    .tableResponsive tbody,
    .tableResponsive th,
    .tableResponsive td,
    .tableResponsive tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        .tableResponsive thead tr:not([class="filter"]) {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .tableResponsive th input {
            width: 180px;
        }

        .tableResponsive tr[class="filter"] th {
            padding-left: 40%;
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .tableResponsive tr {
        border: 1px solid #ccc;
    }

    .tableResponsive thead tr th {
        color: #fff;
    }

    .tableResponsive tbody tr td, .tableResponsive thead tr th {
        border: none;
        padding-top: 4px;
        padding-bottom: 4px;
        position: relative;
        padding-left: 40%;
        white-space: normal;
        text-align: left;
        min-width: 100% !important;
    }

        .tableResponsive tbody tr td:before, .tableResponsive thead tr th:before {
            position: absolute;
            top: 6px;
            left: 6px;
            width: 37%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }

        .tableResponsive tbody tr td:before, .tableResponsive thead tr th:before {
            content: attr(data-title);
        }

    .tableResponsive tfoot tr td {
        border: none;
    }
}
/*FIN TABLE RESPONSIVE*/

#divReporte, iframe {
    width: 100% !important;
    min-height: 500px !important;
}










/* =========================================
   MODAL DE BAJA - RESPONSIVE
   ========================================= */


.modal-registrar {
    width: 96%;
    max-width: 700px;
    min-width: 0 !important;
    margin: 0 auto;
    box-sizing: border-box;
}

    /* Inputs del formulario */
    .modal-registrar .input-text {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Contenedor de cada campo */
    .modal-registrar .login-input {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* =========================================
   CELULARES
   ========================================= */

@media screen and (min-width: 480px) {

    .input-text {
        width: 60%;
    }
}

@media screen and (min-width: 481px) and (max-width: 639px) {
    .modal-registrar {
        width: calc(100% - 20px);
        max-width: none;
        min-width: 0 !important;
        left: 10px !important;
        top: 50px !important;
        padding: 20px 15px;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        border-radius: 10px;
    }

        .modal-registrar .login-titulo {
            font-size: 22px;
            margin-bottom: 20px;
        }

        .modal-registrar .login-input {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin-bottom: 15px;
        }

            .modal-registrar .login-input .label {
                width: 100%;
                text-align: left;
                padding: 4px 0;
            }

            .modal-registrar .login-input input,
            .modal-registrar .login-input textarea,
            .modal-registrar .input-text {
                width: 100% !important;
                max-width: 100%;
            }

        .modal-registrar .input-button,
        .modal-registrar .input-button-cancel {
            width: 100%;
            max-width: 100%;
            margin: 10px auto;
        }
}

@media screen and (max-width: 480px) {

    .modal-registrar {
        width: calc(100% - 20px);
        max-width: none;
        min-width: 0 !important;
        left: 10px !important;
        top: 50px !important;
        padding: 20px 15px;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        border-radius: 10px;
    }

        .modal-registrar .login-titulo {
            font-size: 22px;
            margin-bottom: 20px;
        }

        .modal-registrar .login-input {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin-bottom: 15px;
        }

            .modal-registrar .login-input .label {
                width: 100%;
                text-align: left;
                padding: 4px 0;
            }

            .modal-registrar .login-input input,
            .modal-registrar .login-input textarea,
            .modal-registrar .input-text {
                width: 100% !important;
                max-width: 90%;
            }

        .modal-registrar .input-button,
        .modal-registrar .input-button-cancel {
            width: 100%;
            max-width: 100%;
            margin: 10px auto;
        }
}
/* =========================================
   TABLET
   ========================================= */
@media screen and (min-width: 481px) and (max-width: 767px) {

    .modal-registrar {
        width: 90%;
        min-width: 0 !important;
        left: 5% !important;
        padding: 20px;
    }

        .modal-registrar .input-text {
            max-width: 90%;
        }
}

@media screen and (max-width: 480px) {
    .modal-registrar .login-input input,
    .modal-registrar .login-input textarea {
        width: 100% !important;
    }
}



.mt-1 {
    margin-top: 5px !important;
}

.mt-2 {
    margin-top: 10px !important;
}

.mt-3 {
    margin-top: 15px !important;
}

.mt-4 {
    margin-top: 20px !important;
}

.mt-5 {
    margin-top: 30px !important;
}

.ms-1 {
    margin-left: 5px !important;
}

.ms-2 {
    margin-left: 10px !important;
}

.ms-3 {
    margin-left: 15px !important;
}

.ms-4 {
    margin-left: 20px !important;
}

.ms-5 {
    margin-left: 30px !important;
}


/* ============================================================
   GRUPOS DE ACCIONES
   ============================================================ */

.acciones-formulario,
.acciones-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap: 10px;
}


/* Guardar / Buscar / Limpiar */
.acciones-formulario {
    justify-content: flex-end;
    margin: 16px 0;
}

.acciones-formulario-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 50px 0 !important;
}

    .acciones-formulario-vertical .input-button,
    .acciones-formulario-vertical .input-button-cancel {
        margin: 0;
    }


/* Nuevo OT / OS / OG / OIA */
.acciones-toolbar {
    justify-content: flex-start;
    margin: 10px 0 18px;
}


/* Filtros simples + acción principal en listados */
.equipos-listado-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    margin: 0 0 12px;
}

.equipos-listado-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

    .equipos-listado-filtros .campo-checkbox-inline {
        width: auto;
        padding: 0;
    }

.equipos-listado-acciones .input-button-toolbar {
    width: auto;
    min-width: 110px;
    margin: 0;
}

.listado-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0 0 12px;
}

    .listado-acciones .input-button-toolbar {
        width: auto;
        min-width: 110px;
        margin: 0;
    }

.campo-con-boton {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}


    /* El input ocupa todo el espacio disponible */
    .campo-con-boton .input-text {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }


    /* El botón mantiene solo el ancho necesario */
    .campo-con-boton .input-button-interno {
        flex: 0 0 auto;
        width: auto;
        min-width: 100px;
        margin: 0;
        white-space: nowrap;
    }


/* ============================================================
   GUARDAR / BUSCAR / LIMPIAR
   ============================================================ */

.acciones-formulario .input-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    min-width: 115px;
    min-height: 38px;
    margin: 0;
    padding: 8px 16px;
}

.input-button.btn-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}


/* ============================================================
   ICONOS DE ACCIONES
   ============================================================ */

.btn-accion::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* Guardar - disquete */
.btn-guardar::before {
    background-image: url("../img/Iconos/guardar.svg");
}


/* Buscar - lupa */
.btn-buscar::before {
    background-image: url("../img/Iconos/buscar.svg");
}


/* Limpiar - escoba */
.btn-limpiar::before {
    content: "🧹";
    width: auto;
    height: auto;
    background: none;
    font-size: 16px;
    line-height: 1;
}


/* ============================================================
   BOTONES NUEVO
   ============================================================ */

/*
   Importante:
   elimina el comportamiento l-25 solamente dentro
   del grupo de botones Nuevo.
*/

.acciones-toolbar > .ed-item {
    flex: 0 0 auto;
    width: auto !important;
    padding: 0;
}


/* Botón Nuevo */

.acciones-toolbar .input-button-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    min-width: 110px;
    min-height: 38px;
    margin: 0;
    padding: 8px 14px;
}


/* Símbolo + */

.btn-nuevo::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
}


/* ============================================================
   LAPTOP / DESKTOP
   1024px+
   ============================================================ */

@media screen and (min-width: 1024px) {

    /* Nuevos juntos a la izquierda */
    .acciones-toolbar {
        justify-content: flex-start;
    }


    /* Acciones juntas a la derecha */
    .acciones-formulario {
        justify-content: flex-end;
    }
}


/* ============================================================
   TABLET / PANTALLAS PEQUEÑAS
   ============================================================ */

@media screen and (max-width: 1023px) {

    .acciones-formulario,
    .acciones-toolbar {
        gap: 10px;
    }


        /* Guardar / Buscar / Limpiar */

        .acciones-formulario .input-button {
            flex: 1 1 140px;
            width: auto;
        }


        /* Nuevos: 2 por fila */

        .acciones-toolbar > .ed-item {
            flex: 1 1 calc(50% - 5px);
            width: calc(50% - 5px) !important;
        }

        .acciones-toolbar .input-button-toolbar {
            width: 100%;
        }
}


/* ============================================================
   CELULAR
   ============================================================ */

@media screen and (max-width: 480px) {

    /* Una acción por fila */

    .acciones-formulario .input-button {
        flex: 1 1 100%;
        width: 100%;
    }


    /* Un botón Nuevo por fila */

    .acciones-toolbar > .ed-item {
        flex: 1 1 100%;
        width: 100% !important;
    }

    .equipos-listado-acciones,
    .equipos-listado-acciones .input-button-toolbar,
    .listado-acciones,
    .listado-acciones .input-button-toolbar {
        width: 100%;
    }

    .equipos-listado-filtros {
        width: 100%;
        justify-content: space-between;
    }

    .pendiente-observacion-acciones .label,
    .pendiente-observacion-acciones .input-text,
    .pendiente-observacion-acciones .input-button-toolbar {
        flex: 1 1 100%;
        width: 100% !important;
    }
}

.div-opciones {
    display: flex;
    gap: 15px;
}

.acciones-toolbar .input-button-toolbar {
    width: 100%;
}

}



/* ============================================================
   TABLA MODERNA - MATERIAL INSPIRED
   ============================================================ */

.tabla-material {
    width: 100%;
    margin-top: 15px;
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    -webkit-overflow-scrolling: touch;
}


    /* ============================================================
   TABLA
   ============================================================ */

    .tabla-material > table {
        width: 100%;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
        background: #fff;
        font-family: Arial, sans-serif;
        font-size: 13px;
    }


        /* ============================================================
   CABECERA
   ============================================================ */

        .tabla-material > table thead th {
            height: 42px;
            padding: 10px 12px;
            background: var(--bg-color) !important;
            color: #fff;
            border: 0;
            border-bottom: 1px solid #ddd;
            font-size: 13px;
            font-weight: 500;
            text-align: left;
            vertical-align: middle;
            white-space: nowrap;
        }


            /* Primera y última celda del encabezado */

            .tabla-material > table thead th:first-child {
                border-top-left-radius: 7px;
            }

            .tabla-material > table thead th:last-child {
                border-top-right-radius: 7px;
            }


        /* ============================================================
   CELDAS
   ============================================================ */

        .tabla-material > table tbody td {
            height: 44px;
            padding: 9px 12px;
            background: #fff;
            color: #343a40;
            border: 0;
            border-bottom: 1px solid #eceef1;
            font-size: 13px;
            font-weight: 400;
            vertical-align: middle;
            transition: background-color 0.15s ease;
        }


        /* ============================================================
   HOVER
   ============================================================ */

        .tabla-material > table tbody tr:hover td {
            background: #e2dbf9b0;
        }


        /* ============================================================
   ÚLTIMA FILA
   ============================================================ */

        .tabla-material > table tbody tr:last-child td {
            border-bottom: 0;
        }


        /* ============================================================
   FILA SELECCIONADA - OPCIONAL
   ============================================================ */

        .tabla-material > table tbody tr.seleccionado td {
            background: #eeeaf7;
        }


        /* ============================================================
   FILTROS EN CABECERA
   ============================================================ */

        .tabla-material > table tr.filter th {
            padding: 6px;
            background: #f8f9fa !important;
            border: 1px solid #f7edff;
        }


        /* Inputs de filtro */

        .tabla-material > table th input,
        .tabla-material > table th select {
            width: 100%;
            min-height: 34px;
            padding: 6px 9px;
            background: #fff;
            border: 1px solid #ced4da;
            border-radius: 5px;
            font-family: Arial, sans-serif;
            font-size: 13px;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }


            /* Focus del filtro */

            .tabla-material > table th input:focus,
            .tabla-material > table th select:focus {
                border-color: var(--bg-color);
                box-shadow: 0 0 0 2px rgba(40, 27, 83, 0.12);
            }


    /* ============================================================
   ACCIONES / ICONOS DE LA TABLA
   ============================================================ */

    .tabla-material .icon,
    .tabla-material .icon2,
    .tabla-material .icon3,
    .tabla-material .icon4 {
        vertical-align: middle;
    }


    /* ============================================================
   TABLA VACÍA
   ============================================================ */

    .tabla-material > table tbody td:only-child {
        /* mantiene presentación limpia cuando el grid devuelve mensaje */
        vertical-align: middle;
    }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 1023px) {

    .tabla-material {
        border-radius: 6px;
    }

        .tabla-material > table thead th,
        .tabla-material > table tbody td {
            padding: 8px 10px;
        }
}