/* =====================================================================
   BIBLIOTECA DE COMPONENTES — Fase 2 do redesign.
   Nomes de classe idênticos aos do protótipo (vidacor-crm-esboco.html)
   para a Fase 4 portar tela a tela sem tradução. Nenhum valor solto:
   tudo vem de tokens.css. Regra transversal: todo estado carrega TRÊS
   sinais — cor, ícone e posição/borda. Cor sozinha nunca comunica.
   ===================================================================== */

/* ------------------------------------------------------------- Tag
   Elemento pequeno de status: fundo sólido vivo + texto -on. */
.tag {
  font-size: var(--fs-meta); font-weight: 500;
  padding: 3px 9px; border-radius: 5px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.tag.t-erro   { background: var(--rd); color: var(--rd-on); }
.tag.t-pend   { background: var(--or); color: var(--or-on); }
.tag.t-ok     { background: var(--gr); color: var(--gr-on); }
.tag.t-info   { background: var(--bl); color: var(--bl-on); }
.tag.t-neutro { background: var(--card2); color: var(--t2); border: 1px solid var(--bd2); }

/* ------------------------------------------------------------- Campo
   Erro muda borda + fundo E adiciona mensagem com ícone (3 sinais). */
.fg {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap-grid);
}
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f label {
  font-size: var(--fs-rotulo); font-weight: var(--peso-rotulo); color: var(--t2);
  display: flex; align-items: center; gap: 7px;
}
.f input, .f select, .f textarea {
  background: var(--input); border: 1px solid var(--bd2);
  border-radius: var(--raio-controle); height: var(--altura-controle);
  padding: 0 12px; color: var(--t1); font-size: var(--fs-corpo);
  width: 100%; max-width: var(--max-input);
}
.f textarea { height: auto; min-height: var(--altura-controle); padding: 8px 12px; }
.f input::placeholder, .f textarea::placeholder { color: var(--t3); }
.f .dica { font-size: var(--fs-meta); color: var(--t2); }
.f.erro input, .f.erro select, .f.erro textarea {
  border-color: var(--rd); background: var(--rd-campo);
}
.f .msg {
  font-size: var(--fs-meta); font-weight: 500; color: var(--rd-t);
  display: flex; align-items: center; gap: 6px;
}
/* destaque breve quando um chip/faixa traz o foco até aqui */
.f.foco-pendencia input, .f.foco-pendencia select { outline: 2px solid var(--or); outline-offset: 2px; }
/* campo de leitura (ficha do cliente) não tem input: destaca o próprio bloco */
.foco-pendencia:not(.f) { outline: 2px solid var(--or); outline-offset: 4px; border-radius: 6px; }

/* ------------------------------------------------------------- Card */
.card {
  background: var(--card); border: 1px solid var(--bd);
  border-radius: var(--raio-card); overflow: hidden;
}
.ch {
  padding: 13px var(--pad-card); border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 10px;
}
.ch h3 { font-size: var(--fs-card); font-weight: var(--peso-titulo); }
.ch .conta { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.cb { padding: var(--pad-card); }
.cb + .cb { border-top: 1px solid var(--bd); }
.stack { display: flex; flex-direction: column; gap: var(--gap-cards); }

/* ------------------------------------------------------------- Tabela
   Linha de 56px, header sticky, ação à direita, destrutiva como ícone. */
/* `.card` é overflow:hidden, então tabela larga dentro dele some pela direita.
   A rolagem tem de ser da TABELA, não da página. */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* `min-width: max-content` faz a tabela ROLAR em vez de espremer: numa
   comparação de 3 planos no celular, as colunas caíam para ~79px úteis e
   "R$ 1.263,38" quebrava no meio. Onde sobra espaço, o width:100% manda. */
.tabela-rolagem > .tabela { min-width: max-content; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--t2); text-align: left;
  padding: 11px var(--pad-card); border-bottom: 1px solid var(--bd);
  background: var(--card2); position: sticky; top: 0; z-index: 1;
}
.tabela td {
  height: 56px; padding: 8px var(--pad-card);
  border-bottom: 1px solid var(--bd); font-size: var(--fs-corpo);
  vertical-align: middle;
}
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--card2); }
.tabela td .nm { font-weight: 500; }
.tabela td .mt { font-size: var(--fs-meta); color: var(--t2); margin-top: 2px; }
.rowact { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.ib {
  width: var(--alvo-min); height: var(--alvo-min); border-radius: 7px;
  display: grid; place-items: center; color: var(--t2);
  background: none; border: 0; cursor: pointer;
}
.ib:hover { background: var(--rd-bg); color: var(--rd-t); }

/* -------------------------------------------------- Rótulo / valor */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 24px; }
.kv div span { display: block; font-size: var(--fs-rotulo); font-weight: 500; color: var(--t2); }
.kv div b { display: block; font-size: var(--fs-corpo); font-weight: 400; color: var(--t1); margin-top: 2px; }
.sec {
  font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--t2); margin-bottom: 12px;
}

