/* KCB UI v1 — camada compartilhada sobre Bootstrap 5.3
   Contratos visuais reutilizáveis. Não substitui Bootstrap. */

:root {
  --kcb-ui-radius-sm: 8px;
  --kcb-ui-radius-md: 10px;
  --kcb-ui-shadow: 0 2px 10px rgba(0,0,0,.04);
  --kcb-ui-border: var(--linha, #e7e8ea);
  --kcb-ui-bg: var(--white, #fff);
  --kcb-ui-text: var(--txt-1, #24272b);
  --kcb-ui-muted: var(--txt-3, #7b8188);
}

/* Toolbar padrão de páginas de edição: contexto/título à esquerda, ação à direita. */
.kcb-editor-toolbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.kcb-editor-toolbar-left,
.kcb-editor-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.kcb-editor-toolbar-left h5 { margin: 0; font-size: 17px; line-height: 1.05; font-weight: 800; color: var(--kcb-ui-text); }
.kcb-editor-toolbar-left small { display:block; margin-top:2px; font-size:10px; color:var(--kcb-ui-muted); }
.kcb-editor-toolbar-actions { flex: 0 0 auto; }


/* Cabeçalho padrão para páginas sem botão Voltar, mas com ação principal. */
.kcb-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.kcb-page-header > div:first-child { min-width: 0; }
.kcb-page-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

/* Cabeçalho leve de seção: evita card dentro de card. */
.kcb-section-head {
  min-height: 38px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.kcb-section-head > div { min-width: 0; }
.kcb-section-head h6 { margin:0; font-size:var(--fs-md, .9rem); font-weight:800; color:var(--kcb-ui-text); }
.kcb-section-head small { display:block; margin-top:3px; color:var(--kcb-ui-muted); font-size:var(--fs-xs, .72rem); }
.kcb-stat-note { display:block; margin-top:4px; color:var(--kcb-ui-muted); font-size:10px; line-height:1.25; }

/* Modal KCB: Bootstrap cuida da mecânica, KCB UI da anatomia visual. */
.modal-content {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--kcb-ui-bg);
  box-shadow: 0 18px 56px rgba(0,0,0,.20);
}
.modal-header {
  min-height: 50px;
  padding: 13px 16px;
  background: var(--kcb-ui-bg);
  color: var(--kcb-ui-text);
  border-bottom: 1px solid var(--kcb-ui-border);
}
.modal-header .modal-title { margin:0; font-size:var(--fs-md, .9rem); font-weight:800; color:var(--kcb-ui-text); }
.modal-header .btn-close { filter:none; opacity:.58; }
.modal-header .btn-close:hover { opacity:.9; }
.modal-body { padding: 15px 16px; }
.modal-footer { padding: 10px 16px; border-top:1px solid var(--kcb-ui-border); background:#fcfcfc; }

@media (max-width: 700px) {
  .kcb-editor-toolbar { align-items:flex-start; flex-wrap:wrap; }
  .kcb-editor-toolbar-left { flex:1 1 auto; }
  .kcb-editor-toolbar-actions { margin-left:auto; }
  .kcb-editor-toolbar-actions .btn { white-space:nowrap; }
  .kcb-page-header { align-items:flex-start; flex-wrap:wrap; }
  .kcb-page-header-actions { width:100%; }
  .kcb-section-head { align-items:flex-start; }
}