/* Estilos simples y legibles */
:root{
  --bg:#0f172a;
  --card:#121a35;
  --ink:#e2e8f0;
  --ink-dim:#cbd5e1;
  --accent:#38bdf8;
  --ok:#22c55e;
  --warn:#f59e0b;
}

*{ box-sizing:border-box }

html,body{
  margin:0;
  padding:0;
  background:linear-gradient(180deg,#0b1228,#0f172a 40%,#0b1228);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  line-height:1.4;
}

header{
  padding:2rem 1rem 1rem;
  text-align:center;
}
h1{
  margin:0 0 .25rem 0;
  letter-spacing:.5px;
  font-size:clamp(1.6rem,2.5vw,2.1rem);
}
.sub{
  margin:.25rem auto 0;
  color:var(--ink-dim);
  max-width:60ch;
}

main{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  padding:1rem;
}

section{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:1rem;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

h2{ margin-top:0; font-size:1.1rem }

form{
  display:grid;
  gap:.5rem;
  grid-template-columns: 1fr 1fr;
  align-items:end;
}
form label{ font-size:.9rem; color:var(--ink-dim) }
form input, form select{
  background:#0b1228;
  color:var(--ink);
  border:1px solid rgba(255,255,255,.08);
  outline:none;
  padding:.6rem .7rem;
  border-radius:10px;
}
form button{
  grid-column:1/-1;
}

.acciones{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.75rem;
}

button{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:#0a162c;
  color:var(--ink);
  padding:.55rem .8rem;
  border-radius:12px;
  cursor:pointer;
  transition:transform .06s ease, background .2s ease, border-color .2s ease;
}
button:hover{ background:#0c213f; border-color:rgba(255,255,255,.2) }
button:active{ transform:translateY(1px) }

.lista{
  list-style:none;
  margin:.5rem 0 0 0;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
}
.lista li{
  padding:.6rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:var(--ink-dim);
}
.lista li:last-child{ border-bottom:none }
.lista .tag{
  background:#0b1228;
  border:1px solid rgba(255,255,255,.08);
  padding:.15rem .4rem;
  border-radius:6px;
  font-size:.75rem;
  color:var(--accent);
}

.estado{ color:var(--ok); margin:.5rem 0 0 }
.salida{ margin:.75rem 0 0; color:var(--warn) }

footer{
  text-align:center;
  color:var(--ink-dim);
  padding:1rem;
}