/*
COLORES
---
GrisFondo: #38444D
GrisClaro: #AAAAAA
VerdeClaro: #D9CB04
VerdeOscuro: #908702
ANARANJADO: #E95C00
ANARANJADO OSCURO: #9B3D00
AMARILLO: #D9CB04
gris muy claro: #C6C6C6
---
*/






html {font-family: "Roboto", sans-serif}
h1 {font-size: 3.5em; font-family: "Lato", sans-serif}
h2 {font-size: 3.0em; font-family: "Lato", sans-serif}
h3 {font-size: 2.0em; font-family: "Lato", sans-serif}
h4 {font-size: 1.5em; font-family: "Lato", sans-serif}
h5 {font-size: 1.0em; font-family: "Lato", sans-serif}
h6 {font-size: 0.5em; font-family: "Lato", sans-serif}
p  {font-size: 1.0em; font-family: "Lato", sans-serif}



div.hoja {width: max-width:800px; padding: 0px; margin:0px;}

div.sinBordes {padding: 0px; margin:0px; }


/*NAVEGACIÓN ---------------------*/
div.BLOQUE_navegacion {max-width:100%; padding: 0px; margin:0px; margin-top: 30px; margin-bottom:80px; margin-right: 30px; margin-left: 30px}

    /*BOTONES -----------------------------*/
    .w3-button.w3-round-large {
        background-color: black;
        color: white;
        border: 1px solid #00BFFF;
        border-radius: 6px;
        padding: 5px;
        margin: 0;
        font-size: 1.0em;
        font-family: 'Barlow', sans-serif;
        font-weight: 300; /* Especifica el peso "Thin" de la fuente */
        text-align: center;
    }

    /* Es una buena práctica limpiar el float en el contenedor */
    .BLOQUE_login::after {
        content: "";
        display: table;
        clear: both;
    }
    /*BOTONES -----------------------------*/


    button.botonGenerico {

        color: white;
        border: 1px solid #00BFFF;
        border-radius: 6px;
        padding: 5px;
        margin: 0;
        font-size: 1.0em;
        font-family: 'Barlow', sans-serif;
        font-weight: 300; /* Especifica el peso "Thin" de la fuente */
        text-align: center;

    }

/*NAVEGACIÓN ---------------------*/






/*BOTONES -----------------------------*/
.w3-button.w3-round-large {
    /*background-color: black;*/
    color: white;
    border: 1px solid #00BFFF;
    border-radius: 6px;
    padding: 5px;
    margin: 0;
    font-size: 1.0em;
    font-family: 'Barlow', sans-serif;
    font-weight: 300; /* Especifica el peso "Thin" de la fuente */
    text-align: center;
}

/* Es una buena práctica limpiar el float en el contenedor */
.BLOQUE_login::after {
    content: "";
    display: table;
    clear: both;
}
/*BOTONES -----------------------------*/


div.BLOQUE_login {max-width:100%; padding: 0px; margin:0px; margin-top: 30px; margin-bottom:80px; margin-right: 30px}

div.BLOQUE_logo {max-width:100%; padding: 0px; margin:0px; margin-bottom:60px;}
    img.BLOQUE_logo_logo {width: 200px; }

div.BLOQUE_texto { width: 100%; padding: 0px; margin: 0px;}
        div.BLOQUE_texto_titulo {max-width:100%; padding: 0px; margin:0px; margin-bottom:0px; }
            img.BLOQUE_texto_tituloIMG {width: 800px; }
            p.BLOQUE_texto_titulo_texto  {color: rgba(255, 255, 255, 0.7); line-height:44px; letter-spacing: -0.5px; margin:0px; font-size: 3.3em; font-family: 'Barlow', sans-serif; font-weight: 100; text-align: center;}

        div.BLOQUE_texto_parrafos {max-width:550px; padding: 0px; margin:0px; margin-bottom:50px; }
            p.BLOQUE_texto_parrafo  {color: rgba(255, 255, 255, 0.7); line-height:24px; ; letter-spacing: -0.5px; margin:0px; font-size: 1.3em; font-family: 'Barlow', sans-serif; font-weight: 100; text-align: center;}

