:root {
  --verde:       #4a5d32;
  --verde-claro: #6b8047;
  --dorado:      #c9a063;
  --crema:       #faf8f4;
  --tinta:       #2b3320;
  --borde:       #ddd7ca;
  --error:       #a33;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1.25rem;
  background: var(--verde);
  color: var(--crema);
  border-bottom: 3px solid var(--dorado);
}
header img { height: 2rem; display: block; }
header nav { display: flex; gap: 1rem; align-items: center; }
header a { color: var(--crema); text-decoration: none; border-bottom: 1px solid transparent; }
header a:hover { border-bottom-color: var(--dorado); }
/* "Salir" es un boton porque va por POST, pero se lee como el resto del nav. */
header form { margin: 0; }
header form button {
  padding: 0; font-weight: 400;
  background: none; color: var(--crema);
  border-bottom: 1px solid transparent; border-radius: 0;
}
header form button:hover { background: none; border-bottom-color: var(--dorado); }

main { padding: 1.5rem; max-width: 60rem; margin: 0 auto; }
h1 { color: var(--verde); font-weight: 500; letter-spacing: .02em; }

.tarjeta {
  max-width: 22rem; margin: 3rem auto; display: grid; gap: 1rem;
  padding: 2rem; background: #fff;
  border: 1px solid var(--borde); border-top: 3px solid var(--dorado);
  border-radius: .5rem; box-shadow: 0 1px 3px rgb(0 0 0 / .06);
}
.tarjeta img { width: 8rem; margin: 0 auto .5rem; display: block; }
.tarjeta label { display: grid; gap: .25rem; font-size: .9rem; color: var(--verde); }

input {
  padding: .55rem; font: inherit;
  border: 1px solid var(--borde); border-radius: .25rem; background: #fff;
}
input:focus { outline: 2px solid var(--verde-claro); outline-offset: 1px; }

button {
  padding: .6rem; font: inherit; font-weight: 500; cursor: pointer;
  background: var(--verde); color: var(--crema);
  border: none; border-radius: .25rem;
}
button:hover { background: var(--verde-claro); }

.error { color: var(--error); margin: 0; font-size: .9rem; }