/* Visual inspirado no vhub (Vertrau): topbar branca com a marca, menu lateral
   navy, conteudo claro com cards e acentos azuis. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --azul: #2563eb;
  --azul-hover: #1d4ed8;
  --azul-50: #eff5ff;
  --navy: #1c2b4a;          /* menu lateral */
  --navy-hover: rgba(255, 255, 255, .07);
  --navy-texto: #c4d0e0;
  --conteudo: #f5f6f8;
  --borda: #e7ebf1;
  --borda-input: #d3dae5;
  --texto: #1f2a3d;
  --texto-suave: #64748b;
  --radius: 8px;
  --radius-sm: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Montserrat', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  background: var(--conteudo);
  color: var(--texto);
  line-height: 1.5;
}

/* ----- Topbar ----- */
.topo {
  background: #fff;
  border-bottom: 1px solid var(--borda);
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.marca { display: flex; align-items: center; gap: 10px; }
.logo { width: 26px; height: 26px; }
.logo-img { height: 30px; width: auto; display: block; }
.marca-nome { font-size: 18px; font-weight: 700; letter-spacing: .14em; color: #16233f; }
.marca-sep { width: 1px; height: 24px; background: var(--borda); margin: 0 4px; }
.marca-app { font-size: 14px; font-weight: 600; color: var(--texto-suave); }
.topo-usuario { font-size: 13px; color: var(--texto-suave); }

/* ----- Layout com menu lateral ----- */
.layout {
  display: flex;
  align-items: stretch;          /* coluna navy estica ate a altura do conteudo */
  min-height: calc(100vh - 56px); /* e preenche pelo menos a tela toda */
}

.menu-lateral {
  width: 230px;
  flex-shrink: 0;
  background: var(--navy);
  padding: 14px 12px;
}
.menu-sticky { position: sticky; top: 14px; } /* mantem o menu visivel ao rolar */
.menu-titulo {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7e8ba6;
  padding: 6px 12px 10px;
}
.item-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  margin-bottom: 4px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-texto);
  transition: background .15s, color .15s;
}
.item-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.item-menu:hover { background: var(--navy-hover); color: #fff; }
.item-menu.ativa { background: var(--azul); color: #fff; }

.oculto { display: none; }

main {
  flex: 1;
  min-width: 0;
  margin: 22px auto;
  padding: 0 24px;
  max-width: 1280px;
}

/* ----- Cards ----- */
.cartao {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.cartao h2 {
  margin: 0 0 16px;
  padding-left: 10px;
  border-left: 3px solid var(--azul);
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
}

.ajuda { margin: -6px 0 14px; font-size: 13px; color: var(--texto-suave); }
.dica-arquivo { margin: 12px 0 0; font-size: 13px; color: var(--texto-suave); font-style: italic; }

.cabecalho-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cabecalho-secao h2 { margin: 0; }

/* ----- Campos ----- */
.linha-campos { display: flex; gap: 16px; flex-wrap: wrap; }
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px 16px;
  align-items: stretch;
}
.campo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.campo > span { font-weight: 600; color: #3b485c; }
.campo small { color: #9aa6b6; font-weight: 400; font-size: 11px; }
/* Alinha os inputs pela base: mesmo que um rotulo ocupe 2 linhas,
   os campos da mesma linha ficam retos. */
.campo > input, .campo > select, .campo > textarea { margin-top: auto; }

/* Estilo dos campos de texto/numero/data e selects.
   Checkboxes ficam de fora (senao herdam width:100%, padding, borda e o anel
   de foco animado, que fazia o checkbox "piscar grande"). */
input:not([type="checkbox"]), select, textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--borda-input);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--texto);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:not([type="checkbox"]):hover, select:hover, textarea:hover { border-color: #b9c3d3; }
input:not([type="checkbox"]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* ----- Barra de geracao automatica ----- */
.auto-gerar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--azul-50);
  border: 1px solid #d3e2fb;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.campo-inline { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.campo-inline > span { font-weight: 600; color: #3b485c; }
.campo-inline input { width: 110px; }
.campo-inline select { width: auto; min-width: 200px; }
.controles-auto { display: contents; }
.campo-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #3b485c; padding-bottom: 9px; }
.campo-checkbox input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--azul); }
.campo-checkbox label { cursor: pointer; }

/* ----- Blocos de titulo ----- */
.titulo-bloco {
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: #fafbfc;
}
.titulo-bloco .titulo-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.titulo-bloco .titulo-cabecalho strong { color: var(--azul); }

/* ----- Botoes ----- */
.btn {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-hover); }
.btn-primario:disabled { background: #aac2f3; cursor: not-allowed; }
.btn-secundario { background: #fff; color: var(--azul); border-color: var(--borda-input); }
.btn-secundario:hover { background: var(--azul-50); border-color: var(--azul); }
.btn-remover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; padding: 6px 12px; font-size: 12px; }
.btn-remover:hover { background: #fee2e2; }

.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.resumo { font-size: 13px; color: var(--texto-suave); margin: 0 0 10px; min-height: 18px; }

/* ----- Preview (codigo) ----- */
.preview {
  width: 100%;
  min-height: 220px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 12px;
  white-space: pre;
  overflow-x: auto;
  background: #0f172a;
  color: #e2e8f0;
  border-color: #0f172a;
  border-radius: var(--radius-sm);
}

/* ----- Rodape ----- */
.rodape {
  padding: 8px 24px 24px;
  font-size: 12px;
  color: #9aa6b6;
}
.rodape code { background: var(--borda); color: #3b485c; padding: 1px 5px; border-radius: 4px; }

input[type="file"] { padding: 7px; background: #fff; }

/* ----- Responsivo: menu vira barra horizontal ----- */
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .menu-lateral {
    width: 100%;
    min-height: 0;
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
  }
  .menu-titulo { display: none; }
  .item-menu { width: auto; margin-bottom: 0; }
  .marca-app, .marca-sep { display: none; }
}