/*Aplicar formato general a la pagina*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/*Variables para menajr los colores de los elementos de la página*/
:root {
    --resalteAzul:#4365c4;
    --resalteIndicador:rgb(36,92,79);
    --bordes:#a0a0a0;
    --letras: rgb(89,89,89);
    --letrasTitulos: rgb(255, 255, 255);
    --verdeOscuroTitulos: rgb(27, 68, 58);
    --verdeMedioTitulos: rgb(36,92,79);
    --verdeClaroTitulos: rgb(43, 109, 94);
    --textoResalte: #e6f316;
    --textoHover: rgb(164,33,69);
    --verdeFondo: rgba(43, 109, 93, 0.274);
}

/*Crear un borde en ecada una de las secciones*/
header, aside .form_indicadores, aside .form_selector, article section, footer{
    border: 0.5px solid var(--bordes);
}

/*Aplicar formato y distribución de elementos en la pagina con resolución de pantalla grande*/
.bodyNormal {
    font-family: 'Montserrat', sans-serif;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 3.5rem 1fr 2rem;
    grid-gap: .5rem 0.5rem;
    padding: 0 2rem;
}

/*Aplicar formato y distribución de elementos en la pagina con resolución pequeña para movil*/
.bodyResponsive {
    font-family: 'Montserrat', sans-serif;
    width: 100vw;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3.5rem 1fr 1fr 2rem;
}

/*clase usada para resaltar los option button seleccionados*/
.resalte {
    font-weight: bold;
    color: var(--resalteAzul);
}

/*clase usada para quitar el resalte los option button no seleccionados*/
.noResalte{
    font-weight: normal;
    color: var(--letras);

}

/*Aplica el fromato al logotipo*/
.logo {    
    padding: 0 0.5rem;
    margin: 0.2rem 0.3rem;
    object-fit: scale-down;
    width: 90%;
    height: 51%;
    color:var(--letrasTitulos);
    /*background-color: #fafafa;*/
}

/*Aplica el formato al encabezado para resoluciones de pantalla grande */
.headerNormal {
    grid-column: 1/3;
    display: grid;
    grid-template-columns: 9rem 1fr 13rem;
    grid-template-rows: 3.5rem;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom, var(--verdeOscuroTitulos), var(--verdeMedioTitulos), var(--verdeClaroTitulos));
}

/*Aplica el formato al encabezado para resoluciones pequeñas de dispositivos móviles */
.headerResponsive {
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 4rem 1fr;
    grid-template-rows: 3.5rem;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom, var(--verdeOscuroTitulos), var(--verdeMedioTitulos), var(--verdeClaroTitulos));
}

/*Oculta el menú alterno para resoluciones pequeñas de dispositivos móviles*/
.menu_responsive {
    display: none;
}

/*Oculta el contenedor de la lista del menú alterno para resoluciones pequeñas de dispositivos móviles*/
.contenedor_menu_responsive_ul{
    display: none;
}

/*Aplica el color del texto en los texrtos del footer*/
h5 {
    color: var(--letrasTitulos);
    font-weight: normal;
}

/*Aplica el formato a las listas de indicadores de pegaduras y los menús*/
ul {
    padding: 0 0.3rem;
    margin: 0;
    list-style: none;
}

/*Aplica el formato a los titulos de cada grupo de indicadores de pegaduras*/
ul h4 {
    margin: 0 0 0.5rem 0;    
}

/*Aolica el color de letra al titulo de cada grupo de indicadores de pegaduras a demás de Primeras Acciones y Acciones secundarias*/
h4 {
    color: var(--resalteIndicador);
    font-weight: bold;
}

/*Aplica el color de texto de los menús*/
.menu_li {
    color: var(--letrasTitulos);
}

/*Aplica el color de letra de las listas de indicadores de pegaduras*/
.form_indicadores ul {
    color: var(--letras);
}

/*Aplica el color de letra de las listas de Primeras acciones y acciones secundarias en la sección artículo*/
article li {
    color: var(--letras);
}

/*Aplica el formato al menú para ambas resoluciones */
a {
    text-decoration: none;
    color: var(--letrasTitulos);
    padding: 0.3rem;
    font-size: 0.9rem;
}

/*Aplica el formato al texto del encabezado de la página*/
h1 {
    font-size: 1.5rem; 
    font-weight: normal; 
    padding: 0rem 0.5rem;
    margin: 0rem 0.3rem !important;
    align-items: center;
}

/*Aplica el formato a los titulos laterales: Datos, Indicadores mecanismo de pegadura*/
h3 {
    text-align: center;
    font-size: 1rem;
}

/*Aplica el color de fondo y color de letras de los titulos de cada sección: Encabezado, Datos, Indicadores, Pozo y mecanimo de pegadura*/
.encabezado {
    color: var(--letrasTitulos);
    background-image: linear-gradient(to bottom, var(--verdeOscuroTitulos), var(--verdeMedioTitulos), var(--verdeClaroTitulos));
    font-weight: normal;
}

