/* ============================================================
   Nosso Casamento — folha de estilo única
   Paleta: marfim/areia claro, acento castanho-areia suave.
   Sem gradiente, sem roxo. Tema claro apenas.
   ============================================================ */

:root {
  /* superfícies */
  --fundo:        #F7F2EA;
  --surf-1:       #FFFDFA;
  --surf-2:       #F1EAE0;
  --surf-3:       #E8DFD1;
  --borda:        #E2D8C8;
  --borda-forte:  #CFC0A8;

  /* tinta */
  --tinta:        #2E2A24;
  --tinta-media:  #625A4C;
  --tinta-suave:  #8F8571;

  /* acento único */
  --acento:        #A98F73;
  --acento-escuro: #8B7256;
  --acento-claro:  #EFE6D8;

  /* semânticos */
  --ok:           #5B7455;
  --ok-fundo:     #EAF0E5;
  --ok-borda:     #C9D9BC;
  --alerta:       #A24B3C;
  --alerta-fundo: #F8E9E4;
  --alerta-borda: #E5C1B4;
  --atencao:      #8C6B2E;
  --atencao-fundo:#F6EDD9;
  --atencao-borda:#E3D0A0;

  /* status de convidado */
  --st-a_convidar:      #9A9080;
  --st-convite_enviado: #8B7256;
  --st-confirmado:      #5B7455;
  --st-recusou:         #A24B3C;
  --st-sem_resposta:    #7C8C97;

  /* status de fornecedor */
  --sf-pesquisando:        #9A9080;
  --sf-orcamento_pedido:   #8B7256;
  --sf-orcamento_recebido: #7C8C97;
  --sf-contratado:         #5B7455;
  --sf-descartado:         #A24B3C;

  /* status de ideia */
  --si-aprovada:     #5B7455;
  --si-recusada:     #A24B3C;
  --si-em_discussao: #8C6B2E;

  /* lados / gerações da árvore */
  --lado-noiva: #B0788C;
  --lado-noivo: #6E8AA0;
  --lado-ambos: #A98F73;

  --raio:   12px;
  --raio-s: 8px;
  --sombra: 0 1px 2px rgba(46, 42, 36, .05), 0 6px 18px rgba(46, 42, 36, .05);

  --serifa: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans:  -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fundo);
}

h1, h2, h3 { font-family: var(--serifa); font-weight: 500; color: var(--tinta); margin: 0 0 .3em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }

a { color: var(--acento-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  background: var(--surf-2); padding: .1em .4em; border-radius: 5px;
  font-size: .9em; color: var(--tinta-media);
}

.pequeno { font-size: .85rem; }
.suave { color: var(--tinta-suave); }
.mt { margin-top: 1rem; }
.vazio { color: var(--tinta-suave); font-style: italic; }

/* ------------------------------------------------------------------ topo -- */
.topo {
  background: var(--surf-1); border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 20;
}
.topo__interno {
  max-width: 1180px; margin: 0 auto; padding: .7rem 1.2rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.marca { font-family: var(--serifa); font-size: 1.15rem; color: var(--tinta); white-space: nowrap; }
.marca span { color: var(--acento); }
.marca:hover { text-decoration: none; }

.menu { display: flex; gap: .3rem; flex-wrap: wrap; flex: 1; }
.menu a {
  padding: .4rem .7rem; border-radius: var(--raio-s); color: var(--tinta-media);
  font-size: .92rem; position: relative; white-space: nowrap;
}
.menu a:hover { background: var(--surf-2); text-decoration: none; }
.menu a.ativo { background: var(--acento-claro); color: var(--acento-escuro); font-weight: 600; }

.pilula {
  display: inline-block; margin-left: .35rem; background: var(--alerta); color: #fff;
  font-size: .7rem; font-weight: 700; padding: .05em .4em; border-radius: 999px;
}

.menu-usuario { display: flex; gap: .8rem; align-items: center; margin-left: auto; }

/* ------------------------------------------------------------------ envelope -- */
.envelope { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.2rem 4rem; }
.envelope--estreito { max-width: 760px; }

.cabecalho-pagina { margin-bottom: 1.3rem; }
.cabecalho-pagina.entre { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ cartão -- */
.cartao {
  background: var(--surf-1); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.3rem 1.4rem; box-shadow: var(--sombra);
}
.cartao__titulo { margin: 0 0 .9rem; font-size: 1.05rem; }

.grade { display: grid; gap: 1.1rem; }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .grade--2, .grade--3, .grade--4 { grid-template-columns: 1fr; }
}

.pilha { display: flex; flex-direction: column; }
.pilha-linha { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ formulário -- */
.campo-bloco { margin-bottom: .9rem; }
.rotulo { display: block; font-size: .82rem; font-weight: 600; color: var(--tinta-media); margin-bottom: .3rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="tel"], input[type="url"], input[type="search"],
select, textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-s);
  background: var(--surf-1); color: var(--tinta); font-size: .95rem; font-family: inherit;
}
textarea { resize: vertical; min-height: 4.5em; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro);
}

