/* Dentasys — Modo oscuro
   ---------------------------------------------------------------------------
   Se activa con la clase .dark en <html>. Cubre las utilidades de Tailwind más
   usadas en la app y los componentes personalizados de la landing. */

html.dark {
    color-scheme: dark;
}

/* ── Base ── */
html.dark body,
html.dark body.bg-gray-50,
html.dark body.bg-gray-100,
html.dark body.bg-slate-50 {
    background-color: #0b1120 !important;
    color: #e2e8f0;
}

html.dark .landing-page {
    color: #e2e8f0;
}

html.dark ::selection {
    background: rgba(11, 110, 122, 0.35);
    color: #f8fafc;
}

/* ── Superficies ── */
html.dark .bg-white {
    background-color: #111827 !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-50\/50,
html.dark .bg-gray-50\/80,
html.dark .bg-slate-50 {
    background-color: #0f172a !important;
}

html.dark .bg-gray-100 {
    background-color: #1e293b !important;
}

html.dark .bg-gray-200,
html.dark .bg-gray-300 {
    background-color: #334155 !important;
}

html.dark .bg-dental-50,
html.dark .bg-dental-50\/30,
html.dark .bg-dental-50\/50 {
    background-color: rgba(11, 110, 122, 0.12) !important;
}

html.dark .bg-dental-100 {
    background-color: rgba(11, 110, 122, 0.18) !important;
}

html.dark .bg-green-50 {
    background-color: rgba(16, 185, 129, 0.12) !important;
}

html.dark .bg-green-100 {
    background-color: rgba(16, 185, 129, 0.18) !important;
}

html.dark .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

html.dark .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.18) !important;
}

html.dark .bg-blue-50,
html.dark .bg-blue-50\/50 {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

html.dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.18) !important;
}

html.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.12) !important;
}

html.dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.18) !important;
}

html.dark .bg-purple-50,
html.dark .bg-purple-50\/50 {
    background-color: rgba(168, 85, 247, 0.12) !important;
}

html.dark .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.18) !important;
}

/* ── Textos ── */
html.dark .text-gray-900,
html.dark .text-slate-900 {
    color: #f8fafc !important;
}

html.dark .text-gray-800 {
    color: #f1f5f9 !important;
}

html.dark .text-gray-700 {
    color: #e2e8f0 !important;
}

html.dark .text-gray-600 {
    color: #cbd5e1 !important;
}

html.dark .text-gray-500,
html.dark .text-gray-400,
html.dark .text-slate-500 {
    color: #94a3b8 !important;
}

html.dark .text-gray-300 {
    color: #cbd5e1 !important;
}

html.dark .text-dental-600 {
    color: #14C3D3 !important;
}

html.dark .text-dental-700,
html.dark .text-dental-800 {
    color: #7ee7ef !important;
}

html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800,
html.dark .text-green-900 {
    color: #6ee7b7 !important;
}

html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900 {
    color: #fcd34d !important;
}

html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark .text-blue-800 {
    color: #93c5fd !important;
}

html.dark .text-red-500,
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800 {
    color: #fca5a5 !important;
}

html.dark .text-purple-600 {
    color: #c4b5fd !important;
}

/* ── Bordes y separadores ── */
html.dark .border-gray-100,
html.dark .border-gray-200 {
    border-color: #1f2937 !important;
}

html.dark .border-gray-300,
html.dark .border-slate-300 {
    border-color: #334155 !important;
}

html.dark .border-dental-100,
html.dark .border-dental-200 {
    border-color: rgba(11, 110, 122, 0.35) !important;
}

html.dark .border-green-100 {
    border-color: rgba(16, 185, 129, 0.35) !important;
}

html.dark .border-amber-100 {
    border-color: rgba(245, 158, 11, 0.35) !important;
}

html.dark .border-blue-100 {
    border-color: rgba(59, 130, 246, 0.35) !important;
}

html.dark .border-red-100,
html.dark .border-red-200 {
    border-color: rgba(239, 68, 68, 0.35) !important;
}

html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #1f2937 !important;
}

/* ── Formularios ── */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

html.dark input[type="checkbox"],
html.dark input[type="radio"] {
    accent-color: #0B6E7A;
}

/* ── Estados hover ── */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-50\/50:hover,
html.dark .hover\:bg-gray-100:hover {
    background-color: #1e293b !important;
}

html.dark .hover\:bg-gray-200:hover {
    background-color: #334155 !important;
}

html.dark .hover\:bg-dental-50:hover,
html.dark .hover\:bg-dental-50\/30:hover,
html.dark .hover\:bg-dental-50\/50:hover,
html.dark .hover\:bg-dental-100:hover {
    background-color: rgba(11, 110, 122, 0.18) !important;
}

