/* ════════════════════════════════════════════════════════════════════════
* BUYACÁ — Perfil de negocio v2 (Fase 1 del rediseño)
* ───────────────────────────────────────────────────────────────────────
* Overlay DIRIGIDO: no reescribe frontend.css completo, solo los
* componentes nuevos de esta fase —
* · Cluster flotante de acciones sobre la portada (SOLO Favorito, con
* contador de personas que lo guardaron — ver .bq-profile-fav-pill)
* · Bandera "Reportar negocio" e interruptor "Modo admin/cliente" del
* dueño, ambos junto al nombre del negocio (ver .bq-profile-flag-wrap /
* .bq-profile-mode-switch), que reemplazan .bq-admin-bar
* (el switch "Cliente/Admin" siempre visible; ver AUDITORIA.md y
* templates/business-profile.php)
* · CTA de WhatsApp promovido a acción primaria
*
* Se carga vía wp_head prioridad 999999 (ver
* class-buyaca-business-profile-v2.php) — antes del primer pintado, para
* evitar el "flash" de diseño viejo. Depende de !important + selectores
* específicos (no de imprimirse al final) para ganarle a capas que sí
* imprimen tarde en wp_footer, como ux-final-v907.css (wp_footer 1000).
*
* Usa las variables de assets/css/tokens.css (cargado en antes que
* esta hoja). Dentro de .buyaca-business-profile, --bq-ink/--bq-bg/
* --bq-radius-* ya resuelven a los valores nuevos del rediseño (ver
* tokens.css, bloque de scope).
* ════════════════════════════════════════════════════════════════════════ */
/* ── [Fix reportado con captura] El botón "Volver" (.bq-float-btn, definido
en frontend.css:3575, position:fixed;top:16px;z-index:9999) queda pegado
contra la barra de administración de WordPress (#wpadminbar, fixed,
z-index:99999, 32px desktop / 46px móvil) cuando se navega logueado como
admin — la barra le gana en z-index y lo tapa/aprieta contra el borde.
WordPress agrega la clase body.admin-bar cuando esa barra está activa;
se usa para compensar el offset exactamente como lo hace WP core. ── */
body.admin-bar .bq-float-btn {
top: calc(16px + 32px) !important;
}
body.admin-bar #bq-cv2-stickyhead {
top: 32px !important;
}
@media (max-width: 782px) {
body.admin-bar .bq-float-btn {
top: calc(16px + 46px) !important;
}
body.admin-bar #bq-cv2-stickyhead {
top: 46px !important;
}
}
/* ── Cluster flotante: Favorito · Compartir · ⋮ / píldora de salida ──
[Fix reportado] Los botones se veían "muy arriba"/apretados contra el
borde: faltaba respetar el safe-area (notch/status bar en PWA — ver el
script de más arriba en business-profile.php)
y el tamaño de toque (34px) quedaba bajo el mínimo de 44×44 que pide la
propia skill. Se corrige con inset seguro + botones más grandes. */
.bq-profile-float-cluster {
position: absolute;
/* [Pedido] Un poco más abajo que antes */
top: max(44px, calc(env(safe-area-inset-top, 0px) + 28px));
/* [Pedido] un poco más adentro (antes 16px) para dejar aire al logo
centrado en el banner, que ahora es el protagonista de esta zona. */
right: max(24px, calc(env(safe-area-inset-right, 0px) + 20px));
z-index: 25;
display: flex;
align-items: center;
gap: 8px;
}
/* [Pedido] Compartir se movió acá junto a Favoritos — la vieja versión
(.bq-profile-share-btn) estaba pensada para vivir dentro de
.bq-cv2-name-row (position:absolute, fondo blanco con borde). Acá se
neutraliza esa posición y se deja como ícono blanco sin fondo, igual
tratamiento que la flecha "Volver" y el corazón de Favoritos. */
.bq-profile-float-cluster .bq-profile-share-btn {
position: static;
top: auto;
left: auto;
transform: none;
width: 40px;
height: 40px;
background: transparent;
border: none;
color: #fff;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.bq-profile-float-cluster .bq-profile-share-btn:hover {
color: #fff;
border-color: transparent;
transform: scale(1.08);
}
.bq-profile-float-cluster .bq-profile-share-btn:active {
transform: scale(.92);
}
/* [Pedido] Flecha "Volver" — ya no position:fixed, vive dentro del banner
y se desplaza con la página (ver templates/business-profile.php,
.bq-cv2-banner-back-btn). Mismo tratamiento visual que Compartir/
Favoritos: sin fondo, ícono blanco con sombra suave para leerse sobre
cualquier foto. */
.bq-cv2-banner-back-btn {
position: absolute;
left: max(14px, env(safe-area-inset-left, 0px));
top: max(44px, calc(env(safe-area-inset-top, 0px) + 28px));
z-index: 25;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #fff;
cursor: pointer;
padding: 0;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
transition: transform var(--bq-motion-fast);
}
.bq-cv2-banner-back-btn:hover {
transform: scale(1.08);
}
.bq-cv2-banner-back-btn:active {
transform: scale(.92);
}
/* [Pedido] "Reportar negocio" convertido en tres puntos (⋮), movido junto
a Compartir/Favoritos — la vieja versión (.bq-profile-flag-wrap) estaba
pensada para vivir dentro de .bq-cv2-name-row (position:absolute a la
derecha, botón con fondo/borde). Acá se neutraliza esa posición y se
deja como ícono blanco sin fondo, igual que sus vecinos. */
.bq-profile-float-cluster .bq-profile-flag-wrap {
position: relative;
top: auto;
right: auto;
transform: none;
}
.bq-profile-float-cluster .bq-profile-flag-btn {
width: 40px;
height: 40px;
background: transparent;
border: none;
color: #fff;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.bq-profile-float-cluster .bq-profile-flag-btn:hover {
color: #fff;
border-color: transparent;
transform: scale(1.08);
}
.bq-profile-float-cluster .bq-profile-flag-btn.is-active {
background: rgba(255, 255, 255, .22);
border-color: transparent;
color: #fff;
}
/* ═══════════════════════════════════════════════════════════════════════
* [Rediseño estilo página] Banner + logo + info, estilo "página de
* Facebook": logo en la esquina inferior izquierda del banner (mitad
* sobre la foto, mitad sobre el fondo blanco) y toda la info de texto a
* la derecha, en la misma fila. Reemplaza por completo el diseño "hero
* centrado" anterior (logo centrado sobre el banner, nombre debajo) —
* purgado, no superpuesto.
*
* El logo (.bq-cv2-logo) se movió en el HTML: ya no es hijo de
* .bq-cv2-banner-wrap (donde vivía position:absolute sobre la foto) sino
* de .bq-cv2-fb-header, un contenedor flex nuevo dentro de .bq-cv2-info
* (ver templates/business-profile.php). Acá se neutraliza su vieja
* posición absoluta (heredada de frontend.css, pensada para flotar sobre
* el banner centrado) y se deja fluir como hijo flex normal — el efecto
* de "montado a caballo" sobre el banner se logra con el margin-top
* negativo de .bq-cv2-fb-header, no con position:absolute.
* ═══════════════════════════════════════════════════════════════════════ */
.buyaca-business-profile .bq-cv2-banner {
border-radius: 0 0 24px 24px;
}
/* .bq-cv2-info traía mucho padding-top (52-60px, pensado para el viejo
logo flotando ENCIMA como position:absolute) — se reduce para que el
margin-top negativo de .bq-cv2-fb-header (más abajo) alcance a montar
el logo sobre el banner en vez de quedarse dentro del área blanca. */
.buyaca-business-profile .bq-cv2-info {
padding-top: 16px !important;
}
.buyaca-business-profile .bq-cv2-fb-header {
position: relative;
margin-bottom: 12px;
z-index: 6;
}
.buyaca-business-profile .bq-cv2-logo {
/* [Fix reportado] El nombre quedaba montado sobre el banner junto con
el logo (se veía "encima de la foto") porque antes TODA la fila
(logo + texto) se subía junto con margin-top negativo. Ahora SOLO
el logo se saca del flujo (position:absolute) y sube sobre el
banner; el texto (.bq-cv2-fb-header-text) sigue en flujo normal,
100% dentro de la zona blanca. */
position: absolute !important;
left: 0 !important;
right: auto !important;
top: -38px !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
}
.buyaca-business-profile .bq-cv2-fb-header-text {
min-width: 0;
/* [Pedido] Más aire entre el logo y el nombre — antes 104px quedaba
muy pegado al borde del logo. */
padding-left: 110px;
padding-top: 6px;
}
/* Nombre + acciones del dueño, a la derecha del logo — alineado a la
izquierda (no centrado), como el resto de la información. */
.buyaca-business-profile .bq-cv2-name-row {
justify-content: flex-start !important;
text-align: left !important;
flex-wrap: wrap;
}
.buyaca-business-profile .bq-cv2-name-group {
flex: 1 1 auto !important;
justify-content: flex-start !important;
/* [Pedido] Sin fondo propio — el nombre queda directo sobre el fondo
de la página (ya blanco, ver --bq-bg en tokens.css). */
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
.buyaca-business-profile .bq-cv2-meta-row {
justify-content: flex-start !important;
}
/* [Pedido] Fila de botones "Video presentación" + CTA, siempre lado a
lado, una sola línea — nunca se apilan, ni en móvil angosto. Antes
video-btn tenía flex:0 0 auto (nunca se encogía) + el CTA pedía mínimo
200px + un @media forzaba el CTA a 100% de ancho bajo 420px: la suma
fácilmente superaba el ancho disponible y el wrap los apilaba. Ahora
ambos se ENCOGEN de forma proporcional (flex-shrink) para siempre caber
en una sola fila, truncando el texto con ellipsis si hace falta. */
.buyaca-business-profile .bq-cv2-fb-actions {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
/* [Pedido] Menos espacio antes de la barra de pestañas de abajo */
margin: 2px 0 6px;
}
.buyaca-business-profile .bq-cv2-fb-actions .bq-cv2-video-btn {
/* Mismo alto/forma que el CTA para que ambos botones se vean
consistentes uno al lado del otro (antes era un chip pequeño pensado
para vivir inline entre textos cortos). */
font-size: 13px;
font-weight: 700;
padding: 10px 14px;
border-radius: 12px;
background: transparent;
color: var(--bq-primary);
border: 1.5px solid var(--bq-primary);
flex: 1 1 auto;
min-width: 0;
max-width: 60%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* [Pedido] Texto/ícono centrados dentro del botón, no pegados al inicio
(el botón ya no es "del ancho justo de su texto" — crece para llenar
la fila junto al CTA, así que su contenido necesita centrarse solo). */
justify-content: center;
}
.buyaca-business-profile .bq-cv2-fb-actions .bq-cv2-video-btn:hover,
.buyaca-business-profile .bq-cv2-fb-actions .bq-cv2-video-btn:focus-visible {
background: color-mix(in srgb, var(--bq-primary) 10%, transparent);
color: var(--bq-primary);
}
.buyaca-business-profile .bq-cv2-fb-actions .bq-cv2-cta-wrap {
padding: 0;
margin: 0;
flex: 1 1 auto;
min-width: 0;
max-width: none;
}
.buyaca-business-profile .bq-cv2-fb-actions .bq-cv2-cta {
width: 100%;
padding: 10px 14px;
/* [Pedido] Mismas esquinas que "Video presentación" — no pill. Antes
otra regla (frontend.css, calc(--bq-vc-radius + 100px) !important)
forzaba forma de píldora completa sin importar el contexto; acá se
neutraliza solo para este botón, en esta fila. */
border-radius: 12px !important;
font-size: 13px;
justify-content: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* ── [v2.6] Píldora de Favorito — único ocupante del cluster flotante.
Corazón + contador de personas que lo guardaron en una sola pieza,
estilo "guardado" de apps sociales (fondo scrim con blur, se vuelve
del color principal del catálogo cuando está activo). ── */
.bq-profile-fav-pill {
/* [Pedido] Sin chip/fondo: el corazón y el contador flotan directo sobre
la imagen del header, igual que la flecha de "Volver" (.bq-float-btn).
La legibilidad sobre cualquier foto la da la sombra del ícono/texto,
no un fondo. */
display: flex;
align-items: center;
height: 40px;
background: transparent;
border: none;
transition: transform var(--bq-motion-fast);
}
.buyaca-business-profile.bq-light-mode .bq-profile-fav-pill,
.buyaca-business-profile.bq-light-mode .bq-profile-fav-pill-btn,
.buyaca-business-profile.bq-light-mode .bq-profile-fav-pill-count {
background: transparent;
color: #fff;
}
/* [Pedido] El ícono de WhatsApp ya NO usa el verde de marca — se ve
idéntico al resto de redes sociales (mismo color, mismo tratamiento),
heredando currentColor como todos los demás .bq-cv2-social-btn. */
.bq-profile-fav-pill:hover {
transform: scale(1.04);
}
.bq-profile-fav-pill-btn {
width: 40px;
height: 40px;
min-width: 40px;
border: none;
background: transparent;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
padding: 0;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
transition: transform var(--bq-motion-fast);
}
.bq-profile-fav-pill-btn:hover {
transform: scale(1.08);
}
.bq-profile-fav-pill-btn:active {
transform: scale(.9);
}
.bq-profile-fav-pill-btn:focus-visible {
outline: 2.5px solid #fff;
outline-offset: -2px;
border-radius: 50%;
}
/* [Pedido] Ícono blanco minimalista (solo contorno); al marcar favorito el
relleno pasa al color principal del catálogo y el contorno queda blanco,
para que resalte sobre cualquier foto de portada. */
.bq-profile-fav-pill-btn svg {
pointer-events: none;
fill: none;
stroke: #fff;
}
.bq-profile-fav-pill.is-active .bq-profile-fav-pill-btn svg,
.bq-profile-fav-pill:has(.bq-profile-fav-pill-btn.active) .bq-profile-fav-pill-btn svg,
.bq-profile-fav-pill-btn.active svg {
fill: var(--bq-primary);
stroke: #fff;
}
.bq-profile-fav-pill-count {
font-family: var(--bq-font-body);
font-size: 12.5px;
font-weight: 800;
color: #fff;
line-height: 1;
padding-right: 4px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
/* ── [v2.6] Interruptor "Modo admin / Modo cliente" del dueño — un solo
switch en vez de dos botones separados, con una etiqueta sutil debajo
que refleja el estado actual. ── */
.bq-profile-mode-switch {
position: absolute;
right: 0;
top: 50%;
/* [Pedido] Bajado unos pocos px respecto al centrado exacto de la fila */
transform: translateY(-42%);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
z-index: 2;
}
.bq-mode-toggle {
position: relative;
width: 40px;
height: 22px;
border-radius: 999px;
border: none;
padding: 0;
background: var(--bq-line-strong);
cursor: pointer;
flex-shrink: 0;
transition: background var(--bq-motion-fast);
}
.bq-mode-toggle-knob {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
transition: transform var(--bq-motion-fast);
}
.bq-mode-toggle.is-on {
background: var(--bq-primary);
}
.bq-mode-toggle.is-on .bq-mode-toggle-knob {
transform: translateX(18px);
}
.bq-mode-toggle:focus-visible {
outline: 2.5px solid var(--bq-primary-dark);
outline-offset: 2px;
}
.bq-mode-toggle-label {
font-family: var(--bq-font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: .01em;
color: var(--bq-ink-soft);
white-space: nowrap;
transition: color var(--bq-motion-fast);
}
.bq-mode-toggle.is-on~.bq-mode-toggle-label {
color: var(--bq-primary);
}
/* [Pedido] El interruptor se movió al cluster flotante sobre la portada —
la vieja posición (absolute, a la derecha del nombre) ya no aplica, y la
etiqueta "Modo cliente/admin" necesita leerse en blanco sobre la foto,
no en el gris apagado pensado para fondo blanco. */
.bq-profile-float-cluster .bq-profile-mode-switch {
position: static;
top: auto;
right: auto;
transform: none;
}
.bq-profile-float-cluster .bq-mode-toggle-label {
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.bq-profile-float-cluster .bq-mode-toggle.is-on~.bq-mode-toggle-label {
color: #fff;
}
.bq-profile-float-cluster .bq-mode-toggle {
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
}
/* ── [v2.6] Bandera "Reportar negocio" — se mudó junto al nombre del
negocio (a la derecha), mismo lenguaje visual que .bq-profile-share-btn
(a la izquierda) para que ambas se sientan una sola pareja de acciones. ── */
.bq-profile-flag-wrap {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.bq-profile-flag-btn {
width: 34px;
height: 34px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--bq-surface);
border: 1px solid var(--bq-line-strong);
color: var(--bq-ink-soft);
cursor: pointer;
padding: 0;
transition: color var(--bq-motion-fast), border-color var(--bq-motion-fast), background var(--bq-motion-fast), transform var(--bq-motion-fast);
}
.bq-profile-flag-btn:hover {
color: var(--bq-primary);
border-color: var(--bq-primary);
transform: scale(1.06);
}
.bq-profile-flag-btn:active {
transform: scale(.94);
}
.bq-profile-flag-btn:focus-visible {
outline: 2.5px solid var(--bq-primary-dark);
outline-offset: 2px;
}
.bq-profile-flag-btn.is-active {
background: var(--bq-ink);
border-color: var(--bq-ink);
color: #fff;
}
.bq-profile-flag-btn svg {
pointer-events: none;
}
/* Panel del menú ⋮ */
.bq-profile-kebab-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 216px;
max-width: calc(100vw - 28px);
z-index: 60;
background: var(--bq-surface);
border: 1px solid var(--bq-line-strong);
border-radius: var(--bq-radius-md);
overflow: hidden;
}
.bq-profile-kebab-role {
display: flex;
align-items: center;
gap: 7px;
padding: 11px 14px;
font-family: var(--bq-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--bq-ink-soft);
border-bottom: 1px solid var(--bq-line);
}
.bq-profile-kebab-role svg {
color: var(--bq-primary);
flex-shrink: 0;
}
.bq-profile-kebab-item {
width: 100%;
display: flex;
align-items: center;
gap: 11px;
padding: 13px 14px;
border: none;
background: none;
font-family: var(--bq-font-body);
font-size: 14px;
font-weight: 600;
color: var(--bq-ink);
text-align: left;
cursor: pointer;
transition: background var(--bq-motion-fast);
}
.bq-profile-kebab-item:hover {
background: var(--bq-bg);
}
.bq-profile-kebab-item:focus-visible {
outline: 2.5px solid var(--bq-primary-dark);
outline-offset: -2px;
}
.bq-profile-kebab-item svg {
color: var(--bq-primary);
flex-shrink: 0;
}
/* ── [v2.4] Compartir — vuelve a vivir junto al nombre del negocio, a la
izquierda, en vez del cluster flotante de la portada. position:absolute
dentro de .bq-cv2-name-row para no pelear con el centrado del nombre
(bq-cv2-name-group sigue centrado como hero, sin tocarlo). ── */
.bq-cv2-name-row {
position: relative;
}
.bq-profile-share-btn {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--bq-surface);
border: 1px solid var(--bq-line-strong);
color: var(--bq-ink-soft);
cursor: pointer;
z-index: 2;
padding: 0;
transition: color var(--bq-motion-fast), border-color var(--bq-motion-fast), transform var(--bq-motion-fast);
}
.bq-profile-share-btn:hover {
color: var(--bq-primary);
border-color: var(--bq-primary);
transform: translateY(-50%) scale(1.06);
}
.bq-profile-share-btn:active {
transform: translateY(-50%) scale(.94);
}
.bq-profile-share-btn:focus-visible {
outline: 2.5px solid var(--bq-primary-dark);
outline-offset: 2px;
}
/* ── CTA de WhatsApp: reutiliza .bq-cv2-cta (mismo look que el resto del
sitio); solo alinea ícono + texto y evita que se encoja en 2 líneas. ── */
.bq-cv2-cta--whatsapp {
gap: 8px;
}
.bq-cv2-cta--whatsapp svg {
flex-shrink: 0;
}
/* ── Barra de pestañas (Catálogo/Info/Reseñas + admin) — estilo Facebook
(imagen de referencia del dueño: fila de íconos; al seleccionar, el
ícono y el texto toman el color principal del catálogo y la pestaña
elegida se resalta con fondo blanco propio — el contenido debajo NO
fuerza fondo, a pedido).
[Purga] Antes convivían 3 diseños completos distintos de esta misma
barra en frontend.css (uno "solo texto sobre barra de color sólido" en
la línea ~1600, uno "píldora rellena" en la ~3890, y uno "línea inferior
animada" en la ~9200) peleando entre sí por !important/orden de
cascada — ese cruce era la causa de los bugs de contraste reportados
(texto invisible sobre su propio fondo). Los tres se ELIMINARON de
frontend.css: esta es ahora la única definición. ── */
/* [Pedido] La barra de pestañas es su propia tarjeta, con el mismo
criterio de contraste que el menú inferior y la tarjeta de Categorías:
--bq-surface ya se adapta solo — blanca en modo claro, tono oscuro
elevado (NO blanca) en modo oscuro, para que se sienta "un nodo" propio
sin romper con el resto de la página oscura. */
.buyaca-business-profile .bq-cv2-tabs {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 30px !important;
padding: 6px 30px !important;
margin: 10px auto !important;
width: fit-content !important;
/* [Pedido] Antes calc(100% - 20px) — con las pestañas extra de modo admin
la píldora crecía casi hasta el ancho completo del header/banner. Se
le pone un tope propio para que SIEMPRE quede visiblemente más
angosta, con más aire a los lados; si aun así no caben todas las
pestañas, se resuelve con el scroll horizontal (ver regla de
justify-content:flex-start en modo admin, más abajo). */
max-width: min(560px, calc(100% - 48px)) !important;
background: var(--bq-surface) !important;
border-bottom: none !important;
border-radius: 14px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
position: relative !important;
top: auto !important;
z-index: auto !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
.buyaca-business-profile .bq-cv2-tabs::-webkit-scrollbar {
display: none !important;
}
/* [Pedido] En móvil quedaba un poco angosta — el mismo tope de 48px que
funciona bien en escritorio (donde sobra ancho de sobra) le dejaba poco
margen a una pantalla ya angosta. Se reduce el descuento solo en móvil,
sin tocar el límite de 560px para pantallas más grandes. */
@media (max-width: 767px) {
.buyaca-business-profile .bq-cv2-tabs {
max-width: calc(100% - 24px) !important;
}
}
/* [Fix reportado] En modo admin se agregan varias pestañas más (Estadísticas,
Campañas, Formularios, Diseño, Ajustes) y la barra empieza a desbordar en
móvil. Con `justify-content:center` un contenido más ancho que su
contenedor queda centrado sobre un eje "virtual" más ancho — varios
navegadores no crean espacio de scroll hacia la izquierda para esa parte
centrada que sobra, así que la primera pestaña ("Contenido") queda
inalcanzable aunque overflow-x:auto esté activo. En modo admin se cambia
a flex-start (scroll normal, empieza mostrando la primera pestaña) — en
modo cliente (3 pestañas, casi nunca desborda) se deja el centrado. */
.buyaca-business-profile.bq-admin-mode-on .bq-cv2-tabs {
justify-content: flex-start !important;
}
/* En modo oscuro un anillo claro sutil ayuda a que la tarjeta se sienta
elevada frente al fondo de página, apenas un poco más oscuro que ella. */
.buyaca-business-profile.buyaca-app:not(.bq-light-mode) .bq-cv2-tabs {}
/* [Pedido v10.14] En PC el menú de pestañas se veía diminuto (píldora de
560px) mientras el banner ocupa toda la columna de 1080px, y textos como
"Formularios" quedaban cortados. En escritorio el menú toma la MISMA
columna que el banner (sin flechas de navegación — [Pedido v10.14.2]
se retiraron por pedido explícito; en móvil se mantiene la píldora
compacta y el deslizado táctil nativo). */
@media (min-width: 1024px) {
.buyaca-business-profile .bq-cv2-tabs {
max-width: 1080px !important;
width: 100% !important;
justify-content: flex-start !important;
}
}
.buyaca-business-profile .bq-cv2-tab {
flex: 0 0 auto !important;
min-width: max-content !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 10px 14px !important;
background: transparent !important;
border: none !important;
border-radius: var(--bq-radius-sm) !important;
color: var(--bq-ink-faint) !important;
font-weight: 600 !important;
font-size: 13px !important;
white-space: nowrap !important;
transition: background .18s ease, color .18s ease !important;
}
.buyaca-business-profile .bq-cv2-tab svg {
width: 15px !important;
height: 15px !important;
stroke: currentColor !important;
color: currentColor !important;
}
.buyaca-business-profile .bq-cv2-tab:hover:not(.active) {
color: var(--bq-ink) !important;
}
.buyaca-business-profile .bq-cv2-tab.active {
background: var(--bq-primary-light, #E6EBFF) !important;
color: var(--bq-primary) !important;
}
/* [Pedido] "elimina las sombras que tenga el catálogo del menú... y también
el subrayado inferior. Al momento de seleccionar, sale con un degradado
en amarillo. Solamente quiero que salga el color principal" — mismo
resaltado nativo del navegador al tocar/enfocar un