:root { --verde: #2f6f4f; --texto: #1d1d1d; --suave: #666; --fondo: #fff; --borde: #ddd; }
@media (prefers-color-scheme: dark) {
  :root { --verde: #7cc39d; --texto: #eee; --suave: #aaa; --fondo: #121212; --borde: #333; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: var(--texto); background: var(--fondo); }
main, .barra { padding: 16px; max-width: 520px; margin: 0 auto; }
.barra { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--borde); }
h1 { margin: 0; font-size: 1.4rem; }
.fecha { color: var(--suave); text-transform: capitalize; }
.vacio { color: var(--suave); }
.entrar { display: flex; flex-direction: column; gap: 12px; padding-top: 15vh; }
.entrar form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; }
input { font-size: 1rem; padding: 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); color: var(--texto); }
button { font-size: 1rem; padding: 12px; border: 0; border-radius: 8px; background: var(--verde); color: #fff; }
button.enlace { background: none; color: var(--verde); padding: 4px; }
.error { color: #b3261e; }