/* plugin/assets/citas.css */

.bt-citas {
  /* Hereda del tema cuando existe; si no, valores propios sobrios. */
  --bt-radio: 14px;
  --bt-borde: color-mix(in srgb, currentColor 12%, transparent);
  --bt-superficie: color-mix(in srgb, currentColor 3%, transparent);
  --bt-acento: var(--e-global-color-primary, #1a56db);
  --bt-dur: 240ms;
  --bt-dur-salida: 160ms;
  --bt-curva: cubic-bezier(0.32, 0.72, 0, 1);

  /* Sin max-width propio: el ancho lo fija el contenedor del tema. Imponer un
     número aquí desalineaba el componente respecto al encabezado y al pie. */
  width: 100%;
}

.bt-citas__titulo {
  margin: 0 0 1.25rem;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.25;
}

/* --- Rejilla de servicios --------------------------------------------- */

.bt-citas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.875rem;
}

.bt-citas__tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  text-align: left;
  text-decoration: none;
  font: inherit;
  color: inherit;
  background: var(--bt-superficie);
  border: 1px solid var(--bt-borde);
  border-radius: var(--bt-radio);
  cursor: pointer;
  transition:
    transform var(--bt-dur-salida) var(--bt-curva),
    border-color var(--bt-dur-salida) ease,
    background-color var(--bt-dur-salida) ease;
}

.bt-citas__tarjeta:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bt-acento) 40%, transparent);
  color: inherit;
}

.bt-citas__tarjeta:active { transform: translateY(0); }

.bt-citas__tarjeta:focus-visible {
  outline: 2px solid var(--bt-acento);
  outline-offset: 3px;
}

.bt-citas__tarjeta-icono { font-size: 1.5rem; color: var(--bt-acento); }
.bt-citas__tarjeta-nombre { font-weight: 600; line-height: 1.3; }

.bt-citas__tarjeta-pista {
  margin-top: auto;
  font-size: 0.8125rem;
  opacity: 0.55;
  transition: opacity var(--bt-dur-salida) ease;
}

.bt-citas__tarjeta:hover .bt-citas__tarjeta-pista { opacity: 0.85; }

/* Entrada escalonada, con tope para que una rejilla larga no acumule espera. */
.bt-citas__rejilla .bt-citas__tarjeta {
  animation: bt-entrada 320ms var(--bt-curva) backwards;
  animation-delay: calc(min(var(--i, 0), 8) * 22ms);
}

@keyframes bt-entrada {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Botón dentro de la página de un servicio -------------------------- */

.bt-citas--boton { margin: 2rem 0 0; }

.bt-citas__cta {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: var(--bt-acento);
  border-radius: calc(var(--bt-radio) - 5px);
  transition:
    filter var(--bt-dur-salida) ease,
    transform var(--bt-dur-salida) var(--bt-curva);
}

.bt-citas__cta:hover { filter: brightness(1.08); color: #fff; transform: translateY(-1px); }
.bt-citas__cta:active { transform: translateY(0); }
.bt-citas__cta:focus-visible { outline: 2px solid var(--bt-acento); outline-offset: 3px; }

/* --- Movimiento reducido ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bt-citas *,
  .bt-citas *::before,
  .bt-citas *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}