@layer sections {
/* ─── Matriz comparativa de funcionalidades (estilo Fudo) ───────────────────
   CSS COMPARTIDO del componente js/shared/plan-features.js. Lo consumen tanto
   el admin "Mi plan" (dashboard.ejs) como la landing pública (landing/index.ejs).
   Usa los design tokens de tokens.css (que ambas vistas ya cargan); no depende
   de admin-editor.css ni de landing.css. */

/* Contenedor de la matriz: card con scroll horizontal en mobile para no romper. */
.fm-wrap {
    background: var(--bg-surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg); overflow: hidden;
}
.fm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fm-table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: var(--fs-sm); }

/* Cabecera de planes: sticky al scrollear la matriz; columna actual resaltada. */
.fm-thead { position: sticky; top: 0; z-index: 2; }
.fm-th {
    background: var(--bg-surface-muted); color: var(--text-strong);
    font-weight: var(--fw-bold); text-align: center;
    padding: var(--space-3) var(--space-2); border-bottom: 2px solid var(--border-soft);
    white-space: nowrap;
}
.fm-th--label { text-align: left; min-width: 220px; font-weight: var(--fw-semibold); }
.fm-th__name { display: block; }
.fm-th--current { background: var(--color-primary); color: var(--text-on-primary); }
.fm-th__tag {
    display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    color: var(--text-on-primary); opacity: 0.92;
}

/* Encabezado de categoría tipo acordeón (colapsado por defecto; chevron que rota). */
.fm-cat__head th { padding: 0; }
.fm-cat__btn {
    display: flex; align-items: center; gap: var(--space-2); width: 100%;
    background: var(--bg-surface-muted); border: none; cursor: pointer; text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong);
    border-top: 1px solid var(--border-soft);
}
.fm-cat__btn:hover { background: var(--color-primary-soft); }
.fm-cat__chevron { display: inline-block; color: var(--color-primary); transition: transform 0.18s ease; }
.fm-cat--open .fm-cat__chevron { transform: rotate(90deg); }
.fm-cat__title { flex: 1; }
.fm-cat__count {
    flex: none; background: var(--bg-surface); color: var(--text-muted);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    padding: 2px var(--space-2); border-radius: var(--radius-full);
}

/* Filas de capacidad: ocultas hasta que su categoría se expande. */
.fm-row { display: none; }
.fm-cat--open .fm-row { display: table-row; }
.fm-row__label {
    text-align: left; font-weight: var(--fw-regular); color: var(--text-strong);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border-soft);
}
.fm-cell {
    text-align: center; padding: var(--space-2);
    border-top: 1px solid var(--border-soft);
}
.fm-cell--val { font-weight: var(--fw-semibold); color: var(--text-strong); white-space: nowrap; }
.fm-yes { color: var(--color-primary); font-weight: var(--fw-bold); font-size: var(--fs-base); }
.fm-no { color: var(--text-muted); }
/* Celda "próximamente": módulo incluido en el plan pero aún no disponible. */
.fm-cell--soon { }
.fm-soon {
    display: inline-block; background: var(--bg-surface-muted); color: var(--text-muted);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    padding: 2px 6px; border-radius: 999px; white-space: nowrap;
}

/* Encabezados de plan: clickeables para ENFOCAR su columna (foco de comparación). */
.fm-th[data-plan-col] { cursor: pointer; }
.fm-th[data-plan-col]:hover { background: var(--color-primary-soft); color: var(--text-strong); }
.fm-th--current[data-plan-col]:hover { background: var(--color-primary); color: var(--text-on-primary); }
/* Columna enfocada: tinte suave en sus celdas + acento en su encabezado. La columna
   del plan actual queda enfocada por defecto; clic en otra mueve el foco. */
.fm-cell.fm-col--focus { background: var(--color-primary-soft); }
.fm-th.fm-col--focus:not(.fm-th--current) { box-shadow: inset 0 -3px 0 var(--color-primary); }

/* ── Lista de features de plan (compartida: landing / registro / Mi plan) ── */
.plan-feat { display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
.plan-feat__check { color: var(--color-trust, #1F8A5B); font-weight: 700; flex: none; }
.plan-feat--soon .plan-feat__check { color: var(--text-muted, #8A7B70); }
.plan-feat__desc { color: var(--text-muted, #8A7B70); }
.plan-feat__soon { font-size: 0.75rem; color: var(--text-muted, #8A7B70); }

}