/* Componentes originais do CRM M3, inspirados em uiverse.io.
   Carregar depois de componentes.css e telas.css. Cores vêm de tokens.css. */

/* Cartões: inspirado em uiverse.io. A elevação não altera o espaço na grade. */
.cartao {
  min-width: 0;
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sombra-1);
  transition: transform var(--dur-base, 200ms) var(--ease-sair, ease-out),
    box-shadow var(--dur-base, 200ms) var(--ease-sair, ease-out),
    border-color var(--dur-base, 200ms) ease;
}
a.cartao { display: block; text-decoration: none; }
.cartao:focus-within { border-color: var(--control); box-shadow: var(--sombra-2); }
@media (hover: hover) and (pointer: fine) {
  .cartao:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
}

/* KPI: inspirado em uiverse.io; a cor destaca a variação, sem competir com o valor. */
.cartao--kpi { display: grid; align-content: start; gap: 10px; }
.cartao--kpi .cartao__rotulo { color: var(--muted); font-size: 13px; font-weight: 500; }
.cartao--kpi .cartao__valor {
  margin: 0;
  color: var(--brand-black);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cartao--kpi .cartao__variacao {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--raised);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 600;
}
.cartao--kpi .cartao__variacao.chip--positivo { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.cartao--kpi .cartao__variacao.chip--negativo { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.cartao--kpi .cartao__variacao.chip--atencao { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }

/* Prioridades: inspirado em uiverse.io. O texto mantém o significado sem depender da cor. */
.chip--prioridade-urgente { --prioridade-cor: var(--prioridade-urgente); --prioridade-fundo: var(--prioridade-urgente-fundo); }
.chip--prioridade-alta { --prioridade-cor: var(--prioridade-alta); --prioridade-fundo: var(--prioridade-alta-fundo); }
.chip--prioridade-normal { --prioridade-cor: var(--prioridade-normal); --prioridade-fundo: var(--prioridade-normal-fundo); }
.chip--prioridade-urgente, .chip--prioridade-alta, .chip--prioridade-normal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-chip);
  background: var(--prioridade-fundo);
  color: var(--prioridade-cor);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.chip--prioridade-urgente::before, .chip--prioridade-alta::before, .chip--prioridade-normal::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-chip);
  background: currentColor;
}
.chip--prioridade-urgente::before { animation: uiverse-ponto 1.8s ease-in-out infinite; }

/* Balões: inspirado em uiverse.io. Ícone vetorial original, desenhado como máscara. */
#baloes {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: none;
}
#baloes:empty { display: none; }
.balao {
  --balao-cor: var(--prioridade-normal);
  --balao-fundo: var(--prioridade-normal-fundo);
  position: relative;
  flex-shrink: 0;
  min-width: 0;
  padding: 16px 44px 18px 48px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-left: 4px solid var(--balao-cor);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sombra-2);
  pointer-events: auto;
  overflow-wrap: anywhere;
}
.balao--urgente { --balao-cor: var(--prioridade-urgente); --balao-fundo: var(--prioridade-urgente-fundo); }
.balao--alta { --balao-cor: var(--prioridade-alta); --balao-fundo: var(--prioridade-alta-fundo); }
.balao--normal { --balao-cor: var(--prioridade-normal); --balao-fundo: var(--prioridade-normal-fundo); }
.balao::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 14px;
  width: 22px;
  height: 22px;
  color: var(--balao-cor);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 8v5m0 3h.01M10.3 3.8 2.5 17.3A2 2 0 0 0 4.2 20h15.6a2 2 0 0 0 1.7-2.7L13.7 3.8a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 8v5m0 3h.01M10.3 3.8 2.5 17.3A2 2 0 0 0 4.2 20h15.6a2 2 0 0 0 1.7-2.7L13.7 3.8a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.balao__titulo { display: block; margin: 0; color: var(--balao-cor); font-size: 14px; font-weight: 700; line-height: 1.4; }
.balao__texto { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.5; white-space: pre-line; }
.balao__link { display: inline-block; margin-top: 8px; color: var(--accent); font-size: 13px; font-weight: 600; }
.balao__fechar {
  position: absolute;
  top: 8px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}
.balao__fechar:hover { background: var(--balao-fundo); color: var(--balao-cor); }
.balao__progresso {
  position: absolute;
  inset: auto 0 0;
  display: block;
  height: 3px;
  background: var(--balao-cor);
  transform-origin: left center;
  animation: uiverse-balao-tempo var(--balao-duracao, 6000ms) linear forwards;
}
.balao--pausado .balao__progresso { animation-play-state: paused; }
.balao[data-fechar-em="0"] .balao__progresso { display: none; }

/* Botão com relevo: inspirado em uiverse.io. */
.botao--primario { border-radius: var(--radius-control); box-shadow: var(--sombra-botao); }
.botao--primario:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); box-shadow: var(--sombra-botao-ativa); }
.botao--primario:disabled, .botao--primario[aria-disabled="true"] { box-shadow: none; }

/* Switch: inspirado em uiverse.io. Input nativo mantém teclado, foco e envio do formulário.
   <label class="alternar"><input type="checkbox"><span class="alternar__trilho" aria-hidden="true"></span>Rótulo</label> */
.alternar { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--text); cursor: pointer; }
.alternar > input[type="checkbox"] { position: absolute; top: 3px; left: 0; width: 44px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.alternar__trilho { position: relative; display: inline-block; flex: 0 0 44px; width: 44px; height: 26px; border: 1px solid var(--control); border-radius: var(--radius-chip); background: var(--active); pointer-events: none; transition: background-color var(--dur-base, 200ms) ease, border-color var(--dur-base, 200ms) ease; }
.alternar__trilho::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--radius-chip); background: var(--surface); box-shadow: var(--sombra-1); transition: transform var(--dur-base, 200ms) var(--ease-sair, ease-out); }
.alternar > input:checked + .alternar__trilho { background: var(--accent); border-color: var(--accent); }
.alternar > input:checked + .alternar__trilho::before { transform: translateX(18px); }
.alternar > input:focus-visible + .alternar__trilho { outline: 2px solid var(--accent); outline-offset: 3px; }
.alternar:has(> input:disabled) { color: var(--faint); cursor: not-allowed; }
.alternar > input:disabled { cursor: not-allowed; }
.alternar > input:disabled + .alternar__trilho { opacity: .55; }

/* Três pontos: inspirado em uiverse.io. Use role="status" e texto .sr-only junto dos spans. */
.carregando--pontos { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 32px; min-height: 24px; color: var(--accent); }
.carregando--pontos > span:not(.sr-only) { display: block; width: 6px; height: 6px; border-radius: var(--radius-chip); background: currentColor; animation: uiverse-pular 1s ease-in-out infinite; }
.carregando--pontos > span:nth-child(2) { animation-delay: 120ms; }
.carregando--pontos > span:nth-child(3) { animation-delay: 240ms; }

/* Progresso: inspirado em uiverse.io. Preferir <progress value="…" max="100"> com rótulo acessível. */
.barra-progresso { display: block; width: 100%; height: 8px; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-chip); background: var(--active); color: var(--accent); accent-color: var(--accent); }
progress.barra-progresso { appearance: none; }
.barra-progresso__valor { display: block; width: clamp(0%, var(--progresso, 0%), 100%); height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--dur-lenta, 320ms) var(--ease-sair, ease-out); }
.barra-progresso::-webkit-progress-bar { border-radius: var(--radius-chip); background: var(--active); }
.barra-progresso::-webkit-progress-value { border-radius: var(--radius-chip); background: var(--accent); }
.barra-progresso::-moz-progress-bar { border-radius: var(--radius-chip); background: var(--accent); }

