@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap');

:root {
    --Azul: #4CBAB5;
    --AzulHover: #2C9A95;
    --Verde: #A5C63A;
    --VerdeHover: #85A61A;
    --Steel: #8AA4D5;
    --SteelHover: #6A84B5;
    --Rojo: #E94C55;
    --RojoHover: #D92C35;
    --GrisClaro: #CCCCCC;
    --GrisMedio: #868686;
    --GrisTexto: #3C3C3B;
    --Bco: #F6F6F6;
}

::selection {
    background: #a5c53688;
    color: var(--AzulHover);
}

/* Clases para establecer colores y hover */
.azul {
    background-color: var(--Azul);
}

    .azul:hover {
        background-color: var(--Verde);
    }

.verde {
    background-color: var(--Verde);
}

    .verde:hover {
        background-color: var(--Azul);
    }

.rojo {
    background-color: var(--Rojo);
}

    .rojo:hover {
        background-color: var(--RojoHover);
    }

.steel {
    background-color: var(--Steel);
}

    .steel:hover {
        background-color: var(--SteelHover);
    }

/* btones redondos navbar */
.circ {
    border-radius: 50%;
}


/* Scope principal / general */
body {
    font-family: 'Montserrat', sans-serif;
}


h3 {
    padding-top: 20px;
    color: var(--Azul);
    font-weight: 700;
}

h5 {
    color: var(--Azul);
}


small {
    color: var(--GrisTexto);
    letter-spacing: 1px;
    font-weight: 300;
}

.sep {
    height: 10px;
}

.esp {
    width: 10px;
}

