/* public/css/larissa-funil.css: aba LARISSA (Painel da Larissa).
   Valores COPIADOS das telas aprovadas pelo dono (docs/superpowers/specs/painel-larissa-funil/montagem/pecas.json,
   bloco "css"), com TODA regra começando por #view-larissa: na montagem, o CSS global do Terminal pintou por cima
   das peças (botão branco sobre branco, chip sem borda, tabela sem fundo). Variáveis de cor no contêiner, nunca
   em :root. Não "harmonizar" com rel-btn/rel-chip (spec §3.1). Regras da referência sem uso aqui (.kpis, .row,
   .bar, .loss, .worst, .note) ficaram de fora de propósito. */
/* Topo 50 px = 18 px da montagem + 32 px das duas faixas do Pós-Venda (letreiro 15 px + faixa de status 17 px)
   que aparecem VAZIAS nas fotos aprovadas 5-* e que esta aba esconde (TICKER_MODE 'hide', senão mostrariam o
   conteúdo do Pós-Venda): sem isso tudo subia 32 px. As duas linhas finas são as bordas de baixo dessas faixas
   como saíram nas fotos (a do letreiro some nas pontas, 28 px, igual à máscara dele em terminal.css).
   Aceite: scripts/larissa-funil-aceite.mjs. */
#view-larissa{padding:50px 24px 30px;
  background:linear-gradient(90deg,transparent,var(--border-subtle) 28px,var(--border-subtle) calc(100% - 28px),transparent) 0 14px/100% 1px no-repeat,
    linear-gradient(var(--border-subtle),var(--border-subtle)) 0 31px/100% 1px no-repeat}

#view-larissa .r1 .tp{--paper:#F6F4EF;--white:#FFFFFF;--cream:#FDFCF9;--b1:#EAE6DC;--b2:#DBD6C8;--ink:#16140F;--ink2:#6E6759;--or:#C97527;--ord:#9C560F;--ok:#1B6E3E;--warn:#8F6510;--red:#B3372A;--oksoft:#E4F1E9;--redsoft:#F9E6E2;--warnsoft:#FBF0DA;
  background:var(--paper);color:var(--ink);font-family:'Segoe UI',system-ui,Arial,sans-serif;font-size:13px;padding:14px;border-radius:8px}
#view-larissa .r1 .tp .lbl{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
#view-larissa .r1 .tp .num{font-family:'Cascadia Mono',Consolas,monospace}
#view-larissa .r1 .tp .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
#view-larissa .r1 .tp .chips{display:flex;gap:6px;flex-wrap:wrap}
#view-larissa .r1 .tp table{border-collapse:collapse;width:100%;background:var(--white);border:1px solid var(--b1);border-radius:8px}
#view-larissa .r1 .tp th,#view-larissa .r1 .tp td{padding:6px 8px;border-bottom:1px solid var(--b1);text-align:right}
#view-larissa .r1 .tp th:first-child,#view-larissa .r1 .tp td:first-child{text-align:left}
#view-larissa .r1 .tp td.c{cursor:pointer}
#view-larissa .r1 .tp .sub{font-size:11px;color:var(--ink2)}

#view-larissa .r2 .tp{--paper:#F6F4EF;--white:#FFFFFF;--b1:#EAE6DC;--b2:#DBD6C8;--ink:#16140F;--ink2:#6E6759;--or:#C97527;--ord:#9C560F;--ors:#A65A12;--ok:#1B6E3E;--warn:#8F6510;--red:#B3372A;--blue:#3E6B8F;--oksoft:#E4F1E9;--redsoft:#F9E6E2;--warnsoft:#FBF0DA;
  background:var(--paper);color:var(--ink);font-family:'Segoe UI',system-ui,Arial,sans-serif;font-size:13px;padding:14px;border-radius:8px;position:relative}
