@charset "UTF-8";
/* ==========================================================================
   Retention options — cards dentro del modal de retención.
   Sigue el patrón visual del resto del panel cliente (ns-* classes,
   tonos suaves, borde unificado).
   ========================================================================== */
.nv-om-retention-option {
    position: relative;
    padding: 1.25rem 1rem;
    border: 1px solid var(--nh-gray-200, #e5e7eb);
    border-radius: 10px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.nv-om-retention-option:hover {
    border-color: var(--nh-gray-300, #cbd5e1);
    box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.08);
}
.nv-om-retention-option.is-recommended {
    border-color: #10b981;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, #ffffff 40%);
}
.nv-om-retention-option-badge {
    position: absolute;
    top: -9px;
    left: 1rem;
    background: #10b981;
    color: #ffffff;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.35);
}
.nv-om-retention-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    margin-bottom: 0.65rem;
}
.nv-om-retention-option-icon.is-success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
}
.nv-om-retention-option-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.3rem;
}
.nv-om-retention-option-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
    flex-grow: 1;
    margin-bottom: 0.75rem;
}

/* ==========================================================================
   Retention Modal v5 (23-Abr-2026) — lista horizontal tipo inbox-rows
   Reemplaza las 3 cards competidoras. Cada opción es una row completa con:
   [ícono] [título + descripción] ─────────── [CTA]
   Todas con el mismo peso visual, la recomendada con gradient verde sutil.
   ========================================================================== */
.nv-om-retention-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.nv-om-retention-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    background: #ffffff;
    border: 1.5px solid var(--nh-gray-200, #e5e7eb);
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.nv-om-retention-item:hover {
    border-color: var(--nh-gray-300, #cbd5e1);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
.nv-om-retention-item.is-primary {
    border-color: #10b981;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, #ffffff 65%);
}
.nv-om-retention-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #475569;
    flex-shrink: 0;
}
.nv-om-retention-item-icon.is-success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
}
.nv-om-retention-item-body {
    min-width: 0;
}
.nv-om-retention-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.nv-om-retention-item-tag {
    background: #10b981;
    color: #ffffff;
    padding: 0.12rem 0.5rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-block;
    flex-shrink: 0;
}
.nv-om-retention-item-desc {
    font-size: 0.83rem;
    color: #64748b;
    line-height: 1.5;
    margin-top: 0.2rem;
}
/* Botones dentro del item: nunca expandir a w-100, mantener compacto */
.nv-om-retention-item .nv-om-btn-primary,
.nv-om-retention-item .nv-om-btn-secondary {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Mobile: botón debajo del texto en full width */
@media (max-width: 576px) {
    .nv-om-retention-item {
        grid-template-columns: 44px 1fr;
        grid-template-rows: auto auto;
        gap: 0.6rem 0.8rem;
    }
    .nv-om-retention-item > button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* ==========================================================================
   Retention discount banner — visible en la página del servicio cuando el
   cliente tiene un descuento pendiente o recién aplicado. Da feedback
   claro de CUÁNDO y CÓMO se aplicará el descuento (evita la duda típica
   del cliente: "¿funcionó? ¿ya se usó?").
   ========================================================================== */
.nhd-retention-banner {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}
.nhd-retention-banner:not(:has(.nhd-retention-banner-action)) {
    grid-template-columns: 44px 1fr;
}
.nhd-retention-banner.is-pending {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #065f46;
}
.nhd-retention-banner.is-applied {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.03) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #3730a3;
}
.nhd-retention-banner.is-renewal {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.03) 100%);
    border: 1px solid rgba(245, 158, 11, 0.38);
    color: #92400e;
}
.nhd-retention-banner.is-renewal .nhd-retention-banner-icon {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}
.nhd-retention-banner-action {
    flex-shrink: 0;
}
.nhd-retention-banner-action .nv-om-btn-primary {
    background: #0891b2;
    color: #fff;
    border: 1px solid #0891b2;
    border-radius: 10px;
    padding: 0.55rem 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    transition: background 0.15s;
}
.nhd-retention-banner-action .nv-om-btn-primary:hover {
    background: #0e7490;
    color: #fff;
}
@media (max-width: 576px) {
    .nhd-retention-banner {
        grid-template-columns: 44px 1fr !important;
        grid-template-rows: auto auto;
    }
    .nhd-retention-banner-action {
        grid-column: 1 / -1;
    }
    .nhd-retention-banner-action .nv-om-btn-primary {
        width: 100%;
        justify-content: center;
    }
}
.nhd-retention-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nhd-retention-banner.is-pending .nhd-retention-banner-icon {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
}
.nhd-retention-banner.is-applied .nhd-retention-banner-icon {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}
.nhd-retention-banner-body strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}
.nhd-retention-banner-body .small {
    font-size: 0.82rem;
    line-height: 1.5;
    opacity: 0.88;
}
.nhd-retention-banner-body a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

/* ==========================================================================
   Reason cards — motivos seleccionables en el modal de cancelación.
   Equivalente a radio buttons pero visualmente amigable. La card activa
   usa rojo tenue (danger) porque el flujo es cancelación.
   ========================================================================== */
.nv-om-reason-card {
    position: relative;
    padding: 0.9rem 0.85rem;
    border: 1.5px solid var(--nh-gray-200, #e5e7eb);
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
    user-select: none;
}
.nv-om-reason-card:hover {
    border-color: var(--nh-gray-300, #cbd5e1);
    background: #f8fafc;
    transform: translateY(-1px);
}
.nv-om-reason-card.is-selected {
    border-color: #ef4444;
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.04) 0%, #ffffff 50%);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.nv-om-reason-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    margin-bottom: 0.5rem;
    transition: background 0.15s, color 0.15s;
}
.nv-om-reason-card.is-selected .nv-om-reason-card-icon {
    background: #fee2e2;
    color: #dc2626;
}
.nv-om-reason-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.15rem;
    line-height: 1.3;
}
.nv-om-reason-card-desc {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.35;
}

/* Impact list dentro del infobox de cancelación (bullets compactos) */
.nv-om-cancel-impact-list {
    margin: 0.25rem 0 0 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    line-height: 1.55;
}
.nv-om-cancel-impact-list li {
    margin-bottom: 0.15rem;
}
.nv-om-cancel-impact-list li:last-child {
    margin-bottom: 0;
}

/* Confirm checkbox — contenedor con borde sutil para separar visualmente */
.nv-om-cancel-confirm-wrap {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}
.nv-om-cancel-confirm-wrap input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.nv-om-cancel-confirm-wrap label {
    font-size: 0.85rem;
    color: #7f1d1d;
    line-height: 1.45;
    cursor: pointer;
    margin: 0;
}

/* ==========================================================================
   Retention Offer Modal v2 — "Antes de cancelar, te gustaría revisar
   algunas alternativas?"

   Rediseño 23-Abr-2026 (feedback usuario): el diseño v1 se sentía muy
   "agresivo" con la oferta verde gigante dominando. v2 aplica un hero
   limpio encima + 3 cards iguales con el descuento como "Recomendado"
   (no dominante) + footer con 2 CTAs balanceados.

   Diseño inspirado en Notion/Linear retention flows: honesto, profesional,
   da al cliente el control sin presión.
   ========================================================================== */
.nv-om-retention-modal {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.nv-om-retention-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    width: 32px;
    height: 32px;
    padding: 0;
    opacity: 0.65;
    transition: opacity 0.15s;
}
.nv-om-retention-close:hover { opacity: 1; }

/* Hero — saludo + contexto. Gradiente suave, no ruidoso. */
.nv-om-retention-hero {
    padding: 2.25rem 2.25rem 1.75rem;
    text-align: center;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #f1f5f9;
}
.nv-om-retention-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #0369a1;
}
.nv-om-retention-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.nv-om-retention-hero-subtitle {
    font-size: 0.975rem;
    color: #64748b;
    margin: 0;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}
.nv-om-retention-hero-subtitle strong {
    color: #0f172a;
    font-weight: 600;
}

/* Grid 3 columnas igualitario — sin card dominante. */
.nv-om-retention-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.75rem;
    background: #ffffff;
}
@media (max-width: 760px) {
    .nv-om-retention-grid { grid-template-columns: 1fr; padding: 1.25rem; }
}

.nv-om-retention-card {
    position: relative;
    padding: 1.5rem 1.25rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.nv-om-retention-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.08);
}

/* Card especial "Recomendado" — borde sutil + stamp top-right, sin
   dominar visualmente. */
.nv-om-retention-card-discount {
    border: 1.5px solid #10b981;
    background: #ffffff;
    position: relative;
}
.nv-om-retention-card-discount::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, rgba(16, 185, 129, 0) 60%);
    pointer-events: none;
}
.nv-om-retention-card-tag {
    position: absolute;
    top: 0;
    right: 14px;
    transform: translateY(-50%);
    background: #10b981;
    color: #ffffff;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.nv-om-retention-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nv-om-retention-card-icon-muted {
    background: #f1f5f9;
    color: #64748b;
}

