/* =========================================================
   Módulo Contatos (dentro do Artefato)
   ========================================================= */
.ct {
  /* mapeado para os tokens do DS (tokens.css) */
  --ct-bg: var(--ds-sunken); --ct-panel: var(--ds-surface); --ct-line: var(--ds-line); --ct-muted: var(--ds-text-muted); --ct-hover: var(--ds-hover);
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ct-bg);
  font-size: 14px; container-type: inline-size; container-name: ct;
}
.ct-muted { color: var(--ct-muted); }

/* barra */
.ct-bar { flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; background: var(--ct-panel); border-bottom: 1px solid var(--ct-line); }
.ct-tabs { display: flex; gap: 2px; }
.ct-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ct-muted); }
.ct-tabs button:hover { background: var(--ct-hover); color: inherit; }
.ct-tabs button.active { background: rgb(124 58 237 / .1); color: rgb(109 40 217); }
.dark .ct-tabs button.active { background: rgb(167 139 250 / .15); color: rgb(196 181 253); }
.ct-tabs span { display: inline-flex; align-items: center; gap: 6px; }
.ct-tabs em { font-style: normal; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: rgb(0 0 0 / .08); }
.dark .ct-tabs em { background: rgb(255 255 255 / .1); }
.ct-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 10px; background: rgb(0 0 0 / .04); color: var(--ct-muted); }
.dark .ct-search { background: rgb(255 255 255 / .05); }
.ct-search input { flex: 1; min-width: 0; background: transparent; outline: none; color: rgb(38 38 38); }
.dark .ct-search input { color: #f5f5f5; }
.ct-bar-end { display: flex; gap: 6px; }
@container ct (max-width: 820px) { .ct-bar-end .ct-btn:not(.primary) span, .ct-tabs button span { display: none; } }
@container ct (max-width: 520px) { .ct-bar-end .ct-btn.primary span { display: none; } }

.ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; flex-shrink: 0;
  border-radius: 10px; border: 1px solid var(--ct-line); background: var(--ct-panel); font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background-color .2s, opacity .2s;
}
.ct-btn:hover { background: var(--ct-hover); }
.ct-btn.primary { background: #0d0d0d; border-color: #0d0d0d; color: #fff; }
.ct-btn.primary:hover { opacity: .88; }
.dark .ct-btn.primary { background: #fff; border-color: #fff; color: #0d0d0d; }
.ct-btn.danger { color: rgb(220 38 38); border-color: rgb(220 38 38 / .25); }
.ct-btn.danger:hover { background: rgb(220 38 38 / .06); }

/* vista */
.ct-view { flex: 1; min-height: 0; overflow-y: auto; }
.ct-pad { padding: 16px; }
.ct-narrow { max-width: 820px; margin: 0 auto; }
.ct-bday {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 14px; margin-bottom: 12px; border-radius: 14px; font-size: 13.5px;
  background: linear-gradient(90deg, rgb(236 72 153 / .1), rgb(139 92 246 / .1)); color: rgb(131 24 67);
}
.dark .ct-bday { color: rgb(251 207 232); }
.ct-bday button[data-ct-open] { font-weight: 600; }
.ct-bday button span { font-weight: 400; opacity: .8; }
.ct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ct-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--ct-panel); border: 1px solid var(--ct-line); }
.ct-stat span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ct-muted); }
.ct-stat b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.ct-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.ct-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ct-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--ct-line); background: var(--ct-panel); font-size: 12.5px; font-weight: 500; color: var(--ct-muted); }
.ct-chip span { font-size: 11px; opacity: .75; }
.ct-chip:hover { color: inherit; }
.ct-chip.active { background: #0d0d0d; border-color: #0d0d0d; color: #fff; }
.dark .ct-chip.active { background: #fff; border-color: #fff; color: #0d0d0d; }
.ct-select { height: 30px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--ct-line); background: var(--ct-panel); font-size: 12.5px; color: inherit; outline: none; }
.dark .ct-select option { background: #2f2f2f; }
.ct-seg { display: inline-flex; padding: 2px; border-radius: 10px; border: 1px solid var(--ct-line); background: var(--ct-panel); }
.ct-seg button { display: grid; place-items: center; height: 26px; width: 30px; border-radius: 8px; color: var(--ct-muted); }
.ct-seg button.on { background: rgb(124 58 237 / .12); color: rgb(109 40 217); }
.dark .ct-seg button.on { color: rgb(196 181 253); }

/* avatar, selos */
/* avatares: componente ui-av (ds.css) via Liloo.ui.avatar */
.ct-vip { display: inline-grid; color: rgb(234 179 8); }
.ct-vip svg { fill: currentColor; }
.ct-kind { flex-shrink: 0; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ct-kind.k-customer { background: rgb(124 58 237 / .1); color: rgb(109 40 217); }
.ct-kind.k-partner { background: rgb(14 165 233 / .12); color: rgb(3 105 161); }
.ct-kind.k-supplier { background: rgb(249 115 22 / .12); color: rgb(194 65 12); }
.ct-kind.k-other { background: rgb(0 0 0 / .06); color: var(--ct-muted); }
.dark .ct-kind.k-customer { color: rgb(196 181 253); } .dark .ct-kind.k-partner { color: rgb(125 211 252); } .dark .ct-kind.k-supplier { color: rgb(253 186 116); }

/* cartões */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ct-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--ct-panel); border: 1px solid var(--ct-line);
  cursor: pointer; animation: fade-up .35s var(--ease-out) both; transition: border-color .2s, box-shadow .2s;
}
.ct-card:hover { border-color: rgb(0 0 0 / .14); box-shadow: 0 4px 18px -8px rgb(0 0 0 / .15); }
.dark .ct-card:hover { border-color: rgb(255 255 255 / .16); box-shadow: none; }
.ct-card.inactive { opacity: .6; }
.ct-card-lines { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ct-muted); }
.ct-card-lines span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ct-card-foot { display: flex; align-items: center; margin-top: auto; }
.ct-card-foot .btn-icon { height: 30px; width: 30px; }

