/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilo general del cuerpo */
body {
    margin: 0;
    font-family: 'Arial', cursive, sans-serif;
    background-color: #ffffff !important;
    color: #333;
}

/* Cabecera (header) */
header {
    background-color: #ffffff;
    position: relative;
    text-align: center;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Imagen de la cabecera */
.cabecera-img {
    width: 100%;
    max-height: 100px; 
    object-fit: cover; /* puedes usar cover, contain o scale-down */
    display: block;
    margin: 0 auto;
}

/* Botón de cerrar sesión */
    .cerrar-sesion {
        padding: 2px 12px;
        background-color: #f44336;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-weight: arial;
        white-space: nowrap;
    }

    .cerrar-sesion:hover {
        background-color: #d32f2f;
    }

/* Mensaje de bienvenida */
.bienvenida {
    text-align: center;
    margin-top: 30px;
}

/* Explicación */
.explicacion {
    text-align: center;
    margin: 20px;
    font-size: 1.1em;
}

/* Contenedor principal de recursos */
.contenidos {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 40px;
    flex-wrap: wrap;
}

/* Estilo de los recursos (bloques individuales) */
.recurso {
    background-color: #f1f1ff;
    border: 2px dashed #b19cd9;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    width: 250px;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    margin: 10px;
    cursor: pointer;
}

.recurso:hover {
    transform: scale(1.05);
}

.botonera {                 /* Contenedor para los botones */
    text-align: center;     /* Alinea el contenido (en este caso, los botones) al centro horizontalmente. */
    margin: 30px 0;         /* Añade un margen de 30px en la parte superior e inferior y 0 en los lados. */

}


.contenedor-opciones {      /* Este contenedor organiza las opciones de forma flexible. */
  display: flex;            /* Establece un layout flexible para los elementos hijos. */
  flex-wrap: wrap;          /* Permite que los elementos pasen a la siguiente línea si no hay espacio. */
  gap: 10px;                /* Crea un espacio de 10px entre cada opción (tanto horizontal como vertical). */
  margin: 20px;             /* Añade un margen de 20px alrededor del contenedor. */
  justify-content: center;  /* Centra las opciones horizontalmente dentro del contenedor. */
}

.boton {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50; /* Verde */
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: arial;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.boton:hover {
  background-color: #45a049;
}

/* Estilo para imágenes centradas opcionales */
img {
    display: block;
    margin: 50px auto 0 auto;
    width: 120px;
    height: auto;
}

/* Pie de página */
footer {
    background-color: #ffffff !important; /*fondo blanco*/
    text-align: center;
    padding: 15px;
    font-size: 0.9em;
    color: #777;
    margin-top: 40px;
}

/* Imagen logo oficial */
.logooficial {
  margin-top: 15px;         /* Agrega un espacio de 15 píxeles encima del elemento. */
  width: 120px;             /* Establece el ancho de la imagen en 120 píxeles. */
  height: auto;             /* Hace que la altura se ajuste automáticamente manteniendo la proporción original. */
  display: block;           /* Cambia el elemento a tipo bloque, permitiendo usar márgenes automáticos para centrarlo. */
  margin-left: auto;        /* Permite que el navegador calcule el margen izquierdo automáticamente. */
  margin-right: auto;       /* Permite que el navegador calcule el margen derecho automáticamente. */
}

        .galeria-videos {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
            margin-top: 30px;
        }

        .video-container {
            text-align: center;
        }

        .miniatura {
            width: 100px;
            border: 2px dashed #b19cd9;
            border-radius: 15px;
            padding: 10px;
            background-color: #f3f0ff;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .miniatura:hover {
            transform: scale(1.05);
        }

/* Tamaño del video */
video {
  width: 100%;          /* Ocupa todo el ancho del contenedor */
  max-width: 100px;     /* Limita el tamaño máximo del video */
  height: 220px;         /* Ajusta la altura proporcionalmente */
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

 .titulo-rubrica {
            text-align: center;
            font-size: 2em;
            margin: 30px 0 10px;
            color: #333;
        }

        .rubrica-tabla {
            width: 90%;
            max-width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
            font-family: 'Comic Sans MS', cursive;
        }

        .rubrica-tabla th, .rubrica-tabla td {
            border: 2px solid #b19cd9;
            padding: 12px;
            text-align: center;
            background-color: #f9f8ff;
        }

        .rubrica-tabla th {
            background-color: #e3dcff;
            color: #333;
        }

        .rubrica-descripcion {
            margin: 0 auto;
            max-width: 800px;
            text-align: center;
            font-size: 1.1em;
            padding: 10px 20px;
            color: #555;
        }

        .titulo-rubrica {
            text-align: center;
            font-size: 2em;
            margin: 30px 0 10px;
            color: #333;
        }

        .rubrica-tabla {
            width: 90%;
            max-width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
            font-family: 'Comic Sans MS', cursive;
        }

        .rubrica-tabla th, .rubrica-tabla td {
            border: 2px solid #b19cd9;
            padding: 12px;
            text-align: center;
            background-color: #f9f8ff;
        }

        .rubrica-tabla th {
            background-color: #e3dcff;
            color: #333;
        }

        .rubrica-descripcion {
            margin: 0 auto;
            max-width: 800px;
            text-align: center;
            font-size: 1.1em;
            padding: 10px 20px;
            color: #555;
        }

            .mensaje-test {
      text-align: center;
      font-size: 1.2em;
      margin: 30px auto;
      max-width: 800px;
      color: #444;
      background-color: #fdfcff;
      padding: 20px;
      border: 2px dashed #b19cd9;
      border-radius: 15px;
      box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
    }

    .lista-temas {
    text-align: center;
    margin: 30px 0;
    margin-right: 10px;
    }

    select {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: 14px;          /* Aumenta el tamaño del texto */
  padding: 4px;             /* Añade algo de espacio interno */
  text-align: left;         /* Alinea el texto a la izquierda */
  white-space: nowrap;      /* Impide que se corte en varias líneas */
}