/*
Theme Name: Minimal
Author: Web Forge Pro
Premium: No
*/

/* =========================================
   MINIMAL THEME (Clean & Compact)
   Architecture: Clean & Direct
   ========================================= */
   
:root {
    --primary-color: #171717;
    --primary-rgb: 23, 23, 23;
}

/* 1. BASE BLANCA PURA */
body {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #171717 !important; /* Negro suave */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 2. LA TARJETA (Invisible) 
   En minimal, no queremos marcos ni sombras, solo contenido flotando. */
.public-wrapper::before {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* 3. AVATAR (Efecto B/N Artístico) */
.profile-avatar {
    width: 90px !important; 
    height: 90px !important; 
    border-radius: 50%;
    margin-bottom: 20px;
    
    /* El toque minimalista: Foto en Blanco y Negro */
    filter: grayscale(100%);
    transition: all 0.4s ease;
    
    /* Sin bordes, la foto flota sola */
    border: none !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Hover: Recupera el color y crece un poquito */
.profile-avatar:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* 4. TEXTOS (Finos y Elegantes) */
.profile-title {
    font-weight: 300; /* Letra fina */
    font-size: 1.6rem;
    letter-spacing: -0.5px;
    margin-bottom: 5px;
    
    /* Usamos el color del usuario para el título */
    color: var(--primary-color) !important;
}

.profile-description {
    font-style: italic;
    color: #737373 !important; /* Gris medio */
    font-size: 0.9rem;
    margin-bottom: 35px;
}

/* 5. BOTONES (Estilo "Píldora" Outline) */
.link-btn {
    background: transparent !important;
    
    /* Borde fino del color del usuario */
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    
    padding: 12px 20px !important;
    border-radius: 50px; /* Redondos */
    font-weight: 400; 
    font-size: 0.9rem;
    
    /* Sin sombra por defecto, todo plano */
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* El icono hereda el color del texto automáticamente */
.link-btn i, .link-favicon-icon {
    color: inherit !important;
}

/* HOVER: Se rellena de color */
.link-btn:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    
    /* Pequeña elevación */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2) !important;
}

/* =========================================
   🖥️ VERSIÓN ESCRITORIO
   ========================================= */
@media (min-width: 768px) {
    .public-wrapper {
        padding-top: 60px;
        max-width: 500px;
    }
    
    .profile-title { font-size: 2rem; }
    
    /* Efecto extra en escritorio: Desplazamiento lateral */
    .link-btn:hover {
        transform: translateX(5px) translateY(0);
    }
}