/* Deedo Studio — telas da equipe (spec 2026-09-28 §3). Depende de tokens.css e componentes.css.
   Só o que a equipe tem de diferente: barra com botão central, topo do dia, item da agenda,
   cronômetro, linha do tempo, pagamento e blocos de formulário. */

/* ---------- Layout ---------- */
.eq-main { max-width: 760px; }
/* Acompanha .eq-main (760px de conteúdo + 24px de --esp-5 de cada lado, igual ao padding do
   cabeçalho em telas >= 600px): sem isto o cabeçalho fica mais largo que o resto da tela. */
.nc-equipe .nc-cabecalho__interno { max-width: 808px; }
/* Alvo de toque de 44px: .botao-link (usado por "Observação" e "Cadastrar cliente novo") já
   ganha isso em componentes.css com uma ::after invisível (inset: -8px -6px), sem inchar a caixa
   visível — por isso fica de fora aqui. "Esqueci a senha" (login.php) é um <a class="nc-link
   alinhar-inicio"> puro, sem esse tratamento, então recebe altura mínima de verdade. */
.nc-equipe .nc-link.alinhar-inicio:not(.botao-link) { min-height: 44px; display: inline-flex; align-items: center; }
.eq-regiao { display: flex; flex-direction: column; gap: var(--esp-4); }
.eq-secao { display: flex; flex-direction: column; gap: var(--esp-3); }
.eq-secao__titulo { margin-top: var(--esp-2); }

/* ---------- Barra inferior com botão central ---------- */
.eq-nav { align-items: center; }
.eq-nav__botao { background: none; border: 0; padding: 0; cursor: pointer; }
.eq-nav__mais { flex: none; width: 56px; height: 56px; margin: -20px 6px 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--cor-texto); color: #fff; box-shadow: var(--sombra-2); cursor: pointer; transition: transform var(--mov-rapido) var(--curva); }
.eq-nav__mais:active { transform: scale(.96); }

/* ---------- Topo do dia ---------- */
.eq-dia { display: flex; align-items: center; gap: var(--esp-2); }
.eq-dia__texto { flex: 1; min-width: 0; }
.eq-dia__rotulo { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.015em; hyphens: none; }
.eq-dia__data { font-size: 15px; line-height: 20px; color: var(--cor-texto-3); }
.eq-dia__setas { flex: none; display: flex; align-items: center; gap: var(--esp-1); }
.eq-pilulas { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.eq-pilula { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--raio-pilula); background: var(--cor-superficie); color: var(--cor-texto-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.eq-alternar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: var(--raio-pilula); background: var(--cor-superficie); max-width: 360px; }
.eq-alternar button { min-height: 44px; padding: 0 var(--esp-3); border: 0; border-radius: var(--raio-pilula); background: transparent; color: var(--cor-texto-3); font-size: 14px; font-weight: 500; cursor: pointer; }
.eq-alternar button[aria-pressed="true"] { background: var(--cor-fundo); color: var(--cor-texto); box-shadow: var(--sombra-1); }

/* ---------- Em atendimento e próximo ---------- */
.eq-atual, .eq-proximo { display: flex; flex-direction: column; gap: var(--esp-3); }
.eq-atual { border: 1px solid var(--cor-linha-forte); background: var(--cor-superficie); }
.eq-atual__cab { display: flex; align-items: center; gap: var(--esp-3); }
.eq-atual__acoes { display: flex; align-items: center; gap: var(--esp-2); }
.eq-atual__acoes .btn { flex: 1; }
.eq-cronometro, .eq-proximo__hora { flex: none; font-size: 28px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Item da lista ---------- */
.eq-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 44px; align-items: center; column-gap: var(--esp-2); row-gap: 2px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--cor-linha); }
.lista > .eq-item:last-child { border-bottom: 0; }
.eq-item__hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.eq-item__corpo { flex: 1; min-width: 0; }
.eq-item__nome { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-item__linha { font-size: 14px; line-height: 20px; color: var(--cor-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 419px) {
  .eq-item { grid-template-columns: 52px minmax(0, 1fr) 44px; }
  .eq-item > .badge { grid-column: 2; grid-row: 2; justify-self: start; }
  .eq-item > .btn-icone { grid-column: 3; grid-row: 1 / span 2; }
  .eq-item__hora { align-self: start; padding-top: 2px; }
}
.eq-encerrados { border-top: 1px solid var(--cor-linha); }
.eq-encerrados > summary { display: flex; align-items: center; min-height: 48px; font-weight: 500; color: var(--cor-texto-2); cursor: pointer; list-style: none; }
.eq-encerrados > summary::-webkit-details-marker { display: none; }
.eq-encerrados > summary::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--cor-texto-3); }
.eq-encerrados[open] > summary::after { content: "\2013"; }

