/* Página pública /funcionalidades.php. Hereda tokens y tipografía de
   landing.css (mismo header/footer que terminos.php); acá solo va la
   maqueta de la matriz rol × plan. Sin colores literales: todo var(--token),
   tests/Unit/SinColoresLiteralesEnVistasTest.php no cubre este archivo (no
   escanea assets/css/*.css) pero la regla del proyecto es la misma. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.func-hero {
    max-width: 56rem;
    margin: 0 auto;
    padding: 5.5rem 1.25rem 2rem;
}

.func-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin-bottom: 0.75rem;
}

.func-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
    color: var(--text1);
    text-wrap: balance;
}

.func-lede {
    color: var(--text2);
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 1.75rem;
    max-width: 42rem;
}

/* ── Pestañas de rol y de plan ────────────────────────────────────────────
   El componente global (helpers/pestanas.php: render_tabs(), clases
   .lb-tabs/.lb-tab) vive en assets/css/pestanas.css — acá solo lo que es
   específico de esta página: la etiqueta "Rol:"/"Plan:" y, sobre todo, el
   contenedor que las centra igual que el título (.func-hero) y la tabla
   (.func-role) de abajo.
   BUG (reporte del dueño, 27-sep): sin .func-tabs-container la barra vivía
   pegada al borde izquierdo del viewport — .func-tabs-header y el wrap de
   pestañas no tenían max-width/margin propio, a diferencia de .func-hero y
   .func-role que sí lo traían cada uno por su lado. */

.func-tabs-container {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.func-tabs-header {
    margin-bottom: 0.6rem;
}

.func-tablist-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text3-strong);
}

.func-tabs-container .lb-tabs-wrap {
    margin-bottom: 1.75rem;
}

.func-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 1rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}

.func-legend li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.func-legend strong {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--text1);
}

.func-legend span {
    font-size: 0.8rem;
    color: var(--text3-strong);
    line-height: 1.35;
}

.func-role {
    max-width: 68rem;
    margin: 0 auto;
    padding: 2.25rem 1.25rem;
}

.func-role-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--text1);
    margin: 0 0 1rem;
    scroll-margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.func-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    /* overflow-x: auto (no "hidden") — con 6 columnas la tabla no entra en
       viewports chicos (~641-730px, tablet chica / laptop partida) antes de
       que el layout de tarjetas de abajo entre en juego a los 640px. Un
       overflow "hidden" acá recortaría en silencio la columna Full, que es
       justo la que menos se puede perder en una página que existe para
       mostrar qué plan incluye qué. overflow-y: hidden mantiene el
       border-radius arriba/abajo. */
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--surface1);
}

.func-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.func-table thead th {
    background: var(--surface2);
    color: var(--text2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.85rem 0.9rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.func-table thead th.func-col-name,
.func-table td.func-col-name,
.func-table th.func-col-name {
    text-align: left;
}

.func-col-name {
    position: sticky;
    left: 0;
    background: var(--surface1);
    color: var(--text1);
    font-weight: 600;
    padding: 0.85rem 1rem;
    z-index: 1;
}

.func-table thead th.func-col-name {
    background: var(--surface2);
    z-index: 2;
}

.func-table tbody tr:nth-child(even) .func-col-name {
    background: var(--surface2);
}

.func-table tbody tr:not(:last-child) th,
.func-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--border);
}

.func-table tbody td {
    text-align: center;
    padding: 0.7rem 0.6rem;
    color: var(--text2);
}

.func-cat-row th {
    background: var(--surface2);
    color: var(--text3-strong);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    padding: 0.55rem 1rem;
}

/* Separador entre un grupo con título y el siguiente grupo sin título del
   mismo rol (ver el comentario en funcionalidades.php) — mismo alto de
   quiebre visual que un encabezado de categoría, pero sin texto ni fondo
   destacado: no es una categoría nueva, solo evita que el grupo siguiente
   se lea como parte del anterior. */
.func-cat-row--divisor th {
    background: transparent;
    padding: 0.3rem 1rem;
    border-top: 1px solid var(--border);
}

/* Resumen compacto ("Financiero · Full", "Avanzado y superiores", "Todos los
   planes"): vive siempre en el DOM junto al nombre de la función — es el
   mismo dato que la matriz de columnas, solo que en una línea. Oculto en
   escritorio (ahí ya está la matriz completa); es la vista de mobile. */
.func-fn-resumen {
    display: none;
}

.func-check {
    color: var(--accent);
    font-size: 1.2rem;
}

.func-dash {
    color: var(--text3);
    font-size: 1rem;
}

/* Fila cuyo tier es 'complemento': hoy ningún ítem de navegación resuelve a
   ese tier (los complementos por uso no tienen página propia en el menú),
   pero si alguna vez uno lo hace, esto evita que la fila se lea como "no
   incluido en ningún plan" en vez de "se contrata aparte". */
.func-por-uso {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pop-hover);
    background: var(--pop-subtle);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.55rem;
}

