:root{
  --bg:#0A0D10;
  --bg-elevated:#14181C;
  --bg-hover:#181D22;
  --rail-width:240px;
  --rail-mini:72px;
  --header-h:56px;
  --text:#F2F4F5;
  --text-dim:#9AA3AA;
  --text-faint:#6B7480;
  --border:#262D33;
  --scrollbar-thumb:#3A434B;
  --accent-blue:#2E6FE0;
  --accent-teal:#22D3C6;
  --accent-grad:linear-gradient(135deg,var(--accent-blue),var(--accent-teal));
  --gold:#F2B84B;
  --gold-dim:#8A6A28;
  --danger:#F0424B;
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --bottomnav-h:58px;
  font-size:16px;
}
/* Por defecto el sitio sigue el tema claro/oscuro del sistema operativo del
   visitante. Desde el menu de cuenta ("Aspecto") se puede fijar Claro u
   Oscuro a mano, lo que agrega data-theme="light|dark" en <html> y gana
   sobre la preferencia del sistema (ver reglas [data-theme] mas abajo).
   Solo se retocan los "colores de chrome" (fondo, texto, bordes): el
   reproductor de video, sus controles y el modal de login se dejan siempre
   oscuros porque van montados sobre el video en negro, igual que en YouTube. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#ffffff;
    --bg-elevated:#f2f2f2;
    --bg-hover:#e5e5e5;
    --text:#0f0f0f;
    --text-dim:#606060;
    --text-faint:#909090;
    --border:#e2e2e2;
    --scrollbar-thumb:#c7c7c7;
  }
}
/* Eleccion manual desde el menu de cuenta: pisa la preferencia del sistema
   operativo en cualquier sentido. */
