/* ==========================================================================
   Painel administrativo — área da noiva
   ========================================================================== */

body.admin { background: #FDF8F9; }

/* ------------------------------------------------------- telas de acesso */

.tela-acesso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(900px 520px at 15% -10%, var(--rosa-100) 0%, transparent 60%),
    radial-gradient(700px 460px at 88% 8%, #FFE9EF 0%, transparent 58%),
    var(--rosa-bg);
}

.caixa-acesso {
  background: #fff;
  border: 1px solid var(--rosa-100);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  padding: 2.5rem 2rem;
  width: min(100%, 400px);
  text-align: center;
}

.acesso-script {
  font-family: var(--fonte-script);
  font-size: 2.4rem;
  color: var(--pink);
  line-height: 1;
  margin-bottom: .35rem;
}

.caixa-acesso h1 {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  color: var(--vinho);
  margin: 0 0 .4rem;
}

.caixa-acesso > p {
  color: var(--tinta-suave);
  font-size: .92rem;
  margin: 0 0 1.6rem;
}

.caixa-acesso form { text-align: left; }

.acesso-voltar { margin: 1.4rem 0 0; font-size: .85rem; }
.acesso-voltar a { color: var(--tinta-suave); text-decoration: none; }
.acesso-voltar a:hover { color: var(--pink); }

/* -------------------------------------------------------------- cabeçalho */

.admin-topo {
  background: #fff;
  border-bottom: 1px solid var(--rosa-100);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 3px rgba(142, 29, 63, .05);
}

.admin-topo-inner {
  width: min(100% - 2.5rem, 1280px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .8rem 0;
  flex-wrap: wrap;
}

.admin-marca { display: flex; align-items: center; gap: .7rem; }
.admin-marca img { border-radius: 9px; }
.admin-marca strong {
  display: block;
  font-family: var(--fonte-titulo);
  color: var(--vinho);
  font-size: 1rem;
  line-height: 1.2;
}
.admin-marca span { font-size: .78rem; color: var(--tinta-suave); }

.admin-nav { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.admin-nav a {
  padding: .5rem .95rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--tinta-suave);
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.admin-nav a:hover { background: var(--rosa-50); color: var(--pink); }
.admin-nav a.ativo { background: var(--pink); color: #fff; }
.admin-nav a.sair { color: var(--tinta-suave); }
.admin-nav a.sair:hover { background: #FFF0F2; color: var(--pink-escuro); }

/* ------------------------------------------------------------- conteúdo */

.admin-main {
  width: min(100% - 2.5rem, 1280px);
  margin-inline: auto;
  padding: 1.75rem 0 4rem;
}

.ok-msg {
  background: #EDF9F3;
  border-left: 3px solid var(--verde);
  color: #1E6B51;
  border-radius: 10px;
  padding: .75rem 1rem;
  font-size: .9rem;
  margin-bottom: 1.25rem;
}
.erro-msg a { color: inherit; font-weight: 600; }

/* ---------------------------------------------------------------- cartões */

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.cartao {
  background: #fff;
  border: 1px solid var(--rosa-100);
  border-radius: var(--raio);
  padding: 1.15rem 1.3rem;
  box-shadow: var(--sombra-sm);
}
.cartao-rotulo {
  display: block;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-weight: 600;
  margin-bottom: .35rem;
}
.cartao-valor {
  font-family: var(--fonte-titulo);
  font-size: 1.75rem;
  color: var(--vinho);
  line-height: 1.15;
}
.cartao-valor small { font-size: .95rem; color: var(--tinta-suave); font-family: var(--fonte-texto); font-weight: 400; }

/* ----------------------------------------------------------------- blocos */

.bloco {
  background: #fff;
  border: 1px solid var(--rosa-100);
  border-radius: var(--raio-lg);
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--sombra-sm);
}

.bloco h2 {
  font-family: var(--fonte-titulo);
  font-size: 1.22rem;
  color: var(--vinho);
  margin: 0 0 .35rem;
}

.bloco-ajuda {
  color: var(--tinta-suave);
  font-size: .89rem;
  margin: 0 0 1.35rem;
  max-width: 52rem;
}

.bloco h2 + .grade-form,
.bloco h2 + .tabela-rolagem,
.bloco h2 + .lista-produtos,
.bloco h2 + form { margin-top: 1.25rem; }

.vazio {
  color: var(--tinta-suave);
  font-size: .92rem;
  background: var(--rosa-50);
  border: 1px dashed var(--rosa-200);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  margin: 1rem 0 0;
}

/* ---------------------------------------------------------------- tabelas */

.tabela-rolagem { overflow-x: auto; margin-inline: -.4rem; padding-inline: .4rem; }

.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; }

.tabela th {
  text-align: left;
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-weight: 600;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--rosa-100);
  white-space: nowrap;
}

.tabela td {
  padding: .8rem .7rem;
  border-bottom: 1px solid #F7EDF0;
  vertical-align: middle;
}

.tabela tbody tr:hover { background: #FFFAFB; }
.tabela tr.linha-alerta { background: #FFFBF0; }
.tabela tr.apagada { opacity: .55; }

.tabela .valor { font-weight: 600; color: var(--pink); white-space: nowrap; }
.tabela .quando { color: var(--tinta-suave); font-size: .84rem; white-space: nowrap; }
.tabela .recado { max-width: 22rem; color: var(--tinta-suave); font-size: .86rem; }
.tabela .cinza { color: #C9B3B9; }
.tabela .acoes { white-space: nowrap; }
.tabela .acoes form { display: inline-block; margin-right: .3rem; }

.txid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem;
  background: var(--rosa-50);
  padding: .2rem .45rem;
  border-radius: 6px;
  color: var(--tinta-suave);
}

.linha-form { display: inline-flex; gap: .35rem; align-items: center; }
.linha-form input[type="text"] {
  border: 1.5px solid var(--rosa-100);
  border-radius: 9px;
  padding: .35rem .6rem;
  font-size: .84rem;
  width: 11rem;
}
.linha-form input:focus { outline: 0; border-color: var(--rosa-300); }

/* ------------------------------------------------------------- etiquetas */

.etiqueta {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: 999px;
  background: var(--rosa-100);
  color: var(--vinho);
  vertical-align: middle;
}
.etiqueta.ok    { background: #E4F5EC; color: #1E6B51; }
.etiqueta.alerta{ background: #FDF0D5; color: #8A6410; }

/* -------------------------------------------------------- botões pequenos */

.mini {
  display: inline-block;
  border: 1.5px solid var(--rosa-100);
  background: #fff;
  color: var(--tinta);
  border-radius: 9px;
  padding: .38rem .8rem;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all .18s ease;
}
.mini:hover { border-color: var(--pink); color: var(--pink); }
.mini.perigo:hover { border-color: var(--pink-escuro); color: var(--pink-escuro); background: #FFF5F7; }
.mini.fantasma { border-color: transparent; color: var(--tinta-suave); }
.mini.fantasma:hover { color: var(--pink-escuro); background: #FFF5F7; }

/* ------------------------------------------------------------ formulários */

.grade-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1.1rem;
}
.grade-form .col-2 { grid-column: span 2; }
.grade-form .col-3 { grid-column: 1 / -1; }

.campo-check { display: flex; flex-direction: column; justify-content: center; }

.check {
  display: inline-flex !important;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
}
.check input { width: 18px; height: 18px; accent-color: var(--pink); cursor: pointer; }

.form-acoes {
  display: flex;
  gap: .6rem;
  align-items: center;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rosa-100);
  flex-wrap: wrap;
}

.previa-atual {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--rosa-50);
  border-radius: 12px;
  padding: .7rem .9rem;
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--tinta-suave);
}
.previa-atual img { width: 58px; height: 58px; object-fit: cover; border-radius: 9px; }

/* ------------------------------------------------------- prévia do Pix */

.previa-pix {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  background: linear-gradient(135deg, var(--rosa-50), #fff);
  border: 1px solid var(--rosa-100);
  border-radius: var(--raio);
  padding: 1.15rem;
  margin-top: 1.35rem;
  flex-wrap: wrap;
}
.previa-qr {
  width: 148px;
  flex: none;
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: var(--sombra-sm);
}
.previa-qr svg { width: 100%; height: auto; display: block; }
.previa-txt { flex: 1; min-width: 15rem; }
.previa-txt strong { display: block; color: var(--vinho); font-family: var(--fonte-titulo); font-size: 1.05rem; margin-bottom: .3rem; }
.previa-txt p { margin: 0; font-size: .87rem; color: var(--tinta-suave); }

.qr-enviado {
  width: 130px;
  border-radius: 12px;
  border: 1px solid var(--rosa-100);
  padding: 6px;
  background: #fff;
}

/* --------------------------------------------------------- lista produtos */

.lista-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: .85rem;
}

.item-produto {
  display: flex;
  align-items: center;
  gap: .9rem;
  border: 1px solid var(--rosa-100);
  border-radius: var(--raio);
  padding: .7rem;
  background: #fff;
  transition: border-color .18s ease;
}
.item-produto:hover { border-color: var(--rosa-200); }
.item-produto.inativo { opacity: .55; }

.item-produto img {
  width: 62px; height: 62px;
  object-fit: cover;
  border-radius: 11px;
  flex: none;
  background: var(--rosa-50);
}

.item-info { flex: 1; min-width: 0; }
.item-info strong {
  display: block;
  font-size: .93rem;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-preco { font-size: .86rem; color: var(--pink); font-weight: 600; }
.item-tags { margin-top: .25rem; display: flex; gap: .3rem; flex-wrap: wrap; }

.item-acoes { display: flex; flex-direction: column; gap: .3rem; flex: none; }

/* ------------------------------------------------------------ responsivo */

@media (max-width: 780px) {
  .grade-form { grid-template-columns: repeat(2, 1fr); }
  .grade-form .col-2, .grade-form .col-3 { grid-column: 1 / -1; }
  .admin-topo-inner { padding: .7rem 0; }
  .admin-nav { width: 100%; overflow-x: auto; }
}

@media (max-width: 520px) {
  .grade-form { grid-template-columns: 1fr; }
  .bloco { padding: 1.25rem 1.1rem; }
  .admin-main { width: min(100% - 1.5rem, 1280px); }
  .cartao-valor { font-size: 1.45rem; }
}