/* Ecossistema Felipe — visual baseado no painel admin da 3F.
   --accent muda conforme a área da vida (definido no <body>). */

:root {
    --bg: #F4F5F1;
    --surface: #FFFFFF;
    --surface-2: #F7F8F5;
    --border: #E6E8E1;
    --text: #1A1F1B;
    --muted: #6B736C;
    --side-bg: #111A15;
    --side-text: #C9D2CB;
    --side-muted: #7E8A82;
    --side-hover: #1C2922;
    --danger: #DC2626;
    --danger-bg: #FEF2F2;
    --warn: #D97706;
    --warn-bg: #FFFBEB;
    --ok: #16A34A;
    --ok-bg: #F0FDF4;
    --info-bg: #F1F7F2;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(16, 24, 20, .04);
    --accent: #15803D;
}

:root[data-theme="dark"] {
    --bg: #0C110E;
    --surface: #141B17;
    --surface-2: #19211C;
    --border: #243029;
    --text: #E8ECE9;
    --muted: #8D9891;
    --side-bg: #0A0F0C;
    --side-hover: #16201A;
    --danger-bg: #2A1212;
    --warn-bg: #2A2110;
    --ok-bg: #102216;
    --info-bg: #13201A;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------- Estrutura ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 264px; flex-shrink: 0;
    background: var(--side-bg); color: var(--side-text);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: 18px 14px 28px;
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; }
.side-brand strong { display: block; color: #fff; font-size: 15px; }
.side-brand small { color: var(--side-muted); font-size: 11px; letter-spacing: .12em; }
.brand-mark {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--accent); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.side-label {
    color: var(--side-muted); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 18px 10px 6px;
}
.side-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px; margin: 1px 0;
    color: var(--side-text); font-weight: 500;
}
.side-link:hover { background: var(--side-hover); color: #fff; }
.side-link.active { background: var(--accent); color: #fff; }
.side-link .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); margin: 0 4px; }
.side-sub { margin: 2px 0 6px 26px; border-left: 1px solid #25332B; }
.side-sublink { display: block; padding: 6px 12px; color: var(--side-muted); font-size: 13px; }
.side-sublink:hover, .side-sublink.current { color: #fff; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 28px; background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 5;
}
.page-title { font-size: 19px; font-weight: 600; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.icon-btn {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    display: grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }
.user-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 14px 4px 4px; border: 1px solid var(--border); border-radius: 999px;
}
.user-chip strong { display: block; font-size: 13px; line-height: 1.2; }
.user-chip small { color: var(--muted); font-size: 11px; }
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600;
}
.content { padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 18px; }
.only-mobile { display: none; }

/* ---------- Componentes ---------- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.card-head p { margin: 4px 0 0; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: 10px; font: inherit; font-weight: 600;
    border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent); filter: brightness(.93); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 13px; }
input, select, textarea {
    font: inherit; color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.alert { padding: 12px 14px; border-radius: 12px; border: 1px solid; }
.alert-danger { background: var(--danger-bg); border-color: #FCA5A5; color: var(--danger); }
.alert-ok { background: var(--ok-bg); border-color: #86EFAC; color: var(--ok); }
.alert-warn { background: var(--warn-bg); border-color: #FCD34D; color: var(--warn); }

.banner {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 18px;
}
.banner > span:first-child {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: grid; place-items: center; background: var(--info-bg); color: var(--accent);
}
.banner div { flex: 1; }
.banner-link { color: var(--accent); font-weight: 600; white-space: nowrap; }

.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }

.empty { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty p { margin: 0; }

/* ---------- Roda da Vida ---------- */
.wheel-page { display: grid; grid-template-columns: minmax(320px, 1.1fr) 1fr; gap: 18px; align-items: start; }
.wheel-card { display: flex; flex-direction: column; }
.wheel { width: 100%; max-width: 440px; margin: 0 auto; display: block; }
.wheel-slice path { stroke: var(--surface); stroke-width: 3; transition: transform .18s, opacity .18s; transform-origin: 200px 200px; }
.wheel-slice text { fill: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; pointer-events: none; }
.wheel-slice:hover path, .wheel-slice:focus path { transform: scale(1.04); }
.wheel:hover .wheel-slice:not(:hover) path { opacity: .55; }
.wheel-center { fill: var(--surface); stroke: var(--border); }
.wheel-center-t1 { fill: var(--text); font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.wheel-center-t2 { fill: var(--muted); font-size: 11px; }

.area-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.area-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; transition: border-color .15s; }
.area-card:hover { border-color: var(--c); }
.area-card strong { display: block; }
.area-card .chev { margin-left: auto; color: var(--muted); }
.area-icon {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent);
    color: var(--c, var(--accent));
}
.area-icon.lg { width: 54px; height: 54px; border-radius: 14px; }

