Dashboardify | TuCodigoCotidiano

Desarrollo web

Dashboardify es una interfaz web que te permite visualizar de forma clara y centralizada el estado de tus proyectos, tareas y eventos. Gracias a sus tarjetas de estadísticas y secciones de proyectos …

Publicado: 18/04/2025 Por: Juan Felipe Orozco Cortés Duración: 5 horas

Ir al contenido Ir a comentarios Volver a tutoriales

☰ Contenido del tutorial ⌄

¿Por qué es importante?
Estructura de carpetas
inicio.html
inicio.css
mis_proyectos.html
mis_proyectos.css
tablero_kanban.html
tablero_kanban.css
calendario.html
calendario.css
reportes.html
reportes.css
login.html
login.css
registrarse.html
registrarse.css

¿Por qué es importante?

Visibilidad: Muestra de un vistazo métricas clave como proyectos activos, tareas pendientes y miembros del equipo.
Organización: Agrupa proyectos y tareas en secciones claras, facilitando el seguimiento de entregas y plazos.
Productividad: Al tener información centralizada, mejora la toma de decisiones y priorización de actividades.

Estructura de carpetas

Archivos raíz: calendario.html, inicio.html, login.html, mis_proyectos.html, perfil.html, registrarse.html, reportes.html, tablero_kanban.html
css/: base.css, layout.css, state.css, theme.css
css/modules/: button.css, card.css, header.css, navigation.css
css/pages/: calendario.css, inicio.css, login.css, mis_proyectos.css, perfil.css, registrarse.css, reportes.css, tablero_kanban.css
img/: placeholder-avatar.png
js/: script.js

|   calendario.html
|   inicio.html
|   login.html
|   mis_proyectos.html
|   perfil.html
|   registrarse.html
|   reportes.html
|   tablero_kanban.html
|
+---css
|   |   base.css
|   |   layout.css
|   |   state.css
|   |   theme.css
|   |
|   +---modules
|   |       button.css
|   |       card.css
|   |       header.css
|   |       navigation.css
|   |
|   \---pages
|           calendario.css
|           inicio.css
|           login.css
|           mis_proyectos.css
|           perfil.css
|           registrarse.css
|           reportes.css
|           tablero_kanban.css
|
+---img
|       placeholder-avatar.png
|
\---js
        userMenu.js

inicio.html

En este archivo se define la vista principal del dashboard: el encabezado muestra el título “Inicio” con el menú de usuario, a continuación se despliegan tarjetas de progreso para proyectos activos, tareas pendientes y miembros del equipo, luego se listan los proyectos recientes y las próximas tareas, y finalmente se presenta la tarjeta del calendario de eventos.

Dashboard de Proyectos HTML: Estructura y Estilos | Project Dashboard HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard de Proyectos</title>
  <!-- Estilos base y tema -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/theme.css">
  <!-- Layout general -->
  <link rel="stylesheet" href="css/layout.css">
  <!-- Módulos reutilizables -->
  <link rel="stylesheet" href="css/modules/header.css">
  <link rel="stylesheet" href="css/modules/navigation.css">
  <link rel="stylesheet" href="css/modules/card.css">
  <link rel="stylesheet" href="css/modules/button.css">
  <!-- Clases de estado -->
  <link rel="stylesheet" href="css/state.css">
  <!-- Estilos específicos para la página Inicio -->
  <link rel="stylesheet" href="css/pages/inicio.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <div class="dashboard-container">
    <button class="menu-toggle">
      <i class="fas fa-bars"></i>
    </button>
    <aside class="sidebar">
      <div class="logo">
        <i class="fas fa-project-diagram fa-2x"></i>
      </div>
      <nav class="menu">
        <ul>
          <li class="active"><a href="#"><i class="fas fa-home"></i> <span>Inicio</span></a></li>
          <li><a href="#"><i class="fas fa-briefcase"></i> <span>Mis Proyectos</span></a></li>
          <li><a href="#"><i class="fas fa-columns"></i> <span>Tablero Kanban</span></a></li>
          <li><a href="#"><i class="fas fa-calendar-alt"></i> <span>Calendario</span></a></li>
          <li><a href="#"><i class="fas fa-chart-bar"></i> <span>Reportes</span></a></li>
        </ul>
      </nav>
    </aside>

    <main class="main-content">
      <header class="main-header">
        <h1>Inicio</h1>
      
        <div class="user-menu">
          <button class="user-toggle">
            <i class="fas fa-user-circle fa-lg"></i>
          </button>
          <!-- El dropdown debe contener el UL -->
          <div class="profile-dropdown">
            <ul class="profile-menu">
              <li>
                <a href="/mi-perfil.html">
                  <i class="fas fa-user"></i>
                  Mi perfil
                </a>
              </li>
              <li>
                <a href="/logout">
                  <i class="fas fa-sign-out-alt"></i>
                  Cerrar sesión
                </a>
              </li>
            </ul>
          </div>
        </div>
      </header>
      
      <section class="stats-cards">
        <!-- Tarjeta de Proyectos Activos -->
        <div class="card stat-card">
          <h4>Proyectos Activos</h4>
          <p class="stat-number">5</p>
          <div class="progress-bar-container">
            <div class="progress-bar" style="width: 60%;"></div>
          </div>
          <span class="percentage">60%</span>
        </div>
        <!-- Tarjeta de Tareas Pendientes -->
        <div class="card stat-card">
          <h4>Tareas Pendientes</h4>
          <p class="stat-number">18</p>
          <div class="progress-bar-container">
            <div class="progress-bar" style="width: 30%;"></div>
          </div>
          <span class="percentage">30%</span>
        </div>
        <!-- Tarjeta de Miembros del Equipo -->
        <div class="card stat-card">
          <h4>Miembros del Equipo</h4>
          <p class="stat-number">8</p>
          <div class="progress-bar-container">
            <div class="progress-bar" style="width: 80%;"></div>
          </div>
          <span class="percentage">80%</span>
        </div>
      </section>

      <section class="projects-tasks">
        <div class="card recent-projects">
          <h3>Proyectos Recientes</h3>
          <ul>
            <li>
              <div class="project-info">
                <h4>Lanzamiento Nueva Web</h4>
                <p>15/07/2024</p>
              </div>
              <span class="status-badge in-progress">En Progreso</span>
            </li>
            <li>
              <div class="project-info">
                <h4>Migración de Servidores</h4>
                <p>30/06/2024</p>
              </div>
              <span class="status-badge completed">Completado</span>
            </li>
          </ul>
        </div>
        <div class="card upcoming-tasks">
          <h3>Próximas Tareas</h3>
          <ul>
            <li><i class="fas fa-circle fa-xs high-priority-dot"></i> Revisar diseño de interfaz <span class="priority-tag">Prioridad Alta</span></li>
            <li><i class="fas fa-circle fa-xs"></i> Actualizar documentación técnica</li>
            <li><i class="fas fa-circle fa-xs"></i> Reunión con equipo de desarrollo</li>
          </ul>
        </div>
      </section>

      <section class="upcoming-events">
        <div class="card event-card">
          <h3>Calendario</h3>
          <p><i class="fas fa-calendar-check"></i> Calendario en desarrollo...</p>
        </div>
      </section>
    </main>
  </div>

  <script src="js/script.js"></script>
</body>
</html>

Explicación del código: Dashboard de Proyectos HTML: Estructura y Estilos | Project Dashboard HTML

<!DOCTYPE html>
Señala al navegador que este archivo es un documento HTML5, activando el modo de renderizado estándar.

<html lang="es">
Abre el elemento raíz de la página y establece el atributo lang="es" para indicar que el contenido está en español.

<head>
Inicio de la sección de metadatos: aquí se definen información que no se muestra directamente (codificación, estilos, título…).

<meta charset="UTF-8">
Define la codificación de caracteres en UTF‑8, asegurando que se muestren correctamente acentos y símbolos.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ajusta la escala y el ancho de la página al dispositivo, fundamental para que sea responsiva en móviles.

<title>Dashboard de Proyectos</title>
Texto que aparece en la pestaña del navegador y en los marcadores.

<!-- Estilos base y tema -->
Comentario que organiza el bloque donde enlazas hojas de estilo base y de tema.

<link rel="stylesheet" href="css/base.css">
Conecta estilos globales básicos (reset, tipografías, variables).

<link rel="stylesheet" href="css/theme.css">
Aplica el tema de colores y estilos generales de la interfaz.

<!-- Layout general -->
Comentario previo al enlace de estilos de estructura (grillas, contenedores).

<link rel="stylesheet" href="css/layout.css">
Define la disposición principal de la página (columnas, márgenes, contenedores).

<!-- Módulos reutilizables -->
Comentario para agrupar los componentes comunes.

<link rel="stylesheet" href="css/modules/header.css">
Estilos dedicados al encabezado (header) de la aplicación.

<link rel="stylesheet" href="css/modules/navigation.css">
Estilos para el menú lateral o de navegación.

<link rel="stylesheet" href="css/modules/card.css">
Diseño y sombras de las tarjetas informativas.

<link rel="stylesheet" href="css/modules/button.css">
Definición de botones: tamaños, estados :hover, bordes.

<!-- Clases de estado -->
Comentario que introduce estilos para estados dinámicos.

<link rel="stylesheet" href="css/state.css">
Clases como .active, .disabled o :focus para indicar diferentes estados de interacción.

<!-- Estilos específicos para la página Inicio -->
Comentario que delimita estilos únicos de esta vista.

<link rel="stylesheet" href="css/pages/inicio.css">
Reglas CSS exclusivas para la página de inicio (colores, márgenes, disposición de secciones).

<!-- Font Awesome -->
Comentario para la biblioteca de iconos.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Importa Font Awesome desde CDN para usar iconos vectoriales (<i class="fas fa-bars">, etc.).

</head>
Cierra la sección de metadatos.

<body>
Comienza el contenido visible de la página.

<div class="dashboard-container">
Contenedor principal que agrupa toda la interfaz “dashboard”.

<button class="menu-toggle">
Botón que, mediante JavaScript, alternará la visibilidad del menú lateral.

<i class="fas fa-bars"></i>
Icono de “hamburguesa” (tres líneas) proveniente de Font Awesome.

</button>
Fin del botón de alternar menú.

<aside class="sidebar">
Barra lateral (<aside>): contiene logo y navegación principal.

<div class="logo">
Espacio reservado para el logotipo o icono de la aplicación.

<i class="fas fa-project-diagram fa-2x"></i>
Icono de diagrama de proyectos ampliado a 2× su tamaño base.

</div>
Cierre del contenedor de logo.

<nav class="menu">
Inicio del elemento de navegación semántica.

<ul>
Lista desordenada de enlaces del menú.

<li class="active"><a href="#"><i class="fas fa-home"></i> <span>Inicio</span></a></li>
Ítem activo; icono de “home” y etiqueta “Inicio”.

<li><a href="#"><i class="fas fa-briefcase"></i> <span>Mis Proyectos</span></a></li>
Enlace a la sección “Mis Proyectos” con icono de maletín.

<li><a href="#"><i class="fas fa-columns"></i> <span>Tablero Kanban</span></a></li>
Enlace a “Tablero Kanban” con icono de columnas.

<li><a href="#"><i class="fas fa-calendar-alt"></i> <span>Calendario</span></a></li>
Enlace a “Calendario” con icono de calendario.

<li><a href="#"><i class="fas fa-chart-bar"></i> <span>Reportes</span></a></li>
Enlace a “Reportes” con icono de gráfico de barras.

</ul>
Fin de la lista de navegación.

</nav>
Cierre del bloque <nav>.

</aside>
Fin de la barra lateral.

<main class="main-content">
Área principal de contenido.

<header class="main-header">
Encabezado dentro de <main>, incluye título y menú de usuario.

<h1>Inicio</h1>
Título principal de la página.

<div class="user-menu">
Contenedor del menú de perfil de usuario.

<button class="user-toggle">
Botón para desplegar opciones de usuario (perfil, cerrar sesión).

<i class="fas fa-user-circle fa-lg"></i>
Icono de perfil circular, tamaño grande.

</button>
Cierre del botón de usuario.

<div class="profile-dropdown">
Contenedor que muestra/oculta el listado de acciones de perfil.

<ul class="profile-menu">
Lista de enlaces dentro del dropdown de usuario.

<li><a href="/mi-perfil.html"><i class="fas fa-user"></i> Mi perfil</a></li>
Item que lleva a la página “Mi perfil”, con icono de usuario.

<li><a href="/logout"><i class="fas fa-sign-out-alt"></i> Cerrar sesión</a></li>
Item para cerrar sesión, con icono de salida.

</ul>
Fin de la lista de perfil.

</div>
Cierre del dropdown de perfil.

</div>
Fin del contenedor user-menu.

</header>
Cierre del encabezado de la página.

<section class="stats-cards">
Sección que agrupa tarjetas con estadísticas resumidas.

<div class="card stat-card">
Primera tarjeta: “Proyectos Activos”.

<h4>Proyectos Activos</h4>
Título de la tarjeta.

<p class="stat-number">5</p>
Número de proyectos activos.

<div class="progress-bar-container">
Envuelve la barra que indica el progreso.

<div class="progress-bar" style="width: 60%;"></div>
Barra rellena al 60%.

</div>
Fin del contenedor de la barra.

<span class="percentage">60%</span>
Texto que muestra el porcentaje exacto.

</div>
Cierre de la tarjeta de proyectos.

<div class="card stat-card">…</div>
Segunda tarjeta para “Tareas Pendientes” (18 unidades, 30 %).

<div class="card stat-card">…</div>
Tercera tarjeta para “Miembros del Equipo” (8 miembros, 80 %).

</section>
Fin de sección de estadísticas.

<section class="projects-tasks">
Agrupa lista de proyectos recientes y próximas tareas.

<div class="card recent-projects">
Tarjeta de “Proyectos Recientes”.

<ul>
Lista de proyectos:

Primer <li>:

Nombre “Lanzamiento Nueva Web”

Fecha “15/07/2024”

Etiqueta “En Progreso”

Segundo <li>:

Nombre “Migración de Servidores”

Fecha “30/06/2024”

Etiqueta “Completado”

</ul>, </div>
Cierre de lista y tarjeta de proyectos.

<div class="card upcoming-tasks">
Tarjeta de “Próximas Tareas”.

<ul>
Lista con tres <li>, cada uno incluye un punto, descripción y, si aplica, etiqueta de prioridad.

</ul>, </div>, </section>
Cierre de tareas y de la sección proyectos‑tareas.

<section class="upcoming-events">
Sección de eventos futuros.

<div class="card event-card">
Tarjeta con título “Calendario” y mensaje “Calendario en desarrollo…”.

</div>, </section>
Cierra la sección de eventos.

</main>
Fin del contenido principal.

</div>
Cierre del contenedor .dashboard-container.

<script src="js/script.js"></script>
Importa el archivo JavaScript que controla la interacción (menú, dropdown, etc.).

</body>
Finaliza el cuerpo del documento.

</html>
Cierre del elemento raíz y fin del documento HTML.

inicio.css

Este archivo define los estilos exclusivos de la página de inicio: ajusta márgenes y espacios entre secciones, configura un diseño responsivo para la sección de eventos y mejora la legibilidad y el orden visual de todo el dashboard.

CSS de Inicio: Márgenes y Diseño en Rejilla

.stats-cards {
  margin-bottom: 30px;
}

.projects-tasks {
  margin-bottom: 30px;
}

.upcoming-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

section {
  margin-bottom: 40px;
}

Explicación del código: CSS de Inicio: Márgenes y Diseño en Rejilla

.stats-cards {
Inicia la regla de estilo para el bloque que agrupa las tarjetas de estadísticas.

margin-bottom: 30px;
Aplica un espacio de 30 px debajo de ese bloque, separándolo del contenido que sigue.

}
Cierra la definición de estilos de .stats-cards.

.projects-tasks {
Comienza la regla de estilo para la sección que mezcla proyectos recientes y próximas tareas.

margin-bottom: 30px;
Establece un margen inferior de 30 px, creando separación vertical con la siguiente sección.

}
Finaliza la regla de .projects-tasks.

.upcoming-events {
Abre la regla de estilo para la sección de eventos futuros.

display: grid;
Convierte ese contenedor en una cuadrícula CSS, facilitando la distribución de sus elementos.

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Define columnas que se adaptan automáticamente, con un ancho mínimo de 250 px y un reparto equitativo del espacio disponible.

gap: 20px;
Añade 20 px de separación tanto entre filas como entre columnas de la cuadrícula.

}
Cierra la regla de .upcoming-events.

section {
Inicia una regla global que afecta a todos los elementos <section> de la página.

margin-bottom: 40px;
Otorga un margen inferior de 40 px a cada sección, garantizando una separación uniforme.

}
Cierra la regla global para <section>.

mis_proyectos.html

En esta sección se agrupa todo el contenido principal: primero el encabezado con el título “Mis proyectos” y el menú de usuario, luego el botón para crear un nuevo proyecto y, a continuación, la cuadrícula de tarjetas que muestra el nombre, estado, descripción, fecha límite, miembros del equipo, progreso y acciones disponibles para cada proyecto.

