/* Uchi: layout e componentes. As cores vêm de uchi-tokens.css. */
@font-face {
  font-family: "Outfit";
  src: url("vendor/outfit-latin-wght.98ccc2b7f189.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-canvas); color: var(--color-ink); font: 15px/1.45 var(--font-sans); }
h1, h2 { font-family: var(--font-brand); line-height: 1.2; margin: 0; }
h1 { font-size: 26px; font-weight: 600; }
h2 { font-size: 16px; font-weight: 600; }
a { color: var(--color-link); }
ul { list-style: none; margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-p { width: 14px; height: 14px; }

/* Estrutura */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--color-surface); border-right: 1px solid var(--color-line); padding: 20px 12px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca img { display: block; height: 46px; margin: 0 0 22px 8px; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a, .link-menu { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--color-ink-soft); text-decoration: none; }
.menu a:hover, .link-menu:hover { background: var(--color-lane); }
.menu a.ativo { background: var(--color-brand-soft); color: var(--color-on-brand-soft); font-weight: 600; }
.menu-celular { display: none; }
.conta { margin-top: auto; }
.link-menu { width: 100%; background: none; border: 0; cursor: pointer; font-size: 14px; }
.conteudo { padding: 24px 32px 40px; min-width: 0; }
.topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sub { margin: 2px 0 0; color: var(--color-ink-soft); font-size: 14px; }
.acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 10px; background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.botao:hover { background: var(--color-primary-hover); }
.botao-sec { background: var(--color-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line); }
.botao-sec:hover { background: var(--color-lane); }
.botao-ico { padding: 8px 10px; }
.botao-perigo { background: var(--color-problema-soft); color: var(--color-problema); }
.botao-perigo:hover { background: var(--color-problema-soft); box-shadow: inset 0 0 0 1px var(--color-problema); }
.botao-x { display: grid; place-items: center; width: 36px; height: 36px; background: none; border: 0; border-radius: 8px; color: var(--color-ink-faint); cursor: pointer; flex: none; }
.botao-x:hover { background: var(--color-lane); }

/* Selos e avisos */
.selo { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.selo-ok { color: var(--color-ok); background: var(--color-ok-soft); }
.selo-atencao { color: var(--color-atencao); background: var(--color-atencao-soft); }
.selo-problema { color: var(--color-problema); background: var(--color-problema-soft); }
.selo-info { color: var(--color-info); background: var(--color-info-soft); }
.aviso { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--color-brand-soft); color: var(--color-on-brand-soft); }
.aviso-success { background: var(--color-ok-soft); color: var(--color-ok); }
.aviso-error { background: var(--color-problema-soft); color: var(--color-problema); }

/* Painéis e listas */
.painel { background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow-card); padding: 16px 18px; margin: 0 0 14px; }
.painel h2 { margin-bottom: 6px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.tile { background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow-card); padding: 14px 18px; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.tile:hover { box-shadow: var(--shadow-card-hover); }
.tile-n { font: 600 28px/1.1 var(--font-brand); }
.tile-l { font-size: 13px; color: var(--color-ink-soft); }
.grade-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.grade-resumo .painel { margin: 0; }
.grade-resumo .painel:last-child:nth-child(odd) { grid-column: 1 / -1; }
.linha { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-line); min-height: 48px; }
.lista > .linha:first-child { border-top: 0; }
.linha-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.meta { font-size: 13px; color: var(--color-ink-faint); }
.riscado span:first-child { text-decoration: line-through; color: var(--color-ink-faint); }
.vazio { color: var(--color-ink-soft); margin: 6px 0; }
.rodape { margin: 10px 0 0; }

/* Marca de feito */
.marca-check { display: grid; place-items: center; width: 26px; height: 26px; flex: none; padding: 0; border: 2px solid var(--color-ink-faint); border-radius: 8px; background: transparent; color: transparent; cursor: pointer; }
.marca-check:hover { border-color: var(--color-primary); }
.marca-check .ico { width: 16px; height: 16px; stroke-width: 3; }
.marca-check.marcado, .feita .marca-check { background: var(--color-ok); border-color: var(--color-ok); color: var(--color-surface); }

/* Kanban semanal */
.semana { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 8px; align-items: stretch; }
.dia { background: var(--color-lane); border-radius: 14px; padding: 8px; min-height: 420px; display: flex; flex-direction: column; }
.dia-hoje { box-shadow: inset 0 0 0 2px var(--color-primary); }
.dia-topo { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dia-topo h2 { font-size: 14px; }
.dia-data { font-size: 12px; color: var(--color-ink-soft); }
.dia-hoje .dia-data { color: var(--color-link); font-weight: 600; }
.dia-mais { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--color-ink-soft); }
.dia-mais:hover { background: var(--color-surface); }
.dia-mais .ico { width: 16px; height: 16px; }
.cartoes { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.cartao { --st: var(--color-line); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 8px; padding: 8px 8px 8px 9px; background: var(--color-surface); border-radius: 10px; border-left: 4px solid var(--st); box-shadow: var(--shadow-card); cursor: grab; }
.cartao:active { cursor: grabbing; }
.st-ok { --st: var(--color-ok); }
.st-atencao { --st: var(--color-atencao); }
.st-problema { --st: var(--color-problema); }
.st-info { --st: var(--color-info); }
.cartao-fantasma { opacity: .4; }
.cartao-corpo { display: contents; }
.cartao .marca-check { grid-row: 2; width: 24px; height: 24px; }
.cartao-titulo { color: inherit; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.cartao-titulo:hover { text-decoration: underline; }
.cartao .cartao-titulo { grid-column: 1 / -1; font-size: 13px; line-height: 1.3; overflow-wrap: break-word; }
.cartao.feita .cartao-titulo { text-decoration: line-through; color: var(--color-ink-faint); }
.cartao.passada .cartao-titulo { color: var(--color-ink-faint); }
.cartao-meta { grid-row: 2; grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--color-ink-faint); min-width: 0; }
.pessoa { font-size: 12px; }

/* Compras */
.form-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.form-item > input[name=nome], .form-item > input[name=restricoes] { flex: 1 1 200px; }
.form-item .curto { width: 84px; }
.form-item .erro { flex-basis: 100%; }
.form-item .erro:empty { display: none; }
.caixa { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-ink-soft); }
.selo-botao { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 3px 9px; border: 1px solid var(--color-line); border-radius: 99px; background: none; color: var(--color-ink-faint); font-size: 12px; cursor: pointer; flex: none; }
.selo-botao.ligado { background: var(--color-brand-soft); border-color: transparent; color: var(--color-on-brand-soft); font-weight: 600; }

/* Gastos */
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles-3 .tile { gap: 6px; }
.tiles-3 .selo { align-self: flex-start; }
.tiles-3 .tile-n { font-size: 26px; }
.tiles-3 .tile .botao { align-self: flex-start; min-height: 34px; padding: 5px 12px; font-size: 14px; }
.form-meta label { display: block; font-size: 13px; color: var(--color-ink-soft); margin-bottom: 3px; }
.linha-meta { display: flex; align-items: center; gap: 6px; }
.linha-meta input:not([type=checkbox]) { min-height: 34px; padding: 4px 8px; min-width: 0; }
.linha-meta .botao { min-height: 34px; padding: 5px 10px; font-size: 14px; }
.tile-saldo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.saldo { margin: 0; font-size: 14px; }
.interruptor { position: relative; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 99px; background: var(--color-ink-faint); cursor: pointer; }
.interruptor span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-surface); transition: left .15s; }
.interruptor.ligado { background: var(--color-primary); }
.interruptor.ligado span { left: 21px; }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.filtros label { font-size: 13px; color: var(--color-ink-soft); }
.filtros select { display: block; width: 190px; margin-top: 3px; color: var(--color-ink); }
.filtros-link { margin-left: auto; font-size: 14px; padding-bottom: 10px; }
.grafico { height: 300px; }
.valor { white-space: nowrap; font-family: var(--font-brand); font-weight: 600; }
.partes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gasto-total { margin: 2px 0 8px; color: var(--color-ink-soft); }
.gasto-total strong { font: 600 22px var(--font-brand); color: var(--color-ink); }
.medidor { height: 8px; border-radius: 99px; background: var(--color-lane); overflow: hidden; }
.medidor span { display: block; height: 100%; border-radius: 99px; }
.medidor-ok { background: var(--color-ok); }
.medidor-atencao { background: var(--color-atencao); }
.medidor-problema { background: var(--color-problema); }
.linha-categoria { flex: 1; display: flex; gap: 8px; min-width: 0; }

/* Calendário */
.calendario { background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cabecalho { font-size: 12px; font-weight: 600; color: var(--color-ink-soft); }
.cal-cabecalho span { padding: 8px 10px; }
.cal-dia { min-height: 96px; padding: 6px; border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-dia:first-child { border-left: 0; }
.cal-dia.fora { background: var(--color-lane); }
.cal-dia.fora .cal-numero { color: var(--color-ink-faint); }
.cal-numero { align-self: flex-start; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--color-ink-soft); font-size: 13px; text-decoration: none; }
.cal-numero:hover { background: var(--color-lane); }
.cal-dia.hoje .cal-numero { background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.evento { display: block; padding: 2px 6px; border-radius: 6px; background: var(--color-brand-soft); color: var(--color-on-brand-soft); font-size: 12px; line-height: 1.35; text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.evento:hover { text-decoration: underline; }
.evento-atrasado { background: var(--color-problema-soft); color: var(--color-problema); }
.agenda-lista { display: none; }
.agenda-data { width: 38px; flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.agenda-data strong { font: 600 18px var(--font-brand); }
.agenda-data span { font-size: 11px; color: var(--color-ink-faint); text-transform: capitalize; }

/* Perfis de cuidado */
.grade-perfil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.grade-perfil .painel { margin: 0; }
.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.painel-topo h2 { margin: 0; }
.botao-menor { min-height: 34px; padding: 5px 11px; font-size: 14px; }
.anteriores { margin-top: 8px; font-size: 14px; }
.anteriores summary { cursor: pointer; color: var(--color-link); padding: 4px 0; }
.orcamento { width: 100%; border-collapse: collapse; font-size: 14px; }
.orcamento th, .orcamento td { padding: 8px 8px 8px 0; text-align: left; vertical-align: middle; border-top: 1px solid var(--color-line); }
.orcamento thead th { border-top: 0; font-size: 13px; color: var(--color-ink-soft); font-weight: 600; }
.orcamento tbody th { font-weight: 600; }
.orcamento .selo { display: block; width: fit-content; margin-top: 3px; }
.form-orcamento { display: flex; gap: 6px; align-items: center; }
.form-orcamento input:not([type=checkbox]) { width: 104px; min-height: 34px; padding: 4px 8px; }
a.valor { color: inherit; }

/* Receitas */
.grade-receitas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; align-items: start; }
.grade-receitas .painel { margin: 0 0 14px; }
.grade-receitas > .painel { margin: 0; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.etiquetas li { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 11px; border-radius: 99px; background: var(--color-brand-soft); color: var(--color-on-brand-soft); font-size: 14px; }
.etiquetas button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.acoes-receita { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.pensando { display: none; color: var(--color-ink-soft); font-size: 14px; }
.pensando.htmx-request { display: inline; }
.receita { margin-top: 14px; }
.receita h2 { font-size: 20px; margin-bottom: 2px; }
h3 { font: 600 15px var(--font-brand); margin: 14px 0 4px; }
.lista-simples { list-style: disc; padding-left: 20px; }
.lista-simples li { margin: 2px 0; }
.passos { margin: 0; padding-left: 22px; }
.passos li { margin: 6px 0; }
.receita > .meta:last-child { display: block; margin-top: 14px; }

/* Contas */
.linha-conta { flex-wrap: wrap; }

/* Formulários */
.form-estreito { max-width: 520px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
input:not([type=checkbox]):not([type=radio]), select { width: 100%; min-height: 42px; padding: 8px 12px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 10px; }
input::placeholder { color: var(--color-ink-faint); opacity: 1; }
.form-item input:not([type=checkbox]), .form-item select { width: auto; }
input[type=checkbox], input[type=radio] { accent-color: var(--color-primary); width: 18px; height: 18px; }
.campo > div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.campo > div > div label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.erro { color: var(--color-problema); font-size: 13px; margin: 4px 0 0; }
.zona-perigo { margin-top: 4px; }

/* Login */
.simples { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.simples-cartao { width: 100%; max-width: 380px; background: var(--color-surface); border-radius: 18px; box-shadow: var(--shadow-card); padding: 28px; }
.simples-logo { display: block; height: 72px; margin: 0 auto 22px; }

/* Tela larga: os sete dias cabem sem rolagem */
@media (min-width: 1180px) {
  .semana { grid-template-columns: repeat(7, minmax(0, 1fr)); overflow-x: visible; }
  .conteudo { padding-inline: 24px; }
}

/* Celular */
@media (max-width: 760px) {
  .app { display: block; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .lateral { position: static; height: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--color-line); }
  .marca img { height: 34px; margin: 0; }
  .conta { display: flex; margin: 0; }
  .link-menu { width: auto; padding: 8px; font-size: 0; gap: 0; }
  .menu { display: none; }
  .menu-celular { position: fixed; z-index: 10; inset: auto 0 0 0; display: flex; background: var(--color-surface); border-top: 1px solid var(--color-line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .menu-celular > a, .menu-mais { flex: 1; min-width: 0; }
  .menu-celular > a, .menu-mais summary { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; color: var(--color-ink-soft); font-size: 11px; text-align: center; text-decoration: none; cursor: pointer; list-style: none; }
  .menu-mais summary::-webkit-details-marker { display: none; }
  .menu-celular > a.ativo, .menu-mais summary.ativo { background: var(--color-brand-soft); color: var(--color-on-brand-soft); font-weight: 600; }
  .menu-gaveta { position: fixed; inset: auto 8px calc(70px + env(safe-area-inset-bottom)) 8px; padding: 6px; background: var(--color-surface); border-radius: 14px; box-shadow: var(--shadow-card-hover); border: 1px solid var(--color-line); }
  .menu-gaveta a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border-radius: 10px; color: var(--color-ink); text-decoration: none; }
  .menu-gaveta a.ativo { background: var(--color-brand-soft); color: var(--color-on-brand-soft); font-weight: 600; }
  .conteudo { padding: 16px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grade-resumo, .grade-perfil, .grade-receitas { grid-template-columns: minmax(0, 1fr); }
  .calendario { display: none; }
  .agenda-lista { display: block; }
  .form-orcamento { flex-wrap: wrap; }
  .form-orcamento input:not([type=checkbox]) { width: 100%; }
  .tiles-3 { grid-template-columns: minmax(0, 1fr); }
  .filtros label { flex: 1 1 130px; }
  .filtros select { width: 100%; }
  .filtros-link { margin-left: 0; flex-basis: 100%; padding-bottom: 0; }
  .grafico { height: 240px; }
  .semana { grid-template-columns: repeat(7, 78vw); scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 8px; scroll-padding: 0 16px; }
  .dia { scroll-snap-align: start; min-height: 55vh; }
  .marca-check, .cartao .marca-check { width: 30px; height: 30px; }
  .selo-botao span { display: none; }
  .selo-botao.ligado span { display: inline; }
  .form-item > input[name=nome], .form-item > input[name=restricoes], .form-item .botao { flex: 1 1 100%; }
  .form-item .curto { flex: 1 1 70px; width: auto; }
  .linha-conta .acoes { flex-basis: 100%; }
}