/* ==========================================================================
   Dicofar CRM · Estilos de vista: Blog (comentarios, categorías, medios,
   suscriptores) y Configuración. Solo tokens de crm.css (var(--sp-*), --text-*…).
   Prefijos: .bx- (común blog) .cm- comentarios · .cat- categorías · .md- medios
             .sub- suscriptores · .cfg- configuración · .journey embudo
   ========================================================================== */

/* ---------- Común ------------------------------------------------------- */
.bx-cats .table th.table__num, .bx-subs .table th.table__num, .bx-media .table th.table__num, .cfg .table th.table__num { text-align: right; }
.bx-toolbar { gap: var(--sp-2) var(--sp-3); }
.bx-search { width: 320px; max-width: 100%; }
.bx-select { width: auto; max-width: 300px; }
.bx-more { display: flex; justify-content: center; margin-top: var(--sp-4); }
.bx-more:empty { display: none; }
.bx-check { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -8px; cursor: pointer; border-radius: var(--radius-sm); }
.bx-check input { margin: 0; }
.bx-bulk { z-index: var(--z-sticky); }
.bx-bulk__count { padding-right: var(--sp-2); white-space: nowrap; }
.bx-bulk .btn--ghost .icon { color: inherit; }

/* Muestras de color (categorías y avatar) */
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.swatch { position: relative; display: inline-flex; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch span {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 1px var(--border); transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.swatch span .icon { width: 16px; height: 16px; stroke-width: 2.6; opacity: 0; }
.swatch:hover span { transform: scale(1.06); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.swatch input:checked + span .icon { opacity: 1; }
.swatch input:focus-visible + span { outline: 2px solid var(--border-focus); outline-offset: 5px; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: 6px; }

/* ---------- Comentarios ------------------------------------------------- */
.bx-comments .tabs { margin-bottom: var(--sp-4); }
.cm-card { overflow: hidden; }
.cm-listhead { display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-4); min-height: 44px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cm-listhead__hint { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; }
.cm-listhead__hint .kbd-combo { margin-right: 2px; }
.cm__check { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -6px 0; flex: none; cursor: pointer; border-radius: var(--radius-sm); }
.cm-listhead .cm__check { margin: 0 -6px; }
.cm__check input { margin: 0; }
.cm {
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--sp-3); align-items: start;
  padding: var(--sp-4); border-bottom: 1px solid var(--border); transition: background var(--dur-1) var(--ease); scroll-margin: calc(var(--topbar-h) + var(--sp-4)) 0 var(--sp-16);
}
.cm:last-child { border-bottom: 0; }
.cm:hover { background: var(--surface-2); }
.cm.is-selected { background: var(--selected); }
.cm.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.cm:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; border-radius: 0; }
.cm--team .cm__avatar .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--teal-fg); }
.cm__main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cm__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sp-2); min-width: 0; line-height: 20px; }
.cm__name { font-weight: var(--fw-semibold); color: var(--text); }
.cm__email { font-size: var(--fs-13); color: var(--text-3); overflow-wrap: anywhere; }
.cm__email:hover { color: var(--link); }
.cm__time { font-size: var(--fs-12); color: var(--text-4); white-space: nowrap; }
.cm__time::before { content: "·"; margin-right: var(--sp-2); color: var(--text-4); }
.cm__context { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-13); color: var(--text-3); line-height: 1.45; }
.cm__context > .icon { margin-top: 3px; color: var(--text-4); }
.cm__context a { font-weight: var(--fw-medium); }
.cm__client { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.cm__quote { margin: 2px 0 0; padding: 6px var(--sp-3); border-left: 2px solid var(--border-strong); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-13); color: var(--text-3); line-height: 1.5; }
.cm__body { font-size: var(--fs-14); line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 76ch; }
.cm__signals { display: flex; flex-wrap: wrap; gap: 6px; }
.cm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 2px 0 0 -10px; }
.cm__actions .btn--secondary { margin-left: 10px; margin-right: 4px; }
.cm__more { margin-left: auto; }
.cm-reply { margin-top: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--sp-2); max-width: 720px; }
.cm-reply__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.cm-reply__foot .field__hint { flex: 1 1 260px; }
.cm-reply__actions { display: flex; gap: var(--sp-2); margin-left: auto; }

