/* Especificidad 0-0-1 */
header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* Especificidad 0-0-1 */
p {
    width: 95%;          /* En móviles ocupará casi todo el ancho [cite: 851] */
    max-width: 70ch;     /* En escritorio no superará los 70 caracteres de ancho  */
}

/* Especificidad 0-0-1 */
/* ADVERTENCIA: SE DEFINE COLOR DE PRIMER PLANO. EL COLOR DE FONDO SE HEREDA DEL ELEMENTO 'HEADER' */
h1 {
  flex: 1;                      
  text-align: center;
  color: #FFFFFF
}

/* Especificidad 0-0-1 */
nav {
  display: flex;
  flex: 3;                      
  justify-content: space-around; 
  align-items: center;           
}

/* Especificidad 0-1-1 */
input[type="file"] { 
    display: block; 
    width: 100%; 
    margin: 0.5rem 0;
}

/* Especificidad 0-0-2 */
article svg {
    display: block;
    width: 50%;
    height: auto; 
    margin: 0 auto;
    max-width: 95vw; 
}

/* Especificidad 0-0-2 */
body > main > div {
    width: 100%;
    height: 70vh;
}

/* Para las imágenes de la API de noticias */
/* Especificidad 0-0-4 */
main section a img {
    max-width: 100%; 
    display: block;
    margin: 0 auto 0.5em 0; /* Centrado y margen inferior */
    object-fit: cover;
}  

/* -------------------------------------- */
/* Estilos para cronometro.php  */
/* -------------------------------------- */

/* Especificidad 0-1-3 */
main > article > p:nth-of-type(1) { 
    font-size: 3em;
    font-family: monospace;
}

