/* --- CHAT COMUNIDAD --- */

/*Cómo leerlo:

Los emojis marcan secciones visuales del diseño.

Las variables -- son tus colores y transparencias base.

.page-chatear asegura que nada de esto afecte a las demás páginas.

Puedes duplicar esta estructura para otros estilos, solo cambiando el prefijo y el fondo.*/


/* 🌍 VARIABLES GLOBALES Y CONFIGURACIÓN BASE */
:root {
  --bg: #0a0f1a;                /* color de fondo base, casi negro azulado */
  --panel: #111827;             /* color de paneles o tarjetas */
  --muted: #a1aab3;             /* gris suave para texto secundario */
  --stroke: rgba(255,255,255,.12); /* bordes suaves y translúcidos */
  --glow: rgba(255,255,255,.06);   /* sombras internas o efectos de brillo */
  --accent: #4ade80;            /* verde acento usado en botones o detalles */
}

* {
  box-sizing: border-box;       /* asegura que padding/border no rompan medidas */
}

html, body {
  height: 100%;
}

/* 🏜️ FONDO Y ESTILO GENERAL DE LA PÁGINA DE CHAT */
body.page-chatear {
  margin: 0;
  color: #e5e7eb; /* texto claro sobre fondo oscuro */
  font-family: 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', sans-serif;

  /* Fondo compuesto: imagen + gradientes */
  background:
    url('fondo-desierto.png') center center / cover no-repeat fixed, /* imagen base */
    radial-gradient(1200px 800px at 80% -10%, rgba(148,163,184,.35), transparent 60%), /* halo superior */
    radial-gradient(1000px 600px at 20% 120%, rgba(99,102,241,.25), transparent 60%),  /* halo inferior */
    linear-gradient(180deg, #0b1020 0%, #0d1525 35%, #0a1622 100%); /* degradado vertical */
}

/* 🧱 CONTENEDOR PRINCIPAL (centra el contenido en pantalla) */
.page-chatear .wrap {
  max-width: 980px;             /* ancho máximo del bloque central */
  margin: 40px auto;            /* centra horizontalmente y separa del borde superior */
  padding: 16px;                /* espacio interno alrededor */
}

/* 🪶 TARJETAS O BLOQUES (efecto translúcido con borde suave) */
.page-chatear .card {
  background: rgba(0,0,0,.35);  /* fondo oscuro translúcido */
  backdrop-filter: blur(6px);   /* desenfoque detrás del panel */
  border: 1px solid var(--stroke);
  border-radius: 16px;          /* bordes redondeados suaves */
  box-shadow: 0 8px 28px var(--glow); /* sombra difusa */
  padding: 14px 16px;           /* espacio interno */
/* 🔧 añadido */
  position: relative;
  overflow: visible;
}

    /* ╔══════════════════════════════════════════╗
   ║ 🧩 ESTRUCTURA BÁSICA Y ELEMENTOS COMUNES  ║
   ╚══════════════════════════════════════════╝ */

/* 📏 Filas flexibles (para agrupar elementos en línea) */
.page-chatear .row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap; /* permite que los elementos bajen a otra línea */
}

/* 🕳️ Pequeño espacio vertical entre bloques */
.page-chatear .space {
  height: 10px;
}

/* 🏷️ Insignias o etiquetas (usadas en cabeceras y estados) */
.page-chatear .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  border: 1px solid var(--stroke);
  padding: 6px 10px;
  border-radius: 999px; /* forma de píldora */
  background: rgba(255,255,255,.04);
}

/* 🔵 Punto verde dentro de la insignia (usuario conectado) */
.page-chatear .badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
}

/* 🔠 Texto muy pequeño o secundario */
.page-chatear .tiny {
  color: var(--muted);
  font-size: 12px;
}

/* 🪶 Línea divisoria suave entre secciones */
.page-chatear .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stroke), transparent);
  margin: 10px 0;
}


/* ╔════════════════════════════════════════╗
   ║ 💬 ÁREA DEL CHAT (mensajes y estructura) ║
   ╚════════════════════════════════════════╝ */

/* 🧱 Contenedor principal del chat */
.page-chatear .chatbox {
  display: flex;
  flex-direction: column;
  height: 540px; /* altura fija del panel */
}

/* 📜 Zona de mensajes */
.page-chatear .messages {
  flex: 1;
  overflow: auto;           /* activa el scroll si hay muchos mensajes */
  padding: 6px;
 padding-bottom: 96px;  /* 🆕 deja espacio para la barra fija */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 💬 Burbuja base de mensaje */
.page-chatear .msg {
  max-width: 76%;            /* ancho máximo de cada mensaje */
  padding: 10px 12px;
  border-radius: 12px;
  line-height: 1.45;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* 👤 Mensaje del usuario (lado derecho, tono verde/azul) */
.page-chatear .msg.user {
  margin-left: auto;
  background: linear-gradient(135deg,#22c55e33,#60a5fa22);
  border: 1px solid rgba(99,102,241,.25);
}

/* 🤖 Mensaje del “avatar IA” (gris translúcido) */
.page-chatear .msg.ai {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

/* ⚙️ Mensaje del sistema (con borde discontinuo y tono verde claro) */
.page-chatear .msg.sys {
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.18);
  color: #bfe7c8;
  font-style: italic;
}


/* ╔════════════════════════════╗
   ║ ✍️ BARRA DE ENTRADA (input) ║
   ╚════════════════════════════╝ */

/* 📦 Contenedor de textarea + botón */
.page-chatear .inputbar {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  position: sticky;
  bottom: 0;
  z-index: 20;

  /* Fondo translúcido y borde superior para separar del chat */
  background: rgba(15,23,42,.92);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,255,255,.08);

  /* Estira el fondo hasta los bordes interiores de la card */
  padding: 8px;
  margin: 0 -8px -8px;
}

@media (max-width:768px){
  .page-chatear .messages{ padding-bottom: 84px; }
  .page-chatear textarea{ min-height: 54px; }
}

/* 📝 Área de texto donde se escribe */
.page-chatear textarea {
  flex: 1;
  resize: vertical;
  min-height: 64px;
  max-height: 180px;
  background: #0f172a;
  color: #e5e7eb;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none; /* elimina borde azul al enfocar */
}

/* 🔘 Botón genérico */
.page-chatear .btn {
  border: 1px solid var(--stroke);
  background: #0f172a;
  color: #e5e7eb;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: filter .2s ease;
}

/* 🌿 Botón principal (más visible) */
.page-chatear .btn.primary {
  background: #123e22;
  border-color: #2b7a42;
}

/* 💡 Efecto al pasar el ratón */
.page-chatear .btn:hover {
  filter: brightness(1.05);
}


/* ╔══════════════════════════════╗
   ║ 👥 LISTA DE USUARIOS ONLINE   ║
   ╚══════════════════════════════╝ */

/* 🧩 Contenedor de “personas conectadas” */
.page-chatear .online {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* 🔸 Etiqueta para cada usuario conectado */
.page-chatear .pill {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
}

/* 🌫️ Texto atenuado */
.page-chatear .muted {
  color: var(--muted);
}

	
	/* ╔══════════════════════════════════════════╗
   ║ 🌱 MENSAJE TEMPORAL (avisos suaves)       ║
   ╚══════════════════════════════════════════╝ */

/* 🟢 Mensaje de aviso temporal en verde suave */
.page-chatear .msg.notice {
  background: rgba(34,197,94,0.15);  /* verde claro translúcido */
  border: 1px solid rgba(34,197,94,0.35);
  color: #b6f7c1;                    /* tono verde menta */
  font-style: italic;
  animation: fadeOut 7s ease forwards; /* se desvanece lentamente */
}

/* 🎞️ Animación de desaparición progresiva */
@keyframes fadeOut {
  0%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}


/* ╔══════════════════════════════════════════╗
   ║ 🌿 LOGO DEL BOSQUE (botón “volver inicio”) ║
   ╚══════════════════════════════════════════╝ */

/* 📍 Posición fija arriba a la izquierda */
.page-chatear .logo-home {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 1000;
  display: inline-block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(255,255,255,.25);
  transition: all .25s ease;
}

/* 🖼️ Imagen dentro del logo */
.page-chatear .logo-home img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ✨ Efecto al pasar el ratón: agranda y gira un poco */
.page-chatear .logo-home:hover {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 0 24px rgba(255,255,255,.35);
}


/* ╔══════════════════════════════════════════════╗
   ║ 📱 VERSIÓN MÓVIL (ajustes para pantallas pequeñas) ║
   ╚══════════════════════════════════════════════╝ */

@media (max-width:768px){

  /* 📍 Recoloca el logo arriba a la derecha y lo hace más pequeño */
  html body.page-chatear a.logo-home {
    position: fixed !important;  /* anula otras posiciones */
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: 64px !important;
    height: 64px !important;
    transform: none !important;
    z-index: 1000;
  }

  /* 🧱 Añade margen al header para que el logo no lo tape */
  body.page-chatear .wrap header.row {
    padding-right: 76px !important;
  }

/* ╔════════════════════════════════════════╗
   ║ 📱 Fondo específico para versión móvil  ║
   ╚════════════════════════════════════════╝ */

@media (max-width: 768px) {
  body.page-chatear {
    background:
      url('fondo-desierto-mobile.png') center center / cover no-repeat fixed,
      radial-gradient(800px 600px at 50% 100%, rgba(99,102,241,.25), transparent 60%),
      linear-gradient(180deg, #0b1020 0%, #0a1622 100%);
  }
}