* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; background: #0f172a; color: #e2e8f0; }
a { color: inherit; text-decoration: none; }
.header { padding: 16px 24px; border-bottom: 1px solid #334155; background: #0b1220; position: sticky; top: 0; }
.title { margin: 0; font-size: 20px; }
.container { max-width: 980px; margin: 24px auto; padding: 0 16px; }
.card { background: #111827; padding: 20px; border: 1px solid #374151; border-radius: 14px; box-shadow: 0 10px 22px rgba(0,0,0,0.35); margin-bottom: 16px; }
.form-group { margin-bottom: 12px; }
.input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #374151; background: #0b1220; color: #e2e8f0; }
.btn { display: inline-block; padding: 10px 16px; background: #2563eb; border: 0; border-radius: 10px; color: white; cursor: pointer; font-weight: 600; }
.btn:hover { filter: brightness(1.1); }
.btn-secondary { background: #64748b; }
.flash { margin-bottom: 12px; }
.flash-item { padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; }
.flash-item.success { background: #14532d; }
.flash-item.danger { background: #7f1d1d; }
.flash-item.info { background: #1e293b; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.link-card { transition: transform .1s ease-in-out, box-shadow .2s; }
.link-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.4); }
.footer { border-top: 1px solid #334155; padding: 12px 24px; text-align: center; color: #94a3b8; }
.error { color: #fecaca; font-size: 14px; }
@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; }
}
.table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.table th, .table td { border-bottom: 1px solid #334155; padding: 8px; text-align: left; }
.table thead th { background: #0b1220; }
.crumb, .crumb-active { margin-right: 4px; }
.progress {
  width: 100%;
  height: 14px;
  background: #0b1220;
  border: 1px solid #334155;
  border-radius: 10px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: #2563eb;
  width: 0%;
  transition: width .3s ease;
}
.title-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.title-link:hover {
  text-decoration: underline;
}

/* Header layout */
.header { position: sticky; top: 0; z-index: 20; background: #0b1220; }
.header-inner { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.title { margin: 0; font-size: 20px; }
.title-link { color: #e2e8f0; text-decoration: none; }
.title-link:hover { text-decoration: underline; }

/* Right actions */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Chip button (Usuarios) */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #111827; border: 1px solid #334155;
  padding: 6px 10px; border-radius: 999px;
  color: #e2e8f0; text-decoration: none; line-height: 1;
  transition: background .15s ease, transform .05s ease, border-color .15s ease;
}
.chip:hover { background: #0f172a; border-color: #475569; }
.chip:active { transform: translateY(1px); }
.chip-icon { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Logout más discreto en header */
.btn.subtle { background: transparent; border-color: #334155; }
.btn.subtle:hover { background: #0f172a; }