/* ─────────────────────────────────────────────────────────────────────────
   order-public.css — tarjetas de planes para la página /order (invitado).
   El sitio marketing no tiene componente de pricing (funnel iba a "contacto"),
   así que aquí van las pocas reglas para la parrilla de planes reales, usando
   los tokens del diseño marketing (styles.css) para que combinen 1:1.
   Solo se carga en el branch invitado de mod_order_index.html.twig.
   ───────────────────────────────────────────────────────────────────────── */

/* Tokens Estacion (--nvx-*) mapeados a la paleta marketing. custom-nv-order.css
   estila el COMPARADOR (.nvx-compare-*) y el plan-list (.nvx-plan-*) con estos
   tokens, cuyo BASE (nv-estacion.css) solo carga layout_default (cliente). En
   /order invitado no existian → el comparador salia sin fondo/borde. Los
   definimos aqui (solo carga en /order) igual que checkout-public.css hace para
   el orderbutton invitado. */
:root {
   --nvx-navy: var(--color-navy);
   --nvx-cyan: var(--color-cyan);
   --nvx-amber: var(--color-amber);
   --nvx-surface: #ffffff;
   --nvx-surface-2: var(--color-gray-50);
   --nvx-ink: #12233b;
   --nvx-ink-soft: var(--color-gray-700);
   --nvx-muted: var(--color-gray-500);
   --nvx-line: var(--color-gray-200);
   --nvx-line-strong: var(--color-gray-400);
   --nvx-accent: var(--color-cyan);
   --nvx-accent-ink: #0e6e86;
   --nvx-accent-soft: #e0f2f7;
   --nvx-good: #059669;   --nvx-good-soft: #e3f4ec;  --nvx-good-ink: #047857;
   --nvx-warn: var(--color-amber); --nvx-warn-soft: #fbeedb; --nvx-warn-ink: #92400e;
   --nvx-crit: #dc2626;   --nvx-crit-soft: #fbe6e6;  --nvx-crit-ink: #b91c1c;
   --nvx-info: var(--color-cyan);  --nvx-info-soft: #e0f2f7;
   --nvx-r-surface: var(--radius-flat);
   --nvx-r-control: var(--radius-control);
   --nvx-r-data: var(--radius-flat);
   --nvx-r-pill: var(--radius-pill);
   --nvx-shadow: 0 1px 2px rgba(18,35,59,.05), 0 6px 16px -10px rgba(18,35,59,.16);
   --nvx-shadow-hover: 0 2px 4px rgba(18,35,59,.06), 0 14px 30px -12px rgba(18,35,59,.22);
   --nvx-display: var(--font-heading);
   --nvx-body: var(--font-primary);
   --nvx-mono: var(--font-mono);
}

.nvo-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.75rem;
    margin-top: 2.5rem;
    align-items: stretch;
}

.nvo-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-flat);
    padding: 2rem 1.75rem;
    transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}

.nvo-plan:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.nvo-plan--feat {
    border-color: var(--color-cyan);
    box-shadow: 0 8px 28px rgba(8, 145, 178, 0.14);
}

.nvo-plan__badge {
    position: absolute;
    top: -0.75rem;
    left: 1.75rem;
    background: var(--color-amber);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
}

.nvo-plan__name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0.25rem 0 0.35rem;
}

.nvo-plan__cap {
    font-size: 0.9rem;
    color: var(--color-gray-500);
    margin: 0 0 1.25rem;
    min-height: 2.6em;
}

.nvo-plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
}

.nvo-plan__price .n {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1;
}

.nvo-plan__price .per {
    font-size: 0.9rem;
    color: var(--color-gray-500);
}

.nvo-plan__feats {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.nvo-plan__feats li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--color-gray-700);
    line-height: 1.35;
}

.nvo-plan__feats .ck {
    color: var(--color-cyan);
    font-weight: 700;
    flex: 0 0 auto;
}

.nvo-plan .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   Comparador de planes (invitado) — reusa order.js con los hooks nvx-*.
   Estilizado con tokens marketing. Namespace nvx-* generado/consumido por
   order.js; aquí solo la piel marketing.
   ───────────────────────────────────────────────────────────────────────── */

/* Botones nvx-* (usados por el plan-row y la tabla del modal que genera order.js) */
.nvx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-family: var(--font-primary);
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: all 0.2s;
}
.nvx-btn--sm { padding: 0.4rem 0.9rem; font-size: 0.82rem; }
.nvx-btn--primary { background: var(--color-cyan); color: #fff; }
.nvx-btn--primary:hover { filter: brightness(1.1); color: #fff; }
.nvx-btn--ghost {
    background: transparent;
    color: var(--color-navy);
    border: 1.5px solid var(--color-gray-200);
}
.nvx-btn--ghost:hover { border-color: var(--color-cyan); color: var(--color-cyan); }

/* "Ver más planes" (native <details>) */
.nvo-viewall {
    margin-top: 2.25rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-flat);
    background: #fff;
}
.nvx-viewall__summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-navy);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.nvx-viewall__summary::-webkit-details-marker { display: none; }
.nvx-viewall__summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--color-cyan);
    transition: transform 0.2s;
}
.nvo-viewall[open] .nvx-viewall__summary::after { transform: rotate(180deg); }
.nvx-viewall__body { padding: 0 1.5rem 1.5rem; }
.nvx-viewall__hint {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin: 0 0 1rem;
}
.nvx-viewall__hint svg { color: var(--color-cyan); flex: 0 0 auto; }