Mis Proyectos – Dashboard HTML: Grid de Proyectos y Tarjetas

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mis Proyectos - Dashboard</title>
  <!-- Estilos base y tema -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/theme.css">
  <!-- Layout general -->
  <link rel="stylesheet" href="css/layout.css">
  <!-- Módulos reutilizables -->
  <link rel="stylesheet" href="css/modules/header.css">
  <link rel="stylesheet" href="css/modules/navigation.css">
  <link rel="stylesheet" href="css/modules/card.css">
  <link rel="stylesheet" href="css/modules/button.css">
  <!-- Clases de estado -->
  <link rel="stylesheet" href="css/state.css">
  <!-- Estilos específicos para mis_proyectos.html -->
  <link rel="stylesheet" href="css/pages/mis_proyectos.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <div class="dashboard-container">
    <button class="menu-toggle">
      <i class="fas fa-bars"></i>
    </button>
    <aside class="sidebar">
      <div class="logo">
        <i class="fas fa-project-diagram fa-2x"></i>
      </div>
      <nav class="menu">
        <ul>
          <li><a href="index.html"><i class="fas fa-home"></i> <span>Inicio</span></a></li>
          <li class="active"><a href="mis_proyectos.html"><i class="fas fa-briefcase"></i> <span>Mis Proyectos</span></a></li>
          <li><a href="#"><i class="fas fa-columns"></i> <span>Tablero Kanban</span></a></li>
          <li><a href="#"><i class="fas fa-calendar-alt"></i> <span>Calendario</span></a></li>
          <li><a href="#"><i class="fas fa-chart-bar"></i> <span>Reportes</span></a></li>
        </ul>
      </nav>
    </aside>

    <main class="main-content">
      <header class="main-header">
        <h1>Mis proyectos</h1>
      
        <div class="user-menu">
          <button class="user-toggle">
            <i class="fas fa-user-circle fa-lg"></i>
          </button>
          <!-- El dropdown debe contener el UL -->
          <div class="profile-dropdown">
            <ul class="profile-menu">
              <li>
                <a href="/mi-perfil.html">
                  <i class="fas fa-user"></i>
                  Mi perfil
                </a>
              </li>
              <li>
                <a href="/logout">
                  <i class="fas fa-sign-out-alt"></i>
                  Cerrar sesión
                </a>
              </li>
            </ul>
          </div>
        </div>
      </header>

      <div class="create-project-button-container">
        <button class="btn btn-primary">
          <i class="fas fa-plus"></i> Crear Nuevo Proyecto
        </button>
      </div>

      <section class="project-grid">
        <!-- Tarjeta 1 -->
        <div class="card project-card">
          <div class="project-card-header">
            <h3>Lanzamiento Nueva Web</h3>
            <span class="status-badge in-progress">En Progreso</span>
          </div>
          <p class="project-description">
            Rediseño completo y lanzamiento del nuevo sitio web corporativo.
          </p>
          <div class="project-details">
            <p class="due-date">
              <i class="far fa-calendar-alt"></i> Fecha Límite: 15/07/2024
            </p>
            <div class="team-members">
              <span class="avatar-placeholder"></span>
              <span class="avatar-placeholder"></span>
              <span class="avatar-placeholder"></span>
            </div>
          </div>
          <div class="progress-bar-container">
            <div class="progress-bar" style="width: 75%;"></div>
          </div>
          <span class="percentage">75%</span>
          <div class="project-actions">
            <button class="btn btn-secondary">
              <i class="far fa-eye"></i> Ver Detalles
            </button>
          </div>
        </div>

        <!-- Tarjeta 2 -->
        <div class="card project-card">
          <div class="project-card-header">
            <h3>Migración de Servidores</h3>
            <span class="status-badge completed">Completado</span>
          </div>
          <p class="project-description">
            Mover toda la infraestructura de servidores a un nuevo proveedor cloud.
          </p>
          <div class="project-details">
            <p class="due-date">
              <i class="far fa-calendar-alt"></i> Completado: 30/06/2024
            </p>
            <div class="team-members">
              <span class="avatar-placeholder"></span>
              <span class="avatar-placeholder"></span>
            </div>
          </div>
          <div class="progress-bar-container">
            <div class="progress-bar" style="width: 100%;"></div>
          </div>
          <span class="percentage">100%</span>
          <div class="project-actions">
            <button class="btn btn-secondary">
              <i class="far fa-eye"></i> Ver Detalles
            </button>
          </div>
        </div>

        <!-- Tarjeta 3 -->
        <div class="card project-card">
          <div class="project-card-header">
            <h3>Desarrollo App Móvil</h3>
            <span class="status-badge active">Activo</span>
          </div>
          <p class="project-description">
            Creación de la aplicación móvil nativa para iOS y Android.
          </p>
          <div class="project-details">
            <p class="due-date">
              <i class="far fa-calendar-alt"></i> Fecha Límite: 01/10/2024
            </p>
            <div class="team-members">
              <span class="avatar-placeholder"></span>
              <span class="avatar-placeholder"></span>
              <span class="avatar-placeholder"></span>
              <span class="avatar-placeholder"></span>
            </div>
          </div>
          <div class="progress-bar-container">
            <div class="progress-bar" style="width: 40%;"></div>
          </div>
          <span class="percentage">40%</span>
          <div class="project-actions">
            <button class="btn btn-secondary">
              <i class="far fa-eye"></i> Ver Detalles
            </button>
          </div>
        </div>

        <!-- Tarjeta 4 -->
        <div class="card project-card">
          <div class="project-card-header">
            <h3>Investigación IA</h3>
            <span class="status-badge paused">Pausado</span>
          </div>
          <p class="project-description">
            Investigación preliminar sobre la aplicación de IA en análisis de datos.
          </p>
          <div class="project-details">
            <p class="due-date">
              <i class="far fa-calendar-alt"></i> Fecha Límite: N/A
            </p>
            <div class="team-members">
              <span class="avatar-placeholder"></span>
            </div>
          </div>
          <div class="progress-bar-container">
            <div class="progress-bar" style="width: 15%;"></div>
          </div>
          <span class="percentage">15%</span>
          <div class="project-actions">
            <button class="btn btn-secondary">
              <i class="far fa-eye"></i> Ver Detalles
            </button>
          </div>
        </div>
      </section>
    </main>
  </div>

  <script src="js/script.js"></script>
</body>
</html>

Explicación del código: Mis Proyectos – Dashboard HTML: Grid de Proyectos y Tarjetas

<!DOCTYPE html>
Señala al navegador que este archivo es un documento HTML5, activando el modo de renderizado estándar.

<html lang="es">
Abre el elemento raíz y especifica que el contenido está en español.

<head>
Inicia la sección de metadatos, donde se incluyen codificación, enlaces a hojas de estilo y el título.

<meta charset="UTF-8">
Define la codificación de caracteres en UTF‑8, asegurando la correcta visualización de acentos y símbolos.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ajusta el zoom y ancho de la página al tamaño del dispositivo, esencial para diseño responsivo.

<title>Mis Proyectos - Dashboard</title>
Texto que aparecerá en la pestaña del navegador y como nombre de la página en marcadores.

<!-- Estilos base y tema -->
Comentario que agrupa los enlaces a las hojas de estilo base y de tema.

<link rel="stylesheet" href="css/base.css">
Conecta la hoja de estilos globales básicas (reset, tipografías, variables CSS).

<link rel="stylesheet" href="css/theme.css">
Importa los estilos que definen paleta de colores y tipografía principal.

<!-- Layout general -->
Comentario previo al enlace de estilos de diseño estructural.

<link rel="stylesheet" href="css/layout.css">
Enlaza las reglas de grid, márgenes y posicionamiento de contenedores.

<!-- Módulos reutilizables -->
Comentario que agrupa componentes CSS comunes.

<link rel="stylesheet" href="css/modules/header.css">
Estilos específicos para el encabezado de la aplicación.

<link rel="stylesheet" href="css/modules/navigation.css">
Define el aspecto y comportamiento del menú lateral.

<link rel="stylesheet" href="css/modules/card.css">
Reglas de sombra, bordes y espaciado de las tarjetas de contenido.

<link rel="stylesheet" href="css/modules/button.css">
Diseña los distintos tipos de botones (.btn, .btn-primary, etc.).

<!-- Clases de estado -->
Comentario para estilos según el estado de los elementos (activo, deshabilitado…).

<link rel="stylesheet" href="css/state.css">
Importa clases como .active, .disabled o pseudoclases de interacción.

<!-- Estilos específicos para mis_proyectos.html -->
Comentario que introduce la hoja de estilos propia de esta página.

<link rel="stylesheet" href="css/pages/mis_proyectos.css">
Contiene reglas exclusivas para la vista “Mis Proyectos”.

<!-- Font Awesome -->
Agrupa la importación de la biblioteca de iconos.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Trae los iconos vectoriales de Font Awesome desde un CDN.

</head>
Finaliza la sección de metadatos.

<body>
Comienza el contenido visible de la página.

<div class="dashboard-container">
Contenedor principal que engloba toda la interfaz tipo “dashboard”.

<button class="menu-toggle">
Botón que, con JavaScript, mostrará u ocultará el menú lateral.

<i class="fas fa-bars"></i>
Icono de “hamburguesa” (tres líneas) de Font Awesome.

</button>
Cierra el botón de alternar menú.

<aside class="sidebar">
Inicia la barra lateral, donde va el logo y la navegación principal.

<div class="logo">
Área destinada al logotipo o icono representativo.

<i class="fas fa-project-diagram fa-2x"></i>
Icono de diagrama de proyectos, con tamaño 2×.

</div>
Termina el bloque del logo.

<nav class="menu">
Elemento semántico de navegación.

<ul>
Lista desordenada que contendrá los enlaces del menú.

35–39. Cinco elementos <li> independientes:

Primero: enlace a “Inicio” con fa-home.

Segundo (clase active): enlace a “Mis Proyectos” con fa-briefcase.

Tercero: “Tablero Kanban” con fa-columns.

Cuarto: “Calendario” con fa-calendar-alt.

Quinto: “Reportes” con fa-chart-bar.

</ul>
Cierra la lista de navegación.

</nav>
Finaliza el bloque <nav>.

</aside>
Cierra la barra lateral.

<main class="main-content">
Contenedor principal de contenido específico de cada página.

<header class="main-header">
Cabecera interna que incluye título y opciones de usuario.

<h1>Mis proyectos</h1>
Título visible de esta sección.

<div class="user-menu">
Contenedor del menú de perfil del usuario.

<button class="user-toggle">
Botón para desplegar el menú de usuario.

<i class="fas fa-user-circle fa-lg"></i>
Icono circular de usuario, con tamaño grande.

</button>
Cierra el botón de perfil.

<!-- El dropdown debe contener el UL -->
Comentario que recuerda la estructura interna.

<div class="profile-dropdown">
Contenedor que aparece/oculta las opciones de perfil.

<ul class="profile-menu">
Lista de acciones disponibles para el usuario.

53–60. Dos elementos <li> con enlaces:

“Mi perfil” (/mi-perfil.html) con icono fa-user.

“Cerrar sesión” (/logout) con icono fa-sign-out-alt.

</ul>
Cierra la lista de perfil.

</div>
Finaliza el dropdown de perfil.

</div>
Cierra el contenedor user-menu.

</header>
Termina la cabecera interna.

<div class="create-project-button-container">
Área donde aparece el botón para crear un proyecto nuevo.

<button class="btn btn-primary">
Botón principal con estilo destacado.

<i class="fas fa-plus"></i> Crear Nuevo Proyecto
Icono de “más” seguido del texto.

</button>
Cierra el botón de creación.

</div>
Finaliza el contenedor del botón.

<section class="project-grid">
Sección que agrupa todas las tarjetas de proyectos en cuadrícula.

<!-- Tarjeta 1 -->
Comentario indicativo de la primera tarjeta.

<div class="card project-card">
Contenedor de la tarjeta de proyecto.

<div class="project-card-header">
Cabecera interna de la tarjeta.

<h3>Lanzamiento Nueva Web</h3>
Nombre del proyecto.

<span class="status-badge in-progress">En Progreso</span>
Etiqueta que indica estado “En Progreso”.

</div>
Cierre de la cabecera de tarjeta.

<p class="project-description">Rediseño completo y lanzamiento del nuevo sitio web corporativo.</p>
Descripción breve del proyecto.

<div class="project-details">
Bloque con información adicional (fecha, equipo).

<p class="due-date"><i class="far fa-calendar-alt"></i> Fecha Límite: 15/07/2024</p>
Fecha límite precedida de icono de calendario.

<div class="team-members">
Área con avatares de miembros asignados.

81–83. Tres <span class="avatar-placeholder"></span>
Marcadores de posición para fotos de perfil de integrantes.

</div>
Cierra el bloque de miembros.

</div>
Finaliza los detalles del proyecto.

<div class="progress-bar-container"><div class="progress-bar" style="width: 75%;"></div></div>
Barra de progreso rellena al 75 %.

<span class="percentage">75%</span>
Porcentaje numérico junto a la barra.

<div class="project-actions"><button class="btn btn-secondary"><i class="far fa-eye"></i> Ver Detalles</button></div>
Botón secundario para ver más información del proyecto.

</div>
Cierra la tarjeta completa.

<!-- Tarjeta 2 -->
Inicio de la segunda tarjeta.

91–110. Estructura idéntica a la tarjeta anterior, con estos cambios:

Título “Migración de Servidores”

Estado “Completado” y barra al 100 %

Descripción y fecha “30/06/2024”

Dos avatares en el equipo

</div>
Fin de la segunda tarjeta.

<!-- Tarjeta 3 -->
Inicio de la tercera tarjeta.

113–132. Misma estructura, adaptada a “Desarrollo App Móvil”:

Estado “Activo” (40 %)

Fecha límite “01/10/2024”

Cuatro avatares

<!-- Tarjeta 4 -->
Inicio de la cuarta tarjeta.

134–148. Igual patrón para “Investigación IA”:

Estado “Pausado” (15 %)

Fecha “N/A”

Un solo avatar

</section>
Cierra la sección de cuadrícula de proyectos.

</main>
Finaliza el contenido principal.

</div>
Cierre del contenedor general .dashboard-container.

<script src="js/script.js"></script>
Incluye el archivo JavaScript que controla la interacción de menú y dropdowns.

</body>
Termina el contenido visible.

</html>
Cierre del elemento raíz y fin del documento.

mis_proyectos.css

Este archivo ajusta los estilos de la sección de proyectos: alinea el botón de creación a la derecha con espacio inferior, establece un grid adaptable que distribuye las tarjetas según el ancho disponible y define la estructura interna de cada tarjeta (encabezado, descripción, detalles, barra de progreso y acciones) con espacio uniforme, avatares superpuestos y distintivos de estado para asegurar un diseño limpio y responsivo.

CSS Mis Proyectos: Contenedor de Botón y Grid de Tarjetas

.create-project-button-container {
    margin-bottom: 25px;
    text-align: right; 
}
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px; 
}

.project-card {
    display: flex;
    flex-direction: column; 
    gap: 15px; 
}

.project-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    gap: 10px; 
}

.project-card h3 {
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 600;
    margin: 0; 
}

.project-description {
    font-size: 0.85rem;
    color: #a0a4a8;
    line-height: 1.5;
    flex-grow: 1; 
}

.project-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; 
}

.project-card .due-date {
    font-size: 0.8rem;
    color: #8a8f94;
    display: flex;
    align-items: center;
    gap: 5px;
}
.project-card .due-date i {
    font-size: 0.9em;
}

.team-members {
    display: flex;
}

.avatar-placeholder {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-color: #4a4f57;
    border-radius: 50%;
    border: 2px solid #252a31; 
    margin-left: -8px; 
}
.team-members .avatar-placeholder:first-child {
    margin-left: 0;
}

.project-card .progress-bar-container {
    margin-bottom: 0;
}
.project-card .percentage {
    font-size: 0.8rem;
    color: #a0a4a8;
    align-self: flex-end;
    margin-top: -18px;
    padding-right: 5px;
}

.project-actions {
    margin-top: auto; 
    padding-top: 10px;
    border-top: 1px solid #3a3f47; 
    text-align: right;
}
.status-badge.active {
    background-color: rgba(0, 123, 255, 0.2);
    color: #4dabf7;
}

.status-badge.paused {
    background-color: rgba(108, 117, 125, 0.2);
    color: #adb5bd;
}

Explicación del código: CSS Mis Proyectos: Contenedor de Botón y Grid de Tarjetas

.create-project-button-container { … }
Define el contenedor del botón de “Crear Nuevo Proyecto”, separándolo del contenido siguiente y alineando el botón a la derecha.

margin-bottom: 25px;
Aplica un espacio de 25 px debajo del contenedor para separarlo visualmente.

text-align: right;
Alinea todo el contenido interno (el botón) al borde derecho del contenedor.

.project-grid { … }
Convierte el área de tarjetas de proyecto en una cuadrícula adaptable.

display: grid;
Activa el modelo de diseño en rejilla (grid).

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
Crea tantas columnas como quepan, cada una con un ancho mínimo de 280 px y máximo de reparto equitativo.

gap: 25px;
Establece 25 px de separación entre filas y columnas de las tarjetas.

.project-card { … }
Diseña cada tarjeta como un contenedor flexible vertical.

display: flex;
Activa Flexbox en la tarjeta.

flex-direction: column;
Organiza los elementos hijos en columna (uno debajo del otro).

gap: 15px;
Deja 15 px de espacio entre cada bloque interno dentro de la tarjeta.

.project-card-header { … }
Ajusta la cabecera de la tarjeta para repartir título y estado.

display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
Coloca título y badge en una línea, los separa al máximo, los alinea arriba y deja 10 px de separación.

.project-card h3 { … }
Estiliza el título del proyecto dentro de la tarjeta.

font-size: 1.1rem; color: #ffffff; font-weight: 600; margin: 0;
Ajusta tamaño de texto, color blanco, negrita semiligera y elimina márgenes por defecto.

.project-description { … }
Formatea el párrafo descriptivo del proyecto.

font-size: 0.85rem; color: #a0a4a8; line-height: 1.5; flex-grow: 1;
Hace el texto más pequeño, gris claro, con interlineado 1.5 para legibilidad y permite que ocupe el espacio vertical restante.

.project-details { … }
Organiza fecha y avatares en línea dentro de la tarjeta.

display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
Distribuye horizontalmente fecha y miembros, los centra, añade separación y permite envoltura si falta espacio.

.project-card .due-date { … }
Estiliza la fecha límite o completado del proyecto.

font-size: 0.8rem; color: #8a8f94; display: flex; align-items: center; gap: 5px;
Texto muy pequeño y gris, con icono alineado y separación mínima.

.project-card .due-date i { font-size: 0.9em; }
Ajusta ligeramente el tamaño del icono de calendario.

.team-members { display: flex; }
Coloca los marcadores de avatar en línea, uno tras otro.

.avatar-placeholder { … }
Define la apariencia circular y superpuesta de cada avatar.

display: inline-block; width: 28px; height: 28px; background-color: #4a4f57; border-radius: 50%; border: 2px solid #252a31; margin-left: -8px;
Crea círculos de 28 px, fondo oscuro, borde más oscuro y los superpone desplazando a la izquierda.

.team-members .avatar-placeholder:first-child { margin-left: 0; }
Anula el desplazamiento en el primer avatar para que arranque sin solaparse.

.project-card .progress-bar-container { margin-bottom: 0; }
Elimina cualquier margen inferior de la barra de progreso dentro de la tarjeta.

.project-card .percentage { … }
Formatea el texto del porcentaje junto a la barra.

font-size: 0.8rem; color: #a0a4a8; align-self: flex-end; margin-top: -18px; padding-right: 5px;
Texto pequeño y gris, se alinea al final de la tarjeta y se posiciona justo encima de la barra.

.project-actions { … }
Define la sección de botones de acción al final de la tarjeta.

margin-top: auto; padding-top: 10px; border-top: 1px solid #3a3f47; text-align: right;
Empuja esta sección hacia abajo, agrega separación superior, dibuja línea divisoria y alinea el botón a la derecha.

