/* ─── Google Font Inter (fallback) ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── CSS Variables — Paleta Grupo Dental Blue ─── */
:root {
    --teal-50:  #EBF7FD;  /* azul muy suave */
    --teal-100: #D6EFFA;
    --teal-200: #A8DDEE;
    --teal-300: #74CAE7;
    --teal-400: #4CC8EE;  /* azul cielo ("Grupo Dental") */
    --teal-500: #2EB5E0;
    --teal-600: #2185D0;  /* azul medio — botones primarios */
    --teal-700: #1A6FA8;  /* azul profundo — hover/active */
    --teal-800: #155A87;
    --teal-900: #104470;
    --teal-950: #0B2E4F;
    /* Acento verde del logo */
    --dental-green: #8FBC3A;
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #111827;
    background: #fff;
    overflow-x: hidden;
}

/* ─── Buttons ─── */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background-color: var(--teal-600);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 150ms, box-shadow 150ms, transform 100ms;
    line-height: 1.25;
}
.btn-primary:hover { background-color: var(--teal-700); box-shadow: 0 4px 14px rgba(13,148,136,.35); }
.btn-primary:active { transform: scale(0.97); }

.btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    border: 2px solid var(--teal-600);
    color: var(--teal-700);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 150ms, color 150ms;
    background: transparent;
}
.btn-outline:hover { background-color: var(--teal-600); color: #fff; }

.btn-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background-color: #25D366;
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 150ms;
}
.btn-whatsapp:hover { background-color: #1ebe5d; }

.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background-color: #f3f4f6;
    color: #374151;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 150ms;
}
.btn-secondary:hover { background-color: #e5e7eb; }

.btn-admin {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background-color: var(--teal-600);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 150ms;
}
.btn-admin:hover { background-color: var(--teal-700); }

.btn-danger {
    display: inline-flex; align-items: center; gap: 0.375rem;
    background-color: #dc2626; color: #fff;
    font-weight: 600; font-size: 0.875rem;
    padding: 0.5rem 1rem; border-radius: 0.5rem;
    border: none; cursor: pointer; text-decoration: none;
    transition: background-color 150ms;
}
.btn-danger:hover { background-color: #b91c1c; }

/* ─── Nav ─── */
.nav-link {
    font-size: 0.875rem; font-weight: 500;
    color: #374151; text-decoration: none;
    transition: color 150ms;
}
.nav-link:hover { color: var(--teal-600); }

/* ─── Forms ─── */
.form-label {
    display: block; font-size: 0.875rem; font-weight: 500;
    color: #374151; margin-bottom: 0.375rem;
}
.form-input {
    display: block; width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    color: #111827; font-size: 0.875rem;
    font-family: inherit;
    background: #fff;
    transition: border-color 150ms, box-shadow 150ms;
    outline: none;
}
.form-input:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
.form-input::placeholder { color: #9ca3af; }
.form-select {
    display: block; width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb; border-radius: 0.75rem;
    color: #111827; font-size: 0.875rem;
    font-family: inherit; background: #fff;
    outline: none; cursor: pointer;
}
.form-select:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }

/* ─── Cards ─── */
.card { background: #fff; border-radius: 1rem; border: 1px solid #f3f4f6; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card-header { padding: 1rem 1.5rem; border-bottom: 1px solid #f9fafb; display: flex; align-items: center; justify-content: space-between; }
.card-body { padding: 1.25rem 1.5rem; }

/* ─── Badges ─── */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.badge-green  { background: #dcfce7; color: #166534; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-gray   { background: #f3f4f6; color: #4b5563; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-teal   { background: var(--teal-100); color: var(--teal-800); }

/* ─── Admin sidebar nav ─── */
.admin-nav-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.625rem 0.75rem; border-radius: 0.75rem;
    font-size: 0.875rem; font-weight: 500;
    color: #4b5563; text-decoration: none;
    transition: background-color 150ms, color 150ms;
}
.admin-nav-item:hover { background-color: var(--teal-50); color: var(--teal-700); }
.admin-nav-item.active { background-color: var(--teal-600); color: #fff; }
.admin-nav-item.active:hover { background-color: var(--teal-700); color: #fff; }

/* ─── Toolbar buttons (editor) ─── */
.toolbar-btn {
    padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500;
    color: #4b5563; border: none; background: transparent;
    border-radius: 0.5rem; cursor: pointer; transition: background-color 150ms, color 150ms;
}
.toolbar-btn:hover { background-color: var(--teal-50); color: var(--teal-700); }

/* ─── Prose / rich text ─── */
.prose h2 { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 2rem 0 1rem; }
.prose h3 { font-size: 1.125rem; font-weight: 600; color: var(--teal-700); margin: 1.5rem 0 0.75rem; }
.prose p  { color: #4b5563; line-height: 1.75; margin-bottom: 1rem; }
.prose ul { list-style: disc; margin-left: 1.25rem; }
.prose ul li { color: #4b5563; margin-bottom: 0.375rem; }
.prose ul li::marker { color: var(--dental-green); }
.prose ol { list-style: decimal; margin-left: 1.25rem; }
.prose a  { color: var(--teal-600); text-decoration: underline; }

/* ─── ProseMirror / TipTap ─── */
.ProseMirror { min-height: 350px; outline: none; }
.ProseMirror h2 { font-size: 1.35rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.ProseMirror h3 { font-size: 1.1rem; font-weight: 600; color: var(--teal-700); margin: 1.25rem 0 0.5rem; }
.ProseMirror p  { color: #374151; line-height: 1.7; margin-bottom: 0.875rem; }
.ProseMirror ul { list-style: disc; margin-left: 1.25rem; }
.ProseMirror ol { list-style: decimal; margin-left: 1.25rem; }
.ProseMirror a  { color: var(--teal-600); text-decoration: underline; }
.ProseMirror img { border-radius: 0.75rem; max-width: 100%; margin-top: 1rem; }

/* ─── Booking widget (CLS prevention) ─── */
.booking-widget-container { min-height: 500px; }

/* ─── Animations ─── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.4s ease-out both; }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* ─── Utilities ─── */
.text-gradient-teal {
    background: linear-gradient(135deg, var(--teal-700), var(--teal-400));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ─── Admin responsive sidebar ─── */
@media (max-width: 1023px) {
    #admin-sidebar { transform: translateX(-100%); }
    #admin-sidebar.open { transform: translateX(0); }
}

/* ─── Contact form sobre fondo oscuro (sidebar teal en páginas de servicio) ─── */
.contact-form-dark .form-label {
    color: rgba(255,255,255,.95) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.contact-form-dark p,
.contact-form-dark label,
.contact-form-dark span { color: rgba(255,255,255,.8) !important; }
/* Asterisco de obligatorio: rosa claro */
.contact-form-dark .text-red-500,
.contact-form-dark [class*="text-red"] { color: #fca5a5 !important; }
/* Texto gris → blanco semitransparente */
.contact-form-dark [class*="text-gray"] { color: rgba(255,255,255,.7) !important; }
/* Link WhatsApp → verde menta */
.contact-form-dark a[href*="wa.me"],
.contact-form-dark .text-green-600 { color: #6ee7b7 !important; }
/* Inputs y textarea: vidrio esmerilado */
.contact-form-dark input,
.contact-form-dark textarea,
.contact-form-dark select {
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.40) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.contact-form-dark input::placeholder,
.contact-form-dark textarea::placeholder { color: rgba(255,255,255,.55) !important; }
.contact-form-dark input:focus,
.contact-form-dark textarea:focus,
.contact-form-dark select:focus {
    border-color: rgba(255,255,255,.75) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.2) !important;
    background: rgba(255,255,255,.24) !important;
    outline: none !important;
}
/* Mensaje de éxito */
.contact-form-dark .bg-teal-50 {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.35) !important;
}
.contact-form-dark .text-teal-800 { color: #fff !important; }
.contact-form-dark .text-teal-700 { color: rgba(255,255,255,.85) !important; }
.contact-form-dark .text-teal-600 { color: #5eead4 !important; }
/* Mensaje de error */
.contact-form-dark .bg-red-50 {
    background: rgba(239,68,68,.25) !important;
    border-color: rgba(252,165,165,.5) !important;
}
.contact-form-dark .text-red-700 { color: #fca5a5 !important; }