/* ESTILO GENERAL DE LA PÁGINA */
body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Evita el scroll */
    cursor: none;    /* Opcional: oculta el ratón si es pantalla táctil */
    user-select: none; /* Evita que el usuario seleccione texto */
}

/* Atributo global para que los bordes se pongan dentro de los box y no se sumen externamente */
* {
    box-sizing: border-box;
}

    /* CONTENEDOR PRINCIPAL */
    .contenedor {
        background: black; /* Color del fondo */
        display: flex; /* Acomoda visualmente los elementos que se vayan insertando, por default VERTICAL, de izquierda a derecha */
        height: 100vh; /* Hace que el contenedor mida el 100% de la altura de la pantalla */
        width: 100vw; /* Hace que el contenedor mida el 100% del ancho de la pantalla */
        border: 1px solid rgba(8, 105, 105, 0.582); ; /* Borde */
    }


        /* COLUMNAS BASE (3 columnas)*/
        .columna {
            display: flex; /* Acomoda visualmente los elementos que se vayan insertando, por default VERTICAL, de izquierda a derecha */
            flex-direction: column; /* Acomoda visualmente elementos (en este caso las filas) que se vayan insertando, por default horizontal (de arriba hcia abajo)*/
            /*border: 1px solid white; */ 
            border: none; 
        }



/* ====================================================================================================================================================== */
            .col1 {
                width: 60%; /*  */
            }

            .bloque1 {
                flex: 5; /* Usará 5 espacios de 7, ¿por qué de 7?.. por que se suma este valor y del otro bloque y el numero del flex son los espacios del total*/
                margin-top: 2px; 
                margin-bottom: 0.5px; 
                margin-left: 1px; 
                border-radius: 5px; /* esquinas redondeadas */
                border: 1px solid rgba(8, 105, 105, 0.582); 

                display: flex; /* Acomoda visualmente elementos (en este caso las filas) que se vayan insertando, por default horizontal/ acostadas (se iran poniendo acostadas de arriba hcia abajo)*/
                align-items: center; /* Centra el contenido */
                justify-content: center; /* Centra el contenido  */
            }

            .bloque2 {
                flex: 2; /* Hace que todos los bloques crezcan igual y se repartan el espacio disponible */
                margin-top: 0.5px; 
                margin-bottom: 2px; 
                margin-left: 1px; 
                border-radius: 5px; /* esquinas redondeadas */
                border: 1px solid rgba(8, 105, 105, 0.582); 

                display: flex; /* Acomoda visualmente elementos (en este caso las filas) que se vayan insertando, por default horizontal/ acostadas (se iran poniendo acostadas de arriba hcia abajo)*/
                align-items: center; /* Centra el contenido */
                justify-content: center; /* Centra el contenido  */
            }
/* ====================================================================================================================================================== */



