/* ============================================================
   BLUELIFE MLM - Sistema de diseño
   Paleta inspirada en las referencias: azul corporativo + acentos
   ============================================================ */

:root {
    /* ===== Tema "Nación Digital" (oscuro) — reemplaza la paleta clara original.
       Los NOMBRES de las variables se conservan (para no tener que tocar cada
       regla del archivo), pero los VALORES ahora son los del tema oscuro. ===== */
    --azul-primario: #22D3EE;      /* antes azul, ahora el cian de acento principal */
    --azul-oscuro: #0A1128;        /* navy casi negro, para textos oscuros/fondos */
    --azul-claro: rgba(34,211,238,0.12); /* tinte translúcido cian sobre fondo oscuro */
    --azul-sidebar: #050B14;       /* fondo del sidebar, casi negro */
    --acento-fucsia: #E91E63;
    --acento-naranja: #F5A623;
    --acento-verde: #22C55E;
    --acento-cian: #22D3EE;
    --texto-principal: #E2E8F0;    /* texto claro sobre fondo oscuro */
    --texto-secundario: #94A3B8;   /* gris azulado */
    --fondo-app: #050B14;          /* fondo general de la app */
    --blanco: #101B33;             /* "superficie": ahora es la tarjeta oscura, no blanco */
    --borde: rgba(148,163,184,0.18);
    --radio-md: 12px;
    --radio-lg: 18px;
    --sombra-card: 0 8px 24px rgba(0,0,0,0.35);
    --sombra-card-hover: 0 0 26px -4px rgba(34,211,238,0.4), 0 14px 32px rgba(0,0,0,0.45);
    --fuente: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente);
    background:
        radial-gradient(circle at 100% 0%, rgba(59,130,246,0.10) 0%, transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(34,211,238,0.08) 0%, transparent 40%),
        var(--fondo-app);
    background-attachment: fixed;
    color: var(--texto-principal);
}

