/* ============================================
   Iza Fotografia — base compartilhada
   ============================================ */
:root {
  --marrom: #7a5c3e;
  --marrom-escuro: #5d452e;
  --dourado: #c9a227;
  --creme: #faf7f2;
  --areia: #f0e9df;
  --borda: #e3d9cb;
  --texto: #3d342a;
  --texto-suave: #8a7a66;
  --verde: #2e7d4f;
  --vermelho: #b3432b;
  --whatsapp: #25d366;
  --sombra: 0 2px 14px rgba(61, 52, 42, .08);
  --raio: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--creme);
  color: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; color: var(--marrom-escuro); font-weight: 700; }

a { color: var(--marrom); }

/* ── Botões ── */
.btn {
  display: inline-block;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: var(--marrom);
  color: #fff;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-secundario { background: var(--areia); color: var(--marrom-escuro); }
.btn-perigo { background: var(--vermelho); }
.btn-verde { background: var(--verde); }
.btn-whatsapp { background: var(--whatsapp); }
.btn-pequeno { padding: 5px 12px; font-size: 12.5px; border-radius: 6px; }
.btn-grande { padding: 14px 30px; font-size: 16px; }

/* ── Formulários ── */
label { display: block; font-size: 13px; font-weight: 600; color: var(--texto-suave); margin: 12px 0 4px; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--texto);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--marrom);
  box-shadow: 0 0 0 3px rgba(122, 92, 62, .12);
}
textarea { resize: vertical; min-height: 90px; }

/* ── Cartões / tabelas ── */
.cartao {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 22px;
  box-shadow: var(--sombra);
}
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  padding: 8px 10px;
  border-bottom: 2px solid var(--borda);
}
.tabela td { padding: 10px; border-bottom: 1px solid var(--areia); vertical-align: middle; }
.tabela tr:hover td { background: var(--creme); }

/* ── Badges de status ── */
.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-cinza    { background: var(--areia); color: var(--texto-suave); }
.badge-azul     { background: #e3edf7; color: #2d5d8f; }
.badge-verde    { background: #e2f2e8; color: var(--verde); }
.badge-vermelho { background: #f9e5e0; color: var(--vermelho); }
.badge-dourado  { background: #f7efd8; color: #8b6914; }

/* ── Modal ── */
.modal-fundo {
  position: fixed; inset: 0;
  background: rgba(40, 32, 24, .5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 100;
}
.modal {
  background: #fff;
  border-radius: var(--raio);
  padding: 26px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.modal h3 { margin-bottom: 6px; }
.modal-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* ── Toast ── */
#toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--marrom-escuro);
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  z-index: 200;
  max-width: 90vw;
}
#toast.visivel { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.erro { background: var(--vermelho); }

/* ── Utilidades ── */
.linha { display: flex; gap: 14px; flex-wrap: wrap; }
.linha > * { flex: 1; min-width: 140px; }
.mt { margin-top: 16px; }
.suave { color: var(--texto-suave); font-size: 13px; }
.centro { text-align: center; }
.vazio { text-align: center; color: var(--texto-suave); padding: 36px 12px; font-size: 14px; }