/* ====================================================================================================================================================== */
            .col2 {
                width: 20%;
                /*border-left: 1px solid whitesmoke;*/
                display: flex;
                flex-direction: column;
                
            }


                
                .bloque3 {

                    flex: 2;

                    margin-top: 2px; 
                    margin-bottom: 1px; 
                    margin-left: 1px; 
                    margin-right: 1px; 
                    padding: 0.1px; /* espacio interno (texto no pegado al borde) */
                    background-color: #0000005d; /* estilo tipo panel */
                    border-radius: 5px; /* esquinas redondeadas */
                    border: 1px solid rgba(8, 105, 105, 0.582); 
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                            /* CAJA INTERNA (estructura en 3 filas) */
                            .Box-Peso {
                                display: flex; /* Activa flexbox */
                                flex-direction: column; /* organiza en vertical (filas) */
                                height: 100%; /* ocupa todo el alto del bloque */
                                width: 100%; /* opcional: ocupa todo el ancho */
                                padding: 1px; /* espacio interno */
                                
                            }

                            /* FILA 1: PESO CORPORAL */
                            .peso-titulo {
                                flex: 1; /* ocupa una parte pequeña */
                                display: flex;
                                align-items: center;
                                justify-content: left;
                                font-size: 2vw; 
                                color: wheat;
                            }

                            /* FILA 2: VALOR/DATO */
                            .peso-valor {
                                flex: 2; /* Más grande que las otras */
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 6vw; 
                                font-weight: bold;
                                color: whitesmoke; /* estilo tipo monitor */
                            }

                            /* FILA 3: UNIDAD */
                            .peso-unidad {
                                flex: 1; /* tamaño pequeño */
                                display: flex;
                                align-items: center;
                                justify-content: right;
                                font-size: 2vw; 
                                color: wheat;
                                padding-right: 5px; /* espacio interno */
                            }

                .bloque4 {

                    flex: 2;

                    margin-top: 2px; 
                    margin-bottom: 1px; 
                    margin-left: 1px; 
                    margin-right: 1px; 
                    padding: 0.1px; /* espacio interno (texto no pegado al borde) */
                    background-color: #0000005d; /* estilo tipo panel */
                    border-radius: 5px; /* esquinas redondeadas */
                    border: 1px solid rgba(8, 105, 105, 0.582); 

                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                            /* CAJA INTERNA (estructura en 3 filas) */
                            .Box-Temperatura {
                                display: flex; /* Activa flexbox */
                                flex-direction: column; /* organiza en vertical (filas) */
                                height: 100%; /* ocupa todo el alto del bloque */
                                width: 100%; /* opcional: ocupa todo el ancho */
                                padding: 1px; /* espacio interno */
                            }

                            /* FILA 1: Temperatura */
                            .temperatura-titulo {
                                flex: 1; /* ocupa una parte pequeña */
                                display: flex;
                                align-items: center;
                                justify-content: left;
                                font-size: 2vw; 
                                color: wheat;
                            }

                            /* FILA 2: VALOR/DATO */
                            .temperatura-valor {
                                flex: 2; /* Más grande que las otras */
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 6vw; 
                                font-weight: bold;
                                color: whitesmoke; /* estilo tipo monitor */
                            }

                            /* FILA 3: UNIDAD */
                            .temperatura-unidad {
                                flex: 1; /* tamaño pequeño */
                                display: flex;
                                align-items: center;
                                justify-content: right;
                                font-size: 2vw; 
                                color: wheat;
                                padding-right: 5px; /* espacio interno */
                            }

                .bloque5 {

                    flex: 2;

                    margin-top: 2px; 
                    margin-bottom: 2px; 
                    margin-left: 1px; 
                    margin-right: 1px; 
                    padding: 0.1px; /* espacio interno (texto no pegado al borde) */
                    background-color: #0000005d; /* estilo tipo panel */
                    border-radius: 5px; /* esquinas redondeadas */
                    border: 1px solid rgba(8, 105, 105, 0.582); 

                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                            /* CAJA INTERNA (estructura en 3 filas) */
                            .Box-Presion {
                                display: flex; /* Activa flexbox */
                                flex-direction: column; /* organiza en vertical (filas) */
                                height: 100%; /* ocupa todo el alto del bloque */
                                width: 100%; /* opcional: ocupa todo el ancho */
                                padding: 1px; /* espacio interno */
                            }

                            /* FILA 1: Presion */
                            .presion-titulo {
                                flex: 1; /* ocupa una parte pequeña */
                                display: flex;
                                align-items: center;
                                justify-content: left;
                                font-size: 2vw; 
                                color: wheat;
                            }

                            /* FILA 2: VALOR/DATO */
                            .presion-valor {
                                flex: 2; /* Más grande que las otras */
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 6vw; 
                                font-weight: bold;
                                color: whitesmoke; /* estilo tipo monitor */
                            }

                            /* FILA 3: UNIDAD */
                            .presion-unidad {
                                flex: 1; /* tamaño pequeño */
                                display: flex;
                                align-items: center;
                                justify-content: right;
                                font-size: 2vw; 
                                color: wheat;
                                padding-right: 5px; /* espacio interno */
                            }
/* ====================================================================================================================================================== */



/* ====================================================================================================================================================== */
            .col3 {
                width: 20%;
                /*border-left: 1px solid whitesmoke; */
                display: flex;
                flex-direction: column;

                
            }

            .bloque6 {

                    flex: 2;

                    margin-top: 2px; 
                    margin-bottom: 1px; 
                    margin-left: 1px; 
                    margin-right: 1px; 
                    padding: 0.1px; /* espacio interno (texto no pegado al borde) */
                    background-color: #0000005d; /* estilo tipo panel */
                    border-radius: 5px; /* esquinas redondeadas */
                    border: 1px solid rgba(8, 105, 105, 0.582); 

                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                            /* CAJA INTERNA (estructura en 3 filas) */
                            .Box-Estatura {
                                display: flex; /* Activa flexbox */
                                flex-direction: column; /* organiza en vertical (filas) */
                                height: 100%; /* ocupa todo el alto del bloque */
                                width: 100%; /* opcional: ocupa todo el ancho */
                                padding: 1px; /* espacio interno */
                            }

                            /* FILA 1: Estatura */
                            .estatura-titulo {
                                flex: 1; /* ocupa una parte pequeña */
                                display: flex;
                                align-items: center;
                                justify-content: left;
                                font-size: 2vw; 
                                color: wheat;
                            }

                            /* FILA 2: VALOR/DATO */
                            .estatura-valor {
                                flex: 2; /* Más grande que las otras */
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 6vw; 
                                font-weight: bold;
                                color: whitesmoke; /* estilo tipo monitor */
                            }

                            /* FILA 3: UNIDAD */
                            .estatura-unidad {
                                flex: 1; /* tamaño pequeño */
                                display: flex;
                                align-items: center;
                                justify-content: right;
                                font-size: 2vw; 
                                color: wheat;
                                padding-right: 5px; /* espacio interno */
                            }


            .bloque7 {

                    flex: 2;

                    margin-top: 2px; 
                    margin-bottom: 1px; 
                    margin-left: 1px; 
                    margin-right: 1px; 
                    padding: 0.1px; /* espacio interno (texto no pegado al borde) */
                    background-color: #0000005d; /* estilo tipo panel */
                    border-radius: 5px; /* esquinas redondeadas */
                    border: 1px solid rgba(8, 105, 105, 0.582); 

                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                            /* CAJA INTERNA (estructura en 3 filas) */
                            .Box-Oxigenacion {
                                display: flex; /* Activa flexbox */
                                flex-direction: column; /* organiza en vertical (filas) */
                                height: 100%; /* ocupa todo el alto del bloque */
                                width: 100%; /* opcional: ocupa todo el ancho */
                                padding: 1px; /* espacio interno */
                            }

                            /* FILA 1: Oxigenacion */
                            .oxigenacion-titulo {
                                flex: 1; /* ocupa una parte pequeña */
                                display: flex;
                                align-items: center;
                                justify-content: left;
                                font-size: 2vw; 
                                color: wheat;
                            }

                            /* FILA 2: VALOR/DATO */
                            .oxigenacion-valor {
                                flex: 2; /* Más grande que las otras */
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 6vw; 
                                font-weight: bold;
                                color: whitesmoke; /* estilo tipo monitor */
                            }

                            /* FILA 3: UNIDAD */
                            .oxigenacion-unidad {
                                flex: 1; /* tamaño pequeño */
                                display: flex;
                                align-items: center;
                                justify-content: right;
                                font-size: 2vw; 
                                color: wheat;
                                padding-right: 5px; /* espacio interno */
                            }

            .bloque8 {

                    flex: 2;

                    margin-top: 2px; 
                    margin-bottom: 2px; 
                    margin-left: 1px; 
                    margin-right: 1px; 
                    padding: 0.1px; /* espacio interno (texto no pegado al borde) */
                    background-color: #0000005d; /* estilo tipo panel */
                    border-radius: 5px; /* esquinas redondeadas */
                    border: 1px solid rgba(8, 105, 105, 0.582); 

                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                            /* CAJA INTERNA (estructura en 3 filas) */
                            .Box-Freq {
                                display: flex; /* Activa flexbox */
                                flex-direction: column; /* organiza en vertical (filas) */
                                height: 100%; /* ocupa todo el alto del bloque */
                                width: 100%; /* opcional: ocupa todo el ancho */
                                padding: 1px; /* espacio interno */
                            }

                            /* FILA 1: Frecuencia cardiaca */
                            .freq-titulo {
                                flex: 1; /* ocupa una parte pequeña */
                                display: flex;
                                align-items: center;
                                justify-content: left;
                                font-size: 2vw; 
                                color: wheat;
                            }

                            /* FILA 2: VALOR/DATO */
                            .freq-valor {
                                flex: 2; /* Más grande que las otras */
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 6vw; 
                                font-weight: bold;
                                color: whitesmoke; /* estilo tipo monitor */
                            }

                            /* FILA 3: UNIDAD */
                            .freq-unidad {
                                flex: 1; /* tamaño pequeño */
                                display: flex;
                                align-items: center;
                                justify-content: right;
                                font-size: 2vw; 
                                color: wheat;
                                padding-right: 5px; /* espacio interno */
                            }
            


/* ====================================================================================================================================================== */