/* ===== assets/contatos.css =====
   Módulo Contatos — CRM interno de contatos (fornecedores, imprensa, parceiros
   etc.), rota própria /contatos (não gated por has_module_access, visível a
   todo mundo, mesmo padrão do Bloco de Notas). Portado de um protótipo standalone
   (contatos-embed.html) que já veio com uma paleta de variáveis própria (mesmos
   hex que --green-900/--beige/--magenta etc. já usados no resto do workspace,
   só que redeclarados aqui embaixo de #ayaContatosPage em vez de reaproveitar
   os globais de marketing.css) — mantido assim de propósito, sem consolidar
   com as variáveis globais, pra não arriscar mudar nada da identidade que já
   veio pronta no protótipo.

   Toda classe própria da página ganhou prefixo ct- na hora do porte (o
   protótipo original usava nomes genéricos como .btn/.modal/.field/.toast que
   colidiam de verdade com regras globais já existentes em midia-paga.css
   (.btn, .modal) e marketing.css (.field, .toast) — sem o prefixo, essas
   regras vazavam pra dentro da página de Contatos). Ícones não usam mais o
   pequeno conjunto próprio do protótipo: os elementos com data-icon são
   preenchidos por AyaIcon()/shellRenderIcons() (assets/icons.js), a mesma
   biblioteca central que o resto do workspace usa — só os nomes dos ícones
   foram trocados pros equivalentes já existentes lá (ver assets/contatos.js). */

#ayaContatosPage {
  --green-900:#1c361d;
  --green-800:#24422a;
  --beige:#f2ecdd;
  --beige-soft:#f8f4e9;
  --white:#ffffff;
  --ink:#1e1d18;
  --muted:#7a7566;
  --muted-soft:#a39d8b;
  --border:#e6dfc9;
  --border-soft:#ece6d4;
  --magenta:#e315e2;
  --magenta-soft:#fceafc;
  --green-ok:#3f7a4a;
  --green-ok-soft:#e7f2e8;
  --lavender:#8a81fe;
  --lavender-soft:#eeecff;
  --amber:#a3790a;
  --amber-soft:#fff6e0;
  --teal:#17333f;
  --teal-soft:#e7eef0;
  --blue:#3f6ea5;
  --blue-soft:#e8eefb;
  --orchid:#9b5fc0;
  --orchid-soft:#f4e9fb;
  --gray-soft:#eeece4;
  --radius-lg:20px;
  --radius-md:14px;
  --shadow-card:0 1px 2px rgba(28,54,29,.05), 0 10px 28px -14px rgba(28,54,29,.16);
  --shadow-pop:0 12px 36px -12px rgba(28,54,29,.30);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  background:var(--beige);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

#ayaContatosPage * {
  box-sizing:border-box;
}

#ayaContatosPage h1, #ayaContatosPage h2, #ayaContatosPage .serif {
  font-family:'Fraunces',serif;
  font-weight:600;
  letter-spacing:-0.01em;
  text-transform:lowercase;
  margin:0;
}

#ayaContatosPage button {
  font-family:inherit;
}

#ayaContatosPage a {
  color:inherit;
  text-decoration:none;
}

#ayaContatosPage :focus-visible {
  outline:2px solid var(--magenta);
  outline-offset:2px;
  border-radius:6px;
}

#ayaContatosPage .ct-icon {
  width:16px;
  height:16px;
  flex:none;
  display:inline-block;
  vertical-align:middle;
}

#ayaContatosPage .ct-icon svg {
  width:100%;
  height:100%;
}

#ayaContatosPage .ct-content {
  padding:26px 32px 60px;
  max-width:1440px;
  width:100%;
  margin:0 auto;
}

#ayaContatosPage .ct-breadcrumb {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted-soft);
  font-weight:600;
  margin-bottom:10px;
}

#ayaContatosPage .ct-breadcrumb .ct-cur {
  color:var(--magenta);
}

#ayaContatosPage .ct-page-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

#ayaContatosPage .ct-page-head h1 {
  font-size:var(--fs-page-title);
  color:var(--green-900);
}

#ayaContatosPage .ct-page-head p {
  margin:6px 0 0;
  font-size:13px;
  color:var(--muted);
}

#ayaContatosPage .ct-head-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

#ayaContatosPage .ct-btn {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 16px;
  border-radius:11px;
  font-size:var(--fs-btn);
  font-weight:var(--fw-bold);
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .12s,background .15s;
  white-space:nowrap;
}

#ayaContatosPage .ct-btn:active {
  transform:scale(.97);
}

