/*
 * Perfil publico (marcas /music/, DJs /dj/, curadores /curator/).
 * Lo carga Includes/Headers/profiles-header-fixed.php (solo esas 3 paginas).
 *
 * 1) Header con el estandar de la app:
 *    telefono 64px de alto, flecha 19px pegada a 16px del borde, titulo 19px desde 58px;
 *    desde 551px el header mide 100px; tablet 50px a los lados (titulo 34px);
 *    computadora 75px a los lados (titulo 38px).
 * 2) Computadora y tablet (768px+): diseno "C1 · actual refinado".
 *    Mismo orden que hoy (logo, numeros, nombre, botones, pestanas con la ola),
 *    mas grande y limpio, playlists de 4 a 6 por fila. El telefono no cambia.
 */

/* ---------- sin marco negro al tocar (estas paginas no cargan base.css) ---------- */
html{-webkit-tap-highlight-color:transparent}
a:focus,button:focus,.btn:focus,.btn:active:focus,.btn.active:focus,
[role="button"]:focus,input[type="button"]:focus,input[type="submit"]:focus{outline:none !important}
a:focus-visible,button:focus-visible,.btn:focus-visible,[role="button"]:focus-visible,
input[type="button"]:focus-visible,input[type="submit"]:focus-visible{outline:2px solid #6a6cc6 !important;outline-offset:2px}

/* ---------- 1) header ---------- */
.fixed_header{padding:0 16px !important}
.fixed_header_body{height:64px;min-height:64px !important;max-height:64px !important;align-items:center}
.fixed_header_title{flex:1 1 auto;min-width:0 !important;max-width:none !important;height:100%}
.header_left_icon_div{flex:0 0 42px;min-width:42px !important;max-width:42px !important}
.header_left_title_div{flex:1 1 auto;min-width:0 !important;max-width:none !important}
.header_left_title_text{font-size:19px !important;font-weight:700 !important;letter-spacing:-.02em !important;line-height:1.2 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back_left_icon{font-size:19px !important;color:#111 !important}
.header_options{flex:0 0 auto;min-width:0 !important;max-width:none !important}
.icon_bars{width:26px !important}
/* el header crecio: el perfil baja lo mismo para que nada quede tapado */
#public_profile{padding-top:37px !important}

@media (min-width:551px){
    .fixed_header_body{height:100px;min-height:100px !important;max-height:100px !important}
    #public_profile{padding-top:76px !important}
}
@media (min-width:768px){
    .fixed_header{padding:0 50px !important}
    .header_left_icon_div{flex-basis:48px;min-width:48px !important;max-width:48px !important}
    .header_left_title_text{font-size:34px !important;letter-spacing:-.03em !important}
    .back_left_icon{font-size:22px !important}
    .icon_bars{width:34px !important}
}
@media (min-width:992px){
    .fixed_header{padding:0 75px !important}
    .header_left_title_text{font-size:38px !important}
    .back_left_icon{font-size:24px !important}
}

/* ---------- 2) computadora y tablet: C1 ---------- */
@media (min-width:768px){
    #public_profile{--side:50px;padding:120px var(--side) 100px !important}

    /* logo, numeros, nombre, botones */
    #public_profile .profile_card{margin:0 auto !important;padding:0 !important;max-width:780px;display:flex !important;flex-direction:column;align-items:center}
    #public_profile .chip{display:flex !important;flex-direction:column;align-items:center;margin:0 !important}
    #public_profile .chip>a{height:auto !important}
    #public_profile .chip .img{display:block !important;width:156px !important;height:156px !important;margin:0 !important;border:0 !important;
        box-shadow:0 0 0 6px #fff,0 0 0 7px #ececef,0 24px 50px -22px rgba(20,20,40,.35)}
    #public_profile .profile_card_header{width:auto !important;padding:0 !important;margin:30px 0 0 !important;gap:56px;justify-content:center}
    #public_profile .header_sections{width:auto !important;min-width:64px}
    #public_profile .profile_card_header h5{font-size:28px !important;font-weight:700 !important;letter-spacing:-.03em !important;margin:0 0 8px !important}
    #public_profile .profile_card_header h6{font-size:13px !important;color:#8b8b8f !important;line-height:1.2 !important}
    #public_profile .card_body{padding:30px 0 0 !important;text-align:center}
    #public_profile .card_body_fullname_txt{font-size:30px !important;font-weight:700 !important;letter-spacing:-.035em !important}
    #public_profile .card_body_usertype_txt{font-size:15px !important;color:#8b8b8f !important;margin-top:4px !important}
    #public_profile .card_body_about_txt{font-size:16px !important;color:#3c3c44 !important;line-height:1.6 !important;max-width:620px;margin:12px auto 0 !important}
    #public_profile .card_footer{display:flex !important;gap:10px;width:auto !important;max-width:none !important;margin-top:26px !important}
    #public_profile .card_footer>*{width:150px !important;height:46px;margin:0 !important;padding:0 !important;font-size:15px !important}
    #public_profile .default_profile_btn_txt{font-size:15px !important}

    /* pestanas + ola */
    #public_profile .carousel_nav_header{margin:64px 0 0 !important}
    #public_profile .carousel_nav_header_type{position:relative;flex:1 1 0;min-width:0 !important;padding:0 0 10px !important;font-size:15px !important;font-weight:600 !important;letter-spacing:.14em !important;color:#9a9aa2 !important;text-decoration:none !important}
    #public_profile .carousel_nav_header_type h2{font-size:22px !important;line-height:1 !important;margin:0 !important}
    #public_profile .carousel_nav_header_type:hover,#public_profile .carousel_nav_header_type.on{color:#111 !important}
    #public_profile .carousel_nav_header_type.on:after{content:"";position:absolute;left:50%;bottom:-6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#6a6cc6}
    #public_profile .waves_container{width:auto !important;margin:0 calc(-1 * var(--side)) !important}
    #public_profile .carousel{margin-top:10px}

    /* playlists, sets y eventos */
    #public_profile .all_posts,#public_profile .all_events{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px;margin:0 0 40px !important}
    #public_profile .posts_cards,#public_profile .events_cards{float:none !important;display:block !important;width:auto !important;min-width:0 !important;max-width:none !important;min-height:0 !important;padding:0 !important}
    #public_profile .post_img,#public_profile .event_img,#public_profile .post_big_img{min-height:0 !important;max-height:none !important;aspect-ratio:1/1;border-radius:10px !important;transition:transform .25s,box-shadow .25s}
    #public_profile .posts_cards:hover .post_img,#public_profile .events_cards:hover .event_img{transform:translateY(-4px);box-shadow:0 18px 40px -16px rgba(20,20,40,.35) !important}
    #public_profile .post_body,#public_profile .event_body{padding:0 !important}
    #public_profile .post_name{font-size:16px !important;font-weight:600 !important;padding-top:14px !important}
    #public_profile .post_description{font-size:13.5px !important;color:#6b6b72 !important}
    #public_profile .bottom_stats{font-size:12px !important;padding-top:5px !important}
}
@media (min-width:992px){
    #public_profile{--side:75px}
}
@media (min-width:1100px){
    #public_profile .all_posts,#public_profile .all_events{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:1280px){
    #public_profile .all_posts,#public_profile .all_events{grid-template-columns:repeat(6,minmax(0,1fr))}
}