/* ============================================================================
   VFC · Catálogo de Cartas Contempladas — layout do módulo.
   Self-contained: consome tokens.css (NÃO redefine tokens nem cores hardcoded).
   Estética blueprint: flat, square, hairlines, cantos de registro.
   Regra de cor: fundo claro → NAVY para texto/ícone/índice/foco. NUNCA cyan sobre claro.
   Namespace: .ctm-*  (evita colisão com a landing).
   ========================================================================== */

.ctm {
  --ctm-line: var(--color-divider);
  --ctm-line-strong: color-mix(in srgb, var(--color-text) 32%, transparent);
  --ctm-gap: var(--space-4);
  display: block;
  color: var(--color-text);
}

/* ---- Cabeçalho do módulo --------------------------------------------------- */
.ctm-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.ctm-head__title { margin: 0; font-size: var(--fs-h3); }
.ctm-head__meta { color: var(--neutral-700); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em; }

/* ---- Barra de filtros (fundo claro) --------------------------------------- */
.ctm-toolbar {
  border: 0;
  border-top: 1px solid var(--ctm-line);
  border-bottom: 1px solid var(--ctm-line);
  background: transparent;
  padding: var(--space-4) 0;
  margin-bottom: var(--space-4);
}
.ctm-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  align-items: end;
}
/* Segmento (1º campo) ocupa a linha inteira — evita corte das abas com contagem */
.ctm-filters > .ctm-field:first-child { grid-column: 1 / -1; }
.ctm-seg { flex-wrap: wrap; }

.ctm-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ctm-field__label {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--neutral-800);
}

/* Inputs / selects — square, hairline, foco navy (herdado de tokens) */
.ctm-input, .ctm-select {
  font-family: var(--font-body); font-size: var(--fs-small); color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--ctm-line-strong); border-radius: 0;
  padding: 8px 10px; min-height: 40px; width: 100%;
}
.ctm-input::placeholder { color: var(--neutral-700); }
.ctm-select { cursor: pointer; }

.ctm-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.ctm-range__sep { color: var(--neutral-700); font-family: var(--font-mono); font-size: var(--fs-mono); }

/* ---- Segmento (tablist acessível) ----------------------------------------- */
.ctm-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--navy); border-radius: 0; overflow: hidden; max-width: 100%; }
.ctm-seg__tab {
  appearance: none; cursor: pointer; border: 0; border-radius: 0;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--fs-small);
  line-height: 1.2; color: var(--navy); background: var(--color-bg);
  padding: 8px 14px; min-height: 40px;
  border-right: 1px solid var(--navy);
}
.ctm-seg__tab:last-child { border-right: 0; }
.ctm-seg__tab[aria-selected="true"] { background: var(--navy); color: var(--on-navy); }
.ctm-seg__tab:hover:not([aria-selected="true"]) { background: color-mix(in srgb, var(--navy) 8%, transparent); }
.ctm-seg__count { font-family: var(--font-mono); font-size: var(--fs-mono); opacity: .85; margin-left: 6px; }

/* ---- Dropdown de administradora (multi-seleção com busca) ------------------ */
.ctm-adm { position: relative; }
.ctm-adm__toggle {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  font-family: var(--font-body); font-size: var(--fs-small); color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--ctm-line-strong); border-radius: 0;
  padding: 8px 10px; min-height: 40px; cursor: pointer; text-align: left;
}
.ctm-adm__toggle[aria-expanded="true"] { border-color: var(--navy); }
.ctm-adm__caret { color: var(--navy); font-size: 11px; }
.ctm-adm__panel {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--color-bg); border: 1px solid var(--navy);
  box-shadow: var(--shadow-md); padding: var(--space-2);
  max-height: 300px; display: flex; flex-direction: column; gap: var(--space-2);
}
.ctm-adm__panel[hidden] { display: none; }
.ctm-adm__search { position: sticky; top: 0; }
.ctm-adm__list { overflow-y: auto; display: flex; flex-direction: column; }
.ctm-check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 6px; min-height: 32px; font-size: var(--fs-small); color: var(--color-text);
}
.ctm-check:hover { background: color-mix(in srgb, var(--navy) 6%, transparent); }
.ctm-check input { accent-color: var(--navy); width: 16px; height: 16px; }
.ctm-check__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--neutral-700); }
.ctm-adm__empty { padding: 8px 6px; color: var(--neutral-700); font-size: var(--fs-small); }

/* ---- Ações da toolbar ----------------------------------------------------- */
.ctm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-4); }
.ctm-sort { display: flex; align-items: center; gap: var(--space-2); }
.ctm-sort__dir {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; border: 1px solid var(--navy); background: var(--color-bg);
  color: var(--navy); cursor: pointer; border-radius: 0; font-size: 14px; font-family: var(--font-mono);
}
.ctm-sort__dir:hover { background: color-mix(in srgb, var(--navy) 8%, transparent); }
.ctm-spacer { flex: 1 1 auto; }

/* ---- Chips de filtros ativos ---------------------------------------------- */
.ctm-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.ctm-chips:empty { display: none; }
.ctm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em;
  padding: 3px 4px 3px 9px; border: 1px solid color-mix(in srgb, var(--navy) 40%, transparent);
  color: var(--navy); border-radius: 0; background: var(--color-bg);
}
.ctm-chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: -4px 0; border: 0; background: transparent;
  color: var(--navy); cursor: pointer; font-size: 14px; line-height: 1; border-radius: 0;
}
.ctm-chip__x:hover { background: color-mix(in srgb, var(--navy) 12%, transparent); }
.ctm-chip--clear { color: var(--navy); border-style: dashed; cursor: pointer; padding: 3px 10px; min-height: 24px; }
.ctm-chip--clear:hover { background: color-mix(in srgb, var(--navy) 8%, transparent); }