:root[data-theme="light"]{
  --bg:#ffffff;
  --bg-elevated:#f2f2f2;
  --bg-hover:#e5e5e5;
  --text:#0f0f0f;
  --text-dim:#606060;
  --text-faint:#909090;
  --border:#e2e2e2;
  --scrollbar-thumb:#c7c7c7;
}
:root[data-theme="dark"]{
  --bg:#0A0D10;
  --bg-elevated:#14181C;
  --bg-hover:#181D22;
  --text:#F2F4F5;
  --text-dim:#9AA3AA;
  --text-faint:#6B7480;
  --border:#262D33;
  --scrollbar-thumb:#3A434B;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
/* Mientras app.js arma la barra inferior, el menu y el buscador (ver el
   script al inicio de cada pagina e initChrome), la pagina no se muestra:
   solo el fondo del tema, del mismo color que la pagina anterior. Sin esto,
   en iPhone y escritorio se veia la pagina "a medias" y despues aparecer
   la barra inferior (un destello al cambiar de seccion). */
html{background:var(--bg);}
html.tw-preparando body{visibility:hidden;}
/* iPhone: Safari agranda la pagina al tocar un campo de texto con letra de
   menos de 16px y no la vuelve a su tamaño (se veia todo con zoom y el boton
   "Publicar" cortado a la derecha). En pantallas tactiles los campos van a
   16px; en escritorio quedan como estan. */
@media (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select{font-size:16px !important;}
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Manrope","Segoe UI",Arial,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
/* Los titulos (h1-h3) y el nombre de marca usan la tipografia de
   despliegue (mas caracter que el cuerpo de texto); todo lo demas hereda
   Manrope de <body>. Un solo punto de cambio para todo el sitio, ya que en
   el resto de las hojas de estilo cada elemento usa font-family:inherit. */
h1,h2,h3,.wordmark{font-family:"Space Grotesk","Segoe UI",Arial,sans-serif;}
/* Varias clases (.action-btn, .icon-btn, etc.) fijan su propio "display",
   lo que sin esta regla pisa el "display:none" que el navegador aplica por
   el atributo [hidden] — botones que JS deja ocultos (ej. "Editar" y
   "Eliminar" para no-admins) terminaban visibles igual. [hidden] siempre
   tiene que ganar. */
[hidden]{display:none !important;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:8px;}
::selection{background:var(--accent-teal);color:#04211d;}

/* ---------- HEADER ---------- */
header.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg);z-index:100;padding:0 16px;
  border-bottom:1px solid transparent;
}
.topbar-left{display:flex;align-items:center;gap:20px;min-width:180px;}
.icon-btn{
  width:40px;height:40px;border-radius:50%;border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;color:var(--text);
  flex-shrink:0;position:relative;
}
.icon-btn:hover{background:var(--bg-hover);}
.icon-btn svg{width:22px;height:22px;fill:currentColor;}
.brand{display:flex;align-items:center;gap:8px;}
.brand img.logo-mark{width:34px;height:34px;border-radius:50%;object-fit:cover;}
.brand .wordmark{font-size:19px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;}
.brand .wordmark b{
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.premium-pill{
  font-size:10px;font-weight:700;letter-spacing:.6px;color:#20180a;
  background:linear-gradient(90deg,#f6d774,var(--gold));
  padding:2px 7px;border-radius:5px;margin-left:2px;transform:translateY(-1px);
}
.topbar-center{flex:1;max-width:720px;display:flex;align-items:center;gap:8px;margin:0 20px;min-width:0;}
.topbar-right{display:flex;align-items:center;gap:6px;justify-content:flex-end;min-width:150px;}
/* Campo de busqueda unico de la app (ver ensureTopbarSearch en app.js). En
   escritorio queda siempre inline aca. En mobile (ver @media mas abajo) no
   hay lugar para un campo fijo con texto legible al lado del logo, asi que
   arranca oculto detras de .topbar-search-toggle (la lupa) y solo se expande
   -tapando el resto de la barra- cuando <header class="topbar"> tiene la
   clase "search-active". */
.topbar-search-form{
  display:flex;align-items:center;gap:10px;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:20px;padding:9px 16px;width:100%;min-width:0;
}
.topbar-search-form svg{width:17px;height:17px;fill:none;stroke:var(--text-dim);stroke-width:2;flex-shrink:0;}
.topbar-search-form input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-size:14px;font-family:inherit;}
.topbar-search-toggle{display:none;}
.topbar-search-close{display:none;width:26px;height:26px;flex-shrink:0;}
.topbar-search-close svg{width:15px;height:15px;fill:var(--text-dim);stroke:none;}
.avatar-btn{
  width:32px;height:32px;border-radius:50%;border:none;overflow:hidden;padding:0;margin-left:6px;
  background:var(--accent-grad);color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.avatar-btn img,
.account-menu .who .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.btn-signin{
  background:transparent;border:1px solid var(--border);color:var(--accent-teal);border-radius:20px;
  padding:8px 14px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.btn-signin:hover{background:var(--bg-hover);}
.btn-signin svg{width:18px;height:18px;fill:currentColor;}

/* ---------- ACCOUNT MENU ---------- */
.account-menu{
  position:fixed;top:52px;right:12px;width:290px;background:var(--bg-elevated);
  border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.5);z-index:200;
  display:none;flex-direction:column;overflow:hidden;border:1px solid var(--border);
}
.account-menu.open{display:flex;}
.account-menu .who{display:flex;gap:12px;align-items:center;padding:16px;}
.account-menu .who .av{
  width:44px;height:44px;border-radius:50%;background:var(--accent-grad);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:17px;flex-shrink:0;
}
.account-menu .who .name{font-size:15px;font-weight:500;}
.account-menu .who .mail{font-size:12.5px;color:var(--text-dim);}
.account-menu hr{border:none;border-top:1px solid var(--border);margin:4px 0;}
.account-menu .item{
  display:flex;align-items:center;gap:20px;padding:9px 16px;font-size:13.5px;background:transparent;border:none;color:var(--text);width:100%;text-align:left;
}
.account-menu .item:hover{background:var(--bg-hover);}
.account-menu .item svg{width:20px;height:20px;fill:var(--text-dim);flex-shrink:0;}
.account-menu .premium-card{
  margin:10px 14px 14px;padding:12px;border-radius:10px;
  background:linear-gradient(135deg,rgba(242,193,78,.14),rgba(53,208,192,.08));
  border:1px solid var(--gold-dim);display:flex;gap:10px;align-items:center;
}
.account-menu .premium-card img{width:34px;height:34px;border-radius:50%;}
.account-menu .premium-card .t{font-size:13px;font-weight:700;color:var(--gold);}
.account-menu .premium-card .s{font-size:11.5px;color:var(--text-dim);}

.notif-dot{
  position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;
  background:var(--danger);border:2px solid var(--bg);
}
.notif-menu{width:340px;max-height:70vh;overflow-y:auto;}
.notif-title{font-size:13px;font-weight:700;padding:12px 16px 6px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;}
.notif-empty{padding:20px 16px;font-size:13.5px;color:var(--text-dim);text-align:center;}
.notif-item{align-items:flex-start;gap:12px;}
.notif-item svg{fill:var(--text-dim);margin-top:2px;}
.notif-item.unread{background:rgba(47,123,214,.08);}
.notif-item.unread svg{fill:var(--accent-teal);}
.notif-item-body{display:flex;flex-direction:column;gap:2px;min-width:0;white-space:normal;}
.notif-item-title{font-size:13px;font-weight:600;color:var(--text);}
.notif-item-text{font-size:12.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.notif-push-row{border-top:1px solid var(--border);color:var(--accent-teal);}
.notif-push-row svg{fill:var(--accent-teal);}

/* ---------- LAYOUT ---------- */
.shell{padding-top:var(--header-h);}
nav.rail{
  position:fixed;top:var(--header-h);left:0;bottom:0;width:var(--rail-width);
  background:var(--bg);overflow-y:auto;padding:12px 0 24px;transition:width .18s ease;z-index:90;
}
body.rail-collapsed nav.rail{width:var(--rail-mini);}
body.rail-collapsed main.content{margin-left:var(--rail-mini);}
body.rail-collapsed .rail .txt{display:none;}
body.rail-collapsed .rail .section-title{display:none;}
body.rail-collapsed .rail a.rail-link{flex-direction:column;gap:2px;padding:14px 0;font-size:10px;border-radius:8px;}
body.rail-collapsed .rail a.rail-link svg{width:22px;height:22px;}
.rail-group{padding:4px 8px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.rail-group:last-child{border-bottom:none;}
/* Version publicada al pie del menu lateral (ver ensureVersionTag en app.js). */
.rail-version{padding:12px 22px 18px;font-size:11px;color:var(--text-dim);opacity:.8;user-select:text;}
@media (min-width:901px){body.rail-collapsed .rail-version{display:none;}}
/* Selector generico (no "a.rail-link"): esta clase tambien se usa en un
   <button> suelto fuera del rail (ej. "Cerrar sesion" en profile.html), que
   sin esto quedaba sin ninguno de estos estilos -incluido el tamano del
   svg-, mostrando el icono a su tamano intrinseco (gigante). */
.rail-link{
  position:relative;display:flex;align-items:center;gap:20px;padding:0 14px;height:40px;border-radius:10px;
  font-size:14px;color:var(--text);white-space:nowrap;font-family:inherit;
}
.rail-link:hover{background:var(--bg-hover);}
.rail-link.active{background:var(--bg-elevated);font-weight:700;}
.rail-link.active svg{fill:var(--text);}
.rail-link svg{width:22px;height:22px;fill:var(--text-dim);flex-shrink:0;}
.rail-link.gold svg{fill:var(--gold);}
.rail-link.gold .txt{color:var(--gold);font-weight:600;}
.rail-link .txt{flex:1;}
.rail-badge{
  flex-shrink:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
body.rail-collapsed .rail-badge{
  position:absolute;top:6px;right:14px;
}
.section-title{font-size:14px;font-weight:600;padding:8px 14px;color:var(--text);}

main.content{margin-left:var(--rail-width);flex:1;padding:20px 24px 100px;transition:margin-left .18s ease;min-height:calc(100vh - var(--header-h));}

/* ---------- BARRA INFERIOR (mobile, tipo TikTok) ----------
   Oculta en desktop (se usa el rail de la izquierda en su lugar); aparece
   fija abajo solo en pantallas angostas, ver @media mas abajo. */
.bottom-nav{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  height:calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--bg);border-top:1px solid var(--border);
  align-items:stretch;
}
.bn-link{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--text-dim);font-size:10.5px;font-weight:500;position:relative;
}
.bn-link svg{width:23px;height:23px;fill:currentColor;}
.bn-link.active{color:var(--text);}
/* Perfil con la foto del usuario (ver paintBottomNavProfile en app.js). */
.bn-icon{display:flex;align-items:center;justify-content:center;width:23px;height:23px;}
.bn-avatar{
  width:25px;height:25px;border-radius:50%;overflow:hidden;background:var(--accent-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;
}
.bn-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.bn-link.active .bn-avatar{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--text);}
.bn-badge{
  position:absolute;top:2px;left:50%;margin-left:6px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.bn-create{
  flex:0 0 auto;width:46px;height:34px;align-self:center;margin:0 6px;border:none;border-radius:10px;
  background:var(--accent-grad);display:flex;align-items:center;justify-content:center;
}
.bn-create svg{width:24px;height:24px;fill:#fff;}
.bn-create:active{transform:scale(.94);}

.btn-gold{
  background:linear-gradient(90deg,#f6d774,var(--gold));color:#241c05;font-weight:700;font-size:13.5px;
  border:none;border-radius:20px;padding:10px 18px;white-space:nowrap;
}
.btn-gold:hover{filter:brightness(1.08);}
.btn-gold:disabled{opacity:.6;cursor:default;filter:none;}
.btn-ghost{
  background:transparent;border:1px solid var(--border);color:var(--text);border-radius:20px;
  padding:9px 14px;font-size:13px;
}
.btn-ghost:hover{background:var(--bg-hover);}

.page-title{font-size:20px;font-weight:700;margin:4px 0 18px;}
.page-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.page-title-row .page-title{margin:0;}

/* ---------- VIDEO GRID ---------- */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px 16px;
}
.card{cursor:pointer;}
.thumb{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;
  height:0;padding-bottom:56.25%;margin-bottom:10px;
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-teal));
}
@supports (aspect-ratio: 16 / 9){
  .thumb{height:auto;padding-bottom:0;}
}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.thumb .glyph{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38%;height:38%;opacity:.35;fill:#fff;
}
.thumb .play-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.card:hover .play-overlay{background:rgba(0,0,0,.25);}
.thumb .play-overlay svg{width:46px;height:46px;fill:#fff;opacity:0;transition:opacity .15s;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));}
.card:hover .play-overlay svg{opacity:1;}
.card-delete-btn{
  position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border-radius:50%;border:none;
  background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s;
}
.card:hover .card-delete-btn{opacity:1;}
.card-delete-btn:hover{background:var(--danger);}
.card-delete-btn svg{width:16px;height:16px;fill:#fff;}
.duration-badge{
  position:absolute;bottom:6px;right:6px;z-index:1;background:rgba(0,0,0,.8);color:#fff;
  font-size:12px;font-weight:600;padding:2px 5px;border-radius:4px;line-height:1.3;
}
.meta-row{display:flex;gap:10px;}
.meta-row .av{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:13px;background:var(--accent-grad);
}
.meta-row .txt{min-width:0;flex:1;}
.meta-row .vtitle{
  font-size:14.5px;font-weight:600;line-height:1.35;margin:0 0 4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.meta-row .stats{font-size:12.5px;color:var(--text-dim);}
.category-badge{
  display:inline-flex;align-items:center;background:var(--bg-elevated);color:var(--text-dim);
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--radius-sm);margin:2px 0 4px;
}

.empty-state{text-align:center;color:var(--text-dim);padding:60px 20px;font-size:14px;}

/* ---------- AUTH MODAL ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:none;align-items:center;justify-content:center;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;width:340px;max-width:calc(100vw - 32px);
  padding:24px;
}
.modal h2{margin:0 0 16px;font-size:18px;}
.google-signin-wrap{display:flex;justify-content:center;margin-bottom:16px;}
.auth-divider{display:flex;align-items:center;gap:10px;margin-bottom:6px;color:var(--text-faint);font-size:12px;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;border-top:1px solid var(--border);}
.modal label{display:block;font-size:12.5px;color:var(--text-dim);margin:12px 0 4px;}
.modal input, .modal textarea, .modal select{
  width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;
  color:var(--text);font-size:14px;outline:none;font-family:inherit;
}
.modal textarea{resize:vertical;min-height:70px;}
.modal input:focus, .modal textarea:focus, .modal select:focus{border-color:var(--accent-teal);}
.modal .err{color:var(--danger);font-size:12.5px;margin-top:10px;min-height:16px;}
.modal .actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px;}
.modal .switch-link{font-size:12.5px;color:var(--accent-teal);background:none;border:none;padding:0;}
.btn-primary{
  background:var(--accent-grad);color:#04211d;font-weight:700;font-size:13.5px;border:none;border-radius:20px;padding:10px 18px;
}
.btn-primary:disabled{opacity:.6;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  /* Mobile: el campo de busqueda no entra fijo al lado del logo (queda
     apretadisimo en 360-400px), asi que arranca colapsado detras de la lupa
     (.topbar-search-toggle) y solo se expande -tapando logo/menu/cuenta- con
     la clase "search-active" en <header class="topbar"> (ver
     ensureTopbarSearch en app.js). */
  .topbar-center{display:none;}
  .topbar-search-toggle{display:flex;}
  header.topbar.search-active .topbar-left #hamburgerBtn,
  header.topbar.search-active .topbar-left .brand,
  header.topbar.search-active .topbar-search-toggle,
  header.topbar.search-active .topbar-right{display:none;}
  header.topbar.search-active .topbar-left{min-width:0;}
  header.topbar.search-active .topbar-center{display:flex;flex:1;margin:0;}
  header.topbar.search-active .topbar-search-close{display:flex;}
  .topbar-right .icon-btn.mobile-hide{display:none;}
  nav.rail{transform:translateX(-100%);width:var(--rail-width);transition:transform .2s ease;}
  body.rail-collapsed nav.rail{transform:translateX(0);width:var(--rail-width);}
  body.rail-collapsed .rail .txt{display:inline;}
  body.rail-collapsed .rail .section-title{display:block;}
  body.rail-collapsed .rail a.rail-link{flex-direction:row;gap:20px;padding:0 14px;font-size:14px;}
  body.rail-collapsed .rail a.rail-link svg{width:22px;height:22px;}
  /* En mobile "rail-collapsed" es el cajon abierto (fila normal), no el modo
     mini de escritorio: el globito vuelve al flujo normal en vez de quedar
     absoluto (eso es solo para el icono solo de la version mini). */
  body.rail-collapsed .rail-badge{position:static;}
  main.content{margin-left:0 !important;}
  .bottom-nav{display:flex;}
  /* En el celular la cuenta vive en "Perfil" de la barra inferior (con la
     foto) y sus opciones dentro del perfil: arriba no hace falta el avatar
     ni su menu. */
  #avatarBtn, #accountMenu{display:none !important;}
  /* La campana si sigue arriba: su menu ocupa el ancho de la pantalla. */
  .notif-menu{left:12px;right:12px !important;width:auto;top:calc(var(--header-h) + 4px);max-height:calc(100dvh - var(--header-h) - 90px);}
  /* Los links de Amigos/Mensajes/Perfil del rail son la version desktop de
     la barra inferior: en mobile los reemplaza esa barra, asi que se
     ocultan para no duplicarlos. */
  #railAppLinks{display:none;}
  body.has-bottom-nav main.content{padding-bottom:calc(var(--bottomnav-h) + 24px + env(safe-area-inset-bottom));}
}
@media (max-width:520px){
  .brand .wordmark{display:none;}
}

/* ---------- SHORTS (feed vertical) ----------
   El fondo de la pagina (afuera del video) sigue el tema del sitio
   (blanco/gris claro en modo claro, oscuro en modo oscuro) igual que el
   resto de Todayworld, en vez de negro puro. Solo el propio reproductor de
   video se deja siempre oscuro, como una "tarjeta" con esquinas redondeadas
   y sombra flotando sobre el fondo, igual que un embed de YouTube. */
/* OJO: "shorts-wrap" es hermano de ".shell" (que ya reserva los 56px del
   header fijo con su propio padding-top, aunque el rail no ocupe espacio
   real por ser position:fixed), no hijo. Antes esta regla tambien traia su
   propio padding-top:56px, y esos 56px se sumaban a los del ".shell" de
   arriba: cada Short terminaba 56px mas abajo y 56px mas alto de lo que
   entraba en la pantalla, cortado por abajo. Con el scroll con mouse
   (rueda) eso hacia que el scroll-snap nunca terminara de encajar bien y el
   video quedara "frizado"/trabado a mitad de camino entre dos Shorts (en
   celular el swipe es mas "de un tiron" y disimulaba el problema). */
.shorts-wrap{
  height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));
  overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;
  background:var(--bg);position:relative;
}
.short-item{
  scroll-snap-align:start;scroll-snap-stop:always;width:100%;
  height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));
  display:flex;align-items:center;justify-content:center;position:relative;background:var(--bg);
  padding:12px 0;gap:16px;
}
.short-stage{
  position:relative;height:100%;flex-shrink:0;
  max-height:calc(100vh - var(--header-h) - 24px);max-height:calc(100dvh - var(--header-h) - 24px);
  width:min(100%, calc((100dvh - var(--header-h) - 24px) * 9 / 16));
  background:#050505;overflow:hidden;border-radius:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.22), 0 1px 0 rgba(0,0,0,.06);
  border:1px solid var(--border);
}
.short-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
/* Short horizontal o cuadrado: completo, sin recortar, sobre su miniatura
   desenfocada; los horizontales muestran "Pantalla completa" justo debajo
   del video (posicion en --fs-top, ver placeFullscreenButton en shorts.html). */
.short-blur-bg{
  position:absolute;inset:-40px;display:none;background:#000 center/cover no-repeat;
  filter:blur(28px) brightness(.55);transform:scale(1.1);
}
.short-stage.fit-contain .short-blur-bg{display:block;}
.short-stage.fit-contain video{object-fit:contain;background:transparent;}
/* Miniatura nitida encima del <video> hasta que empieza a reproducirse:
   Safari en iPhone deja de mostrar el "poster" apenas se carga el video
   (HLS), y hasta el primer cuadro solo se veia el fondo desenfocado. */
.short-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;}
.short-stage.fit-contain .short-poster,.short-stage.pfs .short-poster{object-fit:contain;}
.short-stage.started .short-poster{display:none;}
.short-fullscreen-btn{
  position:absolute;left:50%;top:var(--fs-top,68%);transform:translateX(-50%);z-index:4;
  display:none;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;
  font-family:inherit;font-weight:600;font-size:13px;line-height:1;cursor:pointer;white-space:nowrap;
}
.short-stage.landscape .short-fullscreen-btn{display:inline-flex;}
.short-fullscreen-btn:hover{background:rgba(0,0,0,.65);}
.short-fullscreen-btn svg{width:18px;height:18px;fill:currentColor;}
/* Vista a pantalla completa de un Short horizontal (openLandscapeView en
   shorts.html): el cuadro ocupa toda la pantalla y, con el telefono
   vertical, se gira 90 grados para verlo de lado (Safari en iPhone no deja
   girar la pantalla desde una pagina). .short-item delante del selector: le
   gana a los tamaños de body.shorts-page .short-stage. */
