/* Assessor · pele neumórfica clara (referência do Pedro, 08/10/2026): fundo claro, cartões em relevo com sombra dupla,
   campos afundados, azul elétrico só em ação e dado vivo. Uma folha só: não depende do kit da Aurora. */
:root {
  color-scheme: light;
  --bg: #e9edf5;
  --bg-2: #eef1f8;
  --fg: #2b3245;
  --muted: #7d879c;
  --dim: #a3abbd;
  --primary: #3b5bfd;
  --primary-2: #2f4ae8;
  --primary-soft: #dfe6ff;
  --good: #22b07d;
  --good-soft: #d9f5ea;
  --bad: #ff4d6d;
  --bad-soft: #ffe0e6;
  --warn: #f5a623;
  --warn-soft: #fff0d6;
  --sh-d: rgba(166, 180, 205, .55);
  --sh-l: rgba(255, 255, 255, .95);
  --raised: 9px 9px 20px var(--sh-d), -9px -9px 20px var(--sh-l);
  --raised-sm: 5px 5px 12px var(--sh-d), -5px -5px 12px var(--sh-l);
  --inset: inset 4px 4px 9px rgba(166,180,205,.5), inset -4px -4px 9px rgba(255,255,255,.95);
  --inset-sm: inset 2px 2px 5px rgba(166,180,205,.5), inset -2px -2px 5px rgba(255,255,255,.95);
  --blue-glow: 0 10px 22px rgba(59,91,253,.35);
  --font: 'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --r: 22px; --r-sm: 14px; --r-pill: 999px;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.45; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 600; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 6px; }
h1 em, .h-screen em { font-style: normal; color: var(--primary); }
h2 { font-size: 16px; font-weight: 600; margin: 26px 0 10px; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.h-screen { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.subtitle { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; max-width: 860px; }
.eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--primary); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.eyebrow.amber { color: var(--warn); } .eyebrow.amber::before { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.lbl, .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); } .dim { color: var(--dim); } .mono { font-family: var(--mono); }
.accent { color: var(--good); } .magenta { color: var(--bad); } .amber { color: var(--warn); }
.nota { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }
code { font-family: var(--mono); font-size: 12px; background: var(--bg); box-shadow: var(--inset-sm); padding: 2px 7px; border-radius: 8px; word-break: break-all; }
pre { font-size: 13px; line-height: 1.5; }
.sep { border: 0; border-top: 1px solid rgba(166,180,205,.35); margin: 6px 0; }

/* casca */
.casca { display: flex; min-height: 100vh; }
.lateral { width: 232px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; padding: 22px 16px; position: sticky; top: 0; height: 100vh; }
.marca { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: var(--fg); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.marca:hover { text-decoration: none; }
.marca em { font-style: normal; color: var(--primary); }
.marca-ponto { width: 14px; height: 14px; border-radius: 5px; background: linear-gradient(135deg, #5b78ff, var(--primary-2)); box-shadow: var(--blue-glow); flex-shrink: 0; }
.lateral nav { display: flex; flex-direction: column; gap: 10px; }
.lateral nav a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; color: var(--muted); background: var(--bg); box-shadow: var(--raised-sm); transition: transform .12s, box-shadow .12s, color .12s; }
.lateral nav a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
.lateral nav a:hover { color: var(--fg); text-decoration: none; transform: translateY(-1px); }
.lateral nav a.active { color: #fff; background: linear-gradient(135deg, #5b78ff, var(--primary-2)); box-shadow: var(--blue-glow); }
.lateral nav a.active::before { background: #fff; }
.lateral-pe { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 4px; }
.quem { display: flex; flex-direction: column; gap: 2px; font-size: 13px; padding: 0 6px; }
.conteudo { flex: 1; min-width: 0; padding: 32px 36px 60px; max-width: 1380px; margin: 0 auto; }
.solta { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.caixa-login { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.novo-atalho { justify-content: center; }
@media (max-width: 860px) {
  .casca { flex-direction: column; }
  .lateral { width: auto; height: auto; position: static; flex-direction: row; align-items: center; gap: 8px; padding: 12px 14px; overflow-x: auto; }
  .lateral nav { flex-direction: row; white-space: nowrap; gap: 8px; }
  .lateral nav a { padding: 8px 12px; }
  .lateral-pe { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .quem, .novo-atalho { display: none; }
  .marca { padding: 4px 6px; white-space: nowrap; }
  .conteudo { padding: 18px 16px 60px; }
}

/* cartões */
.card { background: var(--bg); border-radius: var(--r); box-shadow: var(--raised); padding: 22px; margin: 0 0 16px; }
.card:hover { background: var(--bg); }
.glass, .glass-strong, .glass-soft { background: var(--bg); }
.row-flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 12px; flex-wrap: wrap; }
.sec-head h2 { margin: 0; }
.sec-head .note { font-size: 11.5px; color: var(--muted); }
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.voltar { display: inline-block; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.empty-state { padding: 34px 20px; text-align: center; color: var(--muted); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--bg); color: var(--fg); border: 0; border-radius: var(--r-pill); padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: var(--raised-sm); transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { box-shadow: var(--inset-sm); transform: none; }
.btn-primary { background: linear-gradient(135deg, #5b78ff, var(--primary-2)); color: #fff; font-weight: 600; box-shadow: var(--blue-glow); }
.btn-primary:hover { background: linear-gradient(135deg, #5b78ff, var(--primary-2)); opacity: .94; }
.btn-success { color: var(--good); font-weight: 600; }
.btn-danger { color: var(--bad); font-weight: 600; }
.btn-ghost { box-shadow: none; color: var(--muted); }
.btn-ghost:hover { color: var(--fg); box-shadow: var(--raised-sm); }
.btn-mini { padding: 6px 11px; font-size: 12px; }
button.btn:disabled { opacity: .5; cursor: not-allowed; }

/* campos */
input, select, textarea { font-family: inherit; color: var(--fg); }
.input { width: 100%; background: var(--bg); border: 0; border-radius: var(--r-sm); padding: 12px 16px; font-size: 14px; color: var(--fg); outline: none; font: inherit; box-shadow: var(--inset); }
.input:focus { box-shadow: var(--inset), 0 0 0 3px var(--primary-soft); }
.input::placeholder, textarea::placeholder { color: var(--dim); }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
textarea { line-height: 1.45; resize: vertical; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo-curto { padding: 8px 12px; border: 0; border-radius: 10px; background: var(--bg); box-shadow: var(--inset-sm); color: var(--fg); font-size: 13px; width: 150px; outline: none; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duas { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.duas-iguais { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; align-items: start; }
.lado { position: sticky; top: 24px; }
.etapa { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.etapa-topo { display: flex; align-items: center; gap: 12px; }
.etapa-topo h3 { margin: 0; font-size: 16px; }
.etapa-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #5b78ff, var(--primary-2)); box-shadow: var(--blue-glow); }
@media (max-width: 1060px) { .duas { grid-template-columns: 1fr; } .lado { position: static; } }
@media (max-width: 620px) { .grade-2 { grid-template-columns: 1fr; } }

/* opções grandes (saída / entrada) e chips */
.opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.opcoes-2 { grid-template-columns: 1fr 1fr; }
.opcao { position: relative; display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao > span { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--bg); box-shadow: var(--raised-sm); transition: box-shadow .15s, color .15s; }
.opcao small { font-size: 12px; color: var(--muted); }
.opcao input:checked + span { box-shadow: var(--inset); color: var(--primary); }
.opcao input:checked + span small { color: var(--primary); opacity: .8; }
.opcao input:focus-visible + span { outline: 3px solid var(--primary-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.chip { position: relative; cursor: pointer; display: inline-block; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--bg); box-shadow: var(--raised-sm); font-size: 13px; font-weight: 500; color: var(--muted); transition: all .15s; }
.chip > span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dim); box-shadow: var(--inset-sm); }
.chip:hover > span { color: var(--fg); }
.chip input:checked + span { background: linear-gradient(135deg, #5b78ff, var(--primary-2)); color: #fff; box-shadow: var(--blue-glow); }
.chip input:checked + span::before { background: #fff; box-shadow: none; }
.chip input:focus-visible + span { outline: 3px solid var(--primary-soft); }
.q-campos[hidden] { display: none; }
@media (max-width: 620px) { .opcoes, .opcoes-2 { grid-template-columns: 1fr; } }

/* etiquetas e avisos */
.tag { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap; background: var(--bg); color: var(--muted); box-shadow: var(--inset-sm); }
.tag.good { color: var(--good); background: var(--good-soft); box-shadow: none; }
.tag.bad { color: var(--bad); background: var(--bad-soft); box-shadow: none; }
.tag.warn { color: #c47c00; background: var(--warn-soft); box-shadow: none; }
.tag.sys { color: var(--primary); background: var(--primary-soft); box-shadow: none; }
a.tag:hover { text-decoration: none; }
.flash { border-radius: var(--r-sm); padding: 12px 16px; font-size: 13.5px; margin: 0 0 16px; font-weight: 500; }
.flash.success { background: var(--good-soft); color: #137a55; }
.flash.error { background: var(--bad-soft); color: #c2294a; }
.status-badge { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: var(--r-pill); color: #fff; }
.estado { display: flex; align-items: center; gap: 16px; border-radius: var(--r); padding: 18px 22px; margin-bottom: 18px; flex-wrap: wrap; background: var(--bg); box-shadow: var(--raised); }
.estado-luz { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--warn); box-shadow: 0 0 0 5px var(--warn-soft); }
.estado.ligado .estado-luz { background: var(--good); box-shadow: 0 0 0 5px var(--good-soft); animation: pulse 1.8s ease-in-out infinite; }
.estado.alerta .estado-luz { background: var(--bad); box-shadow: 0 0 0 5px var(--bad-soft); animation: pulse 1.8s ease-in-out infinite; }
.estado-texto { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.estado-texto > strong { font-size: 15.5px; color: var(--fg); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* números */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 18px; margin-bottom: 18px; }
.numero { margin: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.numero .num { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.numero .num.accent { color: var(--good); } .numero .num.magenta { color: var(--bad); } .numero .num.amber { color: var(--warn); } .numero .num.dim { color: var(--dim); }
.hint { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.anel { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.anel svg { width: 84px; height: 84px; }
.anel .anel-fundo { fill: none; stroke: var(--bg); stroke-width: 10; filter: drop-shadow(2px 2px 3px rgba(166,180,205,.6)) drop-shadow(-2px -2px 3px rgba(255,255,255,.9)); }
.anel .anel-arco { fill: none; stroke: var(--primary); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.anel .anel-txt { font-size: 15px; font-weight: 700; fill: var(--fg); text-anchor: middle; dominant-baseline: central; }

/* gráfico */
.grafico-card { padding: 20px 22px 14px; }
.grafico { --altura: 150px; }
.grafico-area { position: relative; height: var(--altura); }
.curva { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.curva .zero { stroke: rgba(125,135,156,.5); stroke-dasharray: 3 4; }
.grafico .ponto { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2.5px solid var(--primary); box-shadow: 2px 2px 5px rgba(166,180,205,.6); }
.grafico-eixo { position: relative; height: 16px; margin-top: 6px; }
.grafico-eixo span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.grafico-eixo span.ini { transform: none; } .grafico-eixo span.fim { transform: translateX(-100%); }

/* tabela */
.tabela { padding: 0; overflow-x: auto; }
.tabela table { min-width: 640px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid rgba(166,180,205,.35); white-space: nowrap; }
tbody td { padding: 12px 16px; border-bottom: 1px solid rgba(166,180,205,.22); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: rgba(255,255,255,.35); }
.card table a { color: var(--fg); }
table th.num, table td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; font-weight: 500; }
table th.num { font-size: 10.5px; font-weight: 600; }
td.quando { white-space: nowrap; font-family: var(--mono); font-size: 12px; }
td.quando .previsto { display: block; color: var(--dim); font-size: 11px; margin-top: 2px; font-family: var(--font); }
td.acoes { white-space: nowrap; text-align: right; }
td.acoes form { display: inline-block; margin: 0; }
tr.pago td, tr.recebido td { opacity: .55; }
tr.pago td strong, tr.recebido td strong { text-decoration: line-through; }
tr.atrasado td.quando { color: var(--bad); }

/* filtros */
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toggle.pill { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--bg); box-shadow: var(--inset-sm); }
.toggle.pill a { display: inline-block; padding: 7px 14px; border-radius: var(--r-pill); color: var(--muted); font-size: 13px; font-weight: 500; }
.toggle.pill a:hover { color: var(--fg); text-decoration: none; }
.toggle.pill a.active { background: linear-gradient(135deg, #5b78ff, var(--primary-2)); color: #fff; box-shadow: var(--blue-glow); }
.busca .input { padding: 9px 14px; min-width: 200px; }

/* calendário */
.calendario { padding: 14px; overflow-x: auto; }
.cal-cabeca { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 0 0 10px; }
.cal-cabeca span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-left: 10px; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; min-width: 720px; }
.dia { min-height: 100px; border-radius: var(--r-sm); background: var(--bg); box-shadow: var(--inset-sm); padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.dia.vazio { box-shadow: none; background: transparent; }
.dia.passado { opacity: .65; }
.dia.hoje { box-shadow: var(--raised-sm); opacity: 1; }
.dia-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dia-n { font-size: 12px; font-weight: 600; color: var(--muted); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; }
.dia-n:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }
.dia.hoje .dia-n { background: linear-gradient(135deg, #5b78ff, var(--primary-2)); color: #fff; box-shadow: var(--blue-glow); }
.dia-total { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-left: auto; }
.dia-total.accent { color: var(--good); }
.dia-itens { display: flex; flex-direction: column; gap: 4px; }
.item { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; padding: 4px 8px; border-radius: 8px; color: var(--fg); line-height: 1.25; background: #fff; box-shadow: 2px 2px 5px rgba(166,180,205,.45); }
.item:hover { text-decoration: none; transform: translateY(-1px); }
.item.saida { border-left: 3px solid var(--primary); }
.item.entrada { border-left: 3px solid var(--good); }
.item.pago, .item.recebido { opacity: .55; }
.item.pago .item-nome, .item.recebido .item-nome { text-decoration: line-through; }
.item.atrasado { border-left-color: var(--bad); background: var(--bad-soft); }
.item-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-valor { font-family: var(--mono); white-space: nowrap; }
.mais { font-size: 11px; color: var(--muted); padding-left: 6px; }

/* whatsapp */
.exemplo { background: var(--bg); box-shadow: var(--inset); border-radius: var(--r-sm); padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; margin: 0; white-space: pre-wrap; }
.acoes-lado { display: flex; flex-direction: column; gap: 10px; }
.fundo-zap { border-radius: var(--r-sm); padding: 16px 14px; background: #e5ddd5; box-shadow: var(--inset); min-height: 150px; }
.bolha { background: #d9fdd3; color: #111b21; border-radius: 12px 12px 2px 12px; padding: 8px 10px; max-width: 560px; margin-left: auto; font-size: 13.5px; line-height: 1.42; box-shadow: 0 1px 1px rgba(0,0,0,.12); word-break: break-word; }
.bolha pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13.5px; line-height: 1.42; background: none; border: 0; padding: 0; color: inherit; }
.bolha.deles { background: #fff; border-radius: 2px 12px 12px 12px; margin-left: 0; }
.bolha .hora { display: block; font-size: 10.5px; color: rgba(17,27,33,.5); margin-top: 4px; text-align: right; }
.pv-vazio { color: rgba(17,27,33,.5); font-style: italic; margin: 0; }
.conversa { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; }
.msg-linha { display: flex; }
.msg-linha.recebida { justify-content: flex-start; }
.msg-linha.enviada { justify-content: flex-end; }
.editar-rec { display: inline-block; vertical-align: top; margin-right: 6px; }
.editar-rec summary { list-style: none; display: inline-flex; cursor: pointer; }
.editar-rec summary::-webkit-details-marker { display: none; }
.form-rec { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; min-width: 220px; }
.form-rec .input { padding: 8px 12px; font-size: 13px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(166,180,205,.6); border-radius: 999px; }

/* larguras pequenas: nada estoura pro lado */
body { overflow-x: hidden; }
.conteudo { max-width: min(1380px, 100%); }
.numeros > .card { min-width: 0; }
@media (max-width: 760px) {
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .numero .num { font-size: 20px; }
  .anel { grid-template-columns: 64px 1fr; }
  .anel svg { width: 64px; height: 64px; }
  .estado-texto { min-width: 0; }
  h1 { font-size: 23px; }
  .topo { gap: 12px; }
}
@media (max-width: 440px) {
  .numeros { grid-template-columns: 1fr; }
  .numero .num { font-size: 22px; }
}
.anel-tile { grid-column: span 2; }
.anel .hint { white-space: nowrap; }
@media (max-width: 760px) { .anel-tile { grid-column: span 2; } }
@media (max-width: 440px) { .anel-tile { grid-column: span 1; } .anel .hint { white-space: normal; } }

/* ===================== tema escuro ===================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c2130; --bg-2: #202637;
  --fg: #e8ebf4; --muted: #9aa4bb; --dim: #6f7890;
  --primary: #5b78ff; --primary-2: #3b5bfd; --primary-soft: rgba(91,120,255,.18);
  --good: #3ad29a; --good-soft: rgba(58,210,154,.16);
  --bad: #ff6b85; --bad-soft: rgba(255,107,133,.16);
  --warn: #ffb547; --warn-soft: rgba(255,181,71,.16);
  --sh-d: rgba(0,0,0,.55); --sh-l: rgba(255,255,255,.055);
  --inset: inset 4px 4px 9px rgba(0,0,0,.5), inset -4px -4px 9px rgba(255,255,255,.05);
  --inset-sm: inset 2px 2px 5px rgba(0,0,0,.5), inset -2px -2px 5px rgba(255,255,255,.05);
  --blue-glow: 0 10px 22px rgba(59,91,253,.45);
}
:root[data-theme="dark"] .tag.warn { color: var(--warn); }
:root[data-theme="dark"] .flash.success { color: var(--good); } :root[data-theme="dark"] .flash.error { color: var(--bad); }
:root[data-theme="dark"] .item { background: #262c3e; box-shadow: 2px 2px 5px rgba(0,0,0,.45); }
:root[data-theme="dark"] .item.atrasado { background: var(--bad-soft); }
:root[data-theme="dark"] .tabela tbody tr:hover td { background: rgba(255,255,255,.03); }
:root[data-theme="dark"] .grafico .ponto { background: var(--bg); box-shadow: 2px 2px 5px rgba(0,0,0,.5); }
:root[data-theme="dark"] .fundo-zap { background: #0b141a; }
:root[data-theme="dark"] .bolha { background: #005c4b; color: #e9edef; } :root[data-theme="dark"] .bolha.deles { background: #202c33; }
:root[data-theme="dark"] .bolha .hora, :root[data-theme="dark"] .pv-vazio { color: rgba(233,237,239,.55); }
:root[data-theme="dark"] .anel .anel-fundo { filter: drop-shadow(2px 2px 3px rgba(0,0,0,.6)) drop-shadow(-2px -2px 3px rgba(255,255,255,.06)); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
html { transition: background-color .35s ease; }
body, .card, .btn, .input, .lateral nav a, .dia, .tag, .estado { transition: background-color .35s ease, color .35s ease, box-shadow .35s ease; }

/* o círculo que abre do botão (View Transitions). O resto não anima pra não piscar. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2; }

/* ===================== o botão de tema ===================== */
.lateral-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.solta-tema { position: fixed; top: 18px; right: 18px; }
.tema { position: relative; width: 66px; height: 34px; border: 0; border-radius: var(--r-pill); background: var(--bg); box-shadow: var(--inset); cursor: pointer; padding: 0; flex-shrink: 0; }
.tema:focus-visible { outline: 3px solid var(--primary-soft); }
.tema-pino { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffd36b, #ff9f1c); box-shadow: 2px 2px 6px rgba(0,0,0,.25); transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .5s ease; }
.tema[aria-pressed="true"] .tema-pino { transform: translateX(32px); background: linear-gradient(135deg, #5b78ff, #2f4ae8); }
.sol-lua { width: 18px; height: 18px; color: #fff; }
.sol-lua .sol { fill: currentColor; transition: transform .5s cubic-bezier(.34,1.56,.64,1); transform-origin: center; }
.sol-lua .raios { stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-origin: center; transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; }
.sol-lua .lua-corte { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.tema[aria-pressed="true"] .sol-lua .sol { transform: scale(1.5); }
.tema[aria-pressed="true"] .sol-lua .raios { transform: rotate(-45deg) scale(0); opacity: 0; }
.tema[aria-pressed="true"] .sol-lua .lua-corte { transform: translateX(-8px) translateY(2px); }
@media (prefers-reduced-motion: reduce) { .tema-pino, .sol-lua .sol, .sol-lua .raios, .sol-lua .lua-corte, body, .card, .btn, .input, .lateral nav a, .dia, .tag, .estado, html { transition: none; } }

/* ===================== celular: barra de abas embaixo, cartões no lugar de tabela ===================== */
.lateral nav a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.lateral nav a::before { display: none; }
.barra-mobile { display: none; }
@media (max-width: 860px) {
  .lateral { padding: 10px 14px; gap: 10px; }
  .lateral nav { display: none; }
  .lateral-topo { flex: 1; }
  .lateral-pe { margin-left: 0; }
  .conteudo { padding: 16px 16px calc(84px + env(safe-area-inset-bottom)); }
  .barra-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -8px 20px var(--sh-d); }
  .barra-mobile a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: var(--r-sm); font-size: 10px; font-weight: 500; color: var(--muted); text-decoration: none; min-height: 50px; justify-content: center; }
  .barra-mobile a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .barra-mobile a.active { color: #fff; background: linear-gradient(135deg, #5b78ff, var(--primary-2)); box-shadow: var(--blue-glow); }
  .btn, .input { min-height: 44px; }
  .btn-mini { min-height: 36px; }
  .topo { flex-direction: column; align-items: stretch; }
  .topo .row-flex { justify-content: flex-start; }
  h1 { font-size: 24px; }
}
@media (max-width: 640px) {
  /* a tabela de lançamentos vira uma pilha de cartões */
  .tabela { overflow: visible; padding: 10px; box-shadow: none; background: transparent; }
  .tabela table { min-width: 0; display: block; }
  .tabela thead { display: none; }
  .tabela tbody { display: flex; flex-direction: column; gap: 12px; }
  .tabela tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "oque valor" "quando situacao" "acoes acoes"; gap: 6px 10px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--bg); box-shadow: var(--raised-sm); }
  .tabela tbody td { display: block; padding: 0; border: 0; }
  .tabela td.oque { grid-area: oque; font-size: 14px; }
  .tabela td.num { grid-area: valor; font-size: 15px; font-weight: 600; align-self: start; }
  .tabela td.quando { grid-area: quando; font-size: 12px; }
  .tabela td.quando .previsto { display: inline; margin-left: 6px; }
  .tabela td.situacao { grid-area: situacao; text-align: right; }
  .tabela td.tipo { display: none; }
  .tabela td.acoes { grid-area: acoes; text-align: left; }
  .tabela td.acoes form { display: block; }
  .tabela td.acoes .btn { width: 100%; }
  .tabela tbody tr:hover td { background: transparent; }
  tr.pago, tr.recebido { opacity: .6; }
  tr.pago td, tr.recebido td { opacity: 1; }
  .filtros .toggle.pill { width: 100%; overflow-x: auto; }
  .busca, .busca .input { width: 100%; }
  .cal-grade { min-width: 560px; }
}
.marca { white-space: nowrap; font-size: 16px; padding-right: 0; }
.tema { width: 58px; height: 32px; }
.tema-pino { width: 24px; height: 24px; }
.tema[aria-pressed="true"] .tema-pino { transform: translateX(26px); }
/* no celular o atalho da lateral some (a barra de abas e o botão da tela já cobrem) */
@media (max-width: 860px) { .lateral-pe .novo-atalho, .lateral .quem { display: none; } }

/* ---- botão de tema no canto direito da tela (pedido do Pedro, 08/10) ---- */
.tema-fixo { position: fixed; top: 18px; right: 18px; z-index: 60; }
.topo { padding-right: 84px; }
.quem .sair { border: 0; background: none; padding: 0; margin-top: 2px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; text-align: left; }
.quem .sair:hover { color: var(--bad); }
@media (max-width: 860px) { .tema-fixo { top: 9px; right: 12px; } .lateral { padding-right: 84px; } .topo { padding-right: 0; } }

/* ---- gráficos de média ---- */
.numeros.medias { margin-top: -6px; }
.duas { display: grid; grid-template-columns: 3fr 2fr; gap: 22px; margin-top: 22px; }
@media (max-width: 980px) { .duas { grid-template-columns: 1fr; } }
.grafico.barras svg { width: 100%; height: 100%; display: block; overflow: visible; }
.grafico.barras .barra.entrada { fill: var(--good); opacity: .85; }
.grafico.barras .barra.saida { fill: var(--primary); opacity: .85; }
.grafico.barras .barra.saida.atual { opacity: .45; }
.grafico.barras .media { stroke: var(--warn); stroke-width: 2; }
.grafico.barras .valor { position: absolute; transform: translate(-50%, -140%); font-size: 10.5px; font-weight: 600; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.grafico-eixo.centrado span { transform: translateX(-50%); }
.grafico-eixo.centrado span.atual { color: var(--fg); font-weight: 600; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda .cor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legenda .cor.entrada { background: var(--good); } .legenda .cor.saida { background: var(--primary); } .legenda .cor.media { background: var(--warn); height: 3px; width: 14px; }
.categorias { display: flex; flex-direction: column; gap: 12px; }
.cat-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.cat-topo strong { font-size: 13px; white-space: nowrap; } .cat-topo em { font-style: normal; font-weight: 400; font-size: 11px; }
.cat-trilho { height: 10px; border-radius: 999px; box-shadow: var(--inset-sm); background: var(--bg); overflow: hidden; }
.cat-barra { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5b78ff, var(--primary-2)); box-shadow: var(--blue-glow); }

/* ---- faixa dos dados de exemplo ---- */
.estado.exemplo { margin-bottom: 20px; font-family: var(--font); }
.estado.exemplo .estado-texto, .estado.exemplo .estado-texto * { font-family: var(--font); }
.estado.exemplo .estado-luz { background: var(--warn); box-shadow: 0 0 0 5px var(--warn-soft); }

/* ---- Como usar ---- */
.guia { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.guia-bloco { padding: 24px 26px; }
.guia-bloco h2 { margin: 0 0 10px; font-size: 17px; }
.guia-bloco p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--fg); }
.guia-bloco p:last-child { margin-bottom: 0; }
.guia-bloco code { font-size: 12.5px; }
.passos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
.passos li::marker { color: var(--primary); font-weight: 600; }
.telas { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; font-size: 14px; line-height: 1.5; }
.telas dt { font-weight: 600; } .telas dd { margin: 0; color: var(--fg); }
.tabela-cmd { border-radius: var(--r-sm); box-shadow: var(--inset-sm); overflow: hidden; }
.tabela-cmd table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela-cmd th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 10px 14px; }
.tabela-cmd td { padding: 9px 14px; border-top: 1px solid rgba(125,135,156,.15); vertical-align: top; }
.tabela-cmd td.cmd { white-space: nowrap; width: 1%; }
.regras { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
@media (max-width: 640px) { .telas { grid-template-columns: 1fr; gap: 2px 0; } .telas dd { margin-bottom: 10px; } .tabela-cmd td.cmd { white-space: normal; } .guia-bloco { padding: 18px; } }