/* ★ 35 web (img 221-243) — MegaPok web. Disposición de las capturas, marca propia.
   UN SOLO token de acento: --acento (cámbialo aquí y cambia toda la web). */
:root {
  --acento: #FF6A1A;
  --acento-txt: #ffffff;
  --fondo: #ffffff;
  --fondo-2: #f1f1f2;
  --fondo-3: #e3e3e5;
  --tinta: #161823;
  --tinta-2: #5c5e66;
  --tinta-3: #8a8b91;
  --borde: #e6e6e8;
  --sombra: 0 2px 14px rgba(0,0,0,.08);
  --lateral: 240px;
  --lateral-mini: 72px;
  --radio: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #121212; --fondo-2: #1f1f22; --fondo-3: #2c2c30; --tinta: #f1f1f2; --tinta-2: #b9b9bf;
    --tinta-3: #8a8b91; --borde: #2c2c30; --sombra: 0 2px 14px rgba(0,0,0,.5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #121212; --fondo-2: #1f1f22; --fondo-3: #2c2c30; --tinta: #f1f1f2; --tinta-2: #b9b9bf;
  --tinta-3: #8a8b91; --borde: #2c2c30; --sombra: 0 2px 14px rgba(0,0,0,.5); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--fondo); color: var(--tinta); font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: var(--tinta); }
.ico { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-relleno .ico, .ico.relleno { fill: currentColor; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Estructura: barra lateral + contenido (img 221/222) ── */
#raiz { display: flex; min-height: 100vh; }
.lateral { position: fixed; top: 0; left: 0; bottom: 0; width: var(--lateral); padding: 18px 12px 12px; overflow-y: auto; background: var(--fondo); z-index: 20; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid transparent; }
.lateral .cabeza { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 10px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 24px; letter-spacing: -.5px; }
.logo img { border-radius: 8px; background: #000; }
.btn-plegar { color: var(--tinta-3); padding: 4px; border-radius: 6px; }
.btn-plegar:hover { background: var(--fondo-2); }
.caja-buscar { display: flex; align-items: center; gap: 8px; background: var(--fondo-2); border-radius: 999px; padding: 10px 14px; color: var(--tinta-3); margin: 0 4px 12px; cursor: text; }
.caja-buscar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a, .nav button { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--radio); font-size: 18px; font-weight: 600; width: 100%; text-align: left; position: relative; }
.nav a:hover, .nav button:hover { background: var(--fondo-2); }
.nav .activo { color: var(--acento); }
.nav .punto { position: absolute; left: 30px; top: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--acento); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.nav .avatar { width: 26px !important; height: 26px !important; }
.btn-entrar { margin: 14px 4px; background: var(--acento); color: var(--acento-txt); border-radius: var(--radio); padding: 12px; font-weight: 700; font-size: 17px; text-align: center; }
.lateral hr { border: 0; border-top: 1px solid var(--borde); margin: 10px 8px; }
.lateral .seccion-titulo { color: var(--tinta-2); font-size: 14px; font-weight: 600; padding: 6px 12px; }
.cuenta-seguida { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--radio); }
.cuenta-seguida:hover { background: var(--fondo-2); }
.cuenta-seguida b { display: block; font-size: 15px; }
.cuenta-seguida small { color: var(--tinta-3); }
.pie-lateral { margin-top: auto; padding: 12px; color: var(--tinta-3); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }

/* Barra lateral plegada (img 235, 242, 243) */
body.mini .lateral { width: var(--lateral-mini); align-items: center; padding-left: 8px; padding-right: 8px; }
body.mini .lateral .logo-nombre, body.mini .nav .txt, body.mini .caja-buscar span, body.mini .seccion-titulo,
body.mini .cuenta-seguida div, body.mini .pie-lateral, body.mini .btn-plegar, body.mini .btn-entrar .txt { display: none; }
body.mini .caja-buscar { padding: 10px; margin: 0 0 12px; border-radius: 50%; }
body.mini .nav a, body.mini .nav button { justify-content: center; padding: 10px; }
body.mini .btn-entrar { padding: 10px; }
body.mini .contenido { margin-left: var(--lateral-mini); }

.contenido { flex: 1; margin-left: var(--lateral); min-width: 0; }
.esquina { position: fixed; top: 16px; right: 20px; z-index: 15; display: flex; align-items: center; gap: 14px; background: var(--fondo); border-radius: 999px; padding: 6px 8px 6px 14px; box-shadow: var(--sombra); }
.esquina a, .esquina button { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* ── Panel deslizable (Buscar / Notificaciones / Más) img 234-236, 239, 243 ── */
.panel { position: fixed; top: 0; bottom: 0; left: var(--lateral-mini); width: 380px; background: var(--fondo); border-right: 1px solid var(--borde); z-index: 19; padding: 18px 16px; overflow-y: auto; box-shadow: 4px 0 18px rgba(0,0,0,.05); }
.panel .titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel h2 { margin: 0; font-size: 24px; }
.panel .cerrar { width: 32px; height: 32px; border-radius: 50%; background: var(--fondo-2); display: inline-flex; align-items: center; justify-content: center; }
.campo-buscar { display: flex; align-items: center; gap: 8px; background: var(--fondo-2); border-radius: 999px; padding: 4px 6px 4px 16px; margin-bottom: 12px; }
.campo-buscar input { flex: 1; border: 0; background: none; outline: 0; padding: 8px 0; }
.sugerencia { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: var(--radio); width: 100%; font-size: 17px; font-weight: 500; }
.sugerencia:hover { background: var(--fondo-2); }
.sugerencia .txt { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugerencia .quitar { color: var(--tinta-3); }
.panel .sub { color: var(--tinta-2); font-size: 15px; margin: 14px 6px 4px; }

/* ── Feed vertical (img 221/222) ── */
.feed { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.tarjeta-feed { height: 100vh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 24px 90px 24px 24px; position: relative; }
.medio { position: relative; height: calc(100vh - 48px); max-height: 860px; aspect-ratio: 9/16; max-width: calc(100vw - 420px); background: #000; border-radius: 14px; overflow: hidden; }
.medio.ancho { aspect-ratio: 16/9; height: auto; width: min(1200px, calc(100vw - 420px)); }
.medio video, .medio img.principal { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.medio .pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 16px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.medio .pie a.autor { font-weight: 700; font-size: 17px; }
.medio .pie p { margin: 6px 0 0; font-size: 15px; max-height: 3.2em; overflow: hidden; }
.medio .pie .mencion { color: #fff; font-weight: 600; }
.medio .sonar { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; display: flex; align-items: center; justify-content: center; }
.medio .privada { position: absolute; left: 12px; top: 12px; background: rgba(0,0,0,.55); color: #fff; border-radius: 6px; padding: 3px 8px; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }
.acciones { display: flex; flex-direction: column; align-items: center; gap: 14px; align-self: flex-end; padding-bottom: 20px; }
.acciones .av { position: relative; margin-bottom: 8px; }
.acciones .av .seguir-mini { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.accion { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--tinta); }
.accion .circ { width: 50px; height: 50px; border-radius: 50%; background: var(--fondo-2); display: flex; align-items: center; justify-content: center; }
.accion.on .circ { color: var(--acento); }
.accion.on .ico { fill: currentColor; }
.flechas { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 5; }
.flechas button { width: 48px; height: 48px; border-radius: 50%; background: var(--fondo-2); display: flex; align-items: center; justify-content: center; }
.vacio { padding: 80px 20px; text-align: center; color: var(--tinta-2); }
.vacio h3 { color: var(--tinta); margin: 10px 0 6px; }

/* ── Botones ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radio); padding: 9px 20px; font-weight: 700; font-size: 16px; background: var(--fondo-2); color: var(--tinta); min-height: 40px; }
.btn:hover { filter: brightness(.97); }
.btn.primario { background: var(--acento); color: var(--acento-txt); }
.btn.redondo { border-radius: 999px; }
.btn.circulo { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn.contorno { background: transparent; border: 1px solid var(--borde); }

/* ── Modal (iniciar sesión img 221, ajustes img 228) ── */
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--fondo); border-radius: 12px; width: min(480px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal.grande { width: min(980px, 100%); }
.modal .cerrar { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--fondo-2); display: flex; align-items: center; justify-content: center; }
.modal .cuerpo { padding: 40px 48px 24px; }
.modal h2 { text-align: center; font-size: 32px; margin: 8px 0 26px; }
.opcion-login { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px; margin-bottom: 12px; font-weight: 600; font-size: 16px; background: var(--fondo-2); }
.opcion-login .txt { flex: 1; text-align: center; }
.modal .legal { font-size: 12px; color: var(--tinta-3); text-align: center; margin-top: 18px; }
.modal .pie-modal { border-top: 1px solid var(--borde); padding: 18px; text-align: center; }
.modal .pie-modal a, .enlace { color: var(--acento); font-weight: 700; cursor: pointer; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-weight: 600; font-size: 14px; }
.campo input, .campo select, .campo textarea { border: 1px solid var(--borde); background: var(--fondo-2); border-radius: var(--radio); padding: 11px 12px; outline: 0; width: 100%; }
.campo input:focus, .campo textarea:focus { border-color: var(--acento); }
.fila-tel { display: flex; gap: 8px; }
.fila-tel select { width: 120px; flex: none; }
.error { color: #d93025; font-size: 14px; min-height: 18px; margin: 4px 0 8px; }
.ok-msg { color: #188038; font-size: 14px; }

/* ── Perfil (img 224/229) ── */
.perfil { padding: 32px 40px 40px; max-width: 1600px; }
.perfil-cabeza { display: flex; gap: 32px; align-items: flex-start; }
.perfil-cabeza .avatar { width: 200px !important; height: 200px !important; }
.perfil-cabeza h1 { margin: 0; font-size: 26px; display: flex; align-items: baseline; gap: 12px; }
.perfil-cabeza h1 small { font-size: 18px; font-weight: 400; color: var(--tinta-2); border-left: 1px solid var(--borde); padding-left: 12px; }
.cuentas { display: flex; gap: 22px; margin: 10px 0 16px; font-size: 17px; }
.cuentas b { margin-right: 4px; }
.botonera { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.bio { white-space: pre-line; max-width: 640px; }
.bio-enlace { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; margin-top: 8px; }
.pestanas { display: flex; align-items: center; border-bottom: 1px solid var(--borde); margin-top: 28px; }
.pestanas .tab { padding: 12px 34px; font-size: 19px; font-weight: 600; color: var(--tinta-3); border-bottom: 2px solid transparent; display: inline-flex; gap: 8px; align-items: center; }
.pestanas .tab.on { color: var(--tinta); border-bottom-color: var(--tinta); }
.orden { margin-left: auto; display: flex; background: var(--fondo-2); border-radius: 6px; padding: 3px; }
.orden button { padding: 6px 12px; border-radius: 5px; color: var(--tinta-2); font-weight: 600; }
.orden button.on { background: var(--fondo); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; margin-top: 24px; }
.celda { position: relative; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; background: var(--fondo-3); display: block; }
.celda img { width: 100%; height: 100%; object-fit: cover; display: block; }
.celda .vistas { position: absolute; left: 10px; bottom: 8px; color: #fff; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.celda .fijado { position: absolute; left: 8px; top: 8px; background: var(--acento); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.celda .cand { position: absolute; right: 8px; bottom: 8px; color: #fff; }
.celda .live-et { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }
.et-live { background: var(--acento); color: #fff; font-weight: 700; font-size: 13px; padding: 2px 6px; border-radius: 4px; }
.et-num { background: rgba(0,0,0,.45); color: #fff; font-weight: 600; font-size: 13px; padding: 2px 6px; border-radius: 4px; }
.celda-pie { margin-top: 6px; }
.celda-pie .tit { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.celda-pie .aut { display: flex; align-items: center; gap: 6px; color: var(--tinta-2); font-size: 14px; margin-top: 4px; justify-content: space-between; }
.celda-pie .aut span { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; }

/* ── Visor de publicación (img 231-233) ── */
.visor { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-columns: 1fr 520px; background: var(--fondo); }
.visor .escena { position: relative; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.visor .escena .fondo-borroso { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(40px) brightness(.5); }
.visor .escena video, .visor .escena img.principal { position: relative; max-height: 100vh; max-width: 100%; height: 100%; object-fit: contain; }
.visor .x { position: absolute; top: 20px; left: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; }
.visor .buscar-rel { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: min(560px, 60%); display: flex; align-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(0,0,0,.25); color: #fff; padding: 4px 6px 4px 16px; z-index: 2; }
.visor .buscar-rel input { flex: 1; background: none; border: 0; outline: 0; color: #fff; padding: 8px 0; }
.visor .buscar-rel input::placeholder { color: rgba(255,255,255,.8); }
.visor .nav-v { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 2; }
.visor .nav-v button { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; display: flex; align-items: center; justify-content: center; }
.visor .botones-autor { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 2; }
.visor .botones-autor button, .visor .botones-autor a { background: rgba(70,70,70,.85); color: #fff; border-radius: 999px; padding: 12px 22px; font-weight: 600; font-size: 18px; display: inline-flex; gap: 8px; align-items: center; }
.visor .lado { display: flex; flex-direction: column; border-left: 1px solid var(--borde); min-height: 0; }
.visor .ficha { margin: 14px; padding: 16px; background: var(--fondo-2); border-radius: 12px; }
.visor .ficha .quien { display: flex; gap: 12px; align-items: center; }
.visor .ficha .quien b { font-size: 18px; display: block; }
.visor .ficha .quien small { color: var(--tinta-2); display: inline-flex; gap: 4px; align-items: center; }
.visor .ficha .quien .btn { margin-left: auto; }
.visor .ficha p { margin: 12px 0 6px; white-space: pre-line; }
.visor .ficha .meta { color: var(--tinta-2); font-size: 14px; display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.visor .ficha .mencion { color: #2b5db9; }
.visor .barra-acc { display: flex; align-items: center; gap: 18px; padding: 4px 18px 12px; }
.visor .barra-acc .accion { flex-direction: row; gap: 8px; }
.visor .barra-acc .accion .circ { width: 36px; height: 36px; }
.visor .redes { margin-left: auto; display: flex; gap: 8px; }
.visor .redes a, .visor .redes button { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fondo-2); }
.copiar-enlace { margin: 0 18px 12px; display: flex; align-items: center; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px 12px; gap: 10px; }
.copiar-enlace span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--tinta-2); font-size: 14px; }
.copiar-enlace button { font-weight: 700; }
.visor .tabs-com { display: flex; border-bottom: 1px solid var(--borde); }
.visor .tabs-com button { flex: 1; padding: 12px; font-weight: 600; color: var(--tinta-3); border-bottom: 2px solid transparent; }
.visor .tabs-com button.on { color: var(--tinta); border-bottom-color: var(--tinta); }
.visor .lista-com { flex: 1; overflow-y: auto; padding: 12px 18px; min-height: 0; }
.com { display: flex; gap: 10px; margin-bottom: 18px; }
.com .cuerpo-com { flex: 1; min-width: 0; }
.com .nom { color: var(--tinta-2); font-size: 14px; font-weight: 600; }
.com .nom .creador { color: var(--acento); font-weight: 600; }
.com .txt { margin: 2px 0 4px; white-space: pre-line; word-break: break-word; }
.com .meta { color: var(--tinta-3); font-size: 13px; display: flex; gap: 14px; align-items: center; }
.com .meta button { color: var(--tinta-2); font-weight: 600; }
.com .mg { display: flex; flex-direction: column; align-items: center; color: var(--tinta-3); font-size: 13px; }
.com .mg.on { color: var(--acento); }
.com .mg.on .ico { fill: currentColor; }
.ver-resp { color: var(--tinta-2); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px 50px; }
.ver-resp::before { content: ""; width: 24px; border-top: 1px solid var(--tinta-3); }
.respuestas { margin-left: 50px; }
.escribir { border-top: 1px solid var(--borde); padding: 12px 16px; display: flex; gap: 10px; align-items: center; }
.escribir .entrada { flex: 1; display: flex; align-items: center; background: var(--fondo-2); border-radius: var(--radio); padding: 4px 12px; }
.escribir input { flex: 1; border: 0; background: none; outline: 0; padding: 9px 0; }
.escribir .enviar { width: 36px; height: 36px; border-radius: 50%; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; }
.escribir .enviar[disabled] { opacity: .4; }
.respondiendo { padding: 6px 16px; font-size: 13px; color: var(--tinta-2); display: flex; justify-content: space-between; background: var(--fondo-2); }

/* ── Resultados de búsqueda (img 236-238) / Explorar (img 241/242) ── */
.pagina { padding: 24px 40px 40px; max-width: 1600px; }
.tabs-res { display: flex; gap: 0; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--fondo); z-index: 3; }
.tabs-res button { padding: 14px 42px; font-size: 18px; font-weight: 600; color: var(--tinta-3); border-bottom: 2px solid transparent; }
.tabs-res button.on { color: var(--tinta); border-bottom-color: var(--tinta); }
.rejilla-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 24px; }
.rejilla-4 .celda { aspect-ratio: 3/4; }
.fila-usuario { display: flex; align-items: center; gap: 18px; padding: 14px 10px; }
.fila-usuario .avatar { width: 72px !important; height: 72px !important; }
.fila-usuario .info { flex: 1; min-width: 0; }
.fila-usuario b { font-size: 18px; }
.fila-usuario small { display: block; color: var(--tinta-2); }
.bloque-tit { display: flex; justify-content: space-between; align-items: center; margin: 32px 0 6px; }
.bloque-tit h3 { margin: 0; font-size: 20px; }
.chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 16px; scrollbar-width: none; position: sticky; top: 0; background: var(--fondo); z-index: 3; }
.chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; padding: 8px 16px; border-radius: 8px; background: var(--fondo-2); font-weight: 600; color: var(--tinta-2); }
.chip.on { background: var(--tinta); color: var(--fondo); }
.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: 18px; }
.mosaico .celda { aspect-ratio: auto; height: 100%; }
.mosaico .grande { grid-column: span 2; grid-row: span 2; }
.cargar-mas { display: flex; justify-content: center; padding: 26px; color: var(--tinta-3); }

/* ── Mensajes (img 223) ── */
.mensajes { display: grid; grid-template-columns: 420px 1fr; gap: 20px; padding: 24px 40px; height: 100vh; }
.mensajes .caja { background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mensajes h2 { margin: 18px 22px 12px; font-size: 26px; }
.filtro-chat { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 12px; color: var(--tinta-2); }
.lista-chats { overflow-y: auto; flex: 1; }
.chat-fila { display: flex; gap: 14px; align-items: center; padding: 12px 18px; width: 100%; text-align: left; }
.chat-fila:hover, .chat-fila.on { background: var(--fondo-2); }
.chat-fila .info { flex: 1; min-width: 0; }
.chat-fila b { display: block; font-size: 17px; }
.chat-fila .ult { color: var(--tinta-2); display: flex; justify-content: space-between; gap: 10px; }
.chat-fila .ult span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-fila .no-leido { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.chat-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.chat-cab b { font-size: 18px; display: block; }
.chat-cab small { color: var(--tinta-2); }
.chat-cuerpo { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.burbuja { max-width: 70%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--borde); white-space: pre-line; word-break: break-word; }
.burbuja.mia { align-self: flex-end; background: var(--fondo-2); }
.burbuja img, .burbuja video { max-width: 260px; border-radius: 8px; display: block; }
.fecha-chat { align-self: center; color: var(--tinta-3); font-size: 13px; }
.chat-escribir { border-top: 1px solid var(--borde); padding: 12px 16px; display: flex; gap: 10px; }
.chat-escribir input { flex: 1; border: 1px solid var(--borde); border-radius: 8px; padding: 11px 12px; background: var(--fondo-2); outline: 0; }

/* ── Notificaciones (img 243) ── */
.filtros-notif { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.filtros-notif button { padding: 8px 14px; border-radius: 999px; background: var(--fondo-2); font-weight: 600; }
.filtros-notif button.on { background: var(--tinta); color: var(--fondo); }
.notif { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: var(--radio); }
.notif:hover { background: var(--fondo-2); }
.notif .info { flex: 1; min-width: 0; }
.notif b { display: block; }
.notif small { color: var(--tinta-2); }
.notif .mini { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }
.notif .nuevo { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }

/* ── Ajustes (img 228/230) ── */
.ajustes { display: grid; grid-template-columns: 60px 400px 1fr; gap: 20px; padding: 24px 40px; max-width: 1500px; }
.ajustes .menu, .ajustes .hoja { background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px; padding: 18px; }
.ajustes .menu a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; font-size: 18px; font-weight: 500; border-radius: 8px; }
.ajustes .menu a.on { color: var(--acento); }
.ajustes .hoja h2 { margin: 6px 12px 12px; font-size: 26px; }
.ajustes .hoja h3 { margin: 22px 12px 6px; font-size: 19px; }
.fila-ajuste { display: flex; align-items: center; gap: 16px; padding: 14px 12px; border-bottom: 1px solid var(--borde); width: 100%; text-align: left; }
.fila-ajuste .info { flex: 1; }
.fila-ajuste b { display: block; font-weight: 600; }
.fila-ajuste small { color: var(--tinta-2); }
.fila-ajuste .valor { color: var(--tinta-2); display: inline-flex; align-items: center; }
.interruptor { width: 52px; height: 30px; border-radius: 999px; background: var(--fondo-3); position: relative; flex: none; transition: background .15s; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.interruptor.on { background: var(--acento); }
.interruptor.on::after { left: 25px; }
.segmentado { display: inline-flex; background: var(--fondo-2); border-radius: 999px; padding: 3px; }
.segmentado button { padding: 6px 10px; border-radius: 999px; }
.segmentado button.on { background: var(--fondo); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ── Studio (img 225-227) ── */
.studio { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.studio .menu-st { border-right: 1px solid var(--borde); padding: 18px 16px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.studio .menu-st .grupo { color: var(--tinta-3); font-size: 12px; font-weight: 700; text-transform: uppercase; margin: 18px 6px 6px; }
.studio .menu-st a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; font-size: 16px; }
.studio .menu-st a.on { background: var(--fondo-2); font-weight: 600; }
.studio .subir-btn { background: var(--acento); color: #fff; border-radius: 8px; padding: 12px 16px; font-weight: 700; display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.studio .volver { margin-top: auto; color: var(--tinta-2); padding: 10px 6px; }
.studio .area { padding: 24px 36px 60px; background: var(--fondo-2); min-width: 0; }
.tarjeta { background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.tarjeta h3 { margin: 0 0 14px; font-size: 18px; display: flex; justify-content: space-between; align-items: center; }
.metricas { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.metricas .m { padding: 18px 10px; text-align: center; border-right: 1px solid var(--borde); cursor: pointer; border-top: 3px solid transparent; }
.metricas .m:last-child { border-right: 0; }
.metricas .m.on { border-top-color: var(--acento); }
.metricas .m .n { font-size: 26px; margin: 6px 0; color: var(--tinta); }
.metricas .m.on .n { color: var(--acento); }
.metricas .m small { color: var(--tinta-3); }
.grafica-svg { width: 100%; height: 220px; margin-top: 16px; }
.grafica-svg .linea { fill: none; stroke: var(--acento); stroke-width: 2; }
.grafica-svg .area-g { fill: var(--acento); opacity: .08; }
.grafica-svg .rej { stroke: var(--borde); stroke-dasharray: 3 3; }
.grafica-svg text { fill: var(--tinta-3); font-size: 11px; }
.fila-post { display: flex; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.fila-post:last-child { border-bottom: 0; }
.fila-post img { width: 70px; height: 92px; object-fit: cover; border-radius: 6px; background: var(--fondo-3); }
.fila-post .info { flex: 1; min-width: 0; }
.fila-post .info b { display: block; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fila-post .info small { color: var(--tinta-3); }
.fila-post .nums { display: flex; gap: 40px; color: var(--tinta-3); text-align: center; }
.zona-subir { border: 2px dashed #8ab4f8; background: #f3f6fd; border-radius: 10px; padding: 70px 20px; text-align: center; }
:root[data-theme="dark"] .zona-subir { background: #1b2233; }
.zona-subir.encima { background: #e6eefc; }
.dos-col { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

/* ── Promocionar (img 239/240) ── */
.promo { max-width: 780px; margin: 0 auto; padding: 24px 20px 120px; }
.objetivos-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.objetivos-tabs button { padding: 8px 14px; border-radius: 6px; background: var(--fondo-2); color: var(--tinta-2); font-weight: 600; border: 1px solid transparent; }
.objetivos-tabs button.on { border-color: var(--acento); color: var(--acento); background: var(--fondo); }
.opcion-radio { display: flex; align-items: center; gap: 14px; padding: 14px 0; width: 100%; text-align: left; font-size: 17px; }
.opcion-radio .txt { flex: 1; }
.radio { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--fondo-3); }
.radio.on { border: 8px solid var(--acento); }
.barra-hito { height: 12px; border-radius: 6px; background: var(--fondo-3); position: relative; margin: 26px 0 8px; }
.barra-hito .ya { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--acento); }
.barra-hito .est { position: absolute; top: 0; bottom: 0; background: var(--acento); opacity: .3; border-radius: 6px; }
.pie-pago { position: fixed; bottom: 0; left: var(--lateral); right: 0; background: var(--fondo); border-top: 1px solid var(--borde); padding: 16px max(20px, calc((100% - 780px) / 2)); display: flex; justify-content: space-between; align-items: center; z-index: 10; }
.pie-pago .total { font-size: 26px; font-weight: 800; }
.deslizador { width: 100%; accent-color: var(--acento); }

/* ── Juegos ── */
.juegos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }
.juego { border-radius: 12px; overflow: hidden; background: var(--fondo-2); display: flex; flex-direction: column; }
.juego img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--fondo-3); }
.juego .info { padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.marco-juego { position: fixed; inset: 0; z-index: 45; background: #000; display: flex; flex-direction: column; }
.marco-juego .barra-j { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #111; color: #fff; }
.marco-juego iframe { flex: 1; border: 0; width: 100%; background: #000; }

/* ── Esqueletos (img 235) ── */
.esq { border-radius: 8px; }
.esq-img { background: var(--fondo-2); border-radius: 8px; aspect-ratio: 3/4; animation: brillo 1.2s ease-in-out infinite; }
.esq-linea { height: 14px; background: var(--fondo-2); border-radius: 7px; margin-top: 10px; animation: brillo 1.2s ease-in-out infinite; }
.esq-linea.corta { width: 50%; }
.esq-fila { display: flex; gap: 14px; align-items: center; padding: 10px 6px; }
.esq-fila .c { width: 48px; height: 48px; border-radius: 50%; background: var(--fondo-2); animation: brillo 1.2s ease-in-out infinite; }
@keyframes brillo { 50% { opacity: .55; } }

.avatar { border-radius: 50%; object-fit: cover; background: var(--fondo-3); flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--tinta-3); }
.mencion { color: var(--acento); font-weight: 600; }
#avisos { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.aviso { background: rgba(30,30,30,.92); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600; }

/* ── Teléfono / pantalla estrecha: barra inferior en vez de lateral ── */
@media (max-width: 900px) {
  .lateral { top: auto; bottom: 0; right: 0; width: auto !important; height: 60px; flex-direction: row; padding: 4px 6px; border-top: 1px solid var(--borde); overflow: hidden; }
  .lateral .cabeza, .lateral .caja-buscar, .lateral hr, .lateral .seccion-titulo, .lateral .cuenta-seguida, .pie-lateral, .btn-entrar .txt { display: none; }
  .nav { display: flex; flex: 1; justify-content: space-around; }
  .nav a, .nav button { flex-direction: column; gap: 2px; font-size: 10px; padding: 6px; width: auto; }
  .nav .solo-ancho { display: none; }
  .btn-entrar { margin: 6px; padding: 8px 12px; }
  .contenido, body.mini .contenido { margin-left: 0; padding-bottom: 60px; }
  .panel { left: 0; width: 100%; bottom: 60px; }
  .tarjeta-feed { padding: 0; height: calc(100vh - 60px); }
  .feed { height: calc(100vh - 60px); }
  .medio { height: 100%; max-height: none; max-width: 100vw; width: 100%; border-radius: 0; }
  .acciones { position: absolute; right: 8px; bottom: 80px; color: #fff; }
  .accion { color: #fff; } .accion .circ { background: rgba(0,0,0,.35); }
  .flechas { display: none; }
  .visor { grid-template-columns: 1fr; grid-template-rows: 55vh 1fr; }
  .mensajes { grid-template-columns: 1fr; padding: 12px; height: calc(100vh - 60px); }
  .mensajes.en-chat .lista-wrap { display: none; }
  .mensajes:not(.en-chat) .chat-wrap { display: none; }
  .perfil, .pagina { padding: 16px; }
  .perfil-cabeza { flex-direction: column; gap: 14px; }
  .perfil-cabeza .avatar { width: 110px !important; height: 110px !important; }
  .pestanas .tab { padding: 10px 14px; font-size: 16px; }
  .rejilla { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; gap: 6px; }
  .ajustes { grid-template-columns: 1fr; padding: 12px; }
  .ajustes > .volver-col { display: none; }
  .studio { grid-template-columns: 1fr; }
  .studio .menu-st { position: static; height: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--borde); }
  .studio .menu-st .grupo, .studio .volver { display: none; }
  .studio .area { padding: 14px; }
  .metricas { grid-template-columns: repeat(3, 1fr); }
  .dos-col { grid-template-columns: 1fr; }
  .esquina { display: none; }
  .pie-pago { left: 0; bottom: 60px; }
  .tabs-res button { padding: 12px 14px; font-size: 15px; }
  .modal .cuerpo { padding: 34px 20px 20px; }
}

/* ★ 35 web — ajustes finos */
.vacio .ilus { width: 180px; height: 180px; object-fit: contain; display: block; margin: 0 auto 6px; }
.mosaico > div { display: flex; flex-direction: column; min-height: 0; }
.mosaico > div > .celda { flex: 1; aspect-ratio: auto; min-height: 0; }
.celda .vacio { padding: 0; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--tinta-3); }
.solo-movil { display: none; }
body.sin-lateral .lateral { display: none; }
body.sin-lateral .contenido { margin-left: 0; }
.velo .modal .ilus-login { display: block; width: 120px; height: 120px; margin: 0 auto; object-fit: contain; }
@media (max-width: 900px) {
  .solo-movil { display: inline-flex; }
  .visor .lado { min-height: 0; overflow: hidden; }
  .visor .botones-autor button, .visor .botones-autor a { font-size: 14px; padding: 8px 14px; }
  .visor .buscar-rel { display: none; }
  .fila-usuario .avatar { width: 52px !important; height: 52px !important; }
}
.btn-entrar { display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-entrar .ico { display: none; }
body.mini .btn-entrar .ico { display: block; }
@media (max-width: 900px) {
  .btn-entrar .ico { display: block; }
  .pestanas { flex-wrap: wrap; }
  .pestanas .orden { margin: 8px 0 0; width: 100%; justify-content: space-between; }
  .cuentas { gap: 14px; font-size: 15px; flex-wrap: wrap; }
  .cuentas span { white-space: nowrap; }
}