/* ------------------------------------------------------ ItemDocumento */
.doc {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid var(--bd);
  /* selo + "Abrir" + lixeira comem ~240px fixos; num trilho estreito sobrava
     nada para o nome e ele empilhava letra a letra. Agora as ações descem. */
  flex-wrap: wrap;
}
.doc-txt { min-width: 0; flex: 1 1 150px; }
.doc:last-child { border-bottom: 0; }
.doc .ic {
  width: 34px; height: 34px; border-radius: var(--raio-controle);
  background: var(--card2); display: grid; place-items: center;
  color: var(--t2); flex: none;
}
.doc .nm {
  font-size: 14px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc .mt {
  font-size: var(--fs-meta); color: var(--t2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drop {
  border: 1px dashed var(--bd2); border-radius: var(--raio-controle);
  padding: 14px; text-align: center; font-size: var(--fs-meta);
  color: var(--t2); margin-top: 12px; cursor: pointer;
}
.drop:hover { border-color: var(--or); color: var(--t2); }

/* --------------------------------------------------------- AreaVazia */
.vazio {
  border: 1px dashed var(--bd2); border-radius: var(--raio-card);
  padding: 48px 24px; text-align: center; color: var(--t2);
}
.vazio i, .vazio svg { width: 34px; height: 34px; margin-bottom: 12px; }
.vazio b { display: block; font-size: var(--fs-card); font-weight: 500; color: var(--t2); margin-bottom: 4px; }

/* --------------------------------------------------------- Esqueleto
   Forma do conteúdo, nunca spinner central. */
.esqueleto { display: flex; flex-direction: column; gap: 10px; }
.esqueleto i {
  display: block; height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, var(--card2) 25%, var(--bd) 50%, var(--card2) 75%);
  background-size: 200% 100%; animation: esq 1.2s linear infinite;
}
.esqueleto i.alto { height: 40px; }
.esqueleto i.meia { width: 55%; }
@keyframes esq { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto i { animation: none; } }

/* ------------------------------------------------------------- Modal
   720px, max-height 86vh, cabeçalho e rodapé fixos, corpo rolável. */
.ovl {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); /* véu, não status */
  z-index: 1000; display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.ovl.on { display: flex; }
.modal-c {
  background: var(--card); border: 1px solid var(--bd2); border-radius: 14px;
  width: 720px; max-width: 100%; max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.mh {
  padding: 16px 22px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 12px; flex: none;
}
/* min-height:0 é obrigatório: sem ele o filho de flex column não encolhe
   e o corpo nunca rola — o modal estoura o 86vh em silêncio. */
.mb { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 20px; }
/* filhos mantêm a altura natural: sem isto o flex os espreme e o corpo
   "cabe" à força em vez de rolar */
.mb > * { flex-shrink: 0; }
.mf {
  padding: 14px 22px; border-top: 1px solid var(--bd);
  display: flex; gap: 10px; align-items: center; flex: none;
}

/* ----------------------------------------------------- BarraProgresso
   Segmentada: concluído (verde) + erro (vermelho) lado a lado. */
.bar { height: 8px; border-radius: 4px; background: var(--card2); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
.bar i.ok { background: var(--gr); }
.bar i.err { background: var(--rd); }
.bar i.pend { background: var(--or); }

/* -------------------------------------------------------------- Chip
   Clicável: dá foco e scroll ao campo (UI.chip liga o destino). */
.chip {
  font-size: var(--fs-meta); font-weight: 500; padding: 6px 11px;
  border-radius: 7px; background: var(--card2); border: 1px solid var(--bd2);
  color: var(--t2); display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; min-height: var(--alvo-min);
}
.chip:hover { border-color: var(--or); color: var(--t1); }
/* chip usado como filtro ligado/desligado (operadora no cotador) */
.chip.ativo { background: var(--or); border-color: var(--or); color: var(--or-on); }
.chip.ativo:hover { color: var(--or-on); }
.chip .pt { width: 7px; height: 7px; border-radius: 4px; background: var(--or); flex: none; }
.chip .pt.r { background: var(--rd); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

/* ---------------------------------------------------------- Stepper
   (Cotador, Fase 4.5: 30px de altura, número 16px tabular.) */
.stp {
  display: flex; align-items: center; gap: 8px;
  background: var(--input); border: 1px solid var(--bd2);
  border-radius: var(--raio-controle); padding: 5px;
}
.stp .lb { font-size: var(--fs-meta); color: var(--t2); flex: 1; padding-left: 6px; }
.stp button {
  width: 30px; height: 30px; border-radius: 6px; background: var(--card2);
  border: 1px solid var(--bd2); display: grid; place-items: center;
  font-size: 16px; color: var(--t1); cursor: pointer;
}
.stp .vl {
  font-size: 16px; font-weight: 500; min-width: 24px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Métrica */
.metric { background: var(--card); border: 1px solid var(--bd); border-radius: var(--raio-card); padding: 16px var(--pad-card); }
.metric span { font-size: var(--fs-meta); font-weight: 500; color: var(--t2); display: flex; align-items: center; gap: 8px; }
.metric b { display: block; font-size: 30px; font-weight: 500; line-height: 1.15; margin-top: 8px; letter-spacing: -0.02em; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

/* ------------------------------------------------- Visor lateral (gaveta)
   Ler a apólice com o formulário ainda visível (requisito do funil de auto).
   Fixa à direita, por cima do trilho, fechável. */
.drawer-visor {
  position: fixed; top: 76px; right: 16px; bottom: 16px;
  width: min(720px, 48vw); z-index: 60;
  background: var(--card); border: 1px solid var(--bd2);
  border-radius: var(--raio-card); overflow: hidden;
  box-shadow: var(--shadow-premium);
  display: none; flex-direction: column;
}
.drawer-visor.on { display: flex; }
.drawer-visor .dv-cab {
  padding: 10px 14px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 8px; flex: none;
}
.drawer-visor .dv-corpo { flex: 1; min-height: 0; }
.drawer-visor iframe, .drawer-visor img { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; }

/* ------------------------------------------------- Nome clicável em lista
   Texto primário com sublinhado só no hover — o azul sobre preto reprovava
   em contraste e era o pior ponto de legibilidade do sistema (Fase 4.3). */
.link-nome { color: var(--t1); text-decoration: none; font-weight: 500; }
.link-nome:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------ Popover de confirmação
   Ação destrutiva de linha: ícone + confirmação local, nunca um prompt. */
.popover {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 80;
  background: var(--card); border: 1px solid var(--bd2); border-radius: 10px;
  box-shadow: var(--shadow-premium); padding: 12px; width: 280px; text-align: left;
}
.popover .titulo { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.popover select { width: 100%; margin-bottom: 10px; }
.popover .acoes { display: flex; gap: 8px; justify-content: flex-end; }

/* --------------------------------------------- Kanban do pós-venda (4.4)
   Relógio estourado muda a BORDA do card, não só a cor do texto. */
.pv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-dot { width: 9px; height: 9px; border-radius: 5px; flex: none; }
.pv-cards { display: flex; flex-direction: column; gap: 10px; min-height: 48px; }
.pv-card {
  background: var(--card2); border: 1px solid var(--bd2);
  border-radius: 10px; padding: 12px; cursor: pointer;
}
.pv-card .proto { font-size: var(--fs-meta); color: var(--t2); font-weight: 500; }
.pv-card .tit { font-size: 14px; font-weight: 500; margin: 3px 0 8px; }
.pv-card .relogio { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--t2); }
.pv-card.estourado { border-color: var(--rd); }
.pv-card.estourado .relogio { color: var(--rd-t); font-weight: 500; }
.pv-card.dragging { opacity: 0.55; }
.pv-finalizar { border-style: dashed; }
.metric.clicavel { cursor: pointer; }
.metric.clicavel:hover { border-color: var(--bd2); }
.metric.ativa { border-color: var(--or); background: var(--or-bg); }

/* ------------------------------------------------- Item de plano (4.5)
   Três níveis: operadora, nome, atributos como chips. Altura mínima 56px. */
/* Lista de planos em três níveis: operadora → linha (cartão) → variação.
   O cartão é a LINHA do plano (Ouro, Flex I); dentro dele ficam as opções que
   de fato diferem — acomodação, coparticipação, obstetrícia. */
.grade-planos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px; padding: 12px 16px;
}
.plan {
  border: 1px solid var(--bd); border-radius: var(--raio-controle);
  background: var(--card); overflow: hidden;
}
.plan.com-selecao { border-color: var(--or); }
.plan .cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 10px 12px; background: var(--card2); border-bottom: 1px solid var(--bd);
}
.plan .op {
  font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--t2);
}
.plan .pn { font-size: var(--fs-corpo); font-weight: 500; margin-top: 2px; }
.plan .qt { font-size: var(--fs-meta); color: var(--t2); white-space: nowrap; }
.plan-var {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 8px 12px; min-height: var(--alvo-min);
  border-top: 1px solid var(--bd);
}
.plan-var:first-of-type { border-top: 0; }
.plan-var:hover { background: var(--card2); }
.plan-var.marcada { background: var(--or-bg); }
.plan-var input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--or); flex: none; }
.plan-var .rot { font-size: var(--fs-rotulo); color: var(--t1); min-width: 0; }
/* Busca fixa no topo da lista de planos */
.lista-planos { max-height: 540px; overflow-y: auto; }
.busca-fixa {
  position: sticky; top: 0; z-index: 2;
  padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--bd);
}

/* ------------------------------------------- Bloco de credencial (4.7)
   Fundo próprio, cadeado e o aviso de auditoria junto do botão revelar. */
.cred {
  background: var(--card2); border: 1px solid var(--bd2);
  border-radius: 10px; padding: 14px;
}
.cred .aviso {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: var(--fs-meta); color: var(--t2);
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--t2); }