/* tabela */
.ct-table-wrap { border: 1px solid var(--ct-line); border-radius: 16px; overflow: auto; background: var(--ct-panel); }
.ct-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ct-table th { position: sticky; top: 0; background: var(--ct-panel); text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 500; color: var(--ct-muted); border-bottom: 1px solid var(--ct-line); }
.ct-table td { padding: 9px 14px; border-bottom: 1px solid var(--ct-line); max-width: 260px; }
.ct-table tr:last-child td { border-bottom: 0; }
.ct-table tbody tr { cursor: pointer; }
.ct-table tbody tr:hover { background: var(--ct-hover); }
@container ct (max-width: 760px) { .ct-table .hide-md { display: none; } }
@container ct (max-width: 520px) { .ct-table .hide-sm { display: none; } }

/* relatórios */
.ct-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ct-panel { padding: 16px; border-radius: 16px; background: var(--ct-panel); border: 1px solid var(--ct-line); }
.ct-panel h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.ct-panel h3 small { font-size: 12px; font-weight: 400; color: var(--ct-muted); }
.ct-bars { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 6px; }
.ct-bars .col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.ct-bars .bar { position: relative; width: 100%; max-width: 38px; min-height: 4px; border-radius: 8px 8px 3px 3px; background: rgb(124 58 237 / .25); overflow: hidden; }
.ct-bars .bar i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.ct-bars em { font-style: normal; font-size: 11px; color: var(--ct-muted); text-transform: capitalize; }
.ct-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--ct-muted); }
.ct-legend i { display: inline-block; height: 8px; width: 8px; margin-right: 5px; border-radius: 3px; }
.ct-legend i.a { background: rgb(124 58 237 / .25); } .ct-legend i.b { background: #7c3aed; }
.ct-rank { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 6px; border-radius: 10px; text-align: left; font-size: 13px; }
.ct-rank:hover { background: var(--ct-hover); }
.ct-rank b { font-size: 13px; white-space: nowrap; }
.ct-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ct-line); text-align: right; font-size: 13px; color: var(--ct-muted); }

