/** * Agendly — estilos frontend (paridad 1:1 con el proyecto Next.js + Tailwind). * Origen: app/globals.css, tailwind.config.ts y clases de components/*. */ @import url("https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&family=Bricolage+Grotesque:wght@500;600;700&display=swap"); /* * Tokens de diseño. Se aplican también a #agn-sidebar-portal y .agn-modal-overlay * porque esos nodos se montan en (fuera de .agendly) mediante portales JS; * las custom properties se heredan a sus descendientes y la tipografía/color base * se resuelven correctamente. Aquí NO se define layout (min-height/background) para * no inyectar un bloque coloreado de pantalla completa al final del . */ .agendly, #agn-sidebar-portal, .agn-modal-overlay { --bg: #f4f8f7; --surface: #ffffff; --ink: #122b28; --soft: #5d7672; --line: #dde8e5; --primary: #0f6e63; --primary-deep: #0a4f48; --primary-tint: #e3f1ee; --accent: #cfe7d8; --danger: #d4564a; --danger-tint: #fbe9e7; --success: #1f9d6b; --success-tint: #e2f4ec; --amber: #d2902f; --amber-tint: #f8eedb; --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Albert Sans", system-ui, sans-serif; --shadow-card: 0 1px 2px rgba(16, 44, 41, 0.05), 0 8px 24px -12px rgba(16, 44, 41, 0.12); font-family: var(--font-body); color: var(--ink); } .agendly { background: var(--bg); min-height: 100vh; } .agendly, #agn-sidebar-portal, .agn-modal-overlay { line-height: 1.5; } .agendly *, .agendly *::before, .agendly *::after, #agn-sidebar-portal *, #agn-sidebar-portal *::before, #agn-sidebar-portal *::after, .agn-modal-overlay *, .agn-modal-overlay *::before, .agn-modal-overlay *::after { box-sizing: border-box; } .agendly .agn-display { font-family: var(--font-display); } .agn-fade-up { animation: agnFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Salida al cancelar una cita: 1s de animación y luego se elimina del DOM. */ .agn-cancelling { animation: agnCancelOut 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; pointer-events: none; } @keyframes agnCancelOut { 0% { opacity: 1; transform: translateX(0) scale(1); } 18% { transform: translateX(0) scale(1); background-color: var(--danger-tint); } 100% { opacity: 0; transform: translateX(28px) scale(0.95); background-color: var(--danger-tint); } } @keyframes agnFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .agendly *, .agendly *::before, .agendly *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .agn-hidden { display: none !important; } .agendly a { text-decoration: none; } .agn-cap { text-transform: capitalize; } /* ── Wraps ─────────────────────────────────────────────── */ .agn-wrap { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; } .agn-wrap--md { max-width: 56rem; } .agn-wrap--sm { max-width: 48rem; } .agn-page { min-height: 100vh; } /* ── Header del panel ─────────────────────────────────── */ .agn-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); } .agn-header-inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; } .agn-brand { display: flex; align-items: center; gap: 0.625rem; } /* La marca puede ser un