* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f4f5f7;
  color: #1c1f24;
}
main { max-width: 640px; margin: 0 auto; padding: 2rem 1rem 4rem; }
h1 { font-size: 1.6rem; margin: 0 0 1.2rem; color: #15803d; }
form { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
textarea, button {
  font: inherit;
  border-radius: 8px;
  border: 1px solid #d3d7de;
  padding: .7rem;
}
textarea { resize: vertical; background: #fff; }
textarea:focus { outline: none; border-color: #15803d; box-shadow: 0 0 0 3px rgba(21,128,61,.18); }
button {
  cursor: pointer;
  border: none;
  background: #15803d;
  color: #fff;
  font-weight: 600;
  padding: .7rem 1rem;
}
button:hover { background: #126b33; }
.estado { min-height: 1.2rem; margin: 0 0 1rem; font-size: .9rem; color: #b42318; }
ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
li {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: .9rem 1rem;
}
.texto { white-space: pre-wrap; word-break: break-word; margin-bottom: .5rem; }
.meta { display: flex; align-items: center; gap: .8rem; font-size: .78rem; color: #6b7280; }
.meta button {
  background: none;
  color: #15803d;
  padding: 0;
  font-weight: 500;
  font-size: .78rem;
}
.meta button:hover { background: none; text-decoration: underline; }
.meta .borrar { color: #b42318; }
.meta time { margin-right: auto; }
.vacio { color: #6b7280; font-size: .95rem; }