/* ArautoFlow — identidade dos painéis (Filament 5) + telas próprias.
   Mesma linguagem do site público (public/site/site.css): fundo quase preto,
   verde neon, vidro, cantos de 20px. CSS puro de propósito: o deploy não tem build.
   Assinatura visual: o "sinal" — uma linha de luz verde que marca o que está vivo
   (item ativo do menu, topo dos indicadores, foco). */

:root {
    --af-canvas: #0B0E11;
    --af-surface: #1A1F25;
    --af-surface-2: #12161B;
    --af-accent: #00DD80;
    --af-accent-2: #00B86B;
    --af-accent-ink: #03150C;
    --af-muted: #94A3B8;
    --af-muted-2: #64748B;
    --af-border: rgba(255, 255, 255, .06);
    --af-border-2: rgba(255, 255, 255, .1);
    --af-glass: linear-gradient(180deg, rgba(26, 31, 37, .78), rgba(18, 22, 27, .78));
    --af-glow: 0 4px 15px rgba(0, 221, 128, .2);
    --af-glow-strong: 0 4px 30px rgba(0, 221, 128, .35);
    --af-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    --af-radius: 20px;
    --af-code-bg: #070A0D;
    --af-signal: linear-gradient(90deg, transparent, var(--af-accent) 50%, transparent);
}

/* ---------- base ---------- */
.fi-body, .fi-body:where(.dark, .dark *) { background: var(--af-canvas); color: #fff; }
.fi-body { font-feature-settings: "cv11", "ss01"; }

/* Brilho ambiente do site: verde no alto à esquerda, azul discreto à direita. */
.af-ambient {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(600px 480px at 8% -8%, rgba(0, 221, 128, .12), transparent 70%),
        radial-gradient(520px 460px at 100% 45%, rgba(59, 130, 246, .06), transparent 70%),
        radial-gradient(520px 420px at 35% 110%, rgba(0, 221, 128, .07), transparent 70%);
}
.fi-layout { position: relative; z-index: 1; }

/* ---------- marca ---------- */
.af-brand { display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap; }
.af-brand__logo { width: 34px; height: 34px; border-radius: 10px; box-shadow: var(--af-glow); }
.af-brand__name { font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; color: #fff; }
.af-brand__dot { color: var(--af-accent); }
.af-brand__tag {
    font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--af-accent); border: 1px solid rgba(0, 221, 128, .35); background: rgba(0, 221, 128, .08);
    border-radius: 999px; padding: .2rem .55rem;
}

/* ---------- topo e menu lateral: vidro ---------- */
.fi-topbar, .fi-topbar:where(.dark, .dark *) {
    background: rgba(11, 14, 17, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: none; border-bottom: 1px solid var(--af-border);
}
.fi-sidebar, .fi-sidebar:where(.dark, .dark *) {
    background: rgba(11, 14, 17, .55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-inline-end: 1px solid var(--af-border);
}
.fi-sidebar-header, .fi-sidebar-header:where(.dark, .dark *) { background: transparent; box-shadow: none; border-bottom: 1px solid var(--af-border); }

.fi-sidebar-group-label, .fi-sidebar-group-btn .fi-sidebar-group-label {
    font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--af-muted-2);
}
.fi-sidebar-item-btn { border-radius: 12px; transition: background-color .2s, color .2s; }
.fi-sidebar-item-btn:hover { background: rgba(255, 255, 255, .04); }
.fi-sidebar-item-label { color: #CBD5E1; font-weight: 600; }
.fi-sidebar-item-icon { color: var(--af-muted-2); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    position: relative; background: linear-gradient(90deg, rgba(0, 221, 128, .12), rgba(0, 221, 128, .02));
    box-shadow: inset 0 0 0 1px rgba(0, 221, 128, .14);
}
/* O "sinal": barra de luz no item ativo. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: ''; position: absolute; inset-inline-start: -2px; top: 22%; bottom: 22%; width: 3px;
    border-radius: 3px; background: var(--af-accent); box-shadow: 0 0 12px var(--af-accent);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #fff; }
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--af-accent); }

/* ---------- títulos ---------- */
.fi-header-heading { font-weight: 800; letter-spacing: -.035em; }
.fi-header:has(.af-eyebrow) { flex-direction: column-reverse; align-items: flex-start; }
.af-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .25rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--af-accent);
    border: 1px solid rgba(0, 221, 128, .3); background: rgba(0, 221, 128, .06); border-radius: 999px; padding: .35rem .8rem;
}
.af-eyebrow__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--af-accent); box-shadow: 0 0 10px var(--af-accent); }
.fi-header-subheading { color: var(--af-muted); }
.fi-breadcrumbs-item-label { color: var(--af-muted-2); }

