:root {
    --bg-base: #0b1120;
    --bg-card: #1e293b;
    --bg-header: #1c3961;
    --highlight: #00d26a;
    --text-light: #e2e8f0;
    --text-muted: #cbd5e1;
    --vip: #ffd700;
    --vip-dark: #ffb300;
    --border-color: rgba(0, 210, 106, 0.2);
    --navbar-height: 120px; /* default navbar height for login page spacing */
}

body {
    background-color: var(--bg-base);
    color: var(--text-light);
    font-family: 'Raleway', sans-serif;
    min-height: 100vh;
}

/* Ensure the mesh background appears on the common page container classes used in templates */
.portal-page, .login-page, .notes-page, html, body {
    /* Malla cuadriculada al estilo Hugo index: líneas plomo, tamaño 40px, fondo oscuro */
    min-height: 100%;
    background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(255,255,255,0.015), rgba(0,0,0,0.10)) !important;
    background-repeat: repeat, repeat, no-repeat !important;
    background-position: 0 0, 0 0, center center !important;
    background-size: 40px 40px, 40px 40px, cover !important;
    background-clip: border-box !important;
    background-blend-mode: normal !important;
    background-attachment: fixed !important;
    background-color: var(--bg-base) !important;
    color: var(--text-light) !important;
}

.content-scroll-area {
    background: transparent !important;
}

/* If some template applies a white full-screen background inline, this rule increases specificity */
html.body-portal, body.portal-page.fullscreen-override, .page-fullscreen-override {
    background-color: var(--bg-base) !important;
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px), radial-gradient(ellipse at center, rgba(0,0,0,0.02), rgba(0,0,0,0.12)) !important;
}

/* Login page: fix navbar overlay and spacing when navbar is fixed */
body.login-page .navbar-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

body.login-page {
    padding-top: var(--navbar-height); /* use CSS variable so spacing follows navbar size */
}

/* Adjust navbar height variable for medium and small screens */
@media (max-width: 991.98px) {
    :root { --navbar-height: 100px; }
}
@media (max-width: 575.98px) {
    :root { --navbar-height: 80px; }
}

.navbar-custom {
    background-color: var(--bg-header);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    padding: 15px 0;
    position: relative;
    z-index: 1000;
}

/* Decorative top line like the Hugo site: vivid green thin bar */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--highlight) 0%, #7ef3a0 50%, var(--highlight) 100%);
    box-shadow: 0 2px 10px rgba(0, 210, 106, 0.12);
    z-index: 1100;
}

/* Ensure navbar sits below the decorative line when fixed */
.navbar-custom { border-top: 0; }

.navbar-custom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
}

.navbar-custom .hamburger-btn {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-wrap img, .logo-img {
    display: block;
    height: 65px; /* default desktop logo height */
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Responsive logo sizes */
@media (max-width: 991.98px) {
    .logo-img { height: 50px; }
}
@media (max-width: 575.98px) {
    .logo-img { height: 40px; }
}

.nav-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    margin-left: auto;
}

.nav-user .btn,
.nav-user .btn-config,
.nav-user .btn-logout {
    white-space: nowrap;
}

/* User badge in header (compact, professional) */
.user-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    box-sizing: border-box;
}
.user-badge .user-id {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.9rem;
    color: #e2e8f0;
}
.user-badge .user-role {
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1;
}

.nav-user .btn {
    border-radius: 8px;
    font-weight: 700;
}

.nav-user .btn-outline-light,
.nav-user .btn-outline-warning {
    border-width: 1.5px;
}

.nav-user .badge {
    white-space: nowrap;
}

.nav-link.vip-link {
    color: var(--vip) !important;
    opacity: 0.9;
}

.badge-vip {
    background-color: var(--vip);
    color: #0b1120;
    font-size: 0.65em;
    vertical-align: super;
    font-weight: 800;
    border-radius: 4px;
    padding: 2px 5px;
}

.btn-logout {
    color: #e74c3c;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

.btn-logout:hover {
    color: #ff6b6b;
    text-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}

.btn-config {
    color: #94a3b8;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    transition: 0.3s;
}

.btn-config:hover {
    color: #00d26a;
    text-shadow: 0 0 5px rgba(0, 210, 106, 0.5);
}

.icon-glow {
    filter: drop-shadow(0 0 5px rgba(0, 210, 106, 0.3));
    transition: all 0.3s ease;
}

.icon-glow:hover {
    filter: drop-shadow(0 0 12px rgba(0, 210, 106, 0.6));
    transform: scale(1.1);
}

.icon-vip {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-vip-glow {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
    transition: all 0.3s ease;
}

.icon-vip-glow:hover {
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7));
    transform: scale(1.15);
}

