/* ─────────────────────────────────────────────────────────────────
   Finty Pro — estilos base (complementa Tailwind CDN)
   ───────────────────────────────────────────────────────────────── */

        :root {
            --primary: #0f172a;
            --accent: #10b981;
            --accent2: #6366f1;
            --warn: #f59e0b;
            --danger: #ef4444;
        }
        * { box-sizing: border-box; }
        body { font-family: 'DM Sans', sans-serif; transition: background-color 0.3s, color 0.3s; }
        .dark body { background-color: #060c1a; color: #f1f5f9; }

        /* FIX (responsive): candado global contra el scroll horizontal.
           Con esto solo, la mayoría de "algo se sale de pantalla" queda
           contenido — pero lo importante es arreglar la causa (ver
           media query de abajo), esto es la red de seguridad final. */
        html, body {
            max-width: 100vw;
            overflow-x: hidden;
        }

        @media (max-width: 768px) {
            /* Evita que una tabla ancha (ej. el desglose de ROI) empuje
               todo el layout hacia los lados — que haga scroll SOLO ella,
               no la página completa. */
            table { display: block; overflow-x: auto; white-space: nowrap; }

            /* Cualquier tarjeta no debe poder ser más ancha que su
               columna, sin importar el contenido de adentro (números
               largos, textos sin espacios, etc.) */
            .card { max-width: 100%; }
        }

        /* Cards */
        .card { border-radius: 18px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
        .card:hover { transform: translateY(-1px); }

        /* Score ring */
        .score-ring { transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1); }

        /* Chat */
        #chat-messages { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
        #chat-messages::-webkit-scrollbar { width: 4px; }
        #chat-messages::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

        .msg-user { background: var(--accent); color: white; border-radius: 18px 18px 4px 18px; }
        .msg-ai { background: #ffffff; color: #334155; border: 1px solid #e2e8f0; border-radius: 18px 18px 18px 4px; }
        .dark .msg-ai { background: #1e293b; color: #e2e8f0; border-color: #334155; }

        /* Tabs */
        .active-tab { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: 700; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* Pulse for AI thinking */
        @keyframes pulse-dot { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }
        .typing-dot { animation: pulse-dot 1.2s infinite ease-in-out; }
        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        /* Score colors */
        .score-bad { color: #ef4444; }
        .score-med { color: #f59e0b; }
        .score-good { color: #10b981; }

        /* Income badge */
        .badge-income { background: #d1fae5; color: #065f46; }
        .badge-expense { background: #fee2e2; color: #991b1b; }
        .dark .badge-income { background: #064e3b; color: #6ee7b7; }
        .dark .badge-expense { background: #450a0a; color: #fca5a5; }

        /* Category auto-detect indicator */
        @keyframes flash { 0%{background:#d1fae5} 100%{background:transparent} }
        .cat-detected { animation: flash 0.6s ease-out; }

        /* Habit bars */
        .habit-bar { transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

        input, select, textarea {
            font-family: 'DM Sans', sans-serif;
        }
        .dark input, .dark select, .dark textarea {
            background-color: #1e293b;
            border-color: #334155;
            color: white;
        }
        .dark header { background-color: #0a0f1e; border-color: #1e293b; }
        .dark .card { background-color: #0f172a; border-color: #1e293b; }