/* Guarda compartilhada (web 03) e finanças (web 04). Só tokens: azul e coral são os dois
   responsáveis; sol marca o pedido de troca. */

/* agenda: cor do dia pelo responsável */
.linha-filtro { display: flex; justify-content: space-between; align-items: center; gap: var(--okf-space-4); flex-wrap: wrap;
  margin-bottom: var(--okf-space-4); }
.linha-filtro .filtro { margin-bottom: 0; }
.legenda-guarda { display: flex; gap: var(--okf-space-4); flex-wrap: wrap; font: var(--okf-font-label); }
.legenda-guarda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-guarda .ic { width: 18px; height: 18px; }
.marca-guarda { display: inline-block; width: 16px; height: 16px; border-radius: 5px; border-top: 4px solid; }
.marca-guarda.guarda-azul { background: var(--okf-azul-soft); border-color: var(--okf-azul); }
.marca-guarda.guarda-coral { background: var(--okf-coral-soft); border-color: var(--okf-coral); }
.cal-dia { position: relative; }
.cal-dia.guarda-azul { background: var(--okf-azul-soft); border-color: transparent; border-top: 4px solid var(--okf-azul); }
.cal-dia.guarda-coral { background: var(--okf-coral-soft); border-color: transparent; border-top: 4px solid var(--okf-coral); }
.cal-dia.guarda-verde { background: var(--okf-verde-soft); border-color: transparent; border-top: 4px solid var(--okf-verde); }
.cal-dia.guarda-neutro { background: var(--okf-surface-sunken); border-color: transparent; border-top: 4px solid var(--okf-ink-muted); }
.cal-dia[class*="guarda-"] .cal-item { background: var(--okf-surface-raised); }
.cal-dia.guarda-pedido { box-shadow: inset 0 0 0 2px var(--okf-sol); background: var(--okf-sol-soft); }
.cal-dia .cal-item.cal-pedido { background: var(--okf-surface-raised); font-weight: 800; }
.cal-troca { position: absolute; top: 8px; right: 8px; color: var(--okf-ink); }
.cal-troca .ic { width: 18px; height: 18px; }
.guarda-lateral { display: flex; flex-direction: column; gap: var(--okf-space-4); }
.pedido-troca { background: var(--okf-sol-soft); box-shadow: none; }
.pedido-troca p { margin: var(--okf-space-3) 0; }
.pedido-cabeca { display: flex; align-items: center; gap: var(--okf-space-3); }
.pedido-cabeca strong { display: block; font: var(--okf-font-heading); }
.pedido-cabeca small { font: var(--okf-font-caption); color: var(--okf-ink-muted); }
.av-anel-coral { box-shadow: inset 0 0 0 3px var(--okf-coral); }
.av-anel-azul { box-shadow: inset 0 0 0 3px var(--okf-azul); }
.acoes-troca { display: grid; grid-template-columns: 1fr 1fr; gap: var(--okf-space-3); margin-bottom: var(--okf-space-2); }
.acoes-troca .btn { padding: 0 var(--okf-space-3); font-size: 16px; white-space: nowrap; }
.btn-branco { background: var(--okf-surface-raised); color: var(--okf-ink); }
.nota-guarda { padding: var(--okf-space-4) var(--okf-space-6); border-radius: var(--okf-radius-lg); background: var(--okf-azul-soft); }
.nota-guarda p { margin: 0; }

/* finanças */
.faixa-totais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--okf-space-4); margin-bottom: var(--okf-space-6); }
.total { display: flex; flex-direction: column; gap: 4px; padding: var(--okf-space-6); border-radius: var(--okf-radius-lg); }
.total small { font: var(--okf-font-label); color: var(--okf-ink-muted); }
.total strong { font: var(--okf-font-display); font-size: 32px; line-height: 1.15; }
.total strong.menor { font: var(--okf-font-heading); font-size: 17px; line-height: 1.35; }
.total span { font: var(--okf-font-body); font-size: 14px; font-weight: 700; }
.total-azul { background: var(--okf-azul-soft); }
.total-azul small, .total-azul span { color: var(--okf-azul); }
.total-coral { background: var(--okf-coral-soft); }
.total-coral small, .total-coral span { color: var(--okf-coral-strong); }
.total-acertar { background: var(--okf-petroleo); color: var(--okf-on-petroleo); }
.total-acertar small { color: color-mix(in srgb, var(--okf-on-petroleo) 75%, transparent); }
.total-acertar .btn { align-self: flex-start; margin-top: var(--okf-space-3); min-height: 44px; padding: 0 var(--okf-space-4); font-size: 15px; }
.grade-financas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--okf-space-6); align-items: start; }
.tabela-despesas { padding: var(--okf-space-4) var(--okf-space-4); }
.despesas td:nth-child(2) strong { font-weight: 800; }
.despesas { width: 100%; border-collapse: collapse; min-width: 600px; }
.despesas th { padding: var(--okf-space-3) 6px; white-space: nowrap; text-align: left; font: var(--okf-font-caption); letter-spacing: .06em;
  text-transform: uppercase; color: var(--okf-ink-muted); border-bottom: 1px solid var(--okf-line); }
.despesas td { padding: var(--okf-space-3) 6px; border-bottom: 1px solid var(--okf-line); vertical-align: middle; }
.despesas .num { text-align: right; white-space: nowrap; }
.despesas tr.estornada td { color: var(--okf-ink-muted); }
.despesas tr.estornada strong { text-decoration: line-through; }
.acoes-linha { white-space: nowrap; text-align: right; }
.acoes-linha .link { margin-left: 6px; display: inline-flex; }
.quem-pagou { display: inline-flex; align-items: center; gap: 8px; }
.etiqueta { display: inline-block; padding: 4px 12px; border-radius: var(--okf-radius-pill); font: var(--okf-font-caption); font-size: 13px; }
.etiqueta-sol { background: var(--okf-sol-soft); color: var(--okf-ink); }
.etiqueta-azul { background: var(--okf-azul-soft); color: var(--okf-azul); }
.etiqueta-vermelho { background: var(--okf-vermelho-soft); color: var(--okf-vermelho); }
.etiqueta-verde { background: var(--okf-verde-soft); color: var(--okf-verde-strong); }
.etiqueta-coral { background: var(--okf-coral-soft); color: var(--okf-coral-strong); }
.etiqueta-neutro { background: var(--okf-surface-sunken); color: var(--okf-ink); }
.barra-cat { margin-top: var(--okf-space-4); }
.barra-cat > div { display: flex; justify-content: space-between; font: var(--okf-font-label); font-size: 15px; margin-bottom: 8px; }
.trilho { display: block; height: 12px; border-radius: var(--okf-radius-pill); background: var(--okf-surface-sunken); overflow: hidden; }
.enche { display: block; height: 100%; border-radius: var(--okf-radius-pill); }
.enche-sol { background: var(--okf-sol); }
.enche-azul { background: var(--okf-azul); }
.enche-vermelho { background: var(--okf-vermelho); }
.enche-verde { background: var(--okf-verde); }
.enche-coral { background: var(--okf-coral); }
.enche-neutro { background: var(--okf-ink-muted); }
.lista-quem .direita { margin-left: auto; }
.nota-verde { display: flex; gap: var(--okf-space-3); align-items: flex-start; padding: var(--okf-space-4) var(--okf-space-6);
  border-radius: var(--okf-radius-lg); background: var(--okf-verde-soft); color: var(--okf-ink); }
.nota-verde .ic { color: var(--okf-verde-strong); }
.nota-verde p { margin: 0; }

@media (max-width: 1180px) {
  .faixa-totais { grid-template-columns: 1fr 1fr; }
  .grade-financas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .faixa-totais { grid-template-columns: 1fr; }
}