.icon-phone {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-iky {
    background: linear-gradient(135deg, #00d2ff, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-security {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-instagram {
    background: linear-gradient(135deg, #E1306C, #405DE6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-blackbird {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-check {
    background: linear-gradient(135deg, #00d2ff, #00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-times {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-email {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-stats {
    background: linear-gradient(135deg, #00d26a, #00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-highlight {
    color: var(--highlight);
    font-weight: 700;
}

.nav-link.vip-link {
    color: var(--vip) !important;
    opacity: 0.9;
}

.nav-link.vip-link.active {
    color: var(--highlight) !important;
    border-bottom: 3px solid var(--highlight) !important;
}

.badge-vip,
.badge-new,
.badge-disabled {
    display: inline-block;
    background-color: var(--vip);
    color: #0b1120;
    font-size: 0.65em;
    vertical-align: super;
    font-weight: 800;
    border-radius: 4px;
    padding: 2px 5px;
}

.badge-disabled {
    background-color: #ef4444;
    color: #fff;
}

.nav-tabs {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 1.75rem;
}

.tab-content {
    padding-top: 1.25rem;
}

.nav-tabs .nav-link {
    color: #94a3b8;
    border: 1px solid transparent;
    font-weight: 600;
    padding: 12px 20px;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    background: transparent !important;
    border-radius: 12px;
}

.nav-tabs .nav-link:hover {
    color: #fff;
    background: rgba(15, 23, 42, 0.88) !important;
}

.nav-tabs .nav-link.resource-link {
    border-color: transparent !important;
}

.nav-tabs .nav-link.resource-link:focus,
.nav-tabs .nav-link.resource-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    background: transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.vip-link.active,
.nav-link.vip-link.active {
    background: rgba(8, 28, 55, 0.95) !important;
    color: var(--highlight) !important;
    border: 1px solid rgba(0, 210, 106, 0.65) !important;
    border-bottom: 3px solid var(--highlight) !important;
    box-shadow: 0 0 20px rgba(0, 210, 106, 0.12) !important;
    margin-bottom: -1px;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible,
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active:focus-visible,
.nav-link:focus,
.nav-link:focus-visible,
.nav-link.active:focus,
.nav-link.active:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 106, 0.14) !important;
    border-color: rgba(0, 210, 106, 0.65) !important;
    background: rgba(8, 28, 55, 0.95) !important;
}

.nav-tabs .nav-link.active i {
    color: var(--highlight) !important;
}

.nav-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    margin-left: auto;
}

.nav-user .btn,
.nav-user .btn-config,
.nav-user .btn-logout {
    white-space: nowrap;
}

.btn-outline-light {
    border-color: rgba(255,255,255,0.2);
    color: #94a3b8;
    font-size: 0.75rem;
    padding: 4px 10px;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background: var(--highlight);
    color: #0b1120;
    border-color: var(--highlight);
}

.btn-outline-warning {
    color: var(--vip);
    border-color: var(--vip);
    font-size: 0.75rem;
    padding: 4px 10px;
    transition: all 0.3s ease;
}

.btn-outline-warning:hover {
    background: var(--vip);
    color: #0b1120;
}

/* Ensure the VIP icon remains visible when the button background turns gold */
.btn-outline-warning:focus .icon-vip,
.btn-outline-warning:active .icon-vip,
.btn-outline-warning:hover .icon-vip {
    -webkit-text-fill-color: #0b1120 !important;
    color: #0b1120 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

.main-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.card-custom {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    position: relative;
    padding: 2.5rem;
}

.card-custom::before {
    display: none !important;
}

.form-control,
.form-select {
    background-color: #0b1120;
    border: 1px solid #334155;
    color: #f8fafc !important;
    font-family: 'Courier New', monospace;
    padding: 12px 15px;
}

.form-control::placeholder,
.form-select::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

.form-control:focus,
.form-select:focus {
    background-color: #0b1120;
    border-color: var(--highlight);
    color: #f8fafc !important;
    box-shadow: 0 0 10px rgba(0, 210, 106, 0.2);
}

.form-label {
    color: #f8fafc;
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-tech {
    background-color: var(--highlight);
    color: #0b1120;
    font-weight: 800;
    border: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    padding: 14px;
    text-decoration: none;
    display: inline-block;
}

.btn-tech:hover {
    background-color: #fff;
    color: #0b1120;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 210, 106, 0.4);
}

.btn-back {
    background-color: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.btn-back:hover {
    border-color: #fff;
    color: #fff;
    transform: translateX(-3px);
}

.btn-back:hover i {
    transform: translateX(-3px);
    color: var(--vip);
}

.alert-custom {
    background-color: rgba(231, 76, 60, 0.1);
    border: 1px solid #e74c3c;
    color: #e74c3c;
    font-size: 0.9rem;
    text-align: center;
}

.info-box {
    margin-top: 25px;
    background-color: rgba(11, 17, 32, 0.6);
    border: 1px dashed #334155;
    border-radius: 8px;
    padding: 15px;
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.5;
}

.info-box span {
    color: var(--highlight);
    font-weight: 600;
}

.recaptcha-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    transform: scale(0.95);
    transform-origin: center;
}

.icon-phone {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-iky {
    background: linear-gradient(135deg, #00d2ff, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-pulse {
    animation: pulse-icon 2s ease-in-out infinite;
}

.icon-float {
    animation: float-icon 3s ease-in-out infinite;
}

@keyframes pulse-icon {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes float-icon {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

.toast-container-top-right {
    position: fixed;
    top: calc(var(--navbar-height, 78px) + 12px);
    right: 20px;
    z-index: 110000 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: calc(100vw - 40px);
}

.toast-tactical {
    background-color: #0b1120;
    border: 1px solid #1c3961;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    padding: 15px 20px;
    min-width: 300px;
    max-width: 450px;
    position: relative;
    overflow: hidden;
    animation: slideInRight 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards, fadeOut 0.4s ease 4.6s forwards;
}

.toast-icon-success {
    color: #00d26a;
    font-size: 1.3rem;
    margin-right: 15px;
}

.toast-icon-error {
    color: #ef4444;
    font-size: 1.3rem;
    margin-right: 15px;
}

.toast-message {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.5px;
    line-height: 1.4;
    min-width: 0;
    flex: 1 1 auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    animation: shrinkProgress 4.6s linear forwards;
}

.toast-progress.success {
    background-color: #00d26a;
}

.toast-progress.error {
    background-color: #ef4444;
}

@keyframes slideInRight {
    from { transform: translateX(110%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; visibility: hidden; }
}

@keyframes shrinkProgress {
    from { width: 100%; }
    to { width: 0%; }
}

.profile-icon {
    font-size: 2.5rem;
    color: var(--vip);
    margin-bottom: 10px;
}

.stat-box {
    background: rgba(255, 215, 0, 0.03);
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 8px;
    padding: 15px 20px;
    transition: all 0.3s ease;
}

.stat-box:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
}

.stat-box .stat-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-box .stat-value {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    margin-top: 4px;
}

.stat-box .stat-value.vip-text {
    color: var(--vip);
}

.plan-badge {
    display: inline-block;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.25);
    color: var(--vip);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-list li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
}

.tips-list li:last-child {
    border-bottom: none;
}

.tips-list li i {
    color: var(--vip);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.tips-list li strong {
    color: #fff;
}

* {
    box-sizing: border-box;
}

@media (max-width: 991.98px) {
    .navbar-custom .container {
        align-items: flex-start;
        flex-direction: column;
    }

    .logo-wrap {
        width: 100%;
        justify-content: flex-start;
    }

    .nav-user {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

/* Equalize header action buttons (desktop only) */
@media (min-width: 768px) {
    .navbar-custom .btn-back,
    .navbar-custom .btn-export,
    .navbar-custom .btn-outline-warning {
        min-width: 105px;
        height: 33px;
        padding: 4px 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
}
/* Equalize all action buttons inside the header user area on desktop */
@media (min-width: 768px) {
    .navbar-custom .nav-user .btn,
    .navbar-custom .nav-user a.btn,
    .navbar-custom .nav-user .btn-config,
    .navbar-custom .nav-user .btn-logout {
        min-width: 105px;
        height: 33px;
        padding: 4px 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* Mobile: compact icon buttons, consistent size */
@media (max-width: 767.98px) {
    .navbar-custom .btn-back.d-md-none,
    .navbar-custom .d-md-none .btn-export {
        min-width: 36px;
        height: 36px;
        padding: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
/* Ensure header children are vertically centered and remove stray top margin on .btn-back */
.navbar-custom .container.d-flex.align-items-center > * {
    align-self: center;
}
.navbar-custom .btn-back {
    margin-top: 0 !important;
}
/* Make navbar container a flexbox to guarantee vertical centering across templates */
.navbar-custom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
/* Small consistent gap between action buttons inside nav-user */
.navbar-custom .nav-user {
    gap: 0.4rem;
}
@media (max-width: 768px) {
    .navbar-custom .container {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .nav-user {
        width: 100%;
        justify-content: center;
    }

    .card-custom {
        padding: 20px;
    }

    .stat-box .stat-value {
        font-size: 0.95rem;
    }

    .btn-back {
        font-size: 0.8rem;
        padding: 8px 15px;
    }

    .profile-icon {
        font-size: 2rem;
    }
}

@media (max-width: 575.98px) {
    .navbar-custom {
        padding: 12px 0;
    }

    .logo-wrap img {
        height: 40px;
    }

    .nav-user {
        gap: 0.4rem 0.5rem;
    }

    .nav-user .btn,
    .nav-user .btn-config,
    .nav-user .btn-logout {
        padding: 0.4rem 0.65rem;
        font-size: 0.74rem;
    }

    .nav-user .badge {
        display: none;
    }

    /* Show a hamburger for small screens if present */
    .hamburger-btn { display: block; }
}

/* Responsive helpers consolidated */
@media (max-width: 1199.98px) {
    .container {
        max-width: 100%;
    }

    .card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 991.98px) {
    .navbar-custom .container {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-user {
        justify-content: flex-start;
        margin-left: 0;
        width: 100%;
    }

    .nav-user .btn,
    .nav-user .btn-config,
    .nav-user .btn-logout {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    body {
        background-size: 24px 24px;
    }

    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .table-responsive {
        font-size: 0.9rem;
    }

    img,
    iframe,
    svg {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 575.98px) {
    .logo-wrap img {
        height: 42px;
    }

    .nav-user {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-body,
    .card-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
}

/* Migrated from index.html */
/* Estilo para el texto y la opacidad del botón/enlace */
        .nav-link.vip-link { 
            color: var(--vip) !important; 
            opacity: 0.9; 
        }

        /* Estilo para la etiqueta flotante (badge) */
        .badge-vip { 
            background-color: var(--vip); 
            color: #0b1120; 
            font-size: 0.65em; 
            vertical-align: super; 
            font-weight: 800; 
            border-radius: 4px; 
            padding: 2px 5px;
        }

        /* Efecto de brillo en iconos */
        .icon-glow {
            filter: drop-shadow(0 0 5px rgba(0, 210, 106, 0.3));
            transition: all 0.3s ease;
        }

        .icon-glow:hover {
            filter: drop-shadow(0 0 12px rgba(0, 210, 106, 0.6));
            transform: scale(1.1);
        }

        /* Para iconos de módulos VIP */
        .icon-vip {
            background: linear-gradient(135deg, #ffd700, #ffb300);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .icon-vip-glow {
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
            transition: all 0.3s ease;
        }

        .icon-vip-glow:hover {
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7));
            transform: scale(1.15);
        }

        /* Iconos con gradiente para Instagram */
        .icon-instagram {
            background: linear-gradient(135deg, #E1306C, #405DE6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Iconos con gradiente para PhoneInfoga */
        .icon-phone {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Iconos con gradiente para iKy */
        .icon-iky {
            background: linear-gradient(135deg, #00d2ff, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Animación para iconos pulsantes */
        @keyframes pulse-icon {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .icon-pulse {
            animation: pulse-icon 2s ease-in-out infinite;
        }

        /* Animación para iconos flotantes */
        @keyframes float-icon {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }

        .icon-float {
            animation: float-icon 3s ease-in-out infinite;
        }

        :root {
            --bg-base: #0b1120;
            --bg-card: #1e293b;
            --bg-header: #1c3961;
            --highlight: #00d26a;
            --text-light: #e2e8f0;
            --text-muted: #cbd5e1;
            --vip: #ffd700;
            --instagram-primary: #E1306C;
            --instagram-secondary: #C13584;
            --instagram-accent: #405DE6;
            --border-color: rgba(0, 210, 106, 0.2);
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-light);
            font-family: 'Raleway', sans-serif;
            background-image: 
                linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            min-height: 100vh;
        }
        .navbar-custom {
            background-color: var(--bg-header);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            padding: 15px 0;
            position: relative;
            z-index: 1000;
        }
        .text-highlight { color: var(--highlight); font-weight: 700; }
        
        /* Pestañas de Navegación */
        .nav-tabs {
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .nav-tabs .nav-link { 
            color: #94a3b8; 
            border: none; 
            font-weight: 600; 
            padding: 12px 20px; 
            cursor: pointer; 
            transition: 0.3s; 
        }
        .nav-tabs .nav-link:hover { color: #fff; }
        .nav-tabs .nav-link.active { 
            background: transparent; 
            color: var(--highlight); 
            border-bottom: 3px solid var(--highlight); 
        }
        .nav-tabs .nav-link.active i {
            color: var(--highlight) !important;
        }

        /* Estilos para herramientas desactivadas */
        .nav-link.disabled-link {
            opacity: 0.5;
            cursor: not-allowed;
            color: var(--text-muted) !important;
            transition: opacity 0.3s ease;
        }

        .nav-link.disabled-link:hover {
            opacity: 0.6;
            color: var(--text-muted) !important;
        }

        .badge-disabled {
            background-color: #ef4444;
            color: #ffffff;
            font-size: 0.65em;
            vertical-align: super;
            font-weight: 800;
            border-radius: 4px;
            padding: 2px 5px;
        }

        /* Tarjeta Principal */
        .card-custom {
            background-color: var(--bg-card);
            border: 1px solid rgba(0, 210, 106, 0.2); 
            border-radius: 12px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.4);
            position: relative;
            padding: 2.5rem;
        }
        
        .form-control, .form-select {
            background-color: #0b1120;
            border: 1px solid #334155;
            color: white !important;
            font-family: 'Courier New', monospace;
            padding: 12px 15px;
        }
        .form-control::-webkit-input-placeholder { color: #94a3b8 !important; opacity: 1 !important; }
        .form-control::placeholder { color: #94a3b8 !important; opacity: 1 !important; }
        
        .form-control:focus, .form-select:focus {
            background-color: #0b1120;
            border-color: var(--highlight);
            color: white;
            box-shadow: 0 0 10px rgba(0, 210, 106, 0.2);
        }
        .btn-tech {
            background-color: var(--highlight);
            color: #0b1120;
            font-weight: 800;
            border: none;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 14px;
        }
        .btn-tech:hover {
            background-color: #fff;
            color: #0b1120;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 210, 106, 0.4);
        }
        #instagram-tab.nav-link.active {
            color: var(--instagram-primary);
            border-bottom-color: var(--instagram-primary);
        }
        #instagram-tab.nav-link:hover {
            color: var(--instagram-secondary);
        }
        .instagram-panel .text-highlight {
            color: var(--instagram-primary) !important;
        }
        .instagram-panel .card-custom {
            border-color: rgba(225, 48, 108, 0.28);
            box-shadow: 0 15px 30px rgba(225, 48, 108, 0.16);
        }
        .instagram-panel .form-control:focus, .instagram-panel .form-select:focus {
            border-color: var(--instagram-primary);
            box-shadow: 0 0 10px rgba(225, 48, 108, 0.25);
        }
        .instagram-panel .btn-tech {
            background: linear-gradient(135deg, var(--instagram-primary), var(--instagram-accent));
            color: #fff;
            box-shadow: 0 8px 20px rgba(225, 48, 108, 0.2);
        }
        .instagram-panel .btn-tech:hover {
            background: linear-gradient(135deg, var(--instagram-secondary), #F77737);
            color: #fff;
        }
        .nav-user { color: #fff; font-size: 0.95rem; font-weight: 600; }
        .btn-logout { color: #e74c3c; text-decoration: none; font-weight: bold; margin-left: 15px; font-family: 'Courier New', monospace;}
        .btn-logout:hover { color: #ff6b6b; text-shadow: 0 0 5px rgba(231, 76, 60, 0.5); }
        .btn-config { color: #94a3b8; text-decoration: none; font-weight: bold; margin-left: 15px; font-family: 'Courier New', monospace; transition: 0.3s; }
        .btn-config:hover { color: #00d26a; text-shadow: 0 0 5px rgba(0, 210, 106, 0.5); }
        /* TOAST NOTIFICATION TÁCTICA (POP-UP) */
        .toast-custom {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(11, 17, 32, 0.95);
            border-left: 4px solid #00d26a;
            box-shadow: 0 10px 30px rgba(0,0,0,0.6);
            padding: 15px 20px;
            border-radius: 6px;
            z-index: 9999;
            color: #e2e8f0;
            font-family: 'Raleway', sans-serif;
            font-weight: 600;
            font-size: 0.95rem;
            animation: slideInRight 0.5s ease forwards;
            overflow: hidden;
        }
        .toast-custom.hide {
            animation: fadeOutRight 0.5s ease forwards;
        }
        .toast-content { display: flex; align-items: center; }
        .toast-icon { color: #00d26a; font-size: 1.3rem; margin-right: 12px; }
        .toast-progress {
            position: absolute;
            bottom: 0; left: 0;
            height: 3px;
            background: #00d26a;
            width: 100%;
            animation: progressShrink 5s linear forwards;
        }
        @keyframes slideInRight { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @keyframes fadeOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }
        @keyframes progressShrink { from { width: 100%; } to { width: 0%; } }

        /* Estilo para el panel de retiro */
        .retired-panel .card-custom {
            border-color: #ef4444 !important;
            background: rgba(239, 68, 68, 0.03) !important;
        }
        .retired-panel .card-custom .alert {
            background: rgba(11, 17, 32, 0.8) !important;
            border-left: 4px solid #ef4444 !important;
            max-width: 700px;
            text-align: left;
            color: #cbd5e1;
            font-size: 0.95rem;
            line-height: 1.8;
        }
        .retired-panel .card-custom .alert strong {
            color: #fff;
        }
        .retired-icon {
            font-size: 4.5rem;
            margin-bottom: 20px;
        }
        .retired-title {
            font-size: 2.2rem;
            letter-spacing: 1px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 20px;
        }
        .retired-title span {
            color: #ef4444;
        }
        .retired-instagram .retired-title span {
            color: #E1306C;
        }
        .retired-instagram .card-custom {
            border-color: #E1306C !important;
            background: rgba(225, 48, 108, 0.03) !important;
        }
        .retired-instagram .card-custom .alert {
            border-left-color: #E1306C !important;
        }
        .retired-contact {
            color: #94a3b8;
            font-size: 0.85rem;
            font-family: 'Courier New', monospace;
            margin-top: 15px;
        }
        .retired-contact a {
            color: #3b82f6;
            text-decoration: none;
        }
        .retired-contact a:hover {
            text-decoration: underline;
        }

/* Migrated from maquinavirtual.html */
:root {
            --bg-base: #0b1120;
            --bg-card: #1e293b;
            --bg-header: #1c3961;
            --highlight: #00d26a;
            --text-light: #e2e8f0;
            --text-muted: #cbd5e1;
            --vip: #ffd700;
            --instagram-primary: #E1306C;
            --instagram-secondary: #C13584;
            --instagram-accent: #405DE6;
            --border-color: rgba(0, 210, 106, 0.2);
        }

        /* ==========================================================
           NUEVOS ESTILOS PARA ICONOS (Font Awesome 6.7.2)
           ========================================================== */
        
        /* Efecto de brillo en iconos */
        .icon-glow {
            filter: drop-shadow(0 0 5px rgba(0, 210, 106, 0.3));
            transition: all 0.3s ease;
        }

        .icon-glow:hover {
            filter: drop-shadow(0 0 12px rgba(0, 210, 106, 0.6));
            transform: scale(1.1);
        }

        /* Efecto de brillo para iconos VIP */
        .icon-vip-glow {
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
            transition: all 0.3s ease;
        }

        .icon-vip-glow:hover {
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7));
            transform: scale(1.15);
        }

        /* Iconos con gradiente dorado para VIP */
        .icon-vip {
            background: linear-gradient(135deg, #ffd700, #ffb300);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Iconos con gradiente azul para PhoneInfoga */
        .icon-phone {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Iconos con gradiente para iKy */
        .icon-iky {
            background: linear-gradient(135deg, #00d2ff, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Iconos con gradiente para Blackbird */
        .icon-blackbird {
            background: linear-gradient(135deg, #dc2626, #ef4444);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Animación para iconos pulsantes */
        @keyframes pulse-icon {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .icon-pulse {
            animation: pulse-icon 2s ease-in-out infinite;
        }

        /* Animación para iconos flotantes */
        @keyframes float-icon {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }

        .icon-float {
            animation: float-icon 3s ease-in-out infinite;
        }

        /* ==========================================================
           ESTILOS EXISTENTES
           ========================================================== */

        .nav-link.vip-link {
            color: var(--vip) !important;
            opacity: 0.9;
        }
        .badge-vip {
            background-color: var(--vip);
            color: #0b1120;
            font-size: 0.65em;
            vertical-align: super;
            font-weight: 800;
            border-radius: 4px;
            padding: 2px 5px;
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-light);
            font-family: 'Raleway', sans-serif;
            min-height: 100vh;
            background-image:
                linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
        }
        .navbar-custom {
            background-color: var(--bg-header);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            padding: 15px 0;
        }
        .text-highlight { color: var(--highlight); font-weight: 700; }
        .nav-user { color: #fff; font-size: 0.95rem; font-weight: 600; }
        .btn-logout { color: #e74c3c; text-decoration: none; font-weight: bold; margin-left: 15px; font-family: 'Courier New', monospace; }
        .btn-logout:hover { color: #ff6b6b; text-shadow: 0 0 5px rgba(231, 76, 60, 0.5); }
        .btn-config { color: #94a3b8; text-decoration: none; font-weight: bold; margin-left: 15px; font-family: 'Courier New', monospace; transition: 0.3s; }
        .btn-config:hover { color: #00d26a; text-shadow: 0 0 5px rgba(0, 210, 106, 0.5); }
        .nav-tabs {
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .nav-tabs .nav-link {
            color: #94a3b8;
            border: none;
            font-weight: 600;
            padding: 12px 20px;
            cursor: pointer;
            transition: 0.3s;
        }
        .nav-tabs .nav-link:hover {
            color: #fff;
        }
        .nav-tabs .nav-link.active {
            background: transparent;
            color: var(--highlight);
            border-bottom: 3px solid var(--highlight);
        }
        .nav-tabs .nav-link.active i {
            color: var(--highlight) !important;
        }
        .nav-link.vip-link.active {
            color: var(--highlight) !important;
            border-bottom: 3px solid var(--highlight) !important;
        }
        .badge-new {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--vip);
            border: 1px solid var(--vip);
            color: #0b1120;
            font-size: 0.65em;
            vertical-align: super;
            font-weight: 800;
            border-radius: 4px;
            padding: 2px 5px;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        .update-box {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 1rem 1.25rem;
            margin: 0 auto 1.5rem;
            max-width: 860px;
            color: var(--text-light);
            transition: background 0.3s ease, transform 0.3s ease;
        }
        .update-box:hover {
            background: rgba(255, 255, 255, 0.06);
            transform: translateY(-1px);
        }
        .update-box .update-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .update-box .update-header p {
            margin-bottom: 0.25rem;
            line-height: 1.4;
        }
        .update-box .update-summary {
            color: var(--text-muted);
            font-size: 0.95rem;
            margin-bottom: 0;
        }
        .update-box .update-toggle {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.18);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
            transition: background 0.2s ease, color 0.2s ease;
        }
        .update-box .update-toggle:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
        }
        .update-box strong {
            color: #fff;
        }
        .update-box ul {
            margin-bottom: 0;
        }
        .btn-tech {
            background-color: var(--highlight);
            color: #0b1120;
            font-weight: 800;
            border: none;
            border-radius: 8px;
            padding: 14px 22px;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .btn-tech:hover {
            background-color: #fff;
            color: #0b1120;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 210, 106, 0.35);
        }
        .card-custom {
            background-color: var(--bg-card);
            border: 1px solid rgba(0, 210, 106, 0.2);
            border-radius: 14px;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
            padding: 2.5rem;
        }
        .code {
            background: rgba(15, 23, 42, 0.95);
            border: 1px solid rgba(0, 210, 106, 0.18);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            color: #cbd5e1;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .warning {
            background: rgba(245, 158, 11, 0.08);
            border: 1px solid rgba(245, 158, 11, 0.25);
            border-radius: 10px;
            padding: 1rem 1.25rem;
            color: #f8e7c4;
            margin-top: 1rem;
        }
        .label-muted {
            color: var(--text-muted);
            font-size: 0.95rem;
        }
        .a-link {
            text-decoration: none;
            transition: 0.3s;
        }
        .a-link:hover {
            text-shadow: 0 0 8px rgba(0, 210, 106, 0.4);
        }
        
        /* Estilo específico para enlaces de descarga compactos */
        .link-box {
            padding: 0.5rem 1rem;
            margin-top: 0.15rem;
            margin-bottom: 0.5rem;
            background: rgba(15, 23, 42, 0.95);
            border: 1px solid rgba(0, 210, 106, 0.18);
            border-radius: 8px;
        }

        .link-box a {
            color: var(--highlight);
            text-decoration: none;
            display: block;
            word-break: break-word;
        }

        .link-box a i {
            color: var(--highlight);
            margin-right: 0.5rem;
        }

        .link-box a span {
            font-family: 'Courier New', monospace;
        }

        /* Estilo para las credenciales en línea */
        .credencial {
            display: inline-block;
            background: rgba(15, 23, 42, 0.95);
            border: 1px solid rgba(0, 210, 106, 0.18);
            border-radius: 8px;
            padding: 0.4rem 0.8rem;
            margin: 0.25rem 0.25rem 0 0;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
        }

        .credencial i {
            color: var(--highlight);
            margin-right: 0.4rem;
        }

        /* Ajuste para la lista de pasos */
        .lista-pasos {
            padding-left: 1.5rem;
            line-height: 2.2;
            color: var(--text-muted);
        }

        .lista-pasos li {
            margin-bottom: 0.2rem;
        }
        /* ==========================================================
   MEJORAS PARA LA LISTA DE PASOS
   ========================================================== */

        .lista-pasos {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .lista-pasos li {
            display: flex;
            align-items: flex-start;
            padding: 12px 16px;
            margin-bottom: 8px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 8px;
            border-left: 3px solid transparent;
            transition: all 0.3s ease;
            color: var(--text-muted);
            line-height: 1.6;
            gap: 4px;
        }

        .lista-pasos li:hover {
            background: rgba(0, 210, 106, 0.04);
            border-left-color: var(--highlight);
            transform: translateX(4px);
        }

        .lista-pasos li i {
            font-size: 1.1rem;
            margin-top: 2px;
            flex-shrink: 0;
            width: 24px;
            text-align: center;
        }

        .lista-pasos li strong {
            color: #fff;
            font-weight: 700;
        }

        .lista-pasos li .highlight-link {
            color: var(--highlight);
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .lista-pasos li .highlight-link:hover {
            text-shadow: 0 0 15px rgba(0, 210, 106, 0.3);
            text-decoration: underline;
        }

        .lista-pasos li .note-icon {
            color: #f59e0b;
            font-weight: 700;
        }

        .credencial {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(15, 23, 42, 0.95);
            border: 1px solid rgba(0, 210, 106, 0.18);
            border-radius: 8px;
            padding: 0.5rem 1rem;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            color: var(--text-muted);
            transition: all 0.3s ease;
        }

        .credencial:hover {
            border-color: var(--highlight);
            box-shadow: 0 0 20px rgba(0, 210, 106, 0.05);
        }

        .credencial i {
            color: var(--highlight);
            font-size: 1rem;
        }

        .credencial strong {
            color: #fff;
            font-weight: 700;
        }

        /* ==========================================================
        TOAST NOTIFICATION
        ========================================================== */
        .toast-copy {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(11, 17, 32, 0.95);
            border: 1px solid var(--highlight);
            border-radius: 10px;
            padding: 14px 28px;
            color: #fff;
            font-family: 'Raleway', sans-serif;
            font-weight: 600;
            font-size: 0.95rem;
            box-shadow: 0 10px 40px rgba(0,0,0,0.7);
            z-index: 99999;
            animation: slideUpToast 0.4s ease forwards;
            display: flex;
            align-items: center;
            gap: 12px;
            backdrop-filter: blur(10px);
        }

        @keyframes slideUpToast {
            from { opacity: 0; transform: translateX(-50%) translateY(30px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }

        @keyframes fadeOutToast {
            from { opacity: 1; transform: translateX(-50%) translateY(0); }
            to { opacity: 0; transform: translateX(-50%) translateY(-20px); }
        }

        @keyframes slideUpToast {
            from { opacity: 0; transform: translateX(-50%) translateY(30px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        @keyframes fadeOutToast {
            from { opacity: 1; transform: translateX(-50%) translateY(0); }
            to { opacity: 0; transform: translateX(-50%) translateY(-20px); }
        }

/* Migrated from notas.html */
:root {
        --bg-base: #0b1120;
        --bg-card: #1e293b;
        --bg-header: #1c3961;
        --highlight: #00d26a;
        --text-light: #e2e8f0;
        --text-muted: #94a3b8;
        --text-dark-muted: #475569;
        --vip: #ffd700;
        --border-tech: rgba(0, 210, 106, 0.2);
        --bg-table-hover: rgba(0, 210, 106, 0.05);
        --border-table: rgba(255, 255, 255, 0.05);
    }

    /* ==========================================================
       NUEVOS ESTILOS PARA ICONOS (Font Awesome 6.7.2)
       ========================================================== */
    
    /* Efecto de brillo en iconos */
    .icon-glow {
        filter: drop-shadow(0 0 5px rgba(0, 210, 106, 0.3));
        transition: all 0.3s ease;
    }

    .icon-glow:hover {
        filter: drop-shadow(0 0 12px rgba(0, 210, 106, 0.6));
        transform: scale(1.1);
    }

    /* Efecto de brillo para iconos VIP */
    .icon-vip-glow {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
        transition: all 0.3s ease;
    }

    .icon-vip-glow:hover {
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7));
        transform: scale(1.15);
    }

    /* Iconos con gradiente dorado para VIP */
    .icon-vip {
        background: linear-gradient(135deg, #ffd700, #ffb300);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Iconos con gradiente para estadísticas */
    .icon-stats {
        background: linear-gradient(135deg, #00d26a, #00ff88);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Animación para iconos pulsantes */
    @keyframes pulse-icon {
        0% { transform: scale(1); }
        50% { transform: scale(1.15); }
        100% { transform: scale(1); }
    }

    .icon-pulse {
        animation: pulse-icon 2s ease-in-out infinite;
    }

    /* Animación para iconos flotantes */
    @keyframes float-icon {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-5px); }
        100% { transform: translateY(0px); }
    }

    .icon-float {
        animation: float-icon 3s ease-in-out infinite;
    }

    /* ====================================================
       ESTILOS EXISTENTES
       ==================================================== */

    body {
        background-color: var(--bg-base);
        color: var(--text-light);
        font-family: 'Raleway', sans-serif;
        background-image: 
            linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        min-height: 100vh;
        margin: 0;
        padding: 0;
    }

    /* ====================================================
       HEADER FIJO (NAVBAR)
       ==================================================== */
    .navbar-custom {
        background-color: var(--bg-header);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        padding: 12px 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10005;
        transition: all 0.3s ease;
        border-bottom: 2px solid rgba(0, 210, 106, 0.2);
    }

    .navbar-custom.scrolled {
        padding: 8px 0;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
    }

    .navbar-custom .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }

    .logo-wrap {
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .logo-wrap img {
        height: 50px;
        width: auto;
        max-width: 100%;
        transition: height 0.3s ease;
    }

    .navbar-custom.scrolled .logo-wrap img {
        height: 42px;
    }

    .nav-user {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
    }

    .main-content {
        padding-top: 90px;
    }

    /* ====================================================
       TARJETAS Y ESTILOS BASE
       ==================================================== */
    .card-custom {
        background-color: var(--bg-card);
        border: 1px solid var(--border-tech);
        border-radius: 12px;
        box-shadow: 0 15px 30px rgba(0,0,0,0.4);
        padding: 2.5rem;
        position: relative;
        transition: all 0.3s ease;
    }
    
    .card-custom:hover {
        box-shadow: 0 15px 30px rgba(0, 210, 106, 0.1);
        border-color: rgba(0, 210, 106, 0.4);
    }

    /* ====================================================
       ESTADÍSTICAS RÁPIDAS
       ==================================================== */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: var(--bg-card);
        border: 1px solid var(--border-tech);
        border-radius: 10px;
        padding: 20px 15px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        border-color: var(--highlight);
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 210, 106, 0.1);
    }

    .stat-card .stat-icon {
        font-size: 1.5rem;
        color: var(--highlight);
        margin-bottom: 8px;
    }

    .stat-card .stat-label {
        color: var(--text-muted);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    .stat-card .stat-value {
        color: #fff;
        font-size: 1.8rem;
        font-weight: 800;
        font-family: 'Courier New', monospace;
        margin-top: 5px;
    }

    .stat-card .stat-value.highlight-value {
        color: var(--highlight);
    }

    .stat-card .stat-value.gold-value {
        color: #ffd700;
    }

    /* ====================================================
       ESTILOS EXISTENTES
       ==================================================== */
    .program-title {
        font-family: 'Courier New', monospace;
        font-size: 1.1rem;
        color: var(--highlight);
        background: #0b1120;
        border: 1px solid rgba(0, 210, 106, 0.18);
        border-radius: 12px;
        padding: 16px 22px;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        box-shadow: 0 14px 45px rgba(0, 0, 0, 0.22);
    }

    .status-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Courier New', monospace;
        background: rgba(0, 210, 106, 0.15);
        color: var(--highlight);
        border: 1px solid rgba(0, 210, 106, 0.2);
    }

    .form-control, .form-select {
        background-color: #0b1120;
        border: 1px solid #334155;
        color: #fff !important;
        font-family: 'Courier New', monospace;
        padding: 12px 15px;
        border-radius: 6px;
    }
    .form-control::placeholder { color: var(--text-muted) !important; opacity: 1 !important; }
    .form-control:focus, .form-select:focus {
        background-color: #0b1120;
        border-color: var(--highlight);
        color: white;
        box-shadow: 0 0 10px rgba(0, 210, 106, 0.2);
        outline: none;
    }

    .btn-tech {
        background-color: var(--highlight);
        color: #0b1120;
        font-weight: 800;
        border: none;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 14px;
        border-radius: 6px;
    }
    .btn-tech:hover {
        background-color: #fff;
        color: #0b1120;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 210, 106, 0.4);
    }

    .nav-tabs { 
        border-bottom: 1px solid rgba(255,255,255,0.1);
        gap: 5px;
    }
    .nav-tabs .nav-link { 
        color: var(--text-muted); 
        border: none; 
        font-weight: 700; 
        padding: 12px 24px; 
        cursor: pointer; 
        transition: 0.3s;
        font-family: 'Courier New', monospace;
        text-transform: uppercase;
        font-size: 0.85rem;
        background: transparent;
        border-radius: 6px 6px 0 0;
    }
    .nav-tabs .nav-link:hover { 
        color: #fff; 
        background: rgba(255,255,255,0.02);
    }
    .nav-tabs .nav-link.active { 
        background: var(--bg-card); 
        color: var(--highlight); 
        border: 1px solid var(--border-tech);
        border-bottom: 3px solid var(--highlight);
    }
    .nav-tabs .nav-link.active i {
        color: var(--highlight) !important;
    }

    .sub-tabs {
        border-bottom: 1px solid rgba(255,255,255,0.05);
        margin-bottom: 25px;
    }
    .sub-tabs .nav-link {
        color: var(--text-muted);
        font-size: 0.8rem;
        padding: 8px 16px;
        background: transparent;
        border: none;
        font-family: 'Courier New', monospace;
        text-transform: uppercase;
    }
    .sub-tabs .nav-link.active {
        color: var(--highlight);
        background: transparent;
        border-bottom: 2px solid var(--highlight);
        border-radius: 0;
    }
    .sub-tabs .nav-link:hover {
        color: #fff;
    }

    .block-title {
        font-size: 0.95rem;
        color: var(--highlight);
        font-weight: 800;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 1px solid var(--border-tech);
        padding-bottom: 10px;
    }
    
    .data-label { 
        color: #f8fafc; 
        font-size: 0.85rem; 
        font-weight: 700; 
        text-transform: uppercase; 
        letter-spacing: 0.04em; 
    }
    .data-value { 
        font-family: 'Courier New', monospace; 
        color: #f8fafc; 
        font-weight: 600; 
        font-size: 1.05rem; 
    }
    .kv { 
        color: #fff; 
        font-weight: 700; 
        font-family: 'Courier New', monospace; 
        font-size: 1.1rem; 
    }
    
    .desc-text {
        color: #cbd5e1 !important;
        font-size: 0.8rem;
        font-weight: 400;
        opacity: 1 !important;
    }
    
    .desc-text-light {
        color: #cbd5e1 !important;
        font-size: 0.8rem;
        font-weight: 400;
    }

    .big-score {
        font-size: 3.8rem;
        font-weight: 900;
        color: var(--highlight);
        font-family: 'Courier New', monospace;
        background: rgba(0, 210, 106, 0.05);
        border: 2px dashed var(--highlight);
        padding: 30px;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 0 20px rgba(0, 210, 106, 0.1);
    }

    .table-tech {
        width: 100%;
        color: var(--text-light);
        border-collapse: collapse;
        font-size: 0.95rem;
    }
    .table-tech th {
        color: var(--highlight);
        border-bottom: 2px solid var(--border-tech);
        text-transform: uppercase;
        font-size: 0.75rem;
        padding: 12px 15px;
        font-weight: 800;
        letter-spacing: 0.5px;
        background: rgba(0, 210, 106, 0.02);
    }
    .table-tech td {
        border-bottom: 1px solid var(--border-table);
        vertical-align: middle;
        padding: 14px 15px;
        background: transparent;
    }
    .table-tech tr:hover td {
        background: var(--bg-table-hover);
    }
    .table-tech .highlight-cell {
        color: var(--highlight);
        font-weight: 700;
        font-size: 1.1rem !important;
    }
    .table-tech .categoria-title {
        color: var(--highlight);
        font-weight: 700;
        font-size: 0.9rem;
    }
    .table-tech .puntaje-max {
        color: #94a3b8 !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }
    .table-tech td strong {
        color: #ffffff !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
    }
    .table-tech .pct-text {
        color: #64748b !important;
        font-size: 0.8rem !important;
        font-weight: 400 !important;
    }
    .table-tech .desc-evaluacion {
        color: #94a3b8 !important;
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    .rubric-detail-card {
        background: rgba(0, 210, 106, 0.02);
        border: 1px solid var(--border-table);
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
    }
    .rubric-detail-card .criterion-label {
        color: var(--text-light);
        font-weight: 600;
    }
    .rubric-detail-card .criterion-desc {
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .rubric-detail-card .criterion-score {
        color: var(--highlight);
        font-weight: 700;
        font-size: 1.1rem;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fade-in-up {
        animation: fadeInUp 0.5s ease-out;
    }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ====================================================
       BARRAS DE RANKING
       ==================================================== */
    .ranking-bar-container {
        background: rgba(255,255,255,0.05);
        border-radius: 4px;
        height: 24px;
        overflow: hidden;
        position: relative;
        width: 100%;
        max-width: 300px;
    }

    .ranking-bar {
        height: 100%;
        background: linear-gradient(90deg, #00d26a, #00ff88);
        border-radius: 4px;
        transition: width 1s ease;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 8px;
        font-size: 0.75rem;
        font-weight: 700;
        color: #0b1120;
        min-width: 30px;
    }

    .ranking-bar.gold { background: linear-gradient(90deg, #ffd700, #ffed4a); }
    .ranking-bar.silver { background: linear-gradient(90deg, #c0c0c0, #e8e8e8); }
    .ranking-bar.bronze { background: linear-gradient(90deg, #cd7f32, #e8a87c); }

    /* ====================================================
       MENSAJE DE ERROR MEJORADO
       ==================================================== */
    .alert-warning-tech {
        background: rgba(255, 215, 0, 0.08) !important;
        border: 1px solid #fbbf24 !important;
        color: #fbbf24 !important;
        font-family: 'Courier New', monospace;
        border-radius: 8px;
        padding: 18px 22px !important;
        display: flex;
        align-items: center;
        gap: 15px;
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.05);
    }

    .alert-warning-tech i {
        font-size: 1.8rem;
        color: #fbbf24;
        flex-shrink: 0;
    }

    .alert-warning-tech .alert-content {
        flex: 1;
    }

    .alert-warning-tech .alert-title {
        font-weight: 800;
        font-size: 1rem;
        display: block;
        margin-bottom: 4px;
    }

    .alert-warning-tech .alert-text {
        font-size: 0.9rem;
        opacity: 0.9;
        font-weight: 400;
    }


    /* --- TABLET / MÓVIL (menos de 992px) --- */
    @media (max-width: 992px) {
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        /* Logo más grande en móvil */
        .logo-wrap img {
            height: 55px !important;
        }
        
        .navbar-custom.scrolled .logo-wrap img {
            height: 45px !important;
        }
        
        /* Asegurar que el header no se rompa */
        .navbar-custom .container {
            flex-wrap: nowrap !important;
            padding: 10px 15px !important;
        }
        
        .nav-user .btn {
            font-size: 0.65rem !important;
            padding: 4px 8px !important;
        }
        
        .main-content {
            padding-top: 75px !important;
        }
        
        .main-content header h1 {
            font-size: 1.6rem !important;
        }
        .main-content header p {
            font-size: 0.9rem !important;
        }
        
        .card-custom {
            padding: 1.5rem !important;
        }
        .form-select, .form-control {
            font-size: 0.9rem !important;
            padding: 10px !important;
        }
        .btn-tech {
            font-size: 0.8rem !important;
            padding: 10px !important;
        }
        
        .stats-grid {
            grid-template-columns: 1fr 1fr !important;
            gap: 10px !important;
        }
        .stat-card {
            padding: 15px 10px !important;
        }
        .stat-card .stat-value {
            font-size: 1.3rem !important;
        }
        .stat-card .stat-label {
            font-size: 0.6rem !important;
        }
        .stat-card .stat-icon {
            font-size: 1.2rem !important;
        }
        
        .nav-tabs {
            flex-wrap: wrap !important;
            gap: 3px !important;
            justify-content: center !important;
        }
        .nav-tabs .nav-link {
            font-size: 0.65rem !important;
            padding: 6px 10px !important;
        }
        .nav-tabs .nav-link i {
            font-size: 0.8rem !important;
        }
        
        .program-title {
            font-size: 0.9rem !important;
            padding: 10px 15px !important;
        }
        
        .table-tech {
            font-size: 0.8rem !important;
        }
        .table-tech td, .table-tech th {
            padding: 8px 10px !important;
        }
        .table-tech .data-label {
            font-size: 0.7rem !important;
        }
        .table-tech .kv {
            font-size: 0.9rem !important;
        }
        .desc-text {
            font-size: 0.7rem !important;
        }
        
        .big-score {
            font-size: 2.5rem !important;
            padding: 20px !important;
        }
        
        .sub-tabs .nav-link {
            font-size: 0.7rem !important;
            padding: 6px 12px !important;
        }
        
        .ranking-bar-container {
            max-width: 150px !important;
        }
        
        .text-center.mt-5.pt-4.pb-4 {
            font-size: 0.7rem !important;
            padding: 10px 0 !important;
        }
    }

    /* --- MÓVIL (menos de 768px) --- */
    @media (max-width: 768px) {
        .hamburger-btn {
            display: block !important;
        }
        
        .nav-user .btn.d-none.d-md-inline-block {
            display: none !important;
        }
        
        .navbar-custom .container {
            padding: 10px 15px !important;
            flex-wrap: nowrap !important;
            justify-content: space-between !important;
        }
        
        .logo-wrap {
            flex: 0 0 auto;
        }
        
        .logo-wrap img {
            height: 50px !important;
        }
        
        .navbar-custom.scrolled .logo-wrap img {
            height: 40px !important;
        }
        
        .nav-user {
            flex: 0 0 auto;
            margin-left: 0;
            gap: 5px;
        }
        
        .main-content {
            padding-top: 95px !important;
        }
        
        .nav-user .btn {
            font-size: 0.6rem !important;
            padding: 3px 8px !important;
        }
    }

    /* --- MÓVIL PEQUEÑO (menos de 480px) --- */
    @media (max-width: 480px) {
        .navbar-custom .container {
            padding: 8px 12px !important;
        }
        
        .logo-wrap img {
            height: 45px !important;
        }
        
        .navbar-custom.scrolled .logo-wrap img {
            height: 36px !important;
        }
        
        .hamburger-btn {
            font-size: 1.5rem;
            padding: 3px 6px;
        }
        
        .nav-user .btn {
            font-size: 0.55rem !important;
            padding: 2px 6px !important;
        }
        
        .main-content {
            padding-top: 90px !important;
        }
        
        .main-content header h1 {
            font-size: 1.3rem !important;
        }
        .main-content header p {
            font-size: 0.75rem !important;
        }
        .card-custom {
            padding: 1rem !important;
        }
        .form-select, .form-control {
            font-size: 0.8rem !important;
            padding: 8px !important;
        }
        
        .stats-grid {
            grid-template-columns: 1fr 1fr !important;
            gap: 6px !important;
        }
        .stat-card {
            padding: 10px 6px !important;
        }
        .stat-card .stat-value {
            font-size: 1rem !important;
        }
        .stat-card .stat-label {
            font-size: 0.5rem !important;
        }
        .stat-card .stat-icon {
            font-size: 1rem !important;
            margin-bottom: 3px !important;
        }
        
        .nav-tabs .nav-link {
            font-size: 0.55rem !important;
            padding: 4px 6px !important;
        }
        .nav-tabs .nav-link i {
            font-size: 0.7rem !important;
            margin-right: 3px !important;
        }
        
        .program-title {
            font-size: 0.75rem !important;
            padding: 8px 10px !important;
        }
        
        .table-tech {
            font-size: 0.7rem !important;
        }
        .table-tech td, .table-tech th {
            padding: 5px 6px !important;
        }
        .table-tech .data-label {
            font-size: 0.6rem !important;
        }
        .table-tech .kv {
            font-size: 0.8rem !important;
        }
        .desc-text {
            font-size: 0.6rem !important;
        }
        .table-tech .highlight-cell {
            font-size: 0.9rem !important;
        }
        .table-tech td strong {
            font-size: 0.75rem !important;
        }
        .table-tech .pct-text {
            font-size: 0.6rem !important;
        }
        .table-tech .desc-evaluacion {
            font-size: 0.7rem !important;
        }
        .table-tech .puntaje-max {
            font-size: 0.7rem !important;
        }
        
        .big-score {
            font-size: 2rem !important;
            padding: 15px !important;
        }
        
        .sub-tabs .nav-link {
            font-size: 0.6rem !important;
            padding: 4px 8px !important;
        }
        
        .ranking-bar-container {
            max-width: 100px !important;
            height: 18px !important;
        }
        .ranking-bar {
            font-size: 0.6rem !important;
            min-width: 20px !important;
        }
        
        .mobile-menu {
            width: 280px;
        }
        
        .mobile-main-menu a {
            font-size: 0.95rem !important;
            padding: 12px 20px !important;
        }
    }

    /* --- TABLET (768px - 992px) --- */
    @media (min-width: 768px) and (max-width: 992px) {
        .stats-grid {
            grid-template-columns: repeat(4, 1fr) !important;
        }
        .stat-card .stat-value {
            font-size: 1.5rem !important;
        }
    }

/* Migrated from planes_vip.html */
:root {
            --bg-base: #0b1120;
            --bg-card: #111827;
            --bg-header: #1c3961;
            --highlight: #00d26a;
            --vip: #ffd700;
            --text-light: #e2e8f0;
            --text-muted: #94a3b8;
            --telegram-blue: #0088cc;
            --whatsapp-green: #25D366;
            --email-blue: #3b82f6;
        }

        /* ==========================================================
           NUEVOS ESTILOS PARA ICONOS (Font Awesome 6.7.2)
           ========================================================== */
        .icon-glow {
            filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3));
            transition: all 0.3s ease;
        }
        .icon-glow:hover {
            filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
            transform: scale(1.1);
        }
        .icon-vip-glow {
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
            transition: all 0.3s ease;
        }
        .icon-vip-glow:hover {
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7));
            transform: scale(1.15);
        }
        .icon-vip {
            background: linear-gradient(135deg, #ffd700, #ffb300);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .icon-check {
            background: linear-gradient(135deg, #00d26a, #00ff88);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .icon-times {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        @keyframes pulse-icon {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }
        .icon-pulse {
            animation: pulse-icon 2s ease-in-out infinite;
        }

        @keyframes float-icon {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }
        .icon-float {
            animation: float-icon 3s ease-in-out infinite;
        }

        /* ==========================================================
           ESTILOS GENERALES
           ========================================================== */
        body { 
            background-color: var(--bg-base); 
            color: var(--text-light); 
            font-family: 'Raleway', sans-serif;
            background-image: 
                linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            min-height: 100vh;
        }
        
        .navbar-custom { 
            background-color: var(--bg-header); 
            padding: 15px 0; 
            border-bottom: 2px solid var(--vip);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }
        
        .btn-tech { 
            background: linear-gradient(135deg, #ffd700, #ffb300);
            color: #0b1120; 
            border-radius: 8px; 
            border: none; 
            padding: 12px 22px; 
            font-weight: 700;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-decoration: none;
            display: inline-block;
            width: 100%;
        }
        
        .btn-tech:hover { 
            background: linear-gradient(135deg, #fff, #ffd700);
            color: #0b1120;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
        }

        .btn-tech:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important;
        }
        
        .btn-back { 
            background-color: transparent; 
            border: 1px solid var(--text-muted); 
            color: var(--text-muted); 
            font-weight: bold; 
            padding: 10px 20px; 
            border-radius: 6px; 
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
        }
        
        .btn-back:hover { 
            border-color: #fff; 
            color: #fff;
            transform: translateX(-3px);
        }

        .btn-back:hover i {
            color: var(--vip);
        }

        .btn-secondary-custom {
            background: rgba(255,255,255,0.05);
            color: var(--text-muted);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 8px;
            padding: 12px 22px;
            font-weight: 700;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: not-allowed;
            display: inline-block;
            width: 100%;
        }

        /* ==========================================================
           TARJETAS DE PLANES VIP
           ========================================================== */
        .plan-card { 
            border-radius: 14px; 
            padding: 30px 24px; 
            background: var(--bg-card); 
            border: 1px solid rgba(255,255,255,0.08); 
            min-height: 100%; 
            display: flex; 
            flex-direction: column;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .plan-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
        }

        .plan-card .plan-icon {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .plan-card .plan-price {
            font-size: 1.8rem;
            font-weight: 800;
            color: #fff;
            margin: 10px 0;
        }

        .plan-card .plan-price small {
            font-size: 0.9rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        .popular-badge {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #ffd700, #ffb300);
            color: #0b1120;
            padding: 5px 18px;
            border-radius: 20px;
            font-weight: 800;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
            z-index: 2;
        }

        .plan-card.active-plan {
            border-color: var(--vip) !important;
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.15) !important;
        }

        .plan-card.active-plan::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #ffd700, #ffb300);
        }

        .plan-divider {
            border: 0;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
            margin: 20px 0;
        }

        /* ==========================================================
           DESCRIPCIONES Y LISTAS (CORREGIDO PARA LEGIBILIDAD)
           ========================================================== */
        .plan-description {
            color: var(--text-muted);
            font-size: 0.9rem;
            line-height: 1.6;
            text-align: left;
        }

        .plan-description p {
            margin-bottom: 12px;
        }

        .plan-description strong {
            color: #fff;
        }

        /* Lista de beneficios corregida */
        .benefit-list {
            list-style: none;
            padding: 0;
            margin: 15px 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .benefit-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            font-size: 0.85rem;
            color: var(--text-muted);
            text-align: left;
            line-height: 1.5;
        }

        /* Control estricto del icono para alineación perfecta */
        .benefit-list li i {
            margin-top: 3px;
            font-size: 1.1rem;
            width: 20px; /* Ancho fijo para que el texto siempre quede parejo */
            text-align: center;
            flex-shrink: 0;
        }

        /* Contenedor del texto para evitar que Flexbox lo parta en columnas */
        .benefit-text {
            flex-grow: 1;
        }

        .benefit-text strong {
            color: #fff;
        }
        
        .benefit-text a {
            transition: 0.3s;
        }
        
        .benefit-text a:hover {
            text-shadow: 0 0 10px currentColor;
        }

        /* Estilo para las sub-listas (Ej. Nivel 3) */
        .sub-benefit-list {
            list-style: none;
            padding-left: 12px;
            margin-top: 10px;
            border-left: 2px solid rgba(255,255,255,0.1);
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .sub-benefit-list li {
            display: block !important; /* Anula el flex para sub-items */
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        /* ==========================================================
           DETALLES DEL BOT
           ========================================================== */
        .bot-details {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            padding: 15px;
            margin-top: auto; /* Empuja esto siempre al fondo */
            font-size: 0.85rem;
            color: var(--text-muted);
            text-align: left;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .bot-details-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .bot-details-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        /* ==========================================================
           SECCIÓN DE SOPORTE
           ========================================================== */
        .alert-custom {
            background: rgba(0, 210, 106, 0.05);
            border: 1px solid rgba(0, 210, 106, 0.2);
            color: var(--text-light);
            border-radius: 12px;
            padding: 30px;
        }

        .alert-custom h5 {
            color: var(--highlight);
            font-weight: 800;
            font-size: 1.3rem;
            margin-bottom: 15px;
        }

        .btn-support {
            border-radius: 8px;
            padding: 12px 22px;
            font-weight: 700;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 0.9rem;
            border: none;
            color: #fff !important;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-support:hover {
            transform: translateY(-2px);
        }

        .btn-telegram {
            background: linear-gradient(135deg, #0088cc, #006699) !important;
            box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
        }
        .btn-telegram:hover { box-shadow: 0 8px 25px rgba(0, 136, 204, 0.5); }

        .btn-whatsapp {
            background: linear-gradient(135deg, #25D366, #128C7E) !important;
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
        }
        .btn-whatsapp:hover { box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5); }

        .btn-email {
            background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
        }
        .btn-email:hover { box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5); }

        @media (max-width: 768px) {
            .navbar-custom .container { flex-direction: column; gap: 15px; }
            .plan-card { padding: 24px 20px; }
            .plan-price { font-size: 1.5rem !important; }
        }

/* Migrated from recuperar.html */
:root { 
            --bg-base: #0b1120; 
            --bg-card: #1e293b; 
            --bg-header: #1c3961; 
            --highlight: #00d26a; 
            --text-light: #e2e8f0; 
            --text-muted: #cbd5e1;
            --vip: #ffd700;
        }

        /* ==========================================================
           NUEVOS ESTILOS PARA ICONOS (Font Awesome 6.7.2)
           ========================================================== */
        
        /* Efecto de brillo en iconos */
        .icon-glow {
            filter: drop-shadow(0 0 5px rgba(0, 210, 106, 0.3));
            transition: all 0.3s ease;
        }

        .icon-glow:hover {
            filter: drop-shadow(0 0 12px rgba(0, 210, 106, 0.6));
            transform: scale(1.1);
        }

        /* Efecto de brillo para iconos VIP */
        .icon-vip-glow {
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
            transition: all 0.3s ease;
        }

        .icon-vip-glow:hover {
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7));
            transform: scale(1.15);
        }

        /* Iconos con gradiente dorado para VIP */
        .icon-vip {
            background: linear-gradient(135deg, #ffd700, #ffb300);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Animación para iconos pulsantes */
        @keyframes pulse-icon {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .icon-pulse {
            animation: pulse-icon 2s ease-in-out infinite;
        }

        /* Animación para iconos flotantes */
        @keyframes float-icon {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }

        .icon-float {
            animation: float-icon 3s ease-in-out infinite;
        }

        /* Iconos con gradiente para email */
        .icon-email {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ==========================================================
           ESTILOS EXISTENTES
           ========================================================== */

        body { 
            background-color: var(--bg-base); 
            color: var(--text-light); 
            font-family: 'Raleway', sans-serif; 
            background-image: linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px); 
            background-size: 40px 40px; 
            min-height: 100vh; 
            display: flex; 
            flex-direction: column; 
        }
        
        .navbar-custom { 
            background-color: var(--bg-header); 
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); 
            padding: 15px 0; 
            position: relative; 
            z-index: 1000; 
            border-bottom: 2px solid rgba(0, 210, 106, 0.2);
        }
        
        .text-highlight { 
            color: var(--highlight); 
            font-weight: 700; 
        }
        
        .main-wrapper { 
            flex: 1; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            padding: 20px; 
        }
        
        .card-custom { 
            background-color: var(--bg-card); 
            border: 1px solid rgba(0, 210, 106, 0.2); 
            border-radius: 12px; 
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); 
            position: relative; 
            padding: 2.5rem; 
            width: 100%; 
            max-width: 450px; 
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .card-custom:hover {
            box-shadow: 0 15px 50px rgba(0, 210, 106, 0.08);
            border-color: rgba(0, 210, 106, 0.4);
        }
        
        .card-custom::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 4px; 
            background: linear-gradient(90deg, var(--highlight), #00ff88);
        }
        
        .form-control { 
            background-color: #0b1120; 
            border: 1px solid #334155; 
            color: white !important; 
            font-family: 'Courier New', monospace; 
            padding: 12px 15px;
            transition: all 0.3s ease;
        }

        .form-control::placeholder { 
            color: #94a3b8 !important; 
            opacity: 1 !important; 
        }
        
        .form-control:focus { 
            background-color: #0b1120; 
            border-color: var(--highlight); 
            color: white; 
            box-shadow: 0 0 10px rgba(0, 210, 106, 0.2); 
        }
        
        .form-label { 
            color: #cbd5e1; 
            font-size: 0.9rem; 
            font-weight: 600; 
        }
        
        .btn-tech { 
            background: linear-gradient(135deg, var(--highlight), #00ff88);
            color: #0b1120; 
            font-weight: 800; 
            border: none; 
            transition: all 0.3s ease; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            padding: 14px; 
            width: 100%; 
            border-radius: 6px;
            position: relative;
            overflow: hidden;
        }

        .btn-tech::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: rotate(45deg);
            transition: all 0.5s ease;
        }

        .btn-tech:hover::after {
            left: 100%;
        }
        
        .btn-tech:hover { 
            background: linear-gradient(135deg, #fff, #00ff88);
            color: #0b1120; 
            transform: translateY(-2px); 
            box-shadow: 0 8px 25px rgba(0, 210, 106, 0.4); 
        }
        
        .btn-link-tech { 
            color: #94a3b8; 
            text-decoration: none; 
            font-size: 0.85rem; 
            display: block; 
            text-align: center; 
            margin-top: 20px; 
            transition: all 0.3s ease;
            font-family: 'Courier New', monospace;
            padding: 8px;
            border-radius: 6px;
        }
        
        .btn-link-tech:hover { 
            color: var(--highlight);
            background: rgba(0, 210, 106, 0.05);
            transform: translateX(-3px);
        }

        .btn-link-tech i {
            transition: all 0.3s ease;
        }

        .btn-link-tech:hover i {
            transform: translateX(-3px);
            color: var(--highlight);
        }

        .icon-lock-container {
            display: flex;
            justify-content: center;
            margin-bottom: 15px;
        }

        .icon-lock {
            font-size: 3rem;
            color: var(--highlight);
            background: rgba(0, 210, 106, 0.08);
            padding: 20px;
            border-radius: 50%;
            border: 2px solid rgba(0, 210, 106, 0.15);
            transition: all 0.3s ease;
        }

        .icon-lock:hover {
            transform: scale(1.05);
            border-color: var(--highlight);
            box-shadow: 0 0 30px rgba(0, 210, 106, 0.1);
        }

        /* ==========================================================
           NOTIFICACIONES TÁCTICAS
           ========================================================== */
        
        .toast-container-top-right {
            position: fixed;
            top: calc(var(--navbar-height, 78px) + 12px);
            right: 20px;
            z-index: 110000 !important;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
            max-width: calc(100vw - 40px);
        }
        
        .toast-tactical { 
            background-color: #0b1120; 
            border: 1px solid #1c3961; 
            border-radius: 6px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.6); 
            display: flex; 
            align-items: center; 
            padding: 15px 20px; 
            min-width: 300px; 
            max-width: 450px; 
            position: relative; 
            overflow: hidden; 
            animation: slideInRight 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards, fadeOut 0.4s ease 4.6s forwards; 
        }

        .toast-tactical.success {
            border-left: 4px solid #00d26a;
        }

        .toast-tactical.error {
            border-left: 4px solid #ef4444;
        }
        
        .toast-icon-success { 
            color: #00d26a; 
            font-size: 1.3rem; 
            margin-right: 15px; 
        }
        
        .toast-icon-error { 
            color: #ef4444; 
            font-size: 1.3rem; 
            margin-right: 15px; 
        }
        
        .toast-message {
            color: #ffffff;
            font-size: 0.9rem;
            font-weight: 600;
            font-family: 'Raleway', sans-serif;
            letter-spacing: 0.5px;
            line-height: 1.4;
            min-width: 0;
            flex: 1 1 auto;
            white-space: pre-wrap;
            word-break: break-word;
        }
        
        .toast-progress { 
            position: absolute; 
            bottom: 0; 
            left: 0; 
            height: 3px; 
            width: 100%; 
            animation: shrinkProgress 4.6s linear forwards; 
        }
        
        .toast-progress.success { 
            background: linear-gradient(90deg, #00d26a, #00ff88); 
        }
        
        .toast-progress.error { 
            background: linear-gradient(90deg, #ef4444, #dc2626); 
        }
        
        @keyframes slideInRight { 
            from { transform: translateX(110%); opacity: 0; } 
            to { transform: translateX(0); opacity: 1; } 
        }
        
        @keyframes fadeOut { 
            from { opacity: 1; } 
            to { opacity: 0; visibility: hidden; } 
        }
        
        @keyframes shrinkProgress { 
            from { width: 100%; } 
            to { width: 0%; } 
        }

        /* ==========================================================
           RESPONSIVE
           ========================================================== */
        @media (max-width: 768px) {
            .navbar-custom .container {
                flex-direction: column;
                gap: 10px;
            }

            .navbar-custom img {
                height: 55px !important;
            }

            .card-custom {
                padding: 1.8rem;
                margin: 0 10px;
            }

            .card-custom h2 {
                font-size: 1.3rem !important;
            }

            .card-custom p {
                font-size: 0.8rem !important;
            }

            .btn-tech {
                font-size: 0.85rem;
                padding: 12px;
            }

            .toast-tactical {
                min-width: 250px;
                max-width: 350px;
                padding: 12px 16px;
                font-size: 0.8rem;
            }

            .icon-lock {
                font-size: 2.5rem;
                padding: 16px;
            }
        }

        @media (max-width: 480px) {
            .navbar-custom {
                padding: 10px 0;
            }

            .navbar-custom img {
                height: 45px !important;
            }

            .card-custom {
                padding: 1.2rem;
            }

            .card-custom h2 {
                font-size: 1.1rem !important;
            }

            .form-control {
                font-size: 0.85rem;
                padding: 10px 12px;
            }

            .btn-tech {
                font-size: 0.75rem;
                padding: 10px;
                letter-spacing: 0.5px;
            }

            .btn-link-tech {
                font-size: 0.75rem;
            }

            .toast-tactical {
                min-width: 200px;
                max-width: 280px;
                padding: 10px 14px;
                font-size: 0.75rem;
            }

            .toast-icon-success,
            .toast-icon-error {
                font-size: 1rem;
                margin-right: 10px;
            }

            .icon-lock {
                font-size: 2rem;
                padding: 14px;
            }

            .icon-lock-container {
                margin-bottom: 10px;
            }
        }

/* Migrated from restringido.html */
:root {
            --bg-base: #0b1120;
            --bg-card: #1e293b;
            --bg-header: #1c3961;
            --highlight: #00d26a;
            --vip-color: #8b5cf6;
            --text-light: #e2e8f0;
            --text-muted: #cbd5e1;
        }

        /* ==========================================================
           NUEVOS ESTILOS PARA ICONOS (Font Awesome 6.7.2)
           ========================================================== */
        
        /* Efecto de brillo en iconos */
        .icon-glow {
            filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.3));
            transition: all 0.3s ease;
        }

        .icon-glow:hover {
            filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.6));
            transform: scale(1.1);
        }

        /* Efecto de brillo para iconos VIP */
        .icon-vip-glow {
            filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
            transition: all 0.3s ease;
        }

        .icon-vip-glow:hover {
            filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.7));
            transform: scale(1.15);
        }

        /* Iconos con gradiente púrpura para VIP */
        .icon-vip {
            background: linear-gradient(135deg, #8b5cf6, #a78bfa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Animación para iconos pulsantes */
        @keyframes pulse-icon {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .icon-pulse {
            animation: pulse-icon 2s ease-in-out infinite;
        }

        /* Animación para iconos flotantes */
        @keyframes float-icon {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }

        .icon-float {
            animation: float-icon 3s ease-in-out infinite;
        }

        /* Animación de pulso con glow */
        @keyframes pulse-glow {
            0% { 
                text-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
                transform: scale(1);
            }
            50% { 
                text-shadow: 0 0 30px rgba(139, 92, 246, 0.8), 0 0 60px rgba(139, 92, 246, 0.4);
                transform: scale(1.05);
            }
            100% { 
                text-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
                transform: scale(1);
            }
        }

        .glitch-icon {
            animation: pulse-glow 2.5s ease-in-out infinite;
        }

        /* ==========================================================
           ESTILOS EXISTENTES
           ========================================================== */

        body {
            background-color: var(--bg-base);
            color: var(--text-light);
            font-family: 'Raleway', sans-serif;
            background-image: 
                linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .navbar-custom {
            background-color: var(--bg-header);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            padding: 15px 0;
            position: relative;
            z-index: 1000;
            border-bottom: 2px solid rgba(139, 92, 246, 0.2);
        }

        .text-highlight { 
            color: var(--highlight); 
            font-weight: 700; 
        }
        
        /* Tarjeta Principal Interceptora */
        .card-custom {
            background-color: var(--bg-card);
            border: 1px solid rgba(139, 92, 246, 0.4); 
            border-radius: 12px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.6), inset 0 0 20px rgba(139, 92, 246, 0.05);
            position: relative;
            padding: 3.5rem 2.5rem;
            background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
            transition: all 0.3s ease;
        }

        .card-custom:hover {
            border-color: rgba(139, 92, 246, 0.6);
            box-shadow: 0 15px 50px rgba(0,0,0,0.7), inset 0 0 30px rgba(139, 92, 246, 0.08);
        }

        .card-custom::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--vip-color), transparent);
            opacity: 0.6;
        }

        .btn-tech {
            background: linear-gradient(135deg, var(--vip-color), #7c3aed);
            color: #fff;
            font-weight: 800;
            border: none;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 16px 24px;
            border-radius: 6px;
            text-decoration: none;
            display: inline-block;
            position: relative;
            overflow: hidden;
        }

        .btn-tech::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.08), transparent);
            transform: rotate(45deg);
            transition: all 0.5s ease;
        }

        .btn-tech:hover::after {
            left: 100%;
        }

        .btn-tech:hover {
            background: linear-gradient(135deg, #a78bfa, #8b5cf6);
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);
        }

        .btn-back {
            color: #94a3b8;
            font-family: 'Courier New', monospace;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
            margin-top: 20px;
            display: inline-block;
            padding: 8px 15px;
            border-radius: 6px;
        }

        .btn-back:hover {
            color: #fff;
            background: rgba(255,255,255,0.03);
            text-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
            transform: translateX(-3px);
        }

        .btn-back i {
            transition: all 0.3s ease;
        }

        .btn-back:hover i {
            transform: translateX(-3px);
            color: var(--vip-color);
        }

        .glitch-icon {
            animation: pulse-glow 2.5s ease-in-out infinite;
        }

        .security-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.2);
            color: #ef4444;
            padding: 6px 16px;
            border-radius: 20px;
            font-family: 'Courier New', monospace;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .level-required {
            display: inline-block;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 20px;
            padding: 4px 16px;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--vip-color);
            font-family: 'Courier New', monospace;
        }

        .alert-custom {
            background: rgba(11, 17, 32, 0.8);
            border: 1px solid rgba(139, 92, 246, 0.15);
            max-width: 400px;
            font-family: 'Courier New', monospace;
            color: #94a3b8;
            padding: 12px 20px;
            border-radius: 8px;
            margin: 0 auto 20px;
        }

        .alert-custom strong {
            color: #fff;
        }

        /* ==========================================================
           RESPONSIVE
           ========================================================== */
        @media (max-width: 768px) {
            .navbar-custom .container {
                flex-direction: column;
                gap: 10px;
                align-items: center;
            }

            .navbar-custom .container .d-flex {
                width: 100%;
                justify-content: center;
            }

            .navbar-custom img {
                height: 45px !important;
            }

            .card-custom {
                padding: 2rem 1.5rem;
                margin: 0 15px;
            }

            .card-custom h1 {
                font-size: 1.8rem !important;
            }

            .card-custom p {
                font-size: 1rem !important;
            }

            .btn-tech {
                font-size: 0.85rem;
                padding: 14px 20px;
            }

            .security-badge {
                font-size: 0.65rem;
                padding: 4px 12px;
            }

            .glitch-icon {
                font-size: 3.5rem !important;
            }
        }

        @media (max-width: 480px) {
            .navbar-custom {
                padding: 10px 0;
            }

            .navbar-custom img {
                height: 38px !important;
            }

            .card-custom {
                padding: 1.5rem 1rem;
            }

            .card-custom h1 {
                font-size: 1.4rem !important;
                letter-spacing: 1px !important;
            }

            .card-custom p {
                font-size: 0.85rem !important;
            }

            .btn-tech {
                font-size: 0.7rem;
                padding: 12px 16px;
                letter-spacing: 0.5px;
            }

            .btn-back {
                font-size: 0.7rem;
                padding: 6px 10px;
            }

            .glitch-icon {
                font-size: 2.8rem !important;
            }

            .alert-custom {
                font-size: 0.75rem;
                padding: 10px 15px;
            }

            .security-badge {
                font-size: 0.55rem;
                padding: 3px 10px;
            }
        }

/* Migrated from resultados_blackbird.html */
:root {
            --bg-base: #0b1120;
            --bg-card: #1e293b;
            --bg-header: #1c3961;
            --highlight: #00d26a;
            --blackbird-color: #dc2626;
            --text-light: #e2e8f0;
            --text-muted: #cbd5e1;
        }

        /* ==========================================================
           NUEVOS ESTILOS PARA ICONOS (Font Awesome 6.7.2)
           ========================================================== */
        
        /* Efecto de brillo en iconos */
        .icon-glow {
            filter: drop-shadow(0 0 5px rgba(220, 38, 38, 0.3));
            transition: all 0.3s ease;
        }

        .icon-glow:hover {
            filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.6));
            transform: scale(1.1);
        }

        /* Efecto de brillo para iconos Blackbird */
        .icon-blackbird-glow {
            filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.4));
            transition: all 0.3s ease;
        }

        .icon-blackbird-glow:hover {
            filter: drop-shadow(0 0 15px rgba(220, 38, 38, 0.7));
            transform: scale(1.15);
        }

        /* Iconos con gradiente rojo para Blackbird */
        .icon-blackbird {
            background: linear-gradient(135deg, #dc2626, #ef4444);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Animación para iconos pulsantes */
        @keyframes pulse-icon {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .icon-pulse {
            animation: pulse-icon 2s ease-in-out infinite;
        }

        /* ==========================================================
           ESTILOS EXISTENTES
           ========================================================== */

        body { 
            background-color: var(--bg-base); 
            color: var(--text-light); 
            font-family: 'Raleway', sans-serif;
            background-image: 
                linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            min-height: 100vh;
        }

        .navbar-custom { 
            background-color: var(--bg-header); 
            padding: 15px 0; 
            border-bottom: 2px solid var(--blackbird-color);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        .navbar-custom .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar-custom img {
            height: 55px;
            width: auto;
            max-width: 100%;
            transition: all 0.3s ease;
        }

        .terminal-box {
            background-color: #020617; 
            border: 1px solid var(--blackbird-color); 
            border-radius: 8px;
            padding: 20px; 
            box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
            font-family: 'Courier New', monospace; 
            font-size: 0.95rem; 
            color: #cbd5e1;
            overflow-y: auto; 
            height: 650px;
            transition: all 0.3s ease;
            position: relative;
        }

        .terminal-box::before {
            content: '● ● ●';
            position: absolute;
            top: 8px;
            left: 12px;
            color: #64748b;
            font-size: 0.7rem;
            letter-spacing: 4px;
            opacity: 0.5;
        }

        .terminal-box .terminal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(220, 38, 38, 0.1);
        }

        .terminal-box .terminal-header .term-title {
            color: var(--blackbird-color);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .terminal-box .terminal-header .term-status {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.7rem;
            color: #64748b;
        }

        .terminal-box .terminal-header .term-status .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            animation: pulse-dot 1.5s ease-in-out infinite;
        }

        .terminal-box .terminal-header .term-status .dot.active {
            background-color: var(--blackbird-color);
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.3; transform: scale(0.8); }
        }

        .terminal-box .terminal-content {
            margin-top: 5px;
            padding-top: 10px;
        }

        .btn-tech { 
            background: linear-gradient(135deg, var(--blackbird-color), #b91c1c);
            color: #fff; 
            font-weight: 800; 
            padding: 10px 20px; 
            border-radius: 6px; 
            text-decoration: none; 
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 0.85rem;
        }

        .btn-tech:hover { 
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: #fff; 
            box-shadow: 0 0 25px rgba(220, 38, 38, 0.5);
            transform: translateY(-2px);
        }

        .btn-tech i {
            transition: all 0.3s ease;
        }

        .btn-tech:hover i {
            transform: translateY(-2px);
        }

        .btn-back { 
            background-color: transparent; 
            border: 1px solid #94a3b8; 
            color: #94a3b8; 
            font-weight: bold; 
            padding: 10px 20px; 
            border-radius: 6px; 
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
        }

        .btn-back:hover { 
            border-color: #fff; 
            color: #fff;
            transform: translateX(-3px);
        }

        .btn-back i {
            transition: all 0.3s ease;
        }

        .btn-back:hover i {
            transform: translateX(-3px);
            color: var(--blackbird-color);
        }

        .btn-download {
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: #fff;
        }

        .btn-download:hover {
            background: linear-gradient(135deg, #4ade80, #22c55e);
            color: #fff;
            box-shadow: 0 0 25px rgba(34, 197, 94, 0.4);
        }

        .cursor { 
            display: inline-block; 
            width: 8px; 
            height: 18px; 
            background: linear-gradient(180deg, var(--blackbird-color), #7f1d1d);
            animation: blink 1s step-end infinite; 
            vertical-align: middle; 
            margin-left: 5px;
            border-radius: 2px;
        }

        @keyframes blink { 
            0%, 100% { opacity: 1; } 
            50% { opacity: 0; } 
        }

        .target-badge {
            display: inline-block;
            background: rgba(220, 38, 38, 0.1);
            border: 1px solid rgba(220, 38, 38, 0.2);
            border-radius: 20px;
            padding: 4px 16px;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            color: var(--blackbird-color);
        }

        /* ==========================================================
           RESPONSIVE
           ========================================================== */
        @media (max-width: 768px) {
            .navbar-custom .container {
                flex-direction: column;
                gap: 12px;
                align-items: center;
            }

            .navbar-custom img {
                height: 45px !important;
            }

            .terminal-box {
                height: 450px;
                font-size: 0.85rem;
                padding: 15px;
            }

            .d-flex.justify-content-between.align-items-end {
                flex-direction: column;
                align-items: flex-start !important;
                gap: 12px;
            }

            .d-flex.justify-content-between.align-items-end div:last-child {
                width: 100%;
            }

            .btn-tech, .btn-back {
                font-size: 0.8rem;
                padding: 8px 16px;
            }

            .btn-back {
                width: 100%;
                justify-content: center;
            }

            .target-badge {
                font-size: 0.75rem;
                padding: 3px 12px;
            }

            .terminal-box::before {
                font-size: 0.6rem;
                top: 6px;
                left: 10px;
            }
        }

        @media (max-width: 480px) {
            .navbar-custom {
                padding: 10px 0;
            }

            .navbar-custom img {
                height: 38px !important;
            }

            .terminal-box {
                height: 350px;
                font-size: 0.75rem;
                padding: 12px;
                border-radius: 6px;
            }

            .terminal-box .terminal-header .term-title {
                font-size: 0.65rem;
            }

            .terminal-box .terminal-header .term-status {
                font-size: 0.6rem;
            }

            h2 {
                font-size: 1.3rem !important;
            }

            .btn-tech, .btn-back {
                font-size: 0.7rem;
                padding: 6px 12px;
            }

            .btn-tech i, .btn-back i {
                font-size: 0.8rem;
            }

            .cursor {
                width: 6px;
                height: 14px;
            }

            .target-badge {
                font-size: 0.65rem;
                padding: 2px 10px;
            }

            .text-center.mt-4 p {
                font-size: 0.7rem !important;
            }

            .terminal-box::before {
                font-size: 0.5rem;
                top: 4px;
                left: 8px;
                letter-spacing: 2px;
            }
        }

/* Migrated from resultados_phoneinfoga.html */
:root {
            --bg-base: #0b1120; 
            --bg-card: #1e293b;
            --bg-header: #1c3961;
            --highlight-blue: #3b82f6;
            --text-light: #e2e8f0;
            --text-muted: #94a3b8;
        }

        /* ==========================================================
           NUEVOS ESTILOS PARA ICONOS (Font Awesome 6.7.2)
           ========================================================== */
        
        /* Efecto de brillo en iconos */
        .icon-glow {
            filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
            transition: all 0.3s ease;
        }

        .icon-glow:hover {
            filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.6));
            transform: scale(1.1);
        }

        /* Efecto de brillo para iconos PhoneInfoga */
        .icon-phone-glow {
            filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
            transition: all 0.3s ease;
        }

        .icon-phone-glow:hover {
            filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.7));
            transform: scale(1.15);
        }

        /* Iconos con gradiente azul para PhoneInfoga */
        .icon-phone {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Animación para iconos pulsantes */
        @keyframes pulse-icon {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .icon-pulse {
            animation: pulse-icon 2s ease-in-out infinite;
        }

        /* ==========================================================
           ESTILOS EXISTENTES
           ========================================================== */

        body { 
            background-color: var(--bg-base); 
            color: var(--text-light); 
            font-family: 'Raleway', sans-serif; 
            background-image: linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            min-height: 100vh;
        }

        .navbar-custom { 
            background-color: var(--bg-header); 
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); 
            padding: 15px 0; 
            position: relative;
            z-index: 1050;
            border-bottom: 2px solid rgba(59, 130, 246, 0.2);
        }

        .navbar-custom .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar-custom .logo-text {
            font-weight: 800;
            font-size: 1.3rem;
            color: #fff;
        }

        .navbar-custom .logo-text span {
            color: var(--highlight-blue);
        }

        /* BOTONES DE EXPORTACIÓN */
        .btn-export { 
            background-color: transparent; 
            color: var(--highlight-blue); 
            border: 1px solid var(--highlight-blue); 
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-export:hover { 
            background: linear-gradient(135deg, var(--highlight-blue), #60a5fa);
            color: #0b1120;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
        }

        .btn-export i {
            transition: all 0.3s ease;
        }

        .btn-export:hover i {
            transform: translateY(-2px);
        }

        .btn-back { 
            background: rgba(255,255,255,0.05);
            color: white; 
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
        }

        .btn-back:hover {
            background: rgba(255,255,255,0.1);
            transform: translateX(-3px);
        }

        .btn-back i {
            transition: all 0.3s ease;
        }

        .btn-back:hover i {
            transform: translateX(-3px);
            color: var(--highlight-blue);
        }

        .dropdown-menu-tech { 
            background-color: var(--bg-card); 
            border: 1px solid #334155;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .dropdown-item-tech { 
            color: var(--text-light);
            transition: all 0.3s ease;
            font-family: 'Courier New', monospace;
        }

        .dropdown-item-tech:hover { 
            background-color: var(--highlight-blue) !important; 
            color: #0b1120 !important; 
        }

        .dropdown-item-tech i {
            width: 20px;
            text-align: center;
        }

        /* PANEL INMOVILIZADO (Sticky Header) */
        .sticky-header {
            position: sticky;
            top: 0;
            background: rgba(11, 17, 32, 0.95);
            backdrop-filter: blur(12px);
            z-index: 1020;
            padding: 15px 0;
            border-bottom: 1px solid rgba(59, 130, 246, 0.3);
            margin-bottom: 25px;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 25px rgba(0,0,0,0.5);
            transition: all 0.3s ease;
        }

        .sticky-header .phone-number {
            font-family: 'Courier New', monospace;
            color: var(--highlight-blue);
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        /* TARJETAS Y DATOS */
        .card-tactic {
            background-color: var(--bg-card);
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 8px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
            margin-bottom: 25px;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .card-tactic:hover {
            border-color: rgba(59, 130, 246, 0.4);
            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.05);
        }

        .card-header-tactic {
            background: rgba(59, 130, 246, 0.08);
            border-bottom: 1px solid rgba(59, 130, 246, 0.15);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--highlight-blue);
            padding: 15px 20px;
            border-radius: 8px 8px 0 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-header-tactic i {
            font-size: 1.1rem;
        }

        .data-label { 
            color: var(--text-muted); 
            font-size: 0.75rem; 
            font-weight: 700; 
            text-transform: uppercase; 
            letter-spacing: 1px;
            display: block;
            margin-bottom: 3px;
        }

        .data-value { 
            font-family: 'Courier New', monospace; 
            font-size: 1.1rem; 
            color: #fff; 
            font-weight: 700;
        }

        .data-value .text-success { color: #22c55e !important; }
        .data-value .text-danger { color: #ef4444 !important; }
        .data-value .text-info { color: #60a5fa !important; }
        
        .result-link-box {
            background: rgba(15, 23, 42, 0.8);
            border-left: 3px solid var(--highlight-blue);
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 0 6px 6px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            gap: 15px;
        }

        .result-link-box:hover { 
            background: rgba(30, 41, 59, 0.9);
            transform: translateX(5px);
            border-left-color: #60a5fa;
        }

        .result-title { 
            font-size: 0.95rem; 
            font-weight: 600; 
            color: var(--text-light); 
            margin-bottom: 5px;
        }

        .result-title i {
            color: var(--text-muted);
            margin-right: 8px;
        }

        .result-url {
            font-family: 'Courier New', monospace;
            font-size: 0.75rem;
            color: #64748b;
            word-break: break-all;
        }
        
        .btn-action {
            background-color: transparent;
            border: 1px solid var(--highlight-blue);
            color: var(--highlight-blue);
            font-weight: 700;
            font-size: 0.75rem;
            border-radius: 4px;
            padding: 6px 14px;
            text-decoration: none;
            transition: all 0.3s ease;
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'Courier New', monospace;
        }

        .btn-action:hover { 
            background: linear-gradient(135deg, var(--highlight-blue), #60a5fa);
            color: #0b1120;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
        }

        .btn-action i {
            transition: all 0.3s ease;
        }

        .btn-action:hover i {
            transform: translateX(3px);
        }

        /* Estilos Acordeón */
        .accordion-button { 
            background-color: rgba(15, 23, 42, 0.8); 
            color: var(--text-light); 
            font-weight: 600; 
            border: 1px solid rgba(51, 65, 85, 0.5);
            transition: all 0.3s ease;
            font-family: 'Courier New', monospace;
        }

        .accordion-button:not(.collapsed) { 
            background-color: rgba(59, 130, 246, 0.08); 
            color: var(--highlight-blue); 
            border-bottom: none;
        }

        .accordion-button:focus { 
            box-shadow: none; 
            border-color: var(--highlight-blue); 
        }

        .accordion-button:hover {
            background-color: rgba(59, 130, 246, 0.05);
        }

        .accordion-button i {
            margin-right: 8px;
            color: var(--highlight-blue);
        }

        .accordion-item { 
            background-color: transparent; 
            border: none; 
            margin-bottom: 10px; 
        }

        .accordion-body { 
            background-color: rgba(30, 41, 59, 0.5);
            border: 1px solid rgba(51, 65, 85, 0.3);
            border-top: none; 
            border-radius: 0 0 6px 6px;
            padding: 15px;
        }

        .dork-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            padding: 10px 0;
            gap: 10px;
        }

        .dork-item:last-child {
            border-bottom: none;
        }

        .dork-url {
            font-family: 'Courier New', monospace;
            font-size: 0.8rem;
            color: var(--text-muted);
            word-break: break-all;
            flex: 1;
        }

        .dork-url .highlight {
            color: var(--highlight-blue);
        }

        /* ==========================================================
           RESPONSIVE
           ========================================================== */
        @media (max-width: 768px) {
            .navbar-custom .container {
                flex-direction: column;
                gap: 12px;
                align-items: center;
            }

            .navbar-custom .container .d-flex {
                width: 100%;
                justify-content: center;
                flex-wrap: wrap;
            }

            .navbar-custom .logo-text {
                font-size: 1.1rem;
            }

            .sticky-header .phone-number {
                font-size: 1.4rem;
            }

            .sticky-header h2 {
                font-size: 1.2rem !important;
            }

            .result-link-box {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .result-link-box .btn-action {
                align-self: flex-start;
            }

            .card-header-tactic {
                font-size: 0.85rem;
                padding: 12px 16px;
            }

            .data-value {
                font-size: 0.95rem;
            }

            .btn-back, .btn-export {
                font-size: 0.75rem;
                padding: 6px 12px;
            }

            .accordion-button {
                font-size: 0.85rem;
                padding: 12px 16px;
            }

            .dork-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .dork-item .btn-action {
                align-self: flex-start;
            }
        }

        @media (max-width: 480px) {
            .navbar-custom {
                padding: 10px 0;
            }

            .navbar-custom .logo-text {
                font-size: 0.95rem;
            }

            .sticky-header {
                padding: 10px 0;
            }

            .sticky-header .phone-number {
                font-size: 1.1rem;
            }

            .sticky-header h2 {
                font-size: 1rem !important;
            }

            .card-tactic {
                margin-bottom: 15px;
            }

            .card-header-tactic {
                font-size: 0.75rem;
                padding: 10px 14px;
            }

            .card-body {
                padding: 12px !important;
            }

            .data-label {
                font-size: 0.65rem;
            }

            .data-value {
                font-size: 0.85rem;
            }

            .result-title {
                font-size: 0.8rem;
            }

            .result-url {
                font-size: 0.65rem;
            }

            .btn-action {
                font-size: 0.65rem;
                padding: 4px 10px;
            }

            .btn-back, .btn-export {
                font-size: 0.65rem;
                padding: 4px 10px;
            }

            .accordion-button {
                font-size: 0.75rem;
                padding: 10px 12px;
            }

            .accordion-body {
                padding: 10px;
            }

            .dork-url {
                font-size: 0.7rem;
            }

            .dropdown-menu-tech {
                font-size: 0.8rem;
            }

            .dropdown-item-tech {
                font-size: 0.75rem;
                padding: 6px 12px;
            }
        }

@page { margin: 10mm; }
@media print {
    body { font-family: 'Arial', sans-serif; color: #111; margin: 0; padding: 20px; font-size: 12px; line-height: 1.4; background: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
                        .main-header-block { text-align: left; border-bottom: 2px solid #3b82f6; padding-bottom: 5px; margin-bottom: 20px; }
                        .report-title { margin: 0; color: #3b82f6; font-size: 18px; text-transform: uppercase; font-weight: 800; }
                        .report-meta { font-size: 11px; color: #333; margin-top: 5px; font-weight: bold; }
                        
                        /* Forzar colores oscuros para impresión tipo OSINT */
                        .card-tactic { border: 1px solid #cbd5e1; margin-bottom: 20px; border-radius: 4px; }
                        .card-header-tactic { background-color: #f1f5f9 !important; color: #3b82f6 !important; font-weight: bold; padding: 10px; border-bottom: 1px solid #cbd5e1; text-transform: uppercase;}
                        .card-body { padding: 15px; }
                        .data-label { color: #475569; font-size: 10px; font-weight: bold; text-transform: uppercase; display: block; margin-bottom: 3px;}
                        .data-value { font-family: monospace; font-size: 13px; font-weight: bold; color: #000; }
                        .text-success { color: #16a34a !important; } .text-danger { color: #dc2626 !important; }
                        
                        .result-link-box { border-left: 3px solid #3b82f6; padding: 10px; margin-bottom: 8px; background: #f8fafc !important; page-break-inside: avoid;}
                        .result-title { font-weight: bold; font-size: 12px; color: #0f172a; margin-bottom: 2px; }
                        .btn-action, .accordion-button::after, .accordion-button i { display: none !important; } /* Ocultar botones inútiles en PDF */
                        
                        .accordion-button { font-weight: bold; background-color: #f1f5f9 !important; color: #3b82f6 !important; padding: 8px; border: 1px solid #e2e8f0; display: block; width: 100%; text-align: left; }
                        .accordion-collapse { display: block !important; } /* Forzar acordeones abiertos */
                        .accordion-body { border: 1px solid #e2e8f0; padding: 10px; }
                        .dork-url { color: #334155; font-family: monospace; font-size: 10px; margin-bottom: 5px; border-bottom: 1px dashed #e2e8f0; padding-bottom: 4px; word-break: break-all; white-space: normal;}

/* Migrated from rubricafinal.html */
/* ====================================================
           VARIABLES Y ESTILOS BASE
           ==================================================== */
        :root {
            --bg-base: #0b1120;
            --bg-card: #1e293b;
            --bg-header: #1c3961;
            --highlight: #00d26a;
            --text-light: #e2e8f0;
            --text-muted: #94a3b8;
            --text-dark-muted: #475569;
            --vip: #ffd700;
            --border-tech: rgba(0, 210, 106, 0.2);
            --shadow-glow: 0 0 30px rgba(0, 210, 106, 0.1);
        }

        /* ==========================================================
           NUEVOS ESTILOS PARA ICONOS (Font Awesome 6.7.2)
           ========================================================== */
        
        /* Efecto de brillo en iconos */
        .icon-glow {
            filter: drop-shadow(0 0 5px rgba(0, 210, 106, 0.3));
            transition: all 0.3s ease;
        }

        .icon-glow:hover {
            filter: drop-shadow(0 0 12px rgba(0, 210, 106, 0.6));
            transform: scale(1.1);
        }

        /* Efecto de brillo para iconos VIP */
        .icon-vip-glow {
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
            transition: all 0.3s ease;
        }

        .icon-vip-glow:hover {
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7));
            transform: scale(1.15);
        }

        /* Iconos con gradiente dorado para VIP */
        .icon-vip {
            background: linear-gradient(135deg, #ffd700, #ffb300);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Animación para iconos pulsantes */
        @keyframes pulse-icon {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .icon-pulse {
            animation: pulse-icon 2s ease-in-out infinite;
        }

        /* Animación para iconos flotantes */
        @keyframes float-icon {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }

        .icon-float {
            animation: float-icon 3s ease-in-out infinite;
        }

        /* ====================================================
           ESTILOS EXISTENTES
           ==================================================== */

        * { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
        }

        body {
            background-color: var(--bg-base);
            color: var(--text-light);
            font-family: 'Raleway', sans-serif;
            background-image: linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px), 
                              linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            min-height: 100vh;
            padding-top: 70px;
        }

        /* ====================================================
           HEADER FIJO
           ==================================================== */
        .navbar-custom {
            background-color: var(--bg-header);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            padding: 8px 0;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10005;
            border-bottom: 2px solid rgba(0, 210, 106, 0.2);
        }

        .navbar-custom .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
        }

        .logo-wrap img { 
            height: 45px; 
            width: auto; 
        }

        .nav-user { 
            display: flex; 
            align-items: center; 
            gap: 10px; 
        }

        .btn-outline-light { 
            border-color: rgba(255,255,255,0.2); 
            color: #94a3b8; 
            font-size: 0.75rem; 
            padding: 4px 10px; 
            transition: all 0.3s ease;
        }

        .btn-outline-light:hover { 
            background: var(--highlight); 
            color: #0b1120; 
            border-color: var(--highlight); 
        }

        .btn-outline-warning { 
            color: var(--vip); 
            border-color: var(--vip); 
            font-size: 0.75rem; 
            padding: 4px 10px; 
            transition: all 0.3s ease;
        }

        .btn-outline-warning:hover { 
            background: var(--vip); 
            color: #0b1120; 
        }

        /* ====================================================
           MENÚ HAMBURGUESA (RESPONSIVE)
           ==================================================== */

        /* ====================================================
           TARJETAS PRINCIPALES
           ==================================================== */
        .card-custom {
            background-color: var(--bg-card);
            border: 1px solid var(--border-tech);
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            padding: 12px !important;
            transition: all 0.3s ease;
        }

        .card-custom:hover { 
            box-shadow: var(--shadow-glow); 
            border-color: rgba(0, 210, 106, 0.4); 
        }

        /* ====================================================
           BOTONES
           ==================================================== */
        .btn-tech {
            background: linear-gradient(135deg, var(--highlight), #00ff88);
            color: #0b1120;
            font-weight: 700;
            border: none;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 5px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
        }

        .btn-tech:hover { 
            background: linear-gradient(135deg, #fff, #00ff88);
            color: #0b1120; 
            transform: translateY(-2px); 
            box-shadow: 0 8px 20px rgba(0, 210, 106, 0.4); 
        }

        .btn-tech:disabled { 
            opacity: 0.4; 
            cursor: not-allowed; 
            transform: none; 
            box-shadow: none; 
        }

        .btn-outline-tech {
            background: transparent;
            color: var(--highlight);
            border: 1.5px solid var(--highlight);
            font-weight: 600;
            transition: all 0.3s ease;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 0.7rem;
        }

        .btn-outline-tech:hover, 
        .btn-outline-tech.active { 
            background: var(--highlight); 
            color: #0b1120; 
        }

        /* ====================================================
           GRID DE RULETAS
           ==================================================== */
        .ruleta-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 10px;
        }

        .ruleta-card {
            background: var(--bg-card);
            border: 1px solid var(--border-tech);
            border-radius: 10px;
            padding: 12px !important;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .ruleta-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--highlight), #00ff88);
        }

        /* Botón de Pantalla Completa Individual */
        .btn-fs-ruleta {
            position: absolute; 
            top: 10px; 
            right: 10px;
            background: rgba(0,210,106,0.15); 
            border: 1px solid rgba(0,210,106,0.3);
            color: #fff; 
            width: 30px; 
            height: 30px; 
            border-radius: 6px;
            cursor: pointer; 
            z-index: 20; 
            transition: all 0.3s ease;
            display: flex; 
            align-items: center; 
            justify-content: center;
        }

        .btn-fs-ruleta:hover { 
            background: var(--highlight); 
            color: #000; 
        }

        .ruleta-card .ruleta-icon { 
            font-size: 1.5rem; 
            color: var(--highlight); 
            margin-bottom: 2px; 
        }

        .ruleta-card h3 { 
            font-size: 1rem; 
            font-weight: 700; 
            color: #fff; 
            margin: 0; 
        }

        .ruleta-card .ruleta-sub { 
            color: var(--text-muted); 
            font-size: 0.65rem; 
            margin-bottom: 4px; 
        }

        /* ====================================================
           MODO PANTALLA COMPLETA INDIVIDUAL (FULLSCREEN)
           ==================================================== */
        .ruleta-card.fullscreen-mode {
            position: fixed !important; 
            top: 0; 
            left: 0; 
            width: 100vw; 
            height: 100vh;
            z-index: 105000; 
            border-radius: 0; 
            background: rgba(11, 17, 32, 0.98);
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center;
            padding: 20px 40px !important; 
            margin: 0; 
            max-width: none;
        }

        .ruleta-card.fullscreen-mode .btn-fs-ruleta { 
            top: 20px; 
            right: 30px; 
            width: 45px; 
            height: 45px; 
            font-size: 1.2rem; 
        }

        .ruleta-card.fullscreen-mode h3 { 
            font-size: 2rem; 
        }

        .ruleta-card.fullscreen-mode .ruleta-sub { 
            font-size: 1.2rem; 
            margin-bottom: 15px; 
        }

        .ruleta-card.fullscreen-mode .wheel-container { 
            max-width: 55vh; 
            margin: 20px auto; 
        }

        .ruleta-card.fullscreen-mode .ruleta-resultado { 
            font-size: 1.8rem; 
            padding: 15px; 
            min-height: 60px; 
            max-width: 400px; 
            width: 100%; 
        }

        .ruleta-card.fullscreen-mode .btn-tech { 
            font-size: 1.5rem; 
            padding: 15px; 
            max-width: 400px; 
            margin: 10px auto; 
        }

        .ruleta-card.fullscreen-mode .lista-opciones { 
            max-height: 250px; 
            max-width: 600px; 
            font-size: 1rem; 
            display: flex; 
            flex-wrap: wrap; 
            justify-content: center; 
            background: transparent; 
        }

        .ruleta-card.fullscreen-mode .lista-opciones span { 
            font-size: 1rem; 
            padding: 8px 14px; 
            margin: 4px; 
            border: 1px solid rgba(255,255,255,0.1); 
        }

        .ruleta-card.fullscreen-mode .controles-ruleta { 
            margin: 15px 0; 
            transform: scale(1.3); 
        }

        /* ====================================================
           RESULTADO Y ESTILOS
           ==================================================== */
        .ruleta-resultado {
            background: rgba(0, 210, 106, 0.05);
            border: 1px dashed var(--highlight);
            border-radius: 6px;
            padding: 4px;
            min-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Courier New', monospace;
            font-size: 0.8rem;
            font-weight: 700;
            color: #fff;
            margin: 4px 0;
            transition: all 0.5s ease;
        }

        .ruleta-resultado.girando { 
            animation: pulse 0.8s infinite alternate; 
        }

        @keyframes pulse { 
            from { border-color: var(--highlight); } 
            to { border-color: var(--vip); } 
        }

        /* ====================================================
           CONTENEDOR DE LA RULETA CIRCULAR (CANVAS)
           ==================================================== */
        .wheel-container {
            position: relative;
            width: 100%;
            max-width: 180px;
            margin: 8px auto;
        }

        .wheel-container canvas {
            width: 100%;
            height: auto;
            border-radius: 50%;
            border: 3px solid var(--highlight);
            box-shadow: 0 0 25px rgba(0, 210, 106, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .wheel-container canvas:hover {
            box-shadow: 0 0 40px rgba(0, 210, 106, 0.5);
        }

        /* BOTÓN CENTRAL MEJORADO (Más grande y visible) */
        .wheel-container .wheel-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 55px;
            height: 55px;
            background: var(--bg-base);
            border: 3px solid var(--highlight);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--highlight);
            font-size: 0.8rem;
            font-weight: 800;
            pointer-events: none;
            box-shadow: 0 0 20px rgba(0, 210, 106, 0.4);
            letter-spacing: 1px;
        }

        /* PUNTERO SUPERIOR AUMENTADO */
        .wheel-container .wheel-pointer {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 24px solid var(--vip);
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
            z-index: 5;
        }

        /* ====================================================
           LISTA DE OPCIONES
           ==================================================== */
        .lista-opciones {
            text-align: left;
            font-size: 0.6rem;
            color: var(--text-muted);
            max-height: 60px;
            overflow-y: auto;
            padding: 4px;
            background: rgba(0,0,0,0.15);
            border-radius: 4px;
            margin: 5px 0;
            flex-grow: 1;
        }

        .lista-opciones span {
            display: inline-block;
            background: rgba(255,255,255,0.05);
            padding: 2px 6px;
            border-radius: 6px;
            margin: 2px;
            font-size: 0.6rem;
        }

        .lista-opciones span.eliminado {
            text-decoration: line-through;
            opacity: 0.3;
        }

        /* ====================================================
           CONTROLES INFERIORES
           ==================================================== */
        .controles-ruleta {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            margin: 4px 0;
        }

        .controles-ruleta .form-check {
            margin: 0;
            padding-left: 1rem;
        }

        .controles-ruleta .form-check-input {
            background-color: #0b1120;
            border-color: var(--text-muted);
            width: 0.8rem;
            height: 0.8rem;
            margin-top: 0.15rem;
        }

        .controles-ruleta .form-check-input:checked {
            background-color: var(--highlight);
            border-color: var(--highlight);
        }

        .controles-ruleta .form-check-label {
            font-size: 0.65rem;
            color: var(--text-muted);
            cursor: pointer;
        }

        .opciones-ab {
            display: flex;
            gap: 4px;
            justify-content: center;
            margin: 4px 0;
        }

        /* ====================================================
           BADGES DE ESTADO
           ==================================================== */
        .badge-estado {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 12px;
            font-size: 0.55rem;
            font-weight: 700;
            text-transform: uppercase;
            font-family: 'Courier New', monospace;
        }

        .badge-estado.disponible { 
            background: rgba(0, 210, 106, 0.12); 
            color: var(--highlight); 
            border: 1px solid rgba(0, 210, 106, 0.15); 
        }

        .badge-estado.usado { 
            background: rgba(255, 71, 87, 0.12); 
            color: #ff4757; 
            border: 1px solid rgba(255, 71, 87, 0.15); 
        }

        .badge-estado.limitado { 
            background: rgba(255, 215, 0, 0.12); 
            color: var(--vip); 
            border: 1px solid rgba(255, 215, 0, 0.15); 
        }

        /* ====================================================
           AUDITORÍA
           ==================================================== */
        .auditoria-container {
            max-height: 100px;
            overflow-y: auto;
            background: rgba(0,0,0,0.25);
            border-radius: 6px;
            padding: 5px 8px;
            font-family: 'Courier New', monospace;
            font-size: 0.65rem;
            border: 1px solid var(--border-tech);
        }

        .auditoria-container .log-entry {
            padding: 1px 0;
            border-bottom: 1px solid rgba(255,255,255,0.02);
            color: var(--text-muted);
        }

        .auditoria-container .log-entry .hora { 
            color: var(--text-dark-muted); 
            margin-right: 4px; 
        }

        .auditoria-container .log-entry .evento { 
            color: var(--highlight); 
            font-weight: 600; 
        }

        .auditoria-container .log-entry .detalle { 
            color: #fff; 
        }

        /* ====================================================
           CLÁUSULAS
           ==================================================== */
        .clausulas-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 5px;
            margin-top: 6px;
        }

        .clausula-item {
            background: rgba(255,255,255,0.02);
            border-left: 2px solid var(--highlight);
            padding: 4px 6px;
            border-radius: 0 4px 4px 0;
        }

        .clausula-item .clausula-num { 
            color: var(--highlight); 
            font-weight: 800; 
            margin-right: 2px; 
            font-size: 0.65rem; 
        }

        .clausula-item .clausula-titulo { 
            color: #fff; 
            font-weight: 600; 
            font-size: 0.7rem; 
        }

        .clausula-item .clausula-desc { 
            color: var(--text-muted); 
            font-size: 0.6rem; 
            margin-top: 1px; 
        }

        /* ====================================================
           FOOTER
           ==================================================== */
        .footer-tech {
            border-top: 1px solid rgba(255,255,255,0.05);
            background-color: #020617;
            padding: 10px 0;
            margin-top: 15px;
            text-align: center;
        }

        .footer-tech p {
            font-size: 0.65rem;
            color: var(--text-dark-muted);
            font-family: 'Courier New', monospace;
            line-height: 1.5;
            margin: 0;
        }

        /* ====================================================
           RESPONSIVE
           ==================================================== */
        @media (max-width: 992px) {
            .ruleta-grid { 
                grid-template-columns: 1fr 1fr; 
            }
            .clausulas-grid { 
                grid-template-columns: 1fr; 
            }
        }

        @media (max-width: 768px) {
            .ruleta-grid { 
                grid-template-columns: 1fr; 
            }
            .navbar-custom .container { 
                flex-wrap: wrap; 
                gap: 5px; 
            }
            .logo-wrap img { 
                height: 35px; 
            }
            body { 
                padding-top: 60px; 
            }
            .hamburger-btn { 
                display: block !important; 
            }
            .nav-user .btn.d-none.d-md-inline-block { 
                display: none !important; 
            }
            .wheel-container { 
                max-width: 150px; 
            }
        }

        @media (max-width: 480px) {
            .mobile-menu { 
                width: 260px; 
            }
            .wheel-container { 
                max-width: 130px; 
            }
        }

/* Migrated from setup_password.html */
:root {
            --bg-base: #0b1120;
            --bg-card: #1e293b;
            --highlight: #00d26a;
            --text-light: #e2e8f0;
            --text-muted: #94a3b8;
            --vip: #ffd700;
            --border-tech: rgba(0, 210, 106, 0.2);
        }

        /* ==========================================================
           NUEVOS ESTILOS PARA ICONOS (Font Awesome 6.7.2)
           ========================================================== */
        
        /* Efecto de brillo en iconos */
        .icon-glow {
            filter: drop-shadow(0 0 5px rgba(0, 210, 106, 0.3));
            transition: all 0.3s ease;
        }

        .icon-glow:hover {
            filter: drop-shadow(0 0 12px rgba(0, 210, 106, 0.6));
            transform: scale(1.1);
        }

        /* Efecto de brillo para iconos VIP */
        .icon-vip-glow {
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
            transition: all 0.3s ease;
        }

        .icon-vip-glow:hover {
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7));
            transform: scale(1.15);
        }

        /* Iconos con gradiente dorado para VIP */
        .icon-vip {
            background: linear-gradient(135deg, #ffd700, #ffb300);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Iconos con gradiente para seguridad */
        .icon-security {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Animación para iconos pulsantes */
        @keyframes pulse-icon {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .icon-pulse {
            animation: pulse-icon 2s ease-in-out infinite;
        }

        /* Animación para iconos flotantes */
        @keyframes float-icon {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }

        .icon-float {
            animation: float-icon 3s ease-in-out infinite;
        }

        /* ==========================================================
           ESTILOS EXISTENTES
           ========================================================== */

        body {
            background-color: var(--bg-base);
            color: var(--text-light);
            font-family: 'Raleway', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-image: 
                linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
        }

        .login-card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-tech);
            border-radius: 12px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            padding: 40px;
            width: 100%;
            max-width: 420px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .login-card:hover {
            border-color: rgba(0, 210, 106, 0.4);
            box-shadow: 0 15px 50px rgba(0, 210, 106, 0.08);
        }

        .login-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 4px;
            background: linear-gradient(90deg, var(--highlight), #00ff88);
        }

        .login-header {
            text-align: center;
            margin-bottom: 25px;
        }

        .login-header .icon-container {
            display: inline-block;
            background: rgba(0, 210, 106, 0.08);
            padding: 20px;
            border-radius: 50%;
            border: 2px solid rgba(0, 210, 106, 0.15);
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .login-header .icon-container:hover {
            transform: scale(1.05);
            border-color: var(--highlight);
            box-shadow: 0 0 30px rgba(0, 210, 106, 0.1);
        }

        .login-header .icon-container i {
            font-size: 2.8rem;
            color: var(--highlight);
        }

        .login-header h2 {
            font-weight: 800;
            letter-spacing: 2px;
            margin: 0;
            font-size: 1.5rem;
            color: #fff;
            text-transform: uppercase;
        }

        .login-header h2 .highlight {
            color: var(--highlight);
        }

        .login-header p {
            color: var(--highlight);
            font-size: 0.85rem;
            font-family: 'Courier New', monospace;
            font-weight: 700;
            margin-top: 8px;
        }

        .login-header .security-note {
            font-size: 0.8rem;
            color: #94a3b8;
            font-weight: 400;
            font-family: 'Raleway', sans-serif;
            line-height: 1.5;
            margin-top: 10px;
            display: block;
        }

        .login-header .security-note i {
            color: var(--highlight);
            margin-right: 4px;
        }

        .form-control {
            background-color: #0b1120;
            border: 1px solid #334155;
            color: white !important;
            padding: 12px 15px;
            font-family: 'Courier New', monospace;
            transition: all 0.3s ease;
        }

        .form-control::placeholder { 
            color: #94a3b8 !important; 
            opacity: 1 !important; 
        }

        .form-control:focus {
            background-color: #0b1120;
            border-color: var(--highlight);
            color: white;
            box-shadow: 0 0 10px rgba(0, 210, 106, 0.2);
        }

        .form-label {
            color: #cbd5e1;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .form-label i {
            color: var(--highlight);
            margin-right: 8px;
        }

        .btn-tech {
            background: linear-gradient(135deg, var(--highlight), #00ff88);
            color: #0b1120;
            font-weight: 800;
            border: none;
            padding: 14px;
            width: 100%;
            border-radius: 6px;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
            margin-top: 10px;
            position: relative;
            overflow: hidden;
        }

        .btn-tech::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: rotate(45deg);
            transition: all 0.5s ease;
        }

        .btn-tech:hover::after {
            left: 100%;
        }

        .btn-tech:hover {
            background: linear-gradient(135deg, #fff, #00ff88);
            color: #0b1120;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 210, 106, 0.4);
        }

        .btn-tech i {
            transition: all 0.3s ease;
        }

        .btn-tech:hover i {
            transform: translateY(-2px);
        }

        .alert-custom {
            background-color: rgba(231, 76, 60, 0.08);
            border: 1px solid #e74c3c;
            color: #e74c3c;
            font-size: 0.85rem;
            text-align: center;
            border-radius: 6px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .alert-custom i {
            font-size: 1.1rem;
        }

        /* ==========================================================
           RESPONSIVE
           ========================================================== */
        @media (max-width: 768px) {
            .login-card {
                padding: 30px 25px;
                margin: 0 15px;
            }

            .login-header h2 {
                font-size: 1.2rem;
            }

            .login-header .icon-container {
                padding: 15px;
            }

            .login-header .icon-container i {
                font-size: 2.2rem;
            }

            .form-control {
                font-size: 0.9rem;
                padding: 10px 12px;
            }

            .btn-tech {
                font-size: 0.8rem;
                padding: 12px;
            }

            .login-header .security-note {
                font-size: 0.75rem;
            }
        }

        @media (max-width: 480px) {
            .login-card {
                padding: 20px 18px;
                margin: 0 10px;
                border-radius: 10px;
            }

            .login-header .icon-container {
                padding: 12px;
                margin-bottom: 10px;
            }

            .login-header .icon-container i {
                font-size: 1.8rem;
            }

            .login-header h2 {
                font-size: 1rem;
                letter-spacing: 1px;
            }

            .login-header p {
                font-size: 0.7rem;
            }

            .login-header .security-note {
                font-size: 0.7rem;
            }

            .form-label {
                font-size: 0.75rem;
            }

            .form-control {
                font-size: 0.8rem;
                padding: 8px 10px;
            }

            .btn-tech {
                font-size: 0.7rem;
                padding: 10px;
                letter-spacing: 0.5px;
            }

            .alert-custom {
                font-size: 0.75rem;
                padding: 8px 12px;
            }
        }

/* Migrated from setup_password_reset.html */
:root { 
            --bg-base: #0b1120; 
            --bg-card: #1e293b; 
            --bg-header: #1c3961; 
            --highlight: #00d26a; 
            --text-light: #e2e8f0; 
            --text-muted: #cbd5e1;
            --vip: #ffd700;
            --border-tech: rgba(0, 210, 106, 0.2);
        }

        /* ==========================================================
           NUEVOS ESTILOS PARA ICONOS (Font Awesome 6.7.2)
           ========================================================== */
        
        /* Efecto de brillo en iconos */
        .icon-glow {
            filter: drop-shadow(0 0 5px rgba(0, 210, 106, 0.3));
            transition: all 0.3s ease;
        }

        .icon-glow:hover {
            filter: drop-shadow(0 0 12px rgba(0, 210, 106, 0.6));
            transform: scale(1.1);
        }

        /* Efecto de brillo para iconos VIP */
        .icon-vip-glow {
            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
            transition: all 0.3s ease;
        }

        .icon-vip-glow:hover {
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7));
            transform: scale(1.15);
        }

        /* Iconos con gradiente dorado para VIP */
        .icon-vip {
            background: linear-gradient(135deg, #ffd700, #ffb300);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Iconos con gradiente para seguridad */
        .icon-security {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Animación para iconos pulsantes */
        @keyframes pulse-icon {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .icon-pulse {
            animation: pulse-icon 2s ease-in-out infinite;
        }

        /* Animación para iconos flotantes */
        @keyframes float-icon {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }

        .icon-float {
            animation: float-icon 3s ease-in-out infinite;
        }

        /* ==========================================================
           ESTILOS EXISTENTES
           ========================================================== */

        body { 
            background-color: var(--bg-base); 
            color: var(--text-light); 
            font-family: 'Raleway', sans-serif; 
            background-image: linear-gradient(rgba(0, 210, 106, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 210, 106, 0.03) 1px, transparent 1px); 
            background-size: 40px 40px; 
            min-height: 100vh; 
            display: flex; 
            flex-direction: column; 
        }

        .navbar-custom { 
            background-color: var(--bg-header); 
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); 
            padding: 15px 0; 
            position: relative; 
            z-index: 1000;
            border-bottom: 2px solid rgba(0, 210, 106, 0.2);
        }

        .navbar-custom .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .navbar-custom img {
            height: 70px;
            width: auto;
            max-width: 100%;
            transition: all 0.3s ease;
        }

        .text-highlight { 
            color: var(--highlight); 
            font-weight: 700; 
        }

        .main-wrapper { 
            flex: 1; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            padding: 20px; 
        }

        .card-custom { 
            background-color: var(--bg-card); 
            border: 1px solid var(--border-tech); 
            border-radius: 12px; 
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); 
            position: relative; 
            padding: 2.5rem; 
            width: 100%; 
            max-width: 450px; 
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .card-custom:hover {
            border-color: rgba(0, 210, 106, 0.4);
            box-shadow: 0 15px 50px rgba(0, 210, 106, 0.08);
        }

        .card-custom::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 4px; 
            background: linear-gradient(90deg, var(--highlight), #00ff88);
        }

        .card-custom .icon-container {
            display: inline-block;
            background: rgba(0, 210, 106, 0.06);
            padding: 15px 20px;
            border-radius: 50%;
            border: 2px solid rgba(0, 210, 106, 0.12);
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .card-custom .icon-container:hover {
            transform: scale(1.05);
            border-color: var(--highlight);
            box-shadow: 0 0 30px rgba(0, 210, 106, 0.08);
        }

        .card-custom .icon-container i {
            font-size: 2.5rem;
            color: var(--highlight);
        }

        .form-control { 
            background-color: #0b1120; 
            border: 1px solid #334155; 
            color: white !important; 
            font-family: 'Courier New', monospace; 
            padding: 12px 15px;
            transition: all 0.3s ease;
        }

        .form-control::placeholder { 
            color: #94a3b8 !important; 
            opacity: 1 !important; 
        }

        .form-control:focus { 
            background-color: #0b1120; 
            border-color: var(--highlight); 
            color: white; 
            box-shadow: 0 0 10px rgba(0, 210, 106, 0.2); 
        }

        .form-label { 
            color: #cbd5e1; 
            font-size: 0.9rem; 
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .form-label i {
            color: var(--highlight);
            margin-right: 8px;
        }

        .btn-tech { 
            background: linear-gradient(135deg, var(--highlight), #00ff88);
            color: #0b1120; 
            font-weight: 800; 
            border: none; 
            transition: all 0.3s ease; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            padding: 14px; 
            width: 100%; 
            border-radius: 6px;
            position: relative;
            overflow: hidden;
        }

        .btn-tech::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: rotate(45deg);
            transition: all 0.5s ease;
        }

        .btn-tech:hover::after {
            left: 100%;
        }

        .btn-tech:hover { 
            background: linear-gradient(135deg, #fff, #00ff88);
            color: #0b1120; 
            transform: translateY(-2px); 
            box-shadow: 0 8px 25px rgba(0, 210, 106, 0.4); 
        }

        .btn-tech i {
            transition: all 0.3s ease;
        }

        .btn-tech:hover i {
            transform: translateY(-2px);
        }

        /* ==========================================================
           NOTIFICACIONES TÁCTICAS
           ========================================================== */

        .toast-container-top-right { 
            position: fixed; 
            top: 20px; 
            right: 20px; 
            z-index: 9999; 
            display: flex; 
            flex-direction: column; 
            gap: 10px; 
            pointer-events: none; 
        }

        .toast-tactical { 
            background-color: #0b1120; 
            border: 1px solid #1c3961; 
            border-radius: 6px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.6); 
            display: flex; 
            align-items: center; 
            padding: 15px 20px; 
            min-width: 300px; 
            max-width: 450px; 
            position: relative; 
            overflow: hidden; 
            animation: slideInRight 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards, fadeOut 0.4s ease 4.6s forwards; 
        }

        .toast-tactical.success {
            border-left: 4px solid #00d26a;
        }

        .toast-tactical.error {
            border-left: 4px solid #ef4444;
        }

        .toast-icon-success { 
            color: #00d26a; 
            font-size: 1.3rem; 
            margin-right: 15px; 
        }

        .toast-icon-error { 
            color: #ef4444; 
            font-size: 1.3rem; 
            margin-right: 15px; 
        }

        .toast-message { 
            color: #ffffff; 
            font-size: 0.9rem; 
            font-weight: 600; 
            font-family: 'Raleway', sans-serif; 
            letter-spacing: 0.5px; 
        }

        .toast-progress { 
            position: absolute; 
            bottom: 0; 
            left: 0; 
            height: 3px; 
            width: 100%; 
            animation: shrinkProgress 4.6s linear forwards; 
        }

        .toast-progress.success { 
            background: linear-gradient(90deg, #00d26a, #00ff88); 
        }

        .toast-progress.error { 
            background: linear-gradient(90deg, #ef4444, #dc2626); 
        }

        @keyframes slideInRight { 
            from { transform: translateX(110%); opacity: 0; } 
            to { transform: translateX(0); opacity: 1; } 
        }

        @keyframes fadeOut { 
            from { opacity: 1; } 
            to { opacity: 0; visibility: hidden; } 
        }

        @keyframes shrinkProgress { 
            from { width: 100%; } 
            to { width: 0%; } 
        }

        /* ==========================================================
           RESPONSIVE
           ========================================================== */
        @media (max-width: 768px) {
            .navbar-custom img {
                height: 55px !important;
            }

            .card-custom {
                padding: 2rem 1.5rem;
                margin: 0 15px;
            }

            .card-custom .icon-container i {
                font-size: 2rem;
            }

            .card-custom h2 {
                font-size: 1.3rem !important;
            }

            .card-custom p {
                font-size: 0.75rem !important;
            }

            .form-control {
                font-size: 0.9rem;
                padding: 10px 12px;
            }

            .btn-tech {
                font-size: 0.8rem;
                padding: 12px;
            }

            .toast-tactical {
                min-width: 250px;
                max-width: 350px;
                padding: 12px 16px;
            }
        }

        @media (max-width: 480px) {
            .navbar-custom {
                padding: 10px 0;
            }

            .navbar-custom img {
                height: 45px !important;
            }

            .card-custom {
                padding: 1.5rem 1rem;
                margin: 0 10px;
                border-radius: 10px;
            }

            .card-custom .icon-container {
                padding: 12px 15px;
                margin-bottom: 10px;
            }

            .card-custom .icon-container i {
                font-size: 1.6rem;
            }

            .card-custom h2 {
                font-size: 1.1rem !important;
                letter-spacing: 1px !important;
            }

            .card-custom p {
                font-size: 0.65rem !important;
            }

            .form-label {
                font-size: 0.75rem;
            }

            .form-control {
                font-size: 0.8rem;
                padding: 8px 10px;
            }

            .btn-tech {
                font-size: 0.7rem;
                padding: 10px;
                letter-spacing: 0.5px;
            }

            .toast-tactical {
                min-width: 200px;
                max-width: 280px;
                padding: 10px 14px;
            }

            .toast-icon-success,
            .toast-icon-error {
                font-size: 1rem;
                margin-right: 10px;
            }

            .toast-message {
                font-size: 0.75rem;
            }
        }

/* ====================================================
   SYSTEM ANALYST FIX: NAVBAR, LOGO, HAMBURGER & RESPONSIVE
   ==================================================== */

/* 1. Base Variables Fallback for Desktop */
:root {
    --navbar-height: 75px;
}

/* Adjust for medium and small screens */
@media (max-width: 991.98px) {
    :root { --navbar-height: 70px; }
}

/* 2. Login Page Padding and Navbar Spacing */
body.login-page {
    padding-top: 78px !important;
    display: flex;
    flex-direction: column;
    min-height: 108vh;   /*espaciado entre menu con el formulario de login */
    box-sizing: border-box;
}

body.login-page .main-wrapper {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8px 20px 30px;
    margin-top: 0 !important;
}

/* 3. Logo Sizing and Alignment (Increased by 15%) */
.navbar-custom .logo-wrap img,
.navbar-custom .logo-img {
    height: 52px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block;
    transition: height 0.3s ease;
}

@media (max-width: 768px) {
    .navbar-custom .logo-wrap img,
    .navbar-custom .logo-img {
        height: 40px !important;
    }
}



/* ====================================================
   SYSTEM ANALYST ADDITIONAL FIXES: BUTTON, NAVBAR & LAYOUT
   ==================================================== */

/* Centrar el texto e iconos dentro de .btn-tech */
.btn-tech {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Escalado global de fuentes en toda la interfaz (100% -> 104%) */
html {
    font-size: 104% !important;
}

/* Limpieza de márgenes, bordes y paddings laterales en el body */
body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Compensación de espaciado dinámico según la altura calculada de la barra superior en todas las páginas */
body {
    padding-top: var(--navbar-height, 90px) !important;
}

body.login-page {
    padding-top: 78px !important;
}

/* Fijar el menú superior en la parte superior de la pantalla en todas las páginas */
.navbar-custom {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10005 !important;
    box-sizing: border-box !important;
}


/* Cambiar alineación del contenedor principal en login para evitar que el card se desplace hacia arriba de la pantalla */
body.login-page .main-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 10px !important;
    padding-bottom: 30px !important;
    margin-top: 0 !important;
}

/* --- Ajustes de espaciado premium para la Tarjeta de Login y Formulario (Ajustado) --- */
body.login-page .card-custom {
    max-width: 480px !important;
    width: 100% !important;
    padding: 2.2rem 2rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

body.login-page .mb-4 {
    margin-bottom: 1.25rem !important;
}

body.login-page .form-label {
    display: inline-block !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

body.login-page .form-control {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    border-radius: 6px !important;
}

body.login-page .form-control + div {
    font-size: 0.72rem !important;
    margin-top: 5px !important;
    line-height: 1.3 !important;
}

body.login-page .recaptcha-wrapper {
    margin: 15px 0 !important;
    display: flex !important;
    justify-content: center !important;
}

body.login-page .btn-tech {
    padding: 12px !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    border-radius: 6px !important;
    margin-top: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.login-page .info-box {
    margin-top: 20px !important;
    padding: 15px !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    border-radius: 8px !important;
}


/* Restablecer el ancho completo de las tarjetas (.card-custom) en páginas de contenido */
body:not(.login-page) .card-custom {
    max-width: none !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Estilo específico para el card de Phoneinfoga: centrado y rectangular */
#phone-pane .card-custom {
    max-width: 800px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Permitir visualización de elementos destacados fuera de los límites de las tarjetas de planes */
.plan-card {
    overflow: visible !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.benefit-list li {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* Ajustes a la caja de soporte en la página de planes */
body:not(.login-page) .alert-custom {
    max-width: none !important;
    width: 100% !important;
    margin: 30px auto !important;
    padding: 30px !important;
    border-radius: 12px !important;
    background: rgba(11, 17, 32, 0.8) !important;
    border: 1px solid rgba(0, 210, 106, 0.2) !important;
    font-family: inherit !important;
}

/* Comportamiento unificado del menú responsive en todas las páginas */
body.menu-open {
    overflow: hidden;
}

@media (max-width: 992px) {
    .navbar-custom .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
    }

    .navbar-custom .nav-user {
        display: none;
    }

    .logo-wrap {
        width: auto;
        flex: 0 0 auto;
    }

    .navbar-custom .logo-wrap img,
    .navbar-custom .logo-img {
        height: 52px;
    }
}

/* Menú móvil global para index/login y demás páginas */
.navbar-custom .container {
    position: relative;
}

.navbar-custom .hamburger-btn {
    position: relative;
    margin-left: auto;
}

/* --- Restaurar fuente Raleway para los tabs y otros elementos generales --- */
.nav-tabs .nav-link {
    font-family: 'Raleway', sans-serif !important;
}

/* --- Margen superior para el contenedor principal de páginas de contenido para evitar solapamientos --- */
body:not(.login-page) .container {
    margin-top: 5px !important;
}

/* --- Estilo de tarjetas en páginas de contenido (Centrado, rectangular y con padding premium) --- */
body:not(.login-page) .card-custom {
    max-width: 950px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem 2.25rem !important;
    margin-bottom: 2.5rem !important; /* aumentar separación entre secciones */
}

/* Espacio y dimensiones optimizadas para las tarjetas de Phoneinfoga y Proyecto iKy */
#phone-pane .card-custom,
#iky-pane .card-custom,
#ayito-pane .card-custom {
    max-width: 900px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem 2.25rem !important;
}

/* Ocultar el borde decorativo superior verde de la tarjeta de Phoneinfoga, iKy y Ayito */
#phone-pane .card-custom::before,
#iky-pane .card-custom::before,
#ayito-pane .card-custom::before {
    display: none !important;
}

/* --- Prevenir que el menú de pestañas vibre o se desplace al cambiar de pestaña --- */
.nav-tabs .nav-link {
    border: 1px solid transparent !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    border-radius: 12px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.vip-link.active,
.nav-link.vip-link.active {
    background: rgba(8, 28, 55, 0.95) !important;
    color: var(--highlight) !important;
    border: 1px solid rgba(0, 210, 106, 0.65) !important;
    border-bottom: 3px solid var(--highlight) !important;
    box-shadow: 0 0 20px rgba(0, 210, 106, 0.12) !important;
    margin-bottom: -1px;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible,
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active:focus-visible,
.nav-link:focus,
.nav-link:focus-visible,
.nav-link.active:focus,
.nav-link.active:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 106, 0.14) !important;
    border-color: rgba(0, 210, 106, 0.65) !important;
    background: rgba(8, 28, 55, 0.95) !important;
}

/* --- Estilo específico de botón para alertas y modales de advertencia --- */
.btn-tech-danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 24px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.btn-tech-danger:hover {
    background: linear-gradient(135deg, #f87171, #dc2626) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
    color: #fff !important;
}

/* --- Diseño general para todas las páginas del portal (Evita recortes superiores y habilita scroll) --- */
body.portal-page {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}




/* --- Botones de igual tamaño en la página de perfil --- */

/* Forzar que alert-custom muestre contenido en bloque vertical en lugar de columnas */
.alert-custom {
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    column-count: 1 !important;
    display: block !important;
    color: #fff !important; /* texto por defecto blanco */
}

/* Títulos y párrafos: alineados a la izquierda y color blanco */
.alert-custom h5,
.alert-custom > p {
    color: #fff !important;
    text-align: left !important;
}

.alert-custom > p {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.75rem !important;
}

/* Enlaces de soporte: mostrarlos en una sola línea centrada, botones pequeños que quepan 3 en línea */
.alert-custom .support-links {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.6rem !important;
    margin-top: 5rem !important;
    justify-content: center !important;
    align-items: center !important;
}

.alert-custom .support-links .btn-support {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    font-size: 0.9rem !important;
    min-width: 120px !important;
    max-width: 160px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border-radius: 6px !important;
}

.alert-custom .support-links .btn-telegram {
    background: transparent !important;
    border: 1px solid rgba(59,130,246,0.15) !important;
    color: #fff !important;
}
.alert-custom .support-links .btn-whatsapp {
    background: transparent !important;
    border: 1px solid rgba(16,185,129,0.15) !important;
    color: #fff !important;
}
.alert-custom .support-links .btn-email {
    background: transparent !important;
    border: 1px solid rgba(148,163,184,0.08) !important;
    color: #fff !important;
}



/* Responsive: en pantallas muy pequeñas apilar verticalmente */
@media (max-width: 480px) {
    .alert-custom .support-links {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .alert-custom .support-links .btn-support {
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
    }
}


.profile-action-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
}
.profile-action-row .btn-equal {
    width: 200px; /* aumentó un poco para evitar recorte del texto */
    padding: 8px 10px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* evita overflow visual si hay problemas */
}

/* Reservar espacio fijo para el icono aunque no cargue (evita cambio de ancho) */
.profile-action-row .btn-equal i {
    display: inline-block;
    width: 18px;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
    margin-right: 0.5rem;
}

/* Ajuste para que el texto del botón use la fuente del documento, pero preservar la fuente de los iconos (Font Awesome) */
.profile-action-row .btn-equal {
    font-family: inherit;
}
.profile-action-row .btn-equal i {
    /* Restaurar la familia de Font Awesome para los iconos (si el CDN está presente) */
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    /* Para iconos sólidos: peso 900, para marcas no aplica. Aquí forzamos 900 para compatibilidad con fa-solid */
    font-weight: 900;
}

/* Responsive: permitir stack en pantallas pequeñas */
@media (max-width: 420px) {
    .profile-action-row {
        flex-wrap: wrap;
    }
    .profile-action-row .btn-equal {
        width: calc(50% - 8px);
    }
}

/* Apariencia específica para cada botón */
.btn-tech.btn-equal {
    background: linear-gradient(135deg, #ffd700, #ffa500);
    color: #0b1120;
    font-weight: 700;
    border: 2px solid transparent; /* bordes de 2px para igualar altura con .btn-back */
}

.btn-back.btn-equal {
    background: transparent;
    border: 2px solid #ef4444;
    color: #ef4444;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 700;
}

.btn-back.btn-equal:hover {
    background: rgba(239,68,68,0.1);
    color: #fff;
    border-color: #ef4444;
}

.btn-tech.btn-equal i, .btn-back.btn-equal i {
    margin-right: 0.5rem;
}


/* Soporte: texto a la izquierda, botones centrados en una línea con espacio y tamaño aumentado */
.alert-custom {
 color: #fff !important;
}
.alert-custom h5,
.alert-custom > p {
 color: #fff !important;
 text-align: left !important;
 margin-bottom: 0.6rem !important;
}

/* Forzar título en verde (sobre-escribe el color blanco anterior) */
.alert-custom h5 {
 color: #10b981 !important; /* verde */
}

/* Contenedor: centra los botones, pero el texto queda a la izquierda */
.alert-custom .support-links {
 display: flex !important;
 flex-direction: row !important;
 gap: 18px !important;         /* separación entre botones */
 margin-top: 0.8rem !important;
 justify-content: center !important; /* botones centrados */
 align-items: center !important;
}

/* Botones de soporte: más anchos y algo más altos para que el texto no salga */
.alert-custom .support-links .btn-support {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 padding: 10px 18px !important;    /* espaciado interno */
 font-size: 1rem !important;
 min-width: 190px !important;      /* ancho mínimo aumentado */
 max-width: 320px !important;
 height: 44px !important;          /* un poquito más de largo */
 line-height: 1 !important;
 white-space: nowrap !important;   /* evita saltos en escritorio */
 overflow: hidden !important;
 text-overflow: ellipsis !important;
 text-decoration: none !important;
 border-radius: 8px !important;
 background: rgba(255,255,255,0.03) !important; /* sutil */
 color: #fff !important;
 border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Icono a la izquierda con separación */
.alert-custom .support-links .btn-support i {
 margin-right: 10px !important;
 font-size: 1.05rem !important;
}

/* Colores sutiles por botón (opcional): mantiene fondo claro y texto blanco */
.alert-custom .support-links .btn-telegram {
 border-color: rgba(59,130,246,0.18) !important;
 background: rgba(59,130,246,0.04) !important;
}
.alert-custom .support-links .btn-whatsapp {
 border-color: rgba(16,185,129,0.18) !important;
 background: rgba(16,185,129,0.04) !important;
}
.alert-custom .support-links .btn-email {
 border-color: rgba(148,163,184,0.12) !important;
 background: rgba(148,163,184,0.03) !important;
}

/* Responsive: apilar en móvil y permitir texto en varias líneas */
@media (max-width: 480px) {
 .alert-custom .support-links {
   flex-direction: column !important;
   gap: 0.6rem !important;
 }
 .alert-custom .support-links .btn-support {
   width: 100% !important;
   min-width: unset !important;
   max-width: unset !important;
   white-space: normal !important;
   height: auto !important;
   padding: 10px 14px !important;
 }
}

/* Final responsive menu override: force hamburger and mobile drawer visibility on small screens */
.hamburger-btn {
    display: none !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 1.6rem !important;
    cursor: pointer !important;
    padding: 8px !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10010 !important;
    box-sizing: border-box !important;
}

@media (max-width: 992px) {
    .hamburger-btn {
        display: inline-flex !important;
    }

    .navbar-custom .nav-user {
        display: none !important;
    }
}

.mobile-menu {
    position: fixed !important;
    top: 0 !important;
    right: -320px !important;
    left: auto !important;
    width: 300px !important;
    max-width: 85vw !important;
    min-width: 260px !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    background: #0b1120 !important;
    z-index: 10009 !important;
    transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease !important;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.6) !important;
    overflow-y: auto !important;
    border-left: 2px solid rgba(0, 210, 106, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.mobile-menu.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.mobile-menu-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 18px 20px !important;
    background: #020617 !important;
    border-bottom: 1px solid rgba(0, 210, 106, 0.2) !important;
}

.mobile-menu-brand {
    color: var(--highlight) !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
}

.close-menu-btn {
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 1.4rem !important;
    cursor: pointer !important;
    padding: 8px !important;
}

.close-menu-btn:hover {
    color: #ef4444 !important;
}

.mobile-main-menu {
    list-style: none !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.mobile-main-menu li {
    list-style: none !important;
}

.mobile-main-menu a {
    display: flex !important;
    align-items: center !important;
    padding: 14px 20px !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.95rem !important;
    color: #e2e8f0 !important;
    text-decoration: none !important;
    transition: background 0.25s ease, color 0.25s ease !important;
    border-left: 3px solid transparent !important;
    gap: 10px !important;
}

.mobile-main-menu a:hover {
    color: #00d26a !important;
    background: rgba(0, 210, 106, 0.05) !important;
    border-left-color: #00d26a !important;
}

.mobile-main-menu a.mobile-menu-highlight {
    color: var(--highlight) !important;
}

.mobile-main-menu a.mobile-menu-logout {
    color: #ef4444 !important;
}

.mobile-main-menu a i {
    width: 24px !important;
    text-align: center !important;
    font-size: 1rem !important;
}

.mobile-menu-divider {
    border-top: 1px solid rgba(0, 210, 106, 0.2) !important;
    margin: 0.75rem 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mobile-patreon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 16px 20px 24px !important;
    padding: 12px 16px !important;
    background: #ffb300 !important;
    color: #0b1120 !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
}

.menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 10008 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    display: block !important;
    pointer-events: none !important;
}

.menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.menu-open {
    overflow: hidden !important;
}