html.dark .hover\:bg-blue-50:hover,
html.dark .hover\:bg-blue-50\/50:hover,
html.dark .hover\:bg-blue-100:hover {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

html.dark .hover\:bg-red-50:hover,
html.dark .hover\:bg-red-500\/10:hover {
    background-color: rgba(239, 68, 68, 0.16) !important;
}

html.dark .hover\:bg-purple-50\/50:hover,
html.dark .hover\:bg-purple-100:hover {
    background-color: rgba(168, 85, 247, 0.2) !important;
}

html.dark .hover\:text-gray-700:hover {
    color: #f1f5f9 !important;
}

html.dark .hover\:text-gray-600:hover {
    color: #cbd5e1 !important;
}

html.dark .hover\:text-dental-700:hover,
html.dark .hover\:text-dental-600:hover {
    color: #7ee7ef !important;
}

/* ── Componentes de la app ── */
html.dark .dental-toast,
html.dark .dental-loading-card,
html.dark .dental-confirm-dialog {
    background-color: #111827 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.12) !important;
}

html.dark .dental-toast__title,
html.dark .dental-confirm-dialog h3,
html.dark .dental-loading-card__text {
    color: #f1f5f9 !important;
}

html.dark .dental-toast__message,
html.dark .dental-confirm-dialog p,
html.dark .dental-loading-card__sub {
    color: #94a3b8 !important;
}

html.dark .dental-toast__close:hover {
    background: #1e293b;
    color: #e2e8f0;
}

html.dark .dental-btn--ghost {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

html.dark .dental-btn--ghost:hover:not(:disabled) {
    background: #334155;
}

html.dark .dental-skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}

html.dark .dental-empty-state__icon {
    background: #1e293b;
    color: #64748b;
}

/* Logo a color en fondos claros; versión blanca en modo oscuro */
.brand-logo-dark { display: none; }
html.dark .brand-logo-light { display: none !important; }
html.dark .brand-logo-dark { display: block !important; }

/* ── Landing: header y secciones ── */
html.dark .site-header {
    background-color: #0b1120 !important;
}

html.dark .site-header.is-scrolled {
    background: rgba(11, 17, 32, 0.92) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}

html.dark .nav-link::before {
    background: rgba(11, 110, 122, 0.16);
}

html.dark .hero-section {
    background: linear-gradient(145deg, #0b1120 0%, #0f172a 45%, #0b1120 100%);
}

html.dark .hero-grid-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(56, 189, 248, 0.12) 1px, transparent 0);
}

html.dark .hero-float-card {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .features-strip {
    background: rgba(15, 23, 42, 0.75);
    border-top-color: #1e293b;
}

html.dark .features-section,
html.dark .testimonials-section {
    background: #0f172a;
}

html.dark .steps-section {
    background: linear-gradient(180deg, #0b1120 0%, #0f172a 100%);
}

html.dark .pricing-section {
    background: linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
}

html.dark .product-section {
    background: linear-gradient(180deg, #0b1120 0%, #0f172a 100%);
}

html.dark .product-tabs {
    background: #111827;
    border-color: #1f2937;
}

html.dark .product-tab {
    color: #cbd5e1;
}

html.dark .product-tab:hover {
    background: rgba(11, 110, 122, 0.12);
    color: #14C3D3;
}

html.dark .trust-badge {
    background: #111827;
    border-color: #1f2937;
    color: #7ee7ef;
}

html.dark .hero-stat-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

html.dark .strip-item:hover {
    background: rgba(11, 110, 122, 0.12);
}

html.dark .feature-card,
html.dark .pricing-card {
    background: #111827;
    border-color: #1f2937;
}

html.dark .feature-card:hover,
html.dark .pricing-card:hover {
    border-color: rgba(11, 110, 122, 0.4);
}

html.dark .testimonial-card {
    background: #111827;
    border-color: #1f2937;
}

html.dark .feature-card-icon {
    background: rgba(11, 110, 122, 0.12);
}

html.dark .testimonial-avatar {
    border-color: #1f2937;
}

html.dark .section-title,
html.dark .pricing-price {
    color: #f8fafc;
}

html.dark .section-title span,
html.dark .section-label {
    color: #14C3D3;
}

html.dark .pricing-list li {
    color: #cbd5e1;
}

html.dark .btn-secondary {
    background: #111827;
    color: #e2e8f0;
    border-color: #334155;
}

html.dark .btn-secondary:hover {
    border-color: rgba(11, 110, 122, 0.5);
}

html.dark .cta-section .btn-secondary {
    background: #111827;
    color: #e2e8f0;
}

html.dark .cta-section .btn-secondary:hover {
    background: #1e293b;
}

html.dark .site-footer {
    background: #020617;
}

html.dark .browser-mockup {
    background: #111827;
}

html.dark .browser-chrome {
    background: linear-gradient(180deg, #1e293b 0%, #111827 100%);
    border-bottom-color: #334155;
}

html.dark .browser-url {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

html.dark .browser-viewport,
html.dark .preview-scaler iframe {
    background: #0f172a;
}

/* ── Botón de cambio de tema ── */
.theme-toggle__icon--moon {
    display: none;
}

html.dark .theme-toggle__icon--sun {
    display: none;
}

html.dark .theme-toggle__icon--moon {
    display: block;
}

html.dark .theme-toggle {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html.dark .theme-toggle:hover {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

@media (prefers-reduced-motion: no-preference) {
    html,
    body {
        transition: background-color 0.2s ease, color 0.2s ease;
    }
}