/* ---------- superfícies: seções, tabelas, indicadores ---------- */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart .fi-section {
    background: var(--af-glass) !important; border-radius: var(--af-radius);
    --tw-ring-color: var(--af-border) !important; box-shadow: 0 0 0 1px var(--af-border), var(--af-shadow);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fi-section-header-heading { font-weight: 700; letter-spacing: -.01em; }
.fi-section-header-description { color: var(--af-muted); }
.fi-section:not(.fi-section-not-contained) > .fi-section-header { border-color: var(--af-border); }

/* Indicadores: rótulo em versalete espaçado, número grande, sinal no topo. */
.fi-wi-stats-overview-stat { overflow: hidden; transition: transform .25s, box-shadow .25s; }
.fi-wi-stats-overview-stat::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: var(--af-signal); opacity: .55;
}
.fi-wi-stats-overview-stat:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0, 221, 128, .18), var(--af-shadow), var(--af-glow); }
.fi-wi-stats-overview-stat-label {
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--af-muted);
}
.fi-wi-stats-overview-stat-value {
    font-size: 2.25rem; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #fff;
}
.fi-wi-stats-overview-stat-description { font-size: .8125rem; }

/* ---------- tabelas ---------- */
.fi-ta-header-cell { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--af-muted-2); }
.fi-ta-row { transition: background-color .15s; }
.fi-ta-row:hover { background: rgba(255, 255, 255, .025) !important; }
.fi-ta-ctn :where(thead, tbody, tr, th, td, .fi-ta-header, .fi-ta-header-toolbar, .fi-pagination) { border-color: var(--af-border) !important; }
.fi-ta-header-ctn, .fi-ta-header-toolbar { background: transparent !important; }
.fi-ta-table > thead, .fi-ta-table > thead > tr { background: rgba(255, 255, 255, .02) !important; }

/* ---------- botões ---------- */
.fi-btn { border-radius: 12px; font-weight: 700; letter-spacing: -.005em; }
.fi-btn:not(.fi-outlined).fi-color-primary:not(label) {
    background: var(--af-accent); color: var(--af-accent-ink); box-shadow: var(--af-glow);
}
.fi-btn:not(.fi-outlined).fi-color-primary:not(label) > .fi-icon { color: var(--af-accent-ink); }
.fi-btn:not(.fi-outlined).fi-color-primary:not(label):hover {
    background: #00C270; color: var(--af-accent-ink); box-shadow: var(--af-glow-strong); transform: translateY(-1px);
}
.fi-btn.fi-color-gray:not(label), .fi-btn:not(.fi-color):not(label) {
    background: rgba(26, 31, 37, .7); box-shadow: 0 0 0 1px var(--af-border-2);
}

/* ---------- campos ---------- */
.fi-input-wrp, .fi-input-wrp:where(.dark, .dark *) {
    background: rgba(11, 14, 17, .6); border-radius: 12px;
    --tw-ring-color: var(--af-border-2) !important; box-shadow: 0 0 0 1px var(--af-border-2);
}
.fi-input-wrp:focus-within { box-shadow: 0 0 0 1px rgba(0, 221, 128, .6), 0 0 0 4px rgba(0, 221, 128, .12) !important; }
.fi-fo-field-label-content { font-weight: 600; }

/* ---------- dropdowns, modais, badges ---------- */
.fi-dropdown-panel, .fi-modal-window {
    background: #12161B !important; border-radius: 16px; box-shadow: 0 0 0 1px var(--af-border-2), 0 30px 60px rgba(0, 0, 0, .6) !important;
}
.fi-badge { border-radius: 999px; font-weight: 700; }
.fi-badge.fi-color-gray, .fi-badge:not(.fi-color) {
    background: rgba(148, 163, 184, .12) !important; color: #CBD5E1 !important; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .2);
}