#ayaContatosPage .ct-btn-primary {
  background:var(--green-900);
  color:var(--beige);
}

#ayaContatosPage .ct-btn-primary:hover {
  background:var(--green-800);
}

#ayaContatosPage .ct-btn-outline {
  background:var(--white);
  border-color:var(--border);
  color:var(--ink);
}

#ayaContatosPage .ct-btn-outline:hover {
  background:var(--beige-soft);
}

#ayaContatosPage .ct-btn-ghost {
  background:transparent;
  color:var(--muted);
}

#ayaContatosPage .ct-btn-ghost:hover {
  background:var(--gray-soft);
  color:var(--ink);
}

#ayaContatosPage .ct-btn-sm {
  padding:6px 10px;
  font-size:var(--fs-btn-sm);
  border-radius:8px;
}

#ayaContatosPage .ct-btn-icon {
  width:32px;
  height:32px;
  padding:0;
  justify-content:center;
  border-radius:9px;
}

#ayaContatosPage select.ct-select {
  padding:9px 28px 9px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--white);
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%237a7566" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat:no-repeat;
  background-position:right 9px center;
  background-size:13px;
}

#ayaContatosPage .ct-filter-bar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:16px;
}

#ayaContatosPage .ct-search-wrap {
  position:relative;
  flex:1;
  min-width:220px;
  max-width:360px;
}

#ayaContatosPage .ct-search-wrap .ct-icon {
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted-soft);
}

#ayaContatosPage .ct-search-wrap input {
  width:100%;
  padding:10px 12px 10px 34px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--white);
  font-size:13px;
  color:var(--ink);
}

#ayaContatosPage .ct-search-wrap input::placeholder {
  color:var(--muted-soft);
}

#ayaContatosPage .ct-kpi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:20px;
  max-width:720px;
}

#ayaContatosPage .ct-kpi-card {
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:var(--shadow-card);
}

#ayaContatosPage .ct-kpi-ic {
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--beige-soft);
  border:1px solid var(--border-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green-900);
  flex:none;
}

#ayaContatosPage .ct-kpi-card .ct-lbl {
  font-size:11px;
  color:var(--muted);
  font-weight:600;
}

#ayaContatosPage .ct-kpi-card .ct-val {
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:22px;
  color:var(--green-900);
  margin-top:1px;
}

#ayaContatosPage .ct-bulk-bar {
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:var(--beige-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 16px;
  margin-bottom:14px;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
}

#ayaContatosPage .ct-panel {
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

#ayaContatosPage table {
  width:100%;
  min-width:1120px;
  border-collapse:collapse;
  /* marketing.css tem um `table { table-layout:fixed }` global (não escopado) —
     redeclarado aqui de propósito, junto das larguras abaixo, pra colunas não
     ficarem todas do mesmo tamanho (era o que empurrava "nome" pra um espaço
     estreito demais e deixava a coluna de checkbox enorme). */
  table-layout:fixed;
}

#ayaContatosPage thead th:first-child,
#ayaContatosPage tbody td:first-child {
  width:40px;
  padding-left:20px;
  padding-right:12px;
}

#ayaContatosPage thead th:nth-child(2),
#ayaContatosPage tbody td:nth-child(2) {
  width:190px;
}

#ayaContatosPage thead th:nth-child(5),
#ayaContatosPage tbody td:nth-child(5) {
  width:230px;
}

#ayaContatosPage thead th:nth-child(6),
#ayaContatosPage tbody td:nth-child(6) {
  width:150px;
}

#ayaContatosPage thead th {
  text-align:left;
  font-size:8.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-soft);
  font-weight:700;
  padding:10px 22px;
  border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}

#ayaContatosPage tbody td {
  padding:10px 22px;
  font-size:10.5px;
  border-bottom:1px solid var(--border-soft);
  vertical-align:middle;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  max-width:none;
  word-break:break-word;
  line-height:1.4;
}

#ayaContatosPage tbody tr {
  cursor:pointer;
  transition:background .12s;
}

#ayaContatosPage tbody tr:hover {
  background:var(--beige-soft);
}

#ayaContatosPage tbody tr:last-child td {
  border-bottom:none;
}

#ayaContatosPage .ct-cell-name {
  font-weight:700;
  color:var(--ink);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  max-width:none;
  line-height:1.3;
}

#ayaContatosPage .ct-cell-empresa {
  font-weight:600;
}

#ayaContatosPage .ct-cell-funcao {
  font-size:9.5px;
  color:var(--muted-soft);
  margin-top:1px;
}