/* ---------- Categorías -------------------------------------------------- */
.cat-name { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.cat-swatch { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
[data-theme="dark"] .cat-swatch { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.cat-name__btn { font-weight: var(--fw-semibold); color: var(--text); text-align: left; border-radius: var(--radius-sm); }
.cat-name__btn:hover { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.cat-table .table__sub { max-width: 46ch; }
.cat-count { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cat-slug { font-size: var(--fs-12); color: var(--text-2); background: var(--surface-3); padding: 2px 6px; border-radius: var(--radius-sm); }
.cat-table td { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.cat-preview { padding: var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.cat-chip { display: inline-flex; align-items: center; gap: var(--sp-2); height: 36px; padding: 0 14px; border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text); }
.cat-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.cat-chip__n { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: var(--fs-13); }
.cat-affected { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); }
.cat-affected li { display: flex; align-items: center; gap: var(--sp-2); padding: 8px var(--sp-3); border-bottom: 1px solid var(--border); font-size: var(--fs-13); min-width: 0; }
.cat-affected li:last-child { border-bottom: 0; }
.cat-affected .badge { flex: none; }

/* ---------- Medios ------------------------------------------------------ */
.md-drop {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4);
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.md-drop.is-over { border-color: var(--brand); background: var(--brand-soft); }
.md-drop__icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); background: var(--surface-3); color: var(--text-3); }
.md-drop.is-over .md-drop__icon { background: var(--surface); color: var(--brand-text); }
.md-drop__text { flex: 1 1 auto; min-width: 0; }
.md-drop__title { font-weight: var(--fw-semibold); color: var(--text); }
.md-drop__hint { font-size: var(--fs-13); color: var(--text-3); margin-top: 2px; }
.md-queue { margin-bottom: var(--sp-4); }
.md-queue__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); min-height: 44px; }
.md-queue__title { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.md-queue__list { display: flex; flex-direction: column; }
.md-queue__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.md-queue__item:last-child { border-bottom: 0; }
.md-queue__icon { flex: none; color: var(--text-3); display: flex; }
.md-queue__item.is-done .md-queue__icon { color: var(--success-text); }
.md-queue__item.is-error .md-queue__icon { color: var(--danger-text); }
.md-queue__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.md-queue__name { font-size: var(--fs-13); font-weight: var(--fw-medium); }
.md-queue__size { font-size: var(--fs-12); color: var(--text-4); flex: none; }
.md-queue__status { font-size: var(--fs-12); color: var(--text-3); }
.md-queue__item.is-error .md-queue__status { color: var(--danger-text); }
.md-queue__warn { display: flex; align-items: flex-start; gap: 4px; font-size: var(--fs-12); color: var(--warning-text); }
.md-queue__warn .icon { margin-top: 2px; }
.md-toolbar .chips { flex: 0 1 auto; min-width: 0; }
.md-sort { width: auto; }
.md-layout-toggle > button { min-width: 36px; padding: 0 8px; }
.md-layout-toggle .icon { width: 16px; height: 16px; }
.md-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.md-aside { display: none; }
@media (min-width: 1100px) {
  .md-layout { grid-template-columns: minmax(0, 1fr) 360px; }
  .md-aside { display: block; position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); max-height: calc(100dvh - var(--topbar-h) - var(--sp-8)); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); overscroll-behavior: contain; }
  .md-aside[hidden] { display: none !important; }
}
.md-aside__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--surface); }
.md-aside__title { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.md-aside__empty { padding: var(--sp-8) var(--sp-2); }
.md-aside .md-detail { padding: var(--sp-4); }

.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-3); }
.md-card {
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; text-align: left; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.md-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.md-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.md-card.is-current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-2); }
.md-card__thumb { display: block; aspect-ratio: 4 / 3; background: var(--surface-3); overflow: hidden; }
.md-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.md-card__flag, .md-card__uses {
  position: absolute; top: var(--sp-2); display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: var(--fw-semibold); line-height: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.md-card__flag { left: var(--sp-2); background: var(--amber-bg); color: var(--amber-fg); }
[data-theme="dark"] .md-card__flag { background: #3b2a0c; }
.md-card__uses { right: var(--sp-2); background: rgba(14, 26, 51, .78); color: #fff; }
.md-card__body { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3) var(--sp-3); min-width: 0; }
.md-card__name { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-card__meta { font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.md-row__thumb { width: 56px; height: 42px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); flex: none; }
.md-row__name { font-weight: var(--fw-medium); color: var(--text); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; border-radius: var(--radius-sm); }
.md-row__name:hover { color: var(--link); }
.md-row__alt { max-width: 40ch; color: var(--text-2); }
.md-table td { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }

.md-detail { display: flex; flex-direction: column; gap: var(--sp-4); }
.md-detail__preview { display: grid; place-items: center; min-height: 160px; max-height: 280px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  background-color: var(--surface-3); background-image: linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%), linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.md-detail__preview img { max-width: 100%; max-height: 280px; object-fit: contain; }
.md-alt--missing .textarea { border-color: var(--warning); background: color-mix(in srgb, var(--warning-soft) 45%, var(--surface)); }
.md-alt--missing .field__label { color: var(--warning-text); }
.is-long [data-alt-count] { color: var(--warning-text); font-weight: var(--fw-semibold); }
.md-detail__dl { grid-template-columns: 96px 1fr; align-items: center; }
.md-detail__dl dd { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.md-uses { display: flex; flex-direction: column; gap: 6px; }
.md-uses li { display: flex; flex-direction: column; gap: 1px; padding: 6px var(--sp-3); border-left: 2px solid var(--border-strong); font-size: var(--fs-13); }
.md-uses a { font-weight: var(--fw-medium); }
.md-url { font-size: var(--fs-12); color: var(--text-3); text-overflow: ellipsis; }
.md-detail__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.md-drawer .modal__body { padding-top: var(--sp-3); }

/* Espacio del navegador (modo demo) */
.storage-meter { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.cfg .storage-meter { margin-bottom: 0; padding: 0; border: 0; background: none; }
.storage-meter__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-2); }
.storage-meter__label .icon { color: var(--text-3); }
.storage-meter__value { font-size: var(--fs-12); color: var(--text-3); white-space: nowrap; }
.storage-meter__hint { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-12); color: var(--text-3); }
.storage-meter__hint .icon { margin-top: 2px; flex: none; }
.storage-meter.is-warning { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
.storage-meter.is-warning .storage-meter__hint { color: var(--warning-text); }
.storage-meter.is-danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger-soft) 50%, var(--surface)); }
.storage-meter.is-danger .storage-meter__hint { color: var(--danger-text); }