div.BLOQUE_accion {max-width:550px; padding: 20px; margin:0px; border: 1px solid #0A284C; border-radius: 20px; margin-bottom: 100px;}
    div.BLOQUE_accion_contenedor {padding: 0px; margin:0px;}
        div.BLOQUE_accion_contenedor_secundario {padding: 0px; margin:0px; margin-bottom: 10px;}
            p.BLOQUE_accion_codigo  {color: rgba(255, 255, 255, 0.7); line-height:24px; margin:0px; font-size: 1.2em; font-family: 'Barlow', sans-serif; font-weight: 100; text-align: center;}
            
            p.BLOQUE_accion_mensaje  {color: rgba(255, 255, 255, 0.7); line-height:34px; margin:0px; font-size: 1.9em; letter-spacing: -1px; font-family: 'Barlow', sans-serif; font-weight: 100; text-align: center;}
            input.BLOQUE_accion_codigoInput  {border: 1px solid #00BFFF; border-radius: 6px; margin:0px; padding: 0px; color: #000000; line-height:32px; font-style: italic; font-size: 1.1em; font-family: 'Barlow', sans-serif; font-weight: 300; text-align: center;}
            input.BLOQUE_accion_codigoInput_formulario  {width: 300px;  border: 1px solid #00BFFF; border-radius: 6px; margin:0px; padding: 0px; color: #000000; line-height:32px; font-style: italic; font-size: 1.1em; font-family: 'Barlow', sans-serif; font-weight: 300; text-align: center;}
            input.BLOQUE_accion_codigoInput_formularioDESTACADO  {width: 300px;  border: 1px solid #00BFFF; border-radius: 6px; background-color: #648CAC; margin:0px; padding: 0px; color: #FFFFFF; line-height:32px; font-style: italic; font-size: 1.1em; font-family: 'Barlow', sans-serif; font-weight: 400; text-align: center;}
            /*-PLACE HOLDER DESTACADO--------------------*/
            /* Estilos para el texto del placeholder en navegadores WebKit (Chrome, Safari, Edge) */
            input.BLOQUE_accion_codigoInput_formularioDESTACADO::-webkit-input-placeholder {
                color: #FFFFFF; /* Cambia a blanco */
                opacity: 1; /* Opcional: asegura la máxima opacidad */
            }
            /* Estilos para el texto del placeholder en Firefox (versiones recientes) */
            input.BLOQUE_accion_codigoInput_formularioDESTACADO::placeholder {
                color: #FFFFFF; /* Cambia a blanco */
                opacity: 1; /* Opcional: asegura la máxima opacidad */
            }
            /* Estilos para el texto del placeholder en Internet Explorer */
            input.BLOQUE_accion_codigoInput_formularioDESTACADO:-ms-input-placeholder {
                color: #FFFFFF; /* Cambia a blanco */
            }
            /*-PLACE HOLDER DESTACADO--------------------*/

            /*-TOOLTIP BURBUJA INFO--------------------*/
            /* 1. Estilo del Contenedor de la Pista (el "i" en el círculo) */
            .tooltip {
                /* Hace que el 'span' se pueda posicionar y le da forma circular */
                display: inline-block;
                width: 16px; 
                height: 16px;
                border-radius: 50%; /* Hace el círculo */
                background-color: #648CAC; /* Color de tu estilo destacado */
                color: #FFFFFF; /* Color de la "i" */
                
                /* Centra la "i" dentro del círculo */
                text-align: center;
                line-height: 18px;
                font-size: 13px; /* Tamaño de la "i" */
                font-style: normal; /* Asegura que la 'i' no esté en cursiva */
                cursor: help; /* Muestra el cursor de ayuda */

                /* Importante para que el tooltip se posicione respecto a este punto */
                position: relative; 
            }

            /* 2. Estilo y Comportamiento del Texto de Ayuda (el Tooltip) */
            .tooltip::after {
                content: attr(data-help); 
                
                /* Posición Relativa al Icono */
                position: absolute; 
                z-index: 100; 
                
                /* Posicionamiento Vertical: Justo debajo del icono */
                top: 100%; 
                margin-top: 25px; 
                
                /* Centrado Horizontal: Centra la caja bajo el icono "i" */
                left: 50%; 
                transform: translateX(-75%); 
                
                /* Dimensiones y Aspecto (Mantener) */
                max-width: 250px;
                width: max-content; 
                min-width: 100px;
                
                background-color: #427399;
                color: #fff;
                padding: 10px 15px;
                border-radius: 6px;
                text-align: left;
                white-space: pre-wrap; 
                
                /* Visibilidad */
                visibility: hidden;
                opacity: 0;
                transition: opacity 0.3s, visibility 0.3s;
            }

            /* 3. Mostrar el Tooltip al pasar el cursor (o tocar en táctil) */
            .tooltip:hover::after {
                visibility: visible;
                opacity: 1;
            }
            /*-TOOLTIP BURBUJA INFO--------------------*/



            /* 4. Opcional: Ajuste del párrafo para que todo quede centrado verticalmente */
            .w3-container.BLOQUE_accion_contenedor_terciario {
                /* Si quieres centrar todo verticalmente en el contenedor principal */
                display: flex;
                align-items: center;
                gap: 5px; /* Pequeño espacio entre el texto y el icono */
            }



            .BLOQUE_accion_checkbox_opcion-contenedor {
                display: block;
                margin-bottom: 5px;
                margin-left: 150px;
                text-align: left;
            }

            .BLOQUE_accion_checkbox_opcion-contenedor label {
                margin-left: 5px; 
                vertical-align: middle;
                color: rgba(255, 255, 255, 0.7); line-height:24px; margin:0px; font-size: 1.2em; font-family: 'Barlow', sans-serif; font-weight: 100;
            }

            .BLOQUE_accion_checkbox_opcion-contenedor input[type="checkbox"] {
                vertical-align: middle;
            }


        div.BLOQUE_accion_contenedor_terciario {
          padding: 0px; 
          margin: 0px;
          display: flex;
          align-items: center; /* Alinea los elementos verticalmente al centro */
          justify-content: center; /* Centra los elementos horizontalmente */
          gap: 10px;
        }

        
div.BLOQUE_contacto {max-width:100%; padding: 0px; margin:0px; }
    p.BLOQUE_contacto_texto  {color: rgba(255, 255, 255, 0.4); line-height:20px; margin:0px; font-size: 0.9em; font-family: 'Barlow', sans-serif; font-weight: 100; text-align: center;}

div.BLOQUE_px9 {max-width:100%; padding: 0px; margin:0px; margin-bottom:600px; }
    img.BLOQUE_px9_logo {width: 50px; margin:0px;  padding:0px;}
    p.BLOQUE_px9_texto  {color: rgba(255, 255, 255, 0.4); line-height:20px; margin:0px; font-size: 0.9em; font-family: 'Barlow', sans-serif; font-weight: 100; text-align: center;}






















/*------------------------------------------------------------------*/
@media only screen and (max-width: 600px) {
/*------------ screenMobile ----*/


/*NAVEGACIÓN ---------------------*/
div.BLOQUE_navegacion {max-width:100%; margin-top: 10px; margin-right: 0px; margin-left: 0px}

/*NAVEGACIÓN ---------------------*/


div.hoja {width: 380px; padding: 0px; margin:0px; }

div.BLOQUE_login {max-width:100%; margin-top: 10px; margin-right: 0px}

img.BLOQUE_logo_logo {width: 180px; }

div.BLOQUE_texto {padding-right: 10px; }
div.BLOQUE_texto_titulo {margin-bottom:10px; }
img.BLOQUE_texto_tituloIMG {width: 350px; }
div.BLOQUE_texto_parrafos {max-width:320px;}

div.BLOQUE_accion {margin-right: 6px; }
.BLOQUE_accion_checkbox_opcion-contenedor {
    display: block;
    margin-bottom: 5px;
    margin-left: 60px;
    text-align: left;
}



div.BLOQUE_px9 { margin-bottom:225px; }
img.BLOQUE_px9_logo {width: 40px;}



/*------------ screenMobile ----*/
}

/* 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) {...}