/* Biblioteca de recursos (Configuración › Asistente): solo clases propias, con los tokens del sistema visual canon. */
.resource-intro { margin: 0 0 var(--sp-4); max-width: 70ch; color: var(--text-value); font-size: var(--fs-body); }
.resource-form { display: grid; gap: var(--sp-4); }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.resource-grid .is-wide { grid-column: 1 / -1; }
.resource-fieldset { display: grid; gap: var(--sp-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.resource-fieldset > legend { padding: 0; font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--neutral-ink); }
.resource-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.resource-hint { margin: 0; font-size: var(--fs-meta); color: var(--text-muted); }
.resource-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.resource-list { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.resource-row { display: grid; grid-template-columns: var(--row-h) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; padding: var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-1); }
.resource-row.is-off { background: var(--surface-disabled); }
.resource-row.is-editing { grid-template-columns: minmax(0, 1fr); }
.resource-thumb { display: grid; place-items: center; width: var(--row-h); height: var(--row-h); overflow: hidden; border-radius: var(--r-md); background: var(--surface-3); color: var(--text-muted); }
.resource-thumb img { width: 100%; height: 100%; object-fit: cover; }
.resource-main { display: grid; gap: var(--sp-1); min-width: 0; }
.resource-title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-medium); color: var(--text-strong); overflow-wrap: anywhere; }
.resource-desc { margin: 0; font-size: var(--fs-body); color: var(--text-value); overflow-wrap: anywhere; }
.resource-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.resource-empty { margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.resource-count { margin: var(--sp-3) 0 0; color: var(--text-subtle); font-size: var(--fs-body); }
@media (max-width: 640px) {
  .resource-row { grid-template-columns: var(--row-h) minmax(0, 1fr); }
  .resource-row .resource-actions { grid-column: 1 / -1; }
  .resource-grid { grid-template-columns: 1fr; }
}