/* ============================================================
   components.css — Componentes reutilizables de interfaz
   ============================================================ */

/* ---------- Tarjeta ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card__header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border);
}
.card__header h2, .card__header h3 { font-size: .98rem; }
.card__header .link { font-size: .82rem; font-weight: 600; }
.card__body { padding: 18px; }
.card__body.tight { padding: 12px; }
.card__footer {
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
}
.card--hover { transition: box-shadow var(--t), transform var(--t); }
.card--hover:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card--accent { border-top: 3px solid var(--color-accent); }
.card--primary { border-top: 3px solid var(--color-primary); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: .88rem; font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-600); }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { filter: brightness(.95); }
.btn--ghost { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); }
.btn--ghost:hover { background: var(--color-surface-2); border-color: var(--color-primary); color: var(--color-primary); }
.btn--subtle { background: var(--color-primary-050); color: var(--color-primary); }
.btn--subtle:hover { background: #dfe9f8; }
.btn--danger { background: var(--color-danger); color: #fff; }
.btn--sm { height: 32px; padding: 0 12px; font-size: .82rem; }
.btn--lg { height: 44px; padding: 0 22px; font-size: .95rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: .74rem; font-weight: 650;
  background: var(--color-surface-2); color: var(--color-muted);
  border: 1px solid var(--color-border);
}
.badge--primary { background: var(--color-primary-050); color: var(--color-primary); border-color: transparent; }
.badge--accent { background: var(--color-accent-050); color: var(--color-accent); border-color: transparent; }
.badge--success { background: var(--color-success-050); color: var(--color-success); border-color: transparent; }
.badge--warning { background: var(--color-warning-050); color: var(--color-warning); border-color: transparent; }
.badge--danger { background: var(--color-danger-050); color: var(--color-danger); border-color: transparent; }
.badge--info { background: var(--color-info-050); color: var(--color-info); border-color: transparent; }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  font-size: .82rem; font-weight: 500; color: var(--color-muted);
  transition: all var(--t-fast);
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---------- Avatar ---------- */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; background: var(--color-primary-050);
  display: inline-grid; place-items: center;
  font-size: .8rem; font-weight: 700; color: var(--color-primary);
  flex: none;
}
.avatar--sm { width: 28px; height: 28px; font-size: .7rem; }
.avatar--lg { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar--xl { width: 88px; height: 88px; font-size: 1.6rem; }
.avatar-group { display: flex; }
.avatar-group .avatar { border: 2px solid #fff; margin-left: -10px; }
.avatar-group .avatar:first-child { margin-left: 0; }

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius); }
table.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table thead th {
  text-align: left; font-weight: 650; color: var(--color-muted);
  background: var(--color-surface-2);
  padding: 11px 14px; border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-surface-2); }
.table .cell-user { display: flex; align-items: center; gap: 10px; }
.table td.actions { text-align: right; white-space: nowrap; }

/* ---------- Pestañas ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); }
.tabs__tab {
  padding: 10px 16px;
  font-size: .88rem; font-weight: 600; color: var(--color-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tabs__tab:hover { color: var(--color-text); }
.tabs__tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-panel[hidden] { display: none; }
.tab-panel { padding-top: 20px; }

/* ---------- Formularios ---------- */
.field { display: block; margin-bottom: 16px; }
.field > label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.field .hint { font-size: .78rem; color: var(--color-muted); margin-top: 5px; }
.input, .textarea, .select {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-050);
}
.textarea { min-height: 96px; resize: vertical; }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row > .field { flex: 1; min-width: 200px; }

.check { display: flex; align-items: center; gap: 9px; font-size: .88rem; }
.check input { width: 16px; height: 16px; accent-color: var(--color-primary); }

/* ---------- Zona de carga (maqueta) ---------- */
.dropzone {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  color: var(--color-muted);
  background: var(--color-surface-2);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dropzone:hover { border-color: var(--color-primary); background: var(--color-primary-050); }
.dropzone svg { width: 30px; height: 30px; margin: 0 auto 10px; color: var(--color-faint); }
.dropzone b { color: var(--color-primary); }

/* ---------- Migas de pan ---------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--color-muted); margin-bottom: 12px; }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb svg { width: 13px; height: 13px; opacity: .6; }

/* ---------- Estadística / KPI ---------- */
.stat { padding: 18px; }
.stat__label { font-size: .8rem; color: var(--color-muted); font-weight: 600; }
.stat__value { font-size: 1.7rem; font-weight: 700; margin-top: 4px; letter-spacing: -.5px; }
.stat__delta { font-size: .78rem; font-weight: 650; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.stat__delta.up { color: var(--color-success); }
.stat__delta.down { color: var(--color-danger); }

/* ---------- Estado vacío ---------- */
.empty-state { text-align: center; padding: 44px 20px; color: var(--color-muted); }
.empty-state svg { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--color-faint); }
.empty-state h3 { color: var(--color-text); margin-bottom: 4px; }

/* ---------- Lista de ítems (avisos, feed corto) ---------- */
.item-list { display: flex; flex-direction: column; }
.item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--color-border);
}
.item:last-child { border-bottom: 0; }
.item__icon {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: grid; place-items: center; flex: none;
  background: var(--color-primary-050); color: var(--color-primary);
}
.item__icon svg { width: 17px; height: 17px; }
.item__body { flex: 1; min-width: 0; }
.item__title { font-weight: 600; font-size: .9rem; }
.item__meta { font-size: .78rem; color: var(--color-muted); margin-top: 2px; }

/* ---------- Modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(16, 24, 40, .5);
  display: grid; place-items: center;
  padding: 20px;
}
.modal-scrim[hidden] { display: none; }
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
}
.modal--lg { max-width: 760px; }
.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--color-border);
}
.modal__header h2 { font-size: 1.05rem; }
.modal__body { padding: 20px; }
.modal__footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 20px; border-top: 1px solid var(--color-border);
}

/* ---------- Toast ---------- */
.toast-region {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-text); color: #fff;
  padding: 12px 16px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: .86rem; font-weight: 500;
  animation: toast-in var(--t);
}
.toast svg { width: 16px; height: 16px; color: var(--color-accent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Progreso ---------- */
.progress { height: 8px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.progress__bar { height: 100%; background: var(--color-primary); border-radius: inherit; }
.progress--accent .progress__bar { background: var(--color-accent); }

/* ---------- Paginación ---------- */
.pagination { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 20px; }
.pagination a, .pagination span {
  min-width: 34px; height: 34px; padding: 0 8px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-sm); font-size: .84rem; font-weight: 600;
  color: var(--color-muted);
}
.pagination a:hover { background: var(--color-surface); text-decoration: none; }
.pagination .is-active { background: var(--color-primary); color: #fff; }

/* ---------- Nota de diseño (fuera de alcance) ---------- */
.design-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-info-050);
  border: 1px dashed #b9d3ee;
  font-size: .82rem; color: #1c4e80;
}
.design-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }