:root {
  --fondo: #f6f7f5;
  --tarjeta: #ffffff;
  --texto: #1d2b22;
  --suave: #5b6b60;
  --borde: #dfe5e0;
  --verde: #1f7a45;
  --verde-claro: #e3f2e8;
  --ambar: #8a5a00;
  --ambar-claro: #fbefd6;
  --gris-claro: #eceeec;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121614;
    --tarjeta: #1b211e;
    --texto: #e6ece8;
    --suave: #9fb0a5;
    --borde: #2c3530;
    --verde: #5cc98a;
    --verde-claro: #1d3326;
    --ambar: #f0c060;
    --ambar-claro: #3a2f16;
    --gris-claro: #2a302d;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 860px; margin: 0 auto; padding: 32px 16px 64px; }
header h1 { margin: 0 0 4px; font-size: 1.8rem; }
header p { margin: 0 0 28px; color: var(--suave); }
a { color: var(--verde); }
.lista { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tarjeta h2 { margin: 0; font-size: 1.15rem; }
.tarjeta p { margin: 0; color: var(--suave); flex: 1; }
.estado { align-self: flex-start; font-size: 0.8rem; padding: 2px 10px; border-radius: 999px; background: var(--gris-claro); color: var(--suave); }
.estado.en-uso { background: var(--verde-claro); color: var(--verde); }
.estado.en-construccion { background: var(--ambar-claro); color: var(--ambar); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.boton {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--verde);
  color: var(--verde);
  text-decoration: none;
  font-size: 0.95rem;
}
.boton.principal { background: var(--verde); color: var(--fondo); }
.volver { display: inline-block; margin-bottom: 20px; }
.notas { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 8px 24px 24px; }
.notas h1 { font-size: 1.6rem; }
.notas h2 { font-size: 1.2rem; margin-top: 28px; border-bottom: 1px solid var(--borde); padding-bottom: 4px; }
.notas blockquote { margin: 0; padding: 8px 14px; border-left: 4px solid var(--verde); background: var(--verde-claro); border-radius: 6px; }
.notas code { background: var(--gris-claro); padding: 1px 5px; border-radius: 4px; }
.aviso { color: var(--suave); }
#acciones:not(:empty) { margin-bottom: 16px; }