/* ==========================================================================
   CobraFácil — Billing & AI Platform (Google Stitch Design System)
   Project ID: 4986888274260142716
   - Tipografia: Plus Jakarta Sans (Headlines) + Inter (Body/Labels) + Material Symbols Outlined
   - Tema: Modern Fintech Light (#faf8ff surface, #ffffff cards, #3525cd primary indigo, #006a61 secondary emerald)
   ========================================================================== */

:root {
    --ml-fonte: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --fonte-headline: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --surface: #faf8ff;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f2f3ff;
    --surface-container: #eaedff;
    --surface-container-high: #e2e7ff;
    --surface-container-highest: #dae2fd;
    --primary: #3525cd;
    --primary-container: #4f46e5;
    --primary-fixed: #e2dfff;
    --secondary: #006a61;
    --secondary-container: #86f2e4;
    --tertiary: #005338;
    --tertiary-fixed: #6ffbbe;
    --error: #ba1a1a;
    --error-container: #ffdad6;
    --on-surface: #131b2e;
    --on-surface-variant: #464555;
    --outline: #777587;
    --outline-variant: #c7c4d8;
    --raio: 12px;
    --raio-input: 10px;
    --raio-card: 16px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--ml-fonte);
    font-size: 14px;
    line-height: 1.45;
    background-color: var(--surface);
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-headline {
    font-family: var(--fonte-headline);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

.icon-fill {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f2f3ff;
}
::-webkit-scrollbar-thumb {
    background: #c7c4d8;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #777587;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Utilitários Stitch */
.ai-gradient {
    background: linear-gradient(135deg, #3525cd 0%, #4f46e5 55%, #006a61 100%);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
}

.ambient-shadow {
    box-shadow: 0 20px 40px -15px rgba(19, 27, 46, 0.06);
}

.stitch-card {
    background: #ffffff;
    border: 1px solid rgba(199, 196, 216, 0.35);
    border-radius: 16px;
    box-shadow: 0 8px 24px -6px rgba(19, 27, 46, 0.04);
}

/* Compatibilidade com classes legadas dos cards */
.neon-card-green {
    background: #ffffff;
    border: 1px solid rgba(0, 106, 97, 0.22);
    box-shadow: 0 10px 25px -5px rgba(0, 106, 97, 0.06);
}

.neon-card-blue {
    background: #ffffff;
    border: 1px solid rgba(53, 37, 205, 0.22);
    box-shadow: 0 10px 25px -5px rgba(53, 37, 205, 0.06);
}

.neon-card-purple {
    background: #ffffff;
    border: 1px solid rgba(79, 70, 229, 0.22);
    box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.06);
}

.neon-card-amber {
    background: #ffffff;
    border: 1px solid rgba(217, 119, 6, 0.25);
    box-shadow: 0 10px 25px -5px rgba(217, 119, 6, 0.06);
}

.neon-card-rose {
    background: #ffffff;
    border: 1px solid rgba(186, 26, 26, 0.22);
    box-shadow: 0 10px 25px -5px rgba(186, 26, 26, 0.06);
}

/* Status pills estilo Stitch Fintech */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.badge-pendente {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.badge-enviada {
    background: #e2dfff;
    color: #3525cd;
    border: 1px solid rgba(53, 37, 205, 0.2);
}
.badge-pago, .badge-ativo {
    background: #6ffbbe;
    color: #005338;
    border: 1px solid rgba(0, 106, 97, 0.2);
}
.badge-vencida, .badge-erro, .badge-inativo {
    background: #ffdad6;
    color: #93000a;
    border: 1px solid rgba(186, 26, 26, 0.2);
}

/* Navegação Lateral Stitch */
.nav-btn {
    color: #464555;
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.18s ease;
}
.nav-btn:hover {
    background-color: #eaedff;
    color: #131b2e;
}
.nav-btn.nav-ativo {
    background-color: #e2e7ff;
    color: #3525cd;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(53, 37, 205, 0.06);
}