/* Avatar: inspirado em uiverse.io. A inicial é conteúdo textual, não imagem de fundo. */
.avatar { display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.avatar > img { width: 100%; height: 100%; object-fit: cover; }
.avatar--pequeno { flex-basis: 28px; width: 28px; height: 28px; font-size: var(--fs-small); }

/* Tabela: inspirado em uiverse.io. Bordas separadas permitem cabeçalho fixo sem saltos. */
.tabela { border-collapse: separate; border-spacing: 0; }
.tabela thead th { position: sticky; top: var(--tabela-topo, 0px); z-index: 2; background: var(--raised); color: var(--muted); font-weight: 600; }
.tabela thead tr:first-child th:first-child { border-top-left-radius: var(--radius-card); }
.tabela thead tr:first-child th:last-child { border-top-right-radius: var(--radius-card); }
.tabela:not(:has(> tfoot)) tbody tr:last-child td:first-child,
.tabela tfoot tr:last-child > :first-child { border-bottom-left-radius: var(--radius-card); }
.tabela:not(:has(> tfoot)) tbody tr:last-child td:last-child,
.tabela tfoot tr:last-child > :last-child { border-bottom-right-radius: var(--radius-card); }
.tabela tbody tr { position: relative; transition: background-color var(--dur-rapida, 120ms) ease, box-shadow var(--dur-base, 200ms) ease, transform var(--dur-base, 200ms) var(--ease-sair, ease-out); }
.tabela tbody tr:focus-within { z-index: 1; background: var(--raised); box-shadow: var(--sombra-1); }
@media (hover: hover) and (pointer: fine) {
  .tabela tbody tr:hover { z-index: 1; background: var(--raised); box-shadow: var(--sombra-1); transform: translateY(-1px); }
}
.tabela-rolavel--fixa { max-height: min(65dvh, 520px); overflow: auto; overscroll-behavior: contain; }

/* Abas: inspirado em uiverse.io. O indicador desliza para dentro ao selecionar ou focar. */
.aba, .abas__item { position: relative; }
.aba { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--muted); font-size: var(--fs-body); text-decoration: none; white-space: nowrap; }
.aba::after, .abas__item::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: var(--radius-chip); background: var(--accent); opacity: 0; transform: translateX(-8px) scaleX(.7); transform-origin: left; transition: transform var(--dur-base, 200ms) var(--ease-sair, ease-out), opacity var(--dur-rapida, 120ms) ease; }
.aba[aria-selected="true"], .aba[aria-current="page"], .abas__item[aria-selected="true"], .abas__item[aria-current="page"] { color: var(--accent); border-bottom-color: transparent; font-weight: 600; }
.aba:is([aria-selected="true"], [aria-current="page"])::after,
.abas__item:is([aria-selected="true"], [aria-current="page"])::after { opacity: 1; transform: translateX(0) scaleX(1); }
.aba:hover, .aba:focus-visible { color: var(--accent); }
.aba:not([aria-selected="true"]):not([aria-current="page"]):hover::after,
.abas__item:not([aria-selected="true"]):not([aria-current="page"]):hover::after { opacity: .35; transform: translateX(0) scaleX(1); }
.abas--indicador { position: relative; }
.abas--indicador > .aba::after, .abas--indicador > .abas__item::after { display: none; }
.abas__indicador { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: var(--radius-chip); background: var(--accent); pointer-events: none; transition: width var(--dur-base) var(--ease-sair), transform var(--dur-base) var(--ease-sair); }

/* Etapas: inspirado em uiverse.io. Use <ol class="etapas"> e aria-current="step" no li atual. */
.etapas { display: flex; margin: 0; padding: 8px 0; list-style: none; counter-reset: etapa; }
.etapas > li { position: relative; flex: 1; min-width: 0; padding: 0 8px; color: var(--muted); font-size: 13px; text-align: center; overflow-wrap: anywhere; counter-increment: etapa; }
.etapas > li::before { content: counter(etapa); position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 10px; border: 2px solid var(--border); border-radius: var(--radius-chip); background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; }
.etapas > li:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: 50%; width: 100%; height: 2px; background: var(--border); }
.etapas > .etapas__item--concluida::before { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.etapas > .etapas__item--concluida::after { background: var(--accent); }
.etapas > li[aria-current="step"] { color: var(--accent); font-weight: 700; }
.etapas > li[aria-current="step"]::before { border-color: var(--accent); background: var(--accent); color: var(--surface); animation: uiverse-etapa 2s ease-in-out infinite; }

@keyframes uiverse-ponto { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes uiverse-pular { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@keyframes uiverse-balao-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes uiverse-etapa { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 6px var(--accent-soft); } }

@media (max-width: 640px) {
  #baloes { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100vw - 16px); max-height: calc(100dvh - 64px); }
  .etapas { flex-direction: column; gap: 0; }
  .etapas > li { min-height: 52px; padding: 4px 0 16px 44px; text-align: left; }
  .etapas > li::before { position: absolute; top: 0; left: 0; margin: 0; }
  .etapas > li:not(:last-child)::after { top: 30px; left: 14px; width: 2px; height: calc(100% - 28px); }
  .etapas > li:last-child { min-height: 30px; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cartao, .tabela tbody tr, .aba::after, .abas__item::after, .alternar__trilho, .alternar__trilho::before, .barra-progresso__valor { transition: none; }
  .chip--prioridade-urgente::before, .carregando--pontos > span, .etapas > li[aria-current="step"]::before, .balao__progresso { animation: none; }
  .cartao:hover, .tabela tbody tr:hover, .botao--primario:active:not(:disabled):not([aria-disabled="true"]) { transform: none; }
}