/* --- style.css (Tiles con color de BD, Preguntas Mejoradas) --- */

/* --- Variables (Colores, Fuentes, etc.) --- */
:root {
    /* -- Paleta General (Más Sobria) -- */
    --color-fondo: #f5f5f5;
    --color-texto: #495057;
    --color-primario: #0056b3;
    --color-primario-hover: #003d82;
    --color-secundario: #6c757d;
    --color-acento: #ffc107;

    /* -- Ya NO necesitamos los colores de categorías aquí -- */

    /* -- Fuentes y Tipografía -- */
    --fuente-principal: 'Roboto', sans-serif;
    --fuente-titulos: 'Roboto', sans-serif;

    /* -- Sombras y Bordes -- */
    --sombra-suave: 0 2px 5px rgba(0, 0, 0, 0.1);
    --sombra-media: 0 4px 8px rgba(0, 0, 0, 0.15);
    --sombra-fuerte: 0 8px 16px rgba(0, 0, 0, 0.2);
    --borde-radio: 15px;

    /* -- Línea Discontinua -- */
    --linea-discontinua: #708090;

    /* -- Colores para Acciones (Jugadores Activos) -- */
    --color-accion-positiva: #28a745; /* Verde */
    --color-accion-negativa: #dc3545; /* Rojo */
    --color-accion-hover: #f8f9fa; /*Blanco para el hover*/
}

/* --- Reset y Estilos Generales (Mantenido) --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
}

a {
    color: var(--color-primario);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-primario-hover);
}

/* --- Header (Mantenido) --- */
header {
    background-color: #39405f;
    color: white;
    text-align: center;
    padding: 1.5rem 1rem;
    border-bottom: 4px dashed var(--linea-discontinua);
    margin-bottom: 1.5rem;
}

header h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 500;
    font-family: var(--fuente-titulos);
}

header p {
    margin: 0.5rem 0 0;
    font-size: 1.2rem;
    font-weight: 300;
}

/* --- Menú Superior (Mantenido) --- */
.user-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.user-info span {
    margin-right: 1rem;
    font-weight: bold;
}

.user-info a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--borde-radio);
    background-color: rgba(255, 255, 255, 0.2);
    margin-left: 0.5rem;
    transition: background-color: 0.2s;
    white-space: nowrap;
    display: inline-block;
}

.user-info a:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* --- Barra de Búsqueda (Mantenida) --- */
.search-box {
    margin-top: 1rem;
    text-align: center;
    margin-bottom: 2rem;
}

.search-box form {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 25px;
    padding: 6px 12px;
    background-color: white;
}

.search-box input[type="text"] {
    border: none;
    outline: none;
    font-size: 1rem;
    width: 220px;
    vertical-align: middle;
}

.search-box button {
    background: none;
    border: none;
    color: var(--color-primario);
    font-size: 1.3rem;
    cursor: pointer;
    vertical-align: middle;
    outline: none;
}

/* --- Tiles (Index) - Color desde la BD --- */
.tile-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
    justify-content: center;
}

.tile {
    /*  El background-color ahora se aplica inline en index.php */
    border-radius: var(--borde-radio);
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    color: var(--color-texto);
    box-shadow: var(--sombra-media);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #ccc;
}

.tile:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-fuerte);
    border-color: var(--color-primario);
}

.tile i {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    color: var(--color-texto);
}

.tile span {
    font-size: 1.1rem;
    font-weight: 400;
}

/* --- Ya NO necesitamos las clases .tile-categoria --- */


/* --- Página de Categoría (Preguntas) - ESTILO MEJORADO --- */
.back-button {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.preguntas-container {
    padding: 20px;
    background-color: white;
    border-radius: var(--borde-radio);
    box-shadow: var(--sombra-suave);
    margin: 20px;
}

.pregunta {
    margin-bottom: 1.5rem;
    padding: 1rem; /* Padding alrededor de cada pregunta */
    border-bottom: 1px solid #eee;
    background-color: #f9f9f9; /* Fondo ligeramente más oscuro */
    border-radius: var(--borde-radio); /* Bordes redondeados */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Sombra sutil */
}

.numero-pregunta {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-primario);
    margin-right: 0.5rem;
    display: inline-block;
    width: 35px;
    text-align: center;
}

.texto-pregunta {
    font-size: 1.1rem;
    display: inline;
    font-family: 'Georgia', serif; /* Tipografía serif */
}

