/* ============================================================
   ELEVÉ BARBERÍA — Reservas Web
   Skeletons: bloques con la forma del contenido mientras carga, para que
   la pantalla no salte cuando llegan los datos.
   ============================================================ */

.esq {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.12) 37%,
    rgba(255, 255, 255, 0.06) 63%);
  background-size: 400% 100%;
  animation: esq-brillo 1.4s ease infinite;
}
.esq--circulo { border-radius: 50%; flex-shrink: 0; }
.esq--pildora { border-radius: 999px; }

@keyframes esq-brillo {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* Servicios (paso 1): misma fila que .servicio-fila */
.esq-servicio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.esq-servicio__textos { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.esq-servicio__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* Barberos (paso 2): misma tarjeta que .tarjeta--barbero */
.esq-barbero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface2);
}
.esq-barbero__textos { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* Horarios (paso 3) */
.esq-horarios { display: flex; flex-direction: column; gap: 0.75rem; }

/* Tabla de horario del local (contacto) */
.esq-horario-fila {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Perfil */
.esq-perfil { display: flex; flex-direction: column; gap: 2rem; }
.esq-perfil[hidden] { display: none; }
.esq-perfil__saludo { display: flex; align-items: center; gap: 1rem; }
.esq-perfil__textos { display: flex; flex-direction: column; gap: 10px; }
.esq-turno {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  list-style: none;
}
.esq-turno__textos { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.esq-historial {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  list-style: none;
}
.esq-historial__textos { display: flex; flex-direction: column; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .esq { animation: none; background: rgba(255, 255, 255, 0.08); }
}