.der {
    /*text-align: end;
    line-height: 36px;*/
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.end {
    text-align: end;
    position: relative;
}


/* Texto para membretes, tipo oficio  */
.membrete {
    font-size: 0.8em;
    line-height: 0.8em;
}

    .membrete:last-child {
        text-decoration: underline
    }


input, select, textarea {
    border: 1px solid var(--Verde);
    padding: 5px;
    border-radius: .25rem;
    outline: 0;
    transition: all 0.5s;
    margin-top: 2px;  /*5px*/
    transition: all 0.5s
}

    input:focus, select:focus, textarea:focus {
        border-color: var(--Verde);
        box-shadow: 0 0 0 0.2rem rgba(165, 198, 58,.5);
        transition: all 0.5s
    }

.input-group-text {
    background-color: transparent;
    border-right: 0;
}


input[type=checkbox] {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    padding: 0;
    user-select: none;
    /*flex-shrink: 0;*/
    color: #2563eb;
    border-color: #6b7280;
    border-width: 1px;
    cursor: pointer;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    width: 32px;
    height: 32px;
    border: 1px solid var(--GrisMedio);
    transition: background-color 0.3s ease-in-out;
}

    input[type=checkbox]:checked {
        background-color: var(--Azul);
    }

    input[type=checkbox]:focus {
        border-color: var(--Verde);
    }


input[type="radio"] {
    /* remove standard background appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* create custom radiobutton appearance */
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 3px;
    /* background-color only for content */
    background-clip: content-box;
    border: 1px solid #6b7280;
    background-color: #fff;
    border-radius: 50%;
    vertical-align: text-bottom;
}

    /* appearance for checked radiobutton */
    input[type="radio"]:checked {
        background-color: var(--Azul);
    }




/*ul {
    margin: 0;
    padding: 0;
    
}*/
/* ****** listas <ul class="list"> ******* */

/* Step 1: Common Properties. These styles are required to make icons render reliably */
/*.icon::before {
            display: inline-block;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }*/

ul.list {
    list-style: none;
    margin-left: 2em; /* Separamos la lista de la izquierda */
}

    ul.list li::before { /* Añadimos contenido antes de cada elemento de la lista */
        /*font-family: "Font Awesome 6 Free";*/
        font: var(--fa-font-solid);
        content: "\f04d"; /* Insertamos el valor Unicode del glifo que usaremos */
        padding-right: 10px; /* Establecemos el espacio entre las viñetas y el list item */
        color: var(--Azul); /* Color del glifo */
    }


.h-30 {
    height: 30px;
}


.fondo1 {
    background: url("../img/background01.jpg") fixed;
    background-size: cover;
}

/*.contraste .fondo1 {
    background: url("img/background01c.jpg") fixed;
    background-size: cover;
}*/


.navbar-nav {
    align-items: center;
}



/* MODAL PARA LOGIN */

.login {
    background-color: #fff;
    display: inline-block;
    padding: 20px 40px;
    border: 1px solid #ddd;
    border-radius: 15px;
    box-shadow: 5px 10px 10px #ddd;
}

.app-login {
    color: var(--Azul);
    padding-top: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.input-login {
    width: 80%;
    background-color: var(--Bco);
    height: 45px;
}

.btn-login {
    width: 120px;
    height: 45px;
    margin-top: 30px !important;
    color: white;
    background-color: var(--Azul);
    border-color: var(--Azul);
}


    .btn-login:hover {
        background-color: var(--AzulHover);
        border-color: var(--AzulHover);
    }

.login small {
    letter-spacing: 0;
}

@media only screen and (max-width: 600px) {
    .container {
        padding: 0;
    }

    .login {
        width: 100vw;
    }

    .input-login {
        width: 100%;
    }

    .py-5 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

.marco {
    padding: 15px;
    border: 1px solid gray;
    border-radius: 15px;
    margin: 5px;
    background-color: #fff;
}


/*Fija un div en la esquina inferior derecha */

.fijo {
    padding: 20px;
    text-decoration: none;
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 100;
    background-color: #fff;
    opacity: .5;
    transition: all .5s;
}

    .fijo:hover {
        color: #333;
        opacity: 1;
        transition: all .5s;
        text-decoration: none;
    }


.btn-acceso {
    padding: 8px 8px !important;
    display: flex;
    align-items: center;
    color: #fff;
    transition: all .5s;
    height: 50px;
    border: 1px solid #ffffff00;
}

    .btn-acceso:hover {
        color: #fff;
        transition: all .5s;
        cursor: pointer;
        box-shadow: 0 0 10px var(--GrisMedio);
        border: 1px solid #fff;
    }

.footer {
    color: #fff;
    background-color: var(--GrisMedio);
    min-height: calc(17vh - 51px);
    line-height: 80px;
    font-weight: 300;
    letter-spacing: 3px;
}


/* Marco para fotos */
.prev {
    max-width: 400px;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 5px;
}

/*    .prev:hover {
        cursor: pointer;
    }*/


/*  Carousel superior últimas publicaciones */
.fotobnr {
    display: flex;
    align-items: center;
    min-height: 240px;
}

/*Título*/
.PubA {
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 0;
}

/*Bajada*/
.PubB {
    color: #fff;
    font-weight: 300;
    font-size: .8em;
    text-align: justify;
    margin-bottom: 5px;
}

/* botón leer más... */
.btn_mas1 {
    color: white !important;
    transition: all .5s;
    cursor: pointer;
    padding: 5px 10px;
    margin-left: 5px;
    border-radius: 0;
}

    .btn_mas1:hover {
        color: white;
        transition: all .5s;
        box-shadow: 0 0 10px #fff;
    }


/* Botones por tamaño en Default */

.btn_1 {
    color: #fff;
    padding: 12px 20px;
    border-radius: 25px;
    transition: all .5s;
}

    .btn_1:hover {
        color: #fff;
        cursor: pointer;
        box-shadow: 0 0 10px var(--GrisMedio);
    }

    .btn_1 a {
        color: #fff;
    }

.btn_2 {
    color: #fff;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s;
}

    .btn_2:hover {
        color: #fff;
        box-shadow: 0 0 10px var(--GrisMedio);
        transition: all .5s;
    }


.btn_speech {
    color: #fff;
    background-color: var(--Verde);
    font-size: initial;
    padding: 5px 15px;
    border-radius: 25px;
    transition: all .5s;
}

    .btn_speech:hover {
        color: #fff;
        background-color: var(--Azul);
        cursor: pointer;
        box-shadow: 0 0 10px var(--GrisMedio);
    }

/* Actualidad - barra para título */
.tnot {
    /*font-weight: 700;
    display: flex;
    justify-content: space-between;*/
    border-bottom: 2px solid var(--Azul);
}


/*div Publicación*/
.pub {
    background-color: var(--Bco);
    padding-top: 10px;
    text-align: justify;
    border-bottom: 1px solid var(--Azul);
}

    .pub p {
        font-size: .8em;
    }

.pb1 {
    font-size: 1.1em;
}


/* botón leer Más Publicaciones */

.btn_mas2 {
    color: var(--Azul);
    transition: all .5s;
    border-radius: 15px;
    padding: 5px 10px;
}

    .btn_mas2:hover {
        color: #fff;
        background-color: var(--Verde);
        transition: all .5s;
    }


/* QR como botones */
.btn_rs {
    text-align: center;
    color: var(--Azul);
    transition: all .5s;
}

    .btn_rs:hover {
        color: var(--Verde);
        cursor: pointer;
        transition: all .5s;
        box-shadow: 0 0 10px var(--GrisMedio);
        border-radius: 0 0 15px 15px;
    }

    .btn_rs img {
        text-align: center;
        background-color: var(--Azul);
        padding: 5px;
        transition: all .5s;
    }

    .btn_rs:hover img {
        background-color: var(--Verde);
    }


.modal-backdrop {
    opacity: .8 !important;
}


.tbl {
    background-color: #fff;
}

/* Formato Cambio Contraseña */
.pwd {
    border: 1px solid var(--GrisClaro);
    margin: 15px;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 5px 10px 10px #ddd;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}



/* REGLAS PARA PANTALLAS MOVILES  (mobile)  */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}

@media only screen and (orientation: landscape) {
    div.example {
        background-color: lightblue;
    }
}

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
    div.example {
        display: none;
    }
}


@media only screen and (max-width: 768px) {
    .img-intro, .img-introp {
        display: none;
    }

    .img-intro-mobile {
        max-height: 400px;
        min-height: 100px;
        object-fit: cover;
        object-position: center center;
    }

    .footer {
        line-height: 40px;
        height: auto;
    }

    .der {
        text-align: left;
        line-height: initial;
    }
}

@media only screen and (min-width: 768px) {
    .img-intro-mobile {
        display: none !important;
    }

    .img-intro {
        display: block;
        width: 100%;
        height: auto;
        margin-right: auto;
    }

    .img-introp {
        display: block;
        width: 130%;
        height: auto;
        margin-right: auto;
    }
}



/* Regla para ajustar la img en su contenedor */
@supports(object-fit: cover) {
    .img-intro, .img-introp {
        max-height: 650px;
        min-height: 100px;
        object-fit: cover;
        object-position: center center;
    }

    .img-intro-mobile {
        width: 100%;
        object-fit: cover;
        object-position: center center;
    }
}


/* NOTICIAS - cuadros de compartir y fecha */

.inf {
    color: var(--Verde);
    background-color: var(--Bco);
    line-height: 50px;
    padding: 0 5%;
    /*box-shadow: 0 0 1px;*/
    box-shadow: 2px 2px 10px 0px #A5C63A44;
}

.btn_volver {
    color: white !important;
    transition: all .5s;
    cursor: pointer;
    padding: 10px;
    margin-left: 5px;
}

.content-wrapper {
    min-height: 83vh;
}

/* <<<  <<<    ESTILOS PARA ALTO CONTRASTE         >>>    >>>  */

.contraste {
    color: #fff;
    --Bco: #000;
    --Azul: #1e1e1e;
    --Verde: #1e1e1e;
    --Rojo: #1e1e1e;
    --Steel: #1e1e1e;
}

    /* fondo de la aplicación */
    .contraste .content-wrapper {
        background-color: var(--Bco);
    }

    .contraste .main-header {
        border-bottom: 1px solid #0f0;
    }

    /* apariencia de los botones, todos iguales */
    .contraste .btn_1, .contraste .btn_2, .contraste .btn_mas1, .contraste .btn_mas2, .contraste .card {
        border: solid 1px yellow;
    }

        /* apariencia al HOVER */
        .contraste .btn_1:hover, .contraste .btn_2:hover, .contraste .btn_mas1:hover, .contraste .btn_mas2:hover, .contraste .card:hover, .contraste .btn_speech:hover {
            box-shadow: 0 0 20px #fff;
            background-color: var(--GrisMedio);
            /*border: 2px solid yellow;*/
        }

    /* botón para speech */
    .contraste .btn_speech {
        background-color: #1e1e1e;
        border: solid 2px #0f0;
    }

    /* boton de acceso  */
    .contraste .btn-acceso {
        border: solid 1px yellow;
    }

        .contraste .btn-acceso:hover {
            box-shadow: 0 0 20px #fff;
            background-color: var(--GrisMedio);
        }

    .contraste .profile-username {
        color: #000;
    }

    /* linea divisoria entre Actualidad */
    .contraste .pub, .contraste .tnot {
        border-bottom: 1px solid #0f0;
    }


    /* botón para ver la publicación de Actualidad */
    .contraste .btn_mas2 {
        color: white;
    }

    /* Blanco y negro para las imágenes */
    .contraste img, .contraste canvas {
        -webkit-filter: grayscale(1) contrast(1.2);
    }


    /* botones QR */
    .contraste .btn_rs {
        background-color: #1e1e1e;
        color: #fff;
        border: solid 1px yellow;
    }

        .contraste .btn_rs:hover {
            box-shadow: 0 0 20px #fff;
            background-color: var(--GrisMedio);
        }


    /* tag small */
    .contraste small {
        color: var(--GrisClaro);
    }

    .contraste .st, .contraste .footer {
        background-color: var(--GrisTexto);
    }

    /*
        OTRAS PÁGINAS CONCONTRASTE
    */

    .contraste h3 {
        color: #fff;
    }

    .contraste hr {
        background-color: #0f0;
    }

    .contraste .card {
        background-color: #1e1e1e;
        transition: all .5s;
    }

    .contraste .tbl {
        background-color: inherit;
    }

    .contraste .text-mutted {
        color: #000;
    }

    .contraste .login {
        border: 1px solid #0f0;
        background-color: #1e1e1e;
        box-shadow: none;
    }

    .contraste .app-login {
        color: #fff;
    }

    .contraste select, .contraste input {
        color: #fff;
        background-color: #1e1e1e;
        border-color: yellow;
    }

        .contraste select:focus, .contraste input:focus {
            box-shadow: 0 0 20px yellow;
        }

    .contraste .form-control {
        color: #fff;
        background-color: #1e1e1e;
        border-color: yellow;
    }

        .contraste .form-control:focus {
            color: #fff;
            background-color: #1e1e1e;
            border-color: yellow;
        }

/*      FIN ALTO CONTRASTE      */





/* Background en javascript */
/*
    	

	<script>
        // Add background
        var element = document.getElementById("page");
        element.classList.add("fondo1");
    </script>

 */


/*  HTML NORMALIZADO :





<!-- LOGIN COMUN -->
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://168.88.162.229/app_new_intranet/plugins/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="http://168.88.162.229/app_new_intranet/dist/css/intranet.css" rel="stylesheet" />
    <link href="http://168.88.162.229/app_new_intranet/Images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <title>AdminWeb</title>
</head>

<body>
    <form id="form1" runat="server">
        <div class="py-5"></div>
        <div class="container" style="text-align: center;">
            <div class="login" style="width:500px;">
                <img src="http://168.88.162.229/app_new_intranet/Images/logo_146.png" class="img-fluid" />
                <p class="app-login">Administración Web</p>
                <asp:TextBox ID="TxtUsuario" runat="server" type="number" class="input-login" placeholder="Usuario" required></asp:TextBox>
                <p></p>
                <asp:TextBox ID="TxtPass" runat="server" class="input-login" placeholder="Contraseña" TextMode="Password" onpaste="return false" required />
                <asp:Button ID="BtnLogin" runat="server" Text="Ingresar" class="btn-login" />
            </div>
            <br />
            <br />
            <br />
        </div>
    </form>

    <style>
        body {
            background: url("http://168.88.162.229/app_new_intranet/Images/background01.jpg") fixed;
            background-size: cover;
        }
    </style>

</body>



<!-- DIALOG -->
<dialog id="DialogConfirm">
    <h5>¡ATENCIÓN!</h5>
    <p>El Consentimiento Informado que está viendo, quedará marcado como <b>DENEGADO</b> o <b>REVOCADO</b> según seleccione el botón correspondiente.</p>
    <div style="text-align: center">
        <span class="btn btn-danger" onclick="cerrar()"><i class="fas fa-chevron-left"></i>&nbsp;Cancelar</span>
        <span class="btn btn-info" onclick="denegar()"><i class="fas fa-ban"></i>&nbsp;Denegar</span>
        <span class="btn btn-info" onclick="revocar()"><i class="fas fa-undo-alt"></i>&nbsp;Revocar</span>
    </div>
</dialog>

<style>
    dialog[open] {
        /*background-color: #ffe;* /
        position: fixed; /* Posición fija * /
        /*width: 50%;*/ /* Ancho: media pantalla, centrada; * /
        max-width: 750px; /* Ancho máximo * /
        top: 10px; /* Posición desde arriba * /
        box-shadow: 0 0 10px 5px #777; /* pinche sombrita * /
    }
    /* cambia el fondo del modal * /
    dialog::backdrop {
        background-color: rgba(0,0,0,0.8);
    }

    dialog::backdrop {
        background-image: linear-gradient(#98c81c, #4ABAB5);
        mix-blend-mode: darken;
    }
</style>



<!-- PRELOAD -->
    <dialog id="dwait">
        <img src="http://168.88.162.229/app_new_intranet/Images/preloader.gif" class="img-fluid" />
        <h3 style="color: #000">Reuniendo información...</h3>
        <h5 style="color: #777">En unos segundos tendremos los datos...</h5>
    </dialog>

*/