/* ★ 44 web (tanda 44, img 161–194) — barra izquierda estilo Instagram (W9), columna derecha del Inicio: banners y apps
   compactas (W8) y «Accesos» con ilustración (W13), chat fijado «Asistente» en Mensajes (W3), portada del perfil (W16)
   y Buscar sin animación previa (W14). Sólo tokens de app.css. */

/* ── ★ 50 · barra lateral como TikTok web (sustituye al W9 del ★ 44, que se desplegaba al pasar el ratón) ──
   Abierta por defecto (íconos + textos, el contenido empieza en --lateral). Contraída (body.mini): franja de íconos;
   arriba sólo el logo, que al pasar el ratón se cambia por el ícono «Expandir barra» con su tooltip. Sin hover-despliegue. */
@media (min-width: 901px) {
  .lateral, .contenido { transition: width .2s cubic-bezier(.2, .7, .2, 1), margin-inline-start .2s cubic-bezier(.2, .7, .2, 1); }
  .lateral { overflow-x: hidden; }
  body.mini .lateral .cabeza { position: relative; justify-content: center; padding: 0 0 10px; min-height: 42px; width: 100%; }
  .lateral .logo50-mini { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; transition: opacity .12s; }
  .lateral .expandir50 { position: absolute; top: 0; inset-inline-start: calc(50% - 22px); width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; color: var(--tinta-2); background: var(--fondo-2); opacity: 0; transition: opacity .12s; }
  .lateral .cabeza:hover .expandir50, .lateral .expandir50:focus-visible { opacity: 1; }
  .lateral .cabeza:hover .logo50-mini, .lateral .cabeza:has(.expandir50:focus-visible) .logo50-mini { opacity: 0; }
  .lateral .expandir50:hover { color: var(--acento); background: var(--acento-suave); }
  /* tooltip: `position: fixed` para que no lo recorte el overflow de la barra (ni la barra ni el botón llevan transform) */
  .lateral .expandir50::after { content: attr(data-tip); position: fixed; top: 26px; inset-inline-start: calc(var(--lateral-mini) + 2px); padding: 6px 10px; border-radius: 6px;
    background: var(--tinta); color: var(--fondo); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 30; }
  .lateral .expandir50:hover::after, .lateral .expandir50:focus-visible::after { opacity: 1; }
  /* «Iniciar sesión» de la barra: texto discreto (el principal es el morado de arriba a la derecha) */
  .lateral .btn-entrar.entrar50 { background: none; color: var(--tinta-2); font-size: 15px; font-weight: 600; justify-content: flex-start; padding: 10px 12px; margin: 4px 0; border-radius: var(--radio); }
  .lateral .btn-entrar.entrar50:hover, .lateral .btn-entrar.entrar50:active { background: var(--fondo-2); color: var(--acento); }
  .lateral .btn-entrar.entrar50 .ico { display: block; width: 28px; height: 28px; padding: 2px; }
  body.mini .lateral .btn-entrar.entrar50 { justify-content: center; padding: 10px; }
  body.mini:not(.fijo44) .pie-pago { inset-inline-start: var(--lateral-mini); }
  /* barra abierta + panel (Buscar/Actividad/Más) encima: la barra se ve en íconos pero el contenido NO se mueve */
  body.fijo44.mini .contenido { margin-inline-start: var(--lateral); }
  body.com37-abierto.fijo44.mini .medio { max-width: calc(100vw - var(--lateral) - 420px - 120px); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .lateral, .contenido, .lateral .expandir50, .lateral .logo50-mini { transition: none; }
}
/* ★ 50 — «Iniciar sesión» PRINCIPAL: relleno morado (acento de la marca) en la esquina superior derecha */
.esquina .entrar50-top { background: var(--acento); color: var(--acento-txt); border-radius: 999px; padding: 7px 18px; font-weight: 700; }
.esquina .entrar50-top:hover, .esquina .entrar50-top:active { background: var(--acento-pulsado); }
/* ★ 50 — columna derecha del Inicio sin sesión: el aviso queda, el botón pasa a enlace de texto */
.x36-entra .entrar50-txt { color: var(--acento); font-weight: 700; padding: 0; }
.x36-entra .entrar50-txt:hover { text-decoration: underline; }

/* ── W8 · Apps y juegos: íconos compactos en UNA fila ── */
.x36-apps.w44-apps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.w44-apps .x36-app { padding: 6px 2px; gap: 4px; font-size: 11px; border-radius: 10px; }
.w44-apps .x36-app img { width: 44px; height: 44px; border-radius: 11px; }
.x36-lado .pat41-lado + .x36-sec { margin-top: 14px; }
.x36-apps.w44-apps + .pat41-lado { margin-top: 8px; }

/* ── W13 · Accesos: tarjetas de color con ilustración (como las categorías de la app, img 194) ── */
.x41-accesos.w44-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.x41-acceso.w44-acc { position: relative; overflow: hidden; display: flex; align-items: flex-start; height: 76px; padding: 10px 12px; border-radius: 14px; color: #fff; background: var(--w44-g, linear-gradient(135deg, #8B5CF6, #6D28D9)); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: transform .15s, box-shadow .15s, filter .15s; isolation: isolate; }
.x41-acceso.w44-acc:hover { background: var(--w44-g); filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .14); }
.w44-acc-txt { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; max-width: 72%; gap: 2px; }
.w44-acc-txt b { font-size: 14px; font-weight: 800; line-height: 1.15; }
.w44-acc-txt small { font-size: 11px; font-weight: 600; opacity: .85; }
.w44-acc-img { position: absolute; inset-inline-end: -4px; bottom: -6px; width: 58px; height: 58px; transform: rotate(-9deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); transition: transform .2s; pointer-events: none; }
.w44-acc:hover .w44-acc-img { transform: rotate(-3deg) scale(1.07); }
.w44-acc:last-child:nth-child(odd) { grid-column: 1 / -1; }
.w44-acc-comida { --w44-g: linear-gradient(135deg, #FBBF24, #F97316); }
.w44-acc-juegos { --w44-g: linear-gradient(135deg, #A855F7, #7C3AED); }
.w44-acc-asistente { --w44-g: linear-gradient(135deg, #818CF8, #4F46E5); }
.w44-acc-conoce { --w44-g: linear-gradient(135deg, #F472B6, #DB2777); }
.w44-acc-negocio { --w44-g: linear-gradient(135deg, #2DD4BF, #0D9488); }
.w44-acc-studio { --w44-g: linear-gradient(135deg, #4ADE80, #16A34A); }
.w44-acc-transmitir { --w44-g: linear-gradient(135deg, #F87171, #DC2626); }
.w44-acc-reuniones { --w44-g: linear-gradient(135deg, #2A2A31, #0B0B0F 55%, #6B2F8C); } /* ★ 75 — Reuniones: negro MegaPok con brillo morado */
@media (prefers-reduced-motion: reduce) { .w44-acc, .w44-acc-img { transition: none; } }

/* ── W3 · chat fijado «Asistente» (burbuja y /mensajes) ── */
.w44-asis-av { flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #B35ED5, #6366F1); }
.w44-asis-fila b { display: inline-flex; align-items: center; gap: 6px; }
.w44-fijado { font-size: 11px; font-weight: 600; color: var(--tinta-3); background: var(--fondo-2); padding: 1px 7px; border-radius: 6px; }
.w44-asis-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.w44-asis-cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.w44-asis-cab b { flex: 1; font-size: 16px; }
.w44-asis-panel iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--fondo); }
@media (min-width: 901px) { .w44-asis-volver { display: none; } }

/* ── W16 · portada del perfil ── */
.w44-portada { position: relative; height: clamp(140px, 17vw, 260px); border-radius: 16px; overflow: hidden; background: var(--fondo-2) center / cover no-repeat; margin-bottom: 18px; }
.w44-portada video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w44-portada::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, .18)); pointer-events: none; }
.w44-con-portada .perfil-cabeza { padding-inline-start: 24px; }
.w44-con-portada .perfil-cabeza > .avatar { margin-top: -86px; position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--fondo); }
@media (max-width: 900px) {
  .w44-portada { height: 130px; border-radius: 12px; margin-bottom: 10px; }
  .w44-con-portada .perfil-cabeza { padding-inline-start: 12px; }
  .w44-con-portada .perfil-cabeza > .avatar { margin-top: -60px; box-shadow: 0 0 0 4px var(--fondo); }
}

/* ── W14 · Buscar: sin la animación de entrada de cada tarjeta (se veía «algo raro» antes de aparecer) ── */
.ex .ex-t { animation: none; }
/* ★ 49 — el subtítulo baja de línea (máx. 2) en vez de cortarse con «…» */
.x41-acceso.w44-acc { height: auto; min-height: 76px; }
.w44-acc-txt { max-width: 68%; }
.w44-acc-txt small.w49-sub { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }