/* Philnance — Movimentos (#/movimentos): estilos só desta vista (ecrãs 07, 08 e 17 do design: lista por dia,
   pesquisa, filtros, classificar numa folha / painel lateral, seleção múltipla). Também a folha e o painel de
   classificar (ui/classificar.js, .cl-*) e a etiqueta de categoria (.cat-pil), que o detalhe de um movimento reusa.
   Componentes partilhados no styles.css. Alvos de toque ≥ 44 px também no computador. */

/* ---------- cabeçalho: "‹ Outubro 2026 ›  ·  47 movimentos" (telemóvel), "Outubro 2026 · 27 set – 26 out · 47" (computador) */
.cab-mov-lista .cabecalho-linha { position: relative; }
.cab-mov-lista .cabecalho-t { padding-right: 56px; }
.cab-mov-lista .cabecalho-acoes { position: absolute; top: -4px; right: 0; }
.cab-mov-lista .cabecalho-sub { justify-content: space-between; margin-top: 2px; }
.mov-per { display: inline-flex; align-items: center; margin-left: -14px; }
.mov-per-nav {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0 -6px; padding: 0; border: 0; background: none;
  color: var(--ink2); text-decoration: none;
}
.mov-per-nav .ms { font-size: 20px; }
.mov-per-nav:disabled { color: var(--line2); cursor: default; }
.mov-per-rot {
  position: relative; z-index: 1; min-height: 44px; padding: 0 2px; border: 0; background: none; font: 400 13px var(--sans); color: var(--ink2);
}
.mov-n { font: 400 13px var(--sans); color: var(--ink2); white-space: nowrap; }
.mov-sub-l .mov-per-rot { min-height: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.mov-sub-l .mov-per-rot:hover { color: var(--ink); }

/* ---------- pesquisa e filtros ---------- */
.mov { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mov-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mov-pesquisa {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 24px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink3);
}
.mov-pesquisa:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mov-pesquisa .ms { font-size: 20px; }
.mov-pesquisa input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none;
  font: 400 16px var(--sans); color: var(--ink);
}
.mov-pesquisa input::placeholder { color: var(--ink3); opacity: 1; }
.mov-chips .chip { min-height: 44px; border-radius: 22px; }
/* "Por classificar" premido continua caramelo (mais escuro), não azul */
.mov-chips .chip-tan[aria-pressed="true"] {
  background: color-mix(in oklch, var(--tan) 30%, var(--tan-tint)); border-color: var(--tan); color: var(--ink);
}
.mov-chips .chip-tan[aria-pressed="true"]::before { background: var(--ink); }
.mov-cartoes { display: none; }

