/* static/css/app.css (SOLUCIÓN CON TEXTURA AVANZADA) */

body {
  background-color: #18181b; /* Color de respaldo */
}

/* Logo personalización adicional si querés */
nav img {
  max-height: 100px;
}

/* 1. La capa de fondo principal (ahora sin la textura) */
#background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
  
  /* ESTA LÍNEA ES NUEVA E IMPORTANTE: */
  /* Crea un contexto de apilamiento para que el blend-mode funcione correctamente. */
  isolation: isolate;

  --bg-image-url: none;

  /* Ahora solo tenemos 2 capas aquí: el gradiente y la foto */
  background-image: 
    linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(23, 78, 18, 0.8)),
    var(--bg-image-url);
  
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center;
}

/* 2. Capa virtual SOLO para la textura (AÑADIDO) */
#background-layer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* IMPORTANTE: La ruta a tu nueva textura JPG */
  background-image: url('/static/images/texture.webp');
  background-size: cover; /* O 'repeat' si es una textura repetible */
  
  /* REQUERIMIENTO 1: MODO DE MEZCLA */
  /* 'overlay' mezcla la textura con lo de abajo, es ideal para grano */
  mix-blend-mode: overlay;

  /* REQUERIMIENTO 2: OPACIDAD */
  /* La textura tendrá un 50% de opacidad */
  opacity: 0.4;
}


/* 3. Estilos para el contenedor de la página (sin cambios) */
#page-wrapper {
  position: relative;
  z-index: 1;
  background-color: transparent;
}


/* El resto de tu CSS original... */
#root {
  max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center;
}
.logo {
  height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo { animation: logo-spin infinite 20s linear; }
}
.card {
  padding: 2em;
}
.read-the-docs {
  color: #888;
}

/* En tu app.css o un bloque <style> */
header.ad-banner { min-height: 96px; margin-top: 0px;margin-bottom: 10px;} /* 96px es h-24 */
aside.ad-banner { min-height: 96px; } /* En móvil también es h-24 */

@media (min-width: 1024px) { /* lg */
    aside.ad-banner { min-height: auto; } /* En desktop la altura es automática */
}

#answer-input,
.form-input,
.form-textarea {
    width: 100%;                  /* 5. Todos los cuadros tengan el mismo ancho */
    background-color: transparent;  /* 1 y 3. Fondo transparente */
    border: 1px solid white;        /* 1. Borde blanco de 1px */
    border-radius: 15px;             /* 1. Bordes redondeados */
    color: white;                   /* 3. Letra blanca */
    padding: 0.75rem;               /* Espaciado interno para que no se pegue el texto */
    transition: border-color 0.3s;  /* Transición suave para el foco */
}

/* Estilo específico para los inputs de una sola línea */
.form-input {
    height: 50px; /* 5. Altura fija para los inputs */
}

/* Estilo específico para el área de texto (más alto) */
.form-textarea {
    height: 150px; /* 5. Mayor altura para el cuerpo del mensaje */
    resize: vertical; /* Permite al usuario ajustar la altura si lo desea */
}

/* Estilo para los placeholders */
.form-input::placeholder,
.form-textarea::placeholder {
    color: #9ca3af; /* 3. Color gris para el placeholder (clase gray-400 de Tailwind) */
    font-size: 0.9rem; /* 3. Tamaño de letra ligeramente más pequeño */
}

/* Estilo cuando el usuario hace clic en un campo */
.form-input:focus,
.form-textarea:focus {
    outline: none; /* Quitamos el feo borde azul por defecto */
    border-color: #fBBF24; /* Cambiamos el color del borde a amarillo al enfocar (clase yellow-400 de Tailwind) */
}

/* Estilo para los mensajes de error de Django */
.errorlist {
    list-style-type: none; /* Quitamos los puntos de la lista */
    padding: 0;
    margin: 0.25rem 0 0 0;
    color: #f87171; /* 4. Color rojo para el error (clase red-400 de Tailwind) */
    font-size: 0.875rem; /* Hacemos el texto de error un poco más pequeño */
}

#guess-button,
#reward-button,
#retry-button,
#hint-button,
#surrender-button {
  border-radius: 15px;
}


/*results*/

.mensaje-respuesta {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 1rem 0;
    padding: 0.75rem 1.25rem;
    border-radius: 15px;
    border: 2px solid transparent;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    text-align: center;
}

.mensaje-respuesta.correcto {
    background-color: #d1fae5; /* verde muy claro */
    color: #065f46; /* verde oscuro */
    border-color: #10b981; /* verde medio */
}

.mensaje-respuesta.incorrecto {
    background-color: #fee2e2; /* rojo muy claro */
    color: #991b1b; /* rojo oscuro */
    border-color: #ef4444; /* rojo medio */
}