/* ── Complementos por uso ─────────────────────────────────────────────── */

.func-addons {
    max-width: 68rem;
    margin: 0 auto;
    padding: 1rem 1.25rem 2.5rem;
}

.func-addons-lede {
    color: var(--text2);
    font-size: 0.95rem;
    margin: 0 0 1rem;
}

.func-addons-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
}

.func-addons-list li {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--pop-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}

.func-addons-list strong {
    font-family: var(--font-display);
    color: var(--text1);
    font-size: 0.95rem;
}

.func-addons-list span {
    font-size: 0.85rem;
    color: var(--text2);
    line-height: 1.4;
}

/* ── CTA final ─────────────────────────────────────────────────────────── */

.func-cta {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4.5rem;
    text-align: center;
}

.func-cta h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--text1);
    margin: 0 0 0.5rem;
}

.func-cta p {
    color: var(--text2);
    font-size: 1rem;
    margin: 0 0 1.25rem;
}

.func-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0;
}

.func-cta-link {
    color: var(--accent-strong);
    font-weight: 600;
    text-decoration: none;
}

.func-cta-link:hover,
.func-cta-link:focus-visible {
    text-decoration: underline;
}

/* ── Mobile: una línea por función, nombre + resumen de planes ───────────────
   Antes cada función abría 5 filas (una por plan) — para un rol con 27
   funciones eso eran ~160 líneas de scroll para leer "en qué plan está".
   Ahora la matriz completa de columnas se oculta entera (ya está resumida en
   .func-fn-resumen, calculada en helpers/funcionalidades_catalog.php a
   partir del mismo catálogo) y cada función queda en una sola línea: nombre
   a la izquierda, resumen a la derecha. Sin scroll horizontal de página. */

@media (max-width: 640px) {
    .func-table-wrap {
        overflow: visible;
    }

    .func-table {
        display: block;
        width: 100%;
    }

    .func-table thead {
        display: none;
    }

    .func-table tbody {
        display: block;
        width: 100%;
    }

    .func-table tr {
        display: block;
        width: 100%;
    }

    .func-table tbody tr:not(.func-cat-row) {
        border-bottom: 1px solid var(--border);
    }

    .func-table tbody tr:not(.func-cat-row):last-child {
        border-bottom: 0;
    }

    /* La matriz de 5 columnas por plan se oculta entera: el resumen de
       .func-col-name ya dice lo mismo en una línea. */
    .func-plan-cell {
        display: none;
    }

    .func-col-name {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        position: static;
        background: transparent;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    .func-table tbody tr:nth-child(even) .func-col-name {
        background: var(--surface2);
    }

    .func-fn-label {
        flex: 1 1 auto;
    }

    .func-fn-resumen {
        display: inline-block;
        flex: 0 0 auto;
        max-width: 48%;
        text-align: right;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--text3-strong);
    }

    .func-cat-row th {
        padding: 0.6rem 1rem;
    }
}

/* ── Interruptor "Ver por rol" / "Ver por plan" ───────────────────────────
   Mismo componente global (.lb-tabs/.lb-tab de assets/css/pestanas.css) que
   las pestañas de rol y de plan, con la variante ".func-view-switch": un par
   fijo de dos en una pastilla contenedora, nunca una lista que se desplaza
   (por eso no usa .lb-tabs-wrap con overflow-x). */

.func-view-switch-wrap {
    margin-bottom: 1.25rem;
}

.func-view-switch.lb-tabs {
    display: inline-flex;
    width: auto;
    min-width: 0;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

.func-view-switch .lb-tab {
    border: none;
    background: transparent;
    color: var(--text2);
    padding: 0.45rem 1rem;
}

.func-view-switch .lb-tab:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text1);
}

.func-view-switch .lb-tab[aria-selected="true"] {
    background: var(--surface1);
    border-color: transparent;
    color: var(--accent-strong);
    box-shadow: var(--shadow-sm);
}

/* ── Vista "Ver por plan" ─────────────────────────────────────────────────
   Misma tabla que la vista "Ver por rol" (.func-table, .func-plan-cell,
   .func-check/.func-dash — helpers/funcionalidades_catalog.php,
   funcionalidades_catalogo_por_plan_matriz()), con los ejes invertidos:
   columnas = rol en vez de plan. Pedido explícito del dueño (27-sep): "la
   misma vista pero por plan, misma tabla". func-plan-badge se reusa junto al
   nombre de la función para marcar lo que ese plan suma sobre su padre en la
   escalera (ver FUNCIONALIDADES_PLAN_PADRE). */

.func-plan-tagline {
    color: var(--text2);
    font-size: 0.95rem;
    margin: -0.5rem 0 1.5rem;
}

.func-fn-label + .func-plan-badge {
    margin-left: 0.5rem;
}

.func-plan-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent-strong);
    background: var(--accent-subtle);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.55rem;
    white-space: nowrap;
}

.func-plan-empty {
    color: var(--text3-strong);
    font-size: 0.9rem;
}