/* ZeraCRM 2 (rodada 2) — camada de compatibilidade do v1.

   As telas do v1 (js/views/*) continuam inteiras até a passada de cada uma (C14, nada some). Elas falam os
   nomes de variável e as classes do v1; aqui esses nomes apontam para os tokens do kit Zera (base.css), então
   todas já saem com as cores novas, no claro e no escuro, sem mexer no desenho delas.

   Ordem de carga: base.css, componentes.css, identidade.css, formularios.css, compat.css, telas-v1.css,
   kanban-cor.css, reunioes.css, operacao.css, shell.css, crm.css.

   Regras:
   - nada aqui redefine componente do kit (.btn, .modal, .toast, .cartao...): o kit vale para todo mundo;
   - o botão neutro do v1 (`.btn` sozinho) virou `.btn.btn-sec` nas telas (o `.btn` do kit é o principal);
     `.btn-primario` continua valendo e desenha o principal do kit;
   - estilo de elemento (input, select, textarea) vai em :where(), com especificidade zero: a `.entrada` do kit
     sempre ganha;
   - o que é só das telas antigas fica sob `.tela .tela` (a tela do v1 monta um `div.tela` dentro do
     `div.tela` da casca). Sai daqui quando a última tela passar pelo redesenho. */

:root {
  /* marca do CRM (DESIGN §2): só na marca, no ladrilho do hub e no destaque da base ativa */
  --crm: #14b8a6;
  --crm-forte: #0f766e;

  /* nomes do v1 -> tokens do kit */
  --bg-elevado: var(--sup);
  --bg-afundado: var(--afundado);
  --bg-hover: var(--hover);
  --bg-ativo: var(--ativo);
  --txt-suave: var(--txt-2);
  --txt-fraco: var(--txt-3);
  --txt-invertido: var(--txt-inv);
  --zera-escuro: var(--zera-forte);
  --zera-claro: #8aa2b8;
  --ink: #16202b;
  --sombra: var(--sombra-1);
  --sombra-forte: var(--sombra-3);
  --sombra-marca: 0 6px 20px rgba(91, 122, 153, 0.28);
  --transicao: var(--t-estado);
  --topo-altura: var(--topo);
  --lateral-largura: var(--trilho);

  /* a cor padrão de etiqueta do v1 era o neon #00e0c7; agora é a teal das 12 cores do kit */
  --etiqueta-padrao: #14b8a6;
}
html[data-theme="dark"] {
  --crm: #2dd4bf;
  --zera-claro: #a8c2db;
  --sombra-marca: 0 6px 22px rgba(91, 122, 153, 0.35);
}