/* Especificidad 0-1-2 */
form[method="POST"] button {
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* Especificidad 0-2-2 */
form[method="POST"] button[name="arrancar"] {
    background-color: #4CAF50; 
    color: white;
}

/* Especificidad 0-2-2 */
form[method="POST"] button[name="parar"] {
    background-color: #f44336; 
    color: white;
}

/* Especificidad 0-2-2 */
form[method="POST"] button[name="mostrar"] {
    background-color: #2196F3; 
    color: white;
}

/* Especificidad 0-2-2 */
form[method="POST"] button:hover {
    opacity: 0.8;
}

/* Especificidad 0-1-3 */
/* ADVERTENCIA: SE DEFINE COLOR DE FONDO. EL COLOR DE PRIMER PLANO SE HEREDA DEL ELEMENTO 'ARTICLE' */
main > article > p:nth-of-type(2) { 
    background-color: #f9f9f9;
}

/* -------------------------------------- */
/* Estilos para las pruebas de usabilidad */
/* -------------------------------------- */

/* Especificidad 0-1-3 */
main article form[method="post"] { 
    display: block; 
}

/* Especificidad 0-1-5 */
/* ADVERTENCIA: SE DEFINE COLOR DE PRIMER PLANO. EL COLOR DE FONDO SE HEREDA DEL ELEMENTO 'FORM' */
main article form button[name="iniciar_prueba"] + p {
    color: grey;
    font-style: italic;
    font-weight: normal;
    border: none;
    margin-top: 0.5rem;
}

/* Estilos básicos para la estructura del formulario */
/* Especificidad 0-0-4 */
main article form label {
    display: block;
    font-weight: 500;
}

/* Especificidad 0-1-4 */
/* Especificidad 0-1-4 */
/* Especificidad 0-0-4 */
/* Especificidad 0-0-4 */
main article form input[type="text"],
main article form input[type="number"],
main article form select,
main article form textarea {
    width: 100%;
    box-sizing: border-box; 
    margin: 0.5rem 0 1rem 0;
}

/* Especificidad 0-1-4 */
main article form button[name="terminar_cuestionario"] {
    margin-top: 1rem;
}

@media (min-width: 320px) and (max-width: 799px) {

    /* Especificidad 0-0-1 */
    header{
        /* REDEFINICIÓN: Se mantiene 'display: flex' para asegurar el contexto de caja en el flujo móvil */
        display: flex;
        /* REDEFINICIÓN: Se mantiene 'display: flex' para asegurar el contexto de caja en el flujo móvil */
        flex-direction: column;
        /* REDEFINICIÓN: Modificación del valor para ajustar la distribución en el eje vertical del móvil */
        justify-content: space-between;
    }

    /* Especificidad 0-0-1 */
    nav {
        /* REDEFINICIÓN: Necesaria para aplicar el nuevo flujo de dirección 'column' en el menú */
        display: flex;       
        flex-direction: column;             
        gap: 0.5rem;    
        padding: 0.5rem;  
    }

    /* Especificidad 0-0-2 */
    /* Para que no se desplieguen las migas */
    header + p {
        display: none;
    }

    /* Especificidad 0-0-1 */
    video{
        width: 100%;
        height: auto;
    }

    /* Especificidad 0-0-1 */
    audio{
        width: 100%;
        height: auto;
    }
   
    /* Estilo para el contenedor del artículo en móvil */
    /* Usamos 'article' para seleccionar el contenedor */
    /* Especificidad 0-0-1 */
    article {
        max-width: 95vw;
        width: 95%; 
    }

     /* Selector para garantizar que la imagen (<img> dentro de <article>) ocupe todo el ancho disponible */
    /* Usamos 'article img' para seleccionar la imagen directamente */
    /* Especificidad 0-0-2 */
    article img {
        width: 100%;
        height: auto; 
        max-width: 100%;
        display: block;
        margin: 0 auto;
        object-fit: contain; 
    }   

    /* Selector para garantizar que la imagen (<img> dentro de <article>) ocupe todo el ancho disponible */
    /* Usamos 'section img' para seleccionar la imagen directamente */
    /* Especificidad 0-0-2 */
    section img {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
        object-fit: contain; 
    }

    /* Estilo para el contenedor del artículo en móvil */
    /* Usamos 'article' para seleccionar el contenedor */
    /* Especificidad 0-0-1 */
    section {
        box-sizing: border-box; 
        max-width: 95vw;
        width: 95%; 
    }

    /* Estilos para hacer la tabla responsiva */

    /* Convertimos todo en una lista vertical */
    /* Especificidad 0-0-1 */
    /* Especificidad 0-0-1 */
    /* Especificidad 0-0-1 */
    /* Especificidad 0-0-1 */
    /* Especificidad 0-0-1 */
    table, thead, tbody, tr, td {
        display: block;
        width: 100%;
    }

    /* Escondemos el encabezado de la tabla (los títulos de arriba) */
    /* Especificidad 0-0-1 */
    thead {
        /* REDEFINICIÓN: Se esconde el encabezado de la tabla */
        display: none;
    }

    /* Mostramos el texto en negrita que metimos por JS */
    /* Especificidad 0-0-2 */
    td b {
        display: inline;
        margin-right: 0.5rem;
    }

    /* Separamos un poco las filas para que no parezca un bloque de texto */
    /* Especificidad 0-0-1 */
    tr {
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
    }

    /* Especificidad 0-0-1 */
    td {
        padding: 0.3rem 0;
        text-align: left; /* Más fácil de leer en móvil */
    }

    /* Inyectamos los nombres de las columnas manualmente */
    /* Especificidad 0-1-3 */
    main td:nth-of-type(1)::before { content: "Hora:"; }
    /* Especificidad 0-1-3 */
    main td:nth-of-type(2)::before { content: "Temperatura:"; }
    /* Especificidad 0-1-3 */
    main td:nth-of-type(3)::before { content: "Sensación:"; }
    /* Especificidad 0-1-3 */
    main td:nth-of-type(4)::before { content: "Lluvia:"; }
    /* Especificidad 0-1-3 */
    main td:nth-of-type(5)::before { content: "Humedad:"; }
    /* Especificidad 0-1-3 */
    main td:nth-of-type(6)::before { content: "Viento:"; }
    /* Especificidad 0-1-3 */
    main td:nth-of-type(7)::before { content: "Dirección:"; }
    /* Especificidad 0-1-3 */
   
}