* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #eef1f5;
}
#toolbar {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  background: #0f79f2; color: #fff; padding: 8px 14px;
}
#toolbar .grupo { display: flex; align-items: center; gap: 6px; }
#toolbar button {
  background: #34495e; color: #fff; border: 1px solid #4a6378;
  border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 13px;
}


#toolbar a {
       
       color: #ffffff;
       font-size: 12px;
       padding: 9px 16px;
       font-family: sans-serif;
}

#toolbar button:hover { background: #3f5872; }
#toolbar button.ativo { background: #2980b9; border-color: #2980b9; }
#toolbar input[type=text], #toolbar select {
  padding: 5px 7px; border-radius: 4px; border: 1px solid #4a6378;
}
main { height: calc(100vh - 78px); overflow: auto; background: #fdfdfd; }
#canvasDiagrama {
  display: block;
  background-image: linear-gradient(to right, #eee 1px, transparent 1px),
                     linear-gradient(to bottom, #eee 1px, transparent 1px);
  background-size: 20px 20px;
  cursor: crosshair;
}
#statusBar {
  background: #dde3ea; padding: 5px 12px; font-size: 12px; color: #333;
  border-top: 1px solid #c7cfd8;
}

/* ---------------------------------------------------------------
 * Modais (cardinalidade, edição de tabela lógica etc.)
 * --------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 28, 38, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal-caixa {
  background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  min-width: 320px; max-width: 640px; width: 92%;
  max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-caixa.modal-larga { max-width: 820px; }
.modal-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  background: #2c3e50; color: #fff; padding: 10px 16px;
}
.modal-cabecalho h3 { margin: 0; font-size: 15px; }
.modal-fechar {
  background: transparent; border: none; color: #fff; font-size: 18px;
  cursor: pointer; line-height: 1;
}
.modal-corpo { padding: 14px 16px; overflow-y: auto; }
.modal-rodape {
  padding: 10px 16px; border-top: 1px solid #e1e6eb; display: flex;
  justify-content: flex-end; gap: 8px; background: #f7f9fb;
}
.modal-rodape button, .campo-linha .btn-remover, .btn-adicionar-campo {
  padding: 6px 14px; border-radius: 4px; border: 1px solid #4a6378;
  background: #34495e; color: #fff; cursor: pointer; font-size: 13px;
}
.modal-rodape button:hover, .btn-adicionar-campo:hover { background: #3f5872; }
.modal-rodape button.primario { background: #2980b9; border-color: #2980b9; }
.modal-rodape button.primario:hover { background: #2471a3; }
.form-grupo { margin-bottom: 12px; }
.form-grupo label { display: block; font-size: 12px; color: #444; margin-bottom: 4px; font-weight: 600; }
.form-grupo input[type=text], .form-grupo select {
  width: 100%; padding: 6px 8px; border: 1px solid #c7cfd8; border-radius: 4px; font-size: 13px;
}
.campos-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.campo-linha {
  display: grid; grid-template-columns: 1.3fr 1.3fr 0.9fr 0.9fr 0.55fr 0.7fr auto;
  gap: 6px; align-items: center; background: #f7f9fb; border: 1px solid #e1e6eb;
  border-radius: 5px; padding: 6px;
}
.campo-linha input[type=text], .campo-linha select { width: 100%; padding: 4px 5px; font-size: 12px; border: 1px solid #c7cfd8; border-radius: 3px; }
.campo-linha .campo-check { display: flex; align-items: center; gap: 4px; font-size: 11px; justify-content: center; }
.campo-linha .btn-remover { background: #c0392b; border-color: #c0392b; padding: 4px 8px; }
.campo-linha .btn-remover:hover { background: #a5311f; }
.campos-cabecalho {
  display: grid; grid-template-columns: 1.3fr 1.3fr 0.9fr 0.9fr 0.55fr 0.7fr auto;
  gap: 6px; font-size: 11px; color: #666; font-weight: 600; padding: 0 6px; margin-top: 10px;
}
.btn-adicionar-campo { margin-top: 10px; }
.modal-select-cardinalidade select { font-size: 14px; padding: 8px; }