/* ---------- Linha do tempo ---------- */
.eq-linha { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.eq-faixa { display: flex; align-items: center; min-height: 44px; border-radius: var(--raio-p); font-size: 14px; line-height: 20px; }
.eq-faixa__hora { flex: none; width: 48px; font-variant-numeric: tabular-nums; color: var(--cor-texto-3); }
.eq-faixa__texto { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.eq-faixa__botao { display: flex; align-items: center; gap: var(--esp-2); width: 100%; min-height: 44px; padding: 6px var(--esp-3); border: 0; border-radius: inherit; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.eq-faixa--agendamento { align-items: stretch; min-height: calc(var(--faixas, 1) * 44px + (var(--faixas, 1) - 1) * 4px); }
.eq-faixa--agendamento .eq-faixa__botao { align-items: flex-start; }
.eq-faixa--agendamento .eq-faixa__texto { flex-direction: column; align-items: flex-start; gap: 0; }
.eq-faixa--agendamento .eq-faixa__hora { color: var(--cor-texto); font-weight: 600; }
.eq-faixa--pausa, .eq-faixa--passado { padding: 6px var(--esp-3); color: var(--cor-texto-3); }
.eq-faixa--pausa { background: repeating-linear-gradient(135deg, var(--cor-superficie) 0 6px, var(--cor-fundo) 6px 12px); }
.eq-faixa--livre { border: 1px dashed var(--cor-linha-forte); color: var(--cor-texto-2); }
@media (hover: hover) {
  .eq-faixa--livre:hover { border-color: var(--cor-texto-3); background: var(--cor-superficie); }
}

/* ---------- Concluir: forma de pagamento ---------- */
.eq-pagamento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
.eq-pagamento button { min-height: 56px; border: 1px solid var(--cor-linha-forte); border-radius: var(--raio-m); background: var(--cor-fundo); color: var(--cor-texto); font-size: 16px; font-weight: 500; cursor: pointer; }
.eq-pagamento button[aria-checked="true"] { background: var(--cor-texto); border-color: var(--cor-texto); color: #fff; }

/* Rótulo longo (ex.: "Concluir o atendimento atual primeiro") não pode estourar o botão nem a
   tela: .btn é nowrap por padrão (componentes.css), mas os botões dos painéis podem quebrar linha. */
.painel__acoes .btn { white-space: normal; }

/* ---------- Formulários da equipe (novo, atender agora) ---------- */
.eq-bloco { display: flex; flex-direction: column; gap: var(--esp-3); padding-bottom: var(--esp-5); border-bottom: 1px solid var(--cor-linha); }
.eq-bloco:last-of-type { border-bottom: 0; }
.eq-escolhido { display: flex; align-items: center; gap: var(--esp-3); padding: 12px var(--esp-4); border-radius: var(--raio-m); background: var(--cor-superficie); }
/* Chip de serviço com preço e duração: pode quebrar linha a 320px em vez de estourar a largura */
.eq-bloco .chip { max-width: 100%; padding-top: 6px; padding-bottom: 6px; text-align: left; }
.eq-barra { position: sticky; bottom: calc(var(--altura-nav) + env(safe-area-inset-bottom)); z-index: 10; display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) 0; background: var(--cor-fundo); border-top: 1px solid var(--cor-linha); }
@media (min-width: 1024px) { .eq-barra { bottom: 0; } }
/* A barra fixa (~130px com o botão, o aviso de falta e a margem) fica por cima do fim da página:
   sem isto, Tab levava o foco para um chip ou o botão "Salvar" e o navegador rolava só o
   suficiente para cobri-lo com a barra. componentes.css já reserva --altura-nav + 16px; aqui, nas
   telas com barra, o respiro extra é maior. Sem barra inferior (≥1024px), só os 130px contam. */
html:has(.eq-barra) { scroll-padding-bottom: calc(var(--altura-nav) + 130px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { html:has(.eq-barra) { scroll-padding-bottom: calc(130px + env(safe-area-inset-bottom)); } }
/* :has() sem suporte (navegador mais antigo): cada alvo focável reserva a própria margem de
   rolagem. body.nc-equipe é definido em includes/equipe/topo.php. */
.nc-equipe .chip, .nc-equipe .dia, .eq-barra .btn { scroll-margin-bottom: 130px; }

/* ---------- Toast não pode cobrir os botões do painel aberto ----------
   .painel-fundo:not([hidden]) ~ .nc-toasts não cobre tudo: os painéis de detalhes/concluir/
   confirmar de dashboard.php ficam dentro de <main>, então não são irmãos de #nc-toasts (que vem
   depois de </main>, em rodape.php) — só os painéis "Novo"/"Menu" são. Por isso o corpo ganha uma
   classe (nc.js: NC.abrirPainel/NC.fecharPainel) e o CSS reage a ela, cobrindo os dois casos. */
body.nc-painel-aberto .nc-toasts { bottom: auto; top: calc(16px + env(safe-area-inset-top)); }

/* ---------- Entrada da equipe ---------- */
.eq-entrar { max-width: 400px; margin: 0 auto; padding: var(--esp-7) var(--esp-4) var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-5); }
.eq-senha { position: relative; }
.eq-senha .campo__entrada { padding-right: 56px; }
.eq-senha .btn-icone { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }

/* ---------- Gestão: clientes, financeiro e dias bloqueados (spec 2026-09-16 §3) ---------- */
/* Título da tela com a ação principal à direita; a 320px a ação desce para a linha de baixo. */
.eq-topo { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--esp-2); }
.eq-topo__texto { flex: 1 1 180px; min-width: 0; }
.eq-topo__acao { flex: none; }

/* Quatro números do financeiro: 2 colunas no celular, 4 a partir de 600px. */
.eq-totais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
@media (min-width: 600px) { .eq-totais { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eq-total { display: flex; flex-direction: column; gap: 2px; padding: 12px var(--esp-3); border-radius: var(--raio-m); background: var(--cor-superficie); }
.eq-total__rotulo { font-size: 13px; line-height: 18px; color: var(--cor-texto-3); }
/* overflow-wrap: um saldo de seis dígitos não pode estourar a coluna a 320px */
.eq-total__valor { font-size: 20px; line-height: 26px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.eq-total__valor--negativo { color: var(--cor-erro); }

/* Valor de um lançamento ou de um atendimento na lista */
.eq-valor { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq-valor--saida { color: var(--cor-erro); }

/* Linha de botões que quebra em vez de estourar a tela (ficha do cliente, bloqueio) */
.eq-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.eq-acoes .btn { flex: 1 1 9rem; }
/* Item de lista que termina em botões (bloqueios): a 320px eles descem para a linha de baixo,
   em vez de espremerem o texto. */
.eq-item-acoes { flex-wrap: wrap; }
.eq-item-acoes > .eq-acoes { flex: none; margin-left: auto; }
.eq-item-acoes > .eq-acoes .btn { flex: 0 0 auto; }

/* Faltas frequentes (spec 2026-09-17 §3.1): a linha inteira abre a ficha do cliente. O nome é o
   link e uma ::after invisível cobre a linha (o mesmo recurso de .historico__abrir em
   componentes.css, que se apoia no position: relative de .lista__item); o botão Bloquear sobe
   por cima, como .lista__item .btn-icone já faz. Não dá para envolver a linha num <a>: ela tem
   um botão dentro. */
.eq-faltas__nome { display: block; font-weight: 600; color: inherit; text-decoration: none; }
.eq-faltas__nome::after { content: ""; position: absolute; inset: 0; }
.eq-faltas .eq-acoes { position: relative; z-index: 1; }

/* Linha do tempo com pausas e encaixes (spec 2026-09-22 §10.2) */
/* Sem height: 100% (2ª revisão): num li só com min-height (--faixas var), uma altura de 100% não
   tem base pra resolver e vira auto — quebra o align-items: stretch do <li> (.eq-faixa--agendamento)
   e o botão não preenche o bloco. Sem "height" explícito, o item stretch do flex do <li> já dá a
   .eq-ocupacoes a altura certa; align-self: stretch deixa isso explícito. */
.eq-ocupacoes { display: flex; flex-direction: column; align-self: stretch; gap: 4px; width: 100%; }
/* flex: 1 0 auto (não só "flex: 1", que é 1 1 0%): com três ocupações na mesma faixa, a base 0%
   deixava o texto (a pausa em especial, com o "· pausa" no fim) cortar antes de crescer — auto usa o
   conteúdo como base mínima, então o texto tem onde caber antes do espaço extra se dividir. */
.eq-ocupacao { flex: 1 0 auto; border-radius: var(--raio-p); }
.eq-ocupacao--trabalho { background-color: var(--cor-superficie); }
/* Estilo próprio da pausa (não reaproveita .eq-faixa--pausa, que é do almoço/bloqueio): listrado com
   a cor de linha, para não ficar parecido com uma faixa livre (que é tracejada e sem preenchimento).
   Borda tracejada (spec §10.2 "faixa clara tracejada"), na cor de texto-3 (não --cor-linha-forte, que
   é a da faixa livre) pra não se confundir com "livre". */
.eq-ocupacao--pausa { border: 1px dashed var(--cor-texto-3); color: var(--cor-texto-2); background-color: transparent; background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--cor-linha) 6px 12px); }
/* calc() em vez de largura fixa: o recuo não pode estourar a largura do bloco. */
.eq-ocupacao--encaixe { width: calc(100% - var(--esp-4)); margin-left: var(--esp-4); }
/* Mesmo tratamento neutro do card "Em atendimento" da lista — não é aviso/erro, é só destaque.
   Fica na ocupação (não no bloco inteiro): a pausa continua clara e a marca não cobre a encaixada.
   background-color (2ª revisão): "background" é atalho e zera o background-image das listras da
   pausa quando o atendimento em pausa está em andamento — o caso principal desta tela. */
.eq-ocupacao--atual { background-color: var(--cor-superficie); box-shadow: inset 3px 0 0 var(--cor-linha-forte); }
.eq-faixa__marcado { color: var(--cor-texto-3); font-size: 13px; }
@media (hover: hover) {
  .eq-ocupacao:hover { background-color: var(--cor-superficie-2); }
}

/* Dois campos lado a lado (de/até, início/fim); uma coluna só abaixo de 400px */
.eq-campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
@media (max-width: 399px) { .eq-campos-2 { grid-template-columns: minmax(0, 1fr); } }

/* Escolha em pílulas com <input type="radio"> de verdade (entrada/saída, dia inteiro/parte do dia):
   funciona sem JavaScript e o navegador já dá setas, Espaço e o grupo para o leitor de tela.
   Mesmo desenho de .eq-pagamento, que continua com role="radio" em <button> porque é montado
   pelo JS do painel de concluir. */
.eq-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
.eq-opcoes input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eq-opcoes label { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 var(--esp-2); border: 1px solid var(--cor-linha-forte); border-radius: var(--raio-m); background: var(--cor-fundo); color: var(--cor-texto); font-size: 16px; font-weight: 500; text-align: center; cursor: pointer; }
.eq-opcoes input:checked + label { background: var(--cor-texto); border-color: var(--cor-texto); color: #fff; }
.eq-opcoes input:focus-visible + label { outline: 2px solid var(--cor-texto); outline-offset: 2px; }
@media (hover: hover) {
  .eq-opcoes input:not(:checked) + label:hover { background: var(--cor-superficie); }
}
/* O grupo de rádios fica num <fieldset class="campo"> (o <legend> é o rótulo do grupo para o
   leitor de tela); o navegador dá borda e recuo próprios ao fieldset, que precisam sair. */
fieldset.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.campo > legend.campo__label { padding: 0; }
/* Cada lugar nas Configurações: moldura no desenho dos cartões, não a borda cinza do navegador. */
fieldset.eq-lugar { margin: 0; min-width: 0; padding: var(--esp-3); border: 1px solid var(--cor-linha-forte); border-radius: var(--raio-m); }
fieldset.eq-lugar > legend { padding: 0 var(--esp-1); }

/* Caixa de marcar nativa com rótulo clicável ("Cliente ativo" na ficha): alvo de 44px na linha
   toda, caixa de 24px, cor do sistema pela accent-color. */
.eq-marcar { display: flex; align-items: center; gap: var(--esp-3); min-height: 44px; font-size: 16px; font-weight: 500; cursor: pointer; }
.eq-marcar input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--cor-texto); cursor: pointer; }
.eq-marcar input:focus-visible { outline: 2px solid var(--cor-texto); outline-offset: 2px; }

/* ---------- Administração: serviços, usuários, configurações, relatórios e WhatsApp (spec 2026-09-17 §3) ---------- */
/* Três opções lado a lado (perfil, intervalo entre horários): cabem a 320px com o texto um pouco menor. */
.eq-opcoes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eq-opcoes--3 label { padding: 0 4px; font-size: 15px; }
.campo--erro .eq-opcoes label, .campo--erro .eq-dias label { border-color: var(--cor-erro); }

/* Dias da semana: caixas de marcar nativas em pílulas; 4 por linha no celular, 7 a partir de 480px. */
.eq-dias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-2); }
@media (min-width: 480px) { .eq-dias { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.eq-dias input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eq-dias label { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--cor-linha-forte); border-radius: var(--raio-m); background: var(--cor-fundo); color: var(--cor-texto); font-size: 15px; font-weight: 500; cursor: pointer; }
.eq-dias input:checked + label { background: var(--cor-texto); border-color: var(--cor-texto); color: #fff; }
.eq-dias input:focus-visible + label { outline: 2px solid var(--cor-texto); outline-offset: 2px; }
@media (hover: hover) {
  .eq-dias input:not(:checked) + label:hover { background: var(--cor-superficie); }
}

/* Serviço: miniatura de 56px na lista e imagem de 96px no painel, no fundo da vitrine do cliente. */
.eq-miniatura, .eq-imagem__atual { flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--raio-m); background: var(--cor-superficie); color: var(--cor-ilustracao-vazia); }
.eq-miniatura { width: 56px; height: 56px; }
.eq-imagem__atual { width: 96px; height: 96px; }
.eq-miniatura img, .eq-imagem__atual img { width: 100%; height: 100%; object-fit: cover; }
.eq-imagem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.eq-imagem__texto { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
/* input type="file" nativo: alvo de 44px e nunca mais largo que a tela */
.eq-arquivo { max-width: 100%; min-height: 44px; font-size: 15px; }
.eq-arquivo::file-selector-button { min-height: 44px; margin-right: var(--esp-2); padding: 0 var(--esp-3); border: 1px solid var(--cor-linha-forte); border-radius: var(--raio-pilula); background: var(--cor-fundo); color: var(--cor-texto); font: inherit; cursor: pointer; }

/* Configurações e WhatsApp: um cartão por assunto, cada um com o seu botão. */
.eq-cartao { display: flex; flex-direction: column; gap: var(--esp-4); scroll-margin-top: var(--esp-4); }
.eq-cartao > form { display: flex; flex-direction: column; gap: var(--esp-4); }
.eq-cartao .btn[type="submit"] { align-self: flex-start; }
@media (max-width: 479px) { .eq-cartao .btn[type="submit"] { align-self: stretch; } }
/* Passos numerados ("Como ligar") e nome técnico de modelo que quebra em vez de estourar */
.eq-passos { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--esp-3); }
.eq-passos .btn { margin-top: var(--esp-2); }
.eq-cartoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.eq-codigo { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; }

/* ---------- Relatórios ---------- */
/* Atalhos de período: links em pílula; o escolhido tem aria-current (mesmo desenho do chip marcado). */
.rel-periodos { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.chip[aria-current="true"] { background: var(--cor-texto); border-color: var(--cor-texto); color: #fff; }
.rel-numeros { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); }
@media (min-width: 600px) { .rel-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rel-variacao { font-size: 13px; line-height: 18px; color: var(--cor-texto-3); }
.rel-variacao--subiu { color: var(--cor-sucesso); }
.rel-variacao--caiu { color: var(--cor-erro); }
/* Barra: rótulo | trilho | número. O número é texto; a barra é só apoio visual (aria-hidden). */
.rel-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.rel-barra { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) auto; align-items: center; column-gap: var(--esp-3); row-gap: 4px; min-height: 32px; font-size: 14px; line-height: 20px; }
.rel-barra__rotulo { min-width: 0; overflow-wrap: anywhere; }
.rel-barra__trilho { height: 12px; border-radius: var(--raio-pilula); background: var(--cor-superficie); overflow: hidden; }
.rel-barra__cheia { display: block; height: 100%; border-radius: inherit; background: var(--cor-texto-2); }
.rel-barra__valor { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; text-align: right; }
/* Nomes de serviço são longos: o nome ocupa a linha de cima e a barra desce. */
.rel-barras--nomes .rel-barra { grid-template-columns: minmax(0, 1fr) auto; }
.rel-barras--nomes .rel-barra__rotulo { grid-column: 1 / -1; }
/* Listas de Serviços e Usuários: abaixo de 420px os botões descem para baixo do nome, em vez de espremê-lo */
@media (max-width: 419px) {
  .eq-lista-admin .eq-item-acoes > .eq-acoes { flex-basis: 100%; justify-content: flex-end; }
}

/* Editor de etapas e opções (spec 2026-09-22 §10.3) */
.rc-variacao { display: flex; flex-direction: column; gap: var(--esp-3); }
.rc-variacao__cab, .rc-etapa__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.rc-acoes { display: inline-flex; gap: 2px; }
.rc-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.rc-etapa { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3); border-radius: var(--raio-m); border: 1px solid var(--cor-linha); background: var(--cor-fundo); }
.rc-etapa--pausa { border-style: dashed; background: transparent; }
/* 240px: cabe "Pausa (profissional livre)" no seletor de tipo; no computador fica 2 x 2 */
.rc-etapa__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--esp-2); }
.rc-tempos summary { cursor: pointer; color: var(--cor-texto-2); font-size: 14px; }
.rc-tempos__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--esp-2); margin-top: var(--esp-2); }
.rc-ativo { gap: var(--esp-2); }
.rc-em-uso { color: var(--cor-texto-3); }
/* O sprite não tem chevron-up/chevron-down: "subir"/"descer" reaproveitam chevron-left girado. */
.rc-seta--cima { transform: rotate(90deg); }
.rc-seta--baixo { transform: rotate(-90deg); }
/* Só aqui (não em .btn-icone em geral, usado em outras telas): subir/descer/remover desabilitados
   (primeira etapa, última etapa, única etapa/opção) precisam parecer desabilitados. */
.rc-acoes .btn-icone:disabled { opacity: .35; cursor: not-allowed; }

/* Etapa atual e ajustes (spec 2026-09-22 §10.2) */
.eq-etapa { display: flex; flex-direction: column; gap: 2px; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-p); background: var(--cor-fundo); }
.eq-atual--pausa .eq-etapa { background: transparent; border: 1px dashed var(--cor-linha-forte); }
.eq-etapa__nome { font-weight: 600; }
.eq-etapa__tempo { font-variant-numeric: tabular-nums; color: var(--cor-texto-2); }
.eq-atual__ajustes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.eq-afetados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-1); }