/* Cortei — layout de cada tela (wireframes em _arquivo/cortei-versoes/plano/05-wireframes.md). */

/* ---------- Hoje ---------- */
/* celular: o cliente da cadeira primeiro (decisão do Jev: o dia antes do dinheiro) */
.hoje { display: grid; gap: var(--e-4); grid-template-areas: "proximo" "ciclo" "dia" "placar" "pagamentos"; }
.hoje-topo { display: grid; gap: var(--e-4); }
.hoje-topo:not(:empty) { margin-bottom: var(--e-4); }
.hoje > .t-ciclo { grid-area: ciclo; } .hoje > .t-proximo { grid-area: proximo; } .hoje > .t-dia { grid-area: dia; }
.hoje > .t-placar { grid-area: placar; } .hoje > .t-pagamentos { grid-area: pagamentos; }
.t-ciclo { display: grid; gap: var(--e-3); }
.t-ciclo .linha-valor { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
.t-ciclo .detalhe { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: var(--t-14); color: var(--texto-2); }
.t-ciclo .detalhe b { font: 600 var(--t-14) var(--f-num); color: var(--texto); }
.t-ciclo .acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.t-ciclo .meta-linha { font-size: var(--t-12); color: var(--texto-2); }
.t-proximo { display: grid; gap: var(--e-3); }
.t-proximo .quando { display: flex; align-items: baseline; gap: var(--e-2); }
.t-proximo .quando .num { font-size: var(--t-28); font-weight: 800; letter-spacing: -.03em; }
.t-proximo .quem { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; font-size: var(--t-20); font-weight: 700; }
.t-proximo .secundarias { display: flex; gap: var(--e-4); justify-content: center; }
.t-proximo.livre .quem { color: var(--texto-2); font-weight: 600; font-size: var(--t-16); }
.dia-lista li { display: flex; align-items: center; gap: var(--e-3); min-height: 52px; }
.dia-lista button.item-dia { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 52px; cursor: pointer; border-radius: 6px; }
.dia-lista button.item-dia:focus-visible { outline: 2px solid var(--sinal); outline-offset: 2px; }
.dia-lista .hora { width: 52px; font: 600 var(--t-14) var(--f-num); color: var(--texto-2); flex: none; }
.dia-lista .marca-tipo { width: 3px; align-self: stretch; margin: 10px 0; border-radius: 2px; background: var(--borda-forte); flex: none; }
.dia-lista .assinante .marca-tipo { background: var(--assinante); }
.dia-lista .nome { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dia-lista .nome small { display: block; font-weight: 500; font-size: var(--t-12); color: var(--texto-2); }
.dia-lista .estado { font: 600 var(--t-12) var(--f-num); color: var(--texto-2); white-space: nowrap; }
.dia-lista .feito .estado { color: var(--pago); }
.dia-lista .faltou .estado { color: var(--atrasado); }
.dia-lista .agora .estado { color: var(--sinal); }
.dia-lista .feito .nome, .dia-lista .faltou .nome { color: var(--texto-2); }
.dia-lista .livre .nome { color: var(--texto-3); font-weight: 500; }
.t-pagamentos { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; overflow: hidden; }
.t-pagamentos a { display: grid; justify-items: center; gap: 2px; padding: var(--e-4) var(--e-2); text-decoration: none; text-align: center; }
.t-pagamentos a + a { border-left: var(--linha); }
.t-pagamentos a:hover { background: var(--card-2); }
.t-pagamentos .num { font-size: var(--t-28); font-weight: 800; }
.t-pagamentos span { font-size: var(--t-12); color: var(--texto-2); }
.t-pagamentos .pago .num { color: var(--pago); } .t-pagamentos .vence .num { color: var(--vence); } .t-pagamentos .atrasado .num { color: var(--atrasado); }
.t-placar .acoes-grupo { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-3); }
.faixa-ciclo-novo { display: grid; gap: var(--e-2); border-color: var(--sinal-borda); background: var(--sinal-fundo); }
@media (min-width: 768px) {
  .hoje { grid-template-columns: 1fr 1fr; grid-template-areas: "ciclo proximo" "placar dia" "placar pagamentos"; align-items: start; }
  .valor-grande { font-size: 52px; }
}
@media (min-width: 1100px) {
  .hoje { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); grid-template-rows: auto auto 1fr; }
  .hoje > .t-pagamentos { align-self: start; }
  .valor-grande { font-size: var(--t-64); }
}