/* ---------- Suscriptores ------------------------------------------------ */
.sub-summary { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-bottom: var(--sp-5); overflow: hidden; }
.sub-summary__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 1px solid var(--border); }
.sub-summary__kpis .kpi { border-right: 1px solid var(--border); justify-content: flex-start; padding-top: var(--sp-4); }
.sub-summary__kpis .kpi:last-child { border-right: 0; }
.sub-summary__chart { padding: var(--sp-3) var(--sp-4) var(--sp-2); min-width: 0; }
.sub-summary__title { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-2); margin-bottom: var(--sp-1); }
.sub-chart { min-height: 150px; }
.sub-email { color: var(--text); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.sub-email:hover { color: var(--link); }
.sub-client { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 2px; vertical-align: middle; border-radius: var(--radius-sm); color: var(--text-3); background: var(--surface-3); }
.sub-client:hover { color: var(--link); background: var(--brand-soft); }
.sub-origin { display: inline-block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--text-2); }
.sub-table .col-check { width: 44px; }

/* ---------- Configuración ---------------------------------------------- */
.cfg-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.cfg-nav { position: sticky; top: calc(var(--topbar-h) + var(--sp-6)); display: flex; flex-direction: column; gap: var(--sp-4); }
.cfg-nav__title { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-4); padding: 0 var(--sp-3) var(--sp-1); letter-spacing: .02em; }
.cfg-nav ul { display: flex; flex-direction: column; gap: 2px; }
.cfg-nav__item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 var(--sp-3); border-radius: var(--radius); color: var(--text-2); font-size: var(--fs-14); white-space: nowrap; }
.cfg-nav__item .icon { color: var(--text-3); }
.cfg-nav__item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.cfg-nav__item[aria-current="page"] { background: var(--selected); color: var(--brand-text); font-weight: var(--fw-medium); }
.cfg-nav__item[aria-current="page"] .icon { color: var(--brand-text); }
[data-theme="dark"] .cfg-nav__item[aria-current="page"] { background: var(--active); color: var(--text); }
.cfg-nav__item:focus-visible { outline-offset: -2px; }
.cfg-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.cfg-main > [data-sec] { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.cfg-head { display: flex; flex-direction: column; gap: 2px; }
.cfg-title { font-size: var(--fs-20); line-height: 28px; }
.cfg-title:focus { outline: none; }
.cfg-desc { color: var(--text-3); font-size: var(--fs-14); }
.cfg-card .card__title { font-size: var(--fs-14); }
.cfg-card__footer { justify-content: flex-end; gap: var(--sp-3); }
.cfg-card__footer > span:first-child:not([hidden]) { margin-right: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--warning-text); }
.cfg-card__footer > span:first-child[hidden] + span { margin-right: auto; }
.cfg-profile { display: flex; align-items: center; gap: var(--sp-4); }
.cfg-person { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cfg-person__name { font-weight: var(--fw-medium); color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.cfg-users td { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
/* Escritorio (1280–1440 px): la tabla de usuarios entra sin scroll horizontal (antes "Editar" y el menú quedaban fuera). */
@media (min-width: 768px) {
  .cfg-users .cfg-person { max-width: 240px; }
  .cfg-users th, .cfg-users td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
}
@media (min-width: 768px) and (max-width: 1365px) {
  .cfg-layout { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); }
  .cfg-users [data-user-edit] { width: var(--btn-h); padding: 0; }
  .cfg-users [data-user-edit] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.cfg-users__off .cfg-person, .cfg-users__off td:not(.col-actions) > * { opacity: .6; }
.cfg-perms th[scope="row"] { position: static; background: none; height: auto; padding: 10px var(--sp-4); font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--text); white-space: normal; border-bottom: 1px solid var(--border); letter-spacing: 0; }
.cfg-perms tbody tr:last-child th { border-bottom: 0; }
.cfg-perms thead th { white-space: normal; height: auto; padding-top: var(--sp-2); padding-bottom: var(--sp-2); line-height: 1.3; vertical-align: bottom; }
.cfg-perms__n { display: block; font-weight: var(--fw-regular); color: var(--text-4); font-size: 11px; }
.cfg-perm { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.cfg-perm--yes { background: var(--green-bg); color: var(--green-fg); }
.cfg-perm--yes .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.cfg-perm--no { color: var(--text-4); }
.cfg-perm--no .icon { width: 14px; height: 14px; }
.cfg-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.cfg-role { position: relative; display: flex; }
.cfg-role input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfg-role__box { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1); }
.cfg-role__box:hover { background: var(--hover); }
.cfg-role input:checked + .cfg-role__box { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.cfg-role input:focus-visible + .cfg-role__box { box-shadow: var(--focus-ring); }
.cfg-role input:disabled + .cfg-role__box { opacity: .5; cursor: not-allowed; }
.cfg-role__name { font-weight: var(--fw-semibold); font-size: var(--fs-14); color: var(--text); }
.cfg-role__desc { font-size: var(--fs-12); color: var(--text-3); line-height: 1.4; }
.cfg-routing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
.cfg-check { min-height: 32px; align-items: center; }
.cfg-check input { margin: 0; }

/* Recorrido del cliente */
.journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.journey__col { display: flex; flex-direction: column; border: 1px solid var(--border); border-top: 3px solid var(--f); border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.journey__head { padding: var(--sp-3); display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--border); }
.journey__count { font-size: var(--fs-12); color: var(--text-3); }
.journey__name { font-size: var(--fs-16); line-height: 24px; }
.journey__desc { font-size: var(--fs-12); color: var(--text-3); line-height: 1.45; }
.journey__stages { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); }
.journey__stage { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.journey__label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text); }
.journey__n { min-width: 24px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--radius-full); background: var(--surface-3); font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-2); }
.journey__sdesc { font-size: var(--fs-12); color: var(--text-3); line-height: 1.4; }
.journey__prob { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); color: var(--text-3); }
.journey__prob .progress { flex: 1 1 auto; height: 4px; }
.journey__prob .num { min-width: 34px; text-align: right; }
.journey__lost { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }

