/* Componentes shared: btn, field, card, table, badge, modal, toast, spinner */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-2);
  padding: 10px 20px; border: none; border-radius: var(--r-md);
  font-weight: 600; cursor: pointer; transition: all 150ms ease;
  text-decoration: none; white-space: nowrap; user-select: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--gradient); color: var(--bg); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-3); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-1); color: var(--text); }
.btn-danger { background: var(--red); color: white; }
.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); }
.btn-lg { padding: 14px 28px; font-size: var(--fs-lg); }

.field { display: flex; flex-direction: column; gap: var(--gap-2); margin-bottom: var(--gap-4); }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.field input, .field select, .field textarea {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 12px; color: var(--text);
  transition: border 150ms ease; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); }
.field textarea { resize: vertical; min-height: 80px; }
.field .hint { font-size: var(--fs-xs); color: var(--text-dim); }
.field .error { font-size: var(--fs-xs); color: var(--red); }

.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--gap-6); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--gap-4); }
.card-header h3 { margin: 0; font-size: var(--fs-lg); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap-4); margin-bottom: var(--gap-6); }
.stat-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--gap-4) var(--gap-6); }
.stat-card .label { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--gap-2); }
.stat-card .value { font-family: 'Satoshi', sans-serif; font-size: var(--fs-2xl); font-weight: 700; }

.table-wrap { overflow-x: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; padding: var(--gap-3) var(--gap-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
  border-bottom: 1px solid var(--border); background: var(--surface-2);
  position: sticky; top: 0;
}
tbody td { padding: var(--gap-3) var(--gap-4); font-size: var(--fs-sm); border-bottom: 1px solid var(--border-soft); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }

.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 600; background: var(--surface-3); color: var(--text); }
.badge-success { background: rgba(74,222,128,0.15); color: var(--green); }
.badge-warn { background: rgba(251,191,36,0.15); color: var(--amber); }
.badge-danger { background: rgba(239,68,68,0.15); color: var(--red); }
.badge-info { background: rgba(103,232,249,0.15); color: var(--cyan); }

.modal-bg { position: fixed; inset: 0; background: rgba(5,10,26,0.8); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 100; }
.modal-bg.open { display: flex; }
.modal { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--gap-6); max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--gap-4); }
.modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 24px; }

.toasts { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: var(--gap-2); z-index: 200; }
.toast { background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--cyan); border-radius: var(--r-md); padding: var(--gap-3) var(--gap-4); max-width: 350px; box-shadow: var(--shadow-md); animation: slideIn 200ms ease; }
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.warn { border-left-color: var(--amber); }
@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.spinner { width: 24px; height: 24px; border: 3px solid var(--surface-3); border-top-color: var(--cyan); border-radius: 50%; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--surface-1), var(--surface-2), var(--surface-1)); background-size: 200% 100%; animation: skel 1.5s infinite; border-radius: var(--r-sm); height: 16px; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.flex { display: flex; } .flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.gap-1 { gap: var(--gap-1); } .gap-2 { gap: var(--gap-2); } .gap-3 { gap: var(--gap-3); }
.gap-4 { gap: var(--gap-4); } .gap-6 { gap: var(--gap-6); } .gap-8 { gap: var(--gap-8); }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; }
.text-muted { color: var(--text-muted); } .text-dim { color: var(--text-dim); }
.text-success { color: var(--green); } .text-danger { color: var(--red); } .text-warn { color: var(--amber); }
.text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); }
.text-md { font-size: var(--fs-md); } .text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.font-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.text-right { text-align: right; } .text-center { text-align: center; } .text-left { text-align: left; }
.mt-1 { margin-top: var(--gap-1); } .mt-2 { margin-top: var(--gap-2); } .mt-3 { margin-top: var(--gap-3); }
.mt-4 { margin-top: var(--gap-4); } .mt-6 { margin-top: var(--gap-6); } .mt-8 { margin-top: var(--gap-8); }
.mb-1 { margin-bottom: var(--gap-1); } .mb-2 { margin-bottom: var(--gap-2); } .mb-3 { margin-bottom: var(--gap-3); }
.mb-4 { margin-bottom: var(--gap-4); } .mb-6 { margin-bottom: var(--gap-6); } .mb-8 { margin-bottom: var(--gap-8); }
.hidden { display: none !important; }
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Card title (subtítulo dentro de .card) */
.card-title { font-family: 'Satoshi', sans-serif; font-size: var(--fs-lg); font-weight: 600; margin: 0; }

/* Input genérico (cuando no se usa .field) */
.input {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: var(--text);
  font: inherit;
  width: 100%;
  transition: border 150ms;
}
.input:focus { outline: none; border-color: var(--cyan); }
.input:disabled { opacity: 0.6; cursor: not-allowed; }
.input-sm { padding: 6px 10px; font-size: var(--fs-sm); }
textarea.input { resize: vertical; min-height: 80px; }

/* File input */
input[type="file"].input { padding: 8px; }
input[type="range"].input { padding: 0; height: 4px; appearance: none; background: var(--surface-2); border-radius: 99px; }

/* Badge danger */
.badge-danger { background: rgba(239,68,68,0.15); color: var(--red); }

/* Filters bar */
.filters-bar { display: flex; gap: var(--gap-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--gap-3); }
.filters { display: flex; gap: var(--gap-3); flex-wrap: wrap; }

/* Pager */
.pager { display: flex; gap: var(--gap-3); align-items: center; justify-content: center; padding: var(--gap-3); }

/* Page header */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--gap-4); }
.page-header h2 { margin: 0; }
.page-title { margin: 0; font-family: 'Satoshi', sans-serif; font-size: var(--fs-xl); font-weight: 600; }

/* Avatar */
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gradient); color: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); }

/* Brand mark dentro de sidebar */
.brand-mark { background: var(--gradient); width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; font-weight: 700; color: var(--bg); font-size: var(--fs-sm); font-family: 'Satoshi', sans-serif; }
.brand-text { font-family: 'Satoshi', sans-serif; font-weight: 600; }

/* Hide en mobile */
@media (max-width: 720px) { .hide-mobile { display: none !important; } }