/* ---------- Grupo ---------- */
.grupo { display: grid; gap: var(--e-4); }
.grupo .texto-grupo { white-space: pre-wrap; font-size: var(--t-14); line-height: 1.5; background: var(--card-2); border: var(--linha); border-radius: 10px 10px 10px 2px; padding: var(--e-3) var(--e-4); max-height: 46vh; overflow: auto; }
.grupo details summary { cursor: pointer; font-weight: 600; color: var(--texto-2); padding: var(--e-2) 0; }
.grupo .acoes-fixas { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; gap: var(--e-2); padding: var(--e-3) 0 0; background: linear-gradient(transparent, var(--bg) 30%); }
@media (min-width: 1100px) {
  .grupo { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: start; }
  .grupo .lado-texto { position: sticky; top: 80px; }
  .grupo .acoes-fixas { position: static; background: none; }
}

/* ---------- Agenda ---------- */
.agenda-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.agenda-barra .navegar { display: flex; align-items: center; gap: var(--e-1); }
.agenda-barra .periodo { font: 600 var(--t-14) var(--f-num); min-width: 120px; text-align: center; }
.agenda-barra .direita { margin-left: auto; }
.agenda-barra .link { padding: 0 var(--e-2); }
.semana { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); border: var(--linha); border-radius: var(--r); overflow: hidden; background: var(--card); }
.semana .cab-dia { padding: var(--e-2); text-align: center; font-size: var(--t-12); font-weight: 700; color: var(--texto-2); border-bottom: var(--linha); border-left: var(--linha); text-transform: uppercase; }
.semana .cab-dia.hoje-col { color: var(--sinal); }
.semana .cab-dia .num { display: block; font-size: var(--t-16); color: var(--texto); }
.semana .horas { position: relative; }
.semana .hora-rotulo { height: var(--h-hora, 56px); padding: 2px 6px; font: 500 11px var(--f-num); color: var(--texto-3); border-top: var(--linha); }
.semana .coluna { position: relative; border-left: var(--linha); background-image: linear-gradient(var(--borda) 1px, transparent 1px); background-size: 100% var(--h-hora, 56px); }
.semana .coluna.hoje-col { background-color: color-mix(in srgb, var(--sinal) 4%, transparent); }
.bloco { position: absolute; left: 3px; right: 3px; padding: 4px 6px; border-radius: 5px; border: 1px solid var(--borda-forte); background: var(--card-2); font-size: 11px; line-height: 1.25; overflow: hidden; text-align: left; color: var(--texto); }
.bloco.assinante { border-color: var(--assinante); background: var(--assinante-fundo); }
.bloco.feito { opacity: .55; } .bloco.faltou { border-color: var(--atrasado); background: var(--atrasado-fundo); opacity: .7; }
.bloco b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloco .num { color: var(--texto-2); }
.agora-linha { position: absolute; left: 0; right: 0; height: 2px; background: var(--sinal); z-index: 2; }
.fixos { margin-top: var(--e-4); }
.fixos ul { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: var(--e-2) 0 0; }
.fixos li { font-size: var(--t-12); padding: 4px 8px; border-radius: 6px; background: var(--card-2); border: var(--linha); }
.fixos li .num { color: var(--assinante); margin-right: 4px; }
.dia-agrupado h3 { font-size: var(--t-12); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-2); margin: var(--e-4) 0 var(--e-1); }
.dia-agrupado h3.hoje-col { color: var(--sinal); }