/* ---------------------------------------------------- Toast (Fase 5)
   Canto inferior direito, 4s, SÓ confirmação. Erro nunca vira toast —
   fica ancorado no campo. */
.toast-area {
  position: fixed; right: 20px; bottom: 20px; z-index: 2000;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--bd2);
  border-left: 4px solid var(--gr);
  border-radius: 10px; padding: 12px 16px;
  box-shadow: var(--shadow-premium);
  font-size: 14px; color: var(--t1); max-width: 380px;
  pointer-events: auto;
  animation: toast-entra 0.18s ease-out;
}
.toast.saindo { animation: toast-sai 0.18s ease-in forwards; }
.toast i, .toast svg { color: var(--gr-t); flex: none; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-sai { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.saindo { animation: none; }
}

/* =====================================================================
   FASE 6 — QUALIDADE
   ===================================================================== */

/* --------- Foco visível: 2px em --bl, só para navegação por teclado ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--bl);
  outline-offset: 2px;
  border-radius: 4px;
}
/* dentro de superfície clara (botão primário), o azul precisa de respiro */
.btn-primary:focus-visible { outline-offset: 3px; }

/* Pular para o conteúdo (primeiro Tab da página) */
.pular-conteudo {
  position: absolute; left: -9999px; top: 8px; z-index: 3000;
  background: var(--card); color: var(--t1);
  border: 1px solid var(--bd2); border-radius: 8px;
  padding: 10px 16px; font-size: 14px; font-weight: 500;
}
.pular-conteudo:focus { left: 8px; }

/* ------------------------- Movimento reduzido ------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .btn-primary:hover { transform: none !important; }
}

/* ------------------------------ Responsivo ---------------------------- */
/* Até 1100px o trilho já colapsa (Fase 1). Abaixo de 768px a navegação
   vira gaveta: sai do fluxo e entra por cima, com véu. */
/* Entrada estreita à esquerda + área larga à direita (cotador).
   Estava como estilo embutido no JS e por isso NUNCA colapsava: no celular a
   coluna larga virava ~100px e o nome da operadora quebrava letra a letra. */
.layout-entrada {
  display: grid; grid-template-columns: 360px minmax(0, 1fr);
  gap: 20px; align-items: start;
}
@media (max-width: 900px) {
  .layout-entrada { grid-template-columns: minmax(0, 1fr); }
  /* rolagem dentro de rolagem é ruim no toque: no celular a lista flui e quem
     rola é a página */
  .lista-planos { max-height: none; overflow-y: visible; }
  .busca-fixa { position: static; }
  .ovl { padding: 12px; }
  .modal-c { max-height: 92vh; }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1200;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    box-shadow: var(--shadow-premium);
  }
  .sidebar.aberta { transform: translateX(0); }
  .veu-nav {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0, 0, 0, 0.55);
    display: none;
  }
  .veu-nav.on { display: block; }
  .btn-gaveta { display: grid !important; }
  .content-header { padding: 12px 16px; gap: 10px; }
  .content-header .header-left h1 { font-size: 20px; }
  /* o fundo reserva espaço para o botão flutuante da IA não cobrir a última
     linha (o atalho `padding` tem de trazer o de baixo junto, senão o bloco
     de 900px é anulado por este, que vem depois) */
  .view-container { padding: 16px 16px 96px; }
  .barra-acoes { padding: 12px 16px; margin: 24px -16px -16px; flex-wrap: wrap; }
  .pv-grid { grid-template-columns: minmax(0, 1fr); }
  .mgrid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .global-search-wrapper { display: none; }
}
/* botão da gaveta: só existe no celular */
.btn-gaveta {
  display: none; width: var(--altura-botao); height: var(--altura-botao);
  border-radius: 8px; border: 1px solid var(--bd2);
  background: none; color: var(--t2); place-items: center; cursor: pointer;
  flex: none;
}
.btn-gaveta:hover { background: var(--card2); color: var(--t1); }