/* Reglas de reparto */
.cfg-rules { display: flex; flex-direction: column; }
.cfg-rule { display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 7fr); gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.cfg-rule:last-child { border-bottom: 0; }
.cfg-rule__if { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-13); min-width: 0; }
.cfg-rule__kw { font-size: var(--fs-12); color: var(--text-3); }
.cfg-rule__arrow { color: var(--text-4); display: flex; }
.cfg-rule__then { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-sla td { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }

/* Formularios web */
.cfg-test { align-items: center; }
.cfg-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--sp-4); }
.cfg-form { display: flex; flex-direction: column; }
.cfg-form__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); }
.cfg-form__icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-text); }
.cfg-form__title { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.cfg-form__dl { padding: var(--sp-3) var(--sp-4) var(--sp-4); grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
.cfg-form__dl dd { display: flex; flex-direction: column; gap: 2px; }
.cfg-form__foot { margin-top: auto; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border); }
.cfg-form__foot a { display: inline-flex; align-items: center; gap: 4px; }
.cfg-bullets { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: var(--sp-4); list-style: disc; font-size: var(--fs-13); color: var(--text-2); line-height: 1.5; }
.cfg-bullets li::marker { color: var(--text-4); }

/* Integraciones */
.cfg-integ { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--sp-4); }
.cfg-int { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.cfg-int.is-on { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.cfg-int__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.cfg-int__title { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cfg-int__icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius); background: var(--surface-3); color: var(--text-2); }
.cfg-int.is-on .cfg-int__icon { background: var(--green-bg); color: var(--green-fg); }
.cfg-int__name { font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.3; min-width: 0; }
.cfg-int__desc { font-size: var(--fs-13); color: var(--text-2); line-height: 1.5; }
.cfg-int__today { font-size: var(--fs-12); color: var(--text-3); line-height: 1.45; }
.cfg-int__foot { margin-top: auto; padding-top: var(--sp-2); }

/* Datos y seguridad */
.cfg-sizes { display: flex; flex-direction: column; gap: var(--sp-2); }
.cfg-sizes li { display: grid; grid-template-columns: 170px minmax(0, 1fr) 72px; gap: var(--sp-3); align-items: center; font-size: var(--fs-13); }
.cfg-sizes__bar { height: 6px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.cfg-sizes__bar span { display: block; height: 100%; background: var(--chart-1); border-radius: inherit; }
.cfg-sizes__val { text-align: right; color: var(--text-3); font-size: var(--fs-12); }
.cfg-backup { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); }
.cfg-backup > .cfg-backup__item { padding: var(--sp-3) var(--sp-4); }
.cfg-backup > .cfg-backup__item + .cfg-backup__item { border-top: 1px solid var(--border); }
.cfg-backup__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.cfg-backup__item > div { min-width: 0; }
.cfg-backup__item > .btn { flex: none; }
.cfg-import-table th.table__num { text-align: right; }
.cfg-import-table tbody th { position: static; background: none; height: auto; font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--text); border-bottom: 1px solid var(--border); }
.cfg-import-table tbody tr:last-child th { border-bottom: 0; }
.cfg-import-table tr.is-less td:last-child { color: var(--warning-text); }
.cfg-danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.cfg-danger .card__title { color: var(--danger-text); }