body.pfs-open{overflow:hidden;}
body.pfs-open .shorts-wrap{overflow:hidden;}
.short-item .short-stage.pfs{
  position:fixed;z-index:1000;top:50%;left:50%;
  width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  transform:translate(-50%,-50%);border-radius:0;border:none;box-shadow:none;background:#000;
}
@media (orientation:portrait){
  .short-item .short-stage.pfs{
    width:100vh;width:100dvh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);
  }
}
.short-item .short-stage.pfs:fullscreen{background:#000;}
.short-stage.pfs .short-blur-bg{display:none;}
.short-stage.pfs video{object-fit:contain;background:#000;}
.short-stage.pfs .short-fullscreen-btn{display:none !important;}
/* En pantalla completa no va el nombre ni la descripcion: quedaban encima de
   la marca de agua (TODAYWORLD @usuario, abajo a la izquierda del video). */
.short-stage.pfs .short-bottom{display:none;}
.short-pfs-close{
  display:none;position:absolute;top:14px;left:14px;z-index:6;width:40px;height:40px;border-radius:50%;
  border:none;background:rgba(0,0,0,.55);align-items:center;justify-content:center;cursor:pointer;
}
.short-pfs-close svg{width:22px;height:22px;fill:#fff;}
.short-stage.pfs .short-pfs-close{display:flex;}
.ad-stage{
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:12px;
  background:var(--bg-elevated);padding:16px;box-sizing:border-box;
}
.ad-stage .ad-label{
  position:absolute;top:14px;left:14px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dim);background:rgba(0,0,0,.35);padding:4px 10px;border-radius:999px;
}
/* align-items:stretch de arriba ya le da ancho al <ins> (el error real de
   AdSense sin esto: "No slot size for availableWidth=0", porque display:flex
   con align-items:center deja el <ins> vacio sin ancho para medir el bloque
   responsive). width:100% + box-sizing lo deja ademas alineado con el
   padding del contenedor sin desbordar. */
.ad-stage .adsbygoogle{width:100%;max-width:100%;box-sizing:border-box;}
/* Tarjeta propia cuando AdSense no tiene anuncio (data-ad-status=unfilled):
   antes quedaba la tarjeta en blanco. */
.ad-stage.ad-house{align-items:center;background:linear-gradient(160deg,#1c1c24 0%,#2a2233 55%,#3a2a12 100%);}
.house-ad{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;color:#fff;max-width:320px;padding:0 12px;}
.house-ad svg{width:56px;height:56px;fill:#f5c542;filter:drop-shadow(0 4px 14px rgba(245,197,66,.35));}
.house-ad h3{margin:0;font-size:22px;font-weight:700;}
.house-ad p{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.8);}
.house-ad-btn{margin-top:6px;border:none;border-radius:999px;padding:12px 26px;font-size:15px;font-weight:700;cursor:pointer;background:#f5c542;color:#1a1a1a;}
.house-ad-hint{margin-top:14px;font-size:12px;color:rgba(255,255,255,.55);}
/* El navegador no dejo arrancar el video solo (ahorro de bateria, etc.):
   boton de play visible para que no parezca un video "trabado". */
.short-item.needs-tap .short-tap-layer::after{
  content:"";position:absolute;top:50%;left:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;
  background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/40px no-repeat;
  pointer-events:none;
}
.short-video-error{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(0,0,0,.6);color:#fff;text-align:center;padding:24px;
}
.short-video-error p{margin:0;font-size:14px;max-width:220px;line-height:1.4;}
.short-video-error button{
  padding:9px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.14);color:#fff;font-weight:600;font-size:13px;cursor:pointer;
  transition:background .15s ease;
}
.short-video-error button:hover{background:rgba(255,255,255,.26);}
/* Short recien publicado que el servidor todavia esta procesando (ver
   watchProcessing en shorts.html). */
.short-processing{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(0,0,0,.72);color:#fff;text-align:center;padding:24px;
}
.short-processing p{margin:0;font-size:15px;font-weight:600;}
.short-processing small{font-size:12.5px;color:rgba(255,255,255,.75);max-width:220px;line-height:1.4;}
.short-processing.failed p{font-weight:500;font-size:14px;max-width:240px;line-height:1.4;}
.short-processing-spinner{
  width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:short-processing-spin .9s linear infinite;
}
@keyframes short-processing-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.short-processing-spinner{animation-duration:2.4s;}}
.short-tap-layer{position:absolute;inset:0;z-index:2;}
.short-mute-btn{
  position:absolute;top:14px;right:14px;z-index:4;width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.5);border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s ease;
}
.short-mute-btn:hover{background:rgba(0,0,0,.68);}
.short-mute-btn svg{width:19px;height:19px;fill:#fff;}
.short-bottom{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px 16px 20px;color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0) 75%);pointer-events:none;
}
.short-bottom > *{pointer-events:auto;}
.short-uploader{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13.5px;font-weight:700;}
.short-uploader a{color:inherit;text-decoration:none;}
.short-uploader a:hover{text-decoration:underline;}
.short-uploader .subscribe-mini{
  margin-left:6px;background:#fff;color:#000;border:none;border-radius:14px;padding:4px 12px;font-size:12px;font-weight:700;
  cursor:pointer;transition:transform .12s ease;
}
.short-uploader .subscribe-mini:hover{transform:scale(1.05);}
.short-uploader .subscribe-mini.subscribed{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);}
.short-caption{font-size:13.5px;line-height:1.4;white-space:pre-wrap;word-break:break-word;}
/* Barra para ver el avance del video y poder adelantar/retroceder
   arrastrando, como en TikTok/Reels. El elemento clickeable/arrastrable
   (.short-progress) es mas alto que la linea que se ve (.short-progress-
   track): en el dedo esa franja de solo 3px seria casi imposible de tocar
   con precision, asi que el area real de toque ocupa toda la franja
   inferior del video y la linea queda centrada adentro, "flotando" sobre
   el degradado de .short-bottom (touch-action:none evita que el navegador
   intente hacer scroll de la pagina en vez de arrastrar la barra). */
.short-progress{
  position:absolute;left:0;right:0;bottom:0;z-index:5;height:22px;display:flex;align-items:flex-end;
  padding:0 3px 5px;cursor:pointer;touch-action:none;
}
.short-progress-track{
  width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.3);position:relative;
  opacity:0;transition:height .1s ease, opacity .15s ease;
}
/* Oculta (video "limpio") salvo mientras se presiona el video o se esta
   arrastrando la barra misma -ahi ademas se engrosa un poco, para que sea
   mas facil de agarrar con el dedo-. */
.short-stage.pressing .short-progress-track,
.short-progress.scrubbing .short-progress-track{opacity:1;}
.short-progress.scrubbing .short-progress-track{height:5px;}
.short-progress-fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:2px;background:#fff;
}
/* En desktop (ver excepcion en @media max-width:900px mas abajo) las
   acciones quedan AFUERA de la tarjeta de video, como una columna aparte al
   lado -no tapan el contenido-. Son hermanas de .short-stage dentro de
   .short-item (que ya es flex), asi que alcanza con alinearlas al pie de la
   tarjeta con align-self en vez de position:absolute. */
.short-actions{
  flex-shrink:0;align-self:flex-end;margin-bottom:20px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px;
}
/* Avatar del creador, primero en la columna (arriba de "Me gusta"), con
   una insignia "+" para suscribirse sin tener que ir hasta el pill de
   abajo del video -el mismo patron que TikTok/Reels-. Sin "margin-bottom"
   propio como .short-action-btn: ese margen en los otros botones reserva
   lugar para su contador de texto (.n, posicionado absoluto debajo), y
   este boton no tiene uno; el "gap" del padre ya separa parejo. */
.short-avatar-btn{
  position:relative;width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;flex-shrink:0;
}
.short-avatar-img{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:var(--accent-grad);color:#fff;font-size:15px;font-weight:800;border:2px solid var(--bg);
}
.short-avatar-img img{width:100%;height:100%;object-fit:cover;}
.short-avatar-badge{
  position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;
  background:var(--gold);color:#241c05;font-size:13px;font-weight:900;line-height:16px;text-align:center;
  border:2px solid var(--bg);
}
.short-avatar-btn.subscribed .short-avatar-badge{display:none;}
.short-avatar-btn:disabled{opacity:.6;cursor:default;}
/* Efecto al suscribirse: un brillo dorado gira una vuelta alrededor del
   avatar (elegido entre varias opciones que se probaron en un mockup
   aparte). Solo se dispara al suscribirse, nunca al desuscribirse -ver
   toggleSubscribe() en shorts.html, que agrega "sweeping" nada mas cuando
   data.subscribed es true-. */
.short-avatar-sweep{position:absolute;inset:-6px;border-radius:50%;overflow:hidden;pointer-events:none;}
.short-avatar-sweep::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0%, rgba(242,184,75,.9) 8%, transparent 22%);
  opacity:0;
}
.short-avatar-btn.sweeping .short-avatar-sweep::after{animation:shortAvatarSweep .7s ease-out forwards;}
@keyframes shortAvatarSweep{
  0%{opacity:0;transform:rotate(0deg);}
  10%{opacity:1;}
  100%{opacity:0;transform:rotate(320deg);}
}
.short-avatar-btn.pop-anim .short-avatar-img{animation:shortAvatarPop .3s ease;}
@keyframes shortAvatarPop{0%{transform:scale(1);}50%{transform:scale(1.12);}100%{transform:scale(1);}}
/* Fuera del video (desktop) el circulo tiene que valer tanto en tema claro
   como oscuro, asi que usa los tokens de superficie/texto en vez del negro
   translucido fijo -pensado para ir siempre sobre imagen/video- que se
   restaura para mobile mas abajo (@media max-width:900px). */
.short-action-btn{
  position:relative;background:var(--bg-elevated);border:1px solid var(--border);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;color:var(--text);width:44px;height:44px;border-radius:50%;
  padding:0;margin-bottom:16px;cursor:pointer;transition:background .15s ease, transform .12s ease;
}
.short-action-btn:hover{background:var(--bg-hover);transform:scale(1.06);}
.short-action-btn svg{width:22px;height:22px;fill:currentColor;}
/* Etiquetas como "Compartir"/"Guardar" son mas anchas que el circulo de
   44px: centradas (left:0;right:0) se pasaban por igual de los dos lados,
   y del lado derecho eso choca con el borde de la pantalla en mobile,
   donde el rail va pegado al borde (.short-actions{right:6px}, ver mas
   abajo). Ancladas por la derecha en vez de centradas, el texto de mas
   ancho crece siempre hacia la izquierda (donde esta el video/la pagina,
   hay lugar de sobra) y el borde derecho nunca se corta. */
.short-action-btn .n{
  position:absolute;bottom:-16px;right:0;left:auto;max-width:120px;text-align:right;white-space:nowrap;
  font-size:11px;font-weight:600;color:var(--text-dim);
}
/* El numero de Me gusta se puede tocar (abre la lista de quienes dieron
   Me gusta): area de toque mas grande y subrayado leve para que se note. */
.short-action-btn .n[data-role="likeCount"]{padding:4px 2px 6px 10px;margin-bottom:-6px;cursor:pointer;
  text-decoration:underline dotted;text-underline-offset:3px;}