/* ---------- Assinantes ---------- */
.assin-barra { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
.assin-barra .linha1 { display: flex; gap: var(--e-2); align-items: center; }
.assin-barra .linha1 .entrada { flex: 1; }
.assin-lista li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--e-3); padding: var(--e-3) 0; text-decoration: none; }
.assin-lista .nome { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assin-lista .meta { font: 500 var(--t-12) var(--f-num); color: var(--texto-2); }
.assin-lista .direita { display: grid; justify-items: end; gap: 6px; grid-row: span 2; align-content: center; }
.assin-lista li.inativo { opacity: .55; }
.ficha { display: grid; gap: var(--e-4); }
.ficha .cab-ficha { display: grid; gap: var(--e-2); }
.ficha .cab-ficha h2 { font-size: var(--t-28); letter-spacing: -.02em; }
.ciclo-cortes { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: var(--e-2); }
.ciclo-cortes .slot { display: grid; place-items: center; gap: 2px; min-height: 64px; border: 1px dashed var(--borda-forte); border-radius: var(--r); font: 600 var(--t-12) var(--f-num); color: var(--texto-3); }
.ciclo-cortes .slot.usado { border-style: solid; border-color: var(--texto-2); color: var(--texto); background: var(--card-2); }
.ciclo-cortes .slot.falta { border-style: solid; border-color: var(--atrasado); color: var(--atrasado); background: var(--atrasado-fundo); }
.ciclo-cortes .slot .icone { width: 18px; height: 18px; }
.historico li { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) 0; font: 500 var(--t-14) var(--f-num); }
@media (min-width: 1100px) {
  .assin-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
  .assin-tabela th { text-align: left; font-size: var(--t-12); font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; padding: var(--e-2) var(--e-3); border-bottom: var(--linha); }
  .assin-tabela td { padding: var(--e-3); border-bottom: var(--linha); vertical-align: middle; }
  .assin-tabela tr { cursor: pointer; }
  .assin-tabela a { text-decoration: none; }
  .assin-tabela a:hover b { text-decoration: underline; }
  .assin-tabela tbody tr:hover td { background: var(--card-2); }
  .ficha { grid-template-columns: 1fr 1fr; align-items: start; }
  .ficha .larga { grid-column: 1 / -1; }
}