/* ---- Contagem de resultados ----------------------------------------------- */
.ctm-count { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--neutral-800); letter-spacing: .04em; }
.ctm-count strong { color: var(--color-text); }

/* ---- Tabela desktop ------------------------------------------------------- */
.ctm-results { margin-top: var(--space-4); }
.ctm-tablewrap { border: 1px solid var(--ctm-line-strong); overflow-x: auto; }
.ctm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ctm-table caption { text-align: left; padding: var(--space-2) var(--space-3); color: var(--neutral-700); font-family: var(--font-mono); font-size: var(--fs-mono); border-bottom: 1px solid var(--ctm-line); }
.ctm-table th, .ctm-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ctm-line); white-space: nowrap; }
.ctm-table thead th {
  background: var(--color-surface); color: var(--neutral-800);
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--ctm-line-strong); position: sticky; top: 0; z-index: 1;
}
.ctm-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--navy) 2.5%, transparent); }
.ctm-table tbody tr:hover { background: color-mix(in srgb, var(--navy) 7%, transparent); }
.ctm-table th, .ctm-table td { padding: 12px 14px; }
.ctm-num { font-variant-numeric: tabular-nums; }
.ctm-cred { font-family: var(--font-mono); color: var(--navy); font-weight: 600; font-size: 15px; }
.ctm-code { font-family: var(--font-mono); }

/* Cabeçalho ordenável */
.ctm-th-sort { padding: 0; }
.ctm-th-sort__btn {
  display: inline-flex; align-items: center; gap: 6px; width: 100%;
  background: transparent; border: 0; cursor: pointer; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 10px 12px; min-height: 40px;
}
.ctm-th-sort__btn:hover { color: var(--navy); }
.ctm-th-sort__ind { color: var(--navy); font-size: 11px; }
.ctm-table th[aria-sort="ascending"], .ctm-table th[aria-sort="descending"] { color: var(--navy); }

/* ---- Cards mobile --------------------------------------------------------- */
.ctm-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.ctm-card { border: 1px solid var(--ctm-line-strong); background: var(--color-bg); padding: var(--space-4); }
.ctm-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.ctm-card__cred { font-family: var(--font-mono); font-size: var(--fs-h4); font-weight: 600; color: var(--navy); line-height: 1.1; }
.ctm-card__credlabel { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--neutral-700); }
.ctm-card__code { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--neutral-700); }
.ctm-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; }
.ctm-card__k { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--neutral-700); }
.ctm-card__v { font-size: var(--fs-small); color: var(--color-text); font-variant-numeric: tabular-nums; }
.ctm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.ctm-card__adm { font-size: var(--fs-small); color: var(--neutral-800); }

/* ---- CTA por linha/card ---------------------------------------------------- */
.ctm-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--fs-small);
  color: var(--on-navy); background: var(--navy); border: 1px solid var(--navy); border-radius: 0;
  padding: 6px 12px; min-height: 32px; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ctm-cta:hover { background: var(--navy-hover); color: var(--on-navy); }
.ctm-cta--block { width: 100%; min-height: 44px; }

/* ---- Paginação ------------------------------------------------------------ */
.ctm-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.ctm-pager__btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--fs-small);
  color: var(--navy); background: var(--color-bg); border: 1px solid var(--navy); border-radius: 0;
  padding: 8px 14px; min-height: 40px; cursor: pointer;
}
.ctm-pager__btn:hover:not(:disabled) { background: color-mix(in srgb, var(--navy) 8%, transparent); }
.ctm-pager__btn:disabled { opacity: .4; cursor: not-allowed; border-color: var(--ctm-line-strong); color: var(--neutral-700); }
.ctm-pager__status { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--neutral-800); letter-spacing: .04em; }

/* ---- Skeleton (mesma geometria → CLS zero) -------------------------------- */
.ctm-skel-bar {
  display: inline-block; height: 12px; border-radius: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-text) 8%, transparent) 25%,
    color-mix(in srgb, var(--color-text) 14%, transparent) 37%,
    color-mix(in srgb, var(--color-text) 8%, transparent) 63%);
  background-size: 400% 100%; animation: ctm-shimmer 1.4s ease infinite;
}
@keyframes ctm-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ctm-skel-bar { animation: none; } }

/* ---- Estados vazio / erro -------------------------------------------------- */
.ctm-state { border: 1px dashed var(--ctm-line-strong); padding: var(--space-10) var(--space-6); text-align: center; }
.ctm-state__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--fs-h4); margin-bottom: var(--space-2); color: var(--color-text); }
.ctm-state__msg { color: var(--neutral-800); margin-bottom: var(--space-4); max-width: 46ch; margin-inline: auto; }

.ctm-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Status como pill (dot + fundo sutil; padrão = disponível, on-brand) --- */
.ctm .tag-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  color: var(--navy); border-color: color-mix(in srgb, var(--navy) 32%, transparent);
  background: color-mix(in srgb, var(--navy) 7%, transparent); }
.ctm .tag-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ctm .tag-status[data-status="reservada"] { color: var(--neutral-700);
  border-color: var(--color-divider); background: transparent; }

/* Realce do crédito na tabela (valor é a informação-chave) */
.ctm-table tbody tr { transition: background .12s ease; }

/* ---- Alternância desktop/mobile (single-render controlada por JS) ---------- */
.ctm[data-view="table"] .ctm-cards { display: none; }
.ctm[data-view="cards"] .ctm-tablewrap { display: none; }