/*
 * cadastro.css — aparência do kit padrão de cadastro
 *
 * As cores vêm das variáveis do projeto quando existem (--marca, --t1, --ln...: o tema do
 * ChronosRH/DRE 360). Num projeto sem esse tema, valem os valores depois da vírgula.
 * Para mudar a cor de um projeto, basta redefinir --cad-marca e --cad-marca-2.
 */
:root {
  --cad-marca: var(--marca, #17647f);
  --cad-marca-2: var(--marca-2, #0f4e66);
  --cad-marca-sv: var(--marca-sv, #e3f1f6);
  --cad-marca-bd: var(--marca-bd, #b3d6e3);
  --cad-foco: var(--foco, rgba(23, 100, 127, .18));
  --cad-bg: var(--bg, #f3f6f8);
  --cad-sf: var(--sf, #ffffff);
  --cad-sf-2: var(--sf-2, #f0f4f7);
  --cad-hover: var(--hover, #eef4f8);
  --cad-ln: var(--ln, #dfe6eb);
  --cad-ln-forte: var(--ln-forte, #c5d0d8);
  --cad-t1: var(--t1, #122029);
  --cad-t2: var(--t2, #3b4b56);
  --cad-t3: var(--t3, #677884);
  --cad-t4: var(--t4, #98a6b0);
  --cad-ok: var(--ok, #1f7a4c);
  --cad-er: var(--er, #b23a2c);
  --cad-av: var(--av, #9a5b0b);
  --cad-in: #2862a3;
  --cad-sans: var(--sans, "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif);
  --cad-serif: var(--serif, "Source Serif 4", Georgia, "Times New Roman", serif);
  --cad-mono: var(--mono, "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace);
  --cad-raio: 6px;
  --cad-sombra: 0 1px 2px rgba(18, 32, 41, .05);
}

.cad-pagina, .cad-modal { font-family: var(--cad-sans); color: var(--cad-t1); font-size: 14px; line-height: 1.45; }
.cad-pagina *, .cad-modal * { box-sizing: border-box; }
.cad-pagina { max-width: 1120px; margin: 0 auto; padding: 24px 16px 96px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------- cabeçalho */
.cad-cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.cad-kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--cad-t3); margin: 0 0 4px; }
.cad-titulo { font-family: var(--cad-serif); font-weight: 600; font-size: clamp(1.45rem, 1.1rem + 1vw, 1.85rem); line-height: 1.2; letter-spacing: -.01em; margin: 0; color: var(--cad-t1); }
.cad-subtitulo { margin: 4px 0 0; color: var(--cad-t3); font-size: 13.5px; }
.cad-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cad-voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cad-t3); text-decoration: none; margin-bottom: 8px; }
.cad-voltar:hover { color: var(--cad-marca); }

/* ------------------------------------------------------------- cartões / seções */
.cad-card { background: var(--cad-sf); border: 1px solid var(--cad-ln); border-radius: 8px; box-shadow: var(--cad-sombra); }
.cad-card + .cad-card, .cad-secao + .cad-secao { margin-top: 16px; }
.cad-secao { background: var(--cad-sf); border: 1px solid var(--cad-ln); border-radius: 8px; box-shadow: var(--cad-sombra); }
.cad-secao > summary, .cad-secao-cab { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--cad-ln); list-style: none; }
.cad-secao > summary { cursor: pointer; }
.cad-secao > summary::-webkit-details-marker { display: none; }
.cad-secao:not([open]) > summary { border-bottom: 0; }
.cad-secao > summary::after { content: ""; margin-left: auto; align-self: center; width: 8px; height: 8px; border-right: 2px solid var(--cad-t4); border-bottom: 2px solid var(--cad-t4); transform: rotate(45deg); transition: transform 150ms; }
.cad-secao:not([open]) > summary::after { transform: rotate(-45deg); }
.cad-secao-num { font-family: var(--cad-mono); font-size: 12px; color: var(--cad-marca); font-weight: 600; min-width: 20px; }
.cad-secao-titulo { font-family: var(--cad-serif); font-weight: 600; font-size: 17px; margin: 0; color: var(--cad-t1); }
.cad-secao-sub { font-size: 12.5px; color: var(--cad-t3); margin: 0; }
.cad-secao-corpo { padding: 18px 20px 20px; }

/* ------------------------------------------------------------- grade 12 colunas */
.cad-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; }
.cad-grade > * { grid-column: span 12; min-width: 0; }
.cad-col-2 { grid-column: span 2 !important; } .cad-col-3 { grid-column: span 3 !important; }
.cad-col-4 { grid-column: span 4 !important; } .cad-col-5 { grid-column: span 5 !important; }
.cad-col-6 { grid-column: span 6 !important; } .cad-col-7 { grid-column: span 7 !important; }
.cad-col-8 { grid-column: span 8 !important; } .cad-col-9 { grid-column: span 9 !important; }
.cad-col-todo { grid-column: 1 / -1 !important; }
@media (max-width: 860px) {
  .cad-col-2, .cad-col-3 { grid-column: span 4 !important; }
  .cad-col-4, .cad-col-5 { grid-column: span 6 !important; }
  .cad-col-6, .cad-col-7, .cad-col-8, .cad-col-9 { grid-column: span 12 !important; }
}
@media (max-width: 560px) {
  .cad-grade > * { grid-column: 1 / -1 !important; }
  .cad-grade > .cad-meia-no-celular { grid-column: span 6 !important; }
}

/* ------------------------------------------------------------- campos */
.cad-rotulo { display: block; font-size: 12.5px; font-weight: 600; color: var(--cad-t2); margin: 0 0 5px; }
.cad-obrig { color: var(--cad-er); font-weight: 700; }
.cad-input, .cad-select, .cad-textarea {
  width: 100%; height: 38px; border: 1px solid var(--cad-ln-forte); border-radius: 5px; background: var(--cad-sf);
  padding: 0 11px; font: inherit; font-size: 14px; color: var(--cad-t1); transition: border-color 120ms, box-shadow 120ms;
}
.cad-textarea { height: auto; min-height: 88px; padding: 9px 11px; resize: vertical; }
.cad-select { padding-right: 28px; }
.cad-input:focus, .cad-select:focus, .cad-textarea:focus { outline: none; border-color: var(--cad-marca); box-shadow: 0 0 0 3px var(--cad-foco); }
.cad-input[readonly] { background: var(--cad-sf-2); color: var(--cad-t2); }
.cad-input::placeholder, .cad-textarea::placeholder { color: var(--cad-t4); }
.cad-input.cad-invalido, .cad-campo-erro .cad-input, .cad-campo-erro .cad-select { border-color: var(--cad-er); }
.cad-input[data-mascara="cpf"], .cad-input[data-mascara="cnpj"], .cad-input[data-mascara="cep"],
.cad-input[data-mascara="telefone"], .cad-input[data-mascara="pis"], .cad-input[data-mascara="rg"], .cad-mono { font-family: var(--cad-mono); font-variant-numeric: tabular-nums; }
.cad-ajuda { font-size: 12px; color: var(--cad-t3); margin: 5px 0 0; }
.cad-linha { display: flex; gap: 6px; align-items: stretch; }
.cad-linha > .cad-input { flex: 1; min-width: 0; }
.cad-link { background: none; border: 0; padding: 0; margin-top: 6px; font: inherit; font-size: 12.5px; color: var(--cad-marca); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cad-link:hover { color: var(--cad-marca-2); }

/* mensagens abaixo do campo */
.cad-msg { font-size: 12px; margin: 5px 0 0; }
.cad-msg-ok { color: var(--cad-ok); } .cad-msg-er { color: var(--cad-er); }
.cad-msg-av { color: var(--cad-av); } .cad-msg-in { color: var(--cad-t3); }

/* Pessoa física / jurídica */
.cad-tipo { display: inline-flex; border: 1px solid var(--cad-ln-forte); border-radius: 6px; overflow: hidden; background: var(--cad-sf); }
.cad-tipo label { position: relative; cursor: pointer; }
.cad-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.cad-tipo span { display: block; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--cad-t2); }
.cad-tipo label + label span { border-left: 1px solid var(--cad-ln-forte); }
.cad-tipo input:checked + span { background: var(--cad-marca); color: #fff; }
.cad-tipo input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--cad-foco); }

/* Chave liga/desliga (ativo) */
.cad-chave { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.cad-chave input { width: 36px; height: 20px; appearance: none; -webkit-appearance: none; background: var(--cad-ln-forte); border-radius: 999px; position: relative; cursor: pointer; transition: background 150ms; margin: 0; }
.cad-chave input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 150ms; }
.cad-chave input:checked { background: var(--cad-ok); }
.cad-chave input:checked::after { transform: translateX(16px); }
.cad-chave input:focus-visible { box-shadow: 0 0 0 3px var(--cad-foco); outline: none; }

/* ------------------------------------------------------------- botões */
.cad-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 5px; font: inherit; font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 120ms, border-color 120ms; }
.cad-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cad-foco); }
.cad-btn-pri { background: var(--cad-marca); color: #fff; } .cad-btn-pri:hover { background: var(--cad-marca-2); }
.cad-btn-sec { background: var(--cad-sf); color: var(--cad-t1); border-color: var(--cad-ln-forte); } .cad-btn-sec:hover { background: var(--cad-hover); }
.cad-btn-ghost { background: transparent; color: var(--cad-t2); } .cad-btn-ghost:hover { background: var(--cad-hover); }
.cad-btn-er { background: var(--cad-sf); color: var(--cad-er); border-color: #efc5bd; } .cad-btn-er:hover { background: #fbece9; }
.cad-btn-sm { height: 32px; padding: 0 11px; font-size: 13px; }
.cad-btn-icone { width: 38px; padding: 0; }
.cad-btn[disabled] { opacity: .6; cursor: default; }
.cad-carregando { position: relative; color: transparent !important; }
.cad-carregando::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: cad-gira 700ms linear infinite; }
@keyframes cad-gira { to { transform: rotate(360deg); } }

/* Barra de ações fixa no rodapé do formulário */
.cad-rodape { position: sticky; bottom: 0; z-index: 5; margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border: 1px solid var(--cad-ln); border-radius: 8px; box-shadow: 0 -4px 18px rgba(18,32,41,.06); }
.cad-rodape-info { margin-right: auto; font-size: 12.5px; color: var(--cad-t3); }
@media (max-width: 560px) { .cad-rodape .cad-btn { flex: 1; } .cad-rodape-info { flex-basis: 100%; } }

/* ------------------------------------------------------------- avisos */
.cad-alerta { display: flex; gap: 10px; padding: 12px 14px; border-radius: 6px; border: 1px solid; font-size: 13.5px; margin-bottom: 16px; }
.cad-alerta ul { margin: 4px 0 0; padding-left: 18px; }
.cad-alerta-ok { color: var(--cad-ok); background: #e5f4ec; border-color: #b5dcc6; }
.cad-alerta-er { color: var(--cad-er); background: #fbece9; border-color: #efc5bd; }
.cad-alerta-av { color: var(--cad-av); background: #fcf2e0; border-color: #eed3a4; }

/* ------------------------------------------------------------- lista */
.cad-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--cad-ln); }
.cad-filtros .cad-busca { flex: 1 1 260px; }
.cad-abas { display: inline-flex; gap: 2px; background: var(--cad-sf-2); border-radius: 6px; padding: 3px; }
.cad-abas a { padding: 6px 12px; border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--cad-t3); text-decoration: none; }
.cad-abas a[aria-current="page"] { background: var(--cad-sf); color: var(--cad-t1); box-shadow: var(--cad-sombra); }
.cad-rolagem { overflow-x: auto; }
.cad-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cad-tbl th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cad-t3); font-weight: 600; padding: 10px 14px; background: var(--cad-sf-2); text-align: left; white-space: nowrap; }
.cad-tbl td { padding: 10px 14px; border-top: 1px solid var(--cad-ln); vertical-align: middle; }
.cad-tbl tbody tr:hover td { background: var(--cad-hover); }
.cad-tbl .cad-nome { font-weight: 600; color: var(--cad-t1); text-decoration: none; }
.cad-tbl .cad-nome:hover { color: var(--cad-marca); }
.cad-tbl small { display: block; color: var(--cad-t3); font-size: 12px; }
.cad-tbl .cad-direita { text-align: right; }
.cad-vazio { padding: 40px 16px; text-align: center; color: var(--cad-t3); }
@media (max-width: 720px) {
  /* Celular: cada linha vira um cartão */
  .cad-tbl thead { display: none; }
  .cad-tbl, .cad-tbl tbody, .cad-tbl tr, .cad-tbl td { display: block; width: 100%; }
  .cad-tbl tr { padding: 10px 14px; border-top: 1px solid var(--cad-ln); }
  .cad-tbl td { border: 0; padding: 2px 0; }
  .cad-tbl td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--cad-t3); font-size: 12px; }
  .cad-tbl .cad-direita { text-align: left; padding-top: 6px; }
}
.cad-pill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 4px; border: 1px solid; white-space: nowrap; line-height: 1.6; }
.cad-pill-ok { color: var(--cad-ok); background: #e5f4ec; border-color: #b5dcc6; }
.cad-pill-ne { color: var(--cad-t2); background: var(--cad-sf-2); border-color: var(--cad-ln); }
.cad-pill-mc { color: var(--cad-marca-2); background: var(--cad-marca-sv); border-color: var(--cad-marca-bd); }
.cad-suave { color: var(--cad-t3); }

/* ------------------------------------------------------------- caixa de diálogo */
.cad-modal-fundo { position: fixed; inset: 0; z-index: 9999; background: rgba(12, 22, 30, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cad-modal { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: var(--cad-sf); border-radius: 10px; padding: 22px; box-shadow: 0 20px 50px rgba(18,32,41,.25); }
.cad-modal-titulo { font-family: var(--cad-serif); font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.cad-modal-texto { font-size: 13.5px; color: var(--cad-t2); margin: 0 0 14px; }
.cad-modal-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.cad-grade-busca { grid-template-columns: 110px 1fr; }
.cad-grade-busca > * { grid-column: auto; }
.cad-lista-ceps { margin-top: 8px; border: 1px solid var(--cad-ln); border-radius: 6px; max-height: 320px; overflow-y: auto; }
.cad-lista-ceps:empty { display: none; }
.cad-item-cep { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--cad-ln); background: var(--cad-sf); font: inherit; font-size: 13.5px; color: var(--cad-t1); cursor: pointer; }
.cad-item-cep:last-child { border-bottom: 0; }
.cad-item-cep:hover, .cad-item-cep:focus-visible { background: var(--cad-hover); outline: none; }
.cad-item-cep small { display: block; font-size: 12px; color: var(--cad-t3); }