.short-action-btn.active svg{fill:var(--accent-teal);}
.short-action-btn.short-delete-btn:hover svg{fill:var(--danger);}
/* Efecto al dar Me gusta: el icono "vuela" hacia arriba y se desvanece
   (elegido entre varias opciones que se probaron en un mockup aparte),
   mas un pequeño rebote del boton. Solo al dar Me gusta, no al sacarlo
   -ver el click de [data-role="like"] en shorts.html-. */
.short-action-btn.pop-anim{animation:shortLikePop .3s ease;}
@keyframes shortLikePop{0%{transform:scale(1);}45%{transform:scale(1.18);}100%{transform:scale(1);}}
.short-like-float{
  position:absolute;left:50%;top:0;width:16px;height:16px;pointer-events:none;
  transform:translate(-50%,-4px) scale(.6);opacity:0;
}
.short-like-float svg{width:100%;height:100%;fill:var(--accent-teal);}
.short-like-float.fly{animation:shortLikeFloat .9s ease-out forwards;}
@keyframes shortLikeFloat{
  0%{opacity:0;transform:translate(-50%,-4px) scale(.5) rotate(-8deg);}
  15%{opacity:1;transform:translate(-50%,-14px) scale(1.05) rotate(4deg);}
  100%{opacity:0;transform:translate(-50%,-68px) scale(.85) rotate(-6deg);}
}
.short-empty, .short-loading, .short-end{color:var(--text-dim);text-align:center;padding:60px 20px;font-size:13.5px;}

/* El FAB flotante de "+" quedo reemplazado por #createBtn en la topbar
   (al lado de la campanita, ver renderAccountArea en app.js): en desktop
   .short-actions ahora vive afuera de la tarjeta de video y, segun el
   ancho de ventana, su columna puede terminar cerca del borde derecho de
   la pantalla, chocando con este boton fijo (se superponia con
   "Compartir"). En mobile ya era redundante con el "+" del bottom-nav. Se
   deja el boton en el DOM (createShort.js lo sigue enganchando) solo
   oculto, para no tocar esa logica. */
.short-fab{
  display:none;position:fixed;right:26px;bottom:30px;z-index:120;width:60px;height:60px;border-radius:50%;
  background:var(--accent-grad);border:none;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(47,123,214,.4), 0 2px 8px rgba(0,0,0,.25);
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;
}
.short-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 28px rgba(47,123,214,.5), 0 3px 10px rgba(0,0,0,.3);}
.short-fab:active{transform:scale(.96);}
.short-fab svg{width:26px;height:26px;fill:#fff;}

/* En mobile la barra inferior fija (bottom-nav, ver ensureBottomNav en
   app.js) trae su propio boton "+" tipo TikTok que dispara el mismo flujo
   de creacion (evento "todayworld:create-short"). El feed se achica en
   altura para dejarle lugar a esa barra fija abajo -en vez de que flote
   encima del video, como pasaba antes-, igual que el feed de TikTok
   termina antes de su tab bar. */
@media (max-width:900px){
  .shorts-wrap{
    height:calc(100vh - var(--header-h) - var(--bottomnav-h) - env(safe-area-inset-bottom));
    height:calc(100dvh - var(--header-h) - var(--bottomnav-h) - env(safe-area-inset-bottom));
  }
  .short-item{
    height:calc(100vh - var(--header-h) - var(--bottomnav-h) - env(safe-area-inset-bottom));
    height:calc(100dvh - var(--header-h) - var(--bottomnav-h) - env(safe-area-inset-bottom));
  }
  /* En mobile no hay lugar al costado del video para una columna aparte:
     las acciones vuelven a superponerse sobre la esquina inferior derecha
     de la tarjeta, como en TikTok/Reels. .short-item ya es position:relative
     y, al no entrar en la fila flex (position:absolute la saca del flujo),
     el "gap" de .short-item no le afecta. */
  .short-actions{
    position:absolute;right:6px;bottom:20px;align-self:auto;margin-bottom:0;
  }
  .short-bottom{right:74px;}
  .short-action-btn{background:rgba(0,0,0,.32);border:none;color:#fff;}
  .short-action-btn:hover{background:rgba(0,0,0,.5);}
}

/* Celular en horizontal: pantalla completa para el Short, sin header/rail/
   bottom-nav -antes se veia el layout de escritorio (rail con texto, campo
   de busqueda inline) porque en landscape el ANCHO de telefonos grandes
   supera los 900px del breakpoint de arriba-. Por eso aca se detecta por
   ALTO de viewport chico (max-height:500px), no por ancho: un telefono
   rotado tiene poca altura sin importar cuanto ancho gane, mientras que una
   ventana de escritorio angosta casi nunca baja de esa altura. Solo aplica
   en shorts.html (".shorts-page" en <body>): en el resto de las paginas
   -mensajes, perfil, etc- ocultar toda la navegacion no tiene sentido. */
@media (orientation:landscape) and (max-height:500px){
  /* "Cine oscuro": redefine los tokens de color de TODA la pagina (no solo
     el fondo) mientras dura el modo horizontal, sin importar si el sitio
     esta en tema claro u oscuro -un reproductor de video de pantalla
     completa siempre va sobre negro, como YouTube/Netflix/TikTok-. Como el
     panel de comentarios, sus botones y los circulos de accion (me gusta/
     comentar/guardar) ya estan construidos enteramente con var(--bg-elevated)/
     var(--border)/var(--text)/etc (ver .modal, .short-action-btn, .comment-*),
     redefinir esas variables aca alcanza para que TODO se vea coherente en
     oscuro sin tener que reescribir cada componente por separado. */
  body.shorts-page{
    --header-h:0px;
    --bg:#000;
    --bg-elevated:#14181c;
    --bg-hover:#1e2429;
    --text:#f2f4f5;
    --text-dim:#a8aeb4;
    --text-faint:#787f86;
    --border:rgba(255,255,255,.14);
  }
  body.shorts-page header.topbar,
  body.shorts-page nav.rail,
  body.shorts-page .bottom-nav,
  body.shorts-page .short-fab{display:none !important;}
  body.shorts-page .shell{padding-top:0;}
  body.shorts-page .shorts-wrap{height:100vh;height:100dvh;}
  body.shorts-page .short-item{height:100vh;height:100dvh;padding:0;}
  body.shorts-page .short-stage{max-height:100vh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;}
  /* El panel de comentarios pasa de tarjeta solida a "vidrio esmerilado"
     sobre el video, en vez de una card opaca clavada al costado: encaja con
     la idea de pantalla completa inmersiva en vez de sentirse una ventana
     de escritorio aparte. Mantiene el "left" dinamico que calcula
     positionCommentsPanel() en JS (arranca justo despues de la columna de
     botones, para no taparlos) pero AGREGA "right:16px" y saca el "width"
     fijo -asi el ancho lo termina de definir el propio navegador entre esos
     dos bordes (left...right), dejando margen real contra el borde derecho
     en vez del ancho fijo de 380px que antes se pasaba de largo ahi. */
  body.shorts-page .short-comments-modal{
    top:16px;bottom:16px;right:16px;
    width:auto;max-width:380px;
    background:rgba(20,24,28,.78);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  }
}

/* ---------- Comentarios de un Short: modal compartido, se vuelve una
   "bandeja" que sube desde abajo en pantallas angostas (como en apps de
   video corto), dialogo centrado en tablet, y panel acoplado al costado
   del video en desktop (ver @media min-width:901px mas abajo). ---------- */
.short-comments-modal{
  display:flex;flex-direction:column;padding:0;width:420px;max-height:70vh;overflow:hidden;
}
.short-comments-handle{display:none;}
.short-comments-header{
  display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.short-comments-header h2{margin:0;font-size:15.5px;}
.short-comments-count{color:var(--text-dim);font-weight:400;font-size:13.5px;margin-left:4px;}
.short-comments-list{overflow-y:auto;flex:1;padding:8px 18px;}
.short-comments-loading, .comments-empty{color:var(--text-dim);font-size:13px;text-align:center;padding:30px 0;}
.short-comment-form{
  flex-shrink:0;margin:0;padding:12px 18px;border-top:1px solid var(--border);
  background:var(--bg-elevated);
}
/* Una fila de comentario (usada tanto en este panel de Shorts como en
   cualquier otro lugar del sitio que liste comentarios): avatar + autor +
   texto. Antes no tenia NINGUN estilo propio -se veia con la tipografia
   por defecto del navegador, sin alinear-, asi que esto tambien mejora los
   comentarios fuera de este panel, no solo el modo desktop. */
.comment-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);}
.comment-item:last-child{border-bottom:none;}
.comment-avatar{
  width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--accent-grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex-shrink:0;
}
.comment-avatar img{width:100%;height:100%;object-fit:cover;}
.comment-body-wrap{flex:1;min-width:0;}
.comment-author{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:700;margin-bottom:2px;}
.comment-author .time{font-weight:400;font-size:11.5px;color:var(--text-faint);}
.comment-text{font-size:13.5px;line-height:1.45;color:var(--text);word-break:break-word;white-space:pre-wrap;}
/* "Responder" (estilo WhatsApp): cita el comentario en el thread-context-bar
   de arriba del campo de texto (mismas clases que ya usa el chat directo en
   messages.html) y manda reply_to_id al publicar. La cita que se ve DENTRO
   de un comentario que responde a otro reusa .msg-quote (ver seccion de
   Mensajes): mismo look, un borde de color solido a la izquierda no hacia
   falta reinventarlo. */
.comment-footer{display:flex;align-items:center;gap:16px;margin-top:6px;}
.comment-reply-btn{
  background:none;border:none;padding:0;font-size:12px;font-weight:700;
  color:var(--text-dim);cursor:pointer;
}
.comment-reply-btn:hover{color:var(--text);}
.comment-body-wrap .msg-quote{background:var(--bg);color:var(--text-dim);}
/* Corazon / pulgar arriba / pulgar abajo por comentario: excluyentes entre
   si (ver POST /api/videos/comments/:commentId/react), asi que solo uno de
   los tres puede estar "active" a la vez para un mismo comentario. El
   pulgar-abajo reusa el mismo path SVG del pulgar-arriba, solo espejado
   verticalmente (scaleY(-1)) -no hace falta un segundo dibujo-. */
.comment-reactions{display:flex;align-items:center;gap:14px;}
.comment-react-btn{
  position:relative;display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:0;
  font-size:11.5px;font-weight:700;color:var(--text-faint);cursor:pointer;
}
.comment-react-btn:hover{color:var(--text-dim);}
.comment-react-btn svg{width:15px;height:15px;fill:currentColor;flex-shrink:0;}
.comment-react-down svg{transform:scaleY(-1);}
.comment-react-btn[data-type="heart"].active{color:var(--danger);}
.comment-react-btn[data-type="up"].active{color:var(--accent-teal);}
.comment-react-btn[data-type="down"].active{color:var(--accent-blue);}
.comment-react-btn.pop-anim{animation:commentReactPop .28s ease;}
@keyframes commentReactPop{0%{transform:scale(1);}50%{transform:scale(1.3);}100%{transform:scale(1);}}
.comment-react-btn .float-mini{
  position:absolute;left:50%;top:-2px;width:12px;height:12px;pointer-events:none;
  transform:translate(-50%,-2px) scale(.6);opacity:0;
}
.comment-react-btn .float-mini svg{width:100%;height:100%;}
.comment-react-btn .float-mini.fly{animation:commentFloatMini .7s ease-out forwards;}
@keyframes commentFloatMini{
  0%{opacity:0;transform:translate(-50%,-2px) scale(.5);}
  15%{opacity:1;transform:translate(-50%,-8px) scale(1);}
  100%{opacity:0;transform:translate(-50%,-30px) scale(.8);}
}
/* Fila para escribir/publicar un comentario: avatar + input + boton.
   Compartida por .short-comment-form (el panel de Shorts) y cualquier otro
   formulario de comentarios que use estas mismas clases genericas. */
.comment-form{display:flex;align-items:center;gap:10px;}
.comment-form input{
  flex:1;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:20px;
  padding:9px 14px;color:var(--text);font-size:13.5px;outline:none;
}
.comment-form input:focus{border-color:var(--accent-teal);}
.comment-form button{
  flex-shrink:0;background:var(--accent-grad);color:#04211d;font-weight:700;font-size:13px;border:none;
  border-radius:20px;padding:8px 16px;cursor:pointer;
}
.comment-form button:hover:not(:disabled){filter:brightness(1.08);}
.comment-form button:disabled{opacity:.5;cursor:default;}
/* Boton de emoticones "adentro" del input (a la derecha) + su panel, que se
   abre HACIA ARRIBA (bottom:100%) porque el campo de comentar esta pegado
   al fondo del panel -abrir hacia abajo lo mandaria fuera de pantalla-. */
.comment-input-wrap{flex:1;min-width:0;position:relative;display:flex;align-items:center;}
.comment-input-wrap input{padding-right:34px;}
.comment-emoji-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:17px;
  line-height:1;cursor:pointer;padding:2px;
}
.comment-emoji-picker{
  position:absolute;bottom:calc(100% + 8px);left:0;right:0;max-height:170px;overflow-y:auto;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:8px;
  display:grid;grid-template-columns:repeat(8,1fr);gap:2px;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:2;
}
.comment-emoji-picker button{
  background:none;border:none;font-size:19px;line-height:1;padding:6px 0;border-radius:6px;cursor:pointer;
}
.comment-emoji-picker button:hover{background:var(--bg-hover);}
@media (max-width:640px){
  .short-comments-backdrop{align-items:flex-end;}
  .short-comments-modal{
    width:100%;max-width:100%;max-height:82dvh;border-radius:18px 18px 0 0;
    transform:translateY(100%);transition:transform .22s ease;
  }
  .short-comments-backdrop.show .short-comments-modal{transform:translateY(0);}
  .short-comments-handle{
    display:block;width:36px;height:4px;border-radius:3px;background:var(--border);
    margin:10px auto 0;flex-shrink:0;
  }
  .short-comment-form{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
}
/* Desktop: en vez de un dialogo centrado que tapa el video, el panel se
   acopla al costado del video -sin oscurecer el resto de la pantalla (el
   "backdrop" queda transparente y sin pointer-events, asi que se puede
   seguir interactuando con el video mientras el panel esta abierto)-. Se
   despliega con una transicion de aparicion + deslizamiento leve.
   .short-comments-modal se posiciona con position:fixed y left calculado
   en JS (positionCommentsPanel en shorts.html, guardado en la variable
   --comments-panel-left), pegado al borde derecho del video+rail de
   acciones -NO al borde derecho de la ventana-: en pantallas muy anchas
   (ej. un TV conectado a una compu) el video queda centrado lejos del
   borde real, y anclar el panel ahi dejaba un hueco enorme en el medio. El
   valor de respaldo (sin JS, o antes del primer calculo) al menos lo dej
   dentro de la pantalla en vez de fuera. */
@media (min-width:901px){
  .short-comments-backdrop{background:transparent;pointer-events:none;}
  .short-comments-modal{
    position:fixed;top:calc(var(--header-h) + 20px);bottom:20px;
    left:var(--comments-panel-left, calc(100% - 400px));
    pointer-events:auto;width:380px;max-width:calc(100% - 40px);max-height:none;min-height:0;
    border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.4);
    transform:translateX(24px);opacity:0;transition:transform .2s ease, opacity .2s ease, left .2s ease;
  }
  .short-comments-backdrop.show .short-comments-modal{transform:translateX(0);opacity:1;}
}