#view-larissa .r2 .tp .lbl{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
#view-larissa .r2 .tp .num{font-family:'Cascadia Mono',Consolas,monospace}
#view-larissa .r2 .tp table{border-collapse:collapse;width:100%;background:var(--white);border:1px solid var(--b1)}
#view-larissa .r2 .tp th,#view-larissa .r2 .tp td{padding:5px 7px;border-bottom:1px solid var(--b1);text-align:right}
#view-larissa .r2 .tp th:first-child,#view-larissa .r2 .tp td:first-child{text-align:left}
#view-larissa .r2 .tp .sub{font-size:11px;color:var(--ink2)}
#view-larissa .r2 .tp .sel{outline:2px solid var(--ors);background:#F9E6E2}
#view-larissa .r2 .tp .drawer{background:var(--white);border:1px solid var(--b2);border-radius:8px;box-shadow:0 6px 24px rgba(22,20,15,.12);padding:12px}
#view-larissa .r2 .tp .chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
#view-larissa .r2 .tp .chip{border-radius:9px;padding:3px 9px;font-size:12px;border:1px solid var(--b2);background:var(--paper);cursor:pointer}
#view-larissa .r2 .tp .chip.on{background:var(--ors);color:#fff;border-color:var(--ors)}
#view-larissa .r2 .tp .item{border-top:1px solid var(--b1);padding:8px 0;display:grid;grid-template-columns:1fr auto;gap:4px 10px}
#view-larissa .r2 .tp .tag{font-size:11px;border-radius:9px;padding:1px 8px;display:inline-block}
#view-larissa .r2 .tp .t-sumiu{background:var(--warnsoft);color:var(--warn)}
#view-larissa .r2 .tp .t-equipe{background:#E6EEF5;color:var(--blue)}
#view-larissa .r2 .tp .t-nao{background:var(--redsoft);color:var(--red)}
#view-larissa .r2 .tp .t-conv{background:var(--oksoft);color:var(--ok)}
#view-larissa .r2 .tp .quote{font-size:12px;color:var(--ink2);border-left:3px solid var(--b2);padding-left:8px;grid-column:1/3}
#view-larissa .r2 .tp .btn{background:var(--ors);color:#fff;border:0;border-radius:2px;padding:4px 10px;font-size:12px;cursor:pointer;align-self:start}
#view-larissa .r2 .tp .ghost{background:transparent;color:var(--ord);border:1px solid var(--b2)}

#view-larissa .r3 .tp{--paper:#F6F4EF;--white:#FFFFFF;--b1:#EAE6DC;--b2:#DBD6C8;--ink:#16140F;--ink2:#6E6759;--or:#C97527;--ord:#9C560F;--ors:#A65A12;--ok:#1B6E3E;--red:#B3372A;--blue:#3E6B8F;--oksoft:#E4F1E9;--redsoft:#F9E6E2;--warnsoft:#FBF0DA;
  background:var(--paper);color:var(--ink);font-family:'Segoe UI',system-ui,Arial,sans-serif;font-size:13px;padding:14px;border-radius:8px}
#view-larissa .r3 .tp .lbl{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
#view-larissa .r3 .tp .num{font-family:'Cascadia Mono',Consolas,monospace}
#view-larissa .r3 .tp .chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
#view-larissa .r3 .tp .chip{border-radius:9px;padding:3px 9px;font-size:12px;border:1px solid var(--b2);background:var(--white)}
#view-larissa .r3 .tp .box{background:var(--white);border:1px solid var(--b1);border-radius:8px;padding:10px}
#view-larissa .r3 .tp table{border-collapse:collapse;width:100%}
#view-larissa .r3 .tp th,#view-larissa .r3 .tp td{padding:4px 6px;border-bottom:1px solid var(--b1);text-align:right}
#view-larissa .r3 .tp th:first-child,#view-larissa .r3 .tp td:first-child{text-align:left}
#view-larissa .r3 .tp .up{color:var(--ok);font-weight:600}
#view-larissa .r3 .tp .down{color:var(--red);font-weight:600}
#view-larissa .r3 .tp .sub{font-size:11px;color:var(--ink2)}

/* Só comportamento (não muda a aparência aprovada): mãozinha nos pontos clicáveis e os campos do marco. */
#view-larissa [data-lf],#view-larissa [data-lf-cel],#view-larissa [data-lf-marco],#view-larissa [data-lf-filtro],#view-larissa [data-lf-tipo],#view-larissa [data-lf-remover]{cursor:pointer}
#view-larissa .lf-campo{font:inherit;font-size:12px;border:1px solid #DBD6C8;border-radius:2px;padding:3px 6px;background:#fff;color:#16140F}