/*Elimina el color de fondo del encabezado de la pagina para que se haga un solo bloke con el menú*/
#titulo {
    background-image: none;
}

/*Aplica el formato de distribución de los elementos laterales en: Datos, Indicadores, Mecanismo de pegadura*/
aside {
    display: grid;;
    grid-template-rows: 0.1fr 1fr;
    grid-gap: 0.5rem 0;
    grid-row: 2/4;
}

/*Aplica la separación de los titulos en la sección lateral de la página*/
aside .encabezado {
    padding: 0.2rem 0.2rem;
}

/*Dentro del contenedor formulario lateral une las dos columas de cada titulo para centrarlo*/
.form_selector h3 {
    grid-column: 1/3;
}

/*Aplica el formato para cada contenedor dentro del formulario lateral para distinguir las secciones*/
.form_selector div {
    grid-column: 1/3;
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    font-size: 0.9rem;
    margin: 1rem ;
}

/*Aplica formato al selector de pozo*/
.select_pozo {
    padding: 0 0.3rem;
    font-size: 1rem;
    color: var(--letras);
    border: none;
    border-bottom: solid 1px var(--letras);
    background-color: var(--verdeFondo);
}

/*Aplica el color de letras de las etiquetas de cada opcion de indicadores*/
label {
    color: var(--letras);
}

/*Aplica formato a la etiqueta "Pozo"*/
.form_selector label {
    font-weight: bold;
    text-align: right;
    padding: 0 0.5rem;
    margin: 0.5rem 0.5rem;
}

/*Aplica el formato de distribución de los elementos contenidos en el formulario de indicadores*/
.form_indicadores {
    display: grid;
    grid-template-rows: auto repeat(4,auto) 1fr;
    grid-gap: 0 0;
    align-items: center;
    font-size: 0.9rem;
    height: 100%;
}

/*Aplica separación de cada elemento de las listas de indicadores*/
.form_indicadores ul {
    padding: 0.5rem 0.8rem;
}

/*Aplica el margen y bordes en cada una de las secciones de indicadores de pegaduras*/
form ul {
    border: 1px dotted var(--bordes);
    margin: 0.3rem;
}

/*Aplica la separación y márgenes de cada elemento de lista de indicadores de pegaduras*/
.indicadores_container li {
    margin: 0 0 0.2 rem 0;
    padding: 0 0 0 0.8rem;
}

/*Color del texto y altura de la etiqueta mecanismos de pegaduras en la sección lateral*/
#mecanismoPega1 {
    color: var(--textoResalte);
    height: 100%;
}

/*Color del texto de la etiqueta mecanismos de pegaduras en la sección del artículo*/
#mecanismoPega2 {
    color: var(--textoResalte);
    background-image: none;
}

/*Elimina el color de fondo de la etiqueta "Pozo" en la sección del articulo para que se vea como un mismo bloke con el titulo de la misma*/
#pozo {
    background-image: none;
}

/*Formato a la etiqueta de resultados de suma ponderada de los inidcadores de paegaduras, en la sección lateral*/
.etiquetaSuma {
    padding: 0 0.3rem 0.3rem 0.3rem;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    justify-content: center;
    color: var(--letras);
}

/*Define la distribución de los elementos de la sección Articulo y los oculta temporalmente*/
article {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 3.6rem repeat(2,auto);
    grid-gap: 0.3rem 0;
    visibility: hidden;
}

/*Formato del encabezado de la sección articulo*/
.section_header {
    text-align: center;
    grid-column: 1/3;
    background-image: linear-gradient(to bottom, var(--verdeOscuroTitulos), var(--verdeMedioTitulos), var(--verdeClaroTitulos));
}

/*Formato de la sección de estadisticas (se oculta ya que aun está en desarrollo)*/
.section_estadisticas {
    grid-column: 1/3;
    display: none;
}

/*Formato de la sección imagen referente al mecanismo de atrapamiento*/
.section_imagen {
    grid-row: 2/4;
    object-fit: cover;
    width: 100%;
    padding: 0.8rem;
    justify-content: center;
    justify-items: center;
    padding: 3rem 0 0 0;
}

/*Formato del encabezado de la sección de primeras acciones*/
#encabezadoPrimeraAccion {
    text-align: center;
    font-size: 0.9rem;
    margin: 0.3rem 0;
}

/*Formato del listado numerado de primeras acciones*/
.lista_primerasAcciones li {
    padding: 0 0.3rem;
    list-style-position: inside;
    font-size: 0.9rem;
}

/*Numeración de la lista de primeras acciones en negritas*/
.lista_primerasAcciones li::marker {
    font-weight: bold;
}

/*Formato del encabezado de la sección de acciones secundarias*/
#encabezadoAccionesSecundarias {
    text-align: center;
    font-size: 0.9rem;
    margin: 0.3rem 0;
}

/*Formato del listado numerado de acciones secundarias*/
.lista_accionesSecundarias li {
    padding: 0 0.3rem;
    list-style-position: inside;
    font-size: 0.9rem;
}

/*Numeración de la lista de acciones secundarias en negritas*/
.lista_accionesSecundarias li::marker {
    font-weight: bold;
}

/*Formato del pie de página para resoluciones grandes*/
.footerNormal {
    display: grid;
    grid-column: 2/3;
    align-items: center;
    justify-content: center;
    color: var(--letrasTitulos);
    background-image: linear-gradient(to bottom, var(--verdeOscuroTitulos), var(--verdeMedioTitulos), var(--verdeClaroTitulos));
    font-weight: normal;
}

/*Tamaño de letra del pie de página para resoluciones pequeñas para dispositivos móviles*/
.footerResponsive{
    font-size: 0.7rem;
    font-weight: normal;
    display: inline-block;
}

/*Resaltado del texto en etiquetas cuando el puntero del mouse se posiciona sobre ellas*/
label:hover {
    font-weight: bold;
    color: var(--textoHover);
}

/*Resaltado del texto de hipervínculos cuando el puntero del mouse se posiciona sobre ellas*/
a:hover {
    font-weight: bold;
    color: var(--textoHover);
}

/*cambio de color del texto las opciones del menú cuando el puntero del mouse se posiciona sobre ellas*/
.menu_li:hover{
    color: var(--textoHover);
}


/*FORMATOS ACTIVADOS CON RESOLUCIONES DE PANTALLA MENORES A 1200 px*/
@media only screen and (max-width: 1200px){   
    
    /*Formato para el encabezado de la pagina*/
    h1{
        font-size: 1.6rem;
        grid-column: 2/4;  
        padding: 0rem 0.5rem;
        margin: 0rem 0.3rem !important;
        align-items: center;
    }

    /*Se oculta el logotipo*/
    .logo {
        display: none;
    }

    /*Se oculta el menú principal*/
    .menu .menu_li{
        display:none;
    }

    /*Se muesta el icono del menú responsive para resoluciones menores pequeñas y se da formato al mismo*/
    .menu_responsive {
        grid-column: 1/2;
        grid-row: 1/2;
        display: block;
        color: var(--letrasTitulos);
        font-size: 20px;
        text-align: left;
        margin-left: 1rem;
    }
    
    /*Se da formato al contenedor del menú responsive para resoluciones menores, cuando es mostrado al dar click en el icono correspondiente*/
    .contenedor_menu_responsive_ul_activado{
        display: grid;
        grid-row: 1fr;
        grid-column: 1fr;
        position: absolute;
        top: 56px;
        left: 0;
        width: 100%;
        height: calc(100vh - 44px);
        backdrop-filter: blur(1px);
    }
    
    /*Se da formato al menú responsive para resoluciones menores, y se oculta para ser mostrado al dar click en el icono correspondiente*/
    .menu_responsive_ul {
        display: grid;
        position: absolute;
        top: -100%;
        left: 1.9rem;
        color: var(--letras);
        background-color: var(--verdeClaroTitulos);
        justify-items: left;
        padding: 2rem 0.8rem;
        transition: top 2s;

    }

    /*posicionamiento del menú responsive al ser activado*/
    .menu_responsive_ul_activado {
        top: 0px;
    }

    /*Posicionamiento de los elementos de lista dentro del menu responsive*/
    .menu_responsive ul li{
        display: block;
        margin: 0.5rem;
    }

    /*Oculta la imagen del mecanismo de pegadura*/
    .section_imagen{
        display: none;
    }

    /*Alinea la seccipon de primeras acciones y acciones secundarias y pie de pagina para mostrarse por debajo de los indicadores*/
    .section_primerasAcciones, .section_accionesSecundarias {
        grid-column: 1/3;
    }

}

/*FORMATOS ACTIVADOS CON RESOLUCIONES PARA DISPOSITIVOS MOVILES ENTRE 700px Y 300px*/
 @media (min-width: 300px) and (max-width: 700px){
    
    /*Formato para el encabezado de la pagina*/
    h1{
        font-size: 1.1rem;
        grid-column: 2/3;  
        padding: 0rem 0.5rem;
        margin: 0rem 0.3rem !important;
        align-items: center;
    }

    /*Muestra la etiqueta de mecanismo de pegadura*/
    #mecanismoPega1{
        visibility: hidden;
    }

    /*Posiciona el icono de menú responsive a la izquierda*/
    .menu_responsive_ul {
        left: 0;
    }

    /*Posiciona la casilla de texto para introducir el pozo*/
    div .input_pozo {
       padding-left: 0.2rem; 
    }

 }