/* ------------------------------------------------------------------ utilitários do v1 */
small, .peq { font-size: 12px; color: var(--txt-2); }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-flex { display: flex; align-items: center; gap: 8px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crescer { flex: 1; min-width: 0; }
.grade { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oculto { display: none !important; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

@keyframes surgirEscala { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes girar { to { transform: rotate(360deg); } }
.anim-surgir { animation: surgir var(--t-entrada) both; }
.anim-escala { animation: surgirEscala var(--t-entrada) both; }
.anim-lista > * { animation: surgir var(--t-entrada) both; }
.anim-lista > *:nth-child(2) { animation-delay: 45ms; } .anim-lista > *:nth-child(3) { animation-delay: 70ms; }
.anim-lista > *:nth-child(4) { animation-delay: 95ms; } .anim-lista > *:nth-child(n+5) { animation-delay: 120ms; }

/* ------------------------------------------------------------------ botões do v1 */
/* principal do v1 = principal do kit (vence o .btn-sec que o alternador pode deixar junto) */
.btn.btn-primario { --b-bg: var(--zera-forte); --b-txt: #fff; --b-borda: transparent; --b-hover: #3c5570; }
html[data-theme="dark"] .btn.btn-primario { --b-hover: #6c8cab; }
.btn.btn-primario::after { display: block; }
.btn.carregando { pointer-events: none; opacity: 0.6; }

/* ------------------------------------------------------------------ campos do v1 (sem classe) */
:where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
  input[type="datetime-local"], input[type="time"], input[type="tel"], input[type="url"], input[type="search"],
  select, textarea) {
  width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  background: var(--sup); color: var(--txt); font: inherit; font-size: 13.5px;
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
:where(textarea) { min-height: 80px; resize: vertical; line-height: 1.5; }
:where(input, select, textarea):focus { outline: none; border-color: var(--zera); box-shadow: var(--anel-foco); }
:where(input, select, textarea):disabled { background: var(--afundado); color: var(--txt-3); cursor: not-allowed; }
:where(input, select, textarea).invalido { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-bg); }
:where(input, textarea)::placeholder { color: var(--txt-3); }
:where(select) {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23677585' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.checkbox input { width: 16px; height: 16px; min-height: 0; accent-color: var(--zera); cursor: pointer; }

/* .campo do v1 empilhava com margem; os formulários do kit (cfg-*) usam gap */
:where(.tela .tela, .modal-corpo) .campo { margin-bottom: 14px; }
:where(.cfg-form, .cfg-grade-2, .cfg-grade-3, .cfg-corpo, .kit-form) .campo { margin-bottom: 0; }
/* o texto de ajuda do campo (div.dica do v1) não é a dica flutuante do kit */
.campo .dica { position: static; padding: 0; background: none; box-shadow: none; white-space: normal; animation: none;
  border-radius: 0; color: var(--txt-3); font-size: 12px; clip-path: none; pointer-events: auto; }
.campo .erro-msg { font-size: 12px; color: var(--erro-forte); }

/* ------------------------------------------------------------------ cartão, etiqueta, tabela, vazio do v1 */
.cartao-topo { padding: 13px 16px; border-bottom: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cartao-topo.sem-borda { border-bottom: 0; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  line-height: 18px; background: var(--afundado); color: var(--txt-2); white-space: nowrap; }
.tag-ok { background: var(--ok-bg); color: var(--ok-forte); }
.tag-alerta { background: var(--alerta-bg); color: var(--alerta-forte); }
.tag-erro { background: var(--erro-bg); color: var(--erro-forte); }
.tag-info { background: var(--info-bg); color: var(--info-forte); }
.tag-marca { background: var(--zera-suave); color: var(--zera-txt); }
.tabela th.ordenavel { cursor: pointer; user-select: none; }
.tabela th.ordenavel:hover { color: var(--zera-txt); }
.tabela tbody tr.selecionada td { background: var(--ativo); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.vazio .icone { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--zera-suave); color: var(--zera-txt); font-size: 26px; margin-bottom: 2px; }
.modal.extra-largo { width: min(1040px, 100%); }

/* ------------------------------------------------------------------ a tela do v1 dentro da casca nova */
.tela .tela { height: auto; overflow: visible; animation: none; padding: 20px 24px 40px; max-width: 1500px; margin: 0 auto; }
.tela .tela :is(h1, h2, h3, h4) { margin: 0 0 12px; }
.tela .tela h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.018em; }
.tela .tela p { margin: 0 0 10px; }
.tela .tela .avatar:not([style*="--tam"]) { --tam: 26px; font-size: 10.5px; }
.tela-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tela-topo h1 { margin: 0 0 2px; }
.tela-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.barra-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.barra-filtros input[type="search"] { max-width: 280px; }
.barra-filtros select { width: auto; min-width: 130px; }
@media (max-width: 767px) { .tela .tela { padding: 14px 12px 28px; } }

/* ------------------------------------------------------------------ movimento do v1 (era visual.css) */
@keyframes pulso-valor { 0% { transform: scale(1); } 40% { transform: scale(1.06); color: var(--zera-forte); } 100% { transform: scale(1); } }
.valor-mudou { animation: pulso-valor 420ms cubic-bezier(0.34, 1.4, 0.64, 1); }
@keyframes anel-ganho { 0% { box-shadow: 0 0 0 0 var(--ok-bg); } 60% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.celebra { animation: anel-ganho 900ms ease-out; }
@media (prefers-reduced-motion: reduce) { .celebra, .valor-mudou, .anim-surgir, .anim-escala, .anim-lista > * { animation: none !important; } }