/* Filtros no padrão do painel da LP (pedido do dono, 04/10; spec §12) — substitui o "layout IDÊNTICO" só aqui.
   Cópia de admin-novo.css da LP (.lpn-topo, .lpn-produtos, .lpn-periodo-*, .lpn-calendario, .lpn-cal-*, .lpn-dia-*) com
   prefixo lf- (o CSS da LP usa classes soltas; nome igual pegaria as regras dela sem as variáveis --n-*) e as cores
   traduzidas para os tokens do Terminal: destaque → --accent-solid (fundo com texto em cima) / --accent (borda, faixa,
   ícone; texto laranja pequeno → --accent-deep); texto sobre o destaque → --accent-contrast; cartao → --surface;
   cartao-2 → --surface-2; borda → --border-subtle; borda-2 → --border; tinta → --text; tinta-2 → --text-2;
   apagado → --text-3; raio do cartão → 8px (o da aba); sombra do painel → --shadow (a da LP é cor chumbada). Medidas
   (padding, alturas, 999px, 150px dos atalhos, 36px do dia, 760px do painel) iguais às da LP.
   .lf-topo é contêiner (100cqi = largura da fileira) e fica acima da montagem: o calendário abre por cima da tabela. */
#view-larissa .lf-topo{position:relative;z-index:30;container-type:inline-size;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--text)}
#view-larissa .lf-topo [hidden]{display:none!important}
#view-larissa .lf-pilula{display:inline-flex;flex-wrap:wrap;border:1px solid var(--border);border-radius:999px;padding:2px;font-family:var(--sans);font-size:13px;line-height:1.5}
#view-larissa .lf-pilula button{font:inherit;font-size:12px;background:none;border:0;color:var(--text-2);padding:6px 12px;border-radius:999px;cursor:pointer;min-height:32px}
#view-larissa .lf-pilula button[aria-pressed="true"]{background:var(--accent-solid);color:var(--accent-contrast);font-weight:600}
#view-larissa .lf-periodo{position:relative}
#view-larissa .lf-periodo-botao{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px;min-height:32px;cursor:pointer}
#view-larissa .lf-periodo-botao:hover{border-color:var(--accent)}
#view-larissa .lf-periodo-icone{color:var(--accent)}
#view-larissa .lf-periodo-seta{color:var(--text-3);font-size:11px}
#view-larissa .lf-cal{position:absolute;z-index:20;top:calc(100% + 8px);left:0;width:min(760px,100cqi);background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:14px}
#view-larissa .lf-cal-corpo{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px}
#view-larissa .lf-cal-atalhos{display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--border-subtle);padding-right:12px}
#view-larissa .lf-cal-atalhos button{text-align:left;font:inherit;font-size:13px;color:var(--text-2);background:none;border:0;border-radius:6px;padding:8px 10px;cursor:pointer}
#view-larissa .lf-cal-atalhos button:hover{background:var(--surface-2);color:var(--text)}
#view-larissa .lf-cal-atalhos button[aria-pressed="true"]{background:var(--surface-2);color:var(--accent-deep);font-weight:600}
#view-larissa .lf-cal-meses-area{position:relative}
#view-larissa .lf-cal-nav{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;pointer-events:none}
#view-larissa .lf-cal-nav button{pointer-events:auto;font:inherit;font-size:18px;line-height:1;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}
#view-larissa .lf-cal-nav button:disabled{opacity:.35;cursor:default}
#view-larissa .lf-cal-meses{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#view-larissa .lf-cal-mes-titulo{text-align:center;font-size:15px;line-height:32px;margin-bottom:6px;text-transform:capitalize}
#view-larissa .lf-cal-grade{width:100%;border-collapse:collapse}
#view-larissa .lf-cal-grade th{font-size:11px;font-weight:500;color:var(--text-3);padding:4px 0;text-align:center}
#view-larissa .lf-cal-grade td{padding:2px 0;text-align:center}
#view-larissa .lf-dia{width:100%;height:36px;font:inherit;font-size:13px;font-variant-numeric:tabular-nums;color:var(--text);background:none;border:0;border-radius:0;cursor:pointer}
#view-larissa .lf-dia:hover:not(:disabled){outline:1px solid var(--accent);outline-offset:-1px;border-radius:999px}
#view-larissa .lf-dia--hoje{font-weight:700;text-decoration:underline;text-underline-offset:3px}
#view-larissa .lf-dia--fora{color:var(--border);cursor:default}
#view-larissa .lf-dia--meio{background:color-mix(in srgb,var(--accent) 18%,transparent)}
#view-larissa .lf-dia--inicio,#view-larissa .lf-dia--fim{background:var(--accent-solid);color:var(--accent-contrast);font-weight:700}
#view-larissa .lf-dia--inicio{border-radius:999px 0 0 999px}
#view-larissa .lf-dia--fim{border-radius:0 999px 999px 0}
#view-larissa .lf-dia--inicio.lf-dia--fim{border-radius:999px}
#view-larissa .lf-cal-rodape{display:flex;align-items:center;gap:10px;border-top:1px solid var(--border-subtle);margin-top:12px;padding-top:12px}
#view-larissa .lf-cal-resumo{margin-right:auto;font-size:13px;color:var(--text-2)}
#view-larissa .lf-cal-limpar,#view-larissa .lf-cal-aplicar{font:inherit;font-size:13px;border-radius:999px;padding:7px 16px;min-height:34px;cursor:pointer}
#view-larissa .lf-cal-limpar{background:none;border:1px solid var(--border);color:var(--text-2)}
#view-larissa .lf-cal-aplicar{background:var(--accent-solid);border:1px solid var(--accent-solid);color:var(--accent-contrast);font-weight:600}
#view-larissa .lf-cal-aplicar:disabled{opacity:.45;cursor:default}
#view-larissa .lf-topo :focus-visible,#view-larissa .lf-pilula :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* toque: sem o retângulo azul do navegador por cima da pílula (o estado é o aria-pressed) */
#view-larissa .lf-topo button,#view-larissa .lf-pilula button{-webkit-tap-highlight-color:transparent}
/* Passagem e perfil em cima do gráfico (rótulo .lbl da aba à esquerda) e motivos da gaveta: mesma pílula. Se a pílula
   não cabe na largura, quebra em linhas: nenhuma opção some. */