/* ---------- Caixa ---------- */
.caixa { display: grid; gap: var(--e-4); }
.resumo-caixa { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.resumo-caixa > div { padding: var(--e-4); display: grid; gap: 4px; }
.resumo-caixa > div:nth-child(odd) { border-right: var(--linha); }
.resumo-caixa > div:nth-child(n+3) { border-top: var(--linha); }
.resumo-caixa .valor-medio { font-size: clamp(16px, 4.6vw, var(--t-20)); white-space: nowrap; }
.resumo-caixa .sobrou .valor-medio { font-size: clamp(18px, 5.2vw, var(--t-28)); color: var(--pago); }
.resumo-caixa .sobrou.negativo .valor-medio { color: var(--atrasado); }
.numeros-caixa { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); font-size: var(--t-14); color: var(--texto-2); }
.numeros-caixa b { font: 700 var(--t-16) var(--f-num); color: var(--texto); }
.lancamentos li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: var(--e-3); min-height: 52px; font-size: var(--t-14); }
.lancamentos .data { font: 500 var(--t-12) var(--f-num); color: var(--texto-2); }
.lancamentos .desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lancamentos .desc small { display: block; color: var(--texto-2); font-size: var(--t-12); }
.lancamentos .valor { font: 600 var(--t-14) var(--f-num); }
.lancamentos .valor.neg { color: var(--atrasado); }
.ver-todos { margin-top: var(--e-3); }
.formas { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); font-size: var(--t-14); }
.formas b { font: 700 var(--t-14) var(--f-num); margin-left: 6px; }
@media (min-width: 1100px) {
  .caixa { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .caixa > * { grid-column: span 6; }
  .resumo-caixa { grid-template-columns: repeat(4, 1fr); }
  .resumo-caixa > div:nth-child(n) { border: 0; border-left: var(--linha); }
  .resumo-caixa > div:first-child { border-left: 0; }
  .caixa .c-grafico { grid-column: span 4; } .caixa .c-servicos { grid-column: span 2; }
}

/* ---------- Serviços e Ajustes ---------- */
.estreito { max-width: 720px; display: grid; gap: var(--e-4); }
.servicos-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--e-3); min-height: 60px; }
.servicos-lista .ordem { display: grid; }
.servicos-lista .ordem button { width: 28px; height: 22px; padding: 0; border: 0; background: none; color: var(--texto-3); display: grid; place-items: center; }
.servicos-lista .ordem button:hover { color: var(--texto); }
.servicos-lista .info { min-width: 0; cursor: pointer; }
.servicos-lista .info b { display: block; }
.servicos-lista .info span { font: 500 var(--t-12) var(--f-num); color: var(--texto-2); }
.servicos-lista li.inativo .info { opacity: .5; }
.servicos-lista form { grid-column: 1 / -1; display: grid; gap: var(--e-3); padding: var(--e-2) 0 var(--e-4); }
.grupo-ajustes summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 700; padding: var(--e-1) 0; list-style: none; }
.grupo-ajustes summary::-webkit-details-marker { display: none; }
.grupo-ajustes summary::after { content: "+"; font: 400 var(--t-20) var(--f-num); color: var(--texto-2); }
.grupo-ajustes[open] summary::after { content: "−"; }
.grupo-ajustes form { display: grid; gap: var(--e-3); margin-top: var(--e-3); }
.grupo-ajustes .linha-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.logo-previa { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--card-2); border: var(--linha); }
.mais-lista a, .mais-lista button { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 56px; padding: 0; border: 0; background: none; text-decoration: none; font-weight: 600; font-size: var(--t-16); text-align: left; }
.mais-lista .icone { color: var(--texto-2); }
.mais-lista small { margin-left: auto; color: var(--texto-2); font: 500 var(--t-12) var(--f-num); }

/* ---------- Entrar ---------- */
.entrar { min-height: 100dvh; display: grid; place-items: center; padding: var(--e-5) var(--e-4); }
.entrar .caixa-entrar { width: min(400px, 100%); display: grid; gap: var(--e-5); }
.entrar .marca-entrar { display: grid; justify-items: start; gap: var(--e-3); }
.entrar .marca-entrar img { width: 56px; height: 56px; }
.entrar .marca-entrar h1 { font-size: var(--t-44); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.entrar form { display: grid; gap: var(--e-3); }
.entrar .erro-form { min-height: 1.4em; font-size: var(--t-14); color: var(--atrasado); }
.entrar .rodape { font-size: var(--t-12); color: var(--texto-2); }

/* ---------- Primeiros passos (conta nova) ---------- */
.primeiros-passos { border-color: var(--sinal-borda); }
.primeiros-passos h2 { font-size: var(--t-16); }
.primeiros-passos li { display: flex; align-items: center; gap: var(--e-3); min-height: 52px; }
.primeiros-passos .marca { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--borda-forte); flex: none; }
.primeiros-passos .marca .icone { width: 14px; height: 14px; stroke-width: 3; }
.primeiros-passos .feito .marca { background: var(--pago); border-color: var(--pago); color: var(--sobre-sinal); }
.primeiros-passos .feito .texto { color: var(--texto-2); text-decoration: line-through; }
.primeiros-passos .texto { flex: 1; font-weight: 600; }
/* o quadro do placar tem a largura das plaquinhas (sem sobra vazia no computador) */
@media (min-width: 1100px) { .grupo .placar { width: fit-content; max-width: 100%; } }