@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Poppins:wght@600;700;800;900&display=swap');
/* Escala de z-index del proyecto (documentada para futuros overlays, dejar margen entre niveles):
   2   -> .melius-modal-footer (sticky dentro del propio modal, no compite con overlays)
   50  -> overlay de Modal generico (inline zIndex en app.jsx) y menu movil "mas"
   60  -> .toast-stack y overlay del tour guiado (z-[60])
   61  -> tooltip/highlight del tour sobre su propio overlay (z-[61])
   200 -> ConfirmModal (debe ganar siempre sobre Modal/tour/toasts)
   999999 -> overlay de error fatal (ultimo recurso, debe cubrir todo) */
:root {
    --melius-cyan: #07d6da;
    --melius-violet: #9909fe;
    --melius-violet-dark: #7a07cc;
    --melius-cyan-dark: #059aa0;
}
html, body { background-color: #f8fafc; }
html.dark, html.dark body { background-color: #0b1220; }
body { font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, .font-display { font-family: 'Poppins', 'Inter', sans-serif; }
.btn-melius { background-image: linear-gradient(135deg, var(--melius-cyan) 0%, var(--melius-violet) 100%); color: #fff; }
.btn-melius:hover { background-image: linear-gradient(135deg, var(--melius-cyan-dark) 0%, var(--melius-violet-dark) 100%); }
.text-melius-cyan { color: var(--melius-cyan); }
/* Variante con contraste WCAG AA (4.5:1) para texto sobre fondos claros
   (bg-cyan-50/100): el cian de marca (#07d6da) da 1.73:1 sobre esos fondos,
   muy por debajo del minimo. En modo oscuro conserva el cian de marca porque
   ahi si cumple (>5:1) contra los fondos oscuros usados (cyan-900/slate-900). */
.text-melius-cyan-a11y { color: #0e7490; }
html.dark .text-melius-cyan-a11y { color: var(--melius-cyan); }
.ring-melius { box-shadow: 0 10px 30px -10px rgba(7,214,218,0.45), 0 8px 24px -8px rgba(153,9,254,0.35); }
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
html.dark .custom-scrollbar::-webkit-scrollbar-track { background: #1f2937; }
html.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #374151; }
html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #4b5563; }
.no-select { user-select: none; -webkit-user-select: none; }
.safe-top { padding-top: max(env(safe-area-inset-top), 0px); }
.safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
@keyframes meliusFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes meliusZoomIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.anim-fade-in { animation: meliusFadeIn 220ms ease-out both; }
.anim-zoom-in { animation: meliusZoomIn 200ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .anim-fade-in, .anim-zoom-in, .animate-pulse, .animate-spin { animation: none !important; }
    * { transition-duration: 0ms !important; }
}
button, [role="button"], select,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
    min-height: 44px;
}
/* Indicador de foco global (WCAG 2.2 AA 2.4.7): un solo selector cubre
   todos los controles interactivos sin editar cada instancia en app.jsx. */
button, [role="button"], a, select, textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
    outline-offset: 2px;
}
button:focus-visible, [role="button"]:focus-visible, a:focus-visible,
select:focus-visible, textarea:focus-visible,
input:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
html.dark button:focus-visible, html.dark [role="button"]:focus-visible, html.dark a:focus-visible,
html.dark select:focus-visible, html.dark textarea:focus-visible,
html.dark input:focus-visible {
    outline-color: #60a5fa;
}
@media (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    select, textarea {
        font-size: 16px !important;
    }
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.7);
}
.melius-modal-header {
    border-bottom: 1px solid rgb(241 245 249 / 1);
}
html.dark .melius-modal-header { border-bottom-color: rgb(30 41 59 / 1); }
.melius-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: inherit;
    border-top: 1px solid rgb(241 245 249 / 1);
}
html.dark .melius-modal-footer { border-top-color: rgb(30 41 59 / 1); }
.toast-stack {
    position: fixed;
    top: max(1rem, calc(env(safe-area-inset-top) + 0.75rem));
    right: 1rem; left: 1rem;
    z-index: 60; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
}
@media (min-width: 640px) { .toast-stack { left: auto; max-width: 24rem; } }
/* Variables CSS para el panel del tour — se invierten en dark mode */
:root {
    --tour-bg: #ffffff;
    --tour-border: #e2e8f0;
    --tour-text: #0f172a;
    --tour-muted: #475569;
    --tour-btn-bg: #f8fafc;
}
html.dark {
    --tour-bg: #0f172a;
    --tour-border: #1e293b;
    --tour-text: #f1f5f9;
    --tour-muted: #94a3b8;
    --tour-btn-bg: #1e293b;
}
.noscript-fallback { padding: 2rem; text-align: center; font-family: sans-serif; }