#view-larissa .lf-fileiras{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
#view-larissa .lf-fileira{display:flex;align-items:center;gap:8px}
#view-larissa .lf-fileira>.lbl{flex:0 0 64px}
#view-larissa .lf-motivos{margin:8px 0}
/* Pílula que pode quebrar em linhas: canto = metade da altura de UMA linha (38 px → 19; 50 px com alvo de 44 → 25).
   Numa linha só fica igual à de 999px da LP; quebrada, vira retângulo arredondado em vez de um ovo que corta os botões. */
#view-larissa .lf-fileira .lf-pilula,#view-larissa .lf-motivos{border-radius:19px}
/* Toque (iPad, celular): todo alvo dos filtros com 44 px (a LP só faz isso abaixo de 640 px; John e Thiago usam iPad). */
@media (pointer:coarse){
  #view-larissa .lf-pilula button,#view-larissa .lf-periodo-botao,#view-larissa .lf-cal-atalhos button,#view-larissa .lf-cal-limpar,#view-larissa .lf-cal-aplicar{min-height:44px}
  #view-larissa .lf-dia{height:44px}
  #view-larissa .lf-cal-nav button{width:44px;height:44px}
  #view-larissa .lf-cal-mes-titulo{line-height:44px}
  #view-larissa .lf-fileira .lf-pilula,#view-larissa .lf-motivos{border-radius:25px}
}
/* Painel estreito (o que a LP faz abaixo de 760 px): a aba põe as classes conforme o espaço ao lado do botão
   (encaixeCalendario) — compacto = atalhos em linha, em cima; um-mes = só o mês da direita. */
#view-larissa .lf-cal--compacto .lf-cal-corpo{grid-template-columns:1fr}
#view-larissa .lf-cal--compacto .lf-cal-atalhos{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--border-subtle);padding:0 0 10px}
#view-larissa .lf-cal--compacto .lf-cal-rodape{flex-wrap:wrap}
#view-larissa .lf-cal--compacto .lf-cal-resumo{flex-basis:100%}
#view-larissa .lf-cal--um-mes .lf-cal-meses{grid-template-columns:1fr}
#view-larissa .lf-cal--um-mes .lf-cal-mes--primeiro{display:none}
/* Celular (< 640 px): calendário na largura da tela (a aba decide), dia e pílula com 44 px, rótulo em cima da pílula. */
@media (max-width:639px){
  #view-larissa .lf-dia{height:44px}
  #view-larissa .lf-pilula button{min-height:44px}
  #view-larissa .lf-fileira .lf-pilula,#view-larissa .lf-motivos{border-radius:25px}
  #view-larissa .lf-fileira{flex-direction:column;align-items:flex-start;gap:4px}
  #view-larissa .lf-fileira>.lbl{flex:none}
}

