div#page {
    background: none;
    height: 100vh !important;
    overflow: hidden;
    background-image: url(../imagenes/fondo-iniciodesesion.jpg);
    background-size: cover;
    background-position: center;
}

    div#page .descargar p {
        font-size: inherit;
        margin-top: 0;
    }

html div#page:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(8,68,200);
    background: linear-gradient(180deg, rgba(8,68,200,0.23433123249299714) 0%, rgba(3,26,70,0.758140756302521) 36%, rgba(2,7,18,0.6741071428571428) 61%, rgba(0,76,255,0.2539390756302521) 100%);
    z-index: 1;
    pointer-events: none;
}

html body .download-button {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background-color: #040a52; /* rojo-naranja */
    color: white !important;
    text-decoration: none;
    padding: 10px 20px !important;
    border-radius: 30px;
    font-size: 14px;
    transition: background 0.3s;
    font-family: Barlow, sans-serif;
    font-weight: 500;
    border-radius: 40px;
    padding: 12px 15px;
    justify-content: center;
}

.download-button:hover {
    background-color: #e02200;
}

.download-button svg {
    width: 18px;
    height: 18px;
    fill: white;
}

img.cmp-image__image {
    max-width: 200px;
}

.ui.tiny.modal.modal-descargas p {
    color: black;
    font-size: 16px;
}

.bloque-logo .ui.grid .column {
    width: 100% !important;
}

.botones-descarga {
    display: flex;
    gap: 18px;
    margin-top: 30px;
}

html, body,
.titulo-bienvenida h1 {
    color: white;
}

/* Fondo de video */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

    .video-background video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

footer {
    display: none;
}

form#loginForm label {
    display: block;
    color: white;
    font-weight: 300;
    letter-spacing: 0.03em;
}

html .descargar {
    border: 0;
}
.ui.tiny.modal.modal-descargas .content .col-4 i {
    position: relative;
    font-size: 20px;
    display: block;
    text-align: center;
    margin-bottom: 0px;
}
.ui.tiny.modal.modal-descargas .content a {
    box-shadow: 0 3px 12px rgb(0 0 0 / 7%);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: flex !important;
    align-items: center;
    gap: 8px;
    background-color: #040a52;
    color: white !important;
    text-decoration: none;
    padding: 14px 20px !important;
    border-radius: 30px;
    font-size: 14px;
    transition: background 0.3s;
    font-family: Barlow, sans-serif;
    font-weight: 500;
    border-radius: 40px;
    padding: 12px 15px;
    justify-content: center;
    box-shadow: 0 3px 12px rgb(0 0 0 / 7%);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

    .ui.tiny.modal.modal-descargas .content a:hover {
        box-shadow: 0 3px 12px rgb(0 0 0 / 25%);
        border: 1px solid #017cff;
    }

.eleven.wide.column.bloque-logo > .ui > .eight.wide.column {
    width: 100% !important;
}

    .eleven.wide.column.bloque-logo > .ui > .eight.wide.column img.logo {
        width: 162px;
    }

html body .titulo-bienvenida h1 {
    font-size: 29px;
}

header {
    display: none;
}

html body a.item.btn-descargas {
    color: white;
    text-decoration: underline;
}

html form#loginForm button.button {
    background: #041d64 !important;
    border-radius: 20px;
    border: 1px solid #17b4eb;
}

/* Asegurar que el contenido esté por encima del overlay */
#page .ui.grid.container {
    position: relative;
    z-index: 2;
}

/* Estilos para inputs del formulario */
form#loginForm .field input,
form#loginForm .field select {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #333;
}

    form#loginForm .field input::placeholder {
        color: #666;
    }

/* Estilo para el formulario */
form#loginForm {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.ui.modal>.content>.description h3 {
    background-image: url(https://s7g10.scene7.com/is/content/teamviewergmbh/logo-teamviewer-2?dpr=off);
    text-indent: -9999999px;
    background-repeat: no-repeat;
    margin: 0;
    margin-bottom: 25px;
    min-height: 26px;
}
.ui.tiny.modal.modal-descargas .content .col-4 {
    width: 47%;
    margin-bottom: 0;
    float: none;
    padding: 0px;
    font-size: 0;
}
.ui.tiny.modal.modal-descargas .content .col-4 a{

    font-size: 0;
}
.ui.tiny.modal.modal-descargas .content .col-4 a:after {
    font-size: 16px;
}


.ui.tiny.modal.modal-descargas .content a:after {
    content: "";
}
.ui.tiny.modal.modal-descargas .content .col-4:nth-child(2) a:after {
    content: "Descargar para Windows";
}
.ui.tiny.modal.modal-descargas .content .col-4:nth-child(3) a:after {
    content: "Descargar para macOS";
}
.ui.tiny.modal.modal-descargas .content .col-4:nth-child(4) {
    display: none;
    width: 0px;
}
.ui.tiny.modal.modal-descargas .content .col-4:nth-child(4) a:after {
    content: "Descargar para Linux";
}

.ui.modal>.content>.description>.row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0;
}
@media only screen and (max-width: 991px) {
    html .bloque-logo .ui.grid .column {
        width: 100% !important;
        text-align: center;
    }
.ui.modal>.content>.description>.row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0;
    flex-direction: column;
}
    .ui.tiny.modal.modal-descargas .content .col-4 {
    width: 100%;
    margin-bottom: 0;
    float: none;
    padding: 0px;
    font-size: 0;
}
    .botones-descarga {
        display: flex;
        gap: 18px;
        margin-top: 30px;
        flex-direction: column;
    }
}


.col-12 {
    width: 100%;
}

@media only screen and (max-width: 991px) {
html .bloque-logo .ui.grid .column{width:100%!important;text-align:center}
.botones-descarga{display:flex;gap:18px;margin-top:30px;flex-direction:column}
.ui.form input:not([type]),.ui.form input[type=text],.ui.form input[type=email],.ui.form input[type=search],.ui.form input[type=password],.ui.form input[type=date],.ui.form input[type=datetime-local],.ui.form input[type=tel],.ui.form input[type=time],.ui.form input[type=url],.ui.form input[type=number]{padding:.87861429em 1em;font-size:1.3em}
html .ui.form input,.ui.form select{
        height: 50px !important;
        font-size: 1.3em !important;
    
    }
html div#page{
        background: none;
        height: 100vh!important;
        min-height: 100vh!important;
        overflow: auto;
        display: block;
        padding-left: 15px;
        padding-right: 15px;
        background-image: url(../imagenes/fondo-iniciodesesion.jpg);
        background-position: bottom center;
    
}
html form#loginForm button.button{height:50px;font-size:1.3em}
html .ui.form .field{margin-bottom:1.1rem}
html body .titulo-bienvenida h1{font-size:22px}
html .ui.grid.container > .row > .column,.ui.grid.container > .column:not(.row){margin-bottom:1rem!important}
html #page .ui.container{width:100%!important;max-width:2400px!important;margin:0 auto!important;display:block!important}
html form#loginForm label{display:block;color:white;font-weight:300;letter-spacing:.03em;font-size:1.2em}
html .eleven.wide.column.bloque-logo > .ui > .eight.wide.column img.logo{width:140px;min-width:20px}
html div#page .descargar p{font-size:1.2em}
html .ui.modal .content>.description .row{display:flex;flex-direction:column}
html .ui.tiny.modal.modal-descargas .content .col-4{width:100%;margin-bottom:20px;float:left;padding:0 10px}
}