/*
import url(../../../../../../../template/css/media-phone.css);
*/

html.bx-media-phone {
    font-size:100%;
}

/* never visible - used to check MQ */
.bx-media-phone body::before {
  display: none;
  content: 'mobile';
}

.bx-media-phone .bx-def-media-phone-hide {
    display:none !important;
}
.bx-media-phone .bx-def-media-phone-show-block {
    display:block;
}

.bx-media-phone .bx-def-constraint-all *,
.bx-media-phone .bx-def-constraint-list ol, .bx-def-constraint-list ul,
.bx-media-phone .bx-def-constraint-pre:not(.bx-def-vanilla-html) pre,
.bx-media-phone .bx-def-constraint-object object,
.bx-media-phone .bx-def-constraint-iframe iframe,
.bx-media-phone .bx-def-constraint-img img {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    max-width:100% !important;
    overflow:hidden !important;
}
.bx-media-phone .bx-def-constraint-img img {
    height:auto !important;
}
.bx-media-phone .bx-def-constraint-pre:not(.bx-def-vanilla-html) pre {
    overflow:scroll !important;
}


/*--- default.css ---*/ 
.bx-media-phone .bx-def-page-width {
    width:auto;
}


/*--- general.css ---*/
.bx-media-phone #bx-toolbar-content .bx-toolbar-item.bx-ti-logo {
    margin-left: 0;
    margin-right: 0;
}
.bx-media-phone #bx-footer-wrapper {
    height: auto;
}

.bx-media-phone .sys-cpf-submenu .sys-cpf-submenu-item > div {
    display: block;
    text-align: center;
}


/*--- menu.css ---*/
.bx-media-phone ul.bx-menu-toolbar li a span.bx-menu-toolbar-item-title,
.bx-media-phone #bx-menu-toolbar-2-container ul.bx-menu-toolbar li a span.bx-menu-toolbar-item-title {
    display:none;
}


/*--- loading indicator ---*/
.bx-media-phone .bx-btn .bx-loading-ajax-btn {
    margin-top: 2px;
    margin-bottom: 2px;
}
.bx-media-phone .bx-btn.bx-btn-small .bx-loading-ajax-btn {
    margin-top: 0px;
    margin-bottom: 0px;
}


/*--- grid.css ---*/
html.bx-media-phone .bx-grid-table-wrapper-responsive .bx-grid-table-wrapper {
    overflow-x:scroll;
}
html.bx-media-phone .bx-grid-table-wrapper-responsive .bx-grid-table {
    min-width:720px;
}
html.bx-media-phone .bx-grid-table-wrapper-responsive.bx-grid-table-wrapper2:before,
html.bx-media-phone .bx-grid-table-wrapper-responsive.bx-grid-table-wrapper2:after {
    display:block;
}


/*--- score.css ---*/
.bx-media-phone div.bx-score-by-list div.bx-score-by-list-cnt {
    max-height: none;
}


/*--- cover.html genérico: py-16 (8rem) es excesivo en teléfono. :not(.bx-cover-empty) para no
     pelear con la regla de general.css que ya baja los covers vacíos a 0.75rem. ---*/
html.bx-media-phone .bx-cover-wrapper:not(.bx-cover-empty) .py-16 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
html.bx-media-phone .bx-cover-title .text-4xl {
    font-size: 1.5rem;
    line-height: 2rem;
}


/*--- mod_groups/cover.html (Espacios/Grupos/perfiles base-profile): en teléfono el bloque de info
     (título text-4xl + meta + acciones h-14/mt-6) cae entero bajo el banner (el solape -mt solo
     aplica en lg:) y deja un bloque blanco enorme → compactarlo. El -mt-24 original sube solo el
     avatar; se recorta para que el conjunto quede pegado al banner sin tapar el botón de subir
     cover. ---*/
html.bx-media-phone .bx-base-pofile-cover-info h1 {
    font-size: 1.5rem;
    line-height: 2rem;
}
html.bx-media-phone .bx-base-pofile-ci-cnt {
    margin-top: -3.5rem;
}
html.bx-media-phone .bx-base-pofile-cover-thumb .bx-base-pofile-unit-thumb {
    height: 6rem; /* el h-48 (192px) de escritorio se come media pantalla en teléfono */
    width: 6rem;
    font-size: 2.25rem; /* letter-avatar proporcional */
}
html.bx-media-phone .bx-base-pofile-cover-user {
    margin-top: 0.5rem;
}
html.bx-media-phone .bx-base-pofile-cover-actions {
    height: auto;
    margin-top: 0.5rem;
}
html.bx-media-phone .bx-base-pofile-cover-actions .bx-btn {
    min-height: 2.75rem; /* touch target 44px */
}
html.bx-media-phone .bx-base-profile-cover-meta {
    margin-top: 0.25rem;
}

/*--- DS cabecera de Espacio en teléfono (handoff space-header móvil): banner 68px,
     S más pequeña, título 24px, "Unirse a Espacio" a ancho completo y el resto
     de acciones en fila debajo. ---*/
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-image.bx-bpci-holder {
    height: 68px;
}
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-image.bx-bpci-holder::after {
    font-size: 190px;
    top: -55px;
    right: 12px;
}
html.bx-media-phone .bx-page-view-space-profile .sc-ds-space-eyebrow {
    left: 16px;
    bottom: 12px;
}
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-user h1 {
    font-size: 24px;
}
/* Acciones: el menú es more-auto (JS que MIDE anchos y mete el sobrante en el popup
   "Más") — NADA de flex-basis:100% ni wrap aquí (rompía la medición: botón cortado
   fuera de pantalla y chip Más flotante). Cooperamos con el JS: la fila ocupa todo el
   ancho y "Unirse a Espacio" CRECE (flex-grow no altera la medición de overflow). */
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-actions,
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-base-general-entity-actions,
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-more-auto-wrapper,
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-actions ul {
    width: 100%;
}
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item-profile-fan-add {
    flex: 1 1 auto;
}
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item-profile-fan-add > span,
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item-profile-fan-add > span > a {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* Botón de subir portada: a la DERECHA (la regla base lo deja left:1rem y chocaba
   con el eyebrow "• ESPACIO" abajo-izquierda). */
html.bx-media-phone .bx-page-view-space-profile .bx-image-edit-buttons {
    left: auto;
    right: 1rem;
}

/*--- "Me gusta" como ícono en teléfono (spec móvil del handoff): se oculta el texto
     y queda el pulgar con tap target completo. ---*/
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item-vote .bx-mi-text {
    display: none;
}
html.bx-media-phone .bx-page-view-space-profile .bx-base-pofile-cover-actions .bx-menu-item-vote > span > a {
    padding: 0 12px;
}