/* --------------------------------CONGIGURACIÓN DEL MENÚ LATERAL------------------*/
/*Importar google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/*-----------------------------CONFIGURACIÓN DEL LIENZO PARA LAS GRÁFICAS------------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    position: relative;
}

html {
  padding: 20px;
  font-weight: 300;
  margin-top: 0px;
}

main {
    padding: 60px;
    margin-top: -65px;
}

section {
    margin-bottom: 40px;
}

h1 {
    font-size: 3em;
    font-weight: 100;
}

.tituloAnalisis {
    display: flex; /* Usar flexbox */
    justify-content: space-between; /* Mover el ícono a la derecha */
    
}


h2 {
    font-size: 1.4em;
    margin-bottom: 15px;
    font-weight: 200;
    color: white;
}
p{
    color: white;
}

hr {
    border: none; /* Eliminar el borde predeterminado */
    height: 2px; /* Altura de la línea */
    background-color: white; /* Color de la línea */
    margin: 10px 0; /* Espaciado arriba y abajo */
}
figure, canvas {
    background-color: rgba(21, 133, 153, 0.03);
    padding: 10px 10px 30px;
}

canvas {
    width: 100%;
}


/* grid */

[class*='cols'] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.cols-1 > * {
    width: 100%;
    margin: 10px;
}

.cols-2 > * {
    width: 50%;
    margin: 10px
}


@media  (max-width: 800px) {

    main {
        padding: 0;
    }

    h1 {
        font-size: 2.1em;
        font-weight: 100;
    }

    [class*='cols'] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cols-2 > * {
        width: 100%;
    }
}


/*------------------------CONFIGURACIÓN PARA EL ÍCONO DEL COHETE---------------------*/

.rocket {   
    position: relative;
    font-size: 30px; /* Ajusta el tamaño del ícono aquí */
    cursor: pointer;
    transform: translate(0px, 0px); /* Mover el cohete a la derecha */
}

.rocket:hover i {
    color: varr(--third-color); /* Cambia el color del ícono al pasar el mouse */
    transform: scale(1.1); /* Aumenta el tamaño del ícono al 110% */
}
.flame {
    position: left;
    bottom: -10px; /* Ajusta este valor para separarla más si es necesario */
    left: 45%; /* Mover la llama a la izquierda */
    width: 10px;
    height: 10px;
    background-color: orange;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-100px) skew(-45deg); /* Mover hacia arriba y a la izquierda */
    opacity: 0;
    animation: none;
}

@keyframes flameAnimation {
    0% {
        height: 10px;
        opacity: 0.8;
        transform: translateX(-50%) translateY(-14px) skew(-37deg); /* Inclinada */
    }
    50% {
        height: 30px;
        opacity: 1;
        transform: translateX(-50%) translateY(-14px) skew(-37deg); /* Inclinada */
    }
    100% {
        height: 10px;
        opacity: 0;
        transform: translateX(-50%) translateY(-14px) skew(-37deg); /* Inclinada */
    }
}

@keyframes launchAnimation {
    0% {
        transform: translate(0px, 0); /* Ajusta para mover el cohete */
    }
    100% {
        transform: translate(0px, 0px); /* Ajusta este valor para que suba menos */
    }
}

/*----------------------------------------------------CONFIGURACIÓN PARA LAS COLUMNAS SEMÁFORO*/
#container {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.column {
    width: 30%;
    padding: 10px;
    border-radius: 5px;
}

#greenColumn {
    background-color: rgba(40, 167, 69, 0.2); /* Verde con 20% de opacidad */
    border: 2px solid #28a745; /* Mantiene el borde sólido verde */
    color: white; /* Letras en blanco */
}

#yellowColumn {
    background-color: rgba(255, 193, 7, 0.2); /* Amarillo con 20% de opacidad */
    border: 2px solid #ffc107; /* Mantiene el borde sólido amarillo */
    color: white; /* Letras en blanco */
}

#redColumn {
    background-color: rgba(220, 53, 69, 0.2); /* Rojo con 20% de opacidad */
    border: 2px solid #dc3545; /* Mantiene el borde sólido rojo */
    color: white; /* Letras en blanco */
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}


@media print {
    body {
        font-size: 12px;
        color: black;
    }

    #inputSection {
        display: none; /* Ocultar la sección de entrada */
    }

    #container {
        display: block;
    }

    .column {
        page-break-inside: avoid; /* Evitar que las columnas se dividan entre páginas */
    }

    ul {
        padding: 0;
        list-style: none;
    }

    li {
        margin: 5px 0;
        border: 1px solid #ccc; /* Añadir bordes opcionales */
        padding: 5px;
    }
}

.hcolumn {
    color: #ccc;
}

/*------------------------CONFIGURACIÓN PARA EL BOTÓN DESCARGAR REPORTE---------------------*/
.download-bnt {   
    position: relative;
    font-size: 30px; /* Ajusta el tamaño del ícono aquí */
    cursor: pointer;
    transform: translate(0px, 0px); /* Mover el cohete a la derecha */
}

.download-bnt:hover i {
    color: varr(--third-color); /* Cambia el color del ícono al pasar el mouse */
    transform: scale(1.2); /* Aumenta el tamaño del ícono al 110% */
}