/* Aba B-roll (flow-broll.js).

   Espaço, raio, sombra, tipografia e os controles (plan-seg, gh-toolbar, card,
   empty, view-head) vêm do painel. A única cor que nasce aqui é a da marca
   escolhida (--broll-cor: o BRAND do painel, ou a rosé do Lalas), e ela só pinta
   ponto, borda e barra, nunca texto: texto fica nos tons --fg do painel, que
   passam em AA sobre branco e bege. Check de gravado no laranja-ink, nunca verde
   (DI-003-wlb 8.4). */
.broll-dot{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;background:var(--broll-cor,var(--accent));box-shadow:0 0 0 1.5px var(--white);vertical-align:1px}

.broll-resumo{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-6);padding:var(--sp-4) var(--sp-6);margin-bottom:var(--sp-4);border-left:3px solid var(--broll-cor,var(--accent))}
.broll-marca-nome{font-weight:800;font-size:17px;letter-spacing:-.01em}
.broll-numeros{display:flex;gap:var(--sp-4);color:var(--fg2);font-size:14px}
.broll-numeros b{color:var(--fg1);font-weight:900;font-size:18px}
.broll-proximos{flex-basis:100%;color:var(--fg2);font-size:13px}
.broll-proximos b{color:var(--fg1)}

.broll-toolbar{align-items:center}
.broll-esconder{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;font-size:14px;font-weight:600;color:var(--fg2);cursor:pointer}
.broll-esconder input,.broll-item input{width:18px;height:18px;flex:none;accent-color:var(--accent-aa)}

.broll-lista{display:flex;flex-direction:column;gap:var(--sp-3)}
.broll-cat{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--broll-cor,var(--accent));border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.broll-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px var(--sp-4);padding:var(--sp-4);list-style:none;cursor:pointer;border-radius:var(--r-md)}
.broll-sum::-webkit-details-marker{display:none}
.broll-sum:hover{background:color-mix(in srgb,var(--broll-cor,var(--accent)) 6%,var(--white))}
.broll-nome{min-width:0;font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--fg1);overflow-wrap:anywhere}
/* A seta é um span com aria-hidden, e não um ::before: conteúdo de pseudo-elemento
   entra no nome lido pelo leitor de tela (medido pela Vera na árvore do Chrome). */
.broll-seta{display:inline-block;width:1em;margin-right:4px;font-weight:900;color:var(--fg2);transition:transform .15s ease}
.broll-cat[open]>.broll-sum .broll-seta{transform:rotate(90deg)}
.broll-conta{font-size:12.5px;font-weight:700;color:var(--fg2);white-space:nowrap}
.broll-barra{grid-column:1/-1;display:block;height:6px;overflow:hidden;border-radius:var(--r-pill);background:color-mix(in srgb,var(--fg3) 16%,var(--white))}
.broll-barra>span{display:block;height:100%;border-radius:inherit;background:var(--broll-cor,var(--accent))}
.broll-prox{grid-column:1/-1;font-size:12.5px;color:var(--fg2)}

.broll-corpo{display:flex;flex-direction:column;gap:var(--sp-3);padding:0 var(--sp-4) var(--sp-4)}
.broll-serve{font-size:13.5px;color:var(--fg2)}
.broll-serve b{color:var(--fg1)}
.broll-agenda{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3)}
.broll-datas{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none}
.broll-data{display:inline-flex;align-items:center;gap:2px;padding:2px 2px 2px 12px;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:var(--fg1);background:color-mix(in srgb,var(--broll-cor,var(--accent)) 14%,var(--white));border:1px solid color-mix(in srgb,var(--broll-cor,var(--accent)) 45%,transparent)}
.broll-data button{width:32px;height:32px;border-radius:50%;font-size:18px;line-height:1;color:var(--fg2)}
.broll-data button:hover{background:var(--white);color:var(--accent-aa)}
.broll-form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.broll-form label{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:13px;font-weight:700;color:var(--fg2)}
.broll-form input[type="date"]{min-height:40px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--white);color:var(--fg1);font:inherit;font-size:14px}
.broll-btn{min-height:40px;padding:8px 16px;border-radius:var(--r-sm);background:var(--accent-aa);color:var(--white);font-weight:700;font-size:13.5px;transition:background-color .15s ease}
.broll-btn:hover{background:color-mix(in srgb,var(--accent-aa) 85%,#000)}
.broll-tentar{margin-top:var(--sp-3)}

.broll-itens{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:2px var(--sp-4);list-style:none}
.broll-item{display:flex;align-items:flex-start;gap:var(--sp-2);padding:7px 6px;border-radius:var(--r-sm);font-size:14px;line-height:1.4;color:var(--fg1);cursor:pointer}
.broll-item:hover{background:var(--beige)}
.broll-item input{margin-top:1px}
.broll-item:has(input:checked) span{color:var(--fg2);text-decoration:line-through}
.broll-vazio{padding:6px;font-size:13px;color:var(--fg2)}

.broll-sum:focus-visible{outline:2px solid var(--accent-aa);outline-offset:-3px}
.broll-painel :is(input,button):focus-visible{outline:2px solid var(--accent-aa);outline-offset:2px}
/* A busca reusa o .gh-toolbar dos Ganchos, que traz anel no --accent (2,77:1).
   Este seletor é mais específico e devolve o anel para o tom que passa em AA. */
.broll-painel .broll-toolbar input[type="search"]:focus-visible{outline:2px solid var(--accent-aa);outline-offset:2px}
/* O seletor de data tem parada de Tab no ícone do calendário, dentro do próprio
   campo: sem :focus-within, essa parada ficava sem contorno nenhum. */
.broll-form input[type="date"]:focus-within{outline:2px solid var(--accent-aa);outline-offset:2px}
/* Card do calendário: sem menu, então sem o respiro da direita que o menu usa. */
.pev.broll{padding-right:8px}
/* O prefixo do card mistura a cor da marca com o escuro. Nos 70% do painel o rosé
   do Lalas dava 4,10:1; a 60% os três passam (Lalas cerca de 5,0, WLB 5,8, WLC 8,9). */
.pev.broll .pev-pre{color:color-mix(in srgb,var(--pk,var(--accent)) 60%,var(--dark))}

@media(max-width:640px){
  .broll-resumo{padding:var(--sp-4)}
  .broll-form{width:100%}
  .broll-form label{flex:1}
  .broll-form input[type="date"]{flex:1;min-width:0}
  /* Alvo de toque de 44 px no celular. Escopado na Biblioteca (2026-09-16, quando
     o B-roll virou sub-aba dela) para as pílulas do Planejamento, que usam a mesma
     classe, continuarem como estão. Pega as pílulas de marca do b-roll e também as
     sub-abas Ganchos/Formatos/B-roll, que são o mesmo componente. */
  #view-biblioteca .plan-seg button{min-height:44px}
  .broll-painel .broll-toolbar input[type="search"]{min-height:44px}
  .broll-data{padding-left:14px}
  .broll-data button{width:44px;height:44px}
  .broll-form input[type="date"],.broll-form .broll-btn{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.broll-seta{transition:none}}
@media(prefers-contrast:more){.broll-cat,.broll-data{border-color:var(--fg1)}}