/* ═══════════════════════════════════════════════════════════════════════════
   WILEP · VIDEOS Y BOTÓN CENTRAL (2026-10-26, mockup mockups/videos-y-boton-central.html)
   La pestaña Videos (js/videos.js): feed vertical a pantalla completa, un video por pantalla, columna
   de acciones a la derecha y el pie a la izquierda. Es oscura como la sala del Live (los mismos
   valores que live.css: fondo #14130F y blancos translúcidos); el acento sigue siendo --acc.
   La hoja del botón central (js/crear.js) va dentro de la hoja de cuadricula.js, con la paleta de la persona.
   Nada por debajo de 12 px; íconos de trazo; sin emoji.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El panel ── */
.vd-panel { position: fixed; left: 0; right: 0; top: 0; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); z-index: 1240; display: none;
  background: #14130F; color: #fff; font-family: Outfit, system-ui, sans-serif; }
.vd-panel.abierto { display: block; }
body.videos-abierto .w-cita, body.videos-abierto .w-crear, body.videos-abierto .w-flota-top, body.videos-abierto .w-sheet { display: none; }
/* La barra se oscurece con el feed, como en la sala del Live. */
body.videos-abierto .w-tabbar { background: #14130F; border-top-color: rgba(255,255,255,.08); }
body.videos-abierto .w-tabbar button { color: rgba(255,255,255,.62); }
body.videos-abierto .w-tabbar button.on { color: #fff; }
body.videos-abierto .w-tabbar button.centro i { border-color: #14130F; }

/* Pestañas arriba (Siguiendo · Cerca · Lives) y el buscador */
.vd-top { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px; background: linear-gradient(rgba(0,0,0,.5), transparent); }
.vd-tabs { flex: 1; display: flex; justify-content: center; gap: 22px; }
.vd-tabs button { border: 0; background: none; padding: 8px 2px; color: rgba(255,255,255,.65); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.vd-tabs button.on { color: #fff; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.vd-redondo { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; }
.vd-redondo .trazo { width: 20px; height: 20px; stroke-width: 1.7; }
.vd-redondo.on { background: #fff; color: #14130F; }
.vd-busca { position: absolute; left: 12px; right: 12px; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 4; display: none; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 16px; border-radius: 999px; background: rgba(20,19,15,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.vd-busca.abierta { display: flex; }
.vd-busca .trazo { width: 18px; height: 18px; flex: none; }
.vd-busca input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: #fff; font: inherit; font-size: 15px; }
.vd-busca input::placeholder { color: rgba(255,255,255,.55); }

/* La lista: un video por pantalla */
.vd-lista { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.vd-lista::-webkit-scrollbar { display: none; }
.vd-item { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 36%, #4A3A30 0%, #1F1D1A 60%, #14130F 100%); }
.vd-item.negocio { background: radial-gradient(120% 80% at 50% 36%, #2D4A3A 0%, #1F1D1A 60%, #14130F 100%); }
.vd-item.live { background: radial-gradient(120% 80% at 50% 36%, #3A3550 0%, #1F1D1A 60%, #14130F 100%); }
.vd-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.vd-item.live video { object-fit: cover; }
.vd-item .vd-mono { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; font-size: 28px; font-weight: 300; overflow: hidden; }
.vd-item .vd-mono img { width: 100%; height: 100%; object-fit: cover; }
.vd-item.con-video .vd-mono { display: none; }
.vd-item.live .vd-pulso { position: absolute; left: 50%; top: 36%; width: 110px; height: 110px; border-radius: 50%; transform: translate(-50%, -50%);
  border: 2px solid color-mix(in srgb, var(--acc) 60%, transparent); box-shadow: 0 0 0 14px color-mix(in srgb, var(--acc) 12%, transparent); pointer-events: none; }
.vd-item.live.con-video .vd-pulso { display: none; }
/* Toda la pantalla del live es tocable; el texto invita a entrar. */
.vd-toca { position: absolute; left: 0; right: 0; top: 56%; display: flex; justify-content: center; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
.vd-toca .trazo { width: 18px; height: 18px; stroke-width: 1.8; }
.vd-item.live.con-video .vd-toca { top: auto; bottom: 46%; }
/* Botón de sonido (esquina) */
.vd-sonido { position: absolute; left: 12px; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 3; }
.vd-pendiente { position: absolute; right: 12px; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 3; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.16); }

/* Columna de acciones */
.vd-col { position: absolute; right: 8px; bottom: 18px; z-index: 3; display: grid; gap: 10px; justify-items: center; }
.vd-col > button, .vd-col > a { display: grid; justify-items: center; gap: 2px; min-width: 56px; border: 0; background: none; color: #fff; font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,.6); padding: 0; }
.vd-col .ico { width: 44px; height: 38px; display: grid; place-items: center; }
.vd-col .ico .trazo { width: 30px; height: 30px; stroke: #fff; stroke-width: 1.6; }
.vd-col .on .ico .trazo { fill: var(--acc); stroke: var(--acc); }
.vd-col .on.guardado .ico .trazo { fill: #fff; stroke: #fff; }
.vd-ava { position: relative; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%; border: 2px solid #fff; background: #8A5A3C; display: grid; place-items: center; font-size: 14px; font-weight: 500; overflow: visible; }
.vd-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.vd-ava .sg-fila { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); }
.vd-ava .sg-btn.icono { border-color: #14130F; }
.vd-ava.vivo::after { content: "LIVE"; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); border: 2px solid #14130F; }

/* Pie */
.vd-pie { position: absolute; left: 14px; right: 78px; bottom: 16px; z-index: 3; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.vd-pie .comp { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.78); margin-bottom: 6px; }
.vd-pie .comp .trazo { width: 14px; height: 14px; }
.vd-tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.16); margin-bottom: 8px; }
.vd-tipo.vivo { background: var(--acc); color: var(--acc-ink); }
.vd-tipo .trazo { width: 14px; height: 14px; stroke-width: 1.8; }
.vd-tipo .punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: vdPulso 1.6s ease-in-out infinite; }
@keyframes vdPulso { 50% { opacity: .35; } }
.vd-pie b { display: block; font-weight: 500; font-size: 15px; }
.vd-pie b a { color: inherit; text-decoration: none; }
.vd-pie b .rp-verif { vertical-align: -2px; margin-left: 4px; }
.vd-pie p { font-size: 13px; color: rgba(255,255,255,.88); line-height: 1.35; margin: 2px 0 0; word-break: break-word; }
.vd-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vd-botones a, .vd-botones button, .vd-botones span { font: inherit; font-size: 13px; font-weight: 500; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; text-decoration: none; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vd-botones .acc { background: var(--acc); color: var(--acc-ink); }
.vd-botones span { cursor: default; }

/* Vacío y carga */
.vd-vacio { height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; scroll-snap-align: start; }
.vd-vacio h3 { font-weight: 300; font-size: 24px; margin: 0; }
.vd-vacio p { color: rgba(255,255,255,.72); font-size: 14px; margin: 0; max-width: 32ch; }
.vd-vacio button, .vd-vacio a { margin-top: 10px; font: inherit; font-size: 15px; font-weight: 500; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--acc); color: var(--acc-ink); text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }
.vd-cargando { height: 72px; display: grid; place-items: center; color: rgba(255,255,255,.6); font-size: 13px; }

/* Hojas (compartir, comentarios "pronto", más opciones) dentro de la hoja de cuadricula.js */
.vd-hoja-op { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px; margin-top: 8px; border: 0; border-radius: var(--r-sm); background: var(--field); color: var(--ink); font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.vd-hoja-op .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--surf); display: grid; place-items: center; color: var(--ink); flex: none; }
.vd-hoja-op .ico.acc { background: var(--acc); color: var(--acc-ink); }
.vd-hoja-op .ico .trazo { width: 22px; height: 22px; }
.vd-hoja-op b { display: block; font-weight: 500; font-size: 15px; }
.vd-hoja-op small { display: block; color: var(--muted); font-size: 13px; }
.vd-hoja-op:disabled { opacity: .5; cursor: default; }
.vd-hoja-op.peligro { color: var(--acc); }
.vd-hoja-nota { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 10px 0 0; }

/* ── Hoja del botón central (crear.js) ── */
.cr-accion { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px; margin-top: 8px; border: 0; border-radius: var(--r-sm); background: var(--field); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cr-accion .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--surf); display: grid; place-items: center; color: var(--ink); flex: none; }
.cr-accion .ico.acc { background: var(--acc); color: var(--acc-ink); }
.cr-accion .ico .trazo { width: 22px; height: 22px; }
.cr-accion b { display: block; font-weight: 500; font-size: 15px; }
.cr-accion small { display: block; color: var(--muted); font-size: 13px; }
.cr-accion:disabled { opacity: .5; cursor: default; }
.cr-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cr-opcion { border-radius: var(--r-sm); background: var(--field); padding: 12px 14px; border: 1.5px solid transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cr-opcion[aria-pressed="true"] { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--field)); }
.cr-opcion b { display: block; font-weight: 500; font-size: 15px; }
.cr-opcion small { color: var(--muted); font-size: 12px; line-height: 1.35; display: block; margin-top: 2px; }
.cr-rotulo { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.cr-vista { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.cr-vista video { width: 72px; height: 110px; border-radius: 12px; object-fit: cover; background: #14130F; flex: none; }
.cr-vista small { color: var(--muted); font-size: 13px; }
.cr-pie { width: 100%; min-height: 56px; margin-top: 10px; padding: 12px 16px; border: 0; border-radius: var(--r-sm); background: var(--field); color: var(--ink); font: inherit; font-size: 15px; resize: none; outline: none; }
.cr-pie:focus { box-shadow: 0 0 0 2px var(--acc); }
.cr-cuenta { text-align: right; font-size: 12px; color: var(--muted); margin-top: 4px; }
.cr-estado { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.cr-barra { height: 4px; border-radius: 2px; background: var(--field); overflow: hidden; margin-top: 6px; }
.cr-barra b { display: block; height: 100%; width: 0; background: var(--acc); transition: width .2s; }

/* ── Comentarios con etiquetas (js/videos-comentarios.js; mockup pantalla 6) ── */
.vc { display: flex; flex-direction: column; height: min(74dvh, 640px); }
.vc-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vc-cab h3 { margin: 0; }
.vc-x { width: 44px; height: 44px; margin: -8px -10px -8px 0; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.vc-x .trazo { width: 20px; height: 20px; }
.vc-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; }
.vc-cargando { height: 96px; display: grid; place-items: center; color: var(--muted); }
.vc-vacio { text-align: center; color: var(--muted); font-size: 14px; padding: 36px 12px; margin: 0; }
.vc-vacio p { margin: 0; }
.vc-vacio button { margin-top: 12px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.vc-c { display: flex; gap: 10px; margin-top: 14px; }
.vc-c.resp { margin-left: 44px; }
.vc-ava { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--ink); color: var(--surf); display: grid; place-items: center; font-size: 12px; font-weight: 500; overflow: hidden; text-decoration: none; }
.vc-c.resp .vc-ava { width: 28px; height: 28px; font-size: 12px; }
.vc-ava img { width: 100%; height: 100%; object-fit: cover; }
.vc-cuerpo { flex: 1; min-width: 0; }
.vc-cuerpo b { display: block; font-weight: 500; font-size: 13px; }
.vc-cuerpo b a { color: inherit; text-decoration: none; }
.vc-aut { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--acc); }
.vc-cuerpo p { margin: 2px 0 0; font-size: 14px; line-height: 1.35; word-break: break-word; -webkit-user-select: none; user-select: none; }
.vc-et { color: var(--acc); font-weight: 500; }
.vc-cuerpo small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 2px; color: var(--muted); font-size: 12px; }
.vc-cuerpo small button { min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; cursor: pointer; }
.vc-mg { flex: none; width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
.vc-mg .trazo { width: 18px; height: 18px; }
.vc-mg.on { color: var(--acc); }
.vc-mg.on .trazo { fill: var(--acc); }
.vc-mg:disabled { opacity: .6; cursor: default; }
.vc-mas { display: block; width: 100%; margin-top: 10px; min-height: 44px; border: 0; border-radius: 999px; background: var(--field); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.vc-pie { padding-top: 8px; border-top: 1px solid var(--line); }
.vc-sug { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.vc-sug::-webkit-scrollbar { display: none; }
.vc-sug[hidden], .vc-resp[hidden] { display: none; }
.vc-chip { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--field); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.vc-chip b { color: var(--acc); font-weight: 500; margin-right: 1px; }
.vc-resp { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 6px 2px; font-size: 12px; color: var(--muted); }
.vc-resp button { width: 32px; height: 32px; border: 0; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; }
.vc-resp .trazo { width: 16px; height: 16px; }
.vc-escribir { display: flex; align-items: center; gap: 8px; }
.vc-escribir input { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--field); color: var(--ink); font: inherit; font-size: 16px; }
.vc-escribir input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.vc-enviar { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center; cursor: pointer; }
.vc-enviar .trazo { width: 20px; height: 20px; }
.vc-enviar:disabled { opacity: .5; cursor: default; }