/* ---------- Elegir como crear un Short: grabar en vivo o subir archivo ---------- */
.record-choice-modal{width:360px;}
.record-choice-modal h2{margin-bottom:16px;}
.record-choice-btn{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--bg-hover);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease;
  font-family:inherit;
}
.record-choice-btn:hover{background:var(--bg-elevated);border-color:var(--accent-blue);}
.record-choice-btn:active{transform:scale(.98);}
.record-choice-icon{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--accent-grad);
  display:flex;align-items:center;justify-content:center;
}
.record-choice-btn svg{width:22px;height:22px;flex-shrink:0;fill:#fff;}
.record-choice-btn .txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.record-choice-btn strong{font-size:14.5px;color:var(--text);line-height:1.3;}
.record-choice-btn small{font-size:12.5px;color:var(--text-dim);line-height:1.35;white-space:normal;}
.record-choice-modal > .btn-ghost{width:100%;margin-top:2px;}

/* ---------- Grabar un Short (camara del navegador) ---------- */
.record-backdrop{
  position:fixed;inset:0;background:#000;z-index:400;display:none;flex-direction:column;align-items:center;justify-content:center;
  overscroll-behavior:none;
}
.record-backdrop.open{display:flex;}
/* Evita que el scroll/gestos de la pagina de atras disparen el
   mostrar/ocultar de la barra de direcciones del navegador mientras el
   modal de camara esta abierto (ver body.record-lock, seteado por JS). */
body.record-lock{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;}
/* min-content-friendly: 100dvh sigue el viewport visual real (con o sin
   barra de direcciones visible). El viejo 100vh queda como fallback para
   navegadores sin soporte de dvh; no se mezclan ambos en el mismo calc()
   porque ese desacople (100% del backdrop, que SI seguia el viewport
   dinamico, contra un 100vh estatico) era la causa del "zoom"/salto de
   encuadre al tocar grabar: el navegador ocultaba la barra de direcciones,
   la altura real crecia, pero el ancho calculado con 100vh se quedaba fijo. */
.record-stage{position:relative;height:100%;width:min(100%, calc(100vh * 9 / 16));width:min(100%, calc(100dvh * 9 / 16));background:#050505;overflow:hidden;}
/* Mientras se graba, el cuadro tiene exactamente la forma del Short (9:16,
   ver OUT_W/OUT_H en shorts.html): lo que se ve es lo que se graba. Con
   height:100% en pantallas mas alargadas que 9:16 (iPhone y la mayoria de
   los celulares) el cover recortaba ademas los costados: se veia con zoom. */
.record-stage:not(.trim-stage){height:auto;aspect-ratio:9 / 16;max-height:100%;}
.record-stage video, .record-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
.record-stage video.mirrored{transform:scaleX(-1);}
.record-close-btn{
  position:absolute;top:calc(14px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));z-index:6;
  width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);border:none;display:flex;align-items:center;justify-content:center;
}
.record-close-btn svg{width:19px;height:19px;fill:#fff;}
.record-grid{position:absolute;inset:0;z-index:5;pointer-events:none;}
.record-grid::before, .record-grid::after{content:"";position:absolute;background:rgba(255,255,255,.35);}
.record-grid::before{left:33.333%;top:0;bottom:0;width:1px;box-shadow:33.333% 0 0 rgba(255,255,255,.35);}
.record-grid::after{top:33.333%;left:0;right:0;height:1px;box-shadow:0 33.333% 0 rgba(255,255,255,.35);}
.record-grid[hidden]{display:none;}
.record-tools{
  position:absolute;top:calc(60px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));z-index:6;
  display:flex;flex-direction:column;gap:16px;align-items:center;
}
.record-tool-btn{
  width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);border:none;display:flex;align-items:center;
  justify-content:center;position:relative;
}
.record-tool-btn svg{width:19px;height:19px;fill:#fff;}
.record-tool-btn.active{background:var(--gold);}
.record-tool-btn.active svg{fill:#101010;}
.record-tool-btn:disabled{opacity:.35;}
.record-tool-btn[hidden]{display:none;}
.record-tool-label{
  position:absolute;bottom:-2px;right:-2px;background:var(--gold);color:#101010;font-size:9.5px;font-weight:800;
  border-radius:8px;padding:1px 4px;line-height:1.3;
}
.record-tool-label[hidden]{display:none;}
.record-countdown{
  position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;
  font-size:96px;font-weight:800;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6);pointer-events:none;
}
.record-countdown[hidden]{display:none;}
.record-timer{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:6;background:rgba(0,0,0,.55);
  color:#fff;font-size:13px;font-weight:700;padding:5px 12px;border-radius:14px;display:flex;align-items:center;gap:6px;
}
.record-timer .dot{width:8px;height:8px;border-radius:50%;background:var(--danger);}
.record-timer[hidden]{display:none;}
.record-filters-strip{
  position:absolute;left:0;right:0;bottom:calc(122px + env(safe-area-inset-bottom));z-index:6;
  display:flex;gap:10px;overflow-x:auto;padding:4px 16px;-webkit-overflow-scrolling:touch;
}
.record-filters-strip[hidden]{display:none;}
.record-filter-swatch{
  flex-shrink:0;padding:6px 14px;border-radius:14px;background:rgba(0,0,0,.55);color:#fff;font-size:12.5px;font-weight:600;border:1px solid transparent;
}
.record-filter-swatch.active{background:var(--gold);color:#101010;border-color:var(--gold);}
.record-bottom-panel{
  position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding-bottom:calc(26px + env(safe-area-inset-bottom));
}
.record-duration{display:flex;gap:10px;}
.record-duration-btn{
  padding:5px 14px;border-radius:14px;background:rgba(0,0,0,.5);color:#fff;font-size:12.5px;font-weight:700;border:1px solid transparent;
}
.record-duration-btn.active{background:#fff;color:#101010;}
.record-controls{
  display:flex;align-items:center;justify-content:center;
}
.record-btn{width:74px;height:74px;border-radius:50%;border:4px solid #fff;background:transparent;display:flex;align-items:center;justify-content:center;}
.record-btn .inner{width:56px;height:56px;border-radius:50%;background:var(--danger);transition:border-radius .15s,width .15s,height .15s;}
.record-btn.recording .inner{width:28px;height:28px;border-radius:8px;}
.record-btn:disabled{opacity:.4;}
.record-status{position:absolute;bottom:172px;left:0;right:0;text-align:center;color:#fff;font-size:12.5px;z-index:6;padding:0 24px;}
.record-error{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:#fff;text-align:center;padding:24px;z-index:7;background:rgba(0,0,0,.75);
}
.record-error[hidden]{display:none;}
/* Mismo problema que en el panel de vista previa: este fondo siempre es
   oscuro, asi que el boton (.btn-ghost) no puede depender del tema. */
.record-error .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);}
.record-error .btn-ghost:hover{background:rgba(255,255,255,.14);}
.record-preview-panel{
  position:absolute;left:0;right:0;bottom:0;z-index:6;background:rgba(10,10,10,.94);
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));
}
.record-preview-panel[hidden]{display:none;}
.record-preview-panel textarea{
  width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;
  padding:10px 12px;font-size:14px;font-family:inherit;resize:none;min-height:56px;outline:none;
}
.record-preview-panel textarea + textarea{margin-top:8px;min-height:44px;}
/* Musica del Short (vista previa): boton y panel para elegir la parte y los volumenes. */
.record-music-btn{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;margin-bottom:10px;padding:7px 13px;border-radius:18px;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.record-music-btn svg{width:16px;height:16px;fill:currentColor;flex-shrink:0;}
.record-music-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.record-music-btn.on{border-color:var(--gold);color:var(--gold);background:rgba(242,184,75,.12);}
.record-music-sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:7;display:flex;flex-direction:column;gap:12px;color:#fff;
  background:rgba(10,10,10,.96);border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
}
.record-music-sheet[hidden]{display:none;}
.rms-head{display:flex;align-items:center;gap:10px;}
.rms-icon{width:38px;height:38px;border-radius:10px;background:var(--gold);color:#1a1204;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rms-icon svg{width:20px;height:20px;fill:currentColor;}
.rms-title{flex:1;min-width:0;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rms-change{background:none;border:none;padding:6px 0;color:var(--accent-teal);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.rms-label{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:rgba(255,255,255,.7);}
.rms-track{
  position:relative;height:46px;border-radius:8px;touch-action:none;cursor:pointer;overflow:hidden;background-color:rgba(255,255,255,.06);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 2px,transparent 2px 6px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 2px,transparent 2px 6px);
  background-size:100% 55%,100% 30%;background-position:0 50%,3px 50%;background-repeat:no-repeat;
}
.rms-window{position:absolute;top:0;bottom:0;border:2px solid var(--gold);border-radius:8px;background:rgba(242,184,75,.22);pointer-events:none;}
.rms-vol{display:flex;align-items:center;gap:12px;font-size:13px;}
.rms-vol span{width:64px;flex-shrink:0;}
.rms-vol input{flex:1;accent-color:var(--gold);}
.rms-actions{display:flex;gap:10px;}
.rms-actions button{flex:1;}
.rms-actions .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);}
.record-download-toggle{display:flex;align-items:center;gap:8px;margin-top:10px;color:rgba(255,255,255,.85);font-size:13px;cursor:pointer;}
.record-download-toggle input{width:17px;height:17px;flex-shrink:0;accent-color:var(--gold);}
.record-preview-actions{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px;}
.record-preview-status{font-size:12.5px;color:#fff;min-height:16px;}
/* Este panel siempre es oscuro (fondo casi negro), sin importar si el
   celular esta en modo claro u oscuro. El boton "Grabar de nuevo" usa la
   clase generica .btn-ghost, que en modo claro pinta el texto oscuro sobre
   oscuro: quedaba un boton negro sin letras visibles. Se fuerza claro aca. */
.record-preview-actions .btn-ghost{
  color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);flex-shrink:0;
}
.record-preview-actions .btn-ghost:hover{background:rgba(255,255,255,.14);}
.record-preview-actions .btn-ghost:disabled{opacity:.5;}

/* ---------- Recortar un video subido (elegir hasta 60s) ---------- */
.record-stage.trim-stage{display:flex;flex-direction:column;}
.record-stage.trim-stage video{
  position:static;flex:1;min-height:0;width:100%;height:auto;object-fit:contain;background:#000;
}
.trim-sound-btn{
  position:absolute;top:calc(22px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));z-index:6;
  height:38px;min-width:38px;padding:0 14px 0 11px;border-radius:19px;background:rgba(0,0,0,.55);border:none;
  display:flex;align-items:center;justify-content:center;gap:6px;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;
}
.trim-sound-btn.on{padding:0;}
.trim-sound-btn svg{width:20px;height:20px;fill:#fff;flex-shrink:0;}
.trim-panel{
  flex-shrink:0;background:rgba(10,10,10,.96);padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px;
}
.trim-label{color:#fff;font-size:13.5px;font-weight:700;text-align:center;}
/* Recortador estilo "tira de fotogramas" (como el de WhatsApp/Instagram):
   una franja de miniaturas del video de fondo, la parte fuera del tramo
   elegido se oscurece, y el tramo elegido queda enmarcado con un borde
   claro y dos manijas para ajustar cada extremo. */
.trim-track{
  position:relative;height:56px;border-radius:8px;margin:2px 0;touch-action:none;
  overflow:hidden;background:#111;
}
/* La tira mide lo que dura el video (60s por ancho) y se desliza con translateX. */
.trim-filmstrip{position:absolute;top:0;bottom:0;left:0;width:100%;display:flex;will-change:transform;}
.trim-frame-thumb{flex:1 1 0;min-width:0;height:100%;background:#1a1a1a center / cover no-repeat;}
.trim-track:not(.trim-loading){cursor:grab;}
.trim-track.dragging{cursor:grabbing;}
.trim-mask{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.62);z-index:1;pointer-events:none;}
.trim-mask-left{left:0;}
.trim-mask-right{right:0;}
.trim-window{
  position:absolute;top:0;bottom:0;background:transparent;
  border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);
  box-shadow:0 0 0 1px rgba(0,0,0,.35);cursor:grab;z-index:2;
}
.trim-handle{
  position:absolute;top:-2px;bottom:-2px;width:22px;margin-left:-11px;
  background:var(--gold);border-radius:7px;cursor:ew-resize;touch-action:none;
  display:flex;align-items:center;justify-content:center;z-index:3;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.trim-handle::after{content:"";width:3px;height:18px;background:rgba(0,0,0,.45);border-radius:2px;}
.trim-handle[hidden]{display:none;}
/* Por donde va la reproduccion dentro de la tira. */
.trim-playhead{
  position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#fff;border-radius:2px;
  box-shadow:0 0 4px rgba(0,0,0,.7);z-index:4;pointer-events:none;
}
.trim-playhead[hidden]{display:none;}
/* Las manijas van por dentro del tramo, asi en los extremos no se cortan. */
.trim-handle-start{margin-left:0;border-radius:7px 3px 3px 7px;}
.trim-handle-end{margin-left:-22px;border-radius:3px 7px 7px 3px;}
/* Video completo: el tramo elegido en dorado; tocar o arrastrar salta ahi. */
.trim-overview{position:relative;height:18px;touch-action:none;cursor:pointer;}
.trim-overview[hidden]{display:none;}
.trim-overview::before{content:"";position:absolute;left:0;right:0;top:7px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);}
.trim-overview-sel{position:absolute;top:5px;height:8px;min-width:6px;border-radius:4px;background:var(--gold);pointer-events:none;}
.trim-hint{color:rgba(255,255,255,.6);font-size:11.5px;text-align:center;line-height:1.4;}
.trim-confirm-btn{width:100%;padding:12px;font-size:14.5px;}
/* Mientras se analiza la duracion del video en segundo plano (el editor ya
   esta abierto, sin importar cuanto tarde o pese el archivo) se muestra un
   pulso suave sobre la franja en vez de dejarla vacia y quieta. */
.trim-track.trim-loading{background:linear-gradient(90deg,#111,#1c1c1c,#111);background-size:200% 100%;animation:trimLoadingPulse 1.3s ease-in-out infinite;}
@keyframes trimLoadingPulse{0%{background-position:0% 0;}100%{background-position:200% 0;}}

/* ---------- CAMARA v2 (estilo Instagram/Reels) ----------
   Boton de grabar con aro de progreso, grabacion por tramos con barra
   segmentada arriba, galeria a la izquierda y girar camara a la derecha,
   gestos sobre la imagen (deslizar = filtro, doble toque = girar,
   pellizcar = zoom). Pisa algunas reglas de la seccion de arriba. */
.record-gesture-layer{position:absolute;inset:0;z-index:4;touch-action:none;}
.record-segments{
  position:absolute;top:calc(8px + env(safe-area-inset-top));left:12px;right:12px;z-index:7;height:4px;
  display:flex;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.25);pointer-events:none;
}
.record-seg{height:100%;background:#fff;flex-shrink:0;box-shadow:inset -2px 0 0 rgba(0,0,0,.55);}
.record-seg.live{background:var(--danger);box-shadow:none;}
.record-timer{top:calc(22px + env(safe-area-inset-top));}
.record-close-btn{top:calc(22px + env(safe-area-inset-top));}
.record-tools{top:calc(74px + env(safe-area-inset-top));transition:opacity .2s ease;}
.record-tools.dimmed{opacity:.25;pointer-events:none;}
.record-filter-name{
  position:absolute;left:0;right:0;top:38%;z-index:6;text-align:center;pointer-events:none;
  color:#fff;font-size:30px;font-weight:800;letter-spacing:.02em;text-shadow:0 2px 14px rgba(0,0,0,.55);opacity:0;
}
.record-filter-name.show{animation:recFilterName 1.1s ease forwards;}
@keyframes recFilterName{0%{opacity:0;transform:scale(.92);}15%{opacity:1;transform:scale(1);}70%{opacity:1;}100%{opacity:0;}}
.record-zoom-badge{
  position:absolute;left:50%;transform:translateX(-50%);bottom:calc(206px + env(safe-area-inset-bottom));z-index:7;
  background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:800;padding:4px 10px;border-radius:12px;pointer-events:none;
}
.record-status{bottom:calc(176px + env(safe-area-inset-bottom));text-shadow:0 1px 6px rgba(0,0,0,.7);pointer-events:none;}
.record-filters-strip{bottom:calc(206px + env(safe-area-inset-bottom));padding:4px 16px 6px;scrollbar-width:none;}
.record-filters-strip::-webkit-scrollbar{display:none;}
.record-filter-swatch{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 8px;border-radius:12px;background:rgba(0,0,0,.45);font-size:11.5px;}
.record-filter-dot{
  width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.7);
  background:linear-gradient(135deg,#f6a14b 0%,#e8506d 35%,#5a6bf0 70%,#35d0b8 100%);
}
.record-filter-swatch.active .record-filter-dot{border-color:#101010;}
.record-bottom-panel{gap:16px;padding-bottom:calc(22px + env(safe-area-inset-bottom));}
.record-duration-btn{padding:5px 12px;}
.record-controls{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:360px;padding:0 20px;
}
.record-side{display:flex;align-items:center;}
.record-side-left{justify-content:flex-start;}
.record-side-right{justify-content:flex-end;}
.record-round-btn{
  width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease, background .15s ease;
}
.record-round-btn svg{width:23px;height:23px;fill:#fff;}
.record-round-btn:active{transform:scale(.9);}
.record-round-btn:hover{background:rgba(255,255,255,.26);}
.record-done-btn{background:#fff;}
.record-done-btn svg{fill:#101010;}
.record-done-btn:hover{background:#e9e9e9;}
.record-btn{
  width:84px;height:84px;border:none;position:relative;background:transparent;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .18s ease;
}
.record-btn.holding, .record-btn.recording{transform:scale(1.12);}
.record-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;}
.record-ring circle{fill:none;stroke-width:6;}
.record-ring-track{stroke:rgba(255,255,255,.9);}
.record-ring-fill{stroke:var(--danger);stroke-linecap:round;stroke-dasharray:289.03;stroke-dashoffset:289.03;}
.record-btn.recording .record-ring-track, .record-btn.paused .record-ring-track{stroke:rgba(255,255,255,.35);}
.record-btn .inner{width:66px;height:66px;background:#fff;transition:all .18s ease;}
.record-btn.paused .inner{background:var(--danger);width:60px;height:60px;}
.record-btn.recording .inner{background:var(--danger);width:30px;height:30px;border-radius:9px;}
.record-btn:focus-visible{outline:3px solid var(--accent-teal);outline-offset:4px;border-radius:50%;}
@media (prefers-reduced-motion: reduce){
  .record-btn, .record-btn .inner, .record-round-btn{transition:none;}
  .record-filter-name.show{animation:none;opacity:1;}
}

/* ---------- AMIGOS ---------- */
.section-h{font-size:15px;font-weight:700;margin:24px 0 10px;}
.friend-search{display:flex;gap:10px;margin-bottom:8px;}
.friend-search input{
  flex:1;background:var(--bg-elevated);border:1px solid var(--border);border-radius:20px;
  padding:10px 16px;color:var(--text);font-size:14px;
}
.friend-list{display:flex;flex-direction:column;gap:2px;}
.friend-row{
  display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border);
}
.friend-row .av, .conv-row .av, .profile-header .av, .thread-header .av{
  width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--accent-grad);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex-shrink:0;
}
.friend-row .av img, .conv-row .av img, .profile-header .av img, .thread-header .av img{
  width:100%;height:100%;object-fit:cover;
}
.friend-row .who{flex:1;min-width:0;}
.friend-row .name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.friend-row .mail{font-size:12.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.friend-row .actions{display:flex;gap:8px;flex-shrink:0;}
.friend-tag{font-size:12.5px;color:var(--text-dim);padding:8px 4px;}

/* ---------- MENSAJES ---------- */
.messages-wrap{
  display:flex;height:calc(100vh - var(--header-h) - 40px);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.12);background:var(--bg);
}
.conv-list{width:340px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;padding:0 12px 16px;}
.conv-list .page-title{padding:16px 4px 10px;}
.conv-row{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 8px;border:none;background:transparent;
  text-align:left;border-radius:10px;transition:background .12s ease;
}
.conv-row:hover{background:var(--bg-hover);}
.conv-row .who{flex:1;min-width:0;}
.conv-row .name{font-size:14px;font-weight:600;}
.conv-row .preview{font-size:12.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conv-badge{
  position:static;margin:0;flex-shrink:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.conv-thread{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg);}
.thread-header{
  display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--bg-elevated);
}
.thread-header .av{width:36px;height:36px;font-size:12px;}
.thread-name{font-size:14.5px;font-weight:700;}
.thread-messages{flex:1;min-width:0;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;min-height:0;}
.msg-bubble{
  /* min-width:0 es necesario porque .msg-bubble es un item flex dentro de
     .thread-messages (flex-direction:column): sin esto, un mensaje de una
     sola palabra larga sin espacios (ej. "PRUEBA123456789...") ignoraba el
     max-width y desbordaba la burbuja mas alla del borde derecho de la
     pantalla en vez de partirse -el minimo automatico de un item flex se
     calcula por el contenido, no por max-width, salvo que se lo saque asi-. */
  min-width:0;max-width:min(70%,480px);padding:9px 14px;border-radius:16px;font-size:13.5px;line-height:1.4;
  word-break:break-word;cursor:pointer;position:relative;transition:filter .1s ease;
}
.msg-bubble:hover{filter:brightness(1.04);}
.msg-bubble.theirs{align-self:flex-start;background:var(--bg-elevated);border-bottom-left-radius:4px;}
.msg-bubble.mine{align-self:flex-end;background:var(--accent-grad);color:#fff;border-bottom-right-radius:4px;}
.msg-quote{
  display:flex;flex-direction:column;gap:1px;border-left:3px solid currentColor;opacity:.75;
  padding:3px 8px;margin-bottom:6px;border-radius:4px;background:rgba(0,0,0,.12);font-size:12px;
}
.msg-bubble.theirs .msg-quote{background:rgba(0,0,0,.05);}
.msg-quote-author{font-weight:700;}
.msg-quote-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msg-text{white-space:pre-wrap;}
.msg-meta{min-height:0;}
.msg-edited{font-size:10.5px;opacity:.7;font-style:italic;}
.msg-actions{
  display:none;gap:6px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.25);
}
.msg-bubble.theirs .msg-actions{border-top-color:var(--border);}
.msg-bubble.selected .msg-actions{display:flex;flex-wrap:wrap;}
.msg-actions button{
  background:rgba(255,255,255,.16);border:none;color:inherit;border-radius:10px;
  padding:3px 9px;font-size:11px;font-weight:600;cursor:pointer;
}
.msg-bubble.theirs .msg-actions button{background:var(--bg-hover);}
.msg-actions button:hover{filter:brightness(1.15);}
.thread-context-bar{
  display:flex;align-items:center;gap:10px;padding:8px 16px;border-top:1px solid var(--border);
  background:var(--bg-elevated);flex-shrink:0;
}
.thread-context-info{flex:1;min-width:0;border-left:3px solid var(--accent-teal);padding-left:8px;}
.thread-context-label{display:block;font-size:11.5px;font-weight:700;color:var(--accent-teal);}
.thread-context-preview{display:block;font-size:12.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.thread-form{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0;min-width:0;}
.thread-form input{
  flex:1;background:var(--bg-elevated);border:1px solid var(--border);border-radius:20px;
  padding:10px 16px;color:var(--text);font-size:14px;
}
@media (max-width:700px){
  .messages-wrap{height:calc(100vh - var(--header-h) - var(--bottomnav-h) - 20px);border:none;box-shadow:none;}
  .conv-list{width:100%;border-right:none;}
  /* z-index por encima de .bottom-nav (110): al abrir un chat se tapa la
     barra inferior con el propio panel del hilo (que ya trae su campo para
     escribir pegado abajo), igual que en apps de mensajeria mobile. */
  .conv-thread{position:fixed;inset:var(--header-h) 0 0 0;background:var(--bg);z-index:115;}
  .msg-bubble{max-width:82%;}
  .thread-form{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
}

/* ---------- MENSAJES v2: lista con hora/visto, separadores por dia,
   burbujas agrupadas, estado Enviado/Visto, "escribiendo...", envio
   optimista, links y tarjeta de Short, campo que crece con emojis ---------- */
.conv-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.conv-list-head .page-title{margin:4px 0 0;}
.conv-list-head .icon-btn svg{width:21px;height:21px;}
.conv-search{
  display:flex;align-items:center;gap:8px;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:20px;padding:0 12px;margin:6px 0 10px;
}
.conv-search svg{width:17px;height:17px;fill:var(--text-faint);flex-shrink:0;}
.conv-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:13.5px;padding:9px 0;font-family:inherit;}
/* Las filas son <button>: sin esto el nombre tomaba el color por defecto de
   los botones del navegador (negro) y en modo oscuro no se leia. */
.conv-row{color:var(--text);}
.conv-row.active{background:var(--bg-hover);}
.conv-top, .conv-bottom{display:flex;align-items:center;gap:8px;min-width:0;}
.conv-top .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conv-time{font-size:11.5px;color:var(--text-faint);flex-shrink:0;}
.conv-bottom .preview{flex:1;min-width:0;display:flex;align-items:center;gap:3px;}
.conv-row.unread .name{font-weight:800;}
.conv-row.unread .preview{color:var(--text);font-weight:600;}
.conv-row.unread .conv-time{color:var(--accent-teal);font-weight:700;}
.conv-check{width:15px;height:15px;fill:var(--text-faint);flex-shrink:0;}
.conv-check.read{fill:var(--accent-teal);}
.conv-no-results{color:var(--text-dim);font-size:13px;padding:18px 8px;text-align:center;}
.conv-empty-btn{margin-top:14px;}

.thread-who{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:inherit;text-decoration:none;}
.thread-who-txt{min-width:0;}
.thread-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.thread-status{font-size:11.5px;color:var(--accent-teal);min-height:0;line-height:1.2;}
.thread-status:empty{display:none;}
.thread-messages{gap:2px;}
.thread-loading{color:var(--text-dim);font-size:13px;text-align:center;margin:auto;}
.thread-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-dim);font-size:13px;text-align:center;}
.thread-empty .av{width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;margin-bottom:4px;}
.thread-empty .av img{width:100%;height:100%;object-fit:cover;}
.thread-empty strong{color:var(--text);font-size:15px;}

.msg-day{display:flex;justify-content:center;margin:14px 0 8px;}
.msg-day span{
  font-size:11.5px;font-weight:700;color:var(--text-dim);background:var(--bg-elevated);border:1px solid var(--border);
  padding:3px 10px;border-radius:10px;text-transform:capitalize;
}
.msg-bubble{margin-top:8px;}
.msg-bubble.grouped-prev{margin-top:2px;}
.msg-bubble.mine.grouped-prev{border-top-right-radius:6px;}
.msg-bubble.theirs.grouped-prev{border-top-left-radius:6px;}
.msg-bubble.mine.grouped-next{border-bottom-right-radius:6px;}
.msg-bubble.theirs.grouped-next{border-bottom-left-radius:6px;}
.msg-bubble.mine:not(.grouped-next){border-bottom-right-radius:4px;}
.msg-bubble.theirs:not(.grouped-next){border-bottom-left-radius:4px;}
.msg-bubble.pending{opacity:.65;}
.msg-bubble.failed{opacity:.8;box-shadow:0 0 0 2px var(--danger);}
.msg-text a{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all;}
.msg-meta{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:2px;margin-bottom:-2px;}
.msg-time{font-size:10.5px;opacity:.65;}
.msg-bubble.mine .msg-time{opacity:.8;}
.msg-status-row{font-size:11px;color:var(--text-faint);margin-top:3px;}
.msg-status-row.mine{align-self:flex-end;}
.msg-status-row.theirs{align-self:flex-start;}
.msg-status.failed{background:none;border:none;color:var(--danger);font-size:11px;font-weight:700;padding:0;cursor:pointer;}
.msg-short-card{
  display:block;position:relative;width:150px;aspect-ratio:9/16;border-radius:10px;overflow:hidden;margin-bottom:6px;
  background:linear-gradient(135deg,#1b2530,#0c1116);
}
.msg-short-card img{width:100%;height:100%;object-fit:cover;display:block;}
.msg-short-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.msg-short-play svg{width:40px;height:40px;fill:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.msg-short-label{position:absolute;left:8px;bottom:6px;color:#fff;font-size:11.5px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6);}

.thread-typing{padding:0 16px 6px;flex-shrink:0;}
.typing-dots{display:inline-flex;gap:4px;background:var(--bg-elevated);padding:10px 14px;border-radius:16px;border-bottom-left-radius:4px;}
.typing-dots i{width:7px;height:7px;border-radius:50%;background:var(--text-dim);animation:typingDot 1.2s infinite ease-in-out;}
.typing-dots i:nth-child(2){animation-delay:.15s;}
.typing-dots i:nth-child(3){animation-delay:.3s;}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}
@media (prefers-reduced-motion: reduce){.typing-dots i{animation:none;}}

.thread-form{align-items:flex-end;}
.thread-input-wrap{
  flex:1;min-width:0;position:relative;display:flex;align-items:flex-end;gap:4px;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:22px;padding:4px 12px 4px 6px;
}
.thread-input-wrap:focus-within{border-color:var(--accent-teal);}
.thread-input-wrap textarea{
  flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;line-height:1.4;
  font-family:inherit;resize:none;padding:7px 0;max-height:140px;overflow-y:auto;
}
.thread-emoji-btn{background:none;border:none;font-size:20px;line-height:1;padding:6px;border-radius:50%;flex-shrink:0;}
.thread-emoji-btn:hover{background:var(--bg-hover);}
.thread-emoji-picker{
  position:absolute;bottom:calc(100% + 8px);left:0;z-index:20;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);width:min(320px,calc(100vw - 32px));
}
.thread-emoji-picker button{background:none;border:none;font-size:20px;padding:5px;border-radius:8px;}
.thread-emoji-picker button:hover{background:var(--bg-hover);}
.thread-send-btn{
  width:42px;height:42px;border-radius:50%;border:none;background:var(--accent-grad);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease, opacity .12s ease;
}
.thread-send-btn svg{width:20px;height:20px;fill:#fff;margin-left:2px;}
.thread-send-btn:disabled{opacity:.4;cursor:default;}
.thread-send-btn:not(:disabled):active{transform:scale(.92);}

.new-chat-modal{width:380px;}
.new-chat-list{max-height:min(50vh,360px);overflow-y:auto;margin-top:10px;}
.new-chat-list .conv-row .av{width:38px;height:38px;}

/* ---------- BUSCAR (grilla de videos, estilo Discover) ----------
   El campo de busqueda en si ya no vive aca -es .topbar-search-form, en el
   header, ver ensureTopbarSearch en app.js-, esto es solo la grilla de
   resultados. */
.search-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
.search-cell{
  position:relative;aspect-ratio:9/16;background:var(--bg-elevated);overflow:hidden;display:block;
  color:#fff;border-radius:4px;
}
.search-cell img{width:100%;height:100%;object-fit:cover;display:block;}
.search-cell::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.65), transparent 40%);pointer-events:none;
}
.search-cell-views{
  position:absolute;left:7px;bottom:7px;z-index:1;display:flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.search-cell-views svg{width:13px;height:13px;fill:#fff;}
@media (min-width:640px){
  .search-grid{grid-template-columns:repeat(5,1fr);gap:6px;}
  .search-cell{border-radius:10px;}
}

/* ---------- PERFIL (estilo Instagram: avatar + stats a la derecha, bio,
   acciones -Seguir/Mensaje o Editar perfil segun si es el propio-, y grilla
   de Shorts abajo reusando .search-grid/.search-cell de la busqueda) ---------- */
.profile-header{display:flex;gap:22px;align-items:flex-start;padding:20px 4px 0;margin-bottom:14px;}
.profile-avatar-wrap{position:relative;flex-shrink:0;}
.profile-header .av{width:86px;height:86px;font-size:26px;}
.profile-avatar-edit-btn{
  position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;
  background:var(--accent-grad);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.profile-avatar-edit-btn svg{width:16px;height:16px;fill:#04211d;}
.profile-avatar-edit-btn:hover{filter:brightness(1.08);}
.profile-avatar-edit-btn:disabled{opacity:.6;cursor:default;}
.profile-header-main{flex:1;min-width:0;padding-top:4px;}
.profile-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.profile-name-row h1{font-size:19px;font-weight:700;margin:0;}
.profile-stats{display:flex;gap:26px;}
.profile-stat{display:flex;flex-direction:column;}
.profile-stat .n{font-size:16px;font-weight:700;}
.profile-stat .l{font-size:12px;color:var(--text-dim);}
.profile-bio{font-size:13.5px;line-height:1.5;color:var(--text);white-space:pre-wrap;max-width:480px;margin:0 0 16px;padding:0 4px;}
.profile-actions-row{display:flex;gap:8px;align-items:center;margin:0 4px 16px;max-width:480px;}
.profile-actions-row .btn-ghost, .profile-actions-row .btn-primary{flex:1;text-align:center;justify-content:center;font-size:13.5px;padding:9px 14px;}
.profile-edit-form{display:flex;flex-direction:column;gap:8px;max-width:420px;margin:0 4px 18px;}
.profile-edit-form input, .profile-edit-form textarea{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;
  padding:9px 12px;color:var(--text);font-size:13.5px;font-family:inherit;resize:vertical;outline:none;
}
.profile-edit-form input:focus, .profile-edit-form textarea:focus{border-color:var(--accent-teal);}
.profile-edit-form .actions{display:flex;justify-content:flex-end;}
/* Opciones de la cuenta dentro del perfil propio (ver "Configuracion" en
   profile.html): el mismo contenido del menu del avatar, pero en linea. */
.account-menu.account-inline{
  position:static;display:flex;width:auto;margin:0 4px 20px;box-shadow:none;z-index:auto;
}
.account-menu.account-inline[hidden]{display:none;}
.account-menu.account-inline .item{padding:12px 16px;font-size:14px;}
.profile-settings-btn{display:inline-flex;align-items:center;gap:6px;}
.profile-settings-btn svg{width:18px;height:18px;fill:currentColor;}
.profile-grid-title{
  display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-dim);padding:0 4px;margin-bottom:10px;
}
.profile-grid-title svg{width:16px;height:16px;fill:var(--text-dim);}
@media (max-width:520px){
  .profile-header{gap:16px;}
  .profile-header .av{width:66px;height:66px;font-size:20px;}
  .profile-stats{gap:18px;}
}

/* ---------- USUARIOS (directorio) ---------- */
.user-directory{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;
}
.user-card{
  display:flex;gap:12px;padding:16px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-elevated);
}
.user-card .av{
  width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--accent-grad);
  display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0;
  text-decoration:none;
}
.user-card .av img{width:100%;height:100%;object-fit:cover;}
.user-card-body{flex:1;min-width:0;}
.user-card-name{
  font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  color:var(--text);text-decoration:none;
}
.user-card-name:hover{text-decoration:underline;}
.user-card-mail{font-size:12.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-card-stats{font-size:12px;color:var(--text-dim);margin-top:4px;}
.user-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.user-card-admin{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);}
.user-tag{
  font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:.3px;
}
.user-tag.admin{background:rgba(242,193,78,.18);color:var(--gold);}
.user-tag.banned{background:rgba(240,65,65,.16);color:var(--danger);}
.btn-ghost.subscribed-tag{color:var(--accent-teal);border-color:var(--accent-teal);}
.btn-ghost.danger-text{color:var(--danger);border-color:var(--danger);}

/* ---------- COMPARTIR (modal de un Short) ---------- */
/* Panel estilo TikTok: tarjeta centrada en la computadora, hoja que sube
   desde abajo en el celular. */
.share-backdrop{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.share-sheet{
  position:relative;width:420px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);overflow-y:auto;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:18px;padding:18px 18px 20px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.share-grab{display:none;}
/* Lista de quienes dieron Me gusta (ver openLikesSheet en shorts.html). */
.likes-list{display:flex;flex-direction:column;max-height:60vh;overflow-y:auto;margin:0 -6px;}
.likes-row{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:10px;color:var(--text);text-decoration:none;}
.likes-row:hover{background:var(--bg-hover);}
.likes-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg-hover);font-weight:700;font-size:15px;overflow:hidden;}
.likes-av img{width:100%;height:100%;object-fit:cover;}
.likes-name{flex:1;min-width:0;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.likes-name small{font-weight:400;color:var(--text-dim);}
.likes-when{font-size:12px;color:var(--text-dim);white-space:nowrap;}
.likes-empty{color:var(--text-dim);font-size:13px;padding:14px 0;text-align:center;}
.share-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.share-head h2{margin:0;font-size:17px;font-weight:700;}
.share-close{
  width:34px;height:34px;border-radius:50%;border:none;background:var(--bg-hover);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.share-close svg{width:18px;height:18px;fill:currentColor;}
.share-preview{
  display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;background:var(--bg);
  border:1px solid var(--border);margin-bottom:16px;
}
.share-thumb{
  width:46px;height:64px;border-radius:8px;flex-shrink:0;background:#000 center / cover no-repeat;
}
.share-meta{min-width:0;}
.share-caption{
  font-size:13.5px;font-weight:600;line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.share-author{font-size:12px;color:var(--text-dim);margin-top:3px;}
.share-section-title{font-size:12px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;}
.share-friends{
  display:flex;gap:14px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px 6px;scrollbar-width:none;
}
.share-friends::-webkit-scrollbar{display:none;}
.share-friends-empty{color:var(--text-dim);font-size:13px;padding:10px 0 12px;width:100%;text-align:center;}
.share-friends-empty a{color:var(--accent-teal);}
.share-friend{
  flex:0 0 64px;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;
  padding:0;color:var(--text);cursor:pointer;
}
.share-friend .av{
  position:relative;width:54px;height:54px;border-radius:50%;background:var(--accent-grad);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;
  box-shadow:0 0 0 2px transparent;transition:box-shadow .15s ease;
}
.share-friend .av img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.share-friend .tick{
  position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--accent-teal);
  border:2px solid var(--bg-elevated);display:flex;align-items:center;justify-content:center;
  transform:scale(0);transition:transform .15s ease;
}
.share-friend .tick svg{width:13px;height:13px;fill:#04211d;}
.share-friend.selected .av{box-shadow:0 0 0 2px var(--accent-teal);}
.share-friend.selected .tick{transform:scale(1);}
.share-friend .name{
  font-size:11.5px;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.share-send{width:100%;margin:4px 0 10px;padding:11px 18px;}
.share-send[hidden]{display:none;}
.share-actions{
  display:flex;gap:6px;overflow-x:auto;padding:12px 0 2px;border-top:1px solid var(--border);scrollbar-width:none;
}
.share-actions::-webkit-scrollbar{display:none;}
.share-act{
  flex:1 0 68px;display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;
  padding:4px 0;color:var(--text);cursor:pointer;
}
.share-act[hidden]{display:none;}
.share-act-icon{
  width:50px;height:50px;border-radius:50%;background:var(--bg-hover);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease;
}
.share-act:active .share-act-icon{transform:scale(.92);}
.share-act-icon svg{width:23px;height:23px;fill:currentColor;}
.share-act-icon.wa{background:#25D366;border-color:#25D366;color:#fff;}
.share-act-icon.video{background:var(--accent-grad);border-color:transparent;color:#fff;}
.share-act-icon.dl{background:var(--gold);border-color:var(--gold);color:#1a1204;}
.share-act-label{font-size:11.5px;white-space:nowrap;}
.share-act[data-busy] .share-act-icon{animation:sharePulse 1s ease-in-out infinite;}
@keyframes sharePulse{50%{opacity:.5;}}
.share-owner-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px;
  border-radius:12px;background:var(--bg);border:1px solid var(--border);cursor:pointer;
}
.share-owner-row[hidden]{display:none;}
.share-owner-row strong{display:block;font-size:13.5px;}
.share-owner-row small{display:block;font-size:12px;color:var(--text-dim);margin-top:2px;}
/* Interruptor tipo iOS hecho con el mismo checkbox. */
.share-switch{
  appearance:none;-webkit-appearance:none;position:relative;flex-shrink:0;width:44px;height:26px;border-radius:13px;
  background:var(--border);cursor:pointer;transition:background .2s ease;margin:0;
}
.share-switch::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s ease;
}
.share-switch:checked{background:var(--accent-teal);}
.share-switch:checked::after{transform:translateX(18px);}
.share-switch:disabled{opacity:.6;}
.share-toast{
  position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 32px);padding:8px 14px;border-radius:18px;
  background:var(--text);color:var(--bg);font-size:12.5px;font-weight:600;text-align:center;
  opacity:0;transform:translate(-50%,6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.share-toast.show{opacity:1;transform:translate(-50%,0);}
@media (max-width:640px){
  .share-backdrop{align-items:flex-end;}
  .share-sheet{
    width:100%;max-width:100%;max-height:88vh;border-radius:20px 20px 0 0;border-bottom:none;
    padding:8px 16px calc(18px + env(safe-area-inset-bottom));animation:shareUp .22s ease-out;
  }
  .share-grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 10px;}
}
@keyframes shareUp{from{transform:translateY(100%);}to{transform:none;}}

/* ---------- AVISO PARA ACTIVAR NOTIFICACIONES PUSH ---------- */
.push-prompt{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:130;margin:0 auto;max-width:480px;
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 8px 28px rgba(0,0,0,.3);
  transform:translateY(130%);opacity:0;transition:transform .25s ease,opacity .25s ease;
}
.push-prompt.show{transform:translateY(0);opacity:1;}
.push-prompt svg{width:24px;height:24px;fill:var(--accent-teal);flex-shrink:0;}
.push-prompt span{flex:1;min-width:120px;font-size:13px;color:var(--text);}
.push-prompt .btn-gold{padding:8px 14px;font-size:12.5px;white-space:nowrap;flex-shrink:0;}
.push-prompt .icon-btn{width:30px;height:30px;flex-shrink:0;}
@media (max-width:900px){
  body.has-bottom-nav .push-prompt{bottom:calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom));}
}