.estrellas-dificultad {
    color: #ccc;
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.estrellas-dificultad .dificultad-activa {
    color: var(--color-acento);
}

/* --- Estilos para <details> y <summary> (Respuestas) --- */
details {
    margin-top: 0.5rem;
    background-color: #f5f5f5;
    border-radius: var(--borde-radio);
    padding: 10px;
    border: 1px solid #ddd;
}

summary {
    cursor: pointer;
    font-weight: bold;
    outline: none;
    color: var(--color-primario);
    padding: 5px;
    border-radius: var(--borde-radio);
    transition: background-color 0.2s;
}

summary:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.texto-respuesta {
    margin-top: 10px;
    padding: 10px;
    background-color: white;
    border-radius: var(--borde-radio);
}

/* --- Paginación (Mantenida) --- */
.paginacion {
    text-align: center;
    margin-top: 2rem;
}

.paginacion a, .paginacion span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    border-radius: var(--borde-radio);
    transition: background-color 0.2s;
}

.paginacion a:hover {
    background-color: #eee;
}

.paginacion .actual {
    background-color: var(--color-primario);
    color: white;
    border-color: var(--color-primario);
    font-weight: bold;
}
.boton-inicio {
    display: block;
    width: max-content;
    margin: 1.5rem auto;
    padding: 10px 15px;
    background-color: var(--color-primario);
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
}

.boton-inicio:hover {
    background-color: var(--color-primario-hover);
}

/* --- Resto de los Estilos (Panel, Formularios, Alertas, Ranking, etc.) --- */
/* --- Panel de Moderador --- */

.user-info {
    text-align: right;
    margin-bottom: 1rem;
    padding-right: 1rem;
    color: white;
}

.user-info a{
  color: white;
  margin-left: 0.5rem;
}
.panel-content {
  padding: 1rem;
  background-color: #fff;
  border-radius: var(--borde-radio);
  box-shadow: var(--sombra-suave);
  margin: 1rem;
}
.panel-content h2 {
 margin-top: 0;
}

.panel-content ul {
    list-style: none;
    padding: 0;
}

.panel-content li {
    margin-bottom: 0.5rem;
}

.panel-content a {
    display: inline-block;
    padding: 8px 12px;
    background-color: var(--color-primario);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color: 0.2s;
}

.panel-content a:hover {
    background-color: var(--color-primario-hover);
}

/* --- Formularios (Crear Usuario, etc.) --- */
form {
    margin: 1rem;
    max-width: 600px;
}
form div{
  margin-bottom: 1rem;
}

form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

form input[type="text"],
form input[type="password"],
form textarea,
form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}

 form select{
   cursor: pointer;
 }
form textarea {
    resize: vertical;
}

form button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

form button[type="submit"]:hover {
    background-color: #45a049;
}

/* --- Alertas ---*/
.alert {
     padding: 15px;
     margin-bottom: 20px;
     border: 1px solid transparent;
     border-radius: 4px;
 }

 .alert-danger {
     color: #721c24;
     background-color: #f8d7da;
     border-color: #f5c6cb;
 }

 .alert-success {
     color: #155724;
     background-color: #d4edda;
     border-color: #c3e6cb;
 }
/* --- Ranking --- */
.ranking-container{
 padding: 1rem;
}
.ranking-container h2{
 text-align: center;
}
.podio {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 2rem;
}

.primer-lugar {
   text-align: center;
   margin-bottom: 1rem;
}

.primer-lugar .usuario-info {
   position: relative;
   display: inline-block;
}
.primer-lugar .usuario-info span{
   position: absolute;
   top: -10px;
   left: -10px;
   background-color: gold;
   color: white;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   text-align: center;
   line-height: 30px;
   font-weight: bold;
}

.primer-lugar img {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   border: 5px solid gold;
   object-fit: cover;
}

.primer-lugar .nombre {
   font-weight: bold;
   font-size: 1.2rem;
   margin-top: 0.5rem;
}

.segundo-tercer-lugar {
   display: flex;
   justify-content: space-around;
   width: 80%;
}

.otro-lugar {
   text-align: center;
}
.otro-lugar .usuario-info {
   position: relative;
   display: inline-block;

}
.otro-lugar .usuario-info span{
   position: absolute;
   top: -10px;
   left: -10px;
    background-color: silver; /*Segundo puesto*/
   color: white;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   text-align: center;
   line-height: 30px;
   font-weight: bold;
}
.otro-lugar:nth-child(2) .usuario-info span{ /*Tercer puesto*/
 background-color: #cd7f32;
}
.otro-lugar img {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 3px solid silver;
    object-fit: cover;
}
.otro-lugar:nth-child(2) img{ /*Tercer puesto*/
   border-color: #cd7f32;
}

.otro-lugar .nombre {
   font-weight: bold;
   margin-top: 0.3rem;
}

.ranking-tabla {
   width: 100%;
   border-collapse: collapse;
}

.ranking-tabla th, .ranking-tabla td {
   padding: 8px;
   border-bottom: 1px solid #ddd;
   text-align: left;
}

