/* Átrio do sócio (a pasta do mês + a estante dos meses) e cockpit do operador (a
   estante da carteira). Mesmo mundo do relatório: folha lisa, capa Oxford, lombadas. */

/* ---- esqueleto de carregamento ---- */
.skel-folha { max-width: var(--folha-max); margin: 0 auto; padding: var(--s-7) var(--gutter); display: grid; gap: var(--s-3); }
.skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--rule) 0%, var(--rule-soft) 40%, var(--rule) 80%); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
.skel--titulo { width: 40%; height: 28px; margin-bottom: var(--s-3); }
.skel--linha { width: 100%; height: 14px; }
.skel--bloco { width: 100%; height: 180px; border-radius: var(--radius-figure); margin-top: var(--s-3); }
.skel--inline { display: inline-block; width: 4ch; height: 1em; vertical-align: middle; }
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ---- Delta (seta desenhada) ---- */
.fh-delta { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-soft); white-space: nowrap; }
.fh-delta--neg { color: var(--alert); }
.fh-delta--pos { color: var(--ink-strong); }
.fh-delta__seta { width: 0.9em; height: 0.9em; }
.fh-icon.is-flip { transform: rotate(180deg); }

/* ---- Átrio ---- */
.atrio__topo { margin-bottom: var(--s-6); }
.atrio__saudacao { font-size: var(--fs-28); line-height: var(--lh-28); }
.atrio__frase { margin-top: var(--s-2); font-size: var(--fs-19); line-height: var(--lh-19); }

.pasta { position: relative; }
.pasta__capa { position: relative; overflow: hidden; background: var(--capa); color: var(--capa-ink); border-radius: var(--radius-etiqueta); padding: clamp(var(--s-5), 4vw, var(--s-8)); isolation: isolate; }
.pasta__marca { position: absolute; right: -8%; top: -18%; width: 52%; height: 120%; color: var(--capa-ink-faint); z-index: -1; }
.pasta__etiqueta { max-width: 52rem; }
.pasta__fatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.pasta__fato { display: grid; gap: var(--s-1); align-content: start; }
.pasta__fato-rotulo { font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
.pasta__fato-valor { font-size: var(--fs-28); line-height: var(--lh-28); font-weight: var(--fw-bold); color: var(--ink-strong); }
.pasta__fato-valor--fora { font-size: var(--fs-19); }
.pasta__fato-delta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.pasta__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

.atrio__estante { margin-top: var(--s-8); }
.estante { display: flex; gap: var(--s-2); overflow-x: auto; padding: var(--s-4) var(--s-1) 0; scroll-snap-type: x proximity; }
/* a prateleira: uma tábua tan sob as lombadas */
.estante::after { content: ""; position: sticky; left: 0; flex: none; align-self: flex-end; width: 0; }
.atrio__estante > .estante + .fh-note::before, .estante-tabua { content: ""; }
.estante-tabua { display: block; height: 6px; margin: var(--s-3) 0 var(--s-4); border-radius: 3px; background: var(--tan); }
.estante li { flex: none; scroll-snap-align: start; }
.lombada { display: grid; gap: var(--s-1); width: 7.25rem; min-height: 9.5rem; padding: var(--s-3) var(--s-3) var(--s-2); border-radius: var(--radius-lombada) var(--radius-lombada) 2px 2px; text-decoration: none; align-content: end; box-shadow: var(--shadow-lombada); transition: transform var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease); }
.lombada--fechado { background: var(--capa); color: var(--capa-ink); }
.lombada--aberto { background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--tan), var(--shadow-lombada); }
.lombada:hover { transform: translateY(var(--lift)); }
.lombada.is-on { outline: 2px solid var(--gold); outline-offset: 3px; }
.lombada__mes { font-size: var(--fs-19); font-weight: var(--fw-bold); }
.lombada--fechado .lombada__mes { color: var(--capa-ink); }
.lombada__ger { font-size: var(--fs-12); }
.lombada__estado { font-size: 10px; letter-spacing: var(--track-caps); text-transform: uppercase; opacity: 0.8; }

.atrio__console { margin-top: var(--s-8); }
.console { display: grid; gap: var(--s-4); }
.console__item { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-3) 0; border-top: 1px solid var(--rule-soft); }
.console__item:first-child { border-top: 0; }
.console__rotulo { color: var(--ink-strong); font-weight: var(--fw-semibold); }
.console__item .fh-note { grid-column: 2; }

/* ---- Cockpit ---- */
.cockpit__frase { margin-top: var(--s-2); font-size: var(--fs-19); line-height: var(--lh-19); }
.cockpit__contagem { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); color: var(--ink-soft); }
.cockpit__contagem .num { color: var(--ink-strong); font-weight: var(--fw-bold); }
.cockpit__contagem .fh-estado { text-transform: none; letter-spacing: 0; font-size: var(--fs-15); }
.cockpit__sinais { margin-top: var(--s-7); padding: var(--s-5); border-radius: var(--radius-figure); background: var(--paper-raised); box-shadow: var(--shadow-etiqueta); }
.cockpit__sinais--critico { box-shadow: var(--shadow-etiqueta), inset 0 1px 0 var(--alert); }
.cockpit__semsinal { color: var(--ink-soft); }
.sinais { display: grid; gap: 0; }
.sinais.is-aberta { max-height: 22rem; overflow: auto; padding-right: var(--s-2); }
.sinal { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--rule-soft); }
.sinal:first-child { border-top: 0; }
.sinal--critico .sinal__cat { color: var(--alert); }
.sinal__texto { color: var(--ink); text-decoration: none; }
.sinal__texto:hover { text-decoration: underline; text-decoration-color: var(--gold); }

/* A estante da carteira: cada cliente é uma lombada deitada na prateleira. O lombo
   (borda esquerda) tem a cor do estado de fechamento; a tábua tan fecha a estante. */
.cockpit__topo h1 { font-size: var(--fs-28); line-height: var(--lh-28); }
.cockpit__estante { margin-top: var(--s-7); }
.carteira__cabecalho, .carteira__linha { display: grid; grid-template-columns: 7.5rem minmax(0, 2fr) 7rem 7rem 6rem 7rem 5rem auto; gap: var(--s-3); align-items: center; }
.carteira__cabecalho { padding: 0 var(--s-4) var(--s-2) calc(var(--s-4) + 10px); font-size: var(--fs-12); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
.carteira__ordenar { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; text-align: left; border-radius: 4px; }
.carteira__ordenar.num-right { text-align: right; }
.carteira__ordenar:hover { color: var(--ink-strong); }
.carteira__ordenar.is-on { color: var(--ink-strong); }
.carteira__ordenar.is-on::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.carteira__ordenar.is-on.is-asc::after { border-top: 0; border-bottom: 5px solid currentColor; }
.carteira { display: grid; gap: 6px; }
.carteira__linha { position: relative; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 10px); background: var(--paper-raised); border-radius: var(--radius-lombada); box-shadow: inset 0 0 0 1px var(--rule); transition: transform var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease); }
.carteira__linha::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: var(--radius-lombada) 0 0 var(--radius-lombada); background: var(--tan); }
.carteira__linha--e-pronto::before, .carteira__linha--e-fechado::before { background: var(--oxford); }
.carteira__linha--e-revisao::before { background: var(--gold); }
.carteira__linha:hover { transform: translateY(var(--lift)); box-shadow: inset 0 0 0 1px var(--tan), var(--shadow-lombada); }
.carteira__linha--skel { grid-template-columns: minmax(0, 1fr); }
.carteira__linha--skel::before { background: var(--rule); }
.cockpit__estante .estante-tabua { margin-top: var(--s-2); }
.carteira__nome { display: grid; color: var(--ink-strong); text-decoration: none; font-weight: var(--fw-semibold); }
.carteira__nome small { color: var(--ink-muted); font-weight: var(--fw-regular); }
.carteira__nome:hover span { text-decoration: underline; text-decoration-color: var(--gold); }
.carteira__ref { color: var(--ink); }
.carteira__ref small { color: var(--ink-muted); }
.carteira__num { text-align: right; color: var(--ink-strong); }
@media (min-width: 1024px) { .carteira__num::before { content: none; } }
.carteira__num--atencao { color: var(--alert); }
.carteira__sinal--critico { color: var(--alert); }
.carteira__linha--falha .carteira__num { color: var(--ink-muted); }
.carteira__abrir { justify-self: end; }
.cockpit__admin { margin-top: var(--s-8); display: grid; gap: var(--s-5); }
.cockpit__prazo-linha, .config__prazo-linha { display: flex; gap: var(--s-3); align-items: center; }
.cockpit__prazo-linha .fh-input, .config__prazo-linha .fh-input { width: 7rem; }

