/* ===== Estilos base para BotFarma (complementa Tailwind) ===== */ html, body { height: 100%; } /* Scrollbar sutil */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } /* Mensajes del chat */ .bubble { animation: pop 0.18s ease-out; } @keyframes pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .bubble pre, .bubble code { background: #f1f5f9; border-radius: 6px; padding: 2px 6px; font-size: 0.9em; } .bubble pre { padding: 12px; overflow-x: auto; } .bubble ul, .bubble ol { padding-left: 1.4rem; list-style: revert; } .bubble h1, .bubble h2, .bubble h3 { font-weight: 700; margin-top: 0.75rem; } /* Tablas markdown del chat */ .bubble table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; font-size: 0.9em; } .bubble th, .bubble td { border: 1px solid #cbd5e1; padding: 4px 10px; text-align: left; } .bubble thead th { background: #f1f5f9; font-weight: 600; border-bottom-width: 2px; } /* Cursor de "escribiendo" */ .typing-dot { animation: blink 1s infinite; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes blink { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } } /* Inputs legibles en móvil (evita zoom automático de iOS) */ input, select { font-size: 16px; } /* ===== Tema oscuro (clase .dark en ) ===== */ html.dark body { background-color: #0A0C0F; color: #e2e8f0; } html.dark .bg-white { background-color: #12151A; } html.dark .bg-slate-50 { background-color: #0D1013; } html.dark .bg-slate-100 { background-color: #0D1013; } html.dark .bg-slate-200 { background-color: #232830; } html.dark .bg-white\/80 { background-color: rgba(18, 21, 26, 0.8) !important; } html.dark .bg-emerald-50\/40 { background-color: rgba(52, 196, 139, 0.10) !important; } html.dark .bg-emerald-100 { background-color: rgba(52, 196, 139, 0.18); } html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.18); } html.dark .text-slate-900, html.dark .text-slate-800 { color: #e2e8f0; } html.dark .text-slate-700 { color: #cbd5e1; } html.dark .text-slate-600, html.dark .text-slate-500 { color: #cbd5e1; } html.dark .text-slate-400, html.dark .text-slate-300 { color: #94a3b8; } html.dark .text-emerald-700 { color: #6ee7b7; } html.dark .text-red-700 { color: #fca5a5; } html.dark .hover\:text-red-600:hover { color: #fca5a5; } html.dark .border-slate-200, html.dark .border-slate-100, html.dark .border-slate-300 { border-color: #262B33; } html.dark .hover\:bg-slate-100:hover { background-color: #232830; } html.dark .hover\:bg-slate-50:hover { background-color: #232830; } html.dark .hover\:bg-emerald-50:hover { background-color: rgba(52, 196, 139, 0.12); } html.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.12); } /* Gradientes de fondo (landing y login) */ html.dark .from-emerald-50 { --tw-gradient-from: #0D1013; } html.dark .via-white { --tw-gradient-via: #12151A; } html.dark .to-teal-50 { --tw-gradient-to: #0A0C0F; } html.dark .to-teal-100 { --tw-gradient-to: #12151A; } /* Fix robusto: sobreescribe el gradient del hero y del login con imagen directa */ html.dark #hero { background-image: linear-gradient(to bottom right, #12151A, #12151A 45%, #0A0C0F) !important; } html.dark .login-page { background-image: linear-gradient(to bottom right, #0D1013, #1A1E24) !important; } html.dark #site-header { background-color: rgba(18, 21, 26, 0.85) !important; border-color: #262B33; } /* Formularios */ html.dark input, html.dark select { background-color: #0D1013; color: #e2e8f0; } html.dark input::placeholder { color: #64748b; } /* Contenido markdown del chat */ html.dark .bubble pre, html.dark .bubble code { background: #232830; color: #e2e8f0; } html.dark .bubble th, html.dark .bubble td { border-color: #262B33; } html.dark .bubble thead th { background: #1A1E24; } /* Transición suave de tema */ body { transition: background-color 0.2s ease, color 0.2s ease; } /* ===== Barra de cookies (inferior) ===== */ html.dark #cookie-banner .bg-white { background-color: #12151A !important; } html.dark #cookie-banner .border-slate-200 { border-color: #262B33 !important; } /* ===== Toasts (UI) ===== */ .toast { animation: toast-in 0.22s ease-out; } @keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } html.dark #ui-toasts .bg-white { background-color: #12151A !important; } html.dark #ui-toasts .border-slate-200 { border-color: #262B33 !important; } /* ===== Diálogo de confirmación (UI) ===== */ .ui-confirm-card { transform: scale(0.95); opacity: 0; transition: transform 0.18s ease-out, opacity 0.18s ease-out; } .ui-confirm-card.in { transform: scale(1); opacity: 1; } html.dark .ui-confirm .bg-white { background-color: #12151A !important; } html.dark .ui-confirm .text-slate-900 { color: #e2e8f0 !important; } html.dark .ui-confirm .text-red-600 { color: #fca5a5; } /* ===== Landing (diseño 2026, colores del logo #106E4C) ===== */ :root { --primary: #106E4C; --primary-strong: #0A5338; --primary-contrast: #ffffff; --primary-soft: #E7F4EE; --accent: #10B981; --amber: #FFC15E; --ink: #10231B; --muted: #5B6B64; --surface: #ffffff; --surface-2: #F2F7F4; --border: #E3EBE6; --bg: #ffffff; } html.dark { --primary: #34C48B; --primary-strong: #8CE7BE; --primary-contrast: #06281C; --primary-soft: rgba(52, 196, 139, 0.14); --accent: #10B981; --amber: #C9A35C; --ink: #E6E8EB; --muted: #949CA6; --surface: #12151A; --surface-2: #1A1E24; --border: #262B33; --bg: #0A0C0F; } body { background: var(--bg); color: var(--ink); font-family: "Figtree", "Inter", system-ui, -apple-system, sans-serif; } .shadow-soft-lg { box-shadow: 0 24px 60px -18px rgba(16, 110, 76, 0.28); } html.dark .shadow-soft-lg { box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.55); } details summary::-webkit-details-marker { display: none; } /* La barra de cookies y el fondo del header usan las variables de la landing */ html.dark #cookie-banner .bg-\[color\:var\(--surface\)\] { background-color: var(--surface) !important; } /* ===== Ajustes solicitados: cookies ===== */ /* Barra de cookies extensa y accesible */ #cookie-banner .max-w-6xl p { font-size: 1rem; line-height: 1.6; } #cookie-banner { padding-bottom: 10px; } #cookies-accept, #cookies-reject { padding: 0.95rem 1.7rem !important; font-size: 1rem !important; border-radius: 999px !important; }