/* GOH Produções — Painel administrativo. Mesma paleta do site. */
:root {
  --ink: #0B0A09;
  --ink-2: #121010;
  --ink-3: #1B1817;
  --ink-4: #262120;
  --linha: rgba(246, 241, 234, .12);
  --linha-forte: rgba(246, 241, 234, .28);
  --papel: #F6F1EA;
  --papel-2: #CFC6BC;
  --suave: #9A9089;
  --rose: #DA898D;
  --gold: #E9BE85;
  --verde: #8FC5A0;
  --display: 'Fraunces', Georgia, serif;
  --texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--papel);
  font: 16px/1.55 var(--texto);
}

a { color: var(--gold); }
code { font-size: .88em; background: var(--ink-3); padding: .1em .35em; border-radius: 3px; word-break: break-all; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0 0 .4rem; }
h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
h2 { font-size: 1.25rem; }

/* ---- topo ---- */
.topo {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: .9rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--linha);
  background: var(--ink-2);
}
.marca { color: var(--papel); text-decoration: none; font-size: 1.05rem; }
.marca span { color: var(--gold); font-family: var(--display); }
.menu { display: flex; gap: .3rem; flex-wrap: wrap; margin-right: auto; }
.menu a {
  color: var(--papel-2);
  text-decoration: none;
  padding: .35rem .7rem;
  border-radius: 3px;
  font-size: .93rem;
}
.menu a:hover { background: var(--ink-3); color: var(--papel); }
.menu a[aria-current="page"] { background: var(--ink-4); color: var(--papel); }
.sair { margin: 0; }
.sair button {
  background: none;
  border: 1px solid var(--linha-forte);
  color: var(--papel-2);
  padding: .35rem .8rem;
  border-radius: 3px;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}
.sair button:hover { color: var(--papel); border-color: var(--papel-2); }

/* ---- miolo ---- */
.conteudo {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2.5rem) 3rem;
}
.lead { color: var(--papel-2); margin: 0 0 2rem; }
.vazio { color: var(--suave); padding: 2rem 0; }
.miudo { font-size: .82rem; color: var(--suave); word-break: break-all; }
.rodape { text-align: center; color: var(--suave); font-size: .8rem; padding: 1.5rem; border-top: 1px solid var(--linha); }

.cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cabeca .lead { margin-bottom: 1.5rem; }

/* ---- grupos de links ---- */
.grupo { margin-bottom: 2.4rem; }
.grupo h2 {
  font-family: var(--texto);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--suave);
  margin-bottom: .9rem;
}
.cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.cartao {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  height: 100%;
  padding: 1rem 1.1rem;
  background: var(--ink-2);
  border: 1px solid var(--linha);
  border-radius: 4px;
  color: var(--papel);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.cartao:hover, .cartao:focus-visible { border-color: var(--gold); background: var(--ink-3); outline: none; }
.cartao strong { font-weight: 600; }
.cartao .desc { color: var(--papel-2); font-size: .88rem; }
.cartao .url { color: var(--suave); font-size: .76rem; margin-top: auto; padding-top: .5rem; word-break: break-all; }
.cartao--interno { border-left: 3px solid var(--rose); }

/* ---- formulários ---- */
.caixa-login {
  max-width: 440px;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--ink-2);
  border: 1px solid var(--linha);
  border-radius: 4px;
}
.form { display: flex; flex-direction: column; gap: .35rem; }
.form label { font-size: .88rem; color: var(--papel-2); margin-top: .6rem; }
.form small { color: var(--suave); }
.form input, .form textarea, .barra-cofre input {
  width: 100%;
  padding: .7rem .8rem;
  background: var(--ink);
  border: 1px solid var(--linha-forte);
  border-radius: 3px;
  color: var(--papel);
  font: inherit;
}
.form input:focus, .form textarea:focus, .barra-cofre input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.form .botao { margin-top: 1.2rem; }
.form--item {
  margin: 0 0 1.5rem;
  padding: 1.4rem;
  background: var(--ink-2);
  border: 1px solid var(--linha);
  border-radius: 4px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem 1.2rem;
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 3px;
  font: 600 .9rem var(--texto);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.botao:hover { filter: brightness(1.08); }
.botao:disabled { opacity: .5; cursor: wait; }
.botao--linha { background: transparent; color: var(--papel); border-color: var(--linha-forte); }
.botao--linha:hover { border-color: var(--papel-2); filter: none; }
.botao--zap { background: var(--rose); border-color: var(--rose); }
.botao--perigo { background: transparent; color: var(--rose); border-color: var(--rose); margin-left: auto; }
.botao--mini { padding: .35rem .7rem; font-size: .8rem; font-weight: 500; }
.linha-botoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1.2rem; }
.linha-botoes .botao { margin-top: 0; }

.alerta {
  padding: .8rem 1rem;
  border-radius: 3px;
  border: 1px solid var(--rose);
  background: rgba(218, 137, 141, .1);
  color: var(--papel);
  margin: 0 0 1rem;
}
.alerta--info { border-color: var(--linha-forte); background: var(--ink-3); }
.alerta--ok { border-color: var(--verde); background: rgba(143, 197, 160, .1); }

/* ---- pedidos ---- */
.pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pedido {
  padding: 1.2rem 1.3rem;
  background: var(--ink-2);
  border: 1px solid var(--linha);
  border-radius: 4px;
}
.pedido__topo { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pedido__topo strong { font-size: 1.08rem; }
.pedido__topo time { color: var(--suave); font-size: .85rem; }
.pedido__servico { color: var(--gold); margin: .2rem 0 .8rem; }
.pedido dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; font-size: .92rem; }
.pedido dt { color: var(--suave); }
.pedido dd { margin: 0; color: var(--papel-2); overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .pedido dl { grid-template-columns: 1fr; gap: 0; }
  .pedido dd { margin-bottom: .5rem; }
}

/* ---- cofre ---- */
.acoes-cofre { display: flex; gap: .5rem; flex-wrap: wrap; }
.barra-cofre { display: flex; gap: .6rem; margin-bottom: 1.2rem; }
.barra-cofre input { flex: 1; min-width: 0; }
.campo-senha { display: flex; gap: .4rem; }
.campo-senha input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; }
.campo-senha .botao { margin-top: 0; }

.itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.item {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem 1.1rem;
  background: var(--ink-2);
  border: 1px solid var(--linha);
  border-radius: 4px;
}
.item__topo { display: flex; flex-direction: column; }
.item__topo strong { font-size: 1.02rem; }
.item__topo a { font-size: .8rem; color: var(--suave); word-break: break-all; }
.item__linha { display: flex; align-items: center; gap: .4rem; }
.item__valor {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--papel-2);
  font-size: .9rem;
}
.item__senha { font-family: ui-monospace, Consolas, monospace; }
.item__obs { margin: 0; font-size: .85rem; color: var(--suave); white-space: pre-wrap; overflow-wrap: anywhere; }
.item__editar { align-self: flex-start; margin-top: .2rem; }

@media (max-width: 520px) {
  .itens { grid-template-columns: 1fr; }
  .caixa-login { padding: 1.4rem; margin: 1rem auto; }
  .barra-cofre { flex-direction: column; }
}

/* Senhas do cofre: bolinhas por CSS em campo type="text" — assim o navegador
   não oferece salvar a senha na conta do Google. */
.mascarado { -webkit-text-security: disc; }
.mascarado.visivel { -webkit-text-security: none; }
.nota {
  font-size: .85rem;
  color: var(--suave);
  border-left: 2px solid var(--gold);
  padding: .2rem 0 .2rem .8rem;
  margin: 0 0 1.2rem;
}