/* ==========================================================
   buttons.css – Botones globales del layout AMID
   (CTA principal, glass buttons del header, quick-link cards)
   ========================================================== */

/* ── Botón CTA principal (nav desktop) ──────────────────── */
.nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: linear-gradient(180deg, #c9dff6 0%, #96c3f4 100%);
  color: #082f49;
  text-decoration: none;
  font-weight: 900;
  padding: .82rem 1.18rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .58);
  box-shadow:
    0 14px 30px rgba(8, 47, 73, .18),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}

.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(255, 255, 255, .22), rgba(8, 47, 73, .08));
  opacity: 0;
  transition: opacity .18s ease;
}

.nav-cta i {
  color: #082f49;
}

.nav-cta:hover {
  transform: translateY(-2px);
  color: #020617;
  box-shadow:
    0 18px 36px rgba(8, 47, 73, .24),
    inset 0 1px 0 rgba(255, 255, 255, .78);
}

.nav-cta:hover::before {
  opacity: 1;
}

/* ── Botones glass (header) ─────────────────────────────── */
/* Se usan en: accesos rápidos, agendar cita móvil, menú hamburguesa */
.header-glass-btn {
  background: linear-gradient(180deg, rgba(201, 223, 246, .34), rgba(150, 195, 244, .22));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow:
    0 10px 24px rgba(8, 47, 73, .14),
    inset 0 1px 0 rgba(255, 255, 255, .24);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.header-glass-btn:hover {
  background: linear-gradient(180deg, rgba(201, 223, 246, .46), rgba(150, 195, 244, .34));
  border-color: rgba(255, 255, 255, .48);
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(8, 47, 73, .18),
    inset 0 1px 0 rgba(255, 255, 255, .30);
}

.header-glass-btn:active {
  transform: translateY(0);
}

/* ── Quick-link cards (panel de accesos rápidos) ─────────── */
.quick-link-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.quick-link-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(201, 223, 246, .28), rgba(150, 195, 244, .16));
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.quick-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, .10);
}

.quick-link-card:hover::after {
  opacity: 1;
}

.mobile-menu-panel .nav-cta,
.mobile-menu-panel a[href*="appointments/new"].bg-white {
  background: linear-gradient(180deg, #c9dff6 0%, #96c3f4 100%) !important;
  color: #082f49 !important;
  border: 1px solid rgba(255, 255, 255, .58);
  box-shadow: 0 12px 26px rgba(8, 47, 73, .18);
}

.mobile-menu-panel .nav-cta:hover,
.mobile-menu-panel a[href*="appointments/new"].bg-white:hover {
  color: #020617 !important;
  transform: translateY(-1px);
}