/* style.css - RESTAURADO AL ORIGINAL */

/* Reset básico */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Título centrado */
header {
  text-align: center;
  margin: 0;
  padding: 20px 10px;
  background: #111827; /* azul oscuro */
  color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

header p {
  margin: 5px 0 0;
}

header h1 {
  font-family: Impact, Arial, sans-serif;
  font-size: 2.5rem;
  margin: 0;
}

/* Enlace del título sin subrayado */
header h1 a {
  text-decoration: none;
}

header h1 span:nth-child(1) { color: #ef4444; } /* rojo */
header h1 span:nth-child(2) { color: #3b82f6; } /* azul */

/* --- MENÚ LATERAL Y HAMBURGUESA --- */
.hamburger {
  display: block; 
  position: absolute;
  top: 25px;   
  right: 20px;
  z-index: 1001; 
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.hamburger span {
  display: block;
  width: 30px;
  height: 4px;
  margin-bottom: 5px;
  background-color: white; /* Las rayas son blancas */
  border-radius: 2px;
}

/* Sidebar oculto por defecto */
.sidebar {
  position: fixed;
  top: 0;
  left: -250px; /* Oculto a la izquierda */
  width: 250px;
  height: 100%;
  background: #1f2937;
  color: white;
  transition: left 0.3s ease;
  z-index: 1000;
  padding-top: 60px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.5);
}

.sidebar h3 {
  text-align: center;
  color: #9ca3af;
}

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

.sidebar ul li {
  border-bottom: 1px solid #374151;
}

.sidebar ul li a {
  display: block;
  padding: 15px 20px;
  color: #f3f4f6;
  text-decoration: none;
  transition: background 0.2s;
}

.sidebar ul li a:hover {
  background: #374151;
}

/* Navegación para pantallas grandes (ocultar checkbox hack del original si no se usa, 
   o mantener estilo si el original usaba otro sistema) */
nav {
  position: absolute;
  top: 20px;
  right: 20px;
}

/* Cuadrados índice (Index.html) */
#areas-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 600px;
  margin: 40px auto;
  padding: 0 10px;
}

.area-square {
  background: #e5e7eb;
  border-radius: 10px;
  text-align: center;
  padding: 30px 10px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.area-square:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0,0,0,0.15);
  background: #d1d5db;
}

/* --- ESTILOS DEL FORO (Rectángulos) --- */
.seccion-foro {
  max-width: 800px;
  margin: 30px auto;
  padding: 0 20px;
}

.seccion-foro h2 {
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.vertical-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.area-rectangle {
  display: block;
  background: #f3f4f6;
  border-left: 8px solid #333; /* Default */
  padding: 15px 20px;
  text-decoration: none;
  color: #1f2937;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.area-rectangle:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.area-rectangle h3 {
  margin: 0 0 5px;
  color: #111827;
}

.area-rectangle p {
  margin: 0;
  color: #4b5563;
  font-size: 0.95rem;
}

/* Colores específicos del foro */
.blue-rects .area-rectangle { border-left-color: #3b82f6; } /* Azul */
/* Si necesitas más colores (rojo, amarillo) añádelos aquí siguiendo el patrón */

/* Tabla de posts */
.tabla-posts {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  border-collapse: collapse;
  padding: 0 20px;
}

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

.tabla-posts th {
  background-color: #f9fafb;
  font-weight: bold;
}

/* --- DASHBOARD: TARJETAS --- */
.projects-container {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.project-card {
  background: #1f2937;
  color: #f9fafb;
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.project-card:hover {
  background: #374151;
}

.project-card h3 {
  margin: 0 0 4px;
}

.project-card p {
  margin: 0 0 6px;
  font-size: 0.9rem;
}

/* Etiquetas de estado */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  color: white;
  font-weight: bold;
}

.tag-progress { background: #f59e0b; } /* Naranja */
.tag-done     { background: #10b981; } /* Verde */
.tag-stop     { background: #ef4444; } /* Rojo */

/* Responsive */
@media (max-width: 600px) {
  #areas-container {
    grid-template-columns: 1fr; /* Una columna en móvil */
  }
  .area-square {
    padding: 20px 10px;
  }
}