@media (max-width: 1023px) {
  .pasta__fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carteira__cabecalho { display: none; }
  /* no celular a linha vira duas fileiras: estado + nome + abrir; depois os números inline */
  .carteira__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding-left: calc(var(--s-3) + 10px); padding-right: var(--s-3); }
  .carteira__estado { order: 0; }
  .carteira__nome { order: 1; flex: 1 1 40%; }
  .carteira__abrir { order: 2; }
  .carteira__ref, .carteira__num, .carteira__sinais { order: 3; font-size: var(--fs-12); text-align: left; }
  .carteira__ref { flex: 0 0 100%; }
  .carteira__num::before { content: attr(data-rotulo); color: var(--ink-muted); margin-right: 4px; }
  .carteira__sinais:empty { display: none; }
  .console__item { grid-template-columns: minmax(0, 1fr); }
  .console__item .fh-note { grid-column: 1; }
  .sinal { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}
@media (max-width: 599px) {
  .pasta__fatos { grid-template-columns: minmax(0, 1fr); }
  .lombada { width: 6.25rem; min-height: 8rem; }
}

/* v2: os quatro primeiros cartões do painel dentro da pasta do mês */
/* Duas colunas de propósito: a folha tem ~830px, e em quatro colunas o título quebrava em três linhas e o delta saía do cartão. */
.pasta__cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.pasta__cartoes .fh-cartao { min-height: 200px; padding: var(--s-4); box-shadow: none; }
.pasta__cartoes .fh-cartao__numero { font-size: var(--fs-28); line-height: var(--lh-28); }
.pasta__cartoes .fh-ranking__item { grid-template-columns: minmax(0, 1fr) 3rem auto auto; gap: var(--s-2); font-size: var(--fs-12); padding: 3px 0; }
.pasta__cartoes .fh-ranking__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599px) { .pasta__cartoes { grid-template-columns: minmax(0, 1fr); } }

/* Cockpit: número negativo em alerta (geração e margem); a nota de margem sem receita fica pequena e numa linha só */
.carteira__num--neg { color: var(--alert); }
.carteira__nota { display: block; font-size: var(--fs-12); font-weight: var(--fw-regular); color: var(--ink-soft); white-space: nowrap; }

/* Cockpit, Onda C: a fila de publicacoes e a carga por operador. Duas listas densas, no mesmo
   ritmo da estante: o estado a esquerda, o nome em tinta forte, o resto em legenda. */
.cockpit__pub { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
.cockpit__pub-lista { display: grid; gap: var(--s-1); }
/* 11rem nao cabia "ESPERANDO APROVACAO" em versalete, e o selo encostava no nome do cliente
   sem nem um espaco entre os dois. A coluna cabe o rotulo mais longo do ciclo. */
.cockpit__pub-linha { display: grid; grid-template-columns: 14rem minmax(0, 1.4fr) minmax(0, 1fr) 7rem minmax(0, 0.8fr); gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-top: 1px solid var(--rule); }
.cockpit__pub-linha > :first-child { min-width: 0; }
.cockpit__pub-cliente { color: var(--ink-strong); overflow-wrap: break-word; }
.cockpit__pub-idade { white-space: nowrap; }
.cockpit__ops { display: grid; gap: var(--s-1); margin-top: var(--s-4); }
/* A pergunta do admin e "quem carrega quanto": o NUMERO e a resposta, e a lista de nomes em
   versalete o afogava em oito linhas. Os nomes ficam numa dobra, ao lado. */
.cockpit__ops-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.cockpit__ops-carga { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.cockpit__ops-nome { display: grid; gap: 2px; color: var(--ink-strong); }
.cockpit__ops-n { font-size: var(--fs-28); line-height: 1; color: var(--ink-strong); }
.cockpit__ops-quais { overflow-wrap: break-word; }
.cockpit__ops-quais p { margin-top: var(--s-2); font-size: var(--fs-12); color: var(--ink-soft); }
.cockpit__ops-sem { margin-top: var(--s-3); }
@media (max-width: 1023px) {
  .cockpit__pub-linha { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); }
  .cockpit__pub-linha > :nth-child(1) { grid-column: 1 / -1; }
  .cockpit__ops-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .cockpit__ops-quais { grid-column: 1 / -1; }
}