:root {
  --color-primary: #0F3D24;
  --color-primary-dark: #0A2C19;
  --color-accent: #C9A227;
  --color-accent-dark: #A3841F;
}

body { font-family: system-ui, sans-serif; max-width: 640px; margin: 2rem auto; padding: 0 1rem; color: #1a1a1a; }

h1 { color: var(--color-primary); }

a { color: var(--color-primary); }
a:hover { color: var(--color-accent-dark); }

.site-header { display: flex; align-items: center; gap: 0.75rem; border-bottom: 3px solid var(--color-accent); padding-bottom: 0.75rem; margin-bottom: 1.5rem; }
.site-header img { height: 56px; width: auto; }
.site-header h1 { margin: 0; }

.step { margin-bottom: 2rem; }
.recipient-cards { display: flex; gap: 1rem; }
.recipient-card { flex: 1; border: 2px solid var(--color-accent); background: none; border-radius: 8px; padding: 1rem; cursor: pointer; text-align: center; }
.recipient-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.recipient-card.selected { border-color: var(--color-primary); background: #eef4ea; }

textarea { width: 100%; }

button, input[type="submit"] {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
}
button:hover, input[type="submit"]:hover,
button:focus-visible, input[type="submit"]:focus-visible {
  background: var(--color-primary-dark);
}

#enviar { padding: 0.75rem 1.5rem; font-size: 1rem; }

input[type="radio"], input[type="checkbox"] { accent-color: var(--color-primary); }

table { border-collapse: collapse; width: 100%; }
thead { background: var(--color-primary); color: #fff; }
th, td { padding: 0.5rem 0.75rem; text-align: left; }
tbody tr:hover { background: #faf3dd; }

p[role="alert"] { color: #b3261e; }
p[role="status"] { color: var(--color-primary); }