.nv-om-retention-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin-top: 0.25rem;
}
.nv-om-retention-card-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.45;
    margin-bottom: auto;
}

.nv-om-retention-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-top: 0.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #0f172a;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: left;
}
.nv-om-retention-card-action:hover {
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
}
.nv-om-retention-card-action-primary {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}
.nv-om-retention-card-action-primary:hover {
    background: #059669;
    border-color: #059669;
}

/* Footer con 2 CTAs balanceados. */
.nv-om-retention-footer {
    padding: 1.25rem 2.25rem 1.75rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #f8fafc;
    flex-wrap: wrap;
}
.nv-om-retention-footer-keep {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    background: #ffffff;
    border: 1px solid #0f766e;
    color: #0f766e;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.925rem;
    cursor: pointer;
    transition: all 0.15s;
}
.nv-om-retention-footer-keep:hover {
    background: #0f766e;
    color: #ffffff;
}
.nv-om-retention-footer-cancel {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.7rem 0.25rem;
}
.nv-om-retention-footer-cancel:hover { color: #ef4444; }

/* ==========================================================================
   NovaHost Client Pages - Shared component classes (nc-*)
   Used across:
     - mod_order_list, mod_invoice_index, mod_client_balance,
     - mod_servicestatus_index, mod_hostingbackups, mod_client_profile,
     - mod_order_manage, mod_orderbutton_product_configuration.
   Replaces inline styles on cards, tables, chips, alerts, fieldsets,
   empty states, and hero side-buttons.

   Tokens (via --nv-* and --nh-* aliases from custom-nv-tokens.css).
   ========================================================================== */

/* ---------- Card (standard) ---------- */
.nc-card {
    background: var(--nv-card-bg);
    border-radius: var(--nv-radius-lg);
    box-shadow: var(--nv-shadow-sm);
    border: 1px solid var(--nh-gray-200);
    overflow: hidden;
}
.nc-card-footer {
    background: #fbfcfd;
    border-top: 1px solid var(--nh-gray-100);
    padding: 0.85rem 1.25rem;
}
.nc-card-body {
    padding: 1.25rem;
}
.nc-card-body--lg {
    padding: 1.75rem;
}
.nc-card--hover {
    transition: all .15s ease;
}
.nc-card--hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--nv-shadow-md);
    border-color: var(--nh-cyan);
}

/* ---------- Hero variants (side button / service hero) ---------- */
.nhd-hero-side-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 600;
    backdrop-filter: blur(10px);
}
.nhd-hero-side-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}
.nhd-hero-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.nhd-hero-meta-id {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    font-weight: 500;
}
.nhd-welcome-sub-strong {
    color: #ffffff;
}

