/* =========================================================
   ADAPTABILIDAD Y RESPONSIVE
   ========================================================= */

/* Desktop & Pantallas Grandes (Formato App Contenida) */
@media (min-width: 481px) {
    body {
        padding: 20px 0;
        background: #121212;
        background-image: radial-gradient(circle at 50% 10%, rgba(123, 44, 255, 0.15), transparent 60%);
    }

    .app-container {
        border-radius: var(--radius-app);
        box-shadow: var(--shadow-app);
        border: 1px solid var(--border-card);
        min-height: auto;
        height: 880px;
        max-height: 92vh;
    }
}

/* Móviles Pequeños (320px - 374px) */
@media (max-width: 374px) {
    :root {
        --app-max-width: 100%;
    }

    .cover-wrapper {
        height: 150px;
    }

    .avatar-container {
        width: 95px;
        height: 95px;
    }

    .profile-header {
        margin-top: -50px;
    }

    .user-name {
        font-size: 1.2rem;
    }

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

    .circle-icon {
        width: 50px;
        height: 50px;
    }

    .circle-icon svg, .circle-icon img {
        width: 22px;
        height: 22px;
    }
}

/* Dispositivos con Safe Area (Notch / Inset Inferior) */
@supports (padding-top: env(safe-area-inset-top)) {
    .app-container {
        padding-top: env(safe-area-inset-top);
    }
}