/* ============================================================================
   cadastro.css — os modais de cadastro completo (KbalCad.pas)

   Prefixo de classes: `kcad`. Servem ao TKbalCadModal e a seus dois
   descendentes (ModalCadCliente, ModalCadFuncionario). O TKbalModal monta

     .kcad-overlay > .kcad-dialog > .ui-modal-head (components/modal-head.css)
                                  > .kcad-tabs   (TopHtml: Cadastro | Listagem)
                                  > .kcad-body   > .kcad-pane...
                                                   > .kcad-subtabs  (as
                                                     sub-abas do cadastro de
                                                     funcionario)
                                                   > .kcad-subpane...
                                  > .kcad-acoes  (rodape)

   ...e o TKbalForm monta, dentro de cada cartao:

     .kcad-form > .kcad-field.kcad-field--sN > .floating-field
     .kcad-checkrow > .kcad-checkwrap > .kcad-check
     .kcad-input-group / .kcad-input-btn   (campo com botao colado)
     .kcad-radiogrid / .kcad-radio(.kcad-radio--on)
     .kcad-file (fkArquivo: miniatura + seletor)
     .kcad-cor  (fkCor: input color + atalhos de cor)

   Desenhado sobre os tokens do tema, como o resto do projeto — o layout de
   cartoes vem do modal-cad-cliente.js / modal-cad-funcionario.js do
   D2PdvSmart, que la eram Tailwind com gradiente azul fixo.
   ============================================================================ */

body.kcad-open { overflow: hidden; }

.kcad-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 18, 24, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.kcad-overlay.is-open { display: flex; }

.kcad-dialog {
  display: flex;
  flex-direction: column;
  width: min(60rem, 100%);
  max-height: calc(100vh - 2rem);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ---- abas (Cadastro | Listagem) ---- */
.kcad-tabs {
  display: flex;
  gap: .25rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--card-border);
  background: var(--app-bg);
}
.kcad-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.kcad-tab:hover { color: var(--text); }
.kcad-tab--on { color: var(--primary); border-bottom-color: var(--primary); }

.kcad-body {
  padding: 1rem;
  overflow-y: auto;
}

/* ---- sub-abas da aba Cadastro (Dados Gerais | Pessoais | Avancado) ----
   Barra mais discreta que a de cima: ela vive DENTRO do pane, entao nao pode
   competir com a fileira principal. */
.kcad-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--card-border);
}
.kcad-subtab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.kcad-subtab:hover { color: var(--text); }
.kcad-subtab--on { color: var(--text); border-bottom-color: var(--primary); }

.kcad-subpane { display: block; }
.kcad-subpane.hidden { display: none; }

.kcad-pane { display: block; }
.kcad-pane.hidden { display: none; }

/* ---- mensagem do modal (o runtime alterna a classe `erro`) ---- */
.kcad-status {
  margin: 0 0 .8rem;
  padding: .55rem .8rem;
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}
.kcad-status.erro {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}

/* ---- cartoes de campos ---- */
.kcad-card {
  margin-bottom: .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.kcad-card:last-child { margin-bottom: 0; }

/* Mesma faixa do cabecalho do modal e da .page-titlebar das telas. */
.kcad-card-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--card-border);
  background: var(--primary);
  color: #111;
  font-size: .78rem;
  font-weight: 800;
}

.kcad-card-body { padding: 1rem .9rem .9rem; }

/* ---- grade de campos ---- */
.kcad-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.15rem .8rem;
}

.kcad-field { min-width: 0; }
.kcad-field--s1 { grid-column: span 1; }
.kcad-field--s2 { grid-column: span 2; }
.kcad-field--s3 { grid-column: span 3; }
.kcad-field--s4 { grid-column: span 4; }
.kcad-field--s5 { grid-column: span 5; }
.kcad-field--s6 { grid-column: 1 / -1; }