/* ---------- Tablet ------------------------------------------------------ */
@media (max-width: 1023px) {
  .cfg-layout { grid-template-columns: 190px minmax(0, 1fr); gap: var(--sp-5); }
  .sub-summary { grid-template-columns: minmax(0, 1fr); }
  .sub-summary__kpis { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ---------- Móvil ------------------------------------------------------- */
@media (max-width: 767px) {
  /* Objetivos táctiles de 44 px en estas vistas */
  .bx-comments .btn--sm, .bx-cats .btn--sm, .bx-media .btn--sm, .bx-subs .btn--sm, .cfg .btn--sm { --btn-h: 44px; }
  .bx-toolbar .chip { height: 44px; }
  .bx-toolbar { flex-direction: column; align-items: stretch; }
  .bx-search, .bx-select { width: 100%; max-width: none; }
  .bx-toolbar .chips { width: 100%; }
  .bx-toolbar .page-toolbar__right { justify-content: space-between; }
  .bx-check, .cm__check { width: 44px; height: 44px; margin: -12px; }
  .cm-listhead .cm__check { margin: -4px -12px; }
  .bx-bulk { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3)); flex-wrap: wrap; justify-content: center; width: calc(100% - var(--sp-2)); padding: 6px; }
  .bx-bulk__count { width: 100%; text-align: center; padding: 4px 0 0; }
  .md-url { font-size: var(--fs-16); } /* URL copiable del medio: sin zoom de iOS al enfocarla */
  .page-header__actions > .btn { flex: 1 1 0; }

  /* Tablas como tarjetas: la celda de acciones ocupa todo el ancho (crm.css le da width:1%) */
  .bx-cats .table--cards td.col-actions, .bx-subs .table--cards td.col-actions, .bx-media .table--cards td.col-actions, .cfg .table--cards td.col-actions { width: 100%; justify-content: flex-end; padding-top: var(--sp-2) !important; }

  /* Comentarios */
  .cm { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3); }
  .cm__check { grid-column: 1; grid-row: 1; margin: -10px -6px 0 -8px; }
  .cm__avatar { display: none; }
  .cm__time::before { content: none; }
  .cm__email { width: 100%; order: 3; font-size: var(--fs-12); }
  .cm__head { gap: 2px var(--sp-2); }
  .cm__actions { margin-left: -12px; gap: 0; }
  .cm__actions .btn--secondary { margin-left: 12px; }
  .cm-reply { margin-left: -44px; }
  .cm-reply__actions { width: 100%; }
  .cm-reply__actions .btn { flex: 1 1 0; }

  /* Categorías */
  .cat-table .table__primary { padding-right: 0 !important; }
  .cat-name__btn { padding: 12px 0; margin: -12px 0; }
  .cat-actions { justify-content: flex-end; width: 100%; }
  .swatch span { width: 40px; height: 40px; }
  .swatches { gap: var(--sp-1); }
  .swatch { padding: 2px; }

  /* Medios */
  .md-drop { flex-wrap: wrap; padding: var(--sp-4); gap: var(--sp-3); }
  .md-drop__icon { display: none; }
  .md-drop > .btn { width: 100%; }
  .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .md-card__body { padding: 6px var(--sp-2) var(--sp-2); }
  .md-toolbar .page-toolbar__right { width: 100%; }
  .md-sort { flex: 1 1 auto; height: 44px; }
  .md-layout-toggle > button { min-width: 44px; min-height: 44px; }
  .md-detail__actions .btn { flex: 1 1 0; }
  .md-detail__dl { grid-template-columns: minmax(0, 1fr); }
  .md-table .md-row__thumb { width: 64px; height: 48px; }
  .md-queue__item { flex-wrap: wrap; }
  .md-queue__item > .btn { width: 100%; }

  /* Suscriptores */
  .sub-summary__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sub-summary__kpis .kpi { padding: var(--sp-3); }
  .sub-summary__kpis .kpi__value { font-size: var(--fs-20); line-height: 28px; }
  .sub-summary__kpis .kpi__label { font-size: var(--fs-12); }
  .sub-origin { max-width: 22ch; }
  .sub-table .col-check { top: var(--sp-2); right: var(--sp-2); }
  .sub-table td.table__primary { padding-right: 44px !important; }

  /* Configuración */
  .cfg-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .cfg-nav {
    position: sticky; top: calc(var(--topbar-h) + var(--safe-top)); z-index: 5; flex-direction: row; gap: 0; overflow-x: auto; scrollbar-width: none;
    margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0; padding: var(--sp-2) var(--sp-4); background: color-mix(in srgb, var(--bg) 94%, transparent);
    border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .cfg-nav::-webkit-scrollbar { display: none; }
  .cfg-nav__group { display: contents; }
  .cfg-nav__title { display: none; }
  .cfg-nav ul { flex-direction: row; gap: var(--sp-1); }
  .cfg-nav__item { min-height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-14); }
  .cfg-nav__item .icon { display: none; }
  .cfg-title { font-size: var(--fs-16); line-height: 24px; }
  .cfg-card__footer { flex-wrap: wrap; }
  .cfg-card__footer > .btn { flex: 1 1 100%; }
  .cfg-card__footer > span:first-child:not([hidden]) { width: 100%; }
  .cfg-profile .avatar--xl { --av-size: 48px; }
  .cfg-roles, .cfg-routing { grid-template-columns: minmax(0, 1fr); }
  .cfg-check { min-height: 44px; }
  .cfg .switch { min-height: 44px; }
  .cfg-rule { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .cfg-rule__arrow { transform: rotate(90deg); width: 16px; }
  .cfg-perms th[scope="row"] { padding-left: var(--sp-3); min-width: 132px; }
  .cfg-perms td, .cfg-perms thead th { padding-left: 6px !important; padding-right: 6px !important; }
  .cfg-perms thead th:first-child { padding-left: var(--sp-3) !important; }
  .cfg-form__dl { grid-template-columns: minmax(0, 1fr); }
  .cfg-test { flex-wrap: wrap; }
  .cfg-test > .btn { width: 100%; }
  .cfg-sizes li { grid-template-columns: minmax(0, 1fr) 64px; }
  .cfg-sizes__bar { grid-column: 1 / -1; grid-row: 2; }
  .cfg-backup__item { flex-direction: column; align-items: stretch; }
  .cfg-backup__item > .btn { width: 100%; }
  .cfg-users .cfg-row-actions { justify-content: flex-end; width: 100%; }
  .journey { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .md-card, .swatch span, .cm { transition: none; }
}