a { color: var(--azul-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Layout general con sidebar --- */
.app-layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 260px;
    background: linear-gradient(165deg, var(--azul-sidebar), var(--azul-oscuro) 60%, #0A1B4D);
    color: #fff;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.sidebar::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(34,211,238,0.18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.sidebar::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(233,30,99,0.12), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.sidebar .logo {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 24px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.sidebar .logo-img { max-width: 100%; height: auto; }
.badge-admin-tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: var(--acento-naranja);
    color: #fff;
    padding: 3px 8px;
    border-radius: 20px;
}

.sidebar nav { position: relative; z-index: 1; }

.sidebar nav a {
    color: rgba(255,255,255,0.85);
    padding: 11px 14px;
    border-radius: var(--radio-md);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 500;
    transition: background 0.15s ease, transform 0.1s ease;
}

.sidebar nav a:hover, .sidebar nav a.active {
    background: rgba(255,255,255,0.16);
    text-decoration: none;
    color: #fff;
    transform: translateX(2px);
}

.sidebar nav a.active {
    background: rgba(34,211,238,0.18);
    box-shadow: inset 3px 0 0 var(--acento-cian);
}

.sidebar .user-card {
    margin-top: auto;
    background: rgba(255,255,255,0.1);
    border-radius: var(--radio-md);
    padding: 12px;
    font-size: 13px;
    position: relative;
    z-index: 1;
}

.main-content { flex: 1; padding: 24px 32px; max-width: 100%; }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.topbar .search-box {
    flex: 1;
    max-width: 480px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    padding: 10px 16px;
    color: var(--texto-secundario);
}

/* --- Cards / stats --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.card {
    background: var(--blanco);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%);
    border-radius: var(--radio-lg);
    padding: 20px;
    box-shadow: var(--sombra-card);
    border: 1px solid var(--borde);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow-x: auto;
}

.card-stat {
    position: relative;
    overflow: hidden;
}

.card-stat:hover {
    box-shadow: var(--sombra-card-hover);
    transform: translateY(-2px);
}

.card-stat::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 90px; height: 90px;
    background: radial-gradient(circle, var(--azul-claro), transparent 70%);
    border-radius: 50%;
}

.card-stat .label { color: var(--texto-secundario); font-size: 13px; margin-bottom: 6px; position: relative; }
.card-stat .value { font-size: 26px; font-weight: 800; margin-bottom: 4px; position: relative; }
.card-stat a { font-size: 13px; font-weight: 600; position: relative; }

.banner-bienvenida {
    background: linear-gradient(120deg, var(--azul-primario), var(--azul-oscuro) 70%);
    color: #fff;
    border-radius: var(--radio-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.banner-bienvenida::before {
    content: '';
    position: absolute;
    top: -50px; right: 40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(34,211,238,0.3), transparent 70%);
    border-radius: 50%;
}
.banner-bienvenida::after {
    content: '';
    position: absolute;
    bottom: -60px; right: 160px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(233,30,99,0.25), transparent 70%);
    border-radius: 50%;
}
.banner-bienvenida h2 { margin: 0 0 8px; font-size: 26px; position: relative; }
.banner-bienvenida p { margin: 0 0 16px; opacity: 0.92; position: relative; }
.banner-bienvenida .btn-primary { position: relative; }

.btn-primary, .btn-secondary {
    display: inline-block;
    border: none;
    border-radius: var(--radio-md);
    padding: 11px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.btn-primary:active, .btn-secondary:active { transform: scale(0.97); }
.btn-primary { background: var(--blanco); color: var(--azul-primario); border: 1px solid var(--borde); }
.btn-primary:hover { background: rgba(34,211,238,0.12); text-decoration: none; box-shadow: 0 0 16px -2px rgba(34,211,238,0.35); }
.banner-bienvenida .btn-primary { background: #fff; color: #0A1128; font-weight: 700; }
.banner-bienvenida .btn-primary:hover { background: #E2E8F0; box-shadow: none; }

form .btn-primary {
    background: linear-gradient(120deg, var(--azul-primario), #3B82F6);
    color: #04141C; font-weight: 700; width: 100%; margin-top: 12px; border: none;
}
form .btn-primary:hover { box-shadow: 0 0 20px -2px rgba(34,211,238,0.5); }

.btn-secondary { background: rgba(255,255,255,0.06); color: var(--texto-principal); border: 1px solid var(--borde); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* --- Alerts --- */
.alert { padding: 12px 16px; border-radius: var(--radio-md); margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.alert-success { background: rgba(34,197,94,0.12); color: #4ADE80; border-color: rgba(34,197,94,0.3); }
.alert-error { background: rgba(239,68,68,0.12); color: #F87171; border-color: rgba(239,68,68,0.3); }
.alert-warning { background: rgba(245,166,35,0.12); color: #FBBF24; border-color: rgba(245,166,35,0.3); }
.alert-info { background: var(--azul-claro); color: #67E8F9; border-color: rgba(34,211,238,0.3); }

/* --- Auth pages --- */
.auth-page {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(34,211,238,0.25), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(233,30,99,0.18), transparent 40%),
        linear-gradient(135deg, var(--azul-oscuro), var(--azul-sidebar));
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px 0;
}
/* El body::after global queda centrado como ítem de flex en .auth-page (login,
   registro, etc.) porque .auth-page es display:flex. Lo sacamos de ese flujo
   y lo fijamos abajo, sin tocar el texto/contenido (heredado de body::after). */
.auth-page::after {
    position: absolute;
    bottom: 14px; left: 0; right: 0;
    padding: 0 16px;
    color: rgba(255,255,255,0.75);
}
.auth-card {
    background: rgba(16,27,51,0.85); backdrop-filter: blur(12px);
    padding: 40px; border-radius: var(--radio-lg); width: 100%; max-width: 420px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); border: 1px solid rgba(148,163,184,0.15);
    position: relative; z-index: 1;
}
.auth-logo-img { display: block; max-width: 210px; height: auto; margin: 0 auto 20px; }
.auth-form label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--texto-principal); }
.auth-form input {
    width: 100%; padding: 11px 14px; border: 1px solid var(--borde); border-radius: var(--radio-md); font-size: 14px;
    background: rgba(255,255,255,0.05); color: var(--texto-principal);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-form input:focus { outline: none; border-color: var(--azul-primario); box-shadow: 0 0 0 3px rgba(34,211,238,0.15); }
.auth-form .form-row { display: flex; gap: 12px; }
.auth-form .form-row > div { flex: 1; }
.auth-footer { text-align: center; margin-top: 16px; font-size: 13.5px; }
.auth-footer a { color: var(--azul-primario); }

/* --- Productos / Tienda --- */
.productos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.producto-card {
    background: var(--blanco); border-radius: var(--radio-lg); overflow: hidden; border: 1px solid var(--borde);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.producto-card:hover { box-shadow: var(--sombra-card-hover); transform: translateY(-3px); }
.producto-card img { width: 100%; height: 150px; object-fit: cover; background: linear-gradient(135deg, var(--azul-claro), #dceaff); }
.producto-card .info { padding: 14px; }
.producto-card .nombre { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.producto-card .precio { font-weight: 700; color: var(--azul-primario); margin-bottom: 10px; }
.producto-card button { width: 100%; background: var(--azul-primario); color: #fff; border: none; padding: 10px; border-radius: var(--radio-md); cursor: pointer; font-weight: 600; }
.producto-card button:hover { background: var(--azul-oscuro); }

/* --- Tabla genérica --- */
table.tabla-datos { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--blanco); border-radius: var(--radio-lg); overflow: hidden; }
table.tabla-datos th { text-align: left; background: rgba(34,211,238,0.08); color: var(--azul-primario); font-size: 13px; padding: 12px 16px; }
table.tabla-datos td { padding: 12px 16px; border-top: 1px solid var(--borde); font-size: 14px; color: var(--texto-principal); }

/* --- Inputs/selects/textareas fuera de .auth-form (formularios del admin, etc.) --- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="url"], select, textarea {
    background: rgba(255,255,255,0.05);
    color: var(--texto-principal);
    border: 1px solid var(--borde);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="date"]:focus, input[type="tel"]:focus, input[type="url"]:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--azul-primario); box-shadow: 0 0 0 3px rgba(34,211,238,0.15);
}
input::placeholder, textarea::placeholder { color: rgba(148,163,184,0.6); }
.badge { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-pendiente { background: rgba(245,166,35,0.15); color: #FBBF24; }
.badge-aprobado, .badge-completado, .badge-pagado, .badge-disponible { background: rgba(34,197,94,0.15); color: #4ADE80; }
.badge-rechazado, .badge-fallido { background: rgba(239,68,68,0.15); color: #F87171; }

/* --- Árbol de afiliados --- */
.arbol-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.arbol-canvas-wrapper {
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg);
    height: 560px; overflow: hidden; position: relative; cursor: grab;
}
.arbol-canvas-wrapper.arrastrando { cursor: grabbing; }
.arbol-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.arbol-controles { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.arbol-controles button {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borde); background: var(--blanco); cursor: pointer; font-size: 16px;
}
.nodo-afiliado {
    position: absolute; width: 130px; background: var(--blanco); border: 2px solid var(--azul-primario);
    border-radius: var(--radio-md); text-align: center; padding: 10px 8px; box-shadow: var(--sombra-card);
}
.nodo-afiliado .avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--azul-claro); color: var(--azul-primario);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; font-weight: 700;
}
.nodo-afiliado .nombre { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nodo-afiliado .nickname { font-size: 11px; color: var(--texto-secundario); }
.nodo-pasaporte {
    font-size: 10.5px; font-weight: 700; margin-top: 6px; padding: 3px 6px;
    border-radius: 20px; background: var(--azul-claro); color: var(--azul-primario);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nodo-pasaporte.nodo-sin-pasaporte { background: rgba(148,163,184,0.1); color: var(--texto-secundario); font-weight: 500; }
.nodo-afiliado.sin-pasaporte { border-style: dashed; border-color: #CBD5E1; }
/* El resaltado de "raíz" usa un anillo (box-shadow) en vez de border-color,
   así no compite con el color del marco que indica el pasaporte de la persona. */
.nodo-afiliado.raiz { box-shadow: 0 0 0 3px var(--acento-naranja), var(--sombra-card); }
.nodo-afiliado .btn-expandir {
    position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    width: 20px; height: 20px; border-radius: 50%; background: var(--azul-primario); color: #fff;
    border: none; font-size: 12px; cursor: pointer; line-height: 20px;
}
.arbol-linea { position: absolute; background: var(--borde); z-index: 0; }

/* --- Menú móvil (botón hamburguesa + overlay) --- */
.menu-toggle-btn {
    display: none;
    position: fixed;
    top: 14px; left: 14px;
    z-index: 1001;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--azul-primario);
    color: #fff;
    border: none;
    box-shadow: var(--sombra-card);
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 60, 0.55);
    z-index: 999;
}
.sidebar-overlay.activo { display: block; }

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 10px 0 30px rgba(0,0,0,0.25);
    }
    .sidebar.sidebar-abierto { transform: translateX(0); }

    .menu-toggle-btn { display: flex; }

    .main-content { padding: 76px 16px 16px; }

    .topbar { flex-wrap: wrap; gap: 10px; }
    .topbar .search-box { max-width: 100%; }

    .auth-form .form-row { flex-direction: column; gap: 0; }
    .auth-card { padding: 28px 20px; }

    .arbol-canvas-wrapper { height: 420px; }
}

/* --- Layout de Mi Red (resumen + árbol) --- */
.red-layout { display: flex; gap: 20px; align-items: flex-start; }
.red-resumen { width: 260px; flex-shrink: 0; }
.red-arbol-col { flex: 1; min-width: 0; }

@media (max-width: 900px) {
    .red-layout { flex-direction: column; }
    .red-resumen { width: 100%; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .productos-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
    .banner-bienvenida { padding: 22px 20px; }
    .banner-bienvenida h2 { font-size: 21px; }
}

/* ============================================================
   PASAPORTES
   ============================================================ */

.pasaportes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.pasaporte-card {
    position: relative;
    background: var(--blanco);
    border-radius: var(--radio-lg);
    padding: 26px 22px;
    border: 2px solid var(--borde);
    box-shadow: var(--sombra-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
.pasaporte-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-card-hover); }

.pasaporte-emoji { font-size: 44px; margin-bottom: 6px; }
.pasaporte-nombre { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.pasaporte-precio { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.pasaporte-descripcion { font-size: 13px; color: var(--texto-secundario); margin-bottom: 14px; min-height: 36px; }

.lista-beneficios { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; width: 100%; }
.lista-beneficios li { font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--borde); }
.lista-beneficios li:last-child { border-bottom: none; }

.metodo-pago-opcion {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid var(--borde); border-radius: var(--radio-md); cursor: pointer; font-size: 14.5px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.metodo-pago-opcion:hover { background: var(--fondo-app); }
.metodo-pago-opcion input { margin: 0; }
.metodo-pago-opcion:has(input:checked) { border-color: var(--azul-primario); background: var(--azul-claro); }

.btn-pasaporte {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: 12px;
    border-radius: var(--radio-md);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    background: linear-gradient(120deg, var(--azul-primario), var(--azul-oscuro));
    color: #fff;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.btn-pasaporte:hover { text-decoration: none; box-shadow: 0 8px 22px rgba(30,86,227,0.35); }
.btn-pasaporte:active { transform: scale(0.97); }

.pasaporte-ribbon {
    position: absolute;
    top: 14px; right: -30px;
    background: var(--acento-naranja);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 4px 34px;
    transform: rotate(40deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Progresión visual por nivel: de sencillo a premium */
.tier-visitor { border-color: #CBD5E1; }
.tier-visitor .pasaporte-precio { color: #64748B; }

.tier-resident { border-color: #5EEAD4; }
.tier-resident .pasaporte-precio { color: #0D9488; }

.tier-affiliate { border-color: var(--azul-primario); }
.tier-affiliate .pasaporte-precio { color: var(--azul-primario); }

.tier-associate { border-color: var(--acento-fucsia); }
.tier-associate .pasaporte-precio { color: var(--acento-fucsia); }
.tier-associate .btn-pasaporte { background: linear-gradient(120deg, var(--acento-fucsia), #9D174D); }

.tier-ambassador { border-color: var(--acento-naranja); }
.tier-ambassador .pasaporte-precio { color: var(--acento-naranja); }
.tier-ambassador .btn-pasaporte { background: linear-gradient(120deg, var(--acento-naranja), #B45309); }

.tier-elite {
    border-color: #F5C542;
    background: linear-gradient(160deg, #FFFDF5, #FFF9E6);
    box-shadow: 0 10px 30px rgba(245, 197, 66, 0.25);
}
.tier-elite .pasaporte-precio { color: #B8860B; }
.tier-elite .btn-pasaporte { background: linear-gradient(120deg, #F5C542, #B8860B); color: #3A2A00; }
.tier-elite:hover { transform: translateY(-8px) scale(1.02); }

/* --- Estado: usuario ya tiene pasaporte --- */
.pasaporte-actual-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(120deg, var(--azul-primario), var(--azul-oscuro));
    color: #fff;
    border-radius: var(--radio-lg);
    padding: 26px 30px;
    margin-bottom: 20px;
}
.pasaporte-actual-emoji { font-size: 56px; }
.pasaporte-actual-label { margin: 0; font-size: 13px; opacity: 0.85; }
.pasaporte-actual-nombre { margin: 2px 0 4px; font-size: 26px; }
.pasaporte-actual-fecha { margin: 0; font-size: 13px; opacity: 0.8; }

/* --- Panel admin de pasaportes --- */
.pasaportes-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.pasaporte-admin-card { display: flex; flex-direction: column; }

.btn-eliminar-pasaporte {
    width: 100%;
    margin-top: 8px;
    padding: 9px;
    border-radius: var(--radio-md);
    border: 1px solid #FCA5A5;
    background: #FEF2F2;
    color: #B91C1C;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-eliminar-pasaporte:hover { background: #FEE2E2; }

/* --- Botón de cuenta fijo, esquina superior derecha (todas las páginas con sidebar) --- */
.cuenta-fab {
    position: fixed;
    top: 14px; right: 14px;
    z-index: 1001;
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--sombra-card);
    border: 2px solid #fff;
    background: var(--azul-primario);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cuenta-fab:hover { transform: scale(1.06); box-shadow: var(--sombra-card-hover); text-decoration: none; }
.cuenta-fab img { width: 100%; height: 100%; object-fit: cover; }

.main-content { padding-right: 76px; }
@media (max-width: 900px) {
    .main-content { padding-right: 60px; }
}

/* --- Copyright global (se agrega automáticamente al final de TODAS las páginas) --- */
body::after {
    content: 'Copyright © 2019-2026 ZRC Protocol | Powered by ZRC Protocol';
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--texto-secundario);
    padding: 18px 16px;
}

/* ============================================================
   MEDIDOR DE FORTALEZA DE CONTRASEÑA
   ============================================================ */
.fortaleza-contenedor { margin: 8px 0 4px; }
.fortaleza-barra { width: 100%; height: 6px; background: var(--borde); border-radius: 6px; overflow: hidden; }
.fortaleza-relleno { height: 100%; width: 0; background: var(--borde); transition: width 0.2s ease, background 0.2s ease; }
.fortaleza-label { font-size: 12px; font-weight: 700; margin: 4px 0 6px; min-height: 15px; }
.fortaleza-checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.fortaleza-checklist li { font-size: 11.5px; color: var(--texto-secundario); }
.fortaleza-checklist li.cumple { color: #15803D; }

/* ============================================================
   AVATAR / FOTO DE PERFIL
   ============================================================ */
.avatar-perfil {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,0.3);
}
.avatar-perfil-grande {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--azul-claro); display: block; margin: 0 auto 14px;
}
.avatar-placeholder {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.18); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px;
}
.avatar-placeholder-grande {
    width: 96px; height: 96px; border-radius: 50%;
    background: var(--azul-claro); color: var(--azul-primario);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 32px; margin: 0 auto 14px;
}

.user-card-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border-radius: var(--radio-md);
    color: #fff; text-decoration: none;
    background: rgba(255,255,255,0.1);
    transition: background 0.15s ease;
    margin-top: auto;
    position: relative; z-index: 1;
}
.user-card-link:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
.user-card-link .nombre { font-size: 13px; font-weight: 600; }
.user-card-link .ver-cuenta { font-size: 11px; opacity: 0.75; }
.logout-link-sidebar {
    display: block; text-align: center; font-size: 12px; color: rgba(255,255,255,0.7);
    margin-top: 6px;
}

/* ============================================================
   PÁGINA DE CUENTA
   ============================================================ */
.cuenta-danger-zone {
    border: 1px solid #FCA5A5; background: #FEF2F2; border-radius: var(--radio-lg);
    padding: 20px; margin-top: 24px;
}
.cuenta-danger-zone h4 { color: #B91C1C; margin-top: 0; }

@media (max-width: 600px) {
    .pasaporte-actual-card { flex-direction: column; text-align: center; }
}

/* ============================================================
   DASHBOARD v2 — topbar enriquecido, resumen de red/comisiones,
   acciones rápidas, notificaciones y franja promocional
   ============================================================ */

/* --- Sidebar: encabezados de sección + tarjeta "Reto del Mes" --- */
.nav-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin: 14px 8px 4px;
    position: relative;
    z-index: 1;
}

.sidebar-reto-card {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, rgba(255,138,0,0.22), rgba(255,138,0,0.06));
    border: 1px solid rgba(255,178,90,0.35);
    border-radius: var(--radio-md);
    padding: 14px;
    text-align: center;
    margin: 10px 4px 4px;
}
.sidebar-reto-emoji { font-size: 26px; margin-bottom: 4px; }
.sidebar-reto-titulo { margin: 0; font-size: 13.5px; font-weight: 700; color: #fff; }
.sidebar-reto-texto { margin: 2px 0 10px; font-size: 11.5px; color: rgba(255,255,255,0.75); }
.sidebar-reto-btn {
    display: block; background: var(--acento-naranja); color: #fff; font-weight: 700;
    font-size: 12.5px; padding: 8px; border-radius: var(--radio-md); text-decoration: none;
}
.sidebar-reto-btn:hover { text-decoration: none; opacity: 0.9; }

/* --- Topbar enriquecido --- */
.topbar .search-box { display: flex; align-items: center; gap: 8px; color: var(--texto-secundario); }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.topbar-icon-btn {
    position: relative;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--blanco);
    border: 1px solid var(--borde);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    cursor: pointer;
    color: var(--texto-principal);
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.topbar-icon-btn:hover { box-shadow: var(--sombra-card); text-decoration: none; }
.topbar-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--acento-fucsia); color: #fff;
    font-size: 10.5px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 0 2px #fff;
}

.topbar-dropdown { position: relative; }
.topbar-dropdown-panel {
    display: none;
    position: absolute; top: calc(100% + 10px); right: 0;
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-md);
    box-shadow: var(--sombra-card-hover);
    width: 300px; max-height: 360px; overflow-y: auto;
    z-index: 50; padding: 8px;
}
.topbar-dropdown-panel.abierto { display: block; }
.topbar-dropdown-header { font-weight: 700; font-size: 13.5px; padding: 8px 10px 10px; }
.topbar-dropdown-empty { font-size: 13px; color: var(--texto-secundario); padding: 10px; text-align: center; }
.topbar-notif-item {
    display: flex; gap: 10px; padding: 9px 10px; border-radius: var(--radio-md);
    color: inherit; text-decoration: none;
}
.topbar-notif-item:hover { background: var(--fondo-app); text-decoration: none; color: inherit; }
.topbar-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; margin-top: 6px; flex-shrink: 0; }
.topbar-notif-item.no-leida .topbar-notif-dot { background: var(--azul-primario); }
.topbar-notif-item.no-leida p { font-weight: 700; }
.topbar-notif-item p { margin: 0; font-size: 13px; line-height: 1.4; }
.topbar-notif-item span { font-size: 11.5px; color: var(--texto-secundario); }
.topbar-dropdown-footer {
    display: block; text-align: center; padding: 10px; margin-top: 4px;
    font-size: 12.5px; font-weight: 600; color: var(--azul-primario);
    border-top: 1px solid var(--borde);
}
.topbar-dropdown-footer:hover { background: var(--fondo-app); text-decoration: none; }

.topbar-perfil-btn {
    display: flex; align-items: center; gap: 8px;
    background: var(--blanco); border: 1px solid var(--borde); border-radius: 30px;
    padding: 5px 12px 5px 5px; cursor: pointer;
}
.topbar-perfil-btn .avatar-perfil, .topbar-perfil-btn .avatar-placeholder { width: 32px; height: 32px; font-size: 13px; }
.topbar-perfil-info { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.topbar-perfil-info strong { font-size: 13px; }
.topbar-perfil-info small { font-size: 11px; color: var(--texto-secundario); }
.topbar-dropdown-panel-derecha { width: 210px; padding: 8px; }
.topbar-dropdown-panel-derecha a {
    display: block; padding: 9px 10px; border-radius: var(--radio-md); font-size: 13.5px; color: var(--texto-principal);
}
.topbar-dropdown-panel-derecha a:hover { background: var(--fondo-app); text-decoration: none; }

/* --- Página completa de notificaciones (cliente/notificaciones.php) --- */
.notificacion-item-full {
    display: flex; gap: 14px; align-items:flex-start; padding: 16px; border-radius: var(--radio-md);
    text-decoration: none; color: inherit; border: 1px solid var(--borde); margin-bottom: 10px;
    transition: box-shadow 0.15s ease;
}
.notificacion-item-full:hover { box-shadow: var(--sombra-card); text-decoration:none; color:inherit; }
.notificacion-item-full.no-leida { background: var(--azul-claro); border-color: #C7D7FB; }
.notificacion-item-full .notif-dot-full {
    width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: transparent;
}
.notificacion-item-full.no-leida .notif-dot-full { background: var(--azul-primario); }
.notificacion-item-full p { margin: 0 0 4px; font-size: 14.5px; }
.notificacion-item-full.no-leida p { font-weight: 700; }
.notificacion-item-full span { font-size: 12.5px; color: var(--texto-secundario); }

@media (max-width: 900px) {
    .topbar-perfil-info { display: none; }
    .topbar-actions { margin-left: auto; }
}

/* --- Filas de widgets del dashboard --- */
.dashboard-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}
.dashboard-row .card h3, .dashboard-row .card h4 { margin: 0; font-size: 15.5px; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-header a, .card-header .link-ver-todo { font-size: 12.5px; font-weight: 600; }

/* --- Mini árbol de red (vista previa en el dashboard) --- */
.mini-arbol { display: flex; flex-direction: column; align-items: center; padding: 6px 0 2px; }
.mini-arbol-nodo { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 74px; }
.mini-arbol-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: #fff;
    background: var(--azul-primario);
    border: 2px solid #fff; box-shadow: 0 0 0 2px var(--azul-primario);
}
.mini-arbol-nodo.nivel2 .mini-arbol-avatar { background: var(--acento-verde); box-shadow: 0 0 0 2px var(--acento-verde); }
.mini-arbol-nodo.nivel3 .mini-arbol-avatar {
    width: 30px; height: 30px; font-size: 11px;
    background: var(--acento-cian); box-shadow: 0 0 0 2px var(--acento-cian); color: #0F2E7A;
}
.mini-arbol-nombre { font-size: 11.5px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 74px; }
.mini-arbol-nivel-label { font-size: 10px; color: var(--texto-secundario); }

.mini-arbol-conector { width: 2px; height: 16px; background: var(--borde); }
.mini-arbol-fila { display: flex; gap: 22px; position: relative; padding-top: 16px; justify-content: center; flex-wrap: wrap; }
.mini-arbol-fila::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 2px; background: var(--borde);
}
.mini-arbol-rama { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.mini-arbol-rama::before {
    content: ''; position: absolute; top: -16px; left: 50%; width: 2px; height: 16px;
    background: var(--borde); transform: translateX(-50%);
}
.mini-arbol-nietos { display: flex; gap: 8px; margin-top: 4px; }
.mini-arbol-sin-datos { text-align: center; color: var(--texto-secundario); font-size: 13px; padding: 20px 0; }

/* --- Gráfico de comisiones (SVG generado en servidor) --- */
.comisiones-chart-select {
    border: 1px solid var(--borde); border-radius: var(--radio-md); padding: 6px 10px;
    font-size: 12.5px; color: var(--texto-principal); background: var(--blanco); cursor: pointer;
}
.comisiones-chart-total { font-size: 12.5px; color: var(--texto-secundario); margin: 0 0 2px; }
.comisiones-chart-monto { font-size: 24px; font-weight: 800; margin: 0 0 8px; }
.comisiones-chart-svg { width: 100%; height: auto; display: block; }
.comisiones-chart-footer {
    display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--borde); font-size: 12px; color: var(--texto-secundario);
}
.comisiones-chart-footer strong { display: block; color: var(--texto-principal); font-size: 14px; }

/* --- Comisiones recientes (lista) --- */
.lista-recientes { display: flex; flex-direction: column; gap: 2px; }
.item-reciente { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--borde); }
.item-reciente:last-child { border-bottom: none; }
.item-reciente-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: #fff; background: var(--azul-primario);
}
.item-reciente-info { flex: 1; min-width: 0; }
.item-reciente-nombre { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-reciente-detalle { font-size: 11.5px; color: var(--texto-secundario); }
.item-reciente-monto { font-weight: 700; color: var(--acento-verde); font-size: 13.5px; white-space: nowrap; }
.item-reciente-fecha { font-size: 10.5px; color: var(--texto-secundario); display: block; text-align: right; }

/* --- Acciones rápidas --- */
.acciones-rapidas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; text-align: center; }
.accion-rapida {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 6px; border-radius: var(--radio-md); text-decoration: none; color: var(--texto-principal);
    transition: background 0.15s ease;
}
.accion-rapida:hover { background: var(--fondo-app); text-decoration: none; }
.accion-rapida-icono {
    width: 42px; height: 42px; border-radius: 50%; background: var(--azul-claro); color: var(--azul-primario);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.accion-rapida span { font-size: 11.5px; font-weight: 600; }

/* --- Enlace de afiliado: iconos para compartir --- */
.compartir-iconos { display: flex; gap: 8px; margin-top: 12px; }
.compartir-iconos a {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; text-decoration: none;
}
.compartir-iconos a:hover { opacity: 0.88; text-decoration: none; }
.compartir-whatsapp { background: #25D366; }
.compartir-facebook { background: #1877F2; }
.compartir-twitter { background: #000000; }
.compartir-telegram { background: #26A5E4; }
.compartir-copiar { background: var(--azul-claro) !important; color: var(--azul-primario) !important; }

/* --- Notificaciones (widget del dashboard) --- */
.lista-notificaciones { display: flex; flex-direction: column; gap: 2px; }
.item-notificacion { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--borde); }
.item-notificacion:last-child { border-bottom: none; }
.item-notificacion-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--azul-primario); margin-top: 6px; flex-shrink: 0; }
.item-notificacion p { margin: 0; font-size: 13px; line-height: 1.4; }
.item-notificacion span { font-size: 11px; color: var(--texto-secundario); }

/* --- Franja promocional inferior --- */
.promo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 24px; }
.promo-card {
    background: var(--blanco); border-radius: var(--radio-lg); border: 1px solid var(--borde);
    box-shadow: var(--sombra-card); padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.promo-card-icono {
    width: 46px; height: 46px; border-radius: var(--radio-md);
    display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff;
}
.promo-card h4 { margin: 0; font-size: 15px; }
.promo-card p { margin: 0; font-size: 12.5px; color: var(--texto-secundario); flex: 1; }

/* --- Stats cards con icono (dashboard v2) --- */
.card-stat-icono {
    width: 44px; height: 44px; border-radius: var(--radio-md);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    margin-bottom: 10px; position: relative;
}

/* ============================================================
   PÁGINA DE BONOS E INCENTIVOS (cliente)
   ============================================================ */
.bonos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.bono-card {
    background: var(--blanco); border-radius: var(--radio-lg); border: 1px solid var(--borde); box-shadow: var(--sombra-card);
    padding: 22px; display: flex; flex-direction: column; gap: 8px;
}
.bono-card.bono-conseguido { border-color: var(--acento-verde); background: linear-gradient(160deg, rgba(34,197,94,0.12), var(--blanco)); }
.bono-card-emoji { font-size: 32px; }
.bono-card h4 { margin: 4px 0 0; font-size: 16px; }
.bono-card p { margin: 0; font-size: 13px; color: var(--texto-secundario); }
.bono-card-recompensa { font-size: 20px; font-weight: 800; color: var(--azul-primario); margin-top: 4px; }
.bono-progreso-barra { width: 100%; height: 8px; background: var(--borde); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.bono-progreso-relleno { height: 100%; background: var(--acento-verde); }

/* ============================================================
   PÁGINA DE RETO DEL MES / RANKING
   ============================================================ */
.reto-header {
    background: linear-gradient(120deg, var(--acento-naranja), #B45309);
    color: #fff; border-radius: var(--radio-lg); padding: 26px 30px; margin-bottom: 20px;
}
.reto-header h2 { margin: 0 0 6px; }
.reto-header p { margin: 0; opacity: 0.92; }
.reto-mi-posicion {
    display: flex; gap: 20px; align-items: center; background: var(--blanco); border: 2px solid var(--acento-naranja);
    border-radius: var(--radio-lg); padding: 18px 22px; margin-bottom: 20px;
}
.reto-mi-posicion .numero { font-size: 30px; font-weight: 800; color: var(--acento-naranja); }
tr.fila-usuario-actual { background: var(--azul-claro); font-weight: 700; }

/* ============================================================
   TEMA "NACIÓN DIGITAL" — nuevo sistema de diseño (fase 1: pasaportes)
   Prefijo nd- para no chocar con el tema claro usado en el resto del sitio.
   ============================================================ */
.nd-page {
    background:
        radial-gradient(circle at 15% 0%, rgba(34,211,238,0.10), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(59,130,246,0.12), transparent 40%),
        #050B14;
    min-height: 100vh;
    color: #E2E8F0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    padding: 0 0 60px;
}

.nd-hero { text-align: center; padding: 48px 24px 8px; }
.nd-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: #22D3EE; margin-bottom: 18px;
}
.nd-eyebrow::before, .nd-eyebrow::after { content: ''; width: 28px; height: 1px; background: rgba(34,211,238,0.5); }
.nd-titulo {
    font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: 0.01em;
    text-transform: uppercase; margin: 0 0 14px; line-height: 1.15;
}
.nd-titulo .nd-accent { color: #22D3EE; }
.nd-subtitulo { color: #94A3B8; font-size: 15px; max-width: 640px; margin: 0 auto 28px; line-height: 1.6; }
.nd-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 36px; }
.nd-divider .linea { width: 90px; height: 1px; background: linear-gradient(90deg, transparent, rgba(148,163,184,0.4), transparent); }
.nd-divider .icono { width: 34px; height: 34px; border: 1px solid rgba(34,211,238,0.4); border-radius: 8px; display: flex; align-items: center; justify-content: center; transform: rotate(45deg); color: #22D3EE; font-size: 13px; }
.nd-divider .icono span { transform: rotate(-45deg); }

.nd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: stretch;
}

.nd-card {
    position: relative;
    background: linear-gradient(180deg, rgba(15,23,42,0.75), rgba(8,13,26,0.85));
    border: 1px solid var(--nd-tier-color, rgba(148,163,184,0.25));
    border-radius: 18px;
    padding: 28px 22px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 20px 40px -20px rgba(0,0,0,0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 30px -6px var(--nd-tier-color, rgba(34,211,238,0.5)), 0 20px 40px -20px rgba(0,0,0,0.7);
}
.nd-card.nd-destacada { border-color: #F5A623; box-shadow: 0 0 24px -8px rgba(245,166,35,0.55); }
.nd-card.nd-premium { border-color: #22D3EE; box-shadow: 0 0 26px -6px rgba(34,211,238,0.6); }

.nd-badge-top {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 20px; white-space: nowrap;
}
.nd-badge-destacada { background: #F5A623; color: #1A1200; }
.nd-badge-premium { background: #22D3EE; color: #001A1F; }

.nd-icono-circulo {
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin: 4px auto 16px;
    background: radial-gradient(circle at 30% 25%, var(--nd-tier-glow, #3B82F6), var(--nd-tier-color, #1E3A8A));
    border: 1px solid rgba(255,255,255,0.15);
}
.nd-nombre-nivel { text-align: center; font-size: 18px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.nd-precio { text-align: center; margin-bottom: 10px; }
.nd-precio .monto { font-size: 26px; font-weight: 800; color: #fff; }
.nd-precio .periodo { font-size: 12.5px; color: #94A3B8; }
.nd-desc { text-align: center; font-size: 12.5px; color: #94A3B8; line-height: 1.5; padding-bottom: 14px; border-bottom: 1px solid rgba(148,163,184,0.15); margin-bottom: 14px; }

.nd-lista { list-style: none; padding: 0; margin: 0 0 20px; flex-grow: 1; }
.nd-lista li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: #CBD5E1; margin-bottom: 9px; line-height: 1.4; }
.nd-lista .check { color: var(--nd-tier-color, #22D3EE); flex-shrink: 0; margin-top: 1px; }

.nd-btn {
    display: block; text-align: center; text-decoration: none;
    padding: 11px 0; border-radius: 10px; font-weight: 700; font-size: 13.5px;
    border: 1px solid var(--nd-tier-color, #3B82F6); color: #fff;
    background: transparent; transition: background 0.2s ease;
}
.nd-btn:hover { background: var(--nd-tier-color, #3B82F6); }

.nd-footer-bar {
    max-width: 1400px; margin: 40px auto 0; padding: 22px 28px;
    border: 1px solid rgba(34,211,238,0.25); border-radius: 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 28px;
    background: rgba(15,23,42,0.5);
}
.nd-footer-bar .nd-footer-item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.nd-footer-bar .nd-footer-item .titulo { color: #22D3EE; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11.5px; display: block; }
.nd-footer-bar .nd-footer-item .desc { color: #94A3B8; }
.nd-footer-icono {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(34,211,238,0.4);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; color: #22D3EE;
}

.nd-pasaporte-actual {
    max-width: 1400px; margin: 0 auto 28px; padding: 0 24px;
}
.nd-pasaporte-actual-card {
    display: flex; align-items: center; gap: 18px;
    background: linear-gradient(135deg, rgba(34,211,238,0.12), rgba(15,23,42,0.6));
    border: 1px solid rgba(34,211,238,0.35); border-radius: 16px; padding: 20px 24px;
}
.nd-pasaporte-actual-card .icono { font-size: 34px; }
.nd-pasaporte-actual-card .label { font-size: 11.5px; color: #22D3EE; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.nd-pasaporte-actual-card .nombre { font-size: 20px; font-weight: 800; margin: 2px 0; }
.nd-pasaporte-actual-card .fecha { font-size: 12.5px; color: #94A3B8; margin: 0; }

@media (max-width: 640px) {
    .nd-grid { grid-template-columns: 1fr; }
}