/* =====================================================================
   Portal Social Network — Blueberry
   Los colores se inyectan como variables CSS desde el servidor
   (blueberry.social.config) al inicio de la plantilla.
   ===================================================================== */

:root {
    --sn-bg-from           : #0B1E36;
    --sn-bg-to             : #0a1628;
    --sn-accent            : #4A9EFF;
    --sn-accent2           : #a78bfa;
    --sn-text              : #ffffff;
    --sn-subtitle          : #7a8fa8;
    --sn-footer-text       : #2e4060;
    --sn-card-bg-color     : #ffffff;
    --sn-card-bg           : color-mix(in srgb, var(--sn-card-bg-color)  5%, transparent);
    --sn-card-border       : color-mix(in srgb, var(--sn-card-bg-color)  8%, transparent);
    --sn-card-hover-bg     : color-mix(in srgb, var(--sn-card-bg-color)  9%, transparent);
    --sn-card-hover-border : rgba(74, 158, 255, 0.35);
    --sn-divider           : rgba(255, 255, 255, 0.07);
    /* Textura: color e intensidad configurables desde el backend */
    --sn-texture-color     : #ffffff;
    --sn-texture-opacity   : 0.10;
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Body ───────────────────────────────────────────────────────────── */
body {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(160deg, var(--sn-bg-from) 0%, var(--sn-bg-to) 100%);
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--sn-text);
}

/* ── Capa de textura (pseudo-elemento sobre el degradado) ───────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--sn-texture-opacity);
}

/* ── Contenedor (por encima de la textura) ──────────────────────────── */
.sn-container {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 0 auto;
    padding: 48px 20px 80px;
}

/* ─────────────────────────────────────────────────────────────────────
   Texturas de fondo
   ───────────────────────────────────────────────────────────────────── */

/* Puntos */
body.sn-texture--dots::before {
    background-image: radial-gradient(var(--sn-texture-color) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
}

/* Cuadrícula */
body.sn-texture--grid::before {
    background-image:
        linear-gradient(var(--sn-texture-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--sn-texture-color) 1px, transparent 1px);
    background-size: 36px 36px;
}

/* Líneas diagonales */
body.sn-texture--diagonal::before {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0px, transparent 12px,
        var(--sn-texture-color) 12px, var(--sn-texture-color) 13px
    );
}

/* Cuadrícula diagonal (crosshatch) */
body.sn-texture--cross::before {
    background-image:
        repeating-linear-gradient(
            -45deg,
            transparent 0px, transparent 12px,
            var(--sn-texture-color) 12px, var(--sn-texture-color) 13px
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0px, transparent 12px,
            var(--sn-texture-color) 12px, var(--sn-texture-color) 13px
        );
}

/* Hexágonos — SVG data URI con stroke-opacity para mayor compatibilidad */
body.sn-texture--hexagons::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpolygon fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1' points='28,3 53,17 53,47 28,61 3,47 3,17'/%3E%3Cpolygon fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1' points='28,63 53,77 53,100'/%3E%3Cpolygon fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1' points='28,63 3,77 3,100'/%3E%3C/svg%3E");
    background-size: 56px 100px;
}

/* Ruido / Grano — SVG feTurbulence */
body.sn-texture--noise::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    background-repeat: repeat;
}

/* ── Perfil ─────────────────────────────────────────────────────────── */
.sn-profile { text-align: center; margin-bottom: 36px; }

.sn-avatar-ring {
    display: inline-flex;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sn-accent) 0%, var(--sn-accent2) 100%);
    margin-bottom: 18px;
}

.sn-avatar {
    width: 96px; height: 96px;
    border-radius: 50%; object-fit: cover;
    background: #0B1E36; display: block;
}

.sn-avatar-placeholder {
    width: 96px; height: 96px;
    border-radius: 50%; background: #1a2f4a;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; color: var(--sn-accent);
}

.sn-name {
    font-size: 1.85rem; font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sn-text); margin-bottom: 8px;
}

.sn-tagline {
    font-size: 0.95rem; color: var(--sn-subtitle);
    line-height: 1.55; max-width: 340px; margin: 0 auto;
}

/* ── Tarjetas ───────────────────────────────────────────────────────── */
.sn-links { display: flex; flex-direction: column; gap: 12px; }

.sn-card {
    display: flex; align-items: center; gap: 16px;
    background: var(--sn-card-bg);
    border: 1px solid var(--sn-card-border);
    border-radius: 18px; padding: 14px 18px;
    text-decoration: none !important; color: inherit;
    transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.sn-card:hover {
    background: var(--sn-card-hover-bg);
    border-color: var(--sn-card-hover-border);
    transform: translateY(-1px);
}
.sn-card:active { transform: translateY(0); }

.sn-icon {
    width: 50px; height: 50px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}

.sn-info { flex: 1; min-width: 0; }

.sn-link-name {
    font-weight: 600; font-size: 1rem;
    color: var(--sn-text); margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sn-link-desc {
    font-size: 0.82rem; color: var(--sn-subtitle);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sn-arrow { color: rgba(255, 255, 255, 0.25); font-size: 0.85rem; flex-shrink: 0; }

/* ── Tarjeta de facturación ─────────────────────────────────────────── */
.sn-invoice-card {
    display: flex; align-items: center; gap: 16px;
    background: color-mix(in srgb, var(--sn-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--sn-accent) 30%, transparent);
    border-radius: 18px; padding: 14px 18px;
    margin-top: 20px;
    transition: background 0.18s, border-color 0.18s;
}
.sn-invoice-card:hover {
    background: color-mix(in srgb, var(--sn-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--sn-accent) 50%, transparent);
}

.sn-invoice-icon {
    width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    background: color-mix(in srgb, var(--sn-accent) 18%, transparent);
    color: var(--sn-accent);
}

.sn-invoice-info { flex: 1; min-width: 0; }

.sn-invoice-title {
    font-weight: 600; font-size: 1rem;
    color: var(--sn-text); margin-bottom: 2px;
}

.sn-invoice-sub {
    font-size: 0.82rem; color: var(--sn-subtitle);
}

.sn-invoice-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--sn-accent);
    color: #fff !important; text-decoration: none !important;
    font-size: 0.88rem; font-weight: 600;
    padding: 8px 16px; border-radius: 10px; flex-shrink: 0;
    transition: opacity 0.18s;
}
.sn-invoice-btn:hover { opacity: 0.85; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.sn-footer-icons {
    display: flex; justify-content: center; gap: 20px;
    margin-top: 40px; padding-top: 24px;
    border-top: 1px solid var(--sn-divider);
}
.sn-footer-icons a {
    color: #4a6080; font-size: 1.25rem;
    transition: color 0.18s; text-decoration: none;
}
.sn-footer-icons a:hover { color: var(--sn-text); }

.sn-copyright {
    text-align: center; margin-top: 18px;
    font-size: 0.72rem; color: var(--sn-footer-text);
    letter-spacing: 0.07em; text-transform: uppercase;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .sn-container { padding: 36px 16px 64px; }
    .sn-name      { font-size: 1.6rem; }
}