/* Para que el body se vuelva visible luego de cargar el loader, si se importa esta hoja de estilos, se debe importar sí o sí manual.js */
@import url("../css/loader.css");
@import url("../css/video-js.css");

@font-face {
    font-family: "tlcdFont";
    src: url("../fonts/tlcd/tlcd-webfont.eot");
    src: url("../fonts/tlcd/tlcd-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/tlcd/tlcd-webfont.woff2") format("woff2"), url("../fonts/tlcd/tlcd-webfont.woff") format("woff"), url("../fonts/tlcd/tlcd-webfont.ttf") format("truetype"), url("../fonts/tlcd/tlcd-webfont.svg#tlcdregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

.list-item {
    margin-right: 10px;
}

.lista {
    padding-left: 0px;
    margin-left: 20px;
}

.lista li {
    list-style: none;
    margin-bottom: 6px;
    list-style-position: inside;
    text-indent: -1em;
}

.lista-item {
    margin-right: 10px;
    font-style: normal;
    font-weight: bold;
}

.texto-cel {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}

.lista-cel {
    -ms-flex: 0 0 50%;
    flex: 0 0 65%;
    max-width: 65%;
    margin-top: 35px;
    font-style: normal;
    line-height: 1, 7px;
    text-align: justify;
}

@media screen and (max-width: 768px) {
    .texto-cel {
        display: flex;
        flex-direction: column;
        margin-left: 7px;
    }

    .lista-cel {
        display: flex !important;
        flex-wrap: wrap;
        flex: 0 0 95% !important;
        max-width: 95% !important;
        flex-direction: column;
        margin-top: 2px;
    }
}

/* Clases para secciones de señalización de led con animaciones */
.video-cel {
    margin: auto;
}

.container-led {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.texto-led {
    margin: 30px 0 20px 0;
    width: 500px;
}

@media screen and (max-width: 992px) {
    .texto-led {
        margin: 0 0 10px 0;
    }
}

.video-led {
    align-self: center;
    margin: 5px 0 5px 0;
}
/* Fin Clases para secciones de señalización de led con animaciones */

.card-body {
    padding-top: 10px;
    padding-bottom: 0px;
}

.card-header {
    background-color: #004899;
    color: #ffffff;
}

.my-primary {
    background-color: #054e9b;
    color: #ffffff;
}

.my-primary-ligh {
    background-color: #d9edf7;
    color: #31708f;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

.section-header > * {
    vertical-align: bottom;
}

.section-header {
    background-color: #ffffff;
    color: #000000;
    padding: 10px 15px 7px 15px;
    display: flex;
    text-transform: uppercase;
    font-weight: bold;
    font-size: medium;
}

.section-header img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    float: right;
    opacity: 60%;
    margin-top: 4px;
    flex: 0 0 auto;
}

.section-header h4 {
    flex: 1 1 auto;
}

.header-logo {
    width: 20%;
    max-width: 100px;
    height: auto;
    float: right;
    display: block;
}

.footer-icon-container {
    width: 50%;
    display: flex;
    margin: 0 auto;
    padding-top: 10px;
    justify-content: space-between;
}

.footer-icon {
    width: 25px;
    height: auto;
    opacity: 40%;
}

.footer-icon:hover {
    opacity: 100%;
}

.footer-text {
    color: #ffffff;
    font-size: 12px;
    opacity: 70%;
}

.footer-color {
    background-color: #8897ac;
    color: #ffffff;
}

.carousel-item {
    height: 300px;
}
.carousel-item img {
    height: 300px;
    object-fit: scale-down;
}

.carousel-control-next,
.carousel-control-prev {
    filter: invert(40%);
}

.jumbotron {
    background: linear-gradient(60deg, #004899, #096dd2);
    padding-top: 0%;
    padding-bottom: 0%;
}

.programacion-header {
    background-color: #0065ca;
    color: #ffffff;
    border-radius: 5px;
    padding: 1% 0;
    font-weight: bold;
}

.programacion {
    color: #000;
    border: #8897ac solid 2px;
    border-radius: 5px;
    padding: 1% 0;
}

.prog-descripcion {
    border-top: #8897ac solid 2px;
    padding: 0 10px;
    padding-top: 10px;
    margin-top: 10px;
}

.programacion-container {
    color: #000;
    border: #31708f solid 2px;
    border-radius: 5px;
}

.programacion-header1 {
    background-color: #054e9b;
    color: #fff;
    font-size: large;
    font-weight: bold;
    padding-top: 5px;
    display: grid;
}

.programacion-header1 > * {
    grid-column-start: 1;
    grid-row-start: 1;
}

.programacion-header1 div {
    display: inline-block;
    justify-self: center;
}

.programacion-header1 img {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    justify-self: right;
}

.programacion-header2 {
    background-color: #054e9b;
    color: #fff;
    text-align: center;
    font-size: medium;
    padding: 0 5px;
    padding-bottom: 5px;
}

.programacion-footer {
    background-color: #b7dbff;
    color: #000;
    font-size: small;
    padding: 5px 5px;
}

.tlcd {
    text-align: center;
}

.tlcd div {
    display: inline-block;
    font-family: "tlcdFont";
    font-size: 17px;
    background-color: #8ab8e6;
    border-radius: 5px;
    padding: 4px 7px;
}

.tlcd-responsive {
    text-align: center;
}

.tlcd-responsive div {
    display: inline-block;
    font-family: "tlcdFont";
    font-size: 17px;
    background-color: #8ab8e6;
    border-radius: 5px;
    padding: 4px 7px;
}

@media (max-width: 576px) {
    .tlcd-responsive div {
        font-size: 15px;
        padding: 3px 4px;
    }
}

.mensaje-1 {
    /*background-color: #dfefff;*/
    border: #82c0ff solid 2px;
    border-radius: 10px;
    padding: 10px;
}

.video-link-box {
    border: gray solid 1px;
    border-radius: 5px;
    padding: 10px 10px;
    margin: 10px 0;
}

.thumb-img {
    width: 100%;
    max-width: 700px;
    border: #cccccc solid 1px;
    border-radius: 5px;
    padding: 4px 4px;
}

.card-columns {
    column-count: 1;
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 992px) {
    .card-columns {
        column-count: 3;
    }
}

a:not([href]).doc-link {
    color: #0065ca;
    text-decoration: underline;
}

.text-size-button,
.text-size-button:active {
    display: flex;
    justify-content: center;
    align-content: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 2;
    background-color: #004899;
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 20px;
    margin: 3px 5px 5px 5px;
    -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 y IE 11 */
    user-select: none;
    cursor: pointer;
}

.text-size-button p {
    padding: 4px 10px 0 10px;
    font-size: 1.1em;
}

.text-size-button-b,
.text-size-button-b:active {
    display: flex;
    justify-content: center;
    align-content: center;
    font-weight: bold;
    font-size: 14px;
    background-color: white;
    width: auto;
    margin-top: 7px;
    height: 30px;
    border: solid 1px #004899;
    border-radius: 5px;
    box-shadow: 3px 3px #cccccc;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 y IE 11 */
    user-select: none;
}

.text-size-button-b a {
    padding: 7px 10px 0 10px;
    font-size: 14px;
    text-decoration: none;
    color: #004899;
}

.text-size-button-b p {
    padding: 7px 10px 0 10px;
    font-size: 14px;
    text-decoration: none;
    color: #004899;
}

.centrado {
    display: flex;
    align-items: center;
}

@media (hover: hover) and (pointer: fine) {
    .text-size-button:hover,
    .text-size-button-b:hover,
    .text-size-button-b a:hover {
        background-color: #016be4;
    }
}

.print-button,
.print-button:active {
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 28px;
    line-height: 1.2;
    background-color: #004899;
    color: #ffffff;
    padding: 5px 0 0 1px;
    width: 38px;
    height: 38px;
    margin: 3px 5px 0 5px;
    border-radius: 20px;
    -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 y IE 11 */
    user-select: none;
    cursor: pointer;
}

.print-button:hover {
    background-color: #016be4;
}

@media (max-width: 768px) {
    .text-size-button-b a {
        padding: 9px 7px 0 7px;
        font-size: 12px;
    }
    .text-size-button {
        width: 32px;
        height: 32px;
    }
    .text-size-button p {
        padding: 2px 10px 0 10px;
    }
    .print-button {
        width: 32px;
        height: 32px;
        font-size: 23px;
    }
}

.print-act {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.print-des:hover {
    opacity: 0;
}

.print-act:hover {
    opacity: 1;
}

.only-print {
    display: none;
}

.cursormano {
    cursor: pointer;
}

.cursorlupa {
    cursor: zoom-in;
}

.gif_ident {
    margin-top: 10px;
    width: 100%;
    max-width: 500px;
}

.form-input-off-white {
    background-color: #f2f7fa;
    border-color: #cadae5;
}

.container-iframe {
    position: relative;
    margin: 10px 0;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: auto;
    border-radius: 12px;
}

/* Clases para selector de manuales */

.header-selector {
    display: inline-block;
    vertical-align: middle;
    margin-left: 100px;
    margin-top: 5px;
}

@media screen and (max-width: 992px) {
    .header-selector {
        margin-left: 50px;
    }
}

@media screen and (max-width: 768px) {
    .header-selector {
        margin-left: 30px;
    }
}

.titulo-selector {
    display: block;
    font-size: 3em;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    white-space: nowrap;
}

@media screen and (max-width: 992px) {
    .titulo-selector {
        font-size: 2.5em;
    }
}

@media screen and (max-width: 768px) {
    .titulo-selector {
        font-size: 2em;
        white-space: normal;
    }
}

.subtitulo-selector {
    display: block;
    font-size: 2em;
    padding-left: 5px;
    color: white;
    text-transform: uppercase;
    white-space: nowrap;
}

.arrow-selector {
    height: 25px;
    margin: 0 7px 5px 10px;
}

@media screen and (max-width: 500px) {
    .subtitulo-selector {
        font-size: 1.5em;
        white-space: normal;
    }
    .arrow-selector {
        height: 18px;
        margin: 0 7px 5px 10px;
    }
}

.arrow-selector {
    height: 25px;
    margin: 0 7px 5px 10px;
}

.producto-selector-container {
    padding-top: 20px;
    border-radius: 10px;
    margin: 10px;
    margin-top: 50px;
}

.producto-selector-container img {
    max-width: 280px;
    height: auto;
    transition: transform 0.2s; /* Animation */
}

.producto-selector-container img:hover {
    transform: scale(1.1);
}

.producto-selector-container p {
    font-size: 22px;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 10px;
    font-family: basisGrotesqueBlack;
}

.selector {
    min-height: 68vh;
}

@media (max-width: 992px) {
    .producto-selector-container {
        width: 330px;
    }
    .producto-selector-container img {
        width: 100%;
    }
    .producto-selector-container p {
        font-size: 22px;
    }
}

@media (max-width: 550px) {
    .producto-selector-container {
        margin: 10px;
        margin-bottom: 50px;
    }

    .producto-selector-container p {
        font-size: 20px;
    }
}

/* Fin Clases para selector de manuales */

.celular-container {
    border: 10px solid #444444;
    border-radius: 30px;
    padding: 5px;
    box-shadow: 5px 5px 8px #666666;
    background-color: #272727;
}

.tv-container {
    border: 7px solid #202020;
    border-radius: 5px;
    padding: 2px;
    box-shadow: 5px 5px 8px #666666;
    background-color: #3a3a3a;
    margin-bottom: 10px;
}

.icon-cam {
    width: 100px;
    height: 100px;
    margin: 0px;
    margin-bottom: 10px;
}

.icon-cam img {
    max-width: 60px;
}

.icon-cam p {
    font-weight: bold;
    color: #777777;
    text-align: center;
}

.icon-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: auto;
    max-width: 80%;
}

.imagen-descarga {
    height: 100%;
    max-width: 60px;
    display: block;
    margin: auto;
}

.imagen-link {
    width: 65px;
    display: block;
    margin: auto;
    padding-top: 20px;
}
@media (max-width: 550px) {
    .imagen-descarga {
        width: 60px;
    }
}

.texto-comparti {
    font-size: 12px;
    font-weight: 600;
    color: #8e8e8e;
    text-transform: uppercase;
    text-align: center;
}

.side-line-blue {
    height: 5px;
    margin-bottom: 3px;
    margin-right: 8px;
    margin-left: 5px;
}

.titulo-ppal {
    margin-top: 15px;
    margin-bottom: 10px;
}

.titulo-ppal h3 {
    display: inline-block;
    font-size: 19px;
    text-transform: none;
    font-family: basisGrotesqueBlack;
    margin-bottom: 0;
    color: #202020;
}

.titulo1 {
    margin-top: 40px;
    margin-bottom: 0px;
}

.titulo1 h3 {
    display: inline-block;
    font-size: 20px;
    text-transform: uppercase;
    font-family: basisGrotesqueBlack;
    color: #202020;
}

.titulo2 {
    margin-top: 40px;
    margin-bottom: 10px;
}

.titulo2 h3 {
    display: inline-block;
    font-size: 17px;
    text-transform: uppercase;
    font-family: basisGrotesqueBlack;
    margin-bottom: 0;
    color: #202020;
}

h3.titulo {
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    font-family: basisGrotesqueBlack;
    margin-top: 10px;
    margin-bottom: 5px;
    color: #202020;
}

.subrayado-azul {
    border-bottom: 2px solid #004899;
}

.side-line-blue-small {
    height: 5px;
    margin-right: 8px;
    margin-left: 5px;
    margin-bottom: 5px;
}

.titulo3 {
    margin-top: 20px;
}

.titulo3 h3 {
    display: inline-block;
    font-size: 14px;
    text-transform: uppercase;
    font-family: basisGrotesqueBold;
    font-weight: 700;
}

li a b {
    /* le da color a los titulos de las pestañas */
    color: #004899;
}

.input_form {
    display: block;
    width: 100%;
    padding: 12px 15px;
    margin: 8px auto;
    border: 1px solid rgb(194, 194, 194);
    border-radius: 25px;
    outline: none;
}

.tecla {
    padding: 3px 20px 3px 20px;
    margin: 0px 2px 0px 2px;
    border: 1px solid rgb(225, 233, 233);
    background: rgb(227, 227, 227);
    background: -moz-linear-gradient(225deg, rgba(227, 227, 227, 1) 0%, rgba(251, 251, 251, 1) 50%, rgba(229, 235, 236, 1) 100%);
    background: -webkit-linear-gradient(225deg, rgba(227, 227, 227, 1) 0%, rgba(251, 251, 251, 1) 50%, rgba(229, 235, 236, 1) 100%);
    background: linear-gradient(225deg, rgba(227, 227, 227, 1) 0%, rgba(251, 251, 251, 1) 50%, rgba(229, 235, 236, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3e3e3",endColorstr="#e5ebec",GradientType=1);
    -webkit-box-shadow: 2px 2px 2px 0px rgba(184, 184, 184, 1);
    -moz-box-shadow: 2px 2px 2px 0px rgba(184, 184, 184, 1);
    box-shadow: 2px 2px 2px 0px rgba(184, 184, 184, 1);

    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

@media (max-width: 500px) {
    .tecla {
        display: inline-block;
        padding: 2px 5px 2px 23px;
    }
}

/* Le da estilo al menu deplegable que reemplaza a los tabs al reducir el ancho de la pantalla*/

.j-dropdown {
    width: 100%;
    background-color: #202020;
    font-size: 16px;
    color: white;
    padding: 12px 20px 8px 20px;
    border: none;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    background: url("../../common/img/dropdown.png") right #464646;
    background-size: 14px;
    background-repeat: no-repeat;
    background-position-x: 97%;

    -o-appearance: none; /* se oculta la flecha original del select con distintas propiedades compatibles con diferentes navegadores*/
    -ms-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.j-dropdown option:not(:checked) {
    background-color: white;
    color: #00489a; /* color de letra para opciones no seleccionadas */
}

@media (max-width: 992px) {
    /* Oculta las pestañas  al achicarse*/
    .tabs-menu-large {
        display: none;
    }
    /* Muestra el menú desplegable al achicarse */
    .j-dropdown {
        display: block;
    }
}

@media (min-width: 992px) {
    /* Oculta el menú desplegable al agrandarse*/
    .j-dropdown {
        display: none;
    }
}

/* Clase para ocultar y mostrar una misma imagen que tiene versión desktop y mobile */

.imagen-desktop {
    display: block;
}
.imagen-mobile {
    display: none;
}

@media (max-width: 768px) {
    .imagen-desktop {
        display: none;
    }

    .imagen-mobile {
        display: block;
    }

    .texto-mobile * {
        font-size: 12px;
    }
}
/* Fin Clase para ocultar y mostrar una misma imagen que tiene versión desktop y mobile */

/* Clases para aplicar estilos solo en formato mobile */

@media (max-width: 768px) {
    .texto-mobile * {
        font-size: 12px;
    }

    .padding-mobile {
        padding-left: 2px;
        padding-right: 2px;
    }
}

/* Fin clases mobile*/

/* Clases para recuadros con información importante o notas */
.alerta {
    position: relative;
    padding: 0.3rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    /* border-radius: 0 5px 5px 0; */
    display: flex;
    align-items: center;
    /* font-size: var(--font-size-primary);
    line-height: var(--line-height-primary); */
}

/* Clase para usar en modales de programación */
.alerta-prog {
    padding: 0.5rem;
}

.alerta-prog-text {
    line-height: 1.5;
}

.alerta div i {
    font-size: 25px;
    padding-right: 20px;
}

.alerta div p {
    margin-bottom: 0;
    text-align: justify;
}

.alerta ul {
    margin-bottom: 0;
}

.alerta ul li {
    margin-bottom: 0;
    /* line-height: 1.2; */
}

.alerta-nota {
    color: #747474;
    background-color: #f3f3f3;
}

.borde-nota {
    border-left: 4px solid #8f8f8f;
}

.alerta-importante {
    color: #4e4e4e;
    background-color: #fff34a;
}

@media (max-width: 768px) {
    .alerta {
        padding: 0.3rem 0.7em;
    }

    .alerta div i {
        display: none;
    }

    .alerta div p {
        font-size: 13px;
    }
}

.nota-link {
    color: #004899;
}
.nota-link:hover {
    font-weight: 600;
    color: #0070f0;
    text-decoration: underline;
}
/* Fin Clases para recuadros con información importante o notas */

/* Clases para el header, logo, título y subtitlo */
.logo-manual {
    display: inline-block;
    vertical-align: middle;
    width: 113px;
    margin: 12px 0 12px 30px;
}

@media screen and (max-width: 992px) {
    .logo-manual {
        width: 110px;
    }
}

@media screen and (max-width: 768px) {
    .logo-manual {
        width: 100px;
    }
}

@media screen and (max-width: 500px) {
    .logo-manual {
        width: 90px;
        margin-left: 5px;
    }
}

.header-manual {
    display: inline-block;
    vertical-align: middle;
    margin-left: 120px;
    margin-top: 5px;
}

.material-tecnico-link-btn {
    display: inline-block;
    color: #004899;
    border: 1px solid #004899;
    padding: 8px 22px 4px 22px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    background-color: transparent;
    backdrop-filter: blur(3px);
    transition: all 0.2s ease;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    outline: none;
    margin: 5px 5px 5px 0;
}

.material-tecnico-link-btn:hover {
    color: white;
    background-color: #004899;
    box-shadow: 0 0 12px rgba(0, 238, 255, 0.7);
}

.material-tecnico-link-btn:focus {
    outline: none;
}

@media screen and (max-width: 992px) {
    .header-manual {
        margin-left: 70px;
    }

    .material-tecnico-link-btn {
        padding: 6px 14px 4px 14px;
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .header-manual {
        margin-left: 40px;
    }

    .material-tecnico-link-btn {
        padding: 6px 12px 4px 12px;
        font-size: 12px;
    }
}

@media screen and (max-width: 564px) {
    .header-manual {
        margin-left: 20px;
        font-size: 12px;
        margin: 10px 10px;
    }
}

.titulo-manual {
    display: block;
    font-size: 2.3em;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    white-space: nowrap;
}

@media screen and (max-width: 992px) {
    .titulo-manual {
        font-size: 2em;
    }
}

@media screen and (max-width: 767px) {
    .titulo-manual {
        font-size: 1.5em;
        white-space: normal;
    }
}

.subtitulo-manual {
    display: block;
    font-size: 1.7em;
    color: white;
    text-transform: uppercase;
    white-space: nowrap;
}

@media screen and (max-width: 992px) {
    .subtitulo-manual {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 768px) {
    .subtitulo-manual {
        font-size: 1.2em;
        white-space: normal;
    }
}
/* Fin Clases para el header, logo, título y subtitlo */

/* Clases para botones de Tamaño texto e Imprimir manual y botones de redireccion a otros manuales del header */
.botones-link-manuales {
    margin: 9px 0 0 0;
    display: flex;
    flex-wrap: wrap;
}

.texto-hide {
    align-self: center;
    color: rgb(63, 63, 63);
    font-size: 11px;
    white-space: nowrap;
}

@media screen and (max-width: 500px) {
    .texto-hide {
        display: none;
    }
}
/* Fin Clases para botones de Tamaño texto e Imprimir manual */

/* Clases para botones */
.boton-azul-bold {
    background-color: #004594;
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 20px;
    padding: 10px 17px 8px 17px;
    margin: 0 5px 5px 0;
    -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
}

.boton-azul-bold:hover {
    background-color: #fcea10;
    color: #202020;
}

.boton-azul-cel-bold {
    background-color: #004594;
    color: white;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 20px;
    padding: 10px 17px 8px 17px;
    margin: 0 5px 5px 0;
    -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
}

.boton-azul-cel-bold:hover {
    background-color: #016be4;
    color: white;
}

.boton-negro-bold {
    background-color: #202020;
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 20px;
    padding: 10px 17px 8px 17px;
    margin: 0 5px 5px 0;
    -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
}

.boton-negro-bold:hover {
    background-color: #fcea10;
    color: #202020;
}

.boton-amarillo-bold {
    background-color: #fcea10;
    color: rgb(37, 37, 37);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 20px;
    padding: 10px 17px 8px 17px;
    margin: 0 5px 5px 0;
    -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
}

.boton-amarillo-bold:hover {
    background-color: #004594;
    color: #ffffff;
}

.boton-amarillo-bold-100 {
    background-color: #fcea10;
    color: rgb(37, 37, 37);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
    border-radius: 20px;
    padding: 10px 17px 8px 17px;
    margin: 0 5px 5px 0;
    -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
}

.boton-amarillo-bold-100:hover {
    background-color: #004594;
    color: #ffffff;
}

.boton-amarillo-monitoreo {
    background-color: white;
    color: rgb(37, 37, 37);
    font-size: 1.2em;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 25px;
    padding: 10px 17px 8px;
    margin: 10px 0 0 0;
    -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
}

.boton-amarillo-monitoreo:hover {
    background-color: #1b2fe0;
    color: #ffffff;
    transition: 200ms;
}

@media screen and (max-width: 992px) {
    .boton-amarillo-monitoreo {
        padding: 7px 15px 6px;
        font-size: 1em;
    }
}
/* Clases para botones */

/* Banner de monitoreo */

.banner-monitoreo {
    background-image: url("../img/banner-monitoreo.jpg"); /* No pasar a webp, porque la librería que convierte webp a png en dispositivos incompatible, no lo hace correctamente en background-images*/
    background-size: cover;
    background-position-y: 53%;
    padding: 65px 0;
    color: white;
}

.banner-monitoreo h1 {
    margin-bottom: 6px;
    font-weight: 700;
    line-height: 1.3;
}

@media screen and (max-width: 1200px) {
    .banner-monitoreo {
        padding: 55px 0;
    }
    .banner-monitoreo h1 {
        font-size: 2.5em;
    }
}

@media screen and (max-width: 992px) {
    .banner-monitoreo {
        padding: 40px 0;
    }
    .banner-monitoreo h1 {
        font-size: 2em;
    }
}

@media screen and (max-width: 768px) {
    .banner-monitoreo {
        padding: 30px 0;
    }
    .banner-monitoreo h1 {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 576px) {
    .banner-monitoreo {
        padding: 20px 0;
    }
    .banner-monitoreo h1 {
        font-size: 1.2em;
    }
}
/* Fin Banner de monitoreo */

/* Clases para asistente de códigos personales */
.modal-codigo {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.531);
    font-size: 14px;
    line-height: 1.7;
}

.modal-contenido {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    max-width: 95%;
    width: 450px;
    border-radius: 10px;
    border: 1px solid #e3e3e3;
    box-shadow: 0 15px 20px rgb(0 0 0 / 50%);
}

#result {
    margin-top: 20px;
}

.titulo-code-user {
    font-size: 15px;
    font-weight: 800;
    color: #00489a;
}

.form-codigo-user {
    height: 28px;
    padding: 0.375rem 0.75rem;
    width: 100px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #f2f7fa;
    background-clip: padding-box;
    border: 1px solid #cadae5;
    border-radius: 25px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.resultado-code {
    font-size: 20px;
    text-align: center;
    color: #00489a;
}

.resultado-code b {
    font-size: 17px;
    text-align: center;
}

/* Fin clases para asistente de códigos personales */

.info-producto {
    font-size: 15px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.info-producto span {
    font-size: 15px;
}

.accordion-title {
    /* Clase reservada para titulos de accordions*/
    font-size: 14px;
}

/* .sub-accordion-title {
    /* Clase reservada para titulos de sub-accordions*/

/* Clases para tipos de Portada */

.portada_7 {
    width: 700px;
    display: inline;
}

.portada_8 {
    width: 800px;
    display: inline;
}

/* Fin Clases para tipos de Portada */

/* Clases para footer */

footer {
    border-top: 3px solid #1b2fe0;
    background-color: transparent;
    z-index: 0;
}

.footer-man {
    display: flex;
    justify-content: space-between !important;
    padding-left: 5%;
    padding-right: 5%;
    letter-spacing: 0.025em;
}

.line-footer {
    border-bottom: 1px solid #b9b9b9;
    width: 100%;
}

.contenedor-listas-footer {
    display: flex;
    justify-content: space-between;
}

/* @media screen and (min-width: 320px) {
    .contenedor-listas-footer {
        padding-left: 15px;
    }
} */

.contenedor-ul-footer {
    margin: 0;
    padding: 0;
    /* min-width: 20%; */
}

ul {
    list-style: none;
    padding-inline-start: 0;
}

.li-footer-big {
    text-decoration: none;
    margin-bottom: 18px;
    font-size: 16.8px;
    font-family: basisGrotesqueBold;
}

.li-footer-big a {
    color: #000 !important;
}

.li-footer-button {
    border-radius: 10px;
    margin-top: 22px;
    margin-left: -16px;
}

@media screen and (max-width: 1270px) {
    .footer-man {
        flex-wrap: wrap;
    }
    .contenedor-ul-footer {
        width: 100%;
        margin-top: 25px;
    }
    .li-footer-button {
        padding-left: 15px !important;
    }
}

.li-footer-button a {
    color: white !important;
    font-size: 14px;
    background-color: #1b2fe0;
    border-radius: 20px;
    font-family: basisGrotesqueBold;
    padding: 8px 24px;
    cursor: pointer;
    -webkit-box-shadow: 7px 11px 35px 0 rgba(0, 0, 0, 0.149);
    box-shadow: 7px 11px 35px 0 rgba(0, 0, 0, 0.149);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

.li-footer-button a:hover {
    -webkit-transition: background-color 0.2s, color 0.2s;
    transition: background-color 0.2s, color 0.2s;
    background-color: white;
    color: black !important;
}

.li-footer-light {
    text-decoration: none;
    margin-bottom: 12px;
    font-size: 12.8px;
    color: #868686;
}

.li-footer-light a {
    color: #868686;
}

.li-footer-light a:hover {
    text-decoration: underline #868686;
}

.contenedor-footer-legales {
    padding: 1.8rem 5% 1.8rem 5%;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    letter-spacing: 0.025em;
}

@media screen and (max-width: 640px) {
    .contenedor-footer-legales {
        justify-content: center !important;
        gap: 20px;
    }

    .x28-social-media-icons svg {
        width: 22px !important;
    }
}

.x28-social-media-icons {
    background-color: transparent;
    margin: 4px 16px 0 16px;
    padding: 0;
}

.x28-social-media-icons svg {
    width: 24px;
    color: #76797e;
    background-color: transparent;
}

.x28-social-media-icons svg:hover {
    color: #1b2fe0;
}

.legales a {
    color: #76797e;
    font-size: 14px;
}

.legales {
    color: #76797e;
    font-size: 14px;
}

/* Fin Clases para footer */

/* Clases para modal Diseñamos tu protección */

#modal-survey {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 5;
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
}

.survey {
    margin: 5% auto;
    border: none;
    overflow: auto;
    width: 85%;
    height: 75%;
    z-index: 5;
    position: absolute;
    display: block;
}

.close-survey {
    color: white;
    z-index: 5;
    text-shadow: black 0px 0px 3px;
    position: absolute;
    opacity: 1;
    cursor: pointer;
    padding: 0px;
    background-color: rgb(102, 102, 102);
    border-radius: 100%;
    width: 30px;
    height: 30px;
    text-align: center;
    margin-top: 5%;
    right: 3%;
    transition: opacity 300ms ease 0s;
    display: block;
}

.close-survey img {
    width: 20px;
    margin: 0px auto;
}

@media screen and (max-width: 768px) {
    .survey {
        height: 90%;
        margin: 5% auto;
    }

    .close-survey {
        width: 26px;
        height: 26px;
        margin-right: 8%;
        margin-top: 8%;
    }

    .close-survey img {
        width: 18px;
    }
}

/* Fin Clases para modal Diseñamos tu protección */

/* Estilos  para el pop-up de material tecnico*/
.popup {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    position: fixed;
    float: right;
    top: -100px; /* se carga oculto fuera de la vista */
    background: linear-gradient(90deg, #f5f1f1e7 0%, #e2e7e7e8 100%);
    font-weight: 700;
    padding: 5px 20px 2px 20px;
    border-radius: 50px;
    box-shadow: 0px 4px 10px #659ad6;
    z-index: 1000;
    opacity: 0;
    transition: top 0.7s ease, opacity 0.5s ease;
}
.popup-content::after {
    color: #3d3d3d;
    content: "🚀 ¡INGRESÁ AHORA: MANUALES 📗, GUÍAS 📄 Y MÁS!";
}

.popup:hover {
    background-color: white;
    -webkit-transition: background-color 400ms linear;
    -ms-transition: background-color 400ms linear;
    transition: background-color 400ms linear;
}

.popup p {
    margin: 0;
    font-size: 14px;
}

/* cuando el popup esta visible */
.popup.show {
    top: 20px; /* posición cuando aparece */
    opacity: 1;
    font-family: basisGrotesqueBlack;
}

.popup-close {
    position: relative;
    color: rgb(134, 134, 134);
    cursor: pointer;
    font-size: 45px;
    background-color: transparent;
    font-weight: 100;
    font-family: basisGrotesque;
    outline: none !important;
}

.popup-close:hover {
    color: #000;
}

@media screen and (max-width: 768px) {
    .popup {
        gap: 40px;
        padding: 15px 20px 10px 40px;
    }

    .popup-content::after {
        content: "🚀 ¡INGRESÁ AHORA Y ACCEDÉ A \A📗  MANUALES, 📄 GUÍAS  Y MÁS!";
        white-space: pre-wrap;
    }
}

@media screen and (max-width: 390px) {
    .popup {
        gap: 10px;
        padding: 15px 15px 10px 20px;
    }

    .popup-content::after {
        content: "🚀 ¡INGRESÁ AHORA Y ACCEDÉ A \A📗  MANUALES, 📄 GUÍAS  Y MÁS!";
        white-space: pre-wrap;
    }
}

/* Fin Estilos  para el pop-up de material tecnico*/

/* Estilo del botón scroll to top */
.scroll-top-btn {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #eaeaea;
    border: none;
    border-radius: 50%;
    padding: 0;
    overflow: hidden;
    display: block;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    transition: opacity 0.3s, visibility 0.3s;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

@media screen and (max-width: 768px) {
    .scroll-top-btn {
        bottom: 90px;
        width: 48px;
        height: 48px;
    }
}

/* Estilo del ícono chevron */
.chevron-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    color: #004899;
    transition: color 0.3s;
    display: block;
    transform: translate(-50%, -50%) scale(1.001); /* Corrige problemas de subpíxeles */
    pointer-events: none;
}

/* Botón visible */
.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
}

/* Hover del botón */
@media screen and (min-width: 768px) {
    .scroll-top-btn:hover {
        box-shadow: 0 0 10px !important;
        color: #004899 !important;
    }
}

@media screen and (max-width: 768px) {
    .scroll-top-btn:active {
        box-shadow: 0 0 10px !important;
        color: #004899 !important;
    }
}

.scroll-top-btn:active,
.scroll-top-btn:focus {
    outline: 0 !important;
}

/* .scroll-top-btn:active .chevron-icon {
    transform: scale(0.95); /* Simula un clic sin desplazar el ícono */
/* }

/* Clases nuevas para selector de manuales */

.select-container {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin: 40px auto;
    max-width: 1200px;
    height: 700px;
    align-items: center;
}

.selector-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
    width: 250px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.selector-card .selector-icon {
    width: 200px;
    height: 200px;
    margin-bottom: 15px;
    border-radius: 50%;
    padding: 10px;
}

.selector-card h3 {
    font-size: 22px;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 10px;
    font-family: basisGrotesqueBlack;
}

.selector-card p {
    font-size: 1em;
    color: #666;
    margin-bottom: 20px;
    font-family: basisGrotesque;
    line-height: 2;
}

.text-content-selector button {
    background: linear-gradient(90deg, rgb(5, 81, 168) 0%, rgb(9, 146, 210) 70%, rgb(12 120 218) 100%);
    color: white;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    cursor: pointer;
    border-radius: 20px;
    padding: 10px 17px 8px 17px;
    margin: 0 5px 5px 0;
    -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s ease;
    outline: none;
}

.text-content-selector button:hover {
    background: #fcea10 !important;
    color: black;
    transition: background-color 0.3s ease;
}

.text-content-selector:active button,
.text-content-selector:focus button {
    outline: 0 !important;
}

.text-content-selector h3 p button {
    line-height: 20px;
}

/* Efecto de zoom-in al pasar el cursor */
.selector-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.titulo-select {
    display: block;
    font-size: 3em;
    color: white;
    white-space: nowrap;
    font-family: basisGrotesque;
}

.book-selector {
    height: 50px;
    margin: 0 7px 5px 10px;
}

.text-content-selector {
    display: grid;
    align-content: space-between;
}

@media screen and (max-width: 992px) {
    .titulo-select {
        font-size: 2.5em;
    }
}

@media screen and (max-width: 768px) {
    .titulo-select {
        font-size: 2em;
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .select-container {
        flex-direction: column;
        align-items: center;
    }

    .selector-card {
        width: 90%;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        padding: 20px;
        text-align: left;
        justify-content: space-around;
    }

    .selector-card .selector-icon {
        width: 200px !important;
        height: 200px !important;
        margin-right: 15px;
    }

    .text-content-selector {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
    }

    .selector-card h3 {
        margin-bottom: 5px;
        font-size: 18px;
    }

    .text-content-selector p {
        font-size: 13px;
        color: #666;
        margin-bottom: 10px;
    }

    .text-content-selector button {
        margin-top: 10px;
    }

    .book-selector {
        height: 30px !important;
        margin: 0 7px 5px 10px;
    }

    .selector-card .selector-icon {
        width: 180px !important;
        height: 180px !important;
        margin-right: 15px;
    }
}

@media (max-width: 425px) {
    .select-container {
        flex-direction: column;
        align-items: center;
        height: auto;
    }

    .selector-card {
        width: 90%;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        padding: 20px;
        text-align: left;
        justify-content: space-around;
    }

    .selector-card .selector-icon {
        width: 200px !important;
        height: 200px !important;
        margin-right: 15px;
    }

    .text-content-selector {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
    }

    .selector-card h3 {
        margin-bottom: 5px;
        font-size: 15px;
    }

    .text-content-selector p {
        font-size: 12px;
        color: #666;
        margin-bottom: 10px;
    }

    .text-content-selector button {
        margin-top: 10px;
    }

    .book-selector {
        height: 30px !important;
        margin: 0 7px 5px 10px;
    }

    .selector-card .selector-icon {
        width: 120px !important;
        height: 120px !important;
        margin-right: 15px;
    }
}

@media (max-width: 375px) {
    .selector-card .selector-icon {
        width: 150px !important;
        height: 150px !important;
        margin-right: 15px;
    }

    .titulo-select {
        font-size: 1.5em;
        white-space: normal;
    }

    .book-selector {
        height: 25px;
        margin: 0 7px 5px 10px;
    }
}
/* Fin Clases nuevas para selector de manuales */

/* Clase para iconos de XVR´s */

.icon-xvr {
    max-width: 80px;
}

/* Fin Clase para iconos de XVR´s */

/* Clase para modales de programacion de vehículos */

.modal-prog-veh {
    padding-bottom: 1.5rem !important;
}

/* Fin Clase para modales de programacion de vehículos */

/* Clase para ajustar margenes de accesorios en formato mobile */

@media (max-width: 426px) {
    .justify-accs {
        display: flex !important;
        justify-content: flex-start !important;
        padding: 0;
    }
}

/* Fin Clase para ajustar margenes de accesorios en formato mobile */

/* Clases para errores en asistente de códigos personales */

/* Mensaje general */
.message {
    border-radius: 5px;
    padding: 10px 20px 10px 15px;
    color: #4a4a4a;
    gap: 8px;
    width: fit-content;
    font-size: 13px;
    opacity: 0; /* Oculto inicialmente */
    transition: opacity 0.2s ease-in-out;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Mensaje visible */
.show {
    opacity: 1;
}

/* Estilos de error */
.error {
    background-color: #fcf7b4;
    border-left: 4px solid #ffc400;
}

/* Estilos de nota */
.note {
    background-color: #d1ecf1;
    border-left: 4px solid #bee5eb;
}

/* Icono de error */
.error::before {
    content: "⚠️";
    margin-right: 5px;
    font-size: 14px;
}

/* Icono de nota */
.note::before {
    content: "ℹ";
    margin-right: 5px;
    font-size: 14px;
}

/* Fin Clases para errores en asistente de códigos personales */

/* Clases para botón de configuración del header */

/* Contenedor principal */
.floating-menu {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

/* Botón principal */
.main-button {
    position: relative;
    width: 60px;
    height: 60px;
    background-color: transparent;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    z-index: 50;
    text-decoration: none;
    cursor: pointer;
}

.main-button:hover {
    transform: scale(1.1);
    background-color: transparent;
}

.menu-icon {
    width: 32px;
    height: 32px;
    transition: transform 0.4s ease-in-out;
    color: white;
}

/* Contenendor de botones secundarios */
.menu-items {
    position: absolute;
    top: 50%;
    left: calc(50% - 10px);
    transform: translateY(-50%);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
    z-index: 5;
}

/* Botones secundarios */
.menu-item {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(0);
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: bold;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.menu-item span {
    margin-top: 6px;
    opacity: 0;
    transition: opacity 0.3s ease 0.3s;
    color: white;
    font-weight: normal
}

.icon {
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}

.menu-item:hover .icon {
    transform: scale(1.2);
}

/* Estado abierto */
.floating-menu.open .menu-icon {
    transform: rotate(90deg);
}

.floating-menu.open .menu-items {
    pointer-events: all;
}

/* Despliegue horizontal */
.floating-menu.open .item-1 {
    opacity: 1;
    transform: translateY(-50%) translateX(-220px);
    transition-delay: 0.05s;
}

.floating-menu.open .item-1 span {
    opacity: 1;
    text-align: center;
}

.floating-menu.open .item-2 {
    opacity: 1;
    transform: translateY(-50%) translateX(-150px);
    transition-delay: 0.1s;
}

.floating-menu.open .item-2 span {
    opacity: 1;
    text-align: center;
}

.floating-menu.open .item-3 {
    opacity: 1;
    transform: translateY(-50%) translateX(-80px);
    transition-delay: 0.15s;
}

.floating-menu.open .item-3 span {
    opacity: 1;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .floating-menu::before {
        content: "";
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
        z-index: 1;
    }

    .floating-menu.open::before {
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(3px);
        opacity: 1;
        pointer-events: all;
    }

    .icon {
        margin-bottom: 15px;
    }

    .menu-items {
        left: calc(50% - 2px);
    }

    .main-button {
        width: 40px;
        height: 40px;
    }

    .menu-icon {
        width: 24px;
        height: 24px;
    }

    .menu-item span {
        display: none;
    }
}
/* Fin Clases para botón de configuración del header */

/* Clases para errores en videos */
.vjs-error .vjs-error-display .vjs-modal-dialog-content {
    display: none;
}

.video-js .vjs-modal-dialog {
    background: #fff;
}

.video-js {
    max-height: 400px;
}

.video-js video {
    object-fit: contain;
    background-color: #fff;
    padding-bottom: 15px !important;
}

.video-error-container {
    margin-top: 8px;
    padding: 20px;
    border-radius: 10px;
    background: #f1f1f1f2;
    color: #004899;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 9999;
    text-align: center;
    font-family: basisGrotesque;
}

.video-error-message {
    flex: 1;
    line-height: 20px !important;
}

.fallback-video-btn {
    display: inline-block;
    color: #004899;
    background-color: #ffffff;
    border: solid 1px #004899;
    text-decoration: none;
    padding: 10px 14px 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
}

.fallback-video-btn:hover {
    background-color: #004899;
    color: #fff;
}

/* Fin Clases para errores en videos */