:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #f4f7fb;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f4f7fb; }
.container { width: min(1100px, 94%); margin: 28px auto; }
.header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.header h1 { margin:0; font-size:clamp(1.6rem,4vw,2.25rem); }
.header p { margin:6px 0 0; color:#64748b; }
.card { background:white; border:1px solid #e5e7eb; border-radius:16px; padding:20px; box-shadow:0 8px 30px rgba(15,23,42,.05); margin-bottom:18px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.full { grid-column:1/-1; }
label { display:block; font-weight:700; font-size:.9rem; margin-bottom:6px; }
input, select, textarea { width:100%; padding:11px 12px; border:1px solid #cbd5e1; border-radius:10px; font:inherit; background:#fff; }
textarea { min-height:86px; resize:vertical; }
button, .button { border:0; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.primary { background:#2563eb; color:white; }
.secondary { background:#e2e8f0; color:#1e293b; }
.danger { background:#fee2e2; color:#991b1b; }
.success { background:#dcfce7; color:#166534; }
.actions { display:flex; flex-wrap:wrap; gap:8px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.filters a { padding:8px 12px; border-radius:999px; background:#e2e8f0; color:#334155; text-decoration:none; font-weight:700; font-size:.9rem; }
.filters a.active { background:#2563eb; color:white; }
.task { border:1px solid #e5e7eb; border-radius:14px; padding:16px; margin-bottom:12px; }
.task-top { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.task h3 { margin:0 0 6px; }
.meta { color:#64748b; font-size:.92rem; line-height:1.55; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:.78rem; font-weight:800; margin-right:5px; }
.baja { background:#e0f2fe; color:#075985; }
.media { background:#fef3c7; color:#92400e; }
.alta { background:#fed7aa; color:#9a3412; }
.urgente { background:#fee2e2; color:#991b1b; }
.realizada { opacity:.72; }
.alert { border-radius:12px; padding:12px 14px; margin-bottom:16px; font-weight:700; }
.alert-ok { background:#dcfce7; color:#166534; }
.alert-error { background:#fee2e2; color:#991b1b; }
.login { width:min(430px,92%); margin:12vh auto; }
.small { font-size:.85rem; color:#64748b; }
.empty { text-align:center; color:#64748b; padding:26px; }
@media (max-width:720px) {
  .grid { grid-template-columns:1fr; }
  .full { grid-column:auto; }
  .header, .task-top { flex-direction:column; align-items:stretch; }
  .actions button, .actions .button { width:100%; }
}