/* Pantalla «Categorías» (Servicios y precios): una lista de filas con nombre, cuántos servicios tiene y sus acciones. Solo tokens canon; prefijo sc-. */
.sc-screen { display: grid; gap: var(--sp-4); align-content: start; }
.sc-flash { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--success-ink); font-size: var(--fs-meta); }
.sc-flash .ui-icon { width: var(--icon-md); height: var(--icon-md); flex: none; }
.sc-add { display: grid; gap: var(--sp-3); }
.sc-card { padding: 0; overflow: hidden; }
.sc-list { display: grid; margin: 0; padding: 0; list-style: none; }
.sc-row { display: grid; grid-template-columns: var(--icon-md) minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: calc(var(--ctl-lg) + var(--sp-3)); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-4); }
.sc-row + .sc-row { border-top: var(--border-w) solid var(--border-soft); }
.sc-row.is-editing { display: block; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); }
.sc-icon { display: inline-flex; color: var(--brand); }
.sc-icon .ui-icon { width: var(--icon-md); height: var(--icon-md); }
.sc-name { min-width: 0; color: var(--text-strong); font-size: var(--fs-body); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.sc-count { color: var(--text-muted); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-count.is-empty { color: var(--text-subtle); }
.sc-actions { display: inline-flex; align-items: center; gap: var(--sp-1); }
.sc-actions .ui-iconbtn .ui-icon { width: var(--icon-md); height: var(--icon-md); }
.sc-actions .ui-iconbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sc-actions .ui-iconbtn.is-danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger-ink); }
.sc-row.is-none { background: var(--surface-2); }
.sc-row.is-none .sc-icon, .sc-row.is-none .sc-name { color: var(--text-muted); font-weight: var(--fw-regular); }
.sc-note { grid-column: 2 / -1; margin: 0; }
.sc-form { display: grid; gap: var(--sp-3); max-width: calc(var(--ctl-lg) * 12); }
.sc-form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sc-problem { color: var(--danger-ink); font-size: var(--fs-meta); }
/* En la tarjeta de un servicio: el selector de categoría y el enlace a la pantalla donde se administran. */
.sa-svc-category { display: flex; align-items: flex-end; gap: var(--sp-2); min-width: 0; }
.sa-svc-category > .sa-field { flex: 1 1 auto; min-width: 0; }
.sa-svc-category-link { flex: none; padding-inline: var(--sp-2); }