/* ---- campo com botao colado (as lupas de CEP e CNPJ) ---- */
.kcad-input-group { display: flex; align-items: stretch; }
.kcad-input-group .floating-field { flex: 1 1 0%; min-width: 0; }
/* o anel de foco do input tem de passar por cima da borda do botao */
.kcad-input-group .floating-field:focus-within { z-index: 2; }
.kcad-input-group .floating-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.kcad-input-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0 .75rem;
  border: 1px solid var(--primary);
  border-left: 0;
  border-radius: var(--radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--primary);
  color: #111;
  font-size: .85rem;
  cursor: pointer;
}
.kcad-input-btn:hover { background: var(--primary-hover); }

/* ---- campos logicos ---- */
.kcad-checkrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.15rem;
  padding-top: .35rem;
}
.kcad-checkwrap {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.kcad-check {
  pointer-events: none;   /* so desenho: o estado vive no runtime */
  accent-color: var(--primary);
  width: auto;
}

/* ---- grupo de escolha unica (Pessoa Fisica / Juridica) ---- */
.kcad-radiogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .5rem;
}
.kcad-radio {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .65rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  text-align: left;
  cursor: pointer;
}
.kcad-radio:hover { border-color: var(--primary); }
.kcad-radio--on {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.kcad-radio-dot { pointer-events: none; accent-color: var(--primary); }
.kcad-radio-txt { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.kcad-radio-cod { font-weight: 800; color: var(--primary); }
.kcad-radio-lbl { overflow: hidden; text-overflow: ellipsis; }

/* ---- foto (fkArquivo) ---- */
.kcad-file { display: flex; align-items: center; gap: .75rem; }
.kcad-file-img {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  object-fit: cover;
  border: 1px dashed var(--card-border);
  border-radius: var(--radius);
  background: var(--app-bg);
}
.kcad-file-lado { display: flex; flex-direction: column; gap: .35rem; }
.kcad-file-rot { font-size: .7rem; font-weight: 600; color: var(--text-muted); }
.kcad-file-input { display: none; }
.kcad-file-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.kcad-file-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ---- cor da agenda (fkCor) ---- */
.kcad-cor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}
.kcad-cor-atual {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  padding: .3rem .6rem .3rem .3rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.kcad-cor-input {
  width: 2.4rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: none;
  cursor: pointer;
}
.kcad-cor-rot { font-size: .75rem; font-weight: 600; color: var(--text-muted); }

.kcad-cor-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.kcad-cor-atalho {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
}
.kcad-cor-atalho:hover { border-color: var(--text); transform: scale(1.08); }

/* ---- aba Listagem ---- */
.kcad-busca { margin-bottom: .75rem; }

.kcad-info {
  margin-bottom: .5rem;
  font-size: .75rem;
  color: var(--text-muted);
}

.kcad-lista {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.kcad-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--card-border);
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
}
.kcad-item:last-child { border-bottom: 0; }
.kcad-item:hover { background: var(--primary-soft); }

.kcad-item-main { flex: 1; min-width: 0; }
.kcad-item-titulo {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kcad-item-sub { margin-top: .1rem; font-size: .72rem; color: var(--text-muted); }
.kcad-item-cod { flex: none; font-size: .72rem; color: var(--text-muted); }

.kcad-item-btn {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
}
.kcad-item-btn:hover { border-color: var(--primary); color: var(--primary); }

.kcad-vazio {
  padding: .9rem;
  text-align: center;
  font-size: .8rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ---- rodape ---- */
.kcad-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.kcad-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.kcad-btn:hover { border-color: var(--primary); color: var(--primary); }

.kcad-btn-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #111;
}
.kcad-btn-primary:hover { background: var(--primary-hover); color: #111; }

.kcad-btn-danger { border-color: var(--danger); color: var(--danger); }
.kcad-btn-danger:hover { background: var(--danger); color: #fff; }

@media (max-width: 820px) {
  .kcad-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcad-field--s3,
  .kcad-field--s4,
  .kcad-field--s5,
  .kcad-field--s6 { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .kcad-form { grid-template-columns: minmax(0, 1fr); }
  .kcad-field--s1,
  .kcad-field--s2 { grid-column: 1 / -1; }
  .kcad-acoes { flex-wrap: wrap; }
  .kcad-acoes .kcad-btn { flex: 1 1 auto; justify-content: center; }
}