.area-hero { display: flex; align-items: center; gap: 16px; }
.area-hero h2 { font-size: 22px; }
.area-hero p { margin: 2px 0 0; }
.sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sub-card { display: flex; align-items: center; gap: 14px; transition: border-color .15s; }
.sub-card:hover { border-color: var(--accent); }
.sub-card strong { display: block; }
.sub-card .badge { margin-left: auto; }
.sub-card.is-soon { opacity: .6; }
.sigla {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700;
}
.sigla.lg { width: 54px; height: 54px; font-size: 18px; }

/* ---------- Compras ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.kpi { padding: 16px 18px; }
.kpi-head { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--muted); }
.kpi-icon {
    width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    background: var(--info-bg); color: var(--accent);
}
.kpi-val { font-size: 28px; font-weight: 700; margin: 8px 0 2px; }

.chat-box {
    min-height: 160px; border: 1px dashed var(--border); border-radius: 12px;
    display: grid; place-items: center; padding: 20px; background: var(--surface-2);
}
.chat-input { display: flex; gap: 10px; margin-top: 12px; }
.chat-input input { flex: 1; }

/* ---------- Login ---------- */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.auth-wrap { width: 100%; max-width: 400px; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand strong { display: block; font-size: 15px; }
.auth-brand small { color: var(--muted); }
.auth-title { font-size: 22px; margin-bottom: 8px; }
.auth-card .muted { margin: 0 0 14px; }
.auth-card .alert { margin-bottom: 14px; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
    .wheel-page { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
    .only-mobile { display: grid; }
    .sidebar { position: fixed; left: -280px; z-index: 20; transition: left .2s; }
    .sidebar.open { left: 0; }
    .topbar { padding: 12px 16px; }
    .content { padding: 16px; }
    .user-chip div { display: none; }
    .user-chip { padding: 4px; }
    .banner { flex-wrap: wrap; }
}

/* ---------- 3F ONE: tabelas, semáforo, formulários ---------- */
.badge-muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge-info { background: #EFF6FF; color: #1D4ED8; }
:root[data-theme="dark"] .badge-info { background: #10203A; color: #93C5FD; }
.alert-info { background: var(--info-bg); border-color: var(--border); color: var(--text); }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.toolbar input, .toolbar select { padding: 8px 10px; }
.toolbar .grow { flex: 1; min-width: 200px; }
.btn-sm { padding: 7px 12px; font-size: 13px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
    background: var(--surface-2); padding: 9px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; white-space: nowrap; }
table.t td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
table.t .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.t input.qtd { width: 84px; padding: 6px 8px; text-align: right; }
table.t tfoot td { font-weight: 700; background: var(--surface-2); }
.t-desc { min-width: 260px; }
.t-desc a { font-weight: 500; }
.t-desc a:hover { color: var(--accent); }

.sinal { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; }
.sinal-vermelho { background: var(--danger); }
.sinal-amarelo { background: #EAB308; }
.sinal-verde { background: var(--ok); }
.sinal-cinza { background: #A3A3A3; }
.curva { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-weight: 700; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); }
.curva-A { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: transparent; }
.conf-baixa { color: var(--danger); font-weight: 600; }
.conf-media { color: var(--warn); font-weight: 600; }
.porque { margin: 6px 0 0; padding-left: 16px; color: var(--muted); font-size: 12.5px; }
.porque li { margin: 1px 0; }
details.why summary { cursor: pointer; color: var(--muted); font-size: 12px; list-style: none; }
details.why summary::before { content: '▸ '; }
details.why[open] summary::before { content: '▾ '; }
.serie { display: flex; gap: 2px; align-items: flex-end; height: 26px; }
.serie span { width: 6px; background: color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 2px 2px 0 0; min-height: 1px; }
.serie span.pico { background: var(--warn); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.form-grid label, .form-col label { display: flex; flex-direction: column; gap: 5px; font-weight: 500; font-size: 13px; }
.form-grid .full { grid-column: 1 / -1; }
.hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 20px; }
.stat small { color: var(--muted); }
.pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 360px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.check-grid label { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 4px; border-radius: 6px; }
.check-grid label:hover { background: var(--surface-2); }
.check-grid input[type=checkbox] { width: 16px; height: 16px; }
.resumo-pedido { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.sticky-bar { position: sticky; bottom: 0; z-index: 4; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 12px 16px; box-shadow: 0 -4px 16px rgba(0,0,0,.06); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
textarea.msg { width: 100%; min-height: 220px; font-family: inherit; }
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding: 4px; }
.chat-msg { padding: 10px 14px; border-radius: 12px; max-width: 86%; white-space: pre-wrap; }
.chat-msg.eu { align-self: flex-end; background: var(--accent); color: #fff; }
.chat-msg.ia { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }
.chat-msg small { display: block; opacity: .7; font-size: 11px; margin-top: 4px; }
.pagin { display: flex; gap: 6px; align-items: center; }
.bars-mini { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.bars-mini div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.bars-mini i { display: block; width: 100%; background: color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 6px 6px 0 0; }
@media (max-width: 960px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
    .content { padding: 0; }
}