/* INICIO CONTENEDOR DE FORMULARIO */

#containerIndicadores {
    font-size: 14.5px;
}


/* FIN CONTENEDOR DE FORMULARIO */


/* inicio sección btns */

#layoutContainer {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

#btnsreportes {
    text-align: center;
    margin-bottom: 2%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2%;
}

#btnsreportes button>a:link {
    text-decoration: none;
}


/* fin sección btns */

h4 {
    text-align: center;
}


/* inicio encabezado */


/* INICIO | Fecha Doc. | Código GID | No. Indicadores */

#first_row {
    display: grid;
    grid-template-columns: repeat(3, auto);
    align-items: center;
    justify-items: center;
}


/* FIN */


/* INICIO | Aldea Inteligente | Sitio */

#second_row {
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    justify-items: center;
}


/* FIN */


/* INICIO | Estado | Municipio | Localidad */

#third_row {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-items: center;
    align-items: center;
}


/* FIN */

#fourth_row {
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-items: center;
    align-items: center;
}

#fourth_row>input {
    text-align: center;
}

.lTrim {
    justify-self: flex-end;
}

.lInicio {
    justify-self: flex-end;
}

#inicioTrim {
    justify-self: flex-start;
}

.lTermino {
    justify-self: flex-end;
}

#finTrim {
    justify-self: flex-start;
}


/* FIN ENCABEZADO */


/* INICIO SECCIÓN DE INDICADORES */


/* Dentro de .contenedor almacenan cada uno de los indicadores */

.contenedor {
    margin-top: 15px;
}


/* INICIO  | Indicador 1, 2, 3...  */

.headerIndicador {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    display: grid;
    align-items: center;
    justify-items: center;
    background-color: #691c32;
    color: white;
    margin-bottom: 8px;
}

.headerIndicador>h6 {
    font-weight: bold;
    margin: 5px;
}


/* FIN */


/* INICIO | Nombre Indicador | Definición | Meta | ODS Impactados  | ( y sus variables)*/

.datosGlobalesIndicador {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    row-gap: 4px;
    grid-template-columns: auto auto;
    column-gap: 5px;
    margin-bottom: 15px;
}

.datosGlobalesIndicador p {
    text-align: justify;
    text-justify: inter-word;
}

.lNombreIndicador,
.lDefinicion,
.lMeta,
.lODS {
    justify-self: flex-end;
}


/* FIN */


/* INICIO | Dimensión a medir | Unidad de medida | Tipo de reporte | Tipo de meta */

.dimensionAmedir {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.cajasDAM {
    display: grid;
    border: 1px dotted gray;
}

.cajaItem1 {
    justify-self: center;
}

.cajaItem2 {
    justify-self: center;
}


/* FIN */


/* INICIO Datos para el cálculo | var a | var b */

.datosCalculo {
    margin-top: 8px;
    margin-bottom: 8px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.datosCalculo input {
    margin-left: 5%;
    text-align: center;
}

.varCalculo {
    display: grid;
    grid-template-columns: 15% auto;
    row-gap: 3px;
}

.varCalculo input {
    justify-self: flex-end;
    align-self: center;
}

.varCalculo span {
    padding-left: 5px;
    align-self: center;
}

.titleDatosCalc {
    font-size: medium;
    font-weight: bold;
    text-align: center;
}


/* FIN */


/* INICIO | SEMÁFORO | TABLA SEMAFORIZACIÓN */

.semaforo {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
}

.circle {
    border: 3px solid black;
    height: 125px;
    width: 125px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    display: grid;
    align-items: center;
    justify-self: flex-end;
    margin-right: 30%;
}

.semaforo table {
    margin-left: 30%;
}

table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

th,
td {
    text-align: center;
    padding: 2px;
}

.thMain {
    background-color: #111;
    color: white;
}


/* FIN */


/* INICIO | OBSERVACIONES | INFORMACIÓN DE SOPORTE QUE SE ANEXARA */

textarea {
    display: block;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    resize: none;
    border: 1px solid black;
    padding: 10px;
    text-align: justify;
    white-space: normal;
    margin-bottom: 5px;
}


/* FIN */


/* INICIO | Firma representante AI | Firma representante CSICT */

#firmas {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

#firmas>div {
    width: 98%;
}


/* FIN */


/* leyenda proyecto aldeas inteligentes */

#leyendaProyecto {
    margin-top: 25px;
    text-align: center;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

#leyenda {
    text-align: justify;
}