.status-badge.active { background-color: rgba(0, 123, 255, 0.2); color: #4dabf7; }
Para proyectos “Activos”, aplica fondo azul semitransparente y texto azul claro.

.status-badge.paused { background-color: rgba(108, 117, 125, 0.2); color: #adb5bd; }
Para proyectos “Pausados”, fondo gris semitransparente y texto gris medio.

tablero_kanban.html

Este archivo presenta el Tablero Kanban: el menú lateral muestra esa sección como activa, el encabezado incluye el título “Tablero Kanban” y el menú de usuario, y la sección principal despliega cuatro columnas (Por Hacer, En Progreso, En Revisión y Completado) con tarjetas arrastrables que muestran título, descripción, prioridad y responsables de cada tarea.

Tablero Kanban – Estructura HTML y Tarjetas Interactivas

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tablero Kanban - Dashboard</title>
  <!-- Estilos base y tema -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/theme.css">
  <!-- Layout general -->
  <link rel="stylesheet" href="css/layout.css">
  <!-- Módulos reutilizables -->
  <link rel="stylesheet" href="css/modules/header.css">
  <link rel="stylesheet" href="css/modules/navigation.css">
  <link rel="stylesheet" href="css/modules/card.css">
  <link rel="stylesheet" href="css/modules/button.css">
  <!-- Clases de estado -->
  <link rel="stylesheet" href="css/state.css">
  <!-- Estilos específicos para Tablero Kanban -->
  <link rel="stylesheet" href="css/pages/tablero_kanban.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <div class="dashboard-container">
    <button class="menu-toggle">
      <i class="fas fa-bars"></i>
    </button>
    <!-- Sidebar -->
    <aside class="sidebar">
      <div class="logo">
        <i class="fas fa-project-diagram fa-2x"></i>
      </div>
      <nav class="menu">
        <ul>
          <li><a href="index.html"><i class="fas fa-home"></i> <span>Inicio</span></a></li>
          <li><a href="mis_proyectos.html"><i class="fas fa-briefcase"></i> <span>Mis Proyectos</span></a></li>
          <li class="active"><a href="tablero_kanban.html"><i class="fas fa-columns"></i> <span>Tablero Kanban</span></a></li>
          <li><a href="#"><i class="fas fa-calendar-alt"></i> <span>Calendario</span></a></li>
          <li><a href="#"><i class="fas fa-chart-bar"></i> <span>Reportes</span></a></li>
        </ul>
      </nav>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
      <header class="main-header">
        <h1>Tablero Kanban</h1>
      
        <div class="user-menu">
          <button class="user-toggle">
            <i class="fas fa-user-circle fa-lg"></i>
          </button>
          <!-- El dropdown debe contener el UL -->
          <div class="profile-dropdown">
            <ul class="profile-menu">
              <li>
                <a href="/mi-perfil.html">
                  <i class="fas fa-user"></i>
                  Mi perfil
                </a>
              </li>
              <li>
                <a href="/logout">
                  <i class="fas fa-sign-out-alt"></i>
                  Cerrar sesión
                </a>
              </li>
            </ul>
          </div>
        </div>
      </header>

      <!-- Tablero Kanban -->
      <section class="kanban-board">
        <!-- Columna: Por Hacer -->
        <div class="kanban-column">
          <div class="kanban-column-header">
            <h2>Por Hacer</h2>
            <span class="task-count">3</span>
          </div>
          <div class="kanban-cards" data-column-id="todo">
            <div class="card kanban-card" draggable="true" data-task-id="task-1">
              <h4>Revisar diseño de interfaz</h4>
              <p class="card-subtext">Feedback sobre los mockups v2</p>
              <div class="task-details">
                <span class="priority-indicator high">Alta</span>
                <div class="assignees team-members">
                  <span class="avatar-placeholder" title="Usuario 1"></span>
                </div>
              </div>
            </div>
            <div class="card kanban-card" draggable="true" data-task-id="task-2">
              <h4>Actualizar documentación técnica</h4>
              <p class="card-subtext">Incluir nuevos endpoints API</p>
              <div class="task-details">
                <span class="priority-indicator medium">Media</span>
                <div class="assignees team-members">
                  <span class="avatar-placeholder" title="Usuario 2"></span>
                  <span class="avatar-placeholder" title="Usuario 3"></span>
                </div>
              </div>
            </div>
            <div class="card kanban-card" draggable="true" data-task-id="task-3">
              <h4>Configurar entorno de pruebas</h4>
              <div class="task-details">
                <span class="priority-indicator low">Baja</span>
                <div class="assignees team-members"></div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Columna: En Progreso -->
        <div class="kanban-column">
          <div class="kanban-column-header">
            <h2>En Progreso</h2>
            <span class="task-count">2</span>
          </div>
          <div class="kanban-cards" data-column-id="inprogress">
            <div class="card kanban-card" draggable="true" data-task-id="task-4">
              <h4>Desarrollar módulo de autenticación</h4>
              <p class="card-subtext">Implementar OAuth 2.0</p>
              <div class="task-details">
                <span class="priority-indicator high">Alta</span>
                <div class="assignees team-members">
                  <span class="avatar-placeholder" title="Usuario 4"></span>
                </div>
              </div>
            </div>
            <div class="card kanban-card" draggable="true" data-task-id="task-5">
              <h4>Escribir pruebas unitarias</h4>
              <p class="card-subtext">Cobertura mínima del 80%</p>
              <div class="task-details">
                <span class="priority-indicator medium">Media</span>
                <div class="assignees team-members">
                  <span class="avatar-placeholder" title="Usuario 4"></span>
                  <span class="avatar-placeholder" title="Usuario 5"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Columna: En Revisión -->
        <div class="kanban-column">
          <div class="kanban-column-header">
            <h2>En Revisión</h2>
            <span class="task-count">1</span>
          </div>
          <div class="kanban-cards" data-column-id="review">
            <div class="card kanban-card" draggable="true" data-task-id="task-6">
              <h4>Optimizar consultas de base de datos</h4>
              <p class="card-subtext">Analizar queries lentas</p>
              <div class="task-details">
                <span class="priority-indicator medium">Media</span>
                <div class="assignees team-members">
                  <span class="avatar-placeholder" title="Usuario 6"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Columna: Completado -->
        <div class="kanban-column">
          <div class="kanban-column-header">
            <h2>Completado</h2>
            <span class="task-count">1</span>
          </div>
          <div class="kanban-cards" data-column-id="done">
            <div class="card kanban-card completed-task" draggable="true" data-task-id="task-7">
              <h4>Reunión con equipo de desarrollo</h4>
              <p class="card-subtext">Sprint Planning</p>
              <div class="task-details">
                <span class="priority-indicator low">Baja</span>
                <div class="assignees team-members">
                  <span class="avatar-placeholder" title="Usuario 1"></span>
                  <span class="avatar-placeholder" title="Usuario 2"></span>
                  <span class="avatar-placeholder" title="Usuario 3"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
    </main>
  </div>
  
  <script src="js/script.js"></script>
</body>
</html>

Explicación del código: Tablero Kanban – Estructura HTML y Tarjetas Interactivas

<!DOCTYPE html>
Define el documento como HTML5 y activa el modo de renderizado estándar.

<html lang="es">
Elemento raíz del documento; lang="es" indica que el contenido está en español.

<head>
Inicia la sección de metadatos: título, codificación y enlaces a estilos.

<meta charset="UTF-8">
Establece la codificación de caracteres en UTF‑8 para soportar acentos y símbolos.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ajusta escala y ancho de la página al dispositivo para diseño responsivo.

<title>Tablero Kanban - Dashboard</title>
Texto que aparece en la pestaña del navegador y marcadores.

<!-- Estilos base y tema -->
Comentario que agrupa los enlaces a las hojas de estilo base y tema.

<link rel="stylesheet" href="css/base.css">
Conecta estilos básicos globales (reset, tipografías, variables).

<link rel="stylesheet" href="css/theme.css">
Importa el tema de colores y estilos generales.

<!-- Layout general -->
Comentario que precede al enlace de la hoja de diseño estructural.

<link rel="stylesheet" href="css/layout.css">
Define la disposición principal: grillas, contenedores y márgenes.

<!-- Módulos reutilizables -->
Comentario para agrupar componentes CSS comunes.

<link rel="stylesheet" href="css/modules/header.css">
Estilos específicos del encabezado de la aplicación.

<link rel="stylesheet" href="css/modules/navigation.css">
Define la apariencia del menú lateral.

<link rel="stylesheet" href="css/modules/card.css">
Reglas de diseño para las tarjetas de contenido.

<link rel="stylesheet" href="css/modules/button.css">
Estilos de botones: tamaños, colores y estados.

<!-- Clases de estado -->
Comentario que agrupa estilos de estados interactivos.

<link rel="stylesheet" href="css/state.css">
Importa clases como .active y .disabled.

<!-- Estilos específicos para Tablero Kanban -->
Comentario para la hoja de estilos dedicada al Kanban.

<link rel="stylesheet" href="css/pages/tablero_kanban.css">
Reglas exclusivas para la vista del tablero Kanban.

<!-- Font Awesome -->
Comentario que indica importación de iconos.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Carga Font Awesome desde CDN para usar iconos vectoriales.

</head>
Cierra la sección de metadatos.

<body>
Inicio del contenido visible de la página.

<div class="dashboard-container">
Contenedor principal que engloba toda la interfaz de “dashboard”.

<button class="menu-toggle">
Botón que alterna la visibilidad del menú lateral.

<i class="fas fa-bars"></i>
Icono de “hamburguesa” (tres líneas) de Font Awesome.

</button>
Cierra el botón de alternar menú.

<!-- Sidebar -->
Comentario que marca el inicio de la barra lateral.

<aside class="sidebar">
Elemento semántico que contiene el menú lateral.

<div class="logo">
Área para el logotipo o icono de la aplicación.

<i class="fas fa-project-diagram fa-2x"></i>
Icono de diagrama de proyectos, con tamaño 2×.

</div>
Cierra el contenedor del logotipo.

<nav class="menu">
Inicio de la navegación principal.

<ul>
Lista desordenada que agrupa los enlaces del menú.

<li><a href="index.html"><i class="fas fa-home"></i> <span>Inicio</span></a></li>
Enlace a la página de inicio con icono de casa.

<li><a href="mis_proyectos.html"><i class="fas fa-briefcase"></i> <span>Mis Proyectos</span></a></li>
Enlace a “Mis Proyectos” con icono de maletín.

<li class="active"><a href="tablero_kanban.html"><i class="fas fa-columns"></i> <span>Tablero Kanban</span></a></li>
Enlace activo a “Tablero Kanban” con icono de columnas.

<li><a href="#"><i class="fas fa-calendar-alt"></i> <span>Calendario</span></a></li>
Enlace a “Calendario” con icono de calendario.

<li><a href="#"><i class="fas fa-chart-bar"></i> <span>Reportes</span></a></li>
Enlace a “Reportes” con icono de gráfico de barras.

</ul>
Cierra la lista del menú.

</nav>
Finaliza el bloque de navegación.

</aside>
Cierra la barra lateral.

<!-- Main Content -->
Comentario que marca el inicio del contenido principal.

<main class="main-content">
Área principal donde va el contenido de la página.

<header class="main-header">
Encabezado interno que incluye título y menú de usuario.

<h1>Tablero Kanban</h1>
Título visible de la vista.

<div class="user-menu">
Contenedor del menú de perfil de usuario.

<button class="user-toggle">
Botón que despliega las opciones de usuario.

<i class="fas fa-user-circle fa-lg"></i>
Icono circular de usuario, tamaño grande.

</button>
Cierra el botón de usuario.

<!-- El dropdown debe contener el UL -->
Comentario que recuerda la estructura del menú desplegable.

<div class="profile-dropdown">
Contenedor que aparece/oculta las opciones de perfil.

<ul class="profile-menu">
Lista de enlaces del menú de perfil.

<li>
Inicio del primer elemento del menú.

<a href="/mi-perfil.html">
Enlace a la página de perfil personal.

<i class="fas fa-user"></i>
Icono de usuario.

Mi perfil
Texto del enlace.

</a>
Cierra el enlace de “Mi perfil”.

</li>
Finaliza el primer ítem de la lista.

<li>
Inicio del segundo elemento.

<a href="/logout">
Enlace para cerrar sesión.

<i class="fas fa-sign-out-alt"></i>
Icono de salida.

Cerrar sesión
Texto del enlace.

</a>
Cierra el enlace de “Cerrar sesión”.

</li>
Finaliza el segundo ítem.

</ul>
Cierra la lista de perfil.

</div>
Finaliza el dropdown de perfil.

</div>
Cierra el contenedor user-menu.

</header>
Cierra el encabezado interno.

<!-- Tablero Kanban -->
Comentario que indica el inicio del tablero Kanban.

<section class="kanban-board">
Sección que agrupa todas las columnas del tablero.

<!-- Columna: Por Hacer -->
Comentario para la columna “Por Hacer”.

<div class="kanban-column">
Contenedor de una columna del tablero.

<div class="kanban-column-header">
Cabecera de la columna, con título y contador.

<h2>Por Hacer</h2>
Título de la columna.

<span class="task-count">3</span>
Muestra el número de tareas en esta columna.

</div>
Cierra la cabecera de la columna.

<div class="kanban-cards" data-column-id="todo">
Contenedor de tarjetas, con atributo que identifica la columna.

<div class="card kanban-card" draggable="true" data-task-id="task-1">
Tarjeta individual, arrastrable y con identificador de tarea.

<h4>Revisar diseño de interfaz</h4>
Título de la tarea.

<p class="card-subtext">Feedback sobre los mockups v2</p>
Descripción breve de la tarea.

<div class="task-details">
Contenedor de detalles: prioridad y asignados.

<span class="priority-indicator high">Alta</span>
Etiqueta de prioridad alta.

<div class="assignees team-members">
Área de miembros asignados.

<span class="avatar-placeholder" title="Usuario 1"></span>
Avatar del usuario asignado, con tooltip.

</div>
Cierra el contenedor de asignados.

</div>
Cierra detalles de la tarea.

</div>
Cierra la primera tarjeta.

<div class="card kanban-card" draggable="true" data-task-id="task-2">
Segunda tarjeta similar a la anterior.

<h4>Actualizar documentación técnica</h4>
Título de la segunda tarea.

<p class="card-subtext">Incluir nuevos endpoints API</p>
Descripción de la tarea.

<div class="task-details">
Detalles de prioridad y asignados.

<span class="priority-indicator medium">Media</span>
Prioridad media.

<div class="assignees team-members">
Contenedor de avatares.

<span class="avatar-placeholder" title="Usuario 2"></span>
Primer avatar.

<span class="avatar-placeholder" title="Usuario 3"></span>
Segundo avatar.

</div>
Cierra asignados.

</div>
Cierra detalles.

</div>
Cierra la segunda tarjeta.

<div class="card kanban-card" draggable="true" data-task-id="task-3">
Tercera tarjeta.

<h4>Configurar entorno de pruebas</h4>
Título de la tercera tarea.

<div class="task-details">
Detalles de tarea.

<span class="priority-indicator low">Baja</span>
Prioridad baja.

<div class="assignees team-members"></div>
Sin asignados por el momento.

</div>
Cierra detalles.

</div>
Cierra la tercera tarjeta.

</div>
Cierra el contenedor de tarjetas de “Por Hacer”.

</div>
Cierra la primera columna.

<!-- Columna: En Progreso -->
Comentario para la columna “En Progreso”.

<div class="kanban-column">
Segunda columna del tablero.

<div class="kanban-column-header">
Cabecera de “En Progreso”.

<h2>En Progreso</h2>
Título de la columna.

<span class="task-count">2</span>
Número de tareas en progreso.

</div>
Cierra la cabecera.

<div class="kanban-cards" data-column-id="inprogress">
Contenedor de tarjetas en esta columna.

<div class="card kanban-card" draggable="true" data-task-id="task-4">
Primera tarjeta de “En Progreso”.

<h4>Desarrollar módulo de autenticación</h4>
Título de la tarea.

<p class="card-subtext">Implementar OAuth 2.0</p>
Descripción de la tarea.

<div class="task-details">
Detalles de prioridad y asignados.

<span class="priority-indicator high">Alta</span>
Prioridad alta.

<div class="assignees team-members">
Contenedor de avatares.

<span class="avatar-placeholder" title="Usuario 4"></span>
Avatar del usuario.

</div>
Cierra asignados.

</div>
Cierra detalles.

</div>
Cierra la tarjeta 4.

<div class="card kanban-card" draggable="true" data-task-id="task-5">
Segunda tarjeta de “En Progreso”.

<h4>Escribir pruebas unitarias</h4>
Título de la tarea.

<p class="card-subtext">Cobertura mínima del 80%</p>
Descripción de la tarea.

<div class="task-details">
Detalles de prioridad y asignados.

<span class="priority-indicator medium">Media</span>
Prioridad media.

<div class="assignees team-members">
Contenedor de avatares.

<span class="avatar-placeholder" title="Usuario 4"></span>
Primer avatar.

<span class="avatar-placeholder" title="Usuario 5"></span>
Segundo avatar.

</div>
Cierra asignados.

</div>
Cierra detalles.

</div>
Cierra la tarjeta 5.

</div>
Cierra contenedor de tarjetas “En Progreso”.

</div>
Cierra la segunda columna.

<!-- Columna: En Revisión -->
Comentario para la columna “En Revisión”.

<div class="kanban-column">
Tercera columna.

<div class="kanban-column-header">
Cabecera de “En Revisión”.

<h2>En Revisión</h2>
Título de la columna.

<span class="task-count">1</span>
Número de tareas en revisión.

</div>
Cierra la cabecera.

<div class="kanban-cards" data-column-id="review">
Contenedor de tarjetas en revisión.

<div class="card kanban-card" draggable="true" data-task-id="task-6">
Única tarjeta de esta columna.

<h4>Optimizar consultas de base de datos</h4>
Título de la tarea.

<p class="card-subtext">Analizar queries lentas</p>
Descripción de la tarea.

<div class="task-details">
Detalles de prioridad y asignados.

<span class="priority-indicator medium">Media</span>
Prioridad media.

<div class="assignees team-members">
Contenedor de avatares.

<span class="avatar-placeholder" title="Usuario 6"></span>
Avatar del usuario.

</div>
Cierra asignados.

</div>
Cierra detalles.

</div>
Cierra la tarjeta 6.

</div>
Cierra contenedor de revisión.

</div>
Cierra la tercera columna.

<!-- Columna: Completado -->
Comentario para la columna “Completado”.

<div class="kanban-column">
Cuarta y última columna.

<div class="kanban-column-header">
Cabecera de “Completado”.

<h2>Completado</h2>
Título de la columna.

<span class="task-count">1</span>
Tareas completadas.

</div>
Cierra la cabecera.

<div class="kanban-cards" data-column-id="done">
Contenedor de tarjetas finalizadas.

<div class="card kanban-card completed-task" draggable="true" data-task-id="task-7">
Tarjeta marcada como completada.

<h4>Reunión con equipo de desarrollo</h4>
Título de la tarea.

<p class="card-subtext">Sprint Planning</p>
Descripción de la tarea.

<div class="task-details">
Detalles de prioridad y asignados.

<span class="priority-indicator low">Baja</span>
Prioridad baja.

<div class="assignees team-members">
Contenedor de avatares.

<span class="avatar-placeholder" title="Usuario 1"></span>
Primer avatar.

<span class="avatar-placeholder" title="Usuario 2"></span>
Segundo avatar.

<span class="avatar-placeholder" title="Usuario 3"></span>
Tercer avatar.

</div>
Cierra asignados.

</div>
Cierra detalles.

</div>
Cierra la tarjeta 7.

</div>
Cierra contenedor de completados.

</div>
Cierra la cuarta columna.

</section>
Finaliza la sección del tablero Kanban.

</main>
Cierra el contenido principal.

</div>
Cierra el contenedor general del dashboard.

<script src="js/script.js"></script>
Importa el archivo JavaScript que controla la interactividad del menú y el arrastre de tarjetas.

</body>
Termina el contenido visible.

</html>
Cierra el elemento raíz y finaliza el documento HTML.

tablero_kanban.css

Este archivo ajusta los estilos del Tablero Kanban: establece el contenedor como un flex con desplazamiento horizontal, da formato a las columnas con fondo, bordes y sombras, define la apariencia y comportamiento arrastrable de las tarjetas, personaliza las barras de scroll y adapta el diseño a pantallas pequeñas para garantizar una experiencia consistente y responsiva.

CSS Tablero Kanban: Flex Layout, Columnas y Estilos Responsivos de Tarjetas

.kanban-board {
  display: flex;               
  gap: 20px;                   
  overflow-x: auto;            
  padding: 10px 5px 20px 5px;  
  min-height: 70vh;            
  align-items: flex-start;     
}

.kanban-column {
  flex: 0 0 300px;             
  background-color: #2c313a;   
  border-radius: 8px;
  display: flex;
  flex-direction: column;      
  max-height: 75vh;            
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.kanban-column-header {
  padding: 15px 20px;
  border-bottom: 1px solid #3a3f47;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.kanban-column-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #e0e0e0;
  margin: 0;
}

.task-count {
  background-color: #3a3f47;
  color: #a0a4a8;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 10px;
}

.kanban-cards {
  padding: 15px;
  overflow-y: auto;           
  flex-grow: 1;                
  display: flex;
  flex-direction: column;
  gap: 15px;                   
}

.kanban-card {
  background-color: #252a31;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  cursor: grab;
  transition: box-shadow 0.2s ease;
}

.kanban-card:active {
  cursor: grabbing;
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

.kanban-card h4 {
  font-size: 0.9rem;
  font-weight: 500;
  color: #e0e0e0;
  margin-bottom: 8px;
}

.kanban-card .card-subtext {
  font-size: 0.8rem;
  color: #a0a4a8;
  margin-bottom: 12px;
  line-height: 1.4;
}

.task-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.priority-indicator {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.priority-indicator.high {
  background-color: rgba(255, 107, 107, 0.2);
  color: #ff8a8a;
}

.priority-indicator.medium {
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffd56a;
}

.priority-indicator.low {
  background-color: rgba(40, 167, 69, 0.2);
  color: #7bdb93;
}

.assignees.team-members {
  display: flex;
  align-items: center;
}

.kanban-card.completed-task {
  opacity: 0.7;
}
.kanban-card.completed-task h4,
.kanban-card.completed-task .card-subtext {
  text-decoration: line-through;
  color: #8a8f94;
}

.kanban-card.dragging {
  opacity: 0.5;
}

.kanban-column.drag-over {
  background-color: #3a3f47;
  border: 1px dashed #6c63ff;
}

.kanban-board::-webkit-scrollbar {
  height: 10px;
}
.kanban-board::-webkit-scrollbar-track {
  background: #252a31;
  border-radius: 5px;
}
.kanban-board::-webkit-scrollbar-thumb {
  background-color: #4a4f57;
  border-radius: 5px;
}
.kanban-board::-webkit-scrollbar-thumb:hover {
  background-color: #5a5f67;
}

.kanban-cards::-webkit-scrollbar {
  width: 6px;
}
.kanban-cards::-webkit-scrollbar-track {
  background: #2c313a;
  border-radius: 3px;
  margin: 5px 0;
}
.kanban-cards::-webkit-scrollbar-thumb {
  background-color: #4a4f57;
  border-radius: 3px;
}
.kanban-cards::-webkit-scrollbar-thumb:hover {
  background-color: #5a5f67;
}

@media (max-width: 768px) {
.kanban-board {
  flex-direction: column;     
  overflow-x: hidden;         
  gap: 15px;                  
  padding: 10px;
}
.kanban-column {
  flex: 1 0 auto;             
  width: 100%;
  max-height: none;           
}
.kanban-column-header {
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px;
}
.kanban-cards {
  max-height: 50vh;           
}
}

Explicación del código: CSS Tablero Kanban: Flex Layout, Columnas y Estilos Responsivos de Tarjetas

.kanban-board {
Inicia la regla que aplica a todo el contenedor del tablero Kanban.

display: flex;
Convierte el tablero en un flex container, alineando columnas en fila.

gap: 20px;
Añade 20 px de separación horizontal entre cada columna.

overflow-x: auto;
Permite desplazamiento horizontal si las columnas exceden el ancho visible.

padding: 10px 5px 20px 5px;
Aplica 10 px arriba, 5 px lateral y 20 px abajo de espacio interior.

min-height: 70vh;
Establece altura mínima del tablero al 70 % de la altura de la ventana.

align-items: flex-start;
Alinea el inicio de cada columna al tope del contenedor.

}
Cierra la regla de .kanban-board.

.kanban-column {
Inicia la regla para cada columna dentro del tablero.

flex: 0 0 300px;
Hace que cada columna tenga ancho fijo de 300 px y no crezca.

background-color: #2c313a;
Pinta el fondo de la columna en gris oscuro.

border-radius: 8px;
Redondea las esquinas con radio de 8 px.

display: flex;
Convierte la columna en flex container vertical.

flex-direction: column;
Organiza su contenido en vertical.

max-height: 75vh;
Limita la altura máxima al 75 % de la ventana.

box-shadow: 0 2px 5px rgba(0,0,0,0.2);
Agrega sombra suave para elevar la columna.

}
Cierra la regla de .kanban-column.

.kanban-column-header {
Inicia la regla para la cabecera de cada columna.

padding: 15px 20px;
Aplica 15 px arriba/abajo y 20 px lateral.

border-bottom: 1px solid #3a3f47;
Dibuja una línea inferior gris para separar la cabecera.

display: flex;
Hace que el título y contador queden en línea.

justify-content: space-between;
Separa ambos extremos al máximo.

align-items: center;
Centra verticalmente el contenido.

flex-shrink: 0;
Impide que la cabecera se comprima al reducirse el espacio.

}
Cierra la regla de .kanban-column-header.

.kanban-column-header h2 {
Inicia la regla para el título de columna.

font-size: 1rem;
Ajusta el tamaño del texto a 1 rem.

font-weight: 600;
Pone el texto en seminegrita.

color: #e0e0e0;
Colorea el texto de título en gris claro.

margin: 0;
Elimina márgenes por defecto.

}
Cierra la regla del título.

.task-count {
Inicia la regla para el contador de tareas.

background-color: #3a3f47;
Fondo gris intermedio.

color: #a0a4a8;
Texto gris claro.

font-size: 0.75rem;
Texto muy pequeño.

font-weight: 500;
Negrita ligera.

padding: 3px 8px;
Espacio interior pequeño.

border-radius: 10px;
Bordes redondeados.

}
Cierra la regla de .task-count.

.kanban-cards {
Inicia la regla para el contenedor de tarjetas en cada columna.

padding: 15px;
Espacio interior uniforme.

overflow-y: auto;
Permite scroll vertical si hay muchas tarjetas.

flex-grow: 1;
Hace que este contenedor ocupe espacio restante de la columna.

display: flex;
Organiza tarjetas como flex vertical.

flex-direction: column;
Coloca las tarjetas una debajo de otra.

gap: 15px;
Separación de 15 px entre tarjetas.

}
Cierra la regla de .kanban-cards.

.kanban-card {
Inicia la regla para cada tarjeta individual.

background-color: #252a31;
Fondo muy oscuro.

padding: 15px;
Espacio interior alrededor del contenido.

border-radius: 6px;
Esquinas redondeadas.

box-shadow: 0 2px 4px rgba(0,0,0,0.15);
Sombra suave para destacarla.

cursor: grab;
Cambia el cursor para indicar que la tarjeta es arrastrable.

transition: box-shadow 0.2s ease;
Suaviza la animación de sombra al interactuar.

}
Cierra la regla de .kanban-card.

.kanban-card:active {
Regla que aplica mientras se arrastra la tarjeta.

cursor: grabbing;
Muestra el cursor de agarre activo.

box-shadow: 0 5px 15px rgba(0,0,0,0.25);
Aumenta la sombra para resaltar durante el arrastre.

}
Cierra la pseudo‑clase :active.

.kanban-card h4 {
Inicia la regla para el título de la tarjeta.

font-size: 0.9rem;
Ajusta el tamaño del subtítulo.

font-weight: 500;
Negrita ligera.

color: #e0e0e0;
Texto gris claro.

margin-bottom: 8px;
Espacio abajo para separar del subtítulo.

}
Cierra la regla del título.

.kanban-card .card-subtext {
Regla para el texto descriptivo de la tarjeta.

font-size: 0.8rem;
Tamaño de texto reducido.

color: #a0a4a8;
Texto gris medianamente claro.

margin-bottom: 12px;
Espacio inferior.

line-height: 1.4;
Interlineado para mejor lectura.

}
Cierra la regla del subtítulo.

.task-details {
Inicia la regla para la zona de prioridad y avatares.

display: flex;
Alinea prioridad y asignados en línea.

justify-content: space-between;
Separa los extremos.

align-items: center;
Centra verticalmente.

margin-top: 10px;
Espacio superior para separarlo del contenido previo.

}
Cierra la regla de .task-details.

.priority-indicator {
Inicia la regla para la etiqueta de prioridad.

font-size: 0.75rem;
Texto muy pequeño.

font-weight: 500;
Negrita ligera.

padding: 3px 8px;
Espacio interior.

border-radius: 4px;
Esquinas redondeadas pequeñas.

text-transform: uppercase;
Convierte el texto a mayúsculas.

}
Cierra la regla de .priority-indicator.

.priority-indicator.high {
Regla para prioridad alta.

background-color: rgba(255, 107, 107, 0.2);
Fondo rojo semitransparente.

color: #ff8a8a;
Texto rojo claro.

}
Cierra la regla de prioridad alta.

.priority-indicator.medium {
Regla para prioridad media.

background-color: rgba(255, 193, 7, 0.2);
Fondo amarillo semitransparente.

color: #ffd56a;
Texto amarillo claro.

}
Cierra la regla de prioridad media.

.priority-indicator.low {
Regla para prioridad baja.

background-color: rgba(40, 167, 69, 0.2);
Fondo verde semitransparente.

color: #7bdb93;
Texto verde claro.

}
Cierra la regla de prioridad baja.

.assignees.team-members {
Inicia la regla para el contenedor de avatares.

display: flex;
Coloca los avatares en línea.

align-items: center;
Centra verticalmente los avatares.

}
Cierra la regla de .assignees.

.kanban-card.completed-task {
Regla para tarjeta marcada como completada.

opacity: 0.7;
Le da menor opacidad para desactivarla visualmente.

}
Cierra la regla de completado.

.kanban-card.completed-task h4,
Selecciona título y subtítulo de tarjeta completada.

.kanban-card.completed-task .card-subtext {
Continúa la regla combinada.

text-decoration: line-through;
Tacha el texto para indicar completado.

color: #8a8f94;
Cambia el color a gris intermedio.

}
Cierra la regla conjunta.

.kanban-card.dragging {
Regla para tarjeta en proceso de arrastre.

opacity: 0.5;
Reduce opacidad para señalizar que se está moviendo.

}
Cierra la regla de arrastre.

.kanban-column.drag-over {
Regla para columna al recibir una tarjeta arrastrada sobre ella.

background-color: #3a3f47;
Cambia el fondo para indicarlo.

border: 1px dashed #6c63ff;
Agrega un borde punteado morado.

}
Cierra la regla de “drag over”.

.kanban-board::-webkit-scrollbar {
Inicia estilos para la barra de scroll horizontal del tablero.

height: 10px;
Altura de la barra de desplazamiento.

}
Cierra la regla del scrollbar-track.

.kanban-board::-webkit-scrollbar-track {
Inicio del track de la barra.

background: #252a31;
Color de fondo del track.

border-radius: 5px;
Bordes redondeados del track.

}
Cierra la regla del scrollbar-track.

.kanban-board::-webkit-scrollbar-thumb {
Inicio del “thumb” (manija) de la barra.

background-color: #4a4f57;
Color de la manija.

border-radius: 5px;
Bordes redondeados de la manija.

}
Cierra la regla del scrollbar-thumb.

.kanban-board::-webkit-scrollbar-thumb:hover {
Regla para hover sobre la manija.

background-color: #5a5f67;
Aclara el color al pasar el ratón.

}
Cierra la regla de hover.

.kanban-cards::-webkit-scrollbar {
Inicia estilos para la barra de scroll vertical de tarjetas.

width: 6px;
Define el grosor de 6 px.

}
Cierra la regla del scrollbar.

.kanban-cards::-webkit-scrollbar-track {
Track del scroll vertical.

background: #2c313a;
Color de fondo.

border-radius: 3px;
Bordes redondeados.

margin: 5px 0;
Margen vertical dentro del track.

}
Cierra la regla del track.

.kanban-cards::-webkit-scrollbar-thumb {
Inicia la manija de scroll vertical.

background-color: #4a4f57;
Color de la manija.

border-radius: 3px;
Bordes redondeados.

}
Cierra la regla de la manija.

.kanban-cards::-webkit-scrollbar-thumb:hover {
Regla para hover de la manija vertical.

background-color: #5a5f67;
Aclara al pasar el ratón.

}
Cierra la regla de hover.

@media (max-width: 768px) {
Comienza el bloque de estilos responsivos para pantallas pequeñas.

.kanban-board {
Ajustes para el contenedor del tablero.

flex-direction: column;
Organiza columnas en fila vertical.

overflow-x: hidden;
Oculta scroll horizontal.

gap: 15px;
Reduce la separación a 15 px.

padding: 10px;
Ajusta el padding interno.

}
Cierra las reglas de .kanban-board responsivo.

.kanban-column {
Ajustes para cada columna.

flex: 1 0 auto;
Permite que la columna escale horizontalmente al 100 %.

width: 100%;
Fuerza ancho completo.

max-height: none;
Elimina límite de altura.

}
Cierra la regla de columnas responsivas.

.kanban-column-header {
Ajustes de cabecera en móvil.

flex-wrap: wrap;
Permite que título y contador pasen a nueva línea.

gap: 5px;
Espacio reducido entre ellos.

padding: 10px;
Padding uniforme.

}
Cierra la regla de cabecera responsiva.

.kanban-cards {
Ajustes de contenedor de tarjetas.

max-height: 50vh;
Limita altura al 50 % de la ventana.

}
Cierra la regla de tarjetas responsivas.

}
Cierra el bloque @media.

calendario.html

En esta sección principal se muestra el calendario: el encabezado incluye el título “Calendario” y el menú de usuario, seguido de la tarjeta que contiene la cabecera con botones para cambiar de mes y el mes actual, la cuadrícula de días organizada por semanas con indicación de días de otros meses, resaltado del día actual y eventos dentro de las celdas, y un pie de calendario con un aviso sobre la necesidad de JavaScript para la funcionalidad completa.

Calendario – Dashboard HTML: Estructura y Vista de Calendario

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calendario - Dashboard</title>
  <!-- Estilos base y tema -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/theme.css">
  <!-- Layout general -->
  <link rel="stylesheet" href="css/layout.css">
  <!-- Módulos reutilizables -->
  <link rel="stylesheet" href="css/modules/header.css">
  <link rel="stylesheet" href="css/modules/navigation.css">
  <link rel="stylesheet" href="css/modules/card.css">
  <link rel="stylesheet" href="css/modules/button.css">
  <!-- Clases de estado -->
  <link rel="stylesheet" href="css/state.css">
  <!-- Estilos específicos para la página Calendario -->
  <link rel="stylesheet" href="css/pages/calendario.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <div class="dashboard-container">
    <button class="menu-toggle">
      <i class="fas fa-bars"></i>
    </button>
    <!-- Sidebar -->
    <aside class="sidebar">
      <div class="logo">
        <i class="fas fa-project-diagram fa-2x"></i>
      </div>
      <nav class="menu">
        <ul>
          <li><a href="index.html"><i class="fas fa-home"></i> <span>Inicio</span></a></li>
          <li><a href="mis_proyectos.html"><i class="fas fa-briefcase"></i> <span>Mis Proyectos</span></a></li>
          <li><a href="tablero_kanban.html"><i class="fas fa-columns"></i> <span>Tablero Kanban</span></a></li>
          <li class="active"><a href="calendario.html"><i class="fas fa-calendar-alt"></i> <span>Calendario</span></a></li>
          <li><a href="#"><i class="fas fa-chart-bar"></i> <span>Reportes</span></a></li>
        </ul>
      </nav>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
      <header class="main-header">
        <h1>Calendario</h1>
      
        <div class="user-menu">
          <button class="user-toggle">
            <i class="fas fa-user-circle fa-lg"></i>
          </button>
          <!-- El dropdown debe contener el UL -->
          <div class="profile-dropdown">
            <ul class="profile-menu">
              <li>
                <a href="/mi-perfil.html">
                  <i class="fas fa-user"></i>
                  Mi perfil
                </a>
              </li>
              <li>
                <a href="/logout">
                  <i class="fas fa-sign-out-alt"></i>
                  Cerrar sesión
                </a>
              </li>
            </ul>
          </div>
        </div>
      </header>

      <section class="calendar-container card">
        <div class="calendar-header">
          <button class="btn btn-icon btn-secondary" aria-label="Mes anterior">
            <i class="fas fa-chevron-left"></i>
          </button>
          <h2>Abril 2025</h2>
          <button class="btn btn-icon btn-secondary" aria-label="Mes siguiente">
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>

        <table class="calendar-grid">
          <thead>
            <tr>
              <th>Lun</th>
              <th>Mar</th>
              <th>Mié</th>
              <th>Jue</th>
              <th>Vie</th>
              <th>Sáb</th>
              <th>Dom</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="other-month"><span class="day-number">31</span></td>
              <td><span class="day-number">1</span></td>
              <td><span class="day-number">2</span></td>
              <td><span class="day-number">3</span></td>
              <td class="today">
                <span class="day-number">4</span>
                <div class="event event-blue">Reunión equipo dev</div>
              </td>
              <td><span class="day-number">5</span></td>
              <td><span class="day-number">6</span></td>
            </tr>
            <tr>
              <td><span class="day-number">7</span></td>
              <td><span class="day-number">8</span></td>
              <td><span class="day-number">9</span></td>
              <td>
                <span class="day-number">10</span>
                <div class="event event-green">Demo Cliente X</div>
              </td>
              <td><span class="day-number">11</span></td>
              <td><span class="day-number">12</span></td>
              <td><span class="day-number">13</span></td>
            </tr>
            <tr>
              <td><span class="day-number">14</span></td>
              <td>
                <span class="day-number">15</span>
                <div class="event event-purple">Entrega Hito 1</div>
              </td>
              <td><span class="day-number">16</span></td>
              <td><span class="day-number">17</span></td>
              <td><span class="day-number">18</span></td>
              <td><span class="day-number">19</span></td>
              <td><span class="day-number">20</span></td>
            </tr>
            <tr>
              <td><span class="day-number">21</span></td>
              <td><span class="day-number">22</span></td>
              <td><span class="day-number">23</span></td>
              <td><span class="day-number">24</span></td>
              <td>
                <span class="day-number">25</span>
                <div class="event event-blue">Sprint Review</div>
                <div class="event event-red">Deadline Docs</div>
              </td>
              <td><span class="day-number">26</span></td>
              <td><span class="day-number">27</span></td>
            </tr>
            <tr>
              <td><span class="day-number">28</span></td>
              <td><span class="day-number">29</span></td>
              <td><span class="day-number">30</span></td>
              <td class="other-month"><span class="day-number">1</span></td>
              <td class="other-month"><span class="day-number">2</span></td>
              <td class="other-month"><span class="day-number">3</span></td>
              <td class="other-month"><span class="day-number">4</span></td>
            </tr>
          </tbody>
        </table>
        <div class="calendar-footer">
          <p><i class="fas fa-info-circle"></i> Este es un calendario estático. Se requiere JavaScript para funcionalidad completa.</p>
        </div>
      </section>
    </main>
  </div>

  <script src="js/script.js"></script>
</body>
</html>

Explicación del código: Calendario – Dashboard HTML: Estructura y Vista de Calendario

<!DOCTYPE html>
Indica que el documento usa HTML5 y activa el modo de renderizado estándar.

<html lang="es">
Elemento raíz; lang="es" señala que el contenido está en español.

<head>
Comienzo de la sección de metadatos (no visible), donde van títulos, codificación y estilos.

<meta charset="UTF-8">
Define la codificación de caracteres (UTF‑8) para mostrar correctamente acentos y símbolos.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ajusta ancho y escala al dispositivo para que la página sea responsiva.

<title>Calendario - Dashboard</title>
Título de la pestaña del navegador y de los marcadores.

<!-- Estilos base y tema -->
Comentario que agrupa las hojas de estilo globales y de tema.

<link rel="stylesheet" href="css/base.css">
Conecta estilos básicos (reset, tipografías, variables).

<link rel="stylesheet" href="css/theme.css">
Importa el tema de colores y tipografía.

<!-- Layout general -->
Comentario para los estilos de diseño estructural.

<link rel="stylesheet" href="css/layout.css">
Define grillas, contenedores y posicionamiento global.

<!-- Módulos reutilizables -->
Comentario que agrupa componentes CSS compartidos.

<link rel="stylesheet" href="css/modules/header.css">
Estilos del encabezado (<header>) de la aplicación.

<link rel="stylesheet" href="css/modules/navigation.css">
Estilos del menú lateral de navegación.

<link rel="stylesheet" href="css/modules/card.css">
Diseño de las tarjetas informativas.

<link rel="stylesheet" href="css/modules/button.css">
Definición de botones: colores, tamaños y estados.

<!-- Clases de estado -->
Comentario para las variantes de estilo según el estado de los elementos.

<link rel="stylesheet" href="css/state.css">
Importa clases como .active, .disabled o estilos de enfoque.

<!-- Estilos específicos para la página Calendario -->
Comentario para la hoja de estilos única de esta vista.

<link rel="stylesheet" href="css/pages/calendario.css">
Reglas CSS exclusivas de la página de calendario.

<!-- Font Awesome -->
Comentario para la biblioteca de iconos.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Carga Font Awesome desde CDN para iconos vectoriales.

</head>
Cierra la sección de metadatos.

<body>
Comienza el contenido visible de la página.

<div class="dashboard-container">
Contenedor principal que engloba toda la interfaz de “dashboard”.

<button class="menu-toggle">
Botón que alterna la visibilidad del menú lateral.

<i class="fas fa-bars"></i>
Icono de “hamburguesa” de Font Awesome, para menú.

</button>
Cierra el botón de alternar menú.

<!-- Sidebar -->
Comentario que marca el inicio de la barra lateral.

<aside class="sidebar">
Elemento semántico que contiene el menú lateral.

<div class="logo">
Área para el logotipo o icono de la aplicación.

<i class="fas fa-project-diagram fa-2x"></i>
Icono representativo de proyectos ampliado 2×.

</div>
Cierra el contenedor del logotipo.

<nav class="menu">
Inicia la sección de navegación principal.

<ul>
Lista desordenada de enlaces de menú.

<li><a href="index.html"><i class="fas fa-home"></i> <span>Inicio</span></a></li>
Enlace a “Inicio” con icono de casa.

<li><a href="mis_proyectos.html"><i class="fas fa-briefcase"></i> <span>Mis Proyectos</span></a></li>
Enlace a “Mis Proyectos” con icono de maletín.

<li><a href="tablero_kanban.html"><i class="fas fa-columns"></i> <span>Tablero Kanban</span></a></li>
Enlace a “Tablero Kanban” con icono de columnas.

<li class="active"><a href="calendario.html"><i class="fas fa-calendar-alt"></i> <span>Calendario</span></a></li>
Enlace activo a “Calendario” con icono de calendario.

<li><a href="#"><i class="fas fa-chart-bar"></i> <span>Reportes</span></a></li>
Enlace a “Reportes” con icono de gráfico.

</ul>
Cierra la lista de navegación.

</nav>
Finaliza el bloque de navegación.

</aside>
Cierra la barra lateral.

<!-- Main Content -->
Comentario que marca el inicio del contenido principal.

<main class="main-content">
Área principal para el contenido de la página.

<header class="main-header">
Encabezado interno con título y menú de usuario.

<h1>Calendario</h1>
Título visible de la sección.


<div class="user-menu">
Contenedor del menú de perfil de usuario.

<button class="user-toggle">
Botón para desplegar el menú de usuario.

<i class="fas fa-user-circle fa-lg"></i>
Icono de usuario circular, tamaño grande.

</button>
Cierra el botón de usuario.

<!-- El dropdown debe contener el UL -->
Comentario que recuerda la estructura interna.

<div class="profile-dropdown">
Contenedor que muestra las opciones de perfil.

<ul class="profile-menu">
Lista de enlaces de perfil.

<li>
Comienza el primer elemento.

<a href="/mi-perfil.html">
Enlace a la página de perfil.

<i class="fas fa-user"></i>
Icono de perfil.

Mi perfil
Texto del enlace.

</a>
Cierra el enlace de perfil.

</li>
Finaliza el primer ítem.

<li>
Comienza el segundo elemento.

<a href="/logout">
Enlace para cerrar sesión.

<i class="fas fa-sign-out-alt"></i>
Icono de salida.

Cerrar sesión
Texto del enlace.

</a>
Cierra el enlace de cierre.

</li>
Finaliza el segundo ítem.

</ul>
Cierra la lista de perfil.

</div>
Cierra el dropdown de perfil.

</div>
Cierra el contenedor user-menu.

</header>
Cierra el encabezado interno.

<section class="calendar-container card">
Sección que agrupa el calendario dentro de una tarjeta.

<div class="calendar-header">
Cabecera del calendario con controles de navegación.

<button class="btn btn-icon btn-secondary" aria-label="Mes anterior">
Botón para ir al mes anterior, accesible para lectores de pantalla.

<i class="fas fa-chevron-left"></i>
Icono de flecha izquierda.

</button>
Cierra el botón de mes anterior.

<h2>Abril 2025</h2>
Título que muestra el mes y año actuales.

<button class="btn btn-icon btn-secondary" aria-label="Mes siguiente">
Botón para ir al mes siguiente.

<i class="fas fa-chevron-right"></i>
Icono de flecha derecha.

</button>
Cierra el botón de mes siguiente.

</div>
Cierra la cabecera del calendario.

<table class="calendar-grid">
Inicia la tabla que representa la cuadrícula mensual.

<thead>
Encabezado de la tabla con los días de la semana.

<tr>
Fila que agrupa las cabeceras de columna.

<th>Lun</th>
Columna “Lunes”.

<th>Mar</th>
Columna “Martes”.

<th>Mié</th>
Columna “Miércoles”.

<th>Jue</th>
Columna “Jueves”.

<th>Vie</th>
Columna “Viernes”.

<th>Sáb</th>
Columna “Sábado”.

<th>Dom</th>
Columna “Domingo”.

</tr>
Cierra la fila de cabecera.

</thead>
Finaliza el bloque <thead>.

<tbody>
Cuerpo de la tabla con los días del mes.

<tr>
Primera fila de fechas.

<td class="other-month"><span class="day-number">31</span></td>
Día 31 del mes anterior, atenuado con clase other-month.

<td><span class="day-number">1</span></td>
Día 1 del mes actual.

<td><span class="day-number">2</span></td>
Día 2 del mes.

<td><span class="day-number">3</span></td>
Día 3 del mes.

<td class="today">
Celda del día actual, resaltada con clase today.

<span class="day-number">4</span>
Número del día 4.

<div class="event event-blue">Reunión equipo dev</div>
Evento azul dentro de ese día.

</td>
Cierra la celda del día actual.

<td><span class="day-number">5</span></td>
Día 5.

<td><span class="day-number">6</span></td>
Día 6.

</tr>
Cierra la primera fila de fechas.

<tr>
Segunda fila de fechas.

<td><span class="day-number">7</span></td>
Día 7.

<td><span class="day-number">8</span></td>
Día 8.

<td><span class="day-number">9</span></td>
Día 9.

<td>
Celda con evento.

<span class="day-number">10</span>
Día 10.

<div class="event event-green">Demo Cliente X</div>
Evento verde para demo.

</td>
Cierra la celda del día 10.

<td><span class="day-number">11</span></td>
Día 11.

<td><span class="day-number">12</span></td>
Día 12.

<td><span class="day-number">13</span></td>
Día 13.

</tr>
Cierra la segunda fila.

<tr>
Tercera fila de fechas.

<td><span class="day-number">14</span></td>
Día 14.

<td>
Celda con evento.

<span class="day-number">15</span>
Día 15.

<div class="event event-purple">Entrega Hito 1</div>
Evento morado de entrega.

</td>
Cierra la celda del día 15.

<td><span class="day-number">16</span></td>
Día 16.

<td><span class="day-number">17</span></td>
Día 17.

<td><span class="day-number">18</span></td>
Día 18.

<td><span class="day-number">19</span></td>
Día 19.

<td><span class="day-number">20</span></td>
Día 20.

</tr>
Cierra la tercera fila.

<tr>
Cuarta fila de fechas.

<td><span class="day-number">21</span></td>
Día 21.

<td><span class="day-number">22</span></td>
Día 22.

<td><span class="day-number">23</span></td>
Día 23.

<td><span class="day-number">24</span></td>
Día 24.

<td>
Celda con dos eventos.

<span class="day-number">25</span>
Día 25.

<div class="event event-blue">Sprint Review</div>
Evento azul.

<div class="event event-red">Deadline Docs</div>
Evento rojo.

</td>
Cierra la celda del día 25.

<td><span class="day-number">26</span></td>
Día 26.

<td><span class="day-number">27</span></td>
Día 27.

</tr>
Cierra la cuarta fila.

<tr>
Quinta fila de fechas.

<td><span class="day-number">28</span></td>
Día 28.

<td><span class="day-number">29</span></td>
Día 29.

<td><span class="day-number">30</span></td>
Día 30.

<td class="other-month"><span class="day-number">1</span></td>
Día 1 del mes siguiente, atenuado.

<td class="other-month"><span class="day-number">2</span></td>
Día 2 del mes siguiente.

<td class="other-month"><span class="day-number">3</span></td>
Día 3 del mes siguiente.

<td class="other-month"><span class="day-number">4</span></td>
Día 4 del mes siguiente.

</tr>
Cierra la quinta fila.

</tbody>
Finaliza el cuerpo de la tabla.

</table>
Cierra la tabla del calendario.

<div class="calendar-footer">
Pie de la tarjeta con información adicional.

<p><i class="fas fa-info-circle"></i> Este es un calendario estático. Se requiere JavaScript para funcionalidad completa.</p>
Aviso con icono de información.

</div>
Cierra el pie de calendario.

</section>
Finaliza la sección del calendario.

</main>
Cierra el contenido principal.

</div>
Cierra el contenedor .dashboard-container.

<script src="js/script.js"></script>
Importa el archivo JavaScript que maneja interacciones y dinámicas.

</body>
Cierra el cuerpo del documento.

</html>
Cierra el elemento raíz y finaliza el documento HTML.

calendario.css

Este archivo define los estilos de la sección de calendario: establece el padding del contenedor, diseña la cabecera con botones de mes y título centrado, formatea la cuadrícula de la tabla con celdas de altura fija y bordes, resalta el día actual y estiliza los eventos con colores diferenciados, personaliza las barras de desplazamiento y aplica media queries para optimizar la visualización en dispositivos pequeños.

CSS Calendario – Contenedor, Encabezado, Grid y Estilos Responsivos

.calendar-container {
  padding: 25px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #3a3f47;
}

.calendar-header h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  text-align: center;
  flex-grow: 1;
}

.btn-icon {
  padding: 8px 12px;
  line-height: 1;
}
.btn-icon i {
  margin: 0;
  font-size: 1em;
}

.calendar-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendar-grid thead th {
  text-align: center;
  padding: 12px 5px;
  font-weight: 500;
  color: #a0a4a8;
  font-size: 0.85rem;
  border-bottom: 1px solid #3a3f47;
}

.calendar-grid tbody td {
  border: 1px solid #2c313a;
  height: 110px;
  padding: 8px;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

.day-number {
  display: block;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 500;
  color: #c0c4c8;
  margin-bottom: 5px;
}

td.other-month .day-number {
  color: #5a5f67;
  opacity: 0.6;
}

td.today {
  background-color: rgba(108, 99, 255, 0.1);
}
td.today .day-number {
  background-color: #6c63ff;
  color: #ffffff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  display: inline-block;
  float: right;
  font-weight: 600;
}

.event {
  font-size: 0.75rem;
  padding: 3px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: default;
}

.event.event-blue {
  background-color: #4dabf7;
}
.event.event-green {
  background-color: #28a745;
}
.event.event-purple {
  background-color: #6f42c1;
}
.event.event-red {
  background-color: #dc3545;
}

.calendar-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 0.8rem;
  color: #8a8f94;
}
.calendar-footer i {
  margin-right: 5px;
}

@media (max-width: 768px) {
  .calendar-grid tbody td {
    height: 80px;
    padding: 4px;
  }
  .day-number {
    font-size: 0.75rem;
  }
  td.today .day-number {
    width: 20px;
    height: 20px;
    line-height: 20px;
  }
  .event {
    font-size: 0.65rem;
    padding: 2px 4px;
  }
  .calendar-header h2 {
    font-size: 1.1rem;
  }
  .calendar-grid thead th {
    font-size: 0.75rem;
    padding: 8px 2px;
  }
}

Explicación del código: CSS Calendario – Contenedor, Encabezado, Grid y Estilos Responsivos

.calendar-container { padding: 25px; }
El contenedor del calendario recibe 25 px de espacio interior en todos los lados, separando su contenido de los bordes de la tarjeta.

.calendar-header { … }
La cabecera del calendario usa Flexbox para colocar horizontalmente los controles y el título, separándolos al máximo, centrados verticalmente, con 25 px de espacio debajo, 15 px de relleno inferior y una línea divisoria en la parte inferior.

.calendar-header h2 { … }
El subtítulo (mes y año) se muestra con fuente de 1.4 rem, peso seminegrita, color blanco, sin márgenes, centrado horizontalmente y crece para ocupar todo el espacio disponible entre los botones.

.btn-icon { padding: 8px 12px; line-height: 1; }
Los botones de icono obtienen 8 px arriba/abajo y 12 px a los lados, con altura de línea ajustada al contenido para centrar el icono.

.btn-icon i { margin: 0; font-size: 1em; }
El propio elemento <i> dentro del botón no tiene márgenes y escala su fuente al 100 % del tamaño del botón.

.calendar-grid { … }
La tabla del calendario ocupa el 100 % del ancho, colapsa los bordes para eliminar doble línea y fija el ancho de columnas de forma uniforme.

.calendar-grid thead th { … }
Las cabeceras de días se centran, tienen 12 px arriba/abajo y 5 px lateral de relleno, fuente de peso medio, gris claro, tamaño de 0.85 rem, y una línea inferior que las separa del cuerpo.

.calendar-grid tbody td { … }
Cada celda de día muestra un borde gris oscuro, altura de 110 px, 8 px de relleno, contenido alineado arriba, posición relativa para superponer elementos y oculta el desbordamiento.

.day-number { … }
El número de día se muestra como bloque, alineado a la derecha, con fuente de 0.8 rem, peso medio, color gris claro y 5 px de espacio inferior.

td.other-month .day-number { color: #5a5f67; opacity: 0.6; }
Los números de días fuera del mes activo se pintan más oscuros y semitransparentes, indicando contenido atenuado.

td.today { background-color: rgba(108, 99, 255, 0.1); }
La celda del día actual recibe un fondo lila muy suave para resaltarla.

td.today .day-number { … }
El número del día actual se rodea de un círculo morado sólido de 24 × 24 px, texto blanco centrado y negrita, alineado a la derecha.

.event { … }
Cada evento dentro de una celda usa fuente de 0.75 rem, 3 × 6 px de relleno, bordes redondeados, 4 px de margen inferior, texto blanco, ocultación de texto sobrante con puntos suspensivos y cursor por defecto.

.event.event-blue { background-color: #4dabf7; }
Eventos azules reciben ese tono específico.

.event.event-green { background-color: #28a745; }
Eventos verdes se colorean de manera distintiva.

.event.event-purple { background-color: #6f42c1; }
Eventos morados adoptan ese color.

.event.event-red { background-color: #dc3545; }
Eventos rojos usan un rojo vivo.

.calendar-footer { … }
El pie de la sección obtiene 20 px de margen superior, texto centrado, fuente de 0.8 rem y color gris medio.

.calendar-footer i { margin-right: 5px; }
El icono de información en el pie tiene 5 px de separación a la derecha.

@media (max-width: 768px) { … }
En pantallas pequeñas, la altura de las celdas desciende a 80 px con 4 px de relleno, el tamaño de fuente de .day-number baja a 0.75 rem, los círculos de hoy a 20 px, los eventos a 0.65 rem con relleno 2 × 4 px, el título del mes a 1.1 rem y las cabeceras de días a 0.75 rem con 8 × 2 px de relleno.

reportes.html

En esta sección principal se organiza todo lo relativo a los reportes: primero aparece el encabezado con el título “Reportes” y el menú de usuario, después la tarjeta de filtros que permite seleccionar el rango de fechas, el proyecto y aplicar cambios, y a continuación la cuadrícula de widgets que incluye indicadores clave (KPI), espacios para gráficos que requieren JS y una tabla con el rendimiento del equipo.

Reportes – Dashboard HTML: Filtros, KPIs, Gráficos y Tablas

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reportes - Dashboard</title>
  
  <!-- Estilos base y de tema -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/theme.css">
  
  <!-- Layout general -->
  <link rel="stylesheet" href="css/layout.css">
  
  <!-- Módulos reutilizables -->
  <link rel="stylesheet" href="css/modules/header.css">
  <link rel="stylesheet" href="css/modules/navigation.css">
  <link rel="stylesheet" href="css/modules/card.css">
  <link rel="stylesheet" href="css/modules/button.css">
  
  <!-- Clases de estado -->
  <link rel="stylesheet" href="css/state.css">
  
  <!-- Estilos específicos para la página Reportes -->
  <link rel="stylesheet" href="css/pages/reportes.css">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <div class="dashboard-container">
    <button class="menu-toggle">
      <i class="fas fa-bars"></i>
    </button>
    <!-- Sidebar -->
    <aside class="sidebar">
      <div class="logo">
        <i class="fas fa-project-diagram fa-2x"></i>
      </div>
      <nav class="menu">
        <ul>
          <li><a href="index.html"><i class="fas fa-home"></i> <span>Inicio</span></a></li>
          <li><a href="mis_proyectos.html"><i class="fas fa-briefcase"></i> <span>Mis Proyectos</span></a></li>
          <li><a href="tablero_kanban.html"><i class="fas fa-columns"></i> <span>Tablero Kanban</span></a></li>
          <li><a href="calendario.html"><i class="fas fa-calendar-alt"></i> <span>Calendario</span></a></li>
          <li class="active"><a href="reportes.html"><i class="fas fa-chart-bar"></i> <span>Reportes</span></a></li>
        </ul>
      </nav>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
      <header class="main-header">
        <h1>Reportes</h1>
      
        <div class="user-menu">
          <button class="user-toggle">
            <i class="fas fa-user-circle fa-lg"></i>
          </button>
          <!-- El dropdown debe contener el UL -->
          <div class="profile-dropdown">
            <ul class="profile-menu">
              <li>
                <a href="/mi-perfil.html">
                  <i class="fas fa-user"></i>
                  Mi perfil
                </a>
              </li>
              <li>
                <a href="/logout">
                  <i class="fas fa-sign-out-alt"></i>
                  Cerrar sesión
                </a>
              </li>
            </ul>
          </div>
        </div>
      </header>

      <!-- Filtros de Reportes -->
      <section class="report-filters card">
        <h4>Filtrar Reportes</h4>
        <div class="filter-controls">
          <select name="date-range" aria-label="Rango de fechas">
            <option value="30d">Últimos 30 días</option>
            <option value="90d">Últimos 90 días</option>
            <option value="year">Este Año</option>
            <option value="all">Todo</option>
          </select>
          <select name="project" aria-label="Proyecto específico">
            <option value="all">Todos los Proyectos</option>
            <option value="web">Lanzamiento Nueva Web</option>
            <option value="server">Migración de Servidores</option>
            <option value="app">Desarrollo App Móvil</option>
          </select>
          <button class="btn btn-secondary">
            <i class="fas fa-filter"></i> Aplicar Filtros
          </button>
        </div>
        <p class="filter-note"><i class="fas fa-info-circle"></i> Los filtros requieren JavaScript para funcionar.</p>
      </section>

      <!-- Cuadrícula de Reportes -->
      <section class="reports-grid">

        <!-- Tarjetas KPI -->
        <div class="card report-widget kpi-card">
          <h4>Tareas Completadas</h4>
          <p class="kpi-period">(Últimos 30 días)</p>
          <p class="kpi-value">124</p>
          <p class="kpi-trend trend-up">
            <i class="fas fa-arrow-up"></i> 15% vs mes anterior
          </p>
        </div>

        <div class="card report-widget kpi-card">
          <h4>Proyectos a Tiempo</h4>
          <p class="kpi-period">(Total)</p>
          <p class="kpi-value">85%</p>
          <p class="kpi-trend trend-down">
            <i class="fas fa-arrow-down"></i> 5% vs último trimestre
          </p>
        </div>

        <div class="card report-widget kpi-card">
          <h4>Tiempo Promedio Tarea</h4>
          <p class="kpi-period">(Últimos 30 días)</p>
          <p class="kpi-value">2.5 días</p>
          <p class="kpi-trend trend-stable">
            <i class="fas fa-minus"></i> Sin cambios
          </p>
        </div>

        <!-- Gráficos (Placeholder) -->
        <div class="card report-widget chart-placeholder">
          <h4>Progreso General de Proyectos</h4>
          <div class="chart-area">
            <i class="fas fa-chart-pie fa-3x chart-icon"></i>
            <p>Gráfico aquí (Requiere JS)</p>
          </div>
          <p class="chart-note">Se necesita una librería JS (ej. Chart.js) para renderizar este gráfico.</p>
        </div>

        <div class="card report-widget chart-placeholder">
          <h4>Distribución de Tareas por Estado</h4>
          <div class="chart-area">
            <i class="fas fa-chart-bar fa-3x chart-icon"></i>
            <p>Gráfico aquí (Requiere JS)</p>
          </div>
          <p class="chart-note">Se necesita una librería JS (ej. Chart.js) para renderizar este gráfico.</p>
        </div>

        <!-- Reporte de tabla -->
        <div class="card report-widget table-report">
          <h4>Rendimiento del Equipo (Tareas/Mes)</h4>
          <div class="table-responsive">
            <table class="data-table">
              <thead>
                <tr>
                  <th>Miembro</th>
                  <th>Tareas Asignadas</th>
                  <th>Tareas Completadas</th>
                  <th>% Completado</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Ana García</td>
                  <td>35</td>
                  <td>32</td>
                  <td>91%</td>
                </tr>
                <tr>
                  <td>Carlos López</td>
                  <td>40</td>
                  <td>35</td>
                  <td>88%</td>
                </tr>
                <tr>
                  <td>Elena Fernández</td>
                  <td>28</td>
                  <td>28</td>
                  <td>100%</td>
                </tr>
                <tr>
                  <td>David Martínez</td>
                  <td>38</td>
                  <td>30</td>
                  <td>79%</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p class="table-note">Datos de ejemplo.</p>
        </div>

      </section>
    </main>
  </div>

  <script src="js/script.js"></script>
</body>
</html>

Explicación del código: Reportes – Dashboard HTML: Filtros, KPIs, Gráficos y Tablas

<!DOCTYPE html>
Indica al navegador que este documento usa HTML5 y activa el modo de renderizado estándar.

<html lang="es">
Elemento raíz; lang="es" señala que el contenido está en español.

<head>
Inicio de la sección de metadatos (no visible) donde se definen codificación, estilos y título.

<meta charset="UTF-8">
Establece la codificación de caracteres en UTF‑8 para mostrar correctamente acentos y símbolos.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ajusta escala y ancho al dispositivo, fundamental para diseño responsivo.

<title>Reportes - Dashboard</title>
Título que aparece en la pestaña del navegador y en marcadores.

<!-- Estilos base y de tema -->
Comentario que agrupa los enlaces a las hojas de estilo global y de tema.

<link rel="stylesheet" href="css/base.css">
Conecta la hoja de estilos base (reset, tipografías, variables).

<link rel="stylesheet" href="css/theme.css">
Importa el tema de colores y estilos generales de la interfaz.

<!-- Layout general -->
Comentario previo a los estilos de diseño estructural.

<link rel="stylesheet" href="css/layout.css">
Define rejillas, contenedores y márgenes globales.

<!-- Módulos reutilizables -->
Comentario que agrupa componentes CSS comunes.

<link rel="stylesheet" href="css/modules/header.css">
Estilos del encabezado principal.

<link rel="stylesheet" href="css/modules/navigation.css">
Estilos del menú lateral de navegación.

<link rel="stylesheet" href="css/modules/card.css">
Regla de diseño para tarjetas informativas.

<link rel="stylesheet" href="css/modules/button.css">
Define los estilos de los botones (.btn, etc.).

<!-- Clases de estado -->
Comentario para estilos según el estado de elementos (activo, deshabilitado…).

<link rel="stylesheet" href="css/state.css">
Importa clases como .active, .disabled o pseudoclases de enfoque.

<!-- Estilos específicos para la página Reportes -->
Comentario introductorio a los estilos exclusivos de esta vista.

<link rel="stylesheet" href="css/pages/reportes.css">
Hoja de estilos exclusiva para reportes.html.

<!-- Font Awesome -->
Comentario que marca la importación de la biblioteca de iconos.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Carga Font Awesome desde CDN para iconos vectoriales.

</head>
Cierra la sección de metadatos.

<body>
Inicia el contenido visible de la página.

<div class="dashboard-container">
Contenedor principal que engloba toda la interfaz tipo “dashboard”.

<button class="menu-toggle">
Botón que alterna la visibilidad del menú lateral.

<i class="fas fa-bars"></i>
Icono de “hamburguesa” de Font Awesome que representa el menú.

</button>
Cierra el botón de alternar menú.

<!-- Sidebar -->
Comentario que señala el inicio de la barra lateral.

<aside class="sidebar">
Elemento semántico que contiene el menú lateral.

<div class="logo">
Contenedor para el logotipo o icono de la aplicación.

<i class="fas fa-project-diagram fa-2x"></i>
Icono de diagrama de proyectos ampliado 2×.

</div>
Cierra el bloque del logotipo.

<nav class="menu">
Elemento de navegación principal.

<ul>
Lista desordenada de enlaces del menú.

<li><a href="index.html"><i class="fas fa-home"></i> <span>Inicio</span></a></li>
Enlace a “Inicio” con icono de casa.

<li><a href="mis_proyectos.html"><i class="fas fa-briefcase"></i> <span>Mis Proyectos</span></a></li>
Enlace a “Mis Proyectos” con icono de maletín.

<li><a href="tablero_kanban.html"><i class="fas fa-columns"></i> <span>Tablero Kanban</span></a></li>
Enlace a “Tablero Kanban” con icono de columnas.

<li><a href="calendario.html"><i class="fas fa-calendar-alt"></i> <span>Calendario</span></a></li>
Enlace a “Calendario” con icono de calendario.

<li class="active"><a href="reportes.html"><i class="fas fa-chart-bar"></i> <span>Reportes</span></a></li>
Enlace activo a “Reportes” con icono de gráfico de barras.

</ul>
Cierra la lista de navegación.

</nav>
Finaliza el bloque <nav>.

</aside>
Cierra la barra lateral.

<!-- Main Content -->
Comentario que marca el inicio del contenido principal.

<main class="main-content">
Contenedor principal para el contenido específico de esta página.

<header class="main-header">
Encabezado interno que incluye el título y el menú de usuario.

<h1>Reportes</h1>
Título visible de la sección de reportes.

<div class="user-menu">
Contenedor del menú de perfil de usuario.

<button class="user-toggle">
Botón que despliega las opciones de usuario.

<i class="fas fa-user-circle fa-lg"></i>
Icono circular de usuario, tamaño grande.

</button>
Cierra el botón de usuario.

<!-- El dropdown debe contener el UL -->
Comentario que recuerda la estructura del menú desplegable.

<div class="profile-dropdown">
Contenedor desplegable con opciones de perfil.

<ul class="profile-menu">
Lista de acciones disponibles para el usuario.

<li>
Inicio del primer elemento de la lista.

<a href="/mi-perfil.html">
Enlace a la página “Mi perfil”.

<i class="fas fa-user"></i>
Icono de perfil.

Mi perfil
Texto del enlace.

</a>
Cierra el enlace de “Mi perfil”.

</li>
Finaliza el primer elemento.

<li>
Inicio del segundo elemento.

<a href="/logout">
Enlace para cerrar sesión.

<i class="fas fa-sign-out-alt"></i>
Icono de salida.

Cerrar sesión
Texto del enlace.

</a>
Cierra el enlace de cierre de sesión.

</li>
Finaliza el segundo elemento.

</ul>
Cierra la lista de perfil.

</div>
Cierra el dropdown de perfil.

</div>
Cierra el contenedor user-menu.

</header>
Finaliza el encabezado interno.

<!-- Filtros de Reportes -->
Comentario que marca la sección de filtros.

<section class="report-filters card">
Sección con fondo de tarjeta para los controles de filtro.

<h4>Filtrar Reportes</h4>
Subtítulo de la sección de filtros.

<div class="filter-controls">
Contenedor de los elementos de filtro.

<select name="date-range" aria-label="Rango de fechas">
Desplegable para seleccionar rango de fechas, con etiqueta accesible.

<option value="30d">Últimos 30 días</option>
Opción “Últimos 30 días”.

<option value="90d">Últimos 90 días</option>
Opción “Últimos 90 días”.

<option value="year">Este Año</option>
Opción “Este Año”.

<option value="all">Todo</option>
Opción “Todo”.

</select>
Cierra el primer desplegable.

<select name="project" aria-label="Proyecto específico">
Segundo desplegable para elegir proyecto.

<option value="all">Todos los Proyectos</option>
Opción “Todos los Proyectos”.

<option value="web">Lanzamiento Nueva Web</option>
Opción “Lanzamiento Nueva Web”.

<option value="server">Migración de Servidores</option>
Opción “Migración de Servidores”.

<option value="app">Desarrollo App Móvil</option>
Opción “Desarrollo App Móvil”.

</select>
Cierra el segundo desplegable.

<button class="btn btn-secondary">
Botón secundario para aplicar filtros.

<i class="fas fa-filter"></i> Aplicar Filtros
Icono de filtro seguido del texto.

</button>
Cierra el botón de filtros.

</div>
Cierra el contenedor de controles.

<p class="filter-note"><i class="fas fa-info-circle"></i> Los filtros requieren JavaScript para funcionar.</p>
Nota informativa con icono.

</section>
Finaliza la sección de filtros.

<!-- Cuadrícula de Reportes -->
Comentario que inicia la sección de resultados.

<section class="reports-grid">
Contenedor que agrupa widgets y tablas de reportes.

<!-- Tarjetas KPI -->
Comentario que marca el bloque de indicadores clave.

<div class="card report-widget kpi-card">
Tarjeta KPI para “Tareas Completadas”.

<h4>Tareas Completadas</h4>
Título del KPI.

<p class="kpi-period">(Últimos 30 días)</p>
Periodo al que aplica.

<p class="kpi-value">124</p>
Valor numérico del KPI.

<p class="kpi-trend trend-up">
Línea de tendencia al alza.

<i class="fas fa-arrow-up"></i> 15% vs mes anterior
Icono de flecha arriba y texto comparativo.

</p>
Cierra el párrafo de tendencia.

</div>
Cierra la tarjeta KPI.

<div class="card report-widget kpi-card">
Segunda tarjeta KPI: “Proyectos a Tiempo”.

<h4>Proyectos a Tiempo</h4>
Título del KPI.

<p class="kpi-period">(Total)</p>
Periodo “Total”.

<p class="kpi-value">85%</p>
Valor porcentual.

<p class="kpi-trend trend-down">
Tendencia a la baja.

<i class="fas fa-arrow-down"></i> 5% vs último trimestre
Icono y comparación.

</p>
Cierra el párrafo de tendencia.

</div>
Cierra la tarjeta KPI.

<div class="card report-widget kpi-card">
Tercera tarjeta KPI: “Tiempo Promedio Tarea”.

<h4>Tiempo Promedio Tarea</h4>
Título del KPI.

<p class="kpi-period">(Últimos 30 días)</p>
Periodo de 30 días.

<p class="kpi-value">2.5 días</p>
Valor en días.

<p class="kpi-trend trend-stable">
Tendencia estable.

<i class="fas fa-minus"></i> Sin cambios
Icono de guion y texto.

</p>
Cierra el párrafo de tendencia.

</div>
Cierra la tarjeta KPI.

<!-- Gráficos (Placeholder) -->
Comentario para las áreas de gráfico.

<div class="card report-widget chart-placeholder">
Tarjeta de gráfico de progreso general.

<h4>Progreso General de Proyectos</h4>
Título del gráfico.

<div class="chart-area">
Contenedor del placeholder.

<i class="fas fa-chart-pie fa-3x chart-icon"></i>
Icono de gráfico de pastel ampliado.

<p>Gráfico aquí (Requiere JS)</p>
Texto informativo.

</div>
Cierra el área de gráfico.

<p class="chart-note">Se necesita una librería JS (ej. Chart.js) para renderizar este gráfico.</p>
Nota sobre requerimiento de JS.

</div>
Cierra la tarjeta de gráfico.

<div class="card report-widget chart-placeholder">
Segunda tarjeta de gráfico: distribución de tareas.

<h4>Distribución de Tareas por Estado</h4>
Título del gráfico.

<div class="chart-area">
Contenedor del placeholder.

<i class="fas fa-chart-bar fa-3x chart-icon"></i>
Icono de gráfico de barras ampliado.

<p>Gráfico aquí (Requiere JS)</p>
Texto informativo.

</div>
Cierra el área de gráfico.

<p class="chart-note">Se necesita una librería JS (ej. Chart.js) para renderizar este gráfico.</p>
Nota sobre requerimiento.

</div>
Cierra la tarjeta de gráfico.

<!-- Reporte de tabla -->
Comentario para la tabla de datos.

<div class="card report-widget table-report">
Tarjeta contenedora de la tabla de rendimiento.

<h4>Rendimiento del Equipo (Tareas/Mes)</h4>
Título de la sección de tabla.

<div class="table-responsive">
Contenedor para scroll horizontal si es necesario.

<table class="data-table">
Inicio de la tabla de datos.

<thead>
Encabezado de columnas.

<tr>
Fila de cabeceras.

<th>Miembro</th>
Columna “Miembro”.

<th>Tareas Asignadas</th>
Columna “Tareas Asignadas”.

<th>Tareas Completadas</th>
Columna “Tareas Completadas”.

<th>% Completado</th>
Columna “% Completado”.

</tr>
Cierra la fila de cabeceras.

</thead>
Finaliza el encabezado.

<tbody>
Cuerpo de la tabla con filas de datos.

<tr>
Primera fila de datos.

<td>Ana García</td>
Nombre del miembro.

<td>35</td>
Tareas asignadas.

<td>32</td>
Tareas completadas.

<td>91%</td>
Porcentaje completado.

</tr>
Cierra la fila de Ana García.

<tr>
Segunda fila de datos.

<td>Carlos López</td>
Nombre del miembro.

<td>40</td>
Tareas asignadas.

<td>35</td>
Tareas completadas.

<td>88%</td>
Porcentaje completado.

</tr>
Cierra la fila de Carlos López.

<tr>
Tercera fila de datos.

<td>Elena Fernández</td>
Nombre del miembro.

<td>28</td>
Tareas asignadas.

<td>28</td>
Tareas completadas.

<td>100%</td>
Porcentaje completado.

</tr>
Cierra la fila de Elena Fernández.

<tr>
Cuarta fila de datos.

<td>David Martínez</td>
Nombre del miembro.

<td>38</td>
Tareas asignadas.

<td>30</td>
Tareas completadas.

<td>79%</td>
Porcentaje completado.

</tr>
Cierra la fila de David Martínez.

</tbody>
Finaliza el cuerpo de la tabla.

</table>
Cierra la tabla de datos.

</div>
Cierra el contenedor table-responsive.

<p class="table-note">Datos de ejemplo.</p>
Nota aclaratoria bajo la tabla.

</div>
Cierra la tarjeta de tabla.

</section>
Finaliza la sección de grid de reportes.

</main>
Cierra el contenido principal.

</div>
Cierra el contenedor .dashboard-container.

<script src="js/script.js"></script>
Importa el archivo JavaScript que controla la interactividad y dinámicas.

</body>
Finaliza el contenido visible.

</html>
Cierra el elemento raíz y termina el documento.

reportes.css

Este archivo define los estilos de la página de reportes: ajusta el margen y padding de la sección de filtros, da formato a los controles de selección y notas informativas, organiza los widgets en una cuadrícula adaptable, estiliza las tarjetas KPI, los placeholders de gráficos y la tabla de rendimiento con colores, tipografía y efectos hover, y aplica media queries para asegurar que la tabla ocupe más columnas en pantallas grandes.

CSS Reportes: Filtros, Cuadrícula de Reportes y Estilos de Tablas

.report-filters {
  margin-bottom: 30px;
  padding: 20px;
}

.report-filters h4 {
  margin-bottom: 15px;
  font-size: 1.1rem;
  color: #e0e0e0;
  font-weight: 600;
}

.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.filter-controls select {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #3a3f47;
  background-color: #2c313a;
  color: #e0e0e0;
  font-size: 0.9rem;
  min-width: 180px;
}

.filter-controls .btn {
  margin-left: auto;
}

.filter-note {
  font-size: 0.8rem;
  color: #8a8f94;
  margin-top: 15px;
}

.filter-note i {
  margin-right: 5px;
}

.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.report-widget {
  display: flex;
  flex-direction: column;
}

.kpi-card {
  padding: 20px;
}

.kpi-card h4 {
  font-size: 1rem;
  color: #a0a4a8;
  margin-bottom: 5px;
  font-weight: 500;
}

.kpi-card .kpi-period {
  font-size: 0.75rem;
  color: #8a8f94;
  margin-bottom: 15px;
}

.kpi-card .kpi-value {
  font-size: 2.2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.1;
}

.kpi-card .kpi-trend {
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: auto;
}

.kpi-trend i {
  margin-right: 5px;
}

.kpi-trend.trend-up {
  color: #28a745;
}

.kpi-trend.trend-down {
  color: #dc3545;
}

.kpi-trend.trend-stable {
  color: #8a8f94;
}

.chart-placeholder {
  padding: 20px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
}

.chart-placeholder h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 15px;
  text-align: center;
}

.chart-placeholder .chart-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(58, 63, 71, 0.3);
  border-radius: 8px;
  border: 1px dashed #4a4f57;
  color: #8a8f94;
  text-align: center;
  padding: 20px;
}

.chart-placeholder .chart-icon {
  color: #6c63ff;
  opacity: 0.7;
  margin-bottom: 15px;
}

.chart-placeholder .chart-area p {
  font-size: 0.9rem;
  font-style: italic;
}

.chart-placeholder .chart-note {
  font-size: 0.75rem;
  color: #8a8f94;
  text-align: center;
  margin-top: 15px;
  font-style: italic;
}
  
.table-report {
  grid-column: span 1 / auto;
  padding: 0;
}

@media (min-width: 992px) {
  .table-report {
    grid-column: span 2;
  }
}

.table-report h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #e0e0e0;
  padding: 15px 20px;
  margin: 0;
  border-bottom: 1px solid #3a3f47;
}

.table-responsive {
  overflow-x: auto;
  padding: 0 0 10px 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
}

.data-table th, 
.data-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #3a3f47;
  font-size: 0.9rem;
  white-space: nowrap;
}

.data-table th {
  background-color: #2c313a;
  color: #a0a4a8;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.data-table tbody tr {
  transition: background-color 0.2s ease;
}

.data-table tbody tr:nth-child(even) {
  background-color: #2c313a;
}

.data-table tbody tr:hover {
  background-color: #3a3f47;
}

.data-table td {
  color: #c0c4c8;
}

.data-table td:last-child, 
.data-table th:last-child {
  text-align: right;
}

.table-note {
  font-size: 0.75rem;
  color: #8a8f94;
  padding: 10px 20px;
  text-align: right;
  font-style: italic;
}

Explicación del código: CSS Reportes: Filtros, Cuadrícula de Reportes y Estilos de Tablas

.report-filters { margin-bottom: 30px; padding: 20px; }
Aplica un espacio de 30 px debajo de la sección de filtros y 20 px de relleno en todos sus lados.

.report-filters h4 { margin-bottom: 15px; font-size: 1.1rem; color: #e0e0e0; font-weight: 600; }
Estiliza el título “Filtrar Reportes” con 15 px de separación inferior, tamaño de fuente ligeramente superior al estándar, color gris claro y peso seminegrita.

.filter-controls { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
Organiza los controles de filtro en línea, permite que pasen a varias filas si no caben, separa cada elemento 15 px y los alinea verticalmente al centro.

.filter-controls select { padding: 8px 12px; border-radius: 6px; border: 1px solid #3a3f47; background-color: #2c313a; color: #e0e0e0; font-size: 0.9rem; min-width: 180px; }
Da a cada desplegable un relleno cómodo, esquinas redondeadas, borde gris oscuro, fondo oscuro, texto gris, fuente algo reducida y ancho mínimo para legibilidad.

.filter-controls .btn { margin-left: auto; }
Empuja el botón de “Aplicar Filtros” hacia el extremo derecho dentro del contenedor flexible.

.filter-note { font-size: 0.8rem; color: #8a8f94; margin-top: 15px; }
Establece la nota informativa en un gris medio, con letra pequeña y 15 px de separación por encima.

.filter-note i { margin-right: 5px; }
Añade 5 px de espacio a la derecha del icono dentro de la nota para separarlo del texto.

.reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
Convierte la sección de reportes en una cuadrícula adaptable, con columnas de al menos 300 px que se distribuyen equitativamente, separadas por 25 px.

.report-widget { display: flex; flex-direction: column; }
Define cada widget (KPI, gráfico, tabla) como un contenedor flexible vertical, para apilar su contenido.

.kpi-card { padding: 20px; }
Añade un relleno uniforme de 20 px a las tarjetas de indicadores clave.

.kpi-card h4 { font-size: 1rem; color: #a0a4a8; margin-bottom: 5px; font-weight: 500; }
Estiliza el título de cada KPI con fuente de tamaño normal, gris claro, seminegrita y 5 px de espacio inferior.

.kpi-card .kpi-period { font-size: 0.75rem; color: #8a8f94; margin-bottom: 15px; }
Muestra el periodo del KPI con letra pequeña, gris medio y 15 px de separación.

.kpi-card .kpi-value { font-size: 2.2rem; font-weight: 600; color: #ffffff; margin-bottom: 10px; line-height: 1.1; }
Presenta el valor principal grande, en blanco, con espacio inferior y altura de línea ajustada para evitar saltos visuales.

.kpi-card .kpi-trend { font-size: 0.85rem; font-weight: 500; margin-top: auto; }
Coloca la tendencia al final de la tarjeta, con texto mediano y seminegrita ligera.

.kpi-trend i { margin-right: 5px; }
Separa el icono de la flecha del texto de tendencia con 5 px.

.kpi-trend.trend-up { color: #28a745; }
Asigna color verde a la tendencia positiva.

.kpi-trend.trend-down { color: #dc3545; }
Asigna color rojo a la tendencia negativa.

.kpi-trend.trend-stable { color: #8a8f94; }
Usa gris medio para indicar tendencia estable.

.chart-placeholder { padding: 20px; min-height: 250px; display: flex; flex-direction: column; }
Prepara el contenedor de gráficos con relleno, altura mínima y apilamiento vertical de sus elementos.

.chart-placeholder h4 { font-size: 1rem; font-weight: 600; color: #e0e0e0; margin-bottom: 15px; text-align: center; }
Centra y destaca el título del gráfico con color claro, peso seminegrita y separación inferior.

.chart-placeholder .chart-area { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(58, 63, 71, 0.3); border-radius: 8px; border: 1px dashed #4a4f57; color: #8a8f94; text-align: center; padding: 20px; }
Crea un área interior expansible, centrada en ambos ejes, con fondo semitransparente, bordes redondeados, línea punteada, texto gris y relleno.

.chart-placeholder .chart-icon { color: #6c63ff; opacity: 0.7; margin-bottom: 15px; }
Define el icono de gráfico con color morado suave, semitransparente y separación inferior.

.chart-placeholder .chart-area p { font-size: 0.9rem; font-style: italic; }
Estiliza el texto que indica “Gráfico aquí” con letra ligeramente pequeña e itálica.

.chart-placeholder .chart-note { font-size: 0.75rem; color: #8a8f94; text-align: center; margin-top: 15px; font-style: italic; }
Muestra la nota sobre la necesidad de JS en gris medio, centrado y en cursiva, con espacio superior.

.table-report { grid-column: span 1 / auto; padding: 0; }
Configura la tarjeta de tabla para ocupar una columna en pantallas pequeñas, sin relleno.

@media (min-width: 992px) { .table-report { grid-column: span 2; } }
En pantallas anchas (≥992 px), permite que la tarjeta de tabla ocupe dos columnas de la cuadrícula.

.table-report h4 { font-size: 1rem; font-weight: 600; color: #e0e0e0; padding: 15px 20px; margin: 0; border-bottom: 1px solid #3a3f47; }
Estiliza el título de la tabla con relleno, sin márgenes, línea divisoria y texto destacado.

.table-responsive { overflow-x: auto; padding: 0 0 10px 0; }
Permite el desplazamiento horizontal de la tabla en contenedores estrechos y añade 10 px de espacio inferior.

.data-table { width: 100%; border-collapse: collapse; margin-top: 0; }
Hace que la tabla ocupe todo el ancho de su contenedor, fusione los bordes y elimine espacio superior.

.data-table th, .data-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #3a3f47; font-size: 0.9rem; white-space: nowrap; }
Da a cada celda un relleno cómodo, alinea el contenido a la izquierda, separa filas con una línea y evita el quiebre de texto.

.data-table th { background-color: #2c313a; color: #a0a4a8; font-weight: 500; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; }
Estiliza las cabeceras con fondo oscuro, texto gris claro, seminegrita, todo en mayúsculas, letra pequeña y espaciado ligero.

.data-table tbody tr { transition: background-color 0.2s ease; }
Suaviza el cambio de fondo al interactuar con las filas de datos.

.data-table tbody tr:nth-child(even) { background-color: #2c313a; }
Aplica un fondo alternativo a las filas pares para mejorar la legibilidad.

.data-table tbody tr:hover { background-color: #3a3f47; }
Resalta la fila bajo el cursor con un gris ligeramente más claro.

.data-table td { color: #c0c4c8; }
Colorea el texto de las celdas en un gris claro para contraste sobre el fondo oscuro.

.data-table td:last-child, .data-table th:last-child { text-align: right; }
Alinea a la derecha el contenido de la última columna (tanto cabeceras como datos).

.table-note { font-size: 0.75rem; color: #8a8f94; padding: 10px 20px; text-align: right; font-style: italic; }
Estiliza la nota final de la tabla con letra pequeña, gris medio, relleno, alineación a la derecha y cursiva.

En este archivo se define la página de inicio de sesión: incluye una sección de ilustración con SVG y pie de imagen, y un formulario con campos de correo electrónico y contraseña, opciones de “Recordarme” y “¿Olvidaste tu contraseña?”, el botón de ingreso y el enlace para registrarse.

Iniciar Sesión – Gestor de Proyectos HTML: Formulario de Login e Ilustración SVG

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Iniciar Sesión - Gestor de Proyectos</title>
  <!-- Estilos comunes -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/theme.css">
  <link rel="stylesheet" href="css/layout.css">
  <link rel="stylesheet" href="css/modules/button.css">
  <!-- Estilos específicos para Login -->
  <link rel="stylesheet" href="css/pages/login.css">
  <!-- Font Awesome para íconos -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="login-page">

  <div class="login-container">
    <div class="login-illustration">
      <!-- Puedes reemplazar este SVG por el que desees o usar una imagen ilustrativa -->
      <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#574fdc;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#6c63ff;stop-opacity:1" />
            </linearGradient>
             <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#3a3f47;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#4a4f57;stop-opacity:1" />
            </linearGradient>
        </defs>
        {/* */}
        <rect width="200" height="150" rx="10" fill="#2c313a"/>

        {/* */}
        <rect x="20" y="30" width="70" height="40" rx="5" fill="url(#grad1)" opacity="0.9"/>
        <rect x="100" y="30" width="50" height="25" rx="3" fill="#4a4f57"/>
        <rect x="100" y="65" width="60" height="50" rx="5" fill="url(#grad2)"/>

        {/* */}
        <rect x="25" y="80" width="10" height="35" fill="#6c63ff" opacity="0.6"/>
        <rect x="40" y="95" width="10" height="20" fill="#6c63ff" opacity="0.7"/>
        <rect x="55" y="90" width="10" height="25" fill="#6c63ff" opacity="0.8"/>

         {/* */}
         <line x1="95" y1="45" x2="100" y2="45" stroke="#8a8f94" stroke-width="1.5"/>
         <line x1="65" y1="75" x2="100" y2="80" stroke="#8a8f94" stroke-width="1" stroke-dasharray="2 2"/>
         <circle cx="130" cy="90" r="8" fill="#6c63ff"/>
         <path d="M130 98 Q 140 115, 155 110" stroke="#574fdc" stroke-width="1.5" fill="none"/>

         {/* */}
        <text x="105" y="48" font-family="Arial, sans-serif" font-size="8" fill="#a0a4a8">Tasks</text>

    </svg>
      <p class="illustration-caption">Gestiona tus proyectos eficientemente.</p>
    </div>

    <div class="login-form-container">
      <h2>Iniciar Sesión</h2>
      <form id="login-form" action="index.html" method="get">
        <div class="form-group">
          <label for="email">Correo Electrónico</label>
          <input type="email" id="email" name="email" placeholder="tu@ejemplo.com" required>
        </div>
        <div class="form-group">
          <label for="password">Contraseña</label>
          <input type="password" id="password" name="password" placeholder="••••••••" required>
        </div>
        <div class="form-options">
          <label class="remember-me">
            <input type="checkbox" name="remember"> Recordarme
          </label>
          <a href="#" class="forgot-password">¿Olvidaste tu contraseña?</a>
        </div>
        <div class="form-actions">
          <p class="form-note">
            <i class="fas fa-info-circle"></i> El login requiere conexión a servidor.
          </p>
          <button type="submit" class="btn btn-primary btn-block">Ingresar</button>
        </div>
        <p class="signup-link">
          ¿No tienes una cuenta? <a href="#">Regístrate aquí</a>
        </p>
      </form>
    </div>
  </div>

</body>
</html>

Explicación del código: Iniciar Sesión – Gestor de Proyectos HTML: Formulario de Login e Ilustración SVG

<!DOCTYPE html>
Define el documento como HTML5, activando el modo de renderizado estándar en el navegador.

<html lang="es">
Elemento raíz; lang="es" indica que el contenido está en español.

<head>
Inicio de la sección de metadatos: codificación, enlaces a estilos y título.

<meta charset="UTF-8">
Establece la codificación de caracteres en UTF‑8 para soportar acentos y símbolos.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ajusta la escala y el ancho al dispositivo, esencial para diseño responsivo.

<title>Iniciar Sesión - Gestor de Proyectos</title>
Título de la página que aparece en la pestaña del navegador.

<!-- Estilos comunes -->
Comentario que agrupa las hojas de estilo globales.

<link rel="stylesheet" href="css/base.css">
Conecta estilos básicos: reset, tipografías y variables.

<link rel="stylesheet" href="css/theme.css">
Aplica el tema de colores y estilos globales.

<link rel="stylesheet" href="css/layout.css">
Define distribución de contenedores, grillas y márgenes.

<link rel="stylesheet" href="css/modules/button.css">
Estilos reutilizables para botones (.btn, .btn-primary, etc.).

<!-- Estilos específicos para Login -->
Comentario que introduce la hoja de estilos de la página de inicio de sesión.

<link rel="stylesheet" href="css/pages/login.css">
Reglas CSS exclusivas para el formulario de login.

<!-- Font Awesome para íconos -->
Indica la importación de la biblioteca de iconos.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Carga Font Awesome desde CDN para disponer de iconos vectoriales.

</head>
Cierra la sección de metadatos.

<body class="login-page">
Inicia el contenido visible; la clase login-page permite estilos específicos.

<div class="login-container">
Contenedor principal que agrupa ilustración y formulario.

<div class="login-illustration">
Sección de la ilustración SVG a la izquierda o arriba.

<!-- Puedes reemplazar este SVG… -->
Comentario que sugiere personalizar la ilustración.

<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
Comienza un gráfico vectorial escalable para ilustración.

<defs>
Define degradados y estilos internos del SVG.

<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
Degradado de color diagonal de #574fdc a #6c63ff.

<stop offset="0%" style="stop-color:#574fdc;stop-opacity:1" />
Inicio del degradado con color púrpura oscuro.

<stop offset="100%" style="stop-color:#6c63ff;stop-opacity:1" />
Final del degradado con púrpura claro.

</linearGradient>
Cierra grad1.

<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
Define un segundo degradado de gris oscuro a gris medio.

<stop offset="0%" style="stop-color:#3a3f47;stop-opacity:1" />
Inicio del degradado gris oscuro.

<stop offset="100%" style="stop-color:#4a4f57;stop-opacity:1" />
Final del degradado gris medio.

</linearGradient>
Cierra grad2.

</defs>
Fin de las definiciones.

<rect width="200" height="150" rx="10" fill="#2c313a"/>
Dibuja un rectángulo base con esquinas redondeadas y fondo oscuro.

<rect x="20" y="30" width="70" height="40" rx="5" fill="url(#grad1)" opacity="0.9"/>
Rectángulo superior izquierdo con degradado púrpura.

<rect x="100" y="30" width="50" height="25" rx="3" fill="#4a4f57"/>
Rectángulo gris medio con esquinas suaves.

<rect x="100" y="65" width="60" height="50" rx="5" fill="url(#grad2)"/>
Rectángulo con degradado gris en la mitad derecha.

<rect x="25" y="80" width="10" height="35" fill="#6c63ff" opacity="0.6"/>
Barra vertical púrpura semitransparente.

<rect x="40" y="95" width="10" height="20" fill="#6c63ff" opacity="0.7"/>
Segunda barra superpuesta.

<rect x="55" y="90" width="10" height="25" fill="#6c63ff" opacity="0.8"/>
Tercera barra, variando opacidad.

<line x1="95" y1="45" x2="100" y2="45" stroke="#8a8f94" stroke-width="1.5"/>
Línea horizontal gris claro.

<line x1="65" y1="75" x2="100" y2="80" stroke="#8a8f94" stroke-width="1" stroke-dasharray="2 2"/>
Línea punteada que conecta dos rectángulos.

<circle cx="130" cy="90" r="8" fill="#6c63ff"/>
Círculo púrpura que aporta dinamismo.

<path d="M130 98 Q 140 115, 155 110" stroke="#574fdc" stroke-width="1.5" fill="none"/>
Curva decorativa en púrpura oscuro.

<text x="105" y="48" font-family="Arial, sans-serif" font-size="8" fill="#a0a4a8">Tasks</text>
Texto “Tasks” sobre la ilustración.

</svg>
Cierra el SVG.

<p class="illustration-caption">Gestiona tus proyectos eficientemente.</p>
Pie de ilustración con mensaje motivador.

</div>
Cierra la sección de ilustración.

<div class="login-form-container">
Contenedor para el formulario de inicio de sesión.

<h2>Iniciar Sesión</h2>
Título de la sección de login.

<form id="login-form" action="index.html" method="get">
Formulario que, al enviar, redirige a index.html (método GET).

<div class="form-group">
Agrupa etiqueta e input del email.

<label for="email">Correo Electrónico</label>
Asocia la etiqueta al campo de email.

<input type="email" id="email" name="email" placeholder="tu@ejemplo.com" required>
Campo de email obligatorio con marcador de posición.

</div>
Cierra el grupo de email.

<div class="form-group">
Agrupa etiqueta e input de la contraseña.

<label for="password">Contraseña</label>
Etiqueta asociada al campo de contraseña.

<input type="password" id="password" name="password" placeholder="••••••••" required>
Campo password obligatorio con placeholder de puntos.

</div>
Cierra el grupo de contraseña.

<div class="form-options">
Bloque para opciones adicionales del formulario.

<label class="remember-me">
Etiqueta estilizada para “Recordarme”.

<input type="checkbox" name="remember"> Recordarme
Casilla para que el usuario permanezca conectado.

</label>
Cierra la etiqueta de “Recordarme”.

<a href="#" class="forgot-password">¿Olvidaste tu contraseña?</a>
Enlace para recuperar contraseña.

</div>
Cierra el bloque de opciones.

<div class="form-actions">
Contenedor de notas y botón de envío.

<p class="form-note">
Párrafo informativo sobre requerimientos.

<i class="fas fa-info-circle"></i> El login requiere conexión a servidor.
Icono y texto que advierten de dependencia de backend.

</p>
Cierra la nota.

<button type="submit" class="btn btn-primary btn-block">Ingresar</button>
Botón principal de envío, ocupa todo el ancho del contenedor.

</div>
Cierra el bloque de acciones.

<p class="signup-link">
Párrafo con enlace para registro.

¿No tienes una cuenta? <a href="#">Regístrate aquí</a>
Invitación a crear una cuenta.

</p>
Cierra el párrafo de registro.

</form>
Finaliza el formulario de login.

</div>
Cierra el contenedor del formulario.

</div>
Cierra el contenedor general login-container.

</body>
Cierra el cuerpo del documento.

</html>
Cierra el elemento raíz y finaliza el documento.

Este archivo define los estilos de la página de inicio de sesión: establece el fondo oscuro y el diseño flex para el contenedor, da formato a la ilustración SVG y al formulario, estiliza campos de entrada, botones y opciones de “Recordarme” y “¿Olvidaste tu contraseña?”, añade transiciones y efectos de foco, y aplica media queries para asegurar una buena experiencia en móviles.

CSS Login: Contenedor, Ilustración y Formulario Responsivo

.login-page {
  background-color: #1a1d21;
}

.login-container {
  display: flex;
  background-color: #252a31;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  max-width: 950px;
  width: 100%;
  margin: auto; 
}

.login-illustration {
  flex: 1;
  background-color: #2c313a;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #3a3f47;
}
.login-illustration svg {
  max-width: 100%;
  height: auto;
  max-height: 300px;
}
.illustration-caption {
  margin-top: 20px;
  color: #a0a4a8;
  font-size: 0.9rem;
  text-align: center;
}

.login-form-container {
  flex: 1;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-form-container h2 {
  text-align: center;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 30px;
}

.login-form-container .form-group {
  margin-bottom: 20px;
}
.login-form-container label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #a0a4a8;
}

.login-form-container input[type="email"],
.login-form-container input[type="password"] {
  width: 100%;
  padding: 12px 15px;
  background-color: #2c313a;      
  border: 1px solid #3a3f47;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-form-container input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.3);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  font-size: 0.85rem;
}
.remember-me {
  display: flex;
  align-items: center;
  color: #a0a4a8;
}
.remember-me input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.1);
  accent-color: var(--accent-color);
}
.forgot-password {
  color: #8a81ff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.forgot-password:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #3a3f47;
}
.form-actions .form-note {
  font-size: 0.8rem;
  color: #8a8f94;
  margin: 0;
}
.form-actions .form-note i {
  margin-right: 5px;
}

.btn-block {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  font-weight: 600;
}

.signup-link {
  text-align: center;
  margin-top: 25px;
  font-size: 0.9rem;
  color: #a0a4a8;
}
.signup-link a {
  color: #8a81ff;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}
.signup-link a:hover {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
    max-width: 500px;
  }
  .login-illustration {
    border-right: none;
    border-bottom: 1px solid #3a3f47;
    padding: 30px;
    min-height: 200px;
  }
  .login-form-container {
    padding: 40px 30px;
  }
  .login-form-container h2 {
    font-size: 1.6rem;
    margin-bottom: 25px;
  }
}

@media (max-width: 480px) {
  .login-form-container {
    padding: 30px 20px;
  }
  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .btn-block {
    padding: 12px;
    font-size: 0.95rem;
  }
  .signup-link {
    font-size: 0.85rem;
  }
}

Explicación del código: CSS Login: Contenedor, Ilustración y Formulario Responsivo

.login-page { background-color: #1a1d21; }
Define el fondo de toda la página de login en un gris muy oscuro (#1a1d21).

.login-container { … }
Convierte el contenedor del login en un flexbox horizontal, con fondo gris oscuro, esquinas redondeadas (12 px), sombreado pronunciado, recorte de contenido desbordado, ancho máximo de 950 px centrado automáticamente y ocupando el 100 % disponible.

.login-illustration { … }
Asigna al área de ilustración la mitad del espacio (flex:1), fondo gris, 40 px de relleno, flexbox vertical centrado (columna), alineación central y separa del formulario con un borde derecho.

.login-illustration svg { max-width: 100%; height: auto; max-height: 300px; }
Ajusta el SVG para que nunca exceda el ancho de su contenedor, escale proporcionalmente y tenga un alto máximo de 300 px.

.illustration-caption { margin-top: 20px; color: #a0a4a8; font-size: 0.9rem; text-align: center; }
Muestra el texto bajo la ilustración con 20 px de separación, gris claro, tamaño ligeramente reducido y centrado.

.login-form-container { … }
Reserva la otra mitad del contenedor para el formulario (flex:1), con 50 px arriba/abajo y 40 px lateral de relleno, flexbox vertical centrado.

.login-form-container h2 { … }
Centra el título “Iniciar Sesión”, lo pinta de blanco, tamaño 1.8 rem, peso seminegrita y 30 px de margen inferior.

.login-form-container .form-group { margin-bottom: 20px; }
Separa cada grupo de etiqueta + campo con 20 px de espacio inferior.

.login-form-container label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: #a0a4a8; }
Convierte cada etiqueta en bloque, añade 8 px de espacio bajo ella, letra de 0.9 rem y color gris.

.login-form-container input[type="email"], input[type="password"] { … }
Define campos de entrada que ocupan el 100 % del ancho, con 12 × 15 px de relleno, fondo gris oscuro, borde gris medio, esquinas redondeadas (6 px), texto gris claro, fuente de 0.95 rem y transición suave de borde y sombra.

.login-form-container input:focus { … }
Al enfocar un campo, quita el outline, cambia el borde al color de acento y añade un halo semitransparente púrpura.

.form-options { … }
Organiza las opciones (checkbox + enlace) en flex horizontal, separándolas y alineándolas al centro, con 25 px de espacio inferior y letra de 0.85 rem.

.remember-me { display: flex; align-items: center; color: #a0a4a8; }
Agrupa el checkbox y su texto en línea, centrándolos verticalmente y coloreándolos de gris.

.remember-me input[type="checkbox"] { margin-right: 8px; transform: scale(1.1); accent-color: var(--accent-color); }
Aumenta ligeramente el tamaño del checkbox, añade 8 px de separación a la derecha y le aplica el color de acento.

.forgot-password { color: #8a81ff; text-decoration: none; transition: color 0.2s ease; }
Enlace de “¿Olvidaste…?” en violeta claro sin subrayado, con transición suave de color.

.forgot-password:hover { color: var(--accent-color); text-decoration: underline; }
Al pasar el ratón, cambia al color de acento y añade subrayado.

.form-actions { … }
Contenedor con flex que separa nota y botón, permite wrap, huecos de 15 px, 25 px de margen superior, 20 px de padding superior y línea divisoria gris.

.form-actions .form-note { font-size: 0.8rem; color: #8a8f94; margin: 0; }
Nota informativa pequeña, gris medio y sin márgenes.

.form-actions .form-note i { margin-right: 5px; }
Icono de la nota con 5 px de espacio a la derecha.

.btn-block { width: 100%; padding: 14px; font-size: 1rem; font-weight: 600; }
Botón de envío que ocupa todo el ancho, con 14 px de relleno, texto de 1 rem y peso seminegrita.

.signup-link { text-align: center; margin-top: 25px; font-size: 0.9rem; color: #a0a4a8; }
Texto de invitación al registro centrado, gris y con 25 px de separación superior.

.signup-link a { color: #8a81ff; font-weight: 500; text-decoration: none; transition: color 0.2s ease; }
Enlace de registro en violeta medio, seminegrita y sin subrayado, con transición de color.

.signup-link a:hover { color: var(--accent-color); }
Al pasar el cursor, cambia al color de acento.

@media (max-width: 768px) { … }
En pantallas ≤768 px, convierte el contenedor en columna, reduce el ancho máximo a 500 px, mueve el borde de la ilustración a abajo (y lo hace horizontal), ajusta padding de ilustración a 30 px con altura mínima de 200 px, y reduce los padding del formulario a 40 × 30 px y el título a 1.6 rem con 25 px de margen inferior.

@media (max-width: 480px) { … }
En pantallas ≤480 px, ajusta padding del formulario a 30 × 20 px, convierte las opciones en columna con alineación a la izquierda y hueco de 10 px, reduce el padding y fuente del botón de envío, y disminuye el tamaño de letra del enlace de registro a 0.85 rem.

registrarse.html

En este archivo se define la página de registro: incluye una sección de ilustración con SVG y mensaje de bienvenida, y un formulario con campos para nombre completo, correo electrónico, contraseña y confirmación, un checkbox para aceptar términos, el botón “Crear Cuenta” y el enlace para iniciar sesión si ya tienes cuenta.

Registrarse – Gestor de Proyectos HTML: Formulario de Registro e Ilustración

.login-page {
  background-color: #1a1d21;
  display: flex; 
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.login-container {
  display: flex;              
  flex-direction: row;       
  max-width: 950px;
  width: 100%;
  background-color: #252a31;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.login-illustration {
  flex: 1;                     
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #2c313a;
  padding: 40px;
  border-right: 1px solid #3a3f47;
}

.login-illustration svg {
  max-width: 100%;
  height: auto;
  max-height: 300px;
}

.illustration-caption {
  margin-top: 20px;
  color: #a0a4a8;
  font-size: 0.9rem;
  text-align: center;
}

.login-form-container {
  flex: 1; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 40px;
}

.login-form-container h2 {
  text-align: center;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #a0a4a8;
}

.login-form-container input[type="text"],
.login-form-container input[type="email"],
.login-form-container input[type="password"] {
  width: 100%;
  padding: 12px 15px;
  background-color: #2c313a;
  border: 1px solid #3a3f47;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-form-container input:hover {
  border-color: #4a4f57;
}

.login-form-container input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.3);
}

.terms-group {
  margin-top: 5px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: #a0a4a8;
  display: flex;
  align-items: center;
}

.terms-group input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.1);
  accent-color: var(--accent-color);
}

.terms-group a {
  color: #8a81ff;
  text-decoration: none;
  margin-left: 4px;
  transition: color 0.2s ease;
}

.terms-group a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #3a3f47;
}

.form-actions .form-note {
  font-size: 0.8rem;
  color: #8a8f94;
  margin: 0;
}

.form-actions .form-note i {
  margin-right: 5px;
}

.btn-block {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--accent-color);
  background: linear-gradient(90deg, #574fdc, #6c63ff);
  color: #ffffff;
  border-radius: 8px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.btn-block:hover {
  background: linear-gradient(90deg, #6c63ff, #574fdc);
  box-shadow: 0 4px 8px rgba(108, 99, 255, 0.4);
  border-color: #6c63ff;
}

.login-link {
  text-align: center;
  margin-top: 25px;
  font-size: 0.9rem;
  color: #a0a4a8;
}

.login-link a {
  color: #8a81ff;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-link a:hover {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
    max-width: 500px;
  }
  .login-illustration {
    border-right: none;
    border-bottom: 1px solid #3a3f47;
    padding: 30px;
    min-height: 200px;
  }
  .login-form-container {
    padding: 40px 30px;
  }
  .login-form-container h2 {
    font-size: 1.6rem;
    margin-bottom: 25px;
  }
}

@media (max-width: 480px) {
  .login-form-container {
    padding: 30px 20px;
  }
  .btn-block {
    padding: 12px;
    font-size: 0.95rem;
  }
  .login-link {
    font-size: 0.85rem;
  }
}

Explicación del código: Registrarse – Gestor de Proyectos HTML: Formulario de Registro e Ilustración

<!DOCTYPE html>
Define el documento como HTML5, activando el modo de renderizado estándar del navegador.

<html lang="es">
Inicia el elemento raíz y especifica que el contenido está en español.

<head>
Comienza la sección de metadatos: codificación, enlaces a estilos y título.

<meta charset="UTF-8">
Establece la codificación de caracteres en UTF‑8, garantizando la correcta visualización de acentos y símbolos.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ajusta la escala y el ancho de la página al dispositivo, esencial para el diseño responsivo.

<title>Registrarse - Gestor de Proyectos</title>
Texto que aparece en la pestaña del navegador y en los marcadores.

<!-- Estilos comunes -->
Comentario que agrupa las hojas de estilo globales.

<link rel="stylesheet" href="css/base.css">
Importa estilos básicos: reset, tipografías y variables CSS.

<link rel="stylesheet" href="css/theme.css">
Aplica el tema de colores y estilos generales.

<link rel="stylesheet" href="css/layout.css">
Define la disposición de grillas, contenedores y márgenes globales.

<link rel="stylesheet" href="css/modules/button.css">
Carga los estilos reutilizables para los botones de la interfaz.

<!-- Estilos específicos para el registro -->
Comentario que introduce la hoja de estilos propia de la página de registro.

<link rel="stylesheet" href="css/pages/registrarse.css">
Importa reglas CSS exclusivas para registrarse.html.

<!-- Font Awesome para íconos -->
Indica la importación de la biblioteca de iconos vectoriales.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Carga Font Awesome desde un CDN para disponer de iconos.

</head>
Finaliza la sección de metadatos.

<body class="login-page">
Inicia el contenido visible, aplicando la clase login-page para estilos de fondo.

<div class="login-container">
Contenedor principal que agrupa la ilustración y el formulario.

<!-- Ilustración -->
Comentario que señala el bloque de la ilustración SVG.

<div class="login-illustration">
Sección donde se inserta la ilustración que acompaña al formulario.

<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
Elemento SVG escalable con un lienzo de 200×150 unidades.

<defs>
Define degradados y otros recursos reutilizables dentro del SVG.

<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
Comienza un degradado diagonal de color púrpura.

<stop offset="0%" style="stop-color:#574fdc;stop-opacity:1" />
Define el inicio del degradado con color vino.

<stop offset="100%" style="stop-color:#6c63ff;stop-opacity:1" />
Define el fin del degradado con púrpura claro.

</linearGradient>
Cierra el primer degradado.

<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
Inicia un segundo degradado de gris oscuro a gris medio.

<stop offset="0%" style="stop-color:#3a3f47;stop-opacity:1" />
Color inicial del degradado gris oscuro.

<stop offset="100%" style="stop-color:#4a4f57;stop-opacity:1" />
Color final del degradado gris medio.

</linearGradient>
Cierra el segundo degradado.

</defs>
Fin de las definiciones dentro del SVG.

<rect width="200" height="150" rx="10" fill="#2c313a"/>
Dibuja un rectángulo base con esquinas redondeadas y fondo oscuro.

<rect x="20" y="30" width="70" height="40" rx="5" fill="url(#grad1)" opacity="0.9"/>
Superpone un rectángulo púrpura degradado en la esquina superior izquierda.

<rect x="100" y="30" width="50" height="25" rx="3" fill="#4a4f57"/>
Añade un rectángulo gris medio en la parte superior derecha.

<rect x="100" y="65" width="60" height="50" rx="5" fill="url(#grad2)"/>
Inserta otro rectángulo con degradado gris en la parte central-derecha.

<rect x="25" y="80" width="10" height="35" fill="#6c63ff" opacity="0.6"/>
Dibuja una barra violeta semitransparente en la parte inferior izquierda.

<rect x="40" y="95" width="10" height="20" fill="#6c63ff" opacity="0.7"/>
Segundo elemento de barra con diferente opacidad.

<rect x="55" y="90" width="10" height="25" fill="#6c63ff" opacity="0.8"/>
Tercera barra con opacidad ligeramente mayor.

<line x1="95" y1="45" x2="100" y2="45" stroke="#8a8f94" stroke-width="1.5"/>
Traza una línea horizontal gris que conecta dos rectángulos.

<line x1="65" y1="75" x2="100" y2="80" stroke="#8a8f94" stroke-width="1" stroke-dasharray="2 2"/>
Línea punteada que aporta dinamismo al gráfico.

<circle cx="130" cy="90" r="8" fill="#6c63ff"/>
Dibuja un círculo violeta para dar contraste.

<path d="M130 98 Q 140 115, 155 110" stroke="#574fdc" stroke-width="1.5" fill="none"/>
Curva decorativa en color púrpura oscuro sin relleno.

<text x="105" y="48" font-family="Arial, sans-serif" font-size="8" fill="#a0a4a8">Tasks</text>
Añade la palabra “Tasks” sobre el SVG con tipografía legible.

</svg>
Cierra el elemento SVG.

<p class="illustration-caption">Únete y empieza a gestionar tus proyectos.</p>
Pie de ilustración con mensaje motivador.

</div>
Finaliza el bloque de ilustración.

<!-- Formulario de registro -->
Comentario que marca el inicio del formulario de registro.

<div class="login-form-container">
Contenedor para el formulario de creación de cuenta.

<h2>Crear Nueva Cuenta</h2>
Título principal de la sección de registro.

<form id="signup-form" action="index.html" method="post">
Formulario que enviará datos al servidor vía POST y luego redirige a index.html.

<div class="form-group">
Agrupa etiqueta e input del nombre completo.

<label for="signup-fullname">Nombre Completo</label>
Etiqueta vinculada al campo de nombre.

<input type="text" id="signup-fullname" name="fullname" placeholder="Tu nombre y apellido" required>
Campo de texto obligatorio para el nombre completo.

</div>
Cierra el grupo de nombre.

<div class="form-group">
Agrupa etiqueta e input del correo electrónico.

<label for="signup-email">Correo Electrónico</label>
Etiqueta del campo de email.

<input type="email" id="signup-email" name="email" placeholder="tu@ejemplo.com" required>
Campo de email obligatorio con marcador de posición.

</div>
Cierra el grupo de email.

<div class="form-group">
Agrupa etiqueta e input de la contraseña.

<label for="signup-password">Contraseña</label>
Etiqueta del campo de contraseña.

<input type="password" id="signup-password" name="password" placeholder="Crea una contraseña segura" required>
Campo password obligatorio para crear clave.

</div>
Cierra el grupo de contraseña.

<div class="form-group">
Agrupa etiqueta e input de confirmación de contraseña.

<label for="signup-confirm-password">Confirmar Contraseña</label>
Etiqueta del campo de confirmación.

<input type="password" id="signup-confirm-password" name="confirm-password" placeholder="Repite la contraseña" required>
Campo password obligatorio para verificar coincidencia.

</div>
Cierra el grupo de confirmación.

<div class="form-group terms-group">
Agrupa el checkbox de aceptación de términos.

<label class="remember-me">
Etiqueta que contiene el checkbox y su texto.

<input type="checkbox" name="terms" required>
Casilla obligatoria para aceptar Términos y Condiciones.

Acepto los <a href="#" target="_blank">Términos y Condiciones</a>
Texto del label con enlace a términos en nueva pestaña.

</label>
Cierra la etiqueta del checkbox.

</div>
Finaliza el grupo de términos.

<div class="form-actions">
Contenedor de la nota informativa y el botón de envío.

<p class="form-note"><i class="fas fa-info-circle"></i> El registro requiere conexión a servidor.</p>
Nota con icono que indica dependencia de backend.

<button type="submit" class="btn btn-primary btn-block">Crear Cuenta</button>
Botón principal que envía el formulario y ocupa todo el ancho.

</div>
Cierra el bloque de acciones.

<p class="login-link">¿Ya tienes una cuenta? <a href="login.html">Inicia Sesión</a></p>
Enlace para volver al formulario de login si ya existe cuenta.

</form>
Finaliza el formulario de registro.

</div>
Cierra el contenedor del formulario.

</div>
Cierra el contenedor general login-container.

</body>
Finaliza el contenido visible de la página.

</html>
Cierra el elemento raíz y termina el documento HTML.

registrarse.css

Este archivo define los estilos de la página de registro: centra vertical y horizontalmente el contenedor, organiza en flex la ilustración SVG y el formulario, aplica fondos oscuros, bordes redondeados y sombras, estiliza campos de entrada, gradientes y transiciones en botones, controla estados de hover y adapta el diseño con media queries para asegurar su correcta visualización en distintos tamaños de pantalla.

CSS Registro/Login: Contenedor, Ilustración SVG y Formulario Responsivo

Estás viendo solo el 60% del contenido. Hazte Premium para acceder al tutorial completo.

← Volver a Tutoriales

Comunidad

Comentarios y valoraciones

No hay comentarios aún. ¡Sé el primero en opinar!