/* ---------- Top accent bars on cards ---------- */
.nc-accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}
.nc-accent-bar--wp     { background: #2563eb; }
.nc-accent-bar--iomad  { background: #7c3aed; }
.nc-accent-bar--ojs    { background: #0d9488; }
.nc-accent-bar--moodle { background: #f97316; }
.nc-accent-bar--cyan   { background: var(--nh-cyan); }
.nc-accent-bar--amber  { background: var(--nh-amber); }
.nc-accent-bar--danger { background: #ef4444; }
.nc-accent-bar--info   { background: #3b82f6; }
.nc-accent-bar--muted  { background: #94a3b8; }

/* ---------- Status / platform pills ---------- */
.nc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    letter-spacing: 0.2px;
}
.nc-chip--platform-wp     { background: #2563eb; color: #fff; }
.nc-chip--platform-iomad  { background: #7c3aed; color: #fff; }
.nc-chip--platform-ojs    { background: #0d9488; color: #fff; }
.nc-chip--platform-moodle { background: #f97316; color: #fff; }
.nc-chip--active          { background: #10b981; color: #fff; }
.nc-chip--pending         { background: var(--nh-amber); color: #fff; }
.nc-chip--danger          { background: #ef4444; color: #fff; }
.nc-chip--muted           { background: #64748b; color: #fff; }
.nc-chip--success-soft    { background: #d1fae5; color: #10b981; }
.nc-chip--amber-soft      { background: #fef3c7; color: #d97706; }
.nc-chip--cyan-soft       { background: #cffafe; color: var(--nh-cyan); }
.nc-chip--info-soft       { background: #dbeafe; color: #2563eb; }
.nc-chip--danger-soft     { background: #fee2e2; color: #dc2626; }
.nc-chip--neutral-soft    { background: var(--nh-gray-100); color: var(--nh-gray-700); }
.nc-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.nc-chip-dot--white {
    background: #ffffff;
}

/* ---------- Service / item cards ---------- */
.nc-item-card {
    position: relative;
    background: var(--nv-card-bg);
    border-radius: var(--nv-radius-lg);
    box-shadow: var(--nv-shadow-sm);
    border: 1px solid var(--nh-gray-200);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: all .15s ease;
}
.nc-item-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--nv-shadow-md);
    border-color: var(--nh-cyan);
    color: inherit;
    text-decoration: none;
}
.nc-item-card .nc-item-body {
    padding: 1.25rem;
    flex: 1;
}
.nc-item-card .nc-item-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--nh-navy);
    line-height: 1.35;
    margin: 0 0 0.75rem;
}
.nc-item-card .nc-item-footer {
    background: #fbfcfd;
    border-top: 1px solid var(--nh-gray-100);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nc-item-card .nc-item-footer-label {
    font-size: 0.8rem;
    color: var(--nh-cyan);
    font-weight: 600;
}
.nc-item-card .nc-item-footer-arrow {
    color: var(--nh-cyan);
}

/* ---------- Stat pair (price / next due) ---------- */
.nc-stat-pair-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--nh-gray-500);
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.nc-stat-pair-value {
    color: var(--nh-navy);
    font-size: 1rem;
    font-weight: 700;
}
.nc-stat-pair-sub {
    font-size: 0.7rem;
    color: var(--nh-gray-500);
    margin-top: 2px;
}

/* Renewal urgency badge debajo del próximo vencimiento.
   Color por umbral: verde >30d, ámbar 8-30d, rojo ≤7d, rojo intenso vencido. */
.nc-renewal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
    letter-spacing: 0.2px;
}
.nc-renewal-badge.is-ok {
    background: #ecfdf5;
    color: #047857;
}
.nc-renewal-badge.is-warning {
    background: #fffbeb;
    color: #92400e;
}
.nc-renewal-badge.is-urgent {
    background: #fef2f2;
    color: #b91c1c;
    animation: nc-renewal-pulse 2s ease-in-out infinite;
}
.nc-renewal-badge.is-overdue {
    background: #b91c1c;
    color: #ffffff;
}
@keyframes nc-renewal-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); }
    50% { box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.12); }
}

/* ---------- Data tables (navy header) ---------- */
.nc-table {
    width: 100%;
    margin-bottom: 0;
    --tblr-table-bg: transparent;
}
.nc-table thead th {
    background: var(--nv-navy);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.7rem 1rem;
    border: none;
}
.nc-table thead th button.table-sort {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}
.nc-table tbody tr {
    border-bottom: 1px solid var(--nh-gray-100);
    transition: background .12s ease;
}
.nc-table tbody tr:hover {
    background: #f8fafc;
}
.nc-table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border: none;
}
.nc-table tbody td code {
    background: var(--nh-gray-100);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--nh-navy);
    font-size: 0.8rem;
}

/* table helpers */
.nc-link-navy {
    color: var(--nh-navy);
    font-weight: 600;
    text-decoration: none;
}
.nc-link-navy:hover {
    color: var(--nh-cyan);
}
.nc-t-amber    { color: var(--nh-amber); font-weight: 600; }
.nc-t-green    { color: #10b981; font-weight: 600; }
.nc-t-danger   { color: #dc2626; font-weight: 600; }
.nc-t-muted    { color: var(--nh-gray-500); }
.nc-t-navy     { color: var(--nh-navy); font-weight: 700; }
.nc-t-small    { font-size: 0.8rem; }

/* ---------- Tabs (cp- / inv- style) ---------- */
.nc-tabs-nav {
    border-bottom: none;
    padding: 0.75rem 1.25rem 0;
    display: flex;
    gap: 0.25rem;
    margin: 0;
    flex-wrap: wrap;
}
.nc-tabs-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--nh-gray-500);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1rem;
    transition: all .12s ease;
    background: transparent !important;
}
.nc-tabs-nav .nav-link:hover {
    color: var(--nh-cyan);
    background: transparent !important;
}
.nc-tabs-nav .nav-link.active {
    color: var(--nh-cyan) !important;
    border-bottom-color: var(--nh-cyan) !important;
    background: transparent !important;
}
.nc-tab-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    color: #ffffff;
}
.nc-tab-badge--amber  { background: var(--nh-amber); }
.nc-tab-badge--green  { background: #10b981; }
.nc-tab-badge--danger { background: #ef4444; }
.nc-tab-badge--cyan   { background: var(--nh-cyan); }

.nc-tabs-danger:not(.active) { color: #dc2626 !important; }

/* ---------- Empty states ---------- */
.nc-empty {
    padding: 3rem 2rem;
    text-align: center;
}
.nc-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nh-cyan), var(--nh-navy));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}
.nc-empty-icon--sm {
    width: 64px;
    height: 64px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: var(--nh-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nc-empty-icon--sm svg {
    color: var(--nh-gray-400);
}
.nc-empty-title {
    color: var(--nh-navy);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.nc-empty-sub {
    color: var(--nh-gray-500);
    max-width: 500px;
    margin: 0 auto 1.75rem;
}

/* ---------- Alerts / info boxes ---------- */
.nc-alert {
    display: flex;
    gap: 12px;
    align-items: start;
    padding: 1rem;
    border-radius: var(--nv-radius-md);
    margin-bottom: 1.5rem;
}
.nc-alert-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nc-alert-title {
    display: block;
    margin-bottom: 2px;
    font-weight: 700;
}
.nc-alert-body {
    font-size: 0.88rem;
    margin: 0;
}

.nc-alert--danger { background: linear-gradient(135deg, #fee2e2, #fef2f2); border: 1px solid #fecaca; color: #991b1b; }
.nc-alert--danger .nc-alert-icon { background: #ef4444; }
.nc-alert--danger .nc-alert-title { color: #7f1d1d; }

.nc-alert--warning { background: linear-gradient(135deg, #fef3c7, #fffbeb); border: 1px solid #fcd34d; color: #92400e; }
.nc-alert--warning .nc-alert-icon { background: var(--nh-amber); }
.nc-alert--warning .nc-alert-title { color: #78350f; }

.nc-alert--success { background: linear-gradient(135deg, #d1fae5, #ecfdf5); border: 1px solid #6ee7b7; color: #047857; }
.nc-alert--success .nc-alert-icon { background: #10b981; width: 40px; height: 40px; border-radius: 10px; }
.nc-alert--success .nc-alert-title { color: #065f46; font-size: 1rem; }

.nc-alert--info { background: linear-gradient(135deg, #f0fbff, #ffffff); border: 1px solid var(--nh-cyan); }
.nc-alert--info .nc-alert-icon { background: var(--nh-cyan); width: 40px; height: 40px; border-radius: 12px; }
.nc-alert--info .nc-alert-title { color: var(--nh-navy); font-size: 1rem; }

.nc-alert--info-inline { background: #dbeafe; color: #1e40af; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.8rem; display: block; }
.nc-alert--danger-inline { background: #fee2e2; color: #991b1b; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.8rem; display: block; }
.nc-alert--muted-inline { background: #f1f5f9; color: var(--nh-gray-600); padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.8rem; display: block; }

.nc-alert-tight {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--nv-radius-md);
    padding: 0.75rem 1rem;
    color: #78350f;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}
.nc-alert-tight--success {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

/* ---------- Buttons ---------- */
.nc-btn-gradient {
    background: linear-gradient(135deg, var(--nh-cyan), var(--nh-navy));
    color: #ffffff;
    border: none;
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    border-radius: var(--nv-radius-md);
}
.nc-btn-gradient:hover {
    filter: brightness(1.05);
    color: #ffffff;
}
.nc-btn-outline-cyan {
    background: transparent;
    color: var(--nh-cyan);
    border: 1px solid var(--nh-cyan);
    font-weight: 600;
}
.nc-btn-outline-cyan:hover {
    background: var(--nh-cyan);
    color: #ffffff;
}
.nc-btn-outline-danger {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
    font-weight: 600;
}
.nc-btn-outline-danger:hover {
    background: #ef4444;
    color: #ffffff;
}
.nc-btn-amber {
    background: var(--nh-amber);
    color: #ffffff;
    border: none;
    font-weight: 600;
}
.nc-btn-amber:hover {
    filter: brightness(1.05);
    color: #ffffff;
}
.nc-btn-muted {
    background: var(--nh-gray-100);
    color: var(--nh-navy);
    border: 1px solid var(--nh-gray-200);
    font-weight: 600;
}
.nc-btn-muted--disabled {
    background: var(--nh-gray-100);
    color: var(--nh-gray-500);
    border: none;
}
.nc-btn-success {
    background: #10b981;
    color: #ffffff;
    border: none;
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    border-radius: var(--nv-radius-md);
}
.nc-btn-danger {
    background: #ef4444;
    color: #ffffff;
    border: none;
    font-weight: 600;
}

/* ---------- Balance pill variants ---------- */
.nhd-balance-pill--warning {
    background: linear-gradient(135deg, var(--nh-amber), #b45309);
    border-color: rgba(217, 119, 6, .3);
}
.nhd-balance-pill--warning .nhd-balance-label { color: #fff8e8; }
.nhd-balance-pill--warning .nhd-balance-amount { color: #ffffff; }

/* ---------- Profile-specific ---------- */
.nc-gravatar-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--nv-card-bg, #ffffff);
    padding: 0.5rem 0.85rem;
    border-radius: var(--nv-radius-md);
    border: 1px solid var(--nh-gray-200);
    box-shadow: 0 2px 6px rgba(30, 58, 95, .05);
}
.nc-gravatar-pill img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--nh-gray-100);
}
.nc-gravatar-pill-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--nh-navy);
    line-height: 1.2;
}
.nc-gravatar-pill-email {
    font-size: 0.78rem;
    color: var(--nh-gray-500);
    line-height: 1.2;
    margin-top: 2px;
}

/* Section title with action button on the right */
.nc-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.nc-section-title-row h3 { margin-bottom: 0 !important; }

.nc-section-title-block { margin-bottom: 1.5rem; }
.nc-section-title-block h4 {
    color: var(--nh-navy);
    font-weight: 700;
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
}
.nc-section-title-block p {
    color: var(--nh-gray-500);
    margin: 0;
    font-size: 0.9rem;
}

.nc-fieldset {
    background: #fbfcfd;
    border: 1px solid var(--nh-gray-100);
    border-radius: var(--nv-radius-md);
    padding: 1.25rem;
}
.nc-fieldset-title {
    color: var(--nh-navy);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--nh-gray-100);
}
.nc-input {
    border-radius: 8px;
    border-color: var(--nh-gray-200);
    transition: all .12s ease;
}
.nc-input:focus {
    border-color: var(--nh-cyan);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, .1);
}
.nc-input-group-addon {
    background: #fbfcfd;
    border-color: var(--nh-gray-200);
    color: var(--nh-navy);
    font-weight: 700;
}
.nc-input-readonly {
    font-family: monospace;
    background: #fbfcfd;
}

/* ---------- Small helpers (frequent inline patterns) ---------- */
.nc-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nc-icon-wrap--32 { width: 32px; height: 32px; border-radius: 50%; }
.nc-icon-wrap--40 { width: 40px; height: 40px; border-radius: 12px; }
.nc-icon-wrap--48 { width: 48px; height: 48px; border-radius: 12px; }
.nc-icon-wrap--60 { width: 60px; height: 60px; border-radius: 16px; }
.nc-icon-wrap--gradient { background: linear-gradient(135deg, var(--nh-cyan), var(--nh-navy)); color: #ffffff; }
.nc-icon-wrap--success { background: #d1fae5; color: #10b981; }
.nc-icon-wrap--danger { background: #fef2f2; color: #ef4444; }
.nc-icon-wrap--cyan { background: var(--nh-cyan); color: #ffffff; }
.nc-icon-wrap--muted { background: var(--nh-gray-100); color: var(--nh-gray-500); }

/* Description grid (backups, service details) */
.nc-kv-grid {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 12px;
    font-size: 0.82rem;
}
.nc-kv-grid dt,
.nc-kv-grid .nc-kv-key { color: var(--nh-gray-500); margin: 0; font-weight: 400; }
.nc-kv-grid dd,
.nc-kv-grid .nc-kv-val { color: var(--nh-gray-700); margin: 0; word-break: break-all; }
.nc-kv-grid code {
    background: var(--nh-gray-100);
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--nh-navy);
    font-size: 0.78rem;
}
.nc-kv-grid code.nc-kv-filename {
    color: var(--nh-gray-600);
    font-size: 0.7rem;
}

/* Invoice status hero (branded) */
.nc-invoice-hero {
    background: linear-gradient(135deg, var(--nh-navy) 0%, var(--nh-navy-dark) 100%);
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 1.5rem 2rem;
    color: #fff;
}

/* Currency card (profile) */
.nc-currency-card {
    max-width: 400px;
    border-radius: var(--nv-radius-md);
    border: 1px solid var(--nh-cyan);
    background: linear-gradient(135deg, #f0fbff, #ffffff);
    box-shadow: var(--nv-shadow-sm);
}
.nc-currency-card .nc-currency-letter {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--nh-cyan);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
}
.nc-currency-label {
    font-size: 0.75rem;
    color: var(--nh-gray-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.nc-currency-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--nh-navy);
}

/* Misc common patterns */
.nc-row-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.nc-row-flex-start {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}
.nc-text-center-col {
    text-align: center;
}
.nc-mfa-hero-card {
    border-radius: var(--nv-radius-lg);
    border: 1px solid var(--nh-cyan);
    background: linear-gradient(135deg, #f0fbff, #ffffff);
    box-shadow: var(--nv-shadow-sm);
    overflow: hidden;
}
.nc-mfa-hero-card--muted {
    border-color: var(--nh-gray-200);
    background: var(--nv-card-bg, #ffffff);
    opacity: 0.85;
}
.nc-mfa-hero-card--muted .nc-mfa-hero-bar {
    background: linear-gradient(90deg, var(--nh-gray-400, #94a3b8), var(--nh-gray-500, #64748b));
}
.nc-mfa-hero-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--nh-cyan), var(--nh-navy));
}
.nc-mfa-otp-input {
    font-size: 1.35rem;
    text-align: center;
    letter-spacing: 6px;
    font-family: monospace;
}
.nc-qr-holder {
    max-width: 240px;
    margin: 0 auto;
    background: #ffffff;
    padding: 1rem;
    border-radius: var(--nv-radius-md);
    border: 1px solid var(--nh-gray-200);
}

/* Collapse empty page-header when page uses .nhd-welcome hero */
body.order-index .page-header:has(.page-title:empty),
body.order-index .page-header:has(.page-title > span:empty) {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}
body.order-index .page-header .page-title:empty,
body.order-index .page-header .page-title > span:empty {
    display: none;
}
body.order-index .page-header .text-muted.mt-1:empty {
    display: none;
}

/* ============================================================
   Prorration modal — 2-column split layout
   Left: plans (scrollable) · Right: receipt (sticky)
   ============================================================ */
.nv-om-modal .modal-dialog-scrollable .modal-content,
.nv-om-modal .modal-content {
    max-height: calc(100vh - 2rem);
    /* FIX 23-Abr-2026 (v3): flex column para que modal-body (flex:1 1 auto)
       reciba altura concreta restante tras header+footer. Sin display:flex
       el modal-body colapsa a altura auto y no constriñe el grid interno. */
    display: flex;
    flex-direction: column;
}
.nv-om-modal .modal-body.nv-om-split-body,
.modal .modal-body.nv-om-split-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    /* FIX v4: max-height explícito en pixels + viewport — garantiza que
       los grid-children no se expandan infinitamente. 100vh - 180px
       descuenta: header modal ~100px + footer modal ~60px + márgenes
       superior/inferior del dialog ~20px. */
    max-height: calc(100vh - 180px);
    height: calc(100vh - 180px);
    flex: 1 1 auto;
    min-height: 0;
}
.nv-om-modal .nv-om-split-plans {
    padding: 1.25rem 1.25rem 1.5rem;
    /* FIX v4: ahora el grid parent tiene altura concreta y height:100%
       aquí hereda esa altura → scroll interno activado correctamente. */
    overflow-y: auto !important;
    overflow-x: hidden;
    min-height: 0;
    min-width: 0;
    border-right: 1px solid var(--nh-gray-200);
    background: #ffffff;
    scrollbar-gutter: stable;
}
/* Rediseño 2026-05-01: panel izquierdo del modal-xl mide ~720px.
   Antes auto-fill minmax(180px, 1fr) producía 3-4 cols apretadas que
   truncaban títulos y partían "Hosting Moodle 100UD20GB" en 4 líneas.
   2 cols (~340px cada una) cabe el título completo + specs legibles. */
.nv-om-modal .nv-om-split-plans .nv-om-plan-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
}
@media (max-width: 768px) {
    .nv-om-modal .nv-om-split-plans .nv-om-plan-grid {
        grid-template-columns: 1fr !important;
    }
}
.nv-om-modal .nv-om-split-plans .nv-om-plan-card {
    padding: 1rem 1.1rem;
}
.nv-om-modal .nv-om-split-plans .nv-om-plan-card .plan-title {
    font-size: 0.95rem;
    padding-right: 5.5rem;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
}
.nv-om-modal .nv-om-split-receipt {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    /* FIX 23-Abr-2026 (v4 FINAL): el overflow-y sobre el grid-child no
       estaba activando scroll porque el elemento se expandía al contenido
       cuando grid-template-rows:minmax(0,1fr) por sí solo no constriñe en
       todos los browsers. Estrategia definitiva: modal-body con
       `max-height: calc(100vh - 180px)` (descuenta header+footer+margen),
       luego .nv-om-split-receipt DIRECTAMENTE con `height: 100%` + overflow.
       El height:100% ahora sí funciona porque el parent grid tiene altura
       concreta heredada del modal-body. */
    overflow-y: auto !important;
    overflow-x: hidden;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable;
}
/* El contenido interno del receipt (#upgrade-proration-breakdown /
   #cycle-proration-breakdown) NO debe tener overflow hidden propio que
   bloquee el scroll del parent. Forzamos que se sume vertical y deja que
   el parent (.nv-om-split-receipt) maneje el scroll. */
.nv-om-modal .nv-om-split-receipt .nv-om-receipt,
.nv-om-modal .nv-om-split-receipt .nv-om-split-receipt-placeholder {
    flex-shrink: 0;  /* que el receipt NO se reduzca si no cabe */
    min-height: 0;
}
.nv-om-split-receipt-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--nh-gray-500);
}
.nv-om-split-receipt-placeholder svg { color: var(--nh-gray-400); }
.nv-om-split-receipt-placeholder p {
    margin: 0;
    font-size: 0.9rem;
    max-width: 260px;
    line-height: 1.5;
}
@media (max-width: 991px) {
    .nv-om-modal .modal-body.nv-om-split-body {
        grid-template-columns: 1fr;
    }
    .nv-om-modal .nv-om-split-plans {
        border-right: none;
        border-bottom: 1px solid var(--nh-gray-200);
        max-height: 50vh;
    }
    .nv-om-modal .nv-om-split-receipt {
        max-height: 50vh;
        position: sticky;
        bottom: 0;
    }
}
/* Legacy sticky wrapper (no longer used but kept for safety) */
.nv-om-modal .nv-om-receipt-sticky {
    background: var(--nv-card-bg, #ffffff);
    border-top: 1px solid var(--nh-gray-200);
}
.nv-om-receipt {
    border-radius: 0;
    border: none;
    background: var(--nv-card-bg, #ffffff);
    overflow: hidden;
}
/* Compact receipt inside the split-receipt panel (right column) */
.nv-om-split-receipt .nv-om-receipt {
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
.nv-om-split-receipt .nv-om-receipt-title {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    border-radius: 0;
}
.nv-om-split-receipt .nv-om-receipt-plans {
    padding: 0.85rem 1rem 0.35rem;
    gap: 8px;
    grid-template-columns: 1fr 28px 1fr;
}
.nv-om-split-receipt .nv-om-receipt-plan { padding: 0.65rem 0.75rem; gap: 2px; }
.nv-om-split-receipt .nv-om-receipt-plan-name { font-size: 0.82rem; min-height: 0; }
.nv-om-split-receipt .nv-om-receipt-plan-price { font-size: 1.1rem; margin: 0; }
.nv-om-split-receipt .nv-om-receipt-plan-meta { font-size: 0.68rem; }
.nv-om-split-receipt .nv-om-receipt-arrow svg { width: 20px; height: 20px; }
.nv-om-split-receipt .nv-om-receipt-math { padding: 0 1rem; margin: 0.35rem 0 0; }
.nv-om-split-receipt .nv-om-receipt-math-line { padding: 0.45rem 0; }
.nv-om-split-receipt .nv-om-receipt-math-text { font-size: 0.82rem; flex-basis: 180px; }
.nv-om-split-receipt .nv-om-receipt-math-amount { font-size: 0.92rem; }
.nv-om-split-receipt .nv-om-receipt-final {
    margin: 0.7rem 1rem 0;
    padding: 0.85rem 1rem;
}
.nv-om-split-receipt .nv-om-receipt-final-label { font-size: 0.7rem; }
.nv-om-split-receipt .nv-om-receipt-final-amount { font-size: 1.65rem; }
.nv-om-split-receipt .nv-om-receipt-benefits {
    padding: 0.65rem 1rem 0;
    margin-bottom: 0.6rem;
    gap: 0.4rem 0.9rem;
    flex-direction: column;
}
.nv-om-split-receipt .nv-om-receipt-benefits li { font-size: 0.76rem; }
.nv-om-split-receipt .nv-om-receipt-note {
    margin: 0 1rem 0.9rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.74rem;
}
.nv-om-receipt-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.85rem 1.15rem;
    background: linear-gradient(135deg, var(--nh-navy), var(--nh-navy-dark));
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
}
.nv-om-receipt-title svg { color: var(--nh-cyan-light, #22b8dc); flex-shrink: 0; }

/* Side-by-side plan cards */
.nv-om-receipt-plans {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    gap: 10px;
    padding: 1rem 1.15rem 0.5rem;
    align-items: stretch;
}
.nv-om-receipt-plan {
    background: var(--nv-card-bg, #fbfcfd);
    border: 1px solid var(--nh-gray-200);
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nv-om-receipt-plan--from {
    border-style: dashed;
    opacity: 0.92;
}
.nv-om-receipt-plan--to {
    background: linear-gradient(135deg, #f0fbff, #ffffff);
    border-color: var(--nh-cyan);
    box-shadow: 0 2px 6px rgba(8,145,178,.08);
}
.nv-om-receipt-plan-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    color: var(--nh-gray-500);
}
.nv-om-receipt-plan--to .nv-om-receipt-plan-label {
    color: var(--nh-cyan);
}
.nv-om-receipt-plan-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--nh-navy);
    line-height: 1.25;
    min-height: 1.6em;
}
.nv-om-receipt-plan-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--nh-navy);
    letter-spacing: -0.01em;
    margin: 2px 0 4px;
}
.nv-om-receipt-plan--to .nv-om-receipt-plan-price { color: var(--nh-cyan); }
.nv-om-receipt-plan-meta {
    font-size: 0.72rem;
    color: var(--nh-gray-500);
    line-height: 1.4;
}
.nv-om-receipt-plan-meta strong { color: var(--nh-navy); }

.nv-om-receipt-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nh-cyan);
}

/* Plain-Spanish math lines */
.nv-om-receipt-math {
    padding: 0 1.15rem;
    margin-top: 0.25rem;
}
.nv-om-receipt-math-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.7rem 0;
    border-bottom: 1px dashed var(--nh-gray-100);
    flex-wrap: wrap;
}
.nv-om-receipt-math-line:last-child { border-bottom: none; }
.nv-om-receipt-math-text {
    color: var(--nh-gray-700);
    font-size: 0.88rem;
    flex: 1 1 260px;
    line-height: 1.4;
}
.nv-om-receipt-math-amount {
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}
.nv-om-receipt-math-amount.is-credit { color: #059669; }
.nv-om-receipt-math-amount.is-charge { color: var(--nh-cyan); }

/* Final total — prominent */
.nv-om-receipt-final {
    margin: 0.85rem 1.15rem 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--nh-cyan), var(--nh-navy));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 4px 14px rgba(8,145,178,.22);
}
.nv-om-receipt-final-label {
    color: rgba(255,255,255,.85);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.nv-om-receipt-final-amount {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.nv-om-receipt.is-credit .nv-om-receipt-final {
    background: linear-gradient(135deg, #10b981, #047857);
    box-shadow: 0 4px 14px rgba(16,185,129,.25);
}
.nv-om-receipt.is-neutral .nv-om-receipt-final {
    background: linear-gradient(135deg, #64748b, #334155);
    box-shadow: none;
}

/* Benefits list */
.nv-om-receipt-benefits {
    list-style: none;
    padding: 0.85rem 1.15rem 0;
    margin: 0 0 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}
.nv-om-receipt-benefits li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nh-gray-600);
    font-size: 0.82rem;
    font-weight: 500;
}
.nv-om-receipt-benefits li svg { color: #10b981; flex-shrink: 0; }

.nv-om-receipt-note {
    margin: 0 1.15rem 1.15rem;
    padding: 0.7rem 0.9rem;
    background: #eff6ff;
    color: #1e40af;
    border-left: 3px solid var(--nh-cyan);
    border-radius: 4px;
    font-size: 0.8rem;
    line-height: 1.5;
}
.nv-om-receipt-note:empty { display: none; }
.nv-om-receipt-note strong { color: var(--nh-navy); }

@media (max-width: 576px) {
    .nv-om-receipt-plans {
        grid-template-columns: 1fr;
    }
    .nv-om-receipt-arrow {
        transform: rotate(90deg);
        padding: 4px 0;
    }
    .nv-om-receipt-final-amount { font-size: 1.6rem; }
}

/* ============================================================
   Legacy (keeps classes working if any page still uses them)
   ============================================================ */
.ns-proration-breakdown {
    margin-top: 1.25rem;
    border: 1px solid var(--nh-gray-200);
    border-radius: var(--nv-radius-md);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
    overflow: hidden;
}
.ns-proration-breakdown-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 1rem;
    background: var(--nv-navy);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.ns-proration-breakdown-title svg { color: var(--nh-cyan-light, #22b8dc); }
.ns-proration-breakdown-body { padding: 0.85rem 1.1rem 1rem; }
.ns-proration-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--nh-gray-100);
    flex-wrap: wrap;
    font-size: 0.9rem;
}
.ns-proration-row:last-child { border-bottom: none; }
.ns-proration-label {
    color: var(--nh-gray-600);
    flex: 1 1 200px;
}
.ns-proration-value {
    color: var(--nh-navy);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}
.ns-proration-value small {
    color: var(--nh-gray-500);
    font-weight: 500;
    margin-left: 4px;
}
.ns-proration-row--credit .ns-proration-value { color: #059669; }
.ns-proration-row--charge .ns-proration-value { color: var(--nh-cyan); }
.ns-proration-row--total {
    padding: 0.75rem 0.65rem;
    margin-top: 0.4rem;
    background: #f0fbff;
    border: 1.5px solid var(--nh-cyan);
    border-radius: 8px;
}
.ns-proration-row--total .ns-proration-label strong {
    color: var(--nh-navy);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ns-proration-row--total .ns-proration-value strong {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--nh-cyan);
}
.ns-proration-breakdown.is-credit .ns-proration-row--total {
    background: #ecfdf5;
    border-color: #10b981;
}
.ns-proration-breakdown.is-credit .ns-proration-row--total .ns-proration-value strong { color: #059669; }
.ns-proration-breakdown.is-neutral .ns-proration-row--total {
    background: var(--nh-gray-100);
    border-color: var(--nh-gray-300, #cbd5e1);
}
.ns-proration-breakdown.is-neutral .ns-proration-row--total .ns-proration-value strong { color: var(--nh-gray-600); }
.ns-proration-note {
    margin-top: 0.85rem;
    padding: 0.6rem 0.85rem;
    background: #eff6ff;
    color: #1e40af;
    border-left: 3px solid var(--nh-cyan);
    border-radius: 4px;
    font-size: 0.82rem;
    line-height: 1.5;
}
.ns-proration-note strong { color: var(--nh-navy); }
.ns-t-credit { color: #059669 !important; }
.ns-t-charge { color: var(--nh-cyan) !important; }

/* ---------- Inline-style replacements ---------- */
.nc-surface-secondary { background: var(--tblr-bg-surface-secondary); }
.nc-bg-none { background: none; }
.nc-card--border-cyan  { border-top: 3px solid var(--tblr-cyan); }
.nc-card--border-wp    { border-top: 3px solid #2563eb; }
.nc-card--border-iomad { border-top: 3px solid #7c3aed; }
.nc-card--border-ojs   { border-top: 3px solid #0d9488; }
.nc-card--border-moodle{ border-top: 3px solid #f97316; }
.nc-card--border-amber { border-top: 3px solid var(--nh-amber); }
.nc-card--border-green { border-top: 3px solid #10b981; }
.nc-card--border-red   { border-top: 3px solid #ef4444; }
.nc-card--border-muted { border-top: 3px solid #94a3b8; }

.nc-cursor-default { cursor: default; }
.nc-fs-sm { font-size: 0.88rem; }
.nc-fs-xs { font-size: 0.78rem; }

.nc-list-reasons {
    font-size: 0.9rem;
    color: var(--ns-text-soft);
    line-height: 1.9;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nc-list-reasons li {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.nc-list-reasons svg {
    color: var(--ns-primary);
    flex-shrink: 0;
    margin-top: 3px;
}

.nc-inline-icon {
    vertical-align: -3px;
    margin-right: 4px;
    color: var(--ns-primary);
}

.nc-plan-grid-wide { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Card header title flex row (action cards + section titles) */
.nc-card-header-flex {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Invoice hero (branded band) */
.nc-invoice-band-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ffffff;
}
.nc-invoice-band-nr {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* Deposit card (balance) */
.nc-deposit-card {
    border-radius: var(--nv-radius-lg);
    box-shadow: var(--nv-shadow-sm);
    border: 1px solid var(--nh-gray-200);
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.nc-deposit-body { padding: 1.5rem; }
.nc-deposit-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.25rem;
}
.nc-deposit-title {
    color: var(--nh-navy);
    font-weight: 700;
    margin: 0;
    font-size: 1rem;
}
.nc-deposit-sub {
    color: var(--nh-gray-500);
    margin: 0;
    font-size: 0.8rem;
}

/* Danger-bordered card (active incidents) */
.nc-card--danger {
    background: var(--nv-card-bg);
    border-radius: var(--nv-radius-lg);
    box-shadow: var(--nv-shadow-sm);
    border: 1px solid #fecaca;
    overflow: hidden;
    position: relative;
}

/* Icon wrap helpers */
.nc-icon-wrap--mx-auto { margin: 0 auto; }

/* Backup card / hosting backups */
.nc-backup-card {
    position: relative;
    background: var(--nv-card-bg);
    border-radius: var(--nv-radius-lg);
    box-shadow: var(--nv-shadow-sm);
    border: 1px solid var(--nh-gray-200);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all .15s ease;
}
.nc-backup-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--nv-shadow-md);
    border-color: var(--nh-cyan);
}
.nc-backup-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--nh-navy);
    margin: 0 0 2px;
    line-height: 1.3;
}
.nc-backup-domain {
    color: var(--nh-gray-500);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

/* Status chips (backups: available, queued, etc.) */
.nc-chip--status-available     { background: #cffafe; color: #0891b2; }
.nc-chip--status-link_expired,
.nc-chip--status-file_deleted  { background: #f1f5f9; color: #64748b; }
.nc-chip--status-queued,
.nc-chip--status-processing    { background: #dbeafe; color: #2563eb; }
.nc-chip--status-failed        { background: #fee2e2; color: #dc2626; }
.nc-chip--status-pending       { background: #fef3c7; color: #d97706; }

.nc-chip--type-ondemand  { background: #d1fae5; color: #059669; }
.nc-chip--type-automatic { background: #dbeafe; color: #2563eb; }

/* Retention info card (bottom) */
.nc-retention-card {
    border-radius: var(--nv-radius-lg);
    box-shadow: var(--nv-shadow-sm);
    border: 1px solid var(--nh-cyan);
    overflow: hidden;
    background: linear-gradient(135deg, #f0fbff 0%, #ffffff 100%);
}
.nc-retention-accent { height: 3px; background: var(--nh-cyan); }
.nc-retention-body {
    padding: 1.5rem;
    display: flex;
    gap: 15px;
    align-items: start;
}
.nc-retention-title {
    color: var(--nh-navy);
    font-weight: 700;
    margin: 0 0 0.5rem;
    font-size: 1rem;
}
.nc-retention-text {
    color: var(--nh-gray-600);
    font-size: 0.88rem;
    margin-bottom: 0.75rem;
}
.nc-retention-text:last-child { margin-bottom: 0; }
.nc-retention-text strong { color: var(--nh-navy); }

/* Inline status messages inside backup card */
.nc-backup-msg {
    margin-top: 0.85rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.8rem;
}
.nc-backup-msg--info    { background: #dbeafe; color: #1e40af; }
.nc-backup-msg--danger  { background: #fee2e2; color: #991b1b; }
.nc-backup-msg--muted   { background: #f1f5f9; color: var(--nh-gray-600); }

/* Disabled button state */
.nc-btn-disabled {
    background: var(--nh-gray-100);
    color: var(--nh-gray-500);
    border: none;
}
.nc-btn-disabled-outline {
    background: transparent;
    color: var(--nh-cyan);
    border: 1px solid var(--nh-cyan);
    font-weight: 600;
}

/* Transaction row (balance history) */
.nc-tx-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nc-tx-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nc-tx-icon--in  { background: #d1fae5; color: #10b981; }
.nc-tx-icon--out { background: #fef2f2; color: #ef4444; }
.nc-tx-desc {
    color: var(--nh-navy);
    font-weight: 500;
}
.nc-tx-amount {
    font-weight: 700;
    font-size: 1rem;
}

/* Tiny helpers */
.nc-max-w-520 { max-width: 520px; }
.nc-max-w-720 { max-width: 720px; }
.nc-max-w-400 { max-width: 400px; }
.nc-max-w-460 { max-width: 460px; }

/* Form label accent */
.nc-label-strong {
    color: var(--nh-navy);
    font-weight: 600;
    font-size: 0.8rem;
}

/* Profile-specific helpers (mod_client_profile) */
.nc-card--body-lg .card-body,
.nc-body-lg { padding: 1.75rem; }

.nc-gravatar-notice {
    background: linear-gradient(135deg, #f0fbff, #ffffff);
    border: 1px solid var(--nh-cyan);
    border-radius: var(--nv-radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.nc-gravatar-notice-inner {
    display: flex;
    gap: 12px;
    align-items: center;
}
.nc-gravatar-notice-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
}
.nc-gravatar-notice-text {
    font-size: 0.88rem;
    color: var(--nh-gray-700);
}
.nc-gravatar-notice-text strong { color: var(--nh-navy); }
.nc-gravatar-notice-text a { color: var(--nh-cyan); font-weight: 600; }

.nc-tab-ind {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    margin-left: 6px;
    color: #fff;
}
.nc-tab-ind--danger  { background: #ef4444; }
.nc-tab-ind--success { background: #10b981; }

.nc-api-key-actions {
    display: flex;
}

.nc-api-key-field {
    font-family: monospace;
    background: #fbfcfd;
}

/* MFA OTP input (large letters) already defined above; keep. */

/* Currency card reused; add letter variant */
.nc-currency-label-row { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--nh-gray-100); font-size: 0.85rem; color: var(--nh-gray-500); }

.nc-pre-codes {
    font-size: 1.1em;
    letter-spacing: 1px;
    background: var(--nh-gray-100);
    padding: 1rem;
    border-radius: 8px;
    color: var(--nh-navy);
    font-family: monospace;
}

/* Dark chip with hosted background for nc-gravatar-pill inside dark welcome */
.nc-min-w-0 { min-width: 0; }

.nc-secret-code {
    background: var(--nh-gray-100);
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--nh-navy);
    font-size: 0.8rem;
    word-break: break-all;
}

.nc-qr-img { max-width: 240px; }

/* nhd-unpaid-alert danger variant */
.nhd-unpaid-alert--danger {
    background: linear-gradient(135deg, #fee2e2, #fef2f2);
    border-color: #fecaca;
}
.nhd-unpaid-alert-icon--danger { background: #ef4444; }
.nhd-unpaid-alert-cta--danger  { background: #ef4444; }
.nhd-unpaid-alert-cta--danger:hover { background: #dc2626; }

/* Tabs header wrapper */
.nc-tabs-header {
    padding: 0 1rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--tblr-border-color, #e2e8f0);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

/* Solid cyan button */
.nc-btn-cyan-solid {
    background: var(--nh-cyan);
    color: #ffffff;
    border: none;
    font-weight: 600;
}
.nc-btn-cyan-solid:hover {
    background: var(--nv-navy);
    color: #ffffff;
}

/* Empty state row inside tables */
.nc-table-empty-row {
    padding: 2.5rem;
    text-align: center;
    color: var(--nh-gray-500);
}
.nc-table-empty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ─────────────────────────────────────────────────────────────
   MFA method rows — unified list for the profile MFA tab
   ───────────────────────────────────────────────────────────── */
.nc-method-row {
    padding: 1rem 0;
    border-top: 1px solid var(--nh-gray-100, #e5e7eb);
}
.nc-method-row:first-child { border-top: 0; padding-top: 0.25rem; }
.nc-method-row:last-child { padding-bottom: 0.25rem; }
.nc-method-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.nc-icon-wrap--40 {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(8, 145, 178, 0.08);
    flex-shrink: 0;
}
.nc-badge--recommended {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(30, 58, 95, 0.08));
    color: var(--nv-navy-ink);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(8, 145, 178, 0.25);
    white-space: nowrap;
}
.nc-badge--auto {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--nh-gray-100, #f3f4f6);
    color: var(--nh-gray-600, #475569);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.nc-method-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--nh-gray-100, #f3f4f6);
    color: var(--nh-gray-600, #475569);
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 6px;
}
.nc-method-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.nc-badge--active {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.30);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.nc-badge--optional {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--nh-gray-100, #f3f4f6);
    color: var(--nh-gray-500, #64748b);
    border: 1px solid var(--nh-gray-200, #e5e7eb);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.nc-method-row--registered {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, transparent 100%);
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

/* ==========================================================
   Welcome card + status pill (rediseño 2026-05-01)
   Usado en /order/service/manage/{id} para mostrar el header
   "Hosting Moodle · 100UD20GB" + dominio + estado semántico.
   Antes vivía en custom-dashboard.css (no se carga en layout
   default). Movido aquí para que aplique en páginas cliente.
   Definición única canónica desde 2026-07-10 (consolidado desde
   custom-nv-tokens.css/custom-nv-features.css, que tenían copias
   duplicadas/con drift). background/border-radius reales vienen
   de nv-modern.css (última capa, !important) — no editar aquí.
   ========================================================== */
.nhd-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.nhd-welcome {
    background: linear-gradient(135deg, #f0fbff 0%, #ffffff 60%, #ecfeff 100%);
    border: 1px solid var(--nh-gray-200, #E5E7EB);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.nhd-welcome::before {
    content: '';
    position: absolute;
    inset: auto -80px -80px auto;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(8, 145, 178, 0.12) 0%, transparent 70%);
    pointer-events: none;
}
.nhd-welcome-logo {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--nh-gray-200, #E5E7EB);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.06);
    transition: transform .2s ease;
}
.nhd-welcome-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.nhd-welcome:hover .nhd-welcome-logo { transform: translateY(-2px); }
/* Tinte semántico del fondo según plataforma — sutil para no competir
   con el logo. Usamos un tinte suave del color marca de cada platform. */
.nhd-welcome-logo--orange { background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%); border-color: #fed7aa; }
.nhd-welcome-logo--purple { background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%); border-color: #ddd6fe; }
.nhd-welcome-logo--teal   { background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%); border-color: #99f6e4; }
.nhd-welcome-logo--blue   { background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%); border-color: #bfdbfe; }
@media (max-width: 480px) {
    .nhd-welcome-logo { width: 52px; height: 52px; padding: 8px; }
}
.nhd-welcome-text { flex: 1 1 320px; min-width: 0; position: relative; z-index: 1; }
.nhd-welcome-hello {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--nh-navy, #1E3A5F);
    margin: 0 0 .5rem 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: break-word;
}
.nhd-welcome-sub {
    color: var(--nh-gray-600, #4B5563);
    font-size: .95rem;
    margin: 0;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.nhd-welcome-sub strong { color: var(--nh-navy, #1E3A5F); font-weight: 600; }
.nhd-welcome-sub svg { color: var(--nh-cyan, #0891b2); flex-shrink: 0; }
.nhd-domain-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--nh-cyan, #0891b2);
    background: rgba(8, 145, 178, 0.08);
    border: 1px solid rgba(8, 145, 178, 0.2);
    text-decoration: none;
    transition: all .15s ease;
    line-height: 1.3;
}
.nhd-domain-action:hover {
    background: var(--nh-cyan, #0891b2);
    color: #ffffff;
    border-color: var(--nh-cyan, #0891b2);
    text-decoration: none;
}
.nhd-domain-action svg { color: currentColor; }

/* Cross-link en orderbutton hacia Novadomains: tip al cliente que puede
   delegar el DNS gratis si no sabe cómo apuntar nameservers manualmente. */
.nh-orderdomain-cross {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    background: linear-gradient(135deg, rgba(8,145,178,0.06) 0%, #ffffff 80%);
    border: 1px solid rgba(8,145,178,0.18);
    border-radius: 12px;
}
.nh-orderdomain-cross__icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(8,145,178,0.12);
    color: var(--nh-cyan, #0891b2);
    display: flex; align-items: center; justify-content: center;
}
.nh-orderdomain-cross__body {
    flex: 1 1 auto;
    min-width: 0;
}
.nh-orderdomain-cross__body strong {
    display: block;
    font-size: 0.92rem;
    color: var(--nh-navy, #1E3A5F);
    margin-bottom: 2px;
}
.nh-orderdomain-cross .btn { flex-shrink: 0; }
@media (max-width: 640px) {
    .nh-orderdomain-cross { flex-direction: column; align-items: flex-start; }
    .nh-orderdomain-cross .btn { width: 100%; justify-content: center; }
}
.nhd-welcome-side {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
/* Pill informativa al lado derecho del hero — usada por _nha_hero
   partial para mostrar contadores rápidos (ej "Servicios activos: 5",
   "Saldo: US$0.00"). Cross-shared admin + cliente. */
.nhd-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--nh-gray-200, #E5E7EB);
    color: var(--nh-navy, #1E3A5F);
    font-weight: 600;
    font-size: .9rem;
    box-shadow: 0 2px 6px rgba(30, 58, 95, 0.05);
}
.nhd-balance-pill .nhd-balance-label {
    color: var(--nh-gray-500, #6B7280);
    font-weight: 500;
    font-size: .82rem;
}
.nhd-balance-pill .nhd-balance-amount {
    color: var(--nh-cyan, #0891b2);
    font-weight: 700;
}
.nhd-balance-pill--warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #b45309;
    color: #ffffff;
}
.nhd-balance-pill--warning .nhd-balance-label { color: #fef3c7; }
.nhd-balance-pill--warning .nhd-balance-amount { color: #ffffff; }
.nhd-balance-pill--success {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    border-color: #065f46;
    color: #ffffff;
}
.nhd-balance-pill--success .nhd-balance-label { color: #d1fae5; }
.nhd-balance-pill--success .nhd-balance-amount { color: #ffffff; }

.nhd-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1rem .55rem .85rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--nh-gray-200, #E5E7EB);
    color: var(--nh-navy, #1E3A5F);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(30, 58, 95, 0.05);
}
.nhd-status-pill .nhd-status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--nh-gray-400, #9CA3AF);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(156,163,175,0.18);
}
.nhd-status-pill .nhd-status-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 500;
    color: var(--nh-gray-500, #6B7280);
    line-height: 1;
    margin-bottom: 2px;
}
.nhd-status-pill .nhd-status-value {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--nh-navy, #1E3A5F);
}
.nhd-status-pill.is-success { border-color: #34d399; background: #ecfdf5; }
.nhd-status-pill.is-success .nhd-status-dot { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.22); }
.nhd-status-pill.is-success .nhd-status-value { color: #065f46; }
.nhd-status-pill.is-warning { border-color: #fcd34d; background: #fffbeb; }
.nhd-status-pill.is-warning .nhd-status-dot { background: #D97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.22); }
.nhd-status-pill.is-warning .nhd-status-value { color: #92400e; }
.nhd-status-pill.is-critical { border-color: #fca5a5; background: #fef2f2; }
.nhd-status-pill.is-critical .nhd-status-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.22); }
.nhd-status-pill.is-critical .nhd-status-value { color: #7f1d1d; }
.nhd-status-pill.is-neutral { border-color: #E5E7EB; background: #ffffff; }

@media (max-width: 640px) {
    .nhd-welcome { padding: 1.25rem 1.25rem; gap: 1rem; }
    .nhd-welcome-hello { font-size: 1.3rem; }
}

/* ─────────────────────────────────────────────────────────────────
   Guest tiles (panel home sin login)
   3 cards consistentes con navbar y diseño NovaHost.
   ───────────────────────────────────────────────────────────────── */
.nv-guest-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem 1.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
}
.nv-guest-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    border-color: transparent;
}
.nv-guest-tile::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    opacity: 0.08;
    pointer-events: none;
}
.nv-guest-tile--cyan { border-color: #ecfeff; }
.nv-guest-tile--cyan::before { background: #0891b2; }
.nv-guest-tile--cyan .nv-guest-tile-icon { background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); color: #ffffff; }
.nv-guest-tile--cyan:hover { border-color: #0891b2; }

.nv-guest-tile--navy { border-color: #eef2ff; }
.nv-guest-tile--navy::before { background: #1e3a8a; }
.nv-guest-tile--navy .nv-guest-tile-icon { background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%); color: #ffffff; }

.nv-guest-tile--amber { border-color: #fffbeb; }
.nv-guest-tile--amber::before { background: #d97706; }
.nv-guest-tile--amber .nv-guest-tile-icon { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #ffffff; }
.nv-guest-tile--amber:hover { border-color: #f59e0b; }

.nv-guest-tile-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 1.1rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}
.nv-guest-tile-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}
.nv-guest-tile-sub {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 1.2rem;
    flex: 1;
}
.nv-guest-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #0891b2;
    font-weight: 600;
    font-size: 0.92rem;
    margin-top: auto;
    transition: gap .15s ease;
}
.nv-guest-tile:hover .nv-guest-tile-cta { gap: 0.65rem; }
.nv-guest-tile--amber .nv-guest-tile-cta { color: #d97706; }

.nv-guest-tile-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    flex-wrap: wrap;
}
/* En móvil estrecho los botones se apilan para no comprimir el texto. */
@media (max-width: 380px) {
    .nv-guest-tile-actions { flex-direction: column; }
    .nv-guest-tile-btn { width: 100%; }
}
.nv-guest-tile-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.85rem;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
}
.nv-guest-tile-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.nv-guest-tile-btn--primary {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(8, 145, 178, .25);
}
.nv-guest-tile-btn--primary:hover {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, .35);
}

/* ─────────────────────────────────────────────────────────────────
   Navbar cliente v2 (02-May-2026)
   - Active state: pill con fondo cyan suave (sin línea inferior)
   - Hover: fondo gris muy claro
   - Sin transformaciones bruscas
   ───────────────────────────────────────────────────────────────── */
.navbar-expand-md .navbar-collapse .navbar .nav-link {
    padding: 0.55rem 0.95rem !important;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
    color: #475569;
    font-weight: 500;
}
.navbar-expand-md .navbar-collapse .navbar .nav-link:hover {
    background-color: rgba(15, 23, 42, .04);
    color: #0f172a;
}
.navbar-expand-md .navbar-collapse .navbar .nav-item.active .nav-link {
    background-color: #ecfeff;
    color: #0e7490;
    font-weight: 600;
}
.navbar-expand-md .navbar-collapse .navbar .nav-item.active .nav-link .nav-link-icon {
    color: #0891b2;
}

/* Tabler aplica un .nav-item.active::after (cyan, 2px, position:absolute, bottom:-4px)
   que crea la barra inferior. Lo desactivamos en TODOS los pseudo-elementos
   posibles para que el active state sea solo el pill (fondo cyan suave). */
.navbar-expand-md .navbar-collapse .navbar .nav-item::before,
.navbar-expand-md .navbar-collapse .navbar .nav-item::after,
.navbar-expand-md .navbar-collapse .navbar .nav-item.active::before,
.navbar-expand-md .navbar-collapse .navbar .nav-item.active::after,
.navbar-expand-md .navbar-collapse .navbar .nav-link::before,
.navbar-expand-md .navbar-collapse .navbar .nav-link::after,
.navbar-expand-md .navbar-collapse .navbar .nav-item.active .nav-link::before,
.navbar-expand-md .navbar-collapse .navbar .nav-item.active .nav-link::after {
    display: none !important;
    content: none !important;
}

/* Dropdowns: sombra sutil + animación opcional */
.navbar-expand-md .navbar-collapse .navbar .dropdown-menu {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .07);
    padding: 0.35rem;
    margin-top: 0.35rem;
}
.navbar-expand-md .navbar-collapse .navbar .dropdown-menu .dropdown-item {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: #334155;
    font-size: 0.9rem;
}
.navbar-expand-md .navbar-collapse .navbar .dropdown-menu .dropdown-item:hover,
.navbar-expand-md .navbar-collapse .navbar .dropdown-menu .dropdown-item:focus {
    background-color: #ecfeff;
    color: #0e7490;
}

/* Mobile collapse: stack vertical limpio */
@media (max-width: 767.98px) {
    .navbar-expand-md .navbar-collapse .navbar .navbar-nav { gap: 0.2rem; }
    .navbar-expand-md .navbar-collapse .navbar .nav-link { width: 100%; }
}

/* ==========================================================================
   DARK MODE — fondos claros/blancos hardcodeados de este archivo.
   Bloque único al final (no se edita cada regla en su sitio) para no tocar
   el CSS ya consolidado — mismo criterio que _brand-shared.css. Excluidos a
   propósito: .nc-qr-holder (el QR debe verse blanco siempre para poder
   escanearse), .nc-chip-dot--white (código muerto, sin uso en templates),
   y las barras/puntos de acento sólido saturado (--moodle, status-hero-bar,
   nhd-dot--status-*) que no necesitan texto emparejado.
   ========================================================================== */

/* Tarjetas/paneles planos blancos -> superficie de card dark */
[data-bs-theme="dark"] .nv-om-retention-option,
[data-bs-theme="dark"] .nv-om-retention-item,
[data-bs-theme="dark"] .nv-om-reason-card,
[data-bs-theme="dark"] .nv-om-retention-grid,
[data-bs-theme="dark"] .nv-om-retention-card,
[data-bs-theme="dark"] .nv-om-retention-card-discount,
[data-bs-theme="dark"] .nv-om-modal .nv-om-split-plans,
[data-bs-theme="dark"] .nv-guest-tile,
[data-bs-theme="dark"] .nhd-balance-pill,
[data-bs-theme="dark"] .nhd-status-pill,
[data-bs-theme="dark"] .nhd-status-pill.is-neutral {
    background: var(--nv-card-bg);
}
[data-bs-theme="dark"] .nhd-status-pill.is-neutral {
    border-color: var(--nv-border);
}
[data-bs-theme="dark"] .nv-om-retention-card-action {
    background: var(--nv-card-bg);
    color: var(--nv-text);
}

/* Paneles "soft" recesados (fbfcfd/f8fafc) dentro de una card */
[data-bs-theme="dark"] .nc-card-footer,
[data-bs-theme="dark"] .nc-item-card .nc-item-footer,
[data-bs-theme="dark"] .nc-fieldset,
[data-bs-theme="dark"] .nc-input-group-addon,
[data-bs-theme="dark"] .nc-input-readonly,
[data-bs-theme="dark"] .nc-api-key-field,
[data-bs-theme="dark"] .nv-om-retention-footer {
    background: var(--nv-page-bg);
}

/* Hover sutil (más claro que la card, no más oscuro) */
[data-bs-theme="dark"] .nv-om-reason-card:hover,
[data-bs-theme="dark"] .nc-table tbody tr:hover,
[data-bs-theme="dark"] .nc-tabs-header {
    background: var(--nv-border-soft);
}

/* Chips/iconos circulares grises neutros (no son badges de color) */
[data-bs-theme="dark"] .nv-om-retention-option-icon,
[data-bs-theme="dark"] .nv-om-retention-item-icon,
[data-bs-theme="dark"] .nv-om-reason-card-icon,
[data-bs-theme="dark"] .nv-om-retention-card-icon-muted,
[data-bs-theme="dark"] .nc-chip--status-link_expired,
[data-bs-theme="dark"] .nc-chip--status-file_deleted,
[data-bs-theme="dark"] .nv-guest-tile-btn {
    background: var(--nv-border-soft);
    color: var(--nv-text-soft);
}

/* Banners/wraps con tinte pastel de peligro (rojo) */
[data-bs-theme="dark"] .nv-om-cancel-confirm-wrap {
    background: var(--nv-danger-soft);
    border-color: rgba(239, 68, 68, 0.35);
}
[data-bs-theme="dark"] .nhd-unpaid-alert--danger {
    background: var(--nv-danger-soft);
}
[data-bs-theme="dark"] .nhd-status-pill.is-critical {
    background: var(--nv-danger-soft);
}
[data-bs-theme="dark"] .nhd-status-pill.is-warning {
    background: var(--nv-warning-soft);
}

/* Retención "keep" — texto teal sobre blanco, oscurece y aclara el teal */
[data-bs-theme="dark"] .nv-om-retention-footer-keep {
    background: var(--nv-card-bg);
    color: #2dd4bf;
    border-color: #2dd4bf;
}

/* Gradientes de dos tonos casi-blancos -> page-bg/card-bg */
[data-bs-theme="dark"] .nv-om-retention-hero {
    background: linear-gradient(180deg, var(--nv-page-bg) 0%, var(--nv-card-bg) 100%);
}
[data-bs-theme="dark"] .nv-om-modal .nv-om-split-receipt {
    background: linear-gradient(180deg, var(--nv-page-bg) 0%, var(--nv-card-bg) 100%);
}
[data-bs-theme="dark"] .ns-proration-breakdown {
    background: linear-gradient(180deg, var(--nv-card-bg) 0%, var(--nv-page-bg) 100%);
}
[data-bs-theme="dark"] .nc-deposit-card {
    background: linear-gradient(180deg, var(--nv-card-bg) 0%, var(--nv-page-bg) 100%);
}
[data-bs-theme="dark"] .nv-om-retention-option.is-recommended,
[data-bs-theme="dark"] .nv-om-retention-item.is-primary,
[data-bs-theme="dark"] .nv-om-reason-card.is-selected {
    background: var(--nv-card-bg);
}

/* Gradientes con lavado cyan de marca (f0fbff) -> primary-soft/card-bg */
[data-bs-theme="dark"] .nc-alert--info,
[data-bs-theme="dark"] .nc-currency-card,
[data-bs-theme="dark"] .nc-mfa-hero-card,
[data-bs-theme="dark"] .nv-om-receipt-plan--to,
[data-bs-theme="dark"] .nc-retention-card,
[data-bs-theme="dark"] .nc-gravatar-notice {
    background: linear-gradient(135deg, var(--nv-primary-soft), var(--nv-card-bg));
}
[data-bs-theme="dark"] .ns-proration-row--total {
    background: var(--nv-primary-soft);
}
[data-bs-theme="dark"] .nhd-welcome {
    background: linear-gradient(135deg, var(--nv-primary-soft) 0%, var(--nv-card-bg) 60%, var(--nv-primary-soft) 100%);
}
[data-bs-theme="dark"] .nh-orderdomain-cross {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.14) 0%, var(--nv-card-bg) 80%);
}

/* .nhd-welcome-logo y sus variantes de color NO llevan override dark: son
   badges circulares que alojan el logo <img> de la plataforma (Moodle,
   WordPress, IOMAD, OJS, cPanel) — logos de marca sin currentColor, algunos
   con trazos oscuros pensados para fondo claro (ej. OJS se vuelve invisible
   sobre un círculo oscuro). Se dejan siempre claros en ambos temas. */