/* ---------- lista por dia ---------- */
.mov-lista { display: flex; flex-direction: column; gap: 14px; }
.mov-dia { display: flex; flex-direction: column; gap: 10px; }
.mov-dia-cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink3);
}
.mov-dia-tot { letter-spacing: 0; font-weight: 500; text-transform: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mov-ul { list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 0 16px; overflow: hidden; }
.mov-li { position: relative; border-bottom: 1px solid var(--line); }
.mov-li:last-child { border-bottom: 0; }
.mov-linha {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 8px 0; border: 0; background: none;
  color: var(--ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer;
}
.mov-linha:focus-visible { outline-offset: -2px; border-radius: 14px; }
.mov-chk, .mov-desc, .mov-org, .mov-cat, .mov-i-l { display: none; }
.mov-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mov-nome { display: flex; align-items: center; gap: 5px; min-width: 0; font: 500 15px var(--sans); }
.mov-nome-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov-sub { display: block; font: 400 12.5px var(--sans); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* numa linha só (cabe inteiro a 390 px; mais estreito, encurta com reticências) */
.mov-sub-por { color: var(--tan); font-weight: 500; letter-spacing: -.02em; }
@media (max-width: 380px) { .mov-sub-por { font-size: 12px; } }
.mov-i { font-size: 15px; margin-left: 4px; vertical-align: -3px; }
.mov-i-fat { color: var(--ink3); }
.mov-val { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; line-height: 1.3; }
.mov-val .valor { font: 500 15px var(--sans); font-variant-numeric: tabular-nums; }
.mov-tipo { font: 400 12px var(--sans); color: var(--ink3); }
.mov-por { margin: 0 -16px; padding: 0 16px; background: var(--tan-tint); }
.mov-por .mov-linha { gap: 10px; }
.mov-por .cat-ico { background: var(--card); }
.mov-por .mov-tipo { display: none; }
a.mov-linha:hover .mov-nome-t { color: var(--accent); }

/* caixa de seleção: o alvo é a etiqueta inteira (44 × 44); a caixa visível tem 18 px */
.mov-chk { position: relative; width: 44px; height: 44px; margin: 0 -12px; cursor: pointer; }
.mov-chk input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mov-chk-v {
  width: 18px; height: 18px; border: 1.5px solid var(--line2); border-radius: 5px; background: var(--card); pointer-events: none;
  display: grid; place-items: center;
}
.mov-chk input:checked + .mov-chk-v { background: var(--accent); border-color: var(--accent); }
.mov-chk input:checked + .mov-chk-v::after {
  content: ""; width: 9px; height: 5px; margin-top: -3px; border: solid var(--on-accent); border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.mov-chk input:focus-visible + .mov-chk-v { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- barra da seleção múltipla (só computador) ---------- */
.mov-barra {
  position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 8px; min-height: 60px; margin-top: 4px;
  padding: 8px 8px 8px 20px; border-radius: 30px; background: var(--ink); color: var(--paper); box-shadow: 0 12px 30px var(--shade);
}
.mov-barra-n { font: 600 14px var(--sans); white-space: nowrap; }
.mov-barra-x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--paper); opacity: .8; }
.mov-barra-x:hover { opacity: 1; background: color-mix(in srgb, var(--paper) 12%, transparent); }
.mov-barra-x .ms { font-size: 18px; }
.mov-barra-esp { flex: 1; }
.mov-barra-sel { position: relative; display: inline-flex; align-items: center; }
.mov-barra-sel select {
  -webkit-appearance: none; appearance: none; min-width: 0; max-width: 150px; height: 44px; padding: 0 32px 0 14px; border: 0; border-radius: 22px;
  background: color-mix(in srgb, var(--paper) 12%, transparent); color: var(--paper); font: 500 13px var(--sans); cursor: pointer;
}
.mov-barra-sel select option { color: var(--ink); background: var(--card); }
.mov-barra-sel .ms { position: absolute; right: 9px; font-size: 18px; color: var(--paper); pointer-events: none; }
.mov-barra-val { height: 44px; border-radius: 22px; padding: 0 16px; font-size: 13px; }
.mov-barra :focus-visible { outline-color: var(--paper); }

/* ---------- painel de classificar (só computador) ---------- */
.mov-painel { display: none; }
.mov-painel-vazio { border: 0; padding: 40px 6px; background: none; }

/* ---------- etiqueta de categoria (tabela do computador, chips do painel) ---------- */
.cat-pil {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 10px 0 7px; border: 0; border-radius: 14px;
  background: color-mix(in oklch, var(--c, var(--ink3)) 14%, var(--card)); color: var(--ink); font: 500 12.5px var(--sans); white-space: nowrap;
}
.cat-pil .ms { font-size: 16px; color: var(--c, var(--ink2)); }
.cat-pil-t, .cat-pil .cl-tile-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cat-pil-por { background: var(--card); border: 1px solid var(--tan); color: var(--tan); font-weight: 600; }
.cat-pil-por .ms { color: var(--tan); }

/* ---------- classificar: folha (telemóvel) e painel (computador) ---------- */
.folha-classificar .folha-cab { margin-bottom: 2px; }
.folha-classificar .folha-t { font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tan); }
.cl { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
.cl-mov { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cl-mov-txt { min-width: 0; line-height: 1.3; }
.cl-nome { font: 400 21px/1.1 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
.cl-quando { margin-top: 4px; font: 400 13px var(--sans); color: var(--ink2); }
.cl-desc { margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--ink3); overflow-wrap: anywhere; }
.cl-v { font: 400 21px/1.1 var(--serif); white-space: nowrap; }
.cl-v .valor { font: inherit; }
.cl-sug { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 22px; background: var(--accent-tint); }
.cl-sug-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--card); color: var(--c, var(--accent)); }
.cl-sug-ico .ms { font-size: 21px; }
.cl-sug-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cl-sug-txt span { font: 400 12.5px var(--sans); color: var(--ink2); }
.cl-sug-txt b { font: 600 16px var(--sans); overflow-wrap: anywhere; }
.cl-sug-btn { flex: none; padding: 0 16px; }
.cl-rot { font: 500 13px var(--sans); color: var(--ink2); }
.cl-grelha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: -6px; }
.cl-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 70px; padding: 6px 3px;
  border: 1px solid var(--line); border-radius: 16px; background: none; color: var(--ink); font: 500 11.5px/1.15 var(--sans); text-align: center;
}
.cl-tile .ms { font-size: 22px; color: var(--c, var(--ink2)); }
.cl-tile-t { max-width: 100%; overflow-wrap: anywhere; -webkit-hyphens: manual; hyphens: manual; }
.cl-tile[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.cl-tile:hover { border-color: var(--line2); }
.cl-todas { border-style: dashed; border-color: var(--line2); color: var(--ink2); }
.cl-todas .ms { color: var(--ink2); }
/* Fixo / Variável: cada metade com 44 px de alto */
.cl-seg { height: auto; padding: 3px; background: var(--paper); }
.cl-seg > button { min-height: 44px; }
/* "usar sempre": a linha inteira é o interruptor (alvo grande) */
.cl-sempre {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0; border: 0;
  background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
.cl-sempre-t { min-width: 0; font: 400 14px/1.3 var(--sans); overflow-wrap: anywhere; }
.cl-sempre[aria-checked="true"] .interruptor { background: var(--accent); }
.cl-sempre[aria-checked="true"] .interruptor::before { transform: translateX(20px); }
.cl-sempre:focus-visible { outline-offset: 4px; border-radius: 12px; }
.cl-aviso {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--tan-tint);
  font: 400 13px/1.4 var(--sans); color: var(--ink);
}
.cl-aviso .ms { font-size: 18px; color: var(--tan); }
.cl-acoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.cl-acoes .btn { height: 52px; border-radius: 26px; padding: 0 12px; font-size: 15px; }
.cl-acoes .btn .ms { font-size: 19px; }
.cl-nota { font: 400 12.5px/1.45 var(--sans); color: var(--ink3); text-align: center; text-wrap: pretty; }
/* chips do painel: o botão tem 44 px de alto; a pílula fica com o tamanho do desenho */
.cl-chips { display: flex; flex-wrap: wrap; gap: 0 6px; margin: -10px 0 -6px; }
.cl-chip { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.cl-chip:focus-visible { outline: none; }
.cl-chip:focus-visible .cat-pil { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-chip[aria-pressed="true"] .cat-pil { box-shadow: 0 0 0 2px var(--accent); }
.cl-chip .cl-todas { padding: 0 10px; background: none; border: 1px dashed var(--line2); color: var(--ink2); }
.cl-pil { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--tan-tint); color: var(--tan); font: 600 12px var(--sans); white-space: nowrap; }
.cl-mov-largo { flex-direction: column; gap: 0; }
.cl-mov-largo .cl-nome { font-size: 22px; line-height: 1.15; }
.cl-mov-largo .cl-v { margin-top: 6px; font: 300 34px/1.1 var(--serif); }
.cl-mov-largo .cl-quando { margin-top: 6px; }
.cl-doc {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border: 1.5px dashed var(--line2); border-radius: 16px;
  color: var(--ink2); text-decoration: none; font: 400 13.5px var(--sans);
}
.cl-doc:not(.cl-doc-sem) { border-style: solid; border-color: var(--line); }
.cl-doc .ms { font-size: 19px; }
.cl-doc-t { flex: 1; min-width: 0; }
.cl-doc-a { color: var(--accent); font-weight: 600; }
.cl-atalhos { font-size: 11.5px; line-height: 1.5; color: var(--ink3); }

/* "Repor tudo" e o ⋯ */
.mov-menu-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.folha-mov-menu .folha-p + .folha-p { margin-top: 10px; font-size: 13px; }
.folha-mov-menu .lista .linha { min-height: 56px; }

/* =========================================================== computador */
@media (min-width: 1024px) {
  /* o painel de classificar fica à direita, a toda a altura; o título e a lista ficam na coluna da esquerda */
  html.com-painel-mov .principal { margin-right: 300px; }
  .cab-mov-lista .cabecalho-t { padding-right: 0; }
  .cab-mov-lista .cabecalho-acoes { position: static; }
  .cab-mov-lista .cabecalho-sub { justify-content: flex-start; margin-top: 8px; }
  .mov-pesquisa { height: 46px; padding: 0 14px; border-radius: 23px; gap: 8px; }
  .mov-pesquisa .ms { font-size: 18px; }
  .mov-pesquisa input { font-size: 14px; }
  .mov-chips .chip { font-size: 13px; }
  .mov-cartoes { position: relative; display: inline-flex; align-items: center; }
  .mov-cartoes select {
    -webkit-appearance: none; appearance: none; min-width: 0; height: 44px; padding: 0 32px 0 14px; border: 1px solid var(--line2); border-radius: 22px;
    background: transparent; color: var(--ink2); font: 500 13px var(--sans); cursor: pointer;
  }
  .mov-cartoes .ms { position: absolute; right: 10px; font-size: 18px; color: var(--ink2); pointer-events: none; }

  .mov-lista { gap: 0; }
  .mov-dia { gap: 0; }
  .mov-dia-cab { margin: 0; padding: 16px 0 8px; border-bottom: 1px solid var(--line); }
  .mov-ul { background: none; border: 0; border-radius: 0; padding: 0; overflow: visible; }
  .mov-li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; column-gap: 12px; margin: 0 -12px; padding: 0 12px; border-radius: 12px; }
  .mov-li:last-child { border-bottom: 1px solid var(--line); }
  .mov-li:hover { background: color-mix(in oklch, var(--chip) 60%, transparent); }
  .mov-por, .mov-por:hover { margin: 0 -12px; padding: 0 12px; background: var(--tan-tint); }
  .mov-atual, .mov-atual:hover { background: var(--accent-tint); }
  .mov-chk { display: grid; place-items: center; }
  .mov-linha { display: grid; grid-template-columns: minmax(0, 1fr) 130px 92px; align-items: center; column-gap: 12px; min-height: 54px; padding: 6px 0; }
  .mov-por .mov-linha { gap: 0 12px; }
  .mov-cat-ico, .mov-sub { display: none; }
  .mov-desc { display: block; font-size: 11px; line-height: 1.4; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mov-i-l { display: inline-flex; align-items: center; flex: none; }
  .mov-i-l .mov-i { margin-left: 0; }
  .mov-nome { font-size: 14.5px; }
  .mov-cat { display: block; min-width: 0; }
  .mov-val .valor { font-size: 14.5px; }
  .mov-tipo { font-size: 11.5px; }
  .mov-por .mov-tipo { display: block; }

  .mov-painel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 4; width: 300px; display: flex; flex-direction: column; gap: 16px;
    padding: 28px 22px 0; overflow-y: auto; background: var(--card); border-left: 1px solid var(--line);
  }
  .mov-painel > * { flex-shrink: 0; }
  .mov-painel .cl-sug { border-radius: 18px; }
  .mov-painel .cl-sug-ico { width: 38px; height: 38px; background: color-mix(in oklch, var(--c, var(--accent)) 16%, var(--card)); }
  .mov-painel .cl-sug-ico .ms { font-size: 19px; }
  .mov-painel .cl-sug-txt span { font-size: 12px; }
  .mov-painel .cl-sug-txt b { font-size: 15px; }
  /* Guardar fica preso em baixo, com os atalhos por baixo */
  .mov-painel .cl-acoes { position: sticky; bottom: 0; z-index: 1; margin-top: auto; padding: 12px 0 20px; background: var(--card); }
  .mov-painel .cl-acoes .btn { height: 48px; border-radius: 24px; font-size: 14.5px; }
  .mov-painel .cl-atalhos { grid-column: 1 / -1; margin-top: 4px; }
  .mov-painel .cl-nota { text-align: left; }
  .mov-painel > .vazio { margin: auto 0; }
}
@media (min-width: 1280px) {
  html.com-painel-mov .principal { margin-right: 340px; }
  .mov-painel { width: 340px; padding: 28px 24px 0; }
  .mov-linha { grid-template-columns: minmax(0, 1fr) 96px 150px 100px; }
  .mov-org { display: block; font: 400 13px var(--sans); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 1023px) {
  .mov-barra { display: none !important; }
}
@media (max-width: 380px) {
  .cl-grelha { gap: 6px; }
  .cl-tile { font-size: 11px; min-height: 66px; }
  .cl-acoes .btn { font-size: 14px; }
}