/* =============================================================================
   ESD LAB - página account (templates/account.html): hero de perfil
   con avatar y badge animado, paneles de proyectos, agenda de
   reservas de hoy, feed de actividad reciente. Movido tal cual desde
   static/styles.css (A7.13, décima y última página de la sub-división
   de A7 "Mover reglas de página sin cambiar selectores"), sin cambiar
   ningún valor ni selector.

   Esta sección venía siendo, desde A7.4, "el grab-bag más grande":
   no porque estuviera desordenada en sí misma, sino porque el archivo
   viejo escondía, pegado sin divisor propio después de "Mi cuenta",
   CSS ajeno de calendar (extraído en A7.4), dashboard (A7.5), users
   (A7.7) y project_detail (A7.11). Con esas 4 sub-iteraciones ya
   resueltas, lo que queda acá es, confirmado con el chequeo inverso
   completo contra los 13 templates restantes, genuinamente exclusivo
   de account.html — incluye @keyframes esd-pulse (usado una sola vez,
   por su propia regla, verificado explícitamente que no es compartido
   con ninguna otra página, a diferencia de slideUp/spin en A7.9).
   ============================================================================= */

.account-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, var(--esd-surface-dark-2) 0%, var(--esd-beige-light) 100%);
  border: 2px solid var(--esd-border-dark);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.account-avatar {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--esd-orange) 0%, var(--esd-orange-light) 100%);
  box-shadow: 0 6px 16px rgba(61, 107, 150, 0.35);
}
.account-hero-info { flex: 1; min-width: 0; }
.account-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--esd-text-dark);
  margin: 0;
}
.account-description {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--esd-orange-dark);
  margin: 0.25rem 0 0.6rem;
}
.account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.account-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--esd-text-light);
}
.account-meta-item .material-symbols-rounded { font-size: 1rem; }
.account-hero-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.account-hero-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
@media (max-width: 700px) {
  .account-hero {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  .account-name { justify-content: center; }
  .account-meta { justify-content: center; }
  .account-hero-actions { align-items: center; width: 100%; }
}
.account-role-badge {
  font-size: 0.85rem;
  vertical-align: middle;
}
/* Distribución en dos columnas */
.account-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 991.98px) {
  .account-columns { grid-template-columns: 1fr; }
}
.account-panel {
  background: var(--esd-surface-dark-2);
  border: 2px solid var(--esd-border-dark);
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.account-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.account-panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--esd-text-dark);
  margin: 0;
}
.account-panel-count {
  background: var(--esd-beige-light);
  border: 1px solid var(--esd-border-dark);
  color: var(--esd-text-medium);
  border-radius: 999px;
  padding: 0.05rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.account-panel-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.account-panel-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--esd-text-light);
}
.account-panel-empty .material-symbols-rounded {
  font-size: 2.4rem;
  display: block;
  margin: 0 auto 0.5rem;
}
.account-panel-empty p { margin-bottom: 0.9rem; }

/* Agenda del día (línea de tiempo) */
.agenda { display: flex; flex-direction: column; }
.agenda-item {
  display: flex;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0 0 1rem;
  cursor: pointer;
}
.agenda-time {
  flex-shrink: 0;
  width: 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 0.15rem;
}
.agenda-time-start {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--esd-text-dark);
  line-height: 1.1;
}
.agenda-time-end {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--esd-text-light);
}
.agenda-rail {
  flex-shrink: 0;
  position: relative;
  width: 14px;
  display: flex;
  justify-content: center;
}
.agenda-rail::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: -0.6rem;
  width: 2px;
  background: var(--esd-border-dark);
}
.agenda-rail-last::before { bottom: auto; height: 0.9rem; }
.agenda-dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(30, 42, 56, 0.25);
  margin-top: 0.3rem;
  background: var(--esd-text-light);
}
.agenda-dot-equipo { background: var(--kind-equipo); }
.agenda-dot-sala { background: var(--kind-sala); }
.agenda-dot-toma_datos { background: var(--kind-toma); }
.agenda-card {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  padding: 0.7rem 0.95rem;
  box-shadow: 0 1px 3px rgba(30, 42, 56, 0.08);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.agenda-item:hover .agenda-card {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.agenda-item:focus-visible {
  outline: none;
}
.agenda-item:focus-visible .agenda-card {
  box-shadow: 0 0 0 3px rgba(61, 107, 150, 0.3);
}
.agenda-kind {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--esd-text-medium);
}
.agenda-kind .material-symbols-rounded { font-size: 1rem; }
.agenda-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--esd-text-dark);
  margin-top: 0.2rem;
  line-height: 1.3;
}
.agenda-meta {
  font-size: 0.82rem;
  color: var(--esd-text-light);
  margin-top: 0.2rem;
}
.agenda-now {
  background: var(--esd-orange);
  color: #fff;
  border-radius: 999px;
  padding: 0.08rem 0.55rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  animation: esd-pulse 2s ease-in-out infinite;
}

@media (max-width: 575.98px) {
  .agenda-item {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.55rem;
    padding-bottom: 0.75rem;
  }

  .agenda-item:last-child {
    padding-bottom: 0;
  }

  .agenda-time {
    width: auto;
    align-items: flex-start;
  }

  .agenda-rail {
    display: none;
  }

  .agenda-card {
    padding: 0.65rem 0.75rem;
  }

  .agenda-kind {
    flex-wrap: wrap;
  }
}
@keyframes esd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 107, 150, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(61, 107, 150, 0); }
}

/* Feed de últimas acciones */
.feed { display: flex; flex-direction: column; }
.feed-item {
  position: relative;
  display: flex;
  gap: 0.8rem;
  padding-bottom: 1rem;
}
.feed-item::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 2.3rem;
  bottom: -0.2rem;
  width: 2px;
  background: var(--esd-border-dark);
}
.feed-item-last::before { display: none; }
.feed-item-last { padding-bottom: 0.2rem; }
.feed-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(30, 42, 56, 0.12);
}
.feed-icon .material-symbols-rounded { font-size: 1.15rem; }
.feed-icon-success { background: #ecf8f0; color: #166534; }
.feed-icon-danger { background: #fdecec; color: #b91c1c; }
.feed-icon-warning { background: #fdf3e0; color: #b45309; }
.feed-icon-neutral { background: var(--esd-beige-light); color: var(--esd-text-medium); }
.feed-content { min-width: 0; flex: 1; }
.feed-phrase {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--esd-text-dark);
  line-height: 1.3;
}
.feed-details {
  font-size: 0.78rem;
  color: var(--esd-text-light);
  margin-top: 0.1rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-when {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--esd-text-light);
  margin-top: 0.2rem;
}