.check { display: flex; align-items: center; gap: .45rem; font-size: .9rem; cursor: pointer; }
.check input { width: auto; }

/* ------------------------------------------------------------------ botões -- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-s); background: var(--surf-1);
  color: var(--tinta); font-size: .9rem; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surf-2); text-decoration: none; }
.btn--principal { background: var(--acento); border-color: var(--acento-escuro); color: #fff; }
.btn--principal:hover { background: var(--acento-escuro); }
.btn--pequeno { padding: .35rem .7rem; font-size: .82rem; }
.btn--perigo { border-color: var(--alerta-borda); color: var(--alerta); }
.btn--perigo:hover { background: var(--alerta-fundo); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ativo { background: var(--acento-claro); border-color: var(--acento); color: var(--acento-escuro); font-weight: 600; }

/* ------------------------------------------------------------------ avisos -- */
.aviso { padding: .8rem 1rem; border-radius: var(--raio-s); border: 1px solid; font-size: .9rem; }
.aviso--ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok); }
.aviso--erro { background: var(--alerta-fundo); border-color: var(--alerta-borda); color: var(--alerta); }
.aviso--atencao { background: var(--atencao-fundo); border-color: var(--atencao-borda); color: var(--atencao); }

/* ------------------------------------------------------------------ badges -- */
.badge {
  display: inline-block; padding: .15em .6em; border-radius: 999px; font-size: .78rem;
  font-weight: 600; color: #fff; white-space: nowrap;
}
.status-convidado-a_convidar      { background: var(--st-a_convidar); }
.status-convidado-convite_enviado { background: var(--st-convite_enviado); }
.status-convidado-confirmado      { background: var(--st-confirmado); }
.status-convidado-recusou         { background: var(--st-recusou); }
.status-convidado-sem_resposta    { background: var(--st-sem_resposta); }

.status-fornecedor-pesquisando        { background: var(--sf-pesquisando); }
.status-fornecedor-orcamento_pedido   { background: var(--sf-orcamento_pedido); }
.status-fornecedor-orcamento_recebido { background: var(--sf-orcamento_recebido); }
.status-fornecedor-contratado         { background: var(--sf-contratado); }
.status-fornecedor-descartado         { background: var(--sf-descartado); }

.status-ideia-aprovada     { background: var(--si-aprovada); }
.status-ideia-recusada     { background: var(--si-recusada); }
.status-ideia-em_discussao { background: var(--si-em_discussao); }

