:root {
  --bg: #f4f5f7; --surface: #fff; --border: #d9dce1;
  --text: #1f2430; --muted: #6b7280;
  --accent: #3b5bdb; --accent-weak: #e7ebfb; --danger: #c0392b;
  --radius: 8px;
}
* { box-sizing: border-box; }

body {
  margin: 0; padding: 2rem 1rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text); background: var(--bg); line-height: 1.45;
}
body > * { max-width: 900px; margin-inline: auto; }
h1 { font-size: 1.6rem; margin: 0; }

/* Header */
header {
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
header span { margin-left: auto; color: var(--muted); font-size: .9rem; }

/* Botones */
button {
  font: inherit; padding: .4rem .8rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: background .12s, border-color .12s;
}
button:hover { background: var(--accent-weak); border-color: var(--accent); }
button[hx-delete] { color: var(--danger); }               /* hook por atributo HTMX: cero clases */
button[hx-delete]:hover { background: #fdecea; border-color: var(--danger); }

section { margin-bottom: 1.5rem; }

/* Inputs (globales: sirven login y form de alta) */
input[type="text"], input[type="number"], input[type="password"], select {
  width: 100%; padding: .45rem .55rem; font: inherit;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
form[action="/login"] { max-width: 320px; }               /* login estrecho sin tocar plantilla */

/* Panel del formulario (fragmento inyectado) */
#form-container:not(:empty) {
  max-width: 480px; margin-top: 1rem; padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
#form-container form > div { margin-bottom: .75rem; }
#form-container label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
#form-container label:has(input[type="checkbox"]) {
  display: inline-flex; align-items: center; gap: .4rem; color: var(--text);
}
#form-container label:has(input[type="checkbox"]) input { width: auto; }

/* Tabla */
table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
th, td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--border); }
thead th {
  background: #eef0f4; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted);
}
tbody tr:hover { background: #f8f9fb; }
tbody tr:last-child td { border-bottom: none; }
td[colspan] { text-align: center; color: var(--muted); font-style: italic; }