/*
Theme Name: The Matrix
Author: Web Forge Pro
Premium: Yes
*/

/* 🟢 CORAZÓN DEL TEMA: Verde Matrix por defecto */
:root {
    --primary-color: #00ff41; /* Verde terminal */
    --primary-rgb: 0, 255, 65;
    --dark-bg: #0d0d0d;
}

/* 1. BASE: La Caverna Digital */
body {
    background-color: #000000 !important;
    color: var(--primary-color) !important;
    font-family: 'Courier New', Courier, monospace !important; /* Fuente monoespaciada tipo código */
    letter-spacing: -0.5px;
    
    /* Fondo con efecto de "Lluvia Digital" sutil (gradiente) */
    background-image: linear-gradient(0deg, transparent 24%, rgba(0, 255, 65, .05) 25%, rgba(0, 255, 65, .05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 65, .05) 75%, rgba(0, 255, 65, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 255, 65, .05) 25%, rgba(0, 255, 65, .05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 65, .05) 75%, rgba(0, 255, 65, .05) 76%, transparent 77%, transparent) !important;
    background-size: 50px 50px !important;
}

/* 2. LA TARJETA (El Monitor CRT) */
.public-wrapper {
    background: rgba(0, 10, 0, 0.9) !important;
    border: 1px solid var(--primary-color) !important;
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3) !important;
    border-radius: 4px !important; /* Bordes rectos, tecnología antigua */
}

/* 3. AVATAR (El Operador) */
.profile-avatar {
    border-radius: 0 !important; /* Cuadrado */
    border: 2px solid var(--primary-color) !important;
    padding: 3px; /* Espacio entre foto y borde */
    background: #000; /* Fondo negro tras la foto */
    box-shadow: 0 0 10px var(--primary-color);
    filter: grayscale(100%) contrast(1.2); /* Foto en blanco y negro con contraste */
}

/* 4. TEXTOS (Consola de Comandos) */
.profile-title {
    color: var(--primary-color) !important;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 0 0 5px var(--primary-color); /* Glow verde */
}
.profile-description {
    color: #aaffaa !important; /* Verde pálido */
    font-size: 0.9rem;
}
.profile-title::before { content: "> "; } /* Prompt de terminal */

/* 5. BOTONES (Líneas de Código) */
.link-btn {
    background: #000000 !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    font-family: 'Courier New', Courier, monospace !important;
    border-radius: 0 !important; /* Rectangulares */
    transition: all 0.2s ease;
    text-transform: lowercase; /* Estilo hacker */
}

.link-btn:hover {
    background: var(--primary-color) !important;
    color: #000000 !important; /* Invertir colores al pasar el ratón */
    box-shadow: 0 0 20px var(--primary-color) !important;
    font-weight: bold;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>💊</text></svg>") 16 0, auto; /* Cursor de pastilla roja (broma sutil) */
}

/* Iconos */
.link-btn i, .link-favicon-icon {
    color: inherit !important; /* Heredan el color del botón (verde o negro) */
}

/* MODALES: Estilo Sistema */
.qr-card {
    background: #000000 !important;
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.2) !important;
}

.qr-card h3, .qr-card p, .qr-card strong {
    color: var(--primary-color) !important;
    font-family: monospace !important;
}

#modal-pass-input {
    background: #001100 !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    font-family: monospace !important;
}

.btn-copy-link-premium {
    background: var(--primary-color) !important;
    color: #000 !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 0 !important;
    text-transform: uppercase;
}

.close-modal-btn {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

/* =========================================
   🖥️ VERSIÓN ESCRITORIO
   ========================================= */
@media (min-width: 768px) {
    .public-wrapper {
        max-width: 600px !important;
        margin-top: 5vh;
    }
}