.tag-lado { display: inline-block; padding: .1em .55em; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #fff; }
.tag-lado-noiva { background: var(--lado-noiva); }
.tag-lado-noivo { background: var(--lado-noivo); }
.tag-lado-ambos { background: var(--lado-ambos); }

/* ------------------------------------------------------------------ tabela -- */
.rolagem-x { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { padding: .55rem .6rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; }
.tabela th { color: var(--tinta-suave); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }
.tabela .num { text-align: right; }
.tabela tbody tr:hover { background: var(--surf-2); }
.tabela input, .tabela select { font-size: .85rem; padding: .3rem .45rem; }

/* ------------------------------------------------------------------ contadores -- */
.contadores { display: flex; gap: .6rem; flex-wrap: wrap; }
.contador {
  flex: 1; min-width: 90px; text-align: center; padding: .7rem .5rem; border-radius: var(--raio-s);
  background: var(--surf-2); color: inherit;
}
.contador:hover { background: var(--acento-claro); text-decoration: none; }
.contador__n { display: block; font-size: 1.4rem; font-weight: 700; font-family: var(--serifa); }
.contador__r { display: block; font-size: .72rem; color: var(--tinta-suave); }

/* ------------------------------------------------------------------ barra de progresso -- */
.barra { height: 10px; background: var(--surf-3); border-radius: 999px; overflow: hidden; }
.barra--fina { height: 6px; }
.barra__preenchida { height: 100%; background: var(--acento); border-radius: 999px; }
.barra__preenchida--falhou { background: var(--alerta); }

/* ------------------------------------------------------------------ diálogo -- */
dialog.dialogo {
  border: none; border-radius: var(--raio); padding: 1.5rem; box-shadow: var(--sombra);
  max-width: 560px; width: 92vw; background: var(--surf-1); color: var(--tinta);
}
dialog.dialogo::backdrop { background: rgba(46, 42, 36, .35); }
.dialogo__acoes { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }

/* ------------------------------------------------------------------ toast -- */
#toast {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--tinta); color: var(--surf-1); padding: .7rem 1.1rem; border-radius: var(--raio-s);
  font-size: .88rem; box-shadow: var(--sombra); transition: transform .25s ease; z-index: 100; max-width: 90vw;
}
#toast.mostrar { transform: translateX(-50%) translateY(0); }
#toast.erro { background: var(--alerta); }

/* ------------------------------------------------------------------ cards de item (fornecedores/ideias) -- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.item-cartao {
  background: var(--surf-1); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1rem 1.1rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .5rem;
}
.item-cartao img { width: 100%; border-radius: var(--raio-s); object-fit: cover; max-height: 160px; }
.item-cartao__titulo { font-family: var(--serifa); font-size: 1.05rem; }
.item-cartao__meta { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ legenda de gráfico -- */
.legenda-grafico { display: flex; flex-direction: column; gap: .4rem; }
.legenda-grafico__item { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.legenda-grafico__cor { width: .75rem; height: .75rem; border-radius: 3px; flex-shrink: 0; }

/* ------------------------------------------------------------------ árvore -- */
.arvore-wrap {
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--surf-1);
  overflow: hidden; box-shadow: var(--sombra); position: relative;
}
.arvore-svg { width: 100%; height: 70vh; min-height: 420px; display: block; cursor: grab; touch-action: none; }
.arvore-svg.arrastando { cursor: grabbing; }
.arvore-toolbar {
  position: absolute; top: .8rem; right: .8rem; display: flex; gap: .4rem; background: var(--surf-1);
  padding: .3rem; border-radius: var(--raio-s); box-shadow: var(--sombra);
}
.arvore-legenda {
  position: absolute; bottom: .8rem; left: .8rem; background: var(--surf-1); padding: .5rem .7rem;
  border-radius: var(--raio-s); box-shadow: var(--sombra); font-size: .78rem; display: flex; gap: .7rem; flex-wrap: wrap;
}
.arvore-legenda span { display: inline-flex; align-items: center; gap: .3rem; }
.arvore-legenda i { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }

/* ------------------------------------------------------------------ responsivo -- */
@media (max-width: 640px) {
  .topo__interno { gap: .8rem; }
  .menu { order: 3; width: 100%; }
  .envelope { padding: 1rem .8rem 3rem; }
  h1 { font-size: 1.4rem; }
  .cartao { padding: 1rem 1.1rem; }
}