/* Balão dos marcos do gráfico (04/10, pedido do dono: "igual uma nota de célula de Excel"). #FFFDE7 é o amarelo claro
   da nota do Excel; o triângulo vermelho no canto é o indicador de comentário dele. Um elemento só, filho de
   #view-larissa (some junto quando a aba esconde), posição fixa calculada pela aba perto do ponteiro (larissa-funil.js). */
#view-larissa .lf-nota{position:fixed;z-index:50;max-width:280px;background:#FFFDE7;border:1px solid #DBD6C8;border-radius:2px;box-shadow:0 6px 24px rgba(22,20,15,.12);padding:8px 10px;font:12px 'Segoe UI',system-ui,Arial,sans-serif;color:#16140F;pointer-events:none}
#view-larissa .lf-nota[hidden]{display:none}
#view-larissa .lf-nota::before{content:'';position:absolute;top:0;right:0;border-top:6px solid #B3372A;border-left:6px solid transparent}
#view-larissa .lf-nota b{display:block;font-weight:700;padding-right:8px}
#view-larissa .lf-nota-quando{margin-top:2px;font-size:11px;color:#6E6759}
#view-larissa .lf-nota-texto{margin-top:6px;line-height:1.4;overflow-wrap:anywhere}
#view-larissa .lf-nota-pr{margin-top:6px;font-size:11px;color:#9C560F}
/* Balão do GRUPO de marcos (revisão final I2, 05/10): a mesma nota, mas pega o mouse e o toque, porque cada item é um
   botão que compara aquele marco. Itens separados por um fio; o passado por cima e o comparado ganham o fundo de
   aviso da aba. Mesmas cores da nota acima (nada novo); no toque, alvo de 44 px. */
#view-larissa .lf-nota--grupo{pointer-events:auto;max-height:calc(100vh - 16px);overflow:auto}
/* Rótulo do grupo no gráfico ("N marcos"): contorno no branco da caixa (--white do .r3 .tp), para tracejado nenhum
   riscar o número. */
#view-larissa #lfGrafico [data-lf-grupo] text{paint-order:stroke;stroke:var(--white);stroke-width:3px;stroke-linejoin:round}
#view-larissa .lf-nota-cab{font-size:11px;color:#6E6759;padding-right:8px;margin-bottom:4px}
#view-larissa .lf-nota-item{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-top:1px solid #DBD6C8;padding:6px 4px;cursor:pointer}
#view-larissa .lf-nota-item>span{display:block}
#view-larissa .lf-nota-item:hover,#view-larissa .lf-nota-item[aria-pressed="true"]{background:#FBF0DA}
#view-larissa .lf-nota-item:focus-visible{outline:2px solid #A65A12;outline-offset:-2px}
@media (pointer:coarse){
  #view-larissa .lf-nota-item{min-height:44px}
}

/* Telas estreitas (04/10, decisão do dono: "empilhar"). O desenho aprovado é para 1536 e 1920 px e continua
   intacto ali. Abaixo de 1280 px (iPad em pé e deitado, notebook pequeno) a montagem empilha: tabela, gráfico e
   comparação na largura toda; com a gaveta aberta, a lista vai para baixo da tabela. O !important vence o estilo
   em linha da montagem (larissa-funil-render.js). Número e % de uma célula nunca quebram de linha. */
#view-larissa .r1 .tp td.num,#view-larissa .r2 .tp td.num{white-space:nowrap}
@media (max-width:1279px){
  #view-larissa .lf-montagem{grid-template-columns:minmax(0,1fr)!important}
  #view-larissa .lf-montagem #lfGrafico{min-height:260px!important}
  #view-larissa .r2 .tp.lf-gaveta{grid-template-columns:minmax(0,1fr)!important}
  #view-larissa .r2 .tp.lf-gaveta>table{max-width:520px}
}
/* iPad/iPhone não têm Cascadia nem Consolas: sem isto os números caem na Courier, larga, e a tabela estoura. */
@supports (-webkit-touch-callout:none){
  #view-larissa .tp .num,#view-larissa .tp .num text{font-family:'SF Mono',Menlo,monospace}
}