/* excluídos */
.ct-list { border: 1px solid var(--ct-line); border-radius: 16px; overflow: hidden; background: var(--ct-panel); }
.ct-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.ct-row + .ct-row { border-top: 1px solid var(--ct-line); }

/* gaveta */
.ct-scrim { position: absolute; inset: 0; z-index: 9; background: rgb(0 0 0 / .18); opacity: 0; pointer-events: none; transition: opacity .25s; }
.ct-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 10; width: min(480px, 100%); display: flex; flex-direction: column;
  background: var(--ct-panel); border-left: 1px solid var(--ct-line); box-shadow: -20px 0 40px -20px rgb(0 0 0 / .25);
  transform: translateX(105%); transition: transform .4s var(--ease-out);
}
.ct.drawer-open .ct-drawer { transform: none; }
.ct.drawer-open .ct-scrim { opacity: 1; pointer-events: auto; }
.ct-dr-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--ct-line); }
.ct-dr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ct-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ct-kpis div { padding: 10px 12px; border-radius: 12px; background: var(--ct-hover); }
.ct-kpis span { display: block; font-size: 11.5px; color: var(--ct-muted); }
.ct-kpis b { font-size: 16px; font-weight: 600; }
.ct-note { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: 13px; background: rgb(124 58 237 / .07); }
.ct-h4 { margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.ct-links { display: flex; flex-direction: column; }
.ct-link { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; font-size: 13px; text-align: left; }
.ct-link:hover { background: var(--ct-hover); }
.ct-form { display: flex; flex-direction: column; }
.ct-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container ct (max-width: 460px) { .ct-form-grid { grid-template-columns: 1fr; } }
.ct-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ct-field.span2 { grid-column: 1 / -1; }
.ct-field > span { font-size: 12.5px; font-weight: 500; }
.ct-field input, .ct-field select, .ct-field textarea {
  width: 100%; min-height: 38px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--ct-line); background: transparent; font-size: 13.5px;
  outline: none; color: inherit; resize: vertical; transition: border-color .2s, box-shadow .2s;
}
.dark .ct-field select option { background: #2f2f2f; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { border-color: rgb(124 58 237 / .55); box-shadow: 0 0 0 3px rgb(124 58 237 / .12); }
.ct .invalid { border-color: rgb(239 68 68) !important; box-shadow: 0 0 0 3px rgb(239 68 68 / .12) !important; }
.ct-prefix { display: flex; align-items: center; }
.ct-prefix em { font-style: normal; height: 38px; display: grid; place-items: center; padding: 0 9px; border: 1px solid var(--ct-line); border-right: 0; border-radius: 10px 0 0 10px; font-size: 13px; color: var(--ct-muted); background: var(--ct-hover); }
.ct-prefix input { border-radius: 0 10px 10px 0; }
.ct-err { font-size: 12px; color: rgb(220 38 38); }
.ct-err:empty { display: none; }
.ct-switches { margin-top: 12px; border-top: 1px solid var(--ct-line); }
.ct-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ct-line); cursor: pointer; }
.ct-switch b { display: block; font-size: 13.5px; font-weight: 500; }
.ct-switch small { display: block; font-size: 12px; color: var(--ct-muted); }
.ct-form-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }


/* --- auditoria: alvos de toque --- */
.ct-bday button[data-ct-open] { padding: 4px 2px; }
@container ct (max-width: 600px) {
  .ct-seg button { height: 32px; width: 36px; }
  .ct-chip, .ct-select { height: 34px; }
}