/* fin sección indicadores */


/* INICIO grilla de links */

.link_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
}


/* FIN */


/* inicio de grid imágenes */

#myGallery {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#myGallery img {
    max-width: 100%;
}


/* fin de grid imágenes */


/* CELULAR - MOVIL */

@media screen and (min-width: 0px) and (max-width:720px) {
    #btnsreportes {
        grid-template-rows: repeat(3, 1fr);
        row-gap: 2px;
        grid-template-areas: "btnLimpiar btnLimpiar btnLimpiar" "btnCambiarGid btnCambiarGid btnCambiarGid" "btnPrint btnPrint btnPrint";
    }
    #btnLimpiar {
        grid-area: btnLimpiar;
    }
    #btnCambiarGid {
        grid-area: btnCambiarGid;
    }
    #btnPrint {
        grid-area: btnPrint;
    }
    /* INICIO | Fecha Doc. | Código GID | No. Indicadores */
    #first_row {
        grid-template-columns: 1fr;
        justify-items: flex-start;
        row-gap: 2px;
    }
    /* FIN*/
    /* INICIO | Aldea Inteligente| Sitio */
    #second_row {
        grid-template-columns: 1fr;
        justify-items: flex-start;
    }
    /* FIN*/
    /* INICIO | Estado | Municipio | Localidad */
    #third_row {
        grid-template-columns: 1fr;
        justify-items: flex-start;
    }
    /* FIN */
    /* INICIO | Trimestre | Inicio | Inp. Inicio | Término | Inp. Término */
    #fourth_row {
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(2, 1fr);
        row-gap: 3px;
        grid-template-areas: "lTrim lInicio InputInicio" "lTrim lTermino InputFin";
    }
    .lTrim {
        grid-area: lTrim;
    }
    .lInicio {
        grid-area: lInicio;
    }
    #inicioTrim {
        grid-area: InputInicio;
    }
    .lTermino {
        grid-area: lTermino;
    }
    #finTrim {
        grid-area: InputFin;
    }
    /* FIN */
    /* INICIO | Nombre Indicador | Definición | Meta | ODS Impactadis */
    .datosGlobalesIndicador {
        grid-template-columns: 1fr;
    }
    .lNombreIndicador,
    .lDefinicion,
    .lMeta,
    .lODS {
        justify-self: flex-start;
    }
    /* FIN */
    /* INICIO | Dimsensión a medir | Unidad de medida | Tipo de reporte | Tipo de meta */
    .dimensionAmedir {
        grid-template-columns: repeat(2, 1fr);
    }
    /* FIN */
    /* INICIO Datos para el cálculo | var a | var b */
    .varCalculo {
        grid-template-columns: 1fr;
        grid-template-areas: "varA" "inputVarA" "varB" "inputVarB";
    }
    .inputVarA {
        grid-area: inputVarA;
    }
    .inputVarB {
        grid-area: inputVarB;
    }
    .varA {
        grid-area: varA;
    }
    .varB {
        grid-area: varB;
        margin-top: 8px;
    }
    .varCalculo input {
        justify-self: flex-start;
        margin-left: 0px;
        padding-left: 0px;
    }
    /* FIN */
    /* INICIO | SEMÁFORO | TABLA SEMAFORIZACIÓN */
    .circle {
        justify-self: center;
        margin-right: 0%;
    }
    .semaforo table {
        justify-self: center;
        margin-left: 0%;
    }
    /* FIN */
    /* INICIO | Firmas |*/
    #firmas {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }
    /* FIN */
    /* INICIO GRID GALLERIA IMGS ODS*/
    #myGallery {
        grid-template-columns: repeat(6, 1fr);
    }
    /* FIN */
    /* INICIO LINK CONTAINER */
    .link_container {
        grid-template-columns: 1fr;
    }
    /* FIN */
}


/*inicio elementos a ocultar en la impresión del documento*/


/*help: https://stackoverflow.com/questions/21485581/css-hide-placeholder-on-print*/

@media print {
    /*inicio ocultar navbar, sección de botones de reportes, leyenda y el aŕea de notificaciones*/
    .navbar,
    #btnsreportes,
    .leyenda,
    #notification-area>*,
    .link_container {
        display: none;
    }
    /* fin */
     ::-webkit-input-placeholder {
        /* WebKit browsers */
        color: transparent;
    }
     :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: transparent;
    }
     ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: transparent;
    }
     :-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: transparent;
    }
}


/* fin */