/* Lista de planes (filas con checkbox de comparación) */
.nvx-plan-list { display: flex; flex-direction: column; gap: 0.5rem; }
.nvx-plan-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-flat);
    background: var(--color-gray-50);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.nvx-plan-row:hover { border-color: var(--color-cyan); }
.nvx-plan-row:has(.nvx-plan-row__cb:checked) {
    border-color: var(--color-cyan);
    background: rgba(8, 145, 178, 0.06);
}
.nvx-plan-row__cb { width: 1.05rem; height: 1.05rem; accent-color: var(--color-cyan); cursor: pointer; }
.nvx-plan-row__name { font-weight: 600; color: var(--color-navy); font-size: 0.95rem; }
.nvx-plan-row__meta { font-weight: 400; color: var(--color-gray-500); font-size: 0.82rem; }
.nvx-plan-row__price { font-size: 0.85rem; color: var(--color-gray-700); white-space: nowrap; }
.nvx-plan-row__price strong { color: var(--color-navy); }

@media (max-width: 640px) {
    .nvx-plan-row {
        grid-template-columns: auto 1fr;
        grid-template-areas: "cb name" "price1 price1" "price2 price2" "cta cta";
    }
    .nvx-plan-row__cb { grid-area: cb; }
    .nvx-plan-row__name { grid-area: name; }
    .nvx-plan-row .nvx-btn { grid-area: cta; }
}

/* FAB flotante de comparación */
.nvx-compare-fab {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    background: var(--color-navy);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(30, 58, 95, 0.35);
    transition: filter 0.2s, transform 0.15s;
}
.nvx-compare-fab:hover { filter: brightness(1.12); }
.nvx-compare-fab:active { transform: translateX(-50%) scale(0.97); }
.nvx-compare-fab[hidden] { display: none; }
.nvx-compare-fab__count {
    background: var(--color-cyan);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 0.05rem 0.55rem;
    font-size: 0.85rem;
}

/* Modal <dialog> de comparación */
.nvx-compare-modal {
    /* Centrado del modal en el viewport, pase lo que pase con showModal()/open —
       un <dialog> abierto por atributo 'open' (no showModal) se posiciona arriba
       a la izquierda; inset:0 + margin:auto lo centra vertical y horizontalmente. */
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(920px, 94vw);
    height: fit-content;
    max-height: 88vh;
    padding: 0;
    border: none;
    border-radius: var(--radius-flat);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.nvx-compare-modal::backdrop { background: rgba(10, 22, 40, 0.55); }
.nvx-compare-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--gradient-dark);
    color: #fff;
}
.nvx-compare-modal__head h2 { font-family: var(--font-heading); font-size: 1.15rem; margin: 0; color: #fff; }
.nvx-compare-modal__close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}
.nvx-compare-modal__body { padding: 1.5rem; overflow: auto; max-height: calc(88vh - 76px); }

.nvx-compare-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.nvx-compare-table th,
.nvx-compare-table td {
    padding: 0.7rem 0.9rem;
    text-align: center;
    border-bottom: 1px solid var(--color-gray-200);
}
.nvx-compare-table thead th {
    font-family: var(--font-heading);
    color: var(--color-navy);
    font-size: 0.95rem;
    border-bottom: 2px solid var(--color-gray-200);
}
.nvx-compare-table__label { text-align: left; font-weight: 600; color: var(--color-gray-700); white-space: nowrap; }
.nvx-compare-table__highlight { color: var(--color-navy); font-weight: 600; }
.nvx-compare-table__best {
    color: var(--color-cyan);
    font-weight: 700;
    background: rgba(8, 145, 178, 0.08);
}
.nvx-compare-table__cta { padding-top: 1rem; }

.nvx-compare-modal__shared {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-gray-50);
    border-radius: var(--radius-flat);
}
.nvx-compare-modal__shared strong { color: var(--color-navy); }
.nvx-compare-modal__shared ul {
    margin: 0.6rem 0 0;
    padding-left: 1.2rem;
    columns: 2;
    color: var(--color-gray-700);
    font-size: 0.88rem;
}
@media (max-width: 560px) { .nvx-compare-modal__shared ul { columns: 1; } }

/* Barra "volver a todas las plataformas" en la página de plataforma */
.nvo-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-cyan);
    text-decoration: none;
}
.nvo-back:hover { text-decoration: underline; }

/* ── Hub de plataformas (/order) — 3 por fila + cards uniformes ─────────────
   El grid marketing viene en 2 columnas (styles.css) con logos a la izquierda
   de tamaños dispares (texto ancho vs icono cuadrado IOMAD/SVG). Aquí: 3 columnas
   desktop (2 tablet, 1 móvil) + logos normalizados y centrados para que todas
   las cards se vean parejas. order-public.css carga DESPUÉS de styles/responsive
   → estas reglas ganan (por eso se re-declaran los breakpoints móviles). */
.platform-hub-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.platform-hub-card { align-items: center; text-align: center; padding: 2rem 1.75rem; }
.platform-hub-card .hub-logo {
   height: 50px;
   width: auto;
   max-width: 150px;
   object-fit: contain;
   object-position: center;
   margin-bottom: 1.25rem;
}
/* Reserva de alto para descripciones de 1-2 líneas → cards alineadas. */
.platform-hub-card .hub-desc { min-height: 2.9em; }
@media (max-width: 1024px) { .platform-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .platform-hub-grid { grid-template-columns: 1fr; } }