/* ------------------------------ Densidade ----------------------------- */
/* Compacto muda APENAS altura de controle, padding e altura de linha.
   Nenhum tamanho de fonte muda — o piso de 13px continua valendo. */
html[data-densidade="compacto"] {
  --altura-controle: 34px;
  --altura-botao: 32px;
  --pad-card: 12px;
  --gap-cards: 12px;
  --gap-grid: 12px;
}
html[data-densidade="compacto"] .tabela td { height: 44px; padding: 6px var(--pad-card); }
html[data-densidade="compacto"] .tabela th { padding: 8px var(--pad-card); }
html[data-densidade="compacto"] .menu-item { height: 38px; }
html[data-densidade="compacto"] .ch { padding: 9px var(--pad-card); }
html[data-densidade="compacto"] .doc { padding: 8px 0; }
html[data-densidade="compacto"] .plan { padding: 9px 12px; min-height: 48px; }
html[data-densidade="compacto"] .btn-sm, html[data-densidade="compacto"] .btn-xs { height: 28px; }

/* ------------------------------------------------------------- Links
   O <a> sem classe herdava o azul do NAVEGADOR (#0000EE), que sobre o
   card dá 1.77:1 — ilegível. Passa a usar --bl (7.7:1 sobre --card),
   com sublinhado no hover. Botões e itens de menu ficam de fora. */
a { color: var(--bl); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a.btn, a.menu-item, a.link-nome, a.pular-conteudo { color: inherit; text-decoration: none; }
a.link-nome { color: var(--t1); }