/* ★ 37 W1/W2 — feed y visor en el computador (progreso morado arrastrable, tiempo al arrastrar, audio con volumen,
   acciones en círculo, «+» para seguir y anillo de historia, ✓, menú del avatar al pasar el ratón) y la web en el
   teléfono (barra de 5, ☰ con menú lateral, píldora «Abrir app», hoja de la app). Sólo tokens de app.css. */

/* ── Medio del feed ── */
.medio { isolation: isolate; }
.medio-fondo37 { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(30px) brightness(.5) saturate(1.2); z-index: 0; }
.medio > video, .medio > img.principal, .medio > .medio-respaldo { position: relative; z-index: 1; background: transparent !important; }
.medio .pie { z-index: 3; padding-bottom: 30px; }
.medio .pie .autor { display: inline-flex; align-items: center; gap: 6px; }
.ver37 { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--acento); color: #fff; flex: none; }
.ver37 .ico { stroke-width: 3.4; }
.desc37 { cursor: pointer; margin: 6px 0 0; font-size: 15px; line-height: 1.35; max-height: none !important; overflow: visible !important; }
.desc37.corta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; }
.mas-txt37 { color: #fff; font-weight: 700; font-size: 14px; padding: 2px 0; opacity: .9; }
.mas-txt37:hover { text-decoration: underline; }
.son37 { opacity: .9; }

/* Audio arriba a la izquierda: silenciar + deslizador al pasar el ratón (img 18) */
.audio37 { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 4; display: flex; align-items: center; border-radius: 999px; background: rgba(0,0,0,.42); color: #fff; padding: 2px; transition: background .15s; }
.audio37-b { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.audio37-r { width: 0; overflow: hidden; transition: width .2s ease, padding .2s; display: flex; align-items: center; }
.audio37:hover, .audio37:focus-within { background: rgba(0,0,0,.6); }
.audio37:hover .audio37-r, .audio37:focus-within .audio37-r { width: 112px; padding: 0 12px 0 2px; }
.audio37 input[type=range] { -webkit-appearance: none; appearance: none; width: 96px; height: 4px; border-radius: 4px; cursor: pointer;
  background: linear-gradient(to right, #fff 0 var(--v, 100%), rgba(255,255,255,.35) var(--v, 100%) 100%); }
.audio37 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.audio37 input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.mas37 { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; display: flex; align-items: center; justify-content: center; }
.mas37 .ico { stroke-width: 3; }
.mas37:hover { background: rgba(0,0,0,.6); }
.medio .privada { top: 60px; }

/* Progreso MORADO con punto blanco, arrastrable (img 8) + tiempo grande al arrastrar (img 30) */
.progreso37 { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; height: 18px; z-index: 5; cursor: pointer; display: flex; align-items: flex-end; touch-action: none; } /* ★ 39: pegado al borde de abajo */
.pista37 { position: relative; display: block; width: 100%; height: 4px; border-radius: 0; background: rgba(255,255,255,.32); transition: height .15s; }
.pista37 i { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--acento); }
.pista37 b { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(179,94,213,.35), 0 1px 4px rgba(0,0,0,.4); transition: width .15s, height .15s; }
.progreso37:hover .pista37, .arrastrando37 .pista37 { height: 6px; }
.progreso37:hover .pista37 b, .arrastrando37 .pista37 b { width: 16px; height: 16px; }
.progreso37:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.tiempo37 { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 46px; z-index: 6; text-align: center; color: #fff; font-size: 34px; font-weight: 800; letter-spacing: .5px; text-shadow: 0 2px 10px rgba(0,0,0,.6); pointer-events: none; opacity: 0; transition: opacity .12s; font-variant-numeric: tabular-nums; }
.arrastrando37 .tiempo37 { opacity: 1; }
.arrastrando37 .pie { opacity: 0; }
.duracion37 { position: absolute; inset-inline-end: 14px; bottom: 26px; z-index: 4; color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.7); opacity: 0; transition: opacity .15s; font-variant-numeric: tabular-nums; pointer-events: none; }
.medio:hover .duracion37 { opacity: .95; }
.arrastrando37 .duracion37 { opacity: 0; }

/* Progreso del visor también morado */
.lienzo .progreso i { background: var(--acento); }

/* ── Acciones en círculo (img 8) ── */
.acciones { gap: 12px; }
.accion { gap: 5px; font-variant-numeric: tabular-nums; }
.accion .circ { width: 50px; height: 50px; background: var(--fondo-2); box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: transform .12s, background .15s; }
.accion:hover .circ { transform: scale(1.06); background: var(--fondo-3); }
.accion.on .circ { background: var(--acento-suave); color: var(--acento); }
.av37 { position: relative; margin-bottom: 14px; }
.av37 .av { display: block; border-radius: 50%; }
.av37 .av .avatar { width: 50px !important; height: 50px !important; border-radius: 50%; display: block; }
.av37.con-historia .av .avatar { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4.5px var(--acento); }
.seguir37 { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--acento); color: #fff; font-size: 18px; font-weight: 700; line-height: 22px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--fondo); transition: transform .15s; }
.seguir37:hover { transform: translateX(-50%) scale(1.12); }
.seguir37.ok { background: #fff; color: var(--acento); }

/* ── Menú del avatar AL PASAR EL RATÓN (img 11/12) ── */
.am37-caja { position: relative; display: inline-flex; }
.am37 { position: absolute; top: 100%; right: -8px; margin-top: 8px; min-width: 250px; background: var(--fondo); color: var(--tinta); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.18); padding: 6px; z-index: 40; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .14s, transform .14s, visibility 0s .14s; }
.am37::before { content: ''; position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: -12px; height: 12px; } /* puente para no perder el hover */
.am37-caja:hover .am37, .am37-caja:focus-within .am37 { visibility: visible; opacity: 1; transform: none; transition: opacity .14s, transform .14s; }
.am37 hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 6px; }
.am37-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: 15px; text-align: start; }
.am37-i:hover, .am37-i:focus-visible { background: var(--fondo-2); outline: 0; }
.am37-i.on { color: var(--acento); }
.am37-idiomas { padding-inline-start: 30px; max-height: 220px; overflow-y: auto; }
.am37-idiomas .am37-i { padding: 7px 10px; font-weight: 500; font-size: 14px; justify-content: space-between; }

.solo-movil37 { display: none !important; }

/* ── Teléfono (W1) ── */
@media (max-width: 900px) {
  /* Barra inferior de SOLO 5: Para ti · Explorar · Subir (centro) · Mensajes · Perfil */
  .lateral .nav > *:not([data-movil]) { display: none !important; }
  .lateral .nav > .solo-movil37 { display: flex !important; }
  .lateral .nav > [data-movil="1"] { order: 1; } .lateral .nav > [data-movil="2"] { order: 2; } .lateral .nav > [data-movil="3"] { order: 3; }
  .lateral .nav > [data-movil="4"] { order: 4; } .lateral .nav > [data-movil="5"] { order: 5; }
  .lateral .nav > * { flex: 1 1 0; min-width: 0; }
  .lateral .nav > .subir37 .txt { display: none; }
  .lateral .nav > .subir37 .ico { width: 46px; height: 32px; padding: 4px 11px; border-radius: 10px; background: var(--tinta); color: var(--fondo); stroke-width: 2.4; }
  .lateral .nav > .subir37.activo .ico { background: var(--acento); color: #fff; }
  .btn-entrar, .lateral > .btn-entrar { display: none !important; }

  body.movil37 .contenido { padding-top: 52px; }
  body.movil37[data-ruta="parati"] .contenido { padding-top: 0; }
  .m37-barra { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 52px; z-index: 26; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; padding-top: env(safe-area-inset-top); background: var(--fondo); border-bottom: 1px solid var(--borde); }
  body[data-ruta="parati"] .m37-barra { background: linear-gradient(rgba(0,0,0,.45), transparent); border-bottom: 0; color: #fff; }
  .m37-ham, .m37-lupa { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
  .m37-pildora { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; font-weight: 700; font-size: 14px; background: rgba(0,0,0,.55); color: #fff; }
  .m37-pildora img { border-radius: 50%; background: #000; }
  body:not([data-ruta="parati"]) .m37-pildora { background: var(--fondo-2); color: var(--tinta); }

  /* Horizontal en el teléfono: pantalla completa con el video centrado y el fondo difuminado (img 3) */
  .medio.ancho { aspect-ratio: auto; width: 100%; height: 100%; }
  /* Para ti a pantalla completa bajo la barra transparente: lo de arriba del video baja un poco */
  .medio .audio37 { top: 60px; }
  .medio .mas37 { top: 60px; }
  .medio .privada { top: 108px; }
  .progreso37 { bottom: 0; inset-inline-start: 0; inset-inline-end: 0; }
  .audio37-r { display: none; }
  .duracion37 { display: none; }

  /* Hoja «Disfruta la experiencia completa en la app» (img 2) */
  .m37-modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 24px; animation: entra37 .18s ease; }
  @keyframes entra37 { from { opacity: 0; } }
  .m37-tarjeta { position: relative; width: min(340px, 100%); background: var(--fondo); color: var(--tinta); border-radius: 18px; padding: 44px 22px 16px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
  .m37-logo { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; background: #000; border: 3px solid var(--fondo); display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .m37-logo img { width: 58px; height: 58px; border-radius: 50%; }
  .m37-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--tinta-2); }
  .m37-tarjeta h2 { font-size: 21px; margin: 4px 0 8px; line-height: 1.25; }
  .m37-tarjeta p { color: var(--tinta-2); margin: 0 0 18px; font-size: 15px; }
  .m37-abrir { width: 100%; min-height: 48px; border-radius: 10px; font-size: 16px; }
  .m37-ahora-no { width: 100%; padding: 14px; font-weight: 600; font-size: 15px; }

  /* Menú lateral (img 4) */
  .m37-velo { position: fixed; inset: 0; z-index: 94; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
  .m37-velo.on { opacity: 1; visibility: visible; transition: opacity .2s; }
  .m37-cajon { position: fixed; top: 0; bottom: 0; left: 0; z-index: 95; width: min(84vw, 330px); background: var(--fondo); color: var(--tinta); overflow-y: auto; padding: 8px 14px calc(20px + env(safe-area-inset-bottom)); padding-top: calc(8px + env(safe-area-inset-top)); transform: translateX(-102%); transition: transform .24s ease; box-shadow: 6px 0 30px rgba(0,0,0,.25); }
  .m37-cajon.on { transform: none; }
  .m37-cab { display: flex; align-items: center; gap: 6px; padding: 4px 0 10px; }
  .m37-cab .logo { font-size: 22px; }
  .m37-fila { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 10px; border-radius: 10px; font-size: 17px; font-weight: 600; text-align: start; }
  .m37-fila span { flex: 1; }
  .m37-fila.on { color: var(--acento); }
  .m37-fila:active { background: var(--fondo-2); }
  .m37-fila.sin { cursor: default; }
  .m37-cajon hr { border: 0; border-top: 1px solid var(--borde); margin: 8px 0; }
  .m37-entrar { width: 100%; margin: 10px 0 4px; min-height: 46px; }
  .m37-tema { margin: 0 6px 6px; }
  .m37-volver { font-size: 19px; }
}

/* ★ 37 F2 — Buscar: fila de perfiles */
.ex-perfiles37 { margin: 14px 0 4px; }
.ex-perfiles37-fila { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.ex-perfil37 { flex: none; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--borde); border-radius: 14px; text-align: center; font-size: 13px; }
.ex-perfil37:hover { background: var(--fondo-2); }
.ex-perfil37 .avatar { width: 64px !important; height: 64px !important; }
.ex-perfil37 b, .ex-perfil37 small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-perfil37 small { color: var(--tinta-3); font-size: 12px; }

/* ★ 37 W2 — con el panel de comentarios abierto, el feed se corre a la izquierda (no queda tapado). */
@media (min-width: 901px) {
  body.com37-abierto .contenido { margin-inline-end: 420px; }
  body.com37-abierto .esquina, body.com37-abierto .flechas { display: none; }
  body.com37-abierto .tarjeta-feed { padding-inline-end: 24px; }
  body.com37-abierto .medio { max-width: calc(100vw - var(--lateral) - 420px - 120px); }
  body.com37-abierto.mini .medio { max-width: calc(100vw - var(--lateral-mini) - 420px - 120px); }
}

/* ★ 37 F3 — vista previa al pasar el ratón en las cuadrículas */
.celda { position: relative; }
.celda video.celda-prev37 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .15s; z-index: 1; pointer-events: none; border-radius: inherit; }
.celda video.celda-prev37.lista { opacity: 1; }
.celda .vistas, .celda .cand, .celda .fijado { z-index: 2; }