/* =============================================================================
   ESD LAB - página dashboard (templates/dashboard.html): hero, stats,
   actividad reciente, gráfico "Registros por mes". Movido tal cual desde
   static/styles.css (A7.5), sin cambiar ningún valor ni selector —
   incluye 2 piezas que vivían sueltas en el grab-bag "Mi cuenta" del
   archivo viejo (confirmado con grep: `.dashboard-section-header` y
   `.dashboard-activity-link` solo existen en templates/dashboard.html),
   igual que el bloque de calendario encontrado ahí en A7.4.
   `.dashboard-container`/`-section`/`-title`/`-subtitle` NO están acá:
   son compartidas por account.html/404.html también, viven en
   components/index.css (encontrado por una regresión visual real, ver
   ese archivo). */

/* Hero del Dashboard */
.dashboard-hero {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(241, 244, 248, 0.95) 100%);
  border: 1px solid var(--esd-border-dark);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.dashboard-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--esd-orange) 0%, var(--esd-orange-light) 100%);
}

.dashboard-hero-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.dashboard-hero-text {
  flex: 1;
}

.dashboard-title-icon {
  font-size: 2.5rem;
  color: var(--esd-orange);
}

.dashboard-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dashboard-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 12px;
  transition: all var(--transition-normal);
}

.dashboard-action-btn .material-symbols-rounded {
  font-size: 20px;
}

.dashboard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.dashboard-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--esd-text-dark);
  margin: 0;
}

.dashboard-section-title .material-symbols-rounded {
  font-size: 28px;
  color: var(--esd-orange);
}

/* Tarjetas de Estadísticas */
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.dashboard-stat-card {
  background: var(--esd-surface-dark-2);
  border: 1px solid var(--esd-border-dark);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.dashboard-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--esd-orange);
  transform: scaleY(0);
  transition: transform var(--transition-normal);
}

.dashboard-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--esd-orange);
}

.dashboard-stat-card:hover::before {
  transform: scaleY(1);
}

.dashboard-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.dashboard-stat-icon .material-symbols-rounded {
  font-size: 28px;
  color: white;
}

.dashboard-stat-icon-projects {
  background: linear-gradient(135deg, var(--esd-orange) 0%, var(--esd-orange-light) 100%);
}

.dashboard-stat-icon-participants {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

.dashboard-stat-icon-sessions {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
}

.dashboard-stat-icon-import {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

.dashboard-stat-card:hover .dashboard-stat-icon {
  transform: scale(1.1) rotate(5deg);
}

.dashboard-stat-content {
  flex: 1;
  min-width: 0;
}

.dashboard-stat-label {
  font-size: 0.875rem;
  color: var(--esd-text-medium);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.dashboard-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--esd-text-dark);
  line-height: 1;
}

.dashboard-stat-value-small {
  font-size: 1.1rem;
  font-weight: 700;
  word-break: break-word;
}

/* Actividad Reciente - Grid Layout */
.dashboard-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .dashboard-activity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dashboard-activity-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1400px) {
  .dashboard-activity-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dashboard-activity-card {
  background: var(--esd-surface-dark-2);
  border: 1px solid var(--esd-border-dark);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.dashboard-activity-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--esd-orange);
}

.dashboard-activity-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.dashboard-activity-card-project {
  font-size: 1rem;
  font-weight: 700;
  color: var(--esd-text-dark);
  margin: 0;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.dashboard-activity-card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.dashboard-activity-badge {
  background: linear-gradient(135deg, var(--esd-orange) 0%, var(--esd-orange-light) 100%);
  color: white;
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.dashboard-activity-card-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dashboard-activity-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--esd-text-medium);
  line-height: 1.4;
}

.dashboard-activity-detail .material-symbols-rounded {
  font-size: 16px;
  color: var(--esd-orange);
  flex-shrink: 0;
}

/* Barra de progreso */
.dashboard-activity-progress {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--esd-border-dark);
}

.dashboard-activity-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
  gap: 0.5rem;
}

.dashboard-activity-progress-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--esd-text-dark);
  white-space: nowrap;
}

.dashboard-activity-progress-percentage {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--esd-orange);
  white-space: nowrap;
}

.dashboard-activity-progress-bar {
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dashboard-activity-progress-fill {
  width: var(--progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--esd-orange) 0%, var(--esd-orange-light) 100%);
  border-radius: 8px;
  transition: width 0.4s ease;
  position: relative;
  min-width: 8px;
  box-shadow: 0 0 4px rgba(61, 107, 150, 0.4);
}

.dashboard-activity-file-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

.dashboard-activity-file-badge-raw {
  background: rgba(37, 99, 235, 0.15);
  color: #2563eb;
}

.dashboard-activity-file-badge-processed {
  background: rgba(22, 163, 74, 0.15);
  color: #16a34a;
}

.dashboard-empty-state {
  background: var(--esd-surface-dark-2);
  border: 1px solid var(--esd-border-dark);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
}

.dashboard-empty-icon {
  font-size: 4rem;
  color: var(--esd-text-light);
  margin-bottom: 1rem;
  opacity: 0.5;
}

.dashboard-empty-text {
  color: var(--esd-text-medium);
  font-size: 1rem;
  margin: 0;
}

/* Gráfico de Actividad */
.dashboard-chart-container {
  background: var(--esd-surface-dark-2);
  border: 1px solid var(--esd-border-dark);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.dashboard-chart-wrapper {
  position: relative;
  height: 320px;
  width: 100%;
}

.dashboard-chart-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* El wrapper del periodo no altera el layout flex (label+select como hijos directos) */
.dashboard-chart-range {
  display: contents;
}

.dashboard-chart-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--esd-text-medium);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

.dashboard-chart-label .material-symbols-rounded {
  font-size: 20px;
  color: var(--esd-orange);
}

.dashboard-chart-select {
  padding: 0.5rem 1rem;
  border: 2px solid var(--esd-border-dark);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--esd-text-dark);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 180px;
}

.dashboard-chart-select:focus {
  outline: none;
  border-color: var(--esd-orange);
  box-shadow: 0 0 0 3px rgba(61, 107, 150, 0.12);
}

.dashboard-chart-select:hover {
  border-color: var(--esd-orange);
}

/* Responsive */
@media (max-width: 767.98px) {
  .dashboard-hero {
    padding: 1.75rem;
  }

  .dashboard-title-icon {
    font-size: 2rem;
  }

  .dashboard-stats-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-chart-wrapper {
    height: 280px;
  }

  .dashboard-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 575.98px) {
  .dashboard-hero {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .dashboard-hero-content {
    gap: 1rem;
  }

  /* Acciones del hero: pills que envuelven (sin scroll horizontal; iOS-safe) */
  .dashboard-hero-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .dashboard-action-btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
    padding: 0.6rem 1rem;
  }

  .dashboard-stat-card {
    padding: 1.25rem;
  }

  .dashboard-activity-card {
    padding: 1rem;
  }
}

/* Estas 2 piezas vivían sin divisor propio dentro de la sección "Mi
   cuenta" del styles.css viejo — mismo grab-bag que ya escondía CSS de
   calendario (encontrado en A7.4) y de users/project_detail (todavía
   sin triar, les toca a sus propias sub-iteraciones). Confirmadas de
   dashboard.html con grep antes de moverlas. */

/* Botones con icono alineados en headers de sección */
.dashboard-section-header .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.dashboard-section-header .btn .material-symbols-rounded {
  font-size: 1.1rem;
  line-height: 1;
}

/* Actividad reciente: tarjetas clicables que llevan al registro */
.dashboard-activity-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  transition: transform var(--transition-fast);
}
.dashboard-activity-link:hover {
  color: inherit;
  transform: translateY(-2px);
}
.dashboard-activity-link:hover .dashboard-activity-card {
  box-shadow: var(--shadow-md);
}
.dashboard-activity-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61, 107, 150, 0.35);
}
.dashboard-activity-link .dashboard-activity-card { height: 100%; }

/* Guard de hover (dispositivos táctiles): dividido del selector
   compuesto original en FASE 1 (styles.css), que mezclaba .card/
   .projects-card/.audit-logs-stat-card/.esd-nav junto con estos 3
   selectores de dashboard — misma declaración, separados en dos reglas
   para no arrastrar selectores de páginas todavía sin migrar. El resto
   sigue en styles.css hasta que le toque su propia sub-iteración. */
@media (hover: none) {
  .dashboard-stat-card:hover,
  .dashboard-activity-card:hover,
  .dashboard-activity-link:hover .dashboard-activity-card {
    transform: none;
  }
}

/* =============================================================================
   FASE 3 - Reestructura del Dashboard en móvil
   ============================================================================= */
@media (max-width: 767.98px) {
  /* "Esta semana" como agenda: una columna, solo días con reservas + hoy */
  .week-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .week-day-empty:not(.week-day-today) {
    display: none;
  }

  .week-day {
    min-height: 0;
    padding: 0.75rem;
  }

  /* Actividad reciente: limitar el título a 2 líneas */
  .dashboard-activity-card-project {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Controles del gráfico: una fila, etiquetas ocultas (a11y), selects compactos */
  .dashboard-chart-controls {
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
  }

  .dashboard-chart-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .dashboard-chart-select {
    flex: 1 1 0;
    min-width: 0;
    font-size: 1rem;
  }

  .dashboard-chart-wrapper {
    height: min(60vw, 280px);
  }
}