#ayaContatosPage .ct-pill {
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:9.5px;
  font-weight:700;
  white-space:nowrap;
}

#ayaContatosPage .ct-chk {
  width:16px;
  height:16px;
  accent-color:var(--green-900);
}

#ayaContatosPage .ct-empty-note {
  padding:40px 20px;
  text-align:center;
  color:var(--muted);
  font-size:12.5px;
}

#ayaContatosPage .ct-pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 18px;
  border-top:1px solid var(--border-soft);
  font-size:12px;
  color:var(--muted);
}

#ayaContatosPage .ct-page-nums {
  display:flex;
  align-items:center;
  gap:4px;
}

#ayaContatosPage .ct-page-btn {
  min-width:30px;
  height:30px;
  padding:0 6px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--white);
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#ayaContatosPage .ct-page-btn:hover {
  background:var(--beige-soft);
}

#ayaContatosPage .ct-page-btn.active {
  background:var(--green-900);
  color:var(--beige);
  border-color:var(--green-900);
}

#ayaContatosPage .ct-page-btn:disabled {
  opacity:.4;
  cursor:default;
}

#ayaContatosPage .ct-page-ellipsis {
  padding:0 4px;
  color:var(--muted-soft);
}

#ayaContatosPage .ct-modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(28,54,29,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s var(--ease);
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
}

#ayaContatosPage .ct-modal-overlay.show {
  opacity:1;
  pointer-events:auto;
}

#ayaContatosPage .ct-modal {
  background:var(--white);
  border-radius:var(--radius-lg);
  width:min(560px,100%);
  max-height:88vh;
  overflow-y:auto;
  box-shadow:var(--shadow-pop);
  transform:scale(.96);
  opacity:0;
  transition:transform .2s var(--ease),opacity .2s var(--ease);
  margin:auto;
}

#ayaContatosPage .ct-modal-overlay.show .ct-modal {
  transform:scale(1);
  opacity:1;
}

#ayaContatosPage .ct-modal-head {
  padding:20px 22px 4px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

#ayaContatosPage .ct-modal-body {
  padding:14px 22px 6px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

#ayaContatosPage .ct-modal-foot {
  padding:14px 22px 20px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}

#ayaContatosPage .ct-drawer-close {
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--gray-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  flex:none;
  cursor:pointer;
}

#ayaContatosPage .ct-drawer-close:hover {
  background:var(--border);
}

#ayaContatosPage .ct-field {
  display:flex;
  flex-direction:column;
  gap:6px;
}

#ayaContatosPage .ct-field label {
  font-size:11.5px;
  font-weight:700;
  color:var(--muted);
}

#ayaContatosPage .ct-field input, #ayaContatosPage .ct-field select, #ayaContatosPage .ct-field textarea {
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:12.5px;
  font-family:inherit;
  color:var(--ink);
  width:100%;
}

#ayaContatosPage .ct-field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

#ayaContatosPage .ct-btn-danger-ghost {
  background:transparent;
  color:#c65b4e;
}

#ayaContatosPage .ct-btn-danger-ghost:hover {
  background:#fbeae7;
}

#ayaContatosPage .ct-row-menu-wrap {
  position:relative;
  display:inline-block;
}

#ayaContatosPage .ct-row-menu {
  position:absolute;
  right:0;
  top:calc(100% + 4px);
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--shadow-pop);
  padding:5px;
  width:150px;
  z-index:20;
  display:none;
}

#ayaContatosPage .ct-row-menu.show {
  display:block;
}

#ayaContatosPage .ct-row-menu button {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:8px 10px;
  border-radius:7px;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
}

#ayaContatosPage .ct-row-menu button:hover {
  background:var(--beige-soft);
}

#ayaContatosPage .ct-row-menu button.danger {
  color:#c65b4e;
}

#ayaContatosPage .ct-toast {
  position:fixed;
  bottom:22px;
  right:22px;
  background:var(--green-900);
  color:var(--beige);
  padding:12px 18px;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  box-shadow:var(--shadow-pop);
  z-index:60;
  transform:translateY(10px);
  opacity:0;
  transition:transform .2s var(--ease),opacity .2s var(--ease);
  pointer-events:none;
}

#ayaContatosPage .ct-toast.show {
  transform:translateY(0);
  opacity:1;
}

#ayaContatosPage .ct-table-scroll {
  overflow-x:auto;
}

@media (max-width:980px) {
  #ayaContatosPage .ct-content {
    padding:18px 14px 44px;
  }
  #ayaContatosPage .ct-field-row {
    grid-template-columns:1fr;
  }
}