/* ---------- login e telas simples ---------- */
.fi-simple-layout { position: relative; z-index: 1; }
.fi-simple-main, .fi-simple-main:where(.dark, .dark *) {
    background: var(--af-glass); border-radius: 24px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 0 0 1px var(--af-border-2), 0 30px 80px rgba(0, 0, 0, .55);
}
.fi-simple-main::before {
    content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: var(--af-signal);
}
.fi-simple-main { position: relative; }
.fi-simple-header-heading { font-weight: 800; letter-spacing: -.035em; }

.af-stack { display: grid; gap: 1.5rem; }

/* Chaves e snippets */
.af-copyrow { display: flex; align-items: center; gap: .75rem; }
.af-secret {
    flex: 1; overflow-x: auto; padding: .75rem 1rem; border-radius: .5rem;
    background: var(--af-code-bg); color: #fcd34d; font: .875rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.af-keys { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.af-keys dt { font-size: .875rem; font-weight: 500; color: var(--af-muted); }
.af-mono { margin-top: .25rem; font: .875rem ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.af-code { position: relative; }
.af-code pre {
    margin: 0; overflow-x: auto; padding: 1rem 6rem 1rem 1rem; border-radius: .5rem;
    background: var(--af-code-bg); color: #e5e7eb; font: .75rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre;
}
.af-code__copy { position: absolute; top: .5rem; right: .5rem; }

/* Prévia da notificação */
.af-preview__phone {
    border-radius: 1.75rem; padding: 1.25rem .875rem 1.5rem;
    background: linear-gradient(160deg, #1f2937, #0f172a 60%, #052e1f);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.af-preview__clock { text-align: center; color: #f9fafb; font: 300 2.25rem/1 system-ui, sans-serif; margin-bottom: 1rem; letter-spacing: .02em; }
.af-preview__card {
    border-radius: 1rem; padding: .75rem .875rem; background: rgba(255, 255, 255, .88); color: #111827;
    backdrop-filter: blur(12px); font-family: system-ui, -apple-system, sans-serif;
}
.af-preview__head { display: flex; align-items: center; gap: .375rem; font-size: .6875rem; color: #4b5563; text-transform: uppercase; letter-spacing: .03em; }
.af-preview__icon { width: 1.125rem; height: 1.125rem; border-radius: .25rem; object-fit: cover; }
.af-preview__icon--empty { display: inline-block; background: var(--af-accent); }
.af-preview__app { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-preview__time { text-transform: none; }
.af-preview__title { margin-top: .375rem; font-weight: 600; font-size: .875rem; overflow-wrap: anywhere; }
.af-preview__body { font-size: .8125rem; color: #374151; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.af-preview__image { margin-top: .5rem; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: .5rem; }
.af-preview__note { margin-top: .75rem; font-size: .75rem; color: var(--af-muted); }

/* Relatório da campanha */
.af-report { display: grid; gap: 1.5rem; }
.af-report__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.af-report__meta { margin-top: .75rem; font-size: .875rem; color: var(--af-muted); }
.af-report__code { margin-top: .125rem; font: .75rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--af-muted); overflow-wrap: anywhere; }
.af-link { color: var(--af-accent); text-decoration: underline; }
.af-dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; font-size: .875rem; }
.af-dl dt { color: var(--af-muted); }
.af-inline-badge { display: inline-flex; margin: 0 .25rem .25rem 0; }
.af-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.af-table th { text-align: left; font-weight: 500; color: var(--af-muted); padding: .5rem .25rem; border-bottom: 1px solid var(--af-border); }
.af-table td { padding: .75rem .25rem; border-bottom: 1px solid var(--af-border); vertical-align: top; }
.af-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Primeiros passos */
.af-steps { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.af-step {
    display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem;
    border-radius: .75rem; border: 1px solid var(--af-border);
}
.af-step--current { border-color: var(--af-accent); box-shadow: 0 0 0 1px var(--af-accent); }
.af-step--done { opacity: .6; }
.af-step__marker {
    flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px;
    font-weight: 600; font-size: .8125rem; border: 1px solid var(--af-border);
}
.af-step--done .af-step__marker { background: var(--af-accent); border-color: var(--af-accent); color: #fff; }
.af-step__check { width: 1rem; height: 1rem; }
.af-step__text { flex: 1; display: grid; font-size: .875rem; }
.af-step__text span { color: var(--af-muted); }

@media (max-width: 640px) {
    .af-step { flex-wrap: wrap; }
    .af-code pre { padding-right: 1rem; padding-top: 2.75rem; }
}