.ranking-tabla th {
   background-color: #f0f0f0;
}
.foto-tabla{
 width: 50px;
 height: 50px;
 border-radius: 50%;
 object-fit: cover;
}

/* --- Jugadores Activos (Acciones - Botones) --- */

.ranking-tabla td form{
   display: flex;
   gap: 5px;
}
/* --- Botones de Acciones (Jugadores Activos) --- */
.ranking-tabla td form button {
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    outline: none;
    white-space: nowrap;
    border: 1px solid; /* Borde para todos los botones */
}
.ranking-tabla td form button[value^="+"] {  /* Estilos para botones + */
    background-color:  var(--color-accion-positiva);
    border-color: var(--color-accion-positiva);
    color: white;
}
.ranking-tabla td form button[value^="-"] {  /* Estilos para botones - */
    background-color: var(--color-accion-negativa);
    border-color: var(--color-accion-negativa);
    color: white;
}
.ranking-tabla td form button:hover{
      background-color: var(--color-accion-hover);
      color: var(--color-texto);
}
/* --- Botón Flotante e Iframe (Mantenido) --- */
.floating-button-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.floating-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primario);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    outline: none;
}

.iframe-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    height: 80vh;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    background-color: white;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
}

/* --- Footer (Ajustado)--- */
footer{
    text-align: center;
    padding: 10px;
    background-color: var(--color-secundario); /* Color de fondo del footer */
    color: white;
}
/* --- Media Queries (Responsive) --- */

/* --- Móviles (max-width: 768px) --- */
@media (max-width: 768px) {
    /* -- Tiles -- */
.tile-container {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Más pequeños en móvil */
    gap: 1rem; /* Espacio entre tiles */
}

.tile {
    padding: 1.5rem; /* Menos padding */
}

.tile i {
    font-size: 2rem; /* Iconos un poco más pequeños */
    margin-bottom: 0.5rem;
}

.tile span {
    font-size: 1rem; /* Texto un poco más pequeño */
}
    /* -- Header -- */
     header h1{
        font-size: 1.8rem;
    }
    header p{
        font-size: 1rem;
    }

    /* -- Preguntas -- */
    .back-button {
        font-size: 0.8rem;
    }

    .pregunta {
        margin-bottom: 1rem;
        padding: 0.8rem; /* Menos padding */
    }
    .numero-pregunta {
        font-size: 1.2rem;
        width: 30px;
    }
    .texto-pregunta {
        font-size: 1rem;
    }
      .estrellas-dificultad {
      margin-left: 0.2rem;
    }
      /* -- Menú superior -- */
.user-info {
    flex-direction: column;
    align-items: flex-start;
}

.user-info span {
    margin-right: 0;
    margin-bottom: 0.5rem;
}

.user-info a {
    display: block;
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-bottom: 0.3rem;
    box-sizing: border-box;
}
     /* -- Ranking y Jugadores Activos --*/

      .ranking-tabla th, .ranking-tabla td {
          padding: 5px;
          font-size: 0.9rem;
      }
       .ranking-tabla th:nth-child(4),
      .ranking-tabla td:nth-child(4),
      .ranking-tabla th:nth-child(5),
      .ranking-tabla td:nth-child(5) {
          display: none;
      }

      .podio{
          flex-direction: row;
          width: 95%;
      }
      .segundo-tercer-lugar{
          flex-direction: column;
          width: auto;
      }
     .primer-lugar img {
          width: 75px;
          height: 75px;
          border-width: 3px;
      }
      .otro-lugar img {
          width: 50px;
          height: 50px;
          border-width: 2px;
      }
     .primer-lugar .usuario-info span,
     .otro-lugar .usuario-info span{
          width: 20px;
          height: 20px;
          line-height: 20px;
          font-size: 0.8rem;
      }
      .ranking-tabla td form button {
        padding: 3px 6px;
        font-size: 0.7rem; /* Aún más pequeños */
    }
      .ranking-tabla th:last-child,
      .ranking-tabla td:last-child {
          display: none;
      }
}

/* --- Tablets (min-width: 769px and max-width: 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .tile-container {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.2rem;
    }
}

/* --- Estilos para Títulos de Categoría (categoria.php) --- */
.categoria-header {
    text-align: center; /* Centrar el contenido */
    margin-bottom: 1.5rem; /* Espacio debajo del título/premio */
}

.categoria-titulo {
    font-size: 2rem;      /* Tamaño del título */
    font-weight: bold;
    color: var(--color-primario); /* Color del título */
    margin-bottom: 0.5rem;       /* Espacio entre título y premio */
}

.categoria-premio {
    font-size: 1.2rem;      /* Tamaño del premio */
    color: var(--color-texto); /* Color del texto del premio */
    margin: 0;              /* Sin margen extra */
}