/* --- MACRO LAYOUT (Grid) --- */
.app-layout {
  display: grid; /* Activamos CSS Grid para la estructura principal */
  
  /* Creamos 2 columnas: 
     La 1ª fija de 260px (para el menú). 
     La 2ª ocupa 1fr (1 fracción, es decir, TODO el espacio restante). */
  grid-template-columns: 220px 1fr; 
  height: 100vh; /* Que el contenedor mida toda la pantalla */
}

/* --- SIDEBAR LAYOUT (Flexbox. Menu izquierda) --- */
.sidebar {
  background-color: #0F172A; /* Slate 900: Oscuro profundo, elegante y moderno */
  border-right: 1px solid rgba(255, 255, 255, 0.05); /* Borde levísimo para dar volumen */
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); /* Sombra un poco más oscura para que resalte */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  z-index: 10;
}

/* Separador superior para la zona de la cuenta de usuario */
.sidebar-bottom {
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 16px;
}

/* --- MAIN CONTENT & TOP BAR LAYOUT --- */
.main-content {
  display: flex;
  flex-direction: column; /* Arriba la barra superior, abajo el tablero */
  height: 100vh; /* Obligamos a que mida exactamente la pantalla */
  min-width: 0; /* Evita que las columnas empujen la web hacia el infinito */
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 32px; 
  /* Hacemos la barra 100% transparente para que el degradado del fondo suba hasta arriba */
  background: transparent !important; 
  border-bottom: none !important; 
}

/* NUEVO: Contenedor flex para los botones de arriba a la derecha */
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- BOARD CANVAS LAYOUT --- */
.board-canvas {
  flex: 1; 
  display: flex; 
  gap: 24px; 
  /* CAMBIO: Cambiamos el 0 por 24px para despegarlo del techo */
  padding: 24px 32px 32px 32px; 
  
  overflow-x: auto; 
  align-items: flex-start; 
}

/* --- COLUMN LAYOUT --- */
.column {
  background-color: var(--bg-column);
  
  /* Fijamos el ancho de la columna a 320px estrictamente */
  min-width: 272px;
  max-width: 272px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  max-height: 100%; /* La columna no puede crecer más que su contenedor padre */
}

/* Contenedor de las tarjetas dentro de la columna */
.card-list {
  /* Añadimos más padding inferior para que la última tarjeta respire al hacer scroll */
  padding: 4px 8px 16px 8px; 
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Juntamos más las tarjetas */
  overflow-y: auto; 
  overflow-x: hidden;
  flex: 1; 
  min-height: 0;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 24px; /* Separación entre el título y el buscador */
}

/* --- RESPONSIVE DESIGN (Móvil / Tablet) --- */
@media (max-width: 1024px) {
  /* Oculta el menú por defecto en pantallas pequeñas */
  .sidebar {
    display: none; 
  }
  
  /* Cuando JS le añada esta clase, se mostrará flotando sobre la app */
  .sidebar.show-mobile {
    display: flex;
    position: fixed; 
    top: 0;
    left: 0;
    height: 100vh; 
    z-index: 9999; 
    box-shadow: 20px 0 40px rgba(0,0,0,0.15); 
  }
  
  /* El contenido principal ocupa el 100% de la pantalla */
  .app-layout {
    grid-template-columns: 1fr; 
  }
  
  /* Muestra el botón de menú hamburguesa */
  .btn-mobile-menu {
    display: block;
  }

  .top-bar {
    flex-direction: column; /* Apila la parte izquierda y derecha en vertical */
    align-items: flex-start; /* Alinea todo a la izquierda */
    gap: 16px; /* Separación entre bloques */
    padding: 16px; /* Ajusta el aire alrededor */
    height: auto; /* Permite que la cabecera crezca hacia abajo */
  }

  .top-bar-left, .top-bar-actions {
    width: 100%;
    flex-wrap: wrap; /* ¡La magia! Permite que los botones salten de línea si no caben */
    gap: 12px;
  }
}

/* ==========================================
   DISEÑO DEL DASHBOARD (MIS TABLEROS)
   ========================================== */
.dashboard-canvas {
  padding: 2rem;
  width: 100%;
  /* Por defecto lo mostramos. Luego JS lo ocultará si entramos a un tablero */
  display: block; 
}

.dashboard-header {
  margin-bottom: 2rem;
}

.dashboard-header h2 {
  color: var(--text-dark); /* Volvemos al color oscuro */
  text-shadow: none; /* Quitamos la sombra */
}

.dashboard-header p {
  color: var(--text-muted); /* Gris elegante */
}

/* Cuadrícula responsiva: se adapta al móvil y al PC sola */
.boards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Aspecto de las tarjetas de tablero */
.board-card {
  border-radius: 10px;
  padding: 1.5rem;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: center;
  border: none; /* QUITAMOS EL BORDE */
  color: white; /* TEXTO DE LOS TABLEROS EN BLANCO */
  text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* SOMBRA PARA LEER SOBRE COLORES CLAROS */
}

.board-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Devolvemos el botón de crear tablero a su estado original para fondos claros */
.create-board-btn {
  background-color: transparent !important;
  border: 2px dashed var(--border-color) !important;
  color: var(--text-muted) !important;
  text-shadow: none;
}

.create-board-btn:hover {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
  background-color: var(--accent-light) !important;
}

.create-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}


/* ==========================================
   DISEÑO DEL CALENDARIO
   ========================================== */
.calendar-canvas {
  display: flex;
  height: calc(100vh - 80px); /* Descuenta la altura del menú superior */
  gap: 24px;
  padding: 24px 32px 32px 32px;
}

.calendar-sidebar {
  width: 38%; /* Ocupa casi el 40% de la pantalla */
  max-width: 450px; /* Pero le ponemos un tope para que no sea gigante en monitores ultrawide */
  min-width: 320px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  max-height: 100%; /* ESTO ES VITAL: Obliga a que salga el scroll si hay muchas tareas */
}

.calendar-main {
  flex: 1; /* Ocupa todo el ancho restante */
  display: flex;
  flex-direction: column;
}