/* ═══════════════════════════════════════════
   DSKflix - style.css
   /home/emby/pelis/static/style.css
═══════════════════════════════════════════ */

body { overscroll-behavior-y: contain; }
* { -webkit-tap-highlight-color: transparent; }
button, a { -webkit-tap-highlight-color: transparent; outline: none; }

/* ── Variables ── */
:root {
  --bg:        #0a0a0f;
  --bg2:       #13131a;
  --bg3:       #1c1c26;
  --border:    #2a2a38;
  --text:      #f0f0f5;
  --text2:     #9090a8;
  --accent:    #e50914;
  --accent2:   #ff4d57;
  --gold:      #f5c518;
  --green:     #22c55e;
  --red:       #ef4444;
  --blue:      #3b82f6;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow:    0 8px 32px rgba(0,0,0,.5);
  --font-title:'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-h:     60px;
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --safe-t:    env(safe-area-inset-top, 0px);
}
[data-theme="light"] {
  --bg:     #f4f4f8;
  --bg2:    #ffffff;
  --bg3:    #e8e8f0;
  --border: #d0d0e0;
  --text:   #0a0a1a;
  --text2:  #5a5a78;
  --shadow: 0 8px 32px rgba(0,0,0,.12);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { height:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body {
  font-family: var(--font-body);
  background:  var(--bg);
  color:       var(--text);
  min-height:  100%;
  overflow-x:  hidden;
  transition:  background .3s, color .3s;
}
a  { color:inherit; text-decoration:none }
button { cursor:pointer; font-family:var(--font-body) }
img { max-width:100%; display:block }
input, select, textarea { font-family:var(--font-body) }
::-webkit-scrollbar { width:4px; height:4px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px }

/* ── Layout ── */
#app { display:flex; flex-direction:column; min-height:100vh }
.page {
  display: none;
  flex: 1;
  padding: 16px 16px calc(var(--nav-h) + 16px + var(--safe-b));
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.page.active { display:block }

/* ══════════════════════════════════
   LOGIN
══════════════════════════════════ */
#login-screen {
  position: fixed; inset: 0;
  background: #000000;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  flex-direction: column;
  gap: 32px;
}
#login-screen.hidden { display:none }

/* Icono y rótulo son una sola unidad: el gap de #login-screen los separaría. */
.login-marca {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.login-icono {
width: clamp(192px, 52vw, 320px);
border-radius: var(--radius-lg);
margin-bottom: -20px;
margin-top: -40px;
}
.login-logo {
  font-family: var(--font-title);
  font-size: clamp(48px, 12vw, 80px);
  letter-spacing: 4px;
  color: var(--text);
  line-height: 1;
}
.login-logo span { color: var(--accent) }

.login-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: min(380px, 90vw);
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow);
}
.login-box h2 { font-size:18px; font-weight:500; color:var(--text2) }

.form-group { display:flex; flex-direction:column; gap:6px }
.form-group label { font-size:13px; color:var(--text2); font-weight:500 }
.form-input {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text);
  font-size: 16px;
  outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
  width: 100%;
}
.form-input:focus { border-color: var(--accent) }
/* "Mostrar la extensión" del diálogo de renombrar */
.ext-check {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text2);
  margin:0 2px 14px;
  cursor:pointer;
}
.ext-check input { width:16px; height:16px; accent-color:var(--accent) }

/* Caja de renombrar: el nombre entero a la vista, sin desplazarse a lo ancho. */
.form-area {
  font-family: inherit;
  line-height: 1.45;
  resize: vertical;
  min-height: 96px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.remember-row { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text2) }
.remember-row input { accent-color:var(--accent); width:16px; height:16px }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  transition: background .2s, transform .1s;
  width: 100%;
}
.btn-primary:active { transform:scale(.97) }
.btn-primary:hover  { background:var(--accent2) }

.login-error { color:var(--accent); font-size:13px; display:none; text-align:center }

/* ══════════════════════════════════
   TOP BAR
══════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
/* Las bibliotecas, en una sola línea que se arrastra de lado: envueltas ocupaban
   tres filas y se comían la pantalla antes de enseñar un solo póster. */
#pelis-tabs {
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
#pelis-tabs::-webkit-scrollbar { display:none }
#pelis-tabs > button { flex:none; white-space:nowrap }
/* Aviso de que la fila sigue: el halo del color del fondo separa la flecha del
   chip que asoma por debajo. Sólo se ve mientras quede algo a la derecha. */
.tabs-mas {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; border:none;
  background:var(--accent); color:#fff; font-size:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px var(--bg);
  cursor:pointer;
}
.tabs-menos { right:auto; left:0 }

.topbar-left { display:flex; align-items:center; gap:10px }
/* Redonda y a la altura del título: 1.35em sobre los 24px del logo. */
.avatar-btn {
  flex:none; width:32px; height:32px; padding:0;
  border-radius:50%; border:1px solid var(--border);
  background:var(--bg3) center/cover no-repeat;
  color:var(--text2); font-size:15px; font-weight:600; cursor:pointer;
}
/* El logo es una imagen. El jpg lleva mucho margen negro dentro, así que 40px de
   alto para que las letras midan como el texto que había antes; el redondeo es
   para el tema claro, donde el fondo negro del jpg se ve como una chapita. */
.topbar-logo { height:40px; width:auto; flex:none; border-radius:5px; cursor:pointer }
.topbar-right { display:flex; align-items:center; gap:8px }

.icon-btn {
  width:36px; height:36px;
  border-radius: 50%;
  border: none;
  background: var(--bg3);
  color: var(--text);
  display: flex; align-items:center; justify-content:center;
  font-size: 15px;
  transition: background .2s;
  flex-shrink: 0;
}
.icon-btn:hover { background:var(--border) }

/* ══════════════════════════════════
   BOTTOM NAV
══════════════════════════════════ */
.bottom-nav {
  position: fixed; bottom:0; left:0; right:0;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex; align-items: center;
  z-index: 100;
  backdrop-filter: blur(12px);
}
.nav-item {
  flex: 1;
  display: flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 3px;
  padding: 6px 4px;
  border: none; background: none;
  color: var(--text2);
  font-size: 10px; font-family:var(--font-body); font-weight:500;
  transition: color .2s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-item i { font-size:18px; transition:transform .2s }
.nav-item.active { color:var(--accent) }
.nav-item.active i { transform:scale(1.15) }
.nav-item span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:56px }

/* ══════════════════════════════════
   SECTION HEADER
══════════════════════════════════ */
.section-header {
  display: flex; align-items:center; justify-content:space-between;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.section-title {
  font-family: var(--font-title);
  font-size: 28px;
  letter-spacing: 1px;
}
.section-title span { color:var(--accent) }
.section-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap }

/* ══════════════════════════════════
   SEARCH BAR
══════════════════════════════════ */
.search-bar {
  display: flex; gap: 8px; margin-bottom:16px;
}
.search-input-wrap {
  flex: 1; position:relative;
}
.search-input-wrap i {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--text2); font-size:14px; pointer-events:none;
}
.search-input-wrap .form-input { padding-left:36px }
.btn-secondary {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--text);
  font-size: 14px; font-weight:500;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.btn-secondary:hover { background:var(--border) }
.btn-secondary.active { border-color:var(--accent); color:var(--accent) }

/* ══════════════════════════════════
   SORT / VIEW CONTROLS
══════════════════════════════════ */
.view-toggle { display:flex; gap:4px }
.view-btn {
  width:32px; height:32px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg3);
  color:var(--text2);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  transition: all .2s;
}
.view-btn.active { background:var(--accent); border-color:var(--accent); color:#fff }
/* Switch de vista y sort dentro de la barra de búsqueda: no crecen, el que
   cede sitio es el buscador. El select se corta al ancho de su opción más larga. */
.view-swap {
  flex:none; width:38px; align-self:stretch;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg3); color:var(--text2);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer;
}
/* El sort de la barra: alto el del buscador y ancho fijo el de "Recientes",
   para que no baile al cambiar de opción. */
.search-bar > .picker { flex:none; align-self:stretch }
.search-bar .sort-select { flex:none; width:116px }
.search-bar .picker-cara { height:100% }
/* Barra de novedades: todo en una fila. Si no cabe se desplaza en horizontal,
   que es preferible a partirse en dos líneas en pantallas estrechas. */
.news-toolbar {
  flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
  gap:6px; margin-bottom:12px; scrollbar-width:none;
}
.news-toolbar::-webkit-scrollbar { display:none }
.news-toolbar > * { flex:0 0 auto }
.news-toolbar .sort-select { padding:5px 30px 5px 8px; font-size:12px }
.news-toolbar .icon-btn { width:32px; height:32px; font-size:13px }
/* La lupa sola no decía dónde busca: con el sitio que dejó el sort, se ensancha
   hacia la izquierda y lo dice. Píldora, no círculo. */
.news-toolbar .news-fuente {
  width:auto; padding:0 11px; gap:6px; border-radius:16px;
  white-space:nowrap; font-size:12px; margin-left:auto;
}
.news-fuente span { font-size:11px }
/* Selector de fuente: letra arriba, sitio debajo, más bajo que un view-btn */
.news-sources { gap:5px }
.news-sources .view-btn {
  width:auto; height:auto; padding:3px 8px;
  flex-direction:column; gap:0; line-height:1.15; white-space:nowrap;
}
.news-sources .src-letra  { font-size:11px; font-weight:600 }
.news-sources .src-nombre { font-size:9px; opacity:.75 }
/* Pestañas con texto: el .view-btn base mide 32x32 fijos y el texto se salía encima */
.amule-tab-btn, .src-tab-btn { width:auto; padding:0 14px; white-space:nowrap }
.src-tab-btn { font-size:12px }

/* ── Listbox propio (aMule: tipo/orden) ── */
.amule-dd { position:relative }
.amule-dd-btn {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius);
  padding:6px 10px; color:var(--text); font-size:12px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.amule-dd-menu {
  display:none; position:absolute; top:calc(100% + 4px); right:0;
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius);
  min-width:150px; z-index:50; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.amule-dd-menu.open { display:block }
.amule-dd-item { padding:9px 12px; font-size:13px; cursor:pointer; color:var(--text) }
.amule-dd-item:hover { background:var(--border) }
.amule-dd-item.active { color:var(--accent); font-weight:600 }

/* Desplegable propio: el <select> sigue ahí dentro pero no se ve, y delante va
   nuestra cara con su lista. La cara hereda las clases del select original para
   que siga pareciéndose a lo que había. */
.picker { position:relative; display:inline-block }
.picker.ancho { display:block; width:100% }
.picker.ancho .picker-cara { width:100% }
.picker select { display:none }
.picker-cara { padding-right:34px; text-align:left; position:relative; cursor:pointer }
.picker-cara::after {
  content:''; position:absolute; right:13px; top:50%;
  width:6px; height:6px; margin-top:-5px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
.picker-lista {
  display:none; position:absolute; right:0; top:calc(100% + 5px); z-index:500;
  min-width:100%; max-height:260px; overflow-y:auto;
  padding:6px; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--bg2); box-shadow:var(--shadow);
}
.picker.abierto .picker-lista { display:block }
.picker-lista button {
  display:block; width:100%; text-align:left; white-space:nowrap;
  background:none; border:none; color:var(--text); cursor:pointer;
  padding:9px 12px; border-radius:8px; font-size:13px;
}
.picker-lista button:hover { background:var(--bg3) }
.picker-lista button.sel { background:var(--accent); color:#fff }

.sort-select {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* ══════════════════════════════════
   GRID & LIST VIEWS
══════════════════════════════════ */
.items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media(max-width:767px) { .amule-open-btn { display:none } } /* ed2k:// no sirve en móvil */
@media(min-width:480px)  { .items-grid { grid-template-columns:repeat(3,1fr) } }
@media(min-width:768px)  { .items-grid { grid-template-columns:repeat(4,1fr) } }
@media(min-width:1024px) { .items-grid { grid-template-columns:repeat(5,1fr) } }
@media(min-width:1280px) { .items-grid { grid-template-columns:repeat(6,1fr) } }

.items-list { display:flex; flex-direction:column; gap:8px }

/* ── Grid Card ── */
.card-grid {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.card-grid:active { transform:scale(.97) }
.card-grid:hover  { transform:translateY(-2px); box-shadow:var(--shadow) }

.card-poster {
  aspect-ratio: 2/3;
  background: var(--bg3);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-poster img { width:100%; height:100%; object-fit:cover }
.card-poster .no-poster {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px;
  color:var(--text2); font-size:12px;
}
.card-poster .no-poster i { font-size:32px; color:var(--border) }
.card-has-tmdb {
  position:absolute; top:6px; right:6px;
  background:var(--gold);
  color:#000;
  font-size:9px; font-weight:700;
  padding:2px 5px;
  border-radius:4px;
}
.mount-warn {
  display:flex; align-items:center; gap:8px;
  background:rgba(245,197,24,.12); color:var(--gold);
  border:1px solid rgba(245,197,24,.3); border-radius:var(--radius);
  padding:10px 12px; margin-bottom:14px; font-size:13px;
}

/* "Ya la tengo": verde sólido asomando medio fuera de la esquina, como una
   pegatina. Se ve de un vistazo y no tapa la carátula. */
.card-owned {
  position:absolute; top:-8px; right:-8px; z-index:2;
  width:20px; height:20px; border-radius:50%;
  background:var(--green); border:2px solid rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:9px;
  cursor:pointer;
}
/* padding y no tamaño: agranda la zona que responde al dedo sin que la marca se
   vea más gorda, que 12px de icono es muy poco donde acertar. */
.card-owned-inline { color:var(--green); font-size:12px; margin-left:6px; cursor:pointer; padding:6px }

.card-location-badge {
  position:absolute; bottom:6px; left:6px;
  background:rgba(0,0,0,.75);
  color:#fff;
  font-size:9px; font-weight:600;
  padding:2px 6px;
  border-radius:4px;
  backdrop-filter:blur(4px);
}
.card-grid-info {
  padding: 8px;
}
.card-grid-name {
  font-size: 12px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  line-height:1.3;
}
.card-grid-meta { font-size:10px; color:var(--text2); margin-top:3px }

/* ── List Item ── */
.card-list {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items:center; gap:12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.card-list:active { background:var(--bg3) }
.card-list-poster {
  width:44px; height:64px;
  border-radius:6px;
  background:var(--bg3);
  overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--text2);
}
.card-list-poster img { width:100%; height:100%; object-fit:cover }
.card-list-info { flex:1; min-width:0 }
.card-list-name {
  font-size:14px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-list-meta { font-size:12px; color:var(--text2); margin-top:2px }
.card-list-badges { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap }
.badge {
  font-size:10px; font-weight:600;
  padding:2px 6px; border-radius:4px;
}
.badge-tmdb  { background:rgba(245,197,24,.15); color:var(--gold) }
.badge-video { background:rgba(59,130,246,.15);  color:var(--blue) }
.badge-dir   { background:rgba(34,197,94,.15);   color:var(--green) }
.card-list-arrow { color:var(--text2); font-size:12px; flex-shrink:0 }

/* ══════════════════════════════════
   DASHBOARD
══════════════════════════════════ */
.dashboard-greeting {
  font-family: var(--font-title);
  /* El tamaño lo pone _ajustaSaludo() para que la frase llene la línea; esto es
     sólo el punto de partida. Nunca dos líneas: si no cabe ni al mínimo, puntos. */
  font-size: 30px;
  letter-spacing:.5px;
  margin: 10px 0 20px;
  text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* En Pelis va encima del buscador: un poco de aire arriba y abajo. */
.saludo-pelis { margin: 8px 0 16px }
.dashboard-greeting span { color:var(--accent) }

.quick-access {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:20px;
}
.quick-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding:16px;
  display:flex; align-items:center; gap:12px;
  cursor:pointer;
  transition: all .2s;
  color:var(--text);
}
.quick-btn:active { transform:scale(.97) }
.quick-btn:hover  { border-color:var(--accent) }
.quick-btn i { font-size:22px; color:var(--accent) }
.quick-btn-info { text-align:left }
.quick-btn-label { font-size:14px; font-weight:600 }
.quick-btn-sub   { font-size:11px; color:var(--text2) }

.dash-section { margin-bottom:24px }
.dash-section-title {
  font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:1.5px;
  color:var(--text2); margin-bottom:10px;
}

.lib-cards {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
@media(min-width:480px) { .lib-cards { grid-template-columns:repeat(3,1fr) } }
@media(min-width:768px) { .lib-cards { grid-template-columns:repeat(4,1fr) } }

.lib-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  cursor:pointer;
  transition: all .2s;
}
.lib-card:hover { border-color:var(--accent); transform:translateY(-1px) }
.lib-card-name  { font-size:13px; font-weight:600; margin-bottom:4px }
.lib-card-count { font-size:22px; font-weight:700; color:var(--accent) }
.lib-card-size  { font-size:11px; color:var(--text2); margin-top:2px }

.status-row {
  display:flex; align-items:center; gap:10px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-bottom:8px;
}
.status-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.status-dot.green  { background:var(--green) }
.status-dot.red    { background:var(--red) }
.status-dot.gray   { background:var(--text2) }
.status-label { font-size:13px; font-weight:500; flex:1 }
.status-value { font-size:12px; color:var(--text2) }

.service-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:6px 12px;
  font-size:12px; font-weight:500;
  margin:0 6px 6px 0;
  cursor:pointer;
  transition: border-color .2s;
}
.service-chip:hover { border-color:var(--accent) }

.history-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--border);
}
.history-item:last-child { border-bottom:none }
.history-icon { width:32px; height:32px; border-radius:6px; background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--text2); flex-shrink:0 }
.history-name { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 }
.history-action { font-size:11px; color:var(--text2) }

/* ══════════════════════════════════
   BREADCRUMB
══════════════════════════════════ */
.breadcrumb {
  display:flex; align-items:center; gap:6px;
  flex-wrap:wrap;
  margin-bottom:14px;
  font-size:13px; color:var(--text2);
}
.breadcrumb-item { cursor:pointer; transition:color .2s }
.breadcrumb-item:hover { color:var(--accent) }
.breadcrumb-sep { color:var(--border) }
.breadcrumb-item.current { color:var(--text); cursor:default }

/* ══════════════════════════════════
   MODAL
══════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.8);
  z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s;
  backdrop-filter:blur(4px);
}
.modal-overlay.open { opacity:1; pointer-events:all }

.modal-sheet {
  background: var(--bg2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 92vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,0,.67,0);
  padding-bottom: var(--safe-b);
}
.modal-overlay.open .modal-sheet {
  transform: translateY(0);
  transition-timing-function: cubic-bezier(.33,1,.68,1);
}
.modal-handle {
  width:40px; height:4px;
  background:var(--border);
  border-radius:2px;
  margin:12px auto 0;
}
.modal-header {
  padding:16px 20px 12px;
  display:flex; align-items:center; justify-content:space-between;
}
.modal-title { font-size:18px; font-weight:600 }
.modal-close-btn {
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background:var(--bg3);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.modal-body { padding:0 20px 20px }

html.modal-open, html.modal-open body { overflow:hidden; height:100%; touch-action:none; }
html.modal-open .modal-overlay, html.modal-open .modal-overlay * { touch-action:auto; }
/* Watchlist: scroll fiable en Android (anula touch-action:none del overlay) */
#modal-watchlist{ touch-action:auto; }
#modal-watchlist .modal-sheet{ max-height:96vh; touch-action:pan-y; overscroll-behavior:auto; overflow-y:scroll; }
/* El selector de carpetas se abre encima de otro modal (el de usuario). Todos los
   overlays comparten z-index, así que mandaba el orden del HTML y este quedaba debajo. */
#modal-dirpick { z-index:210 }
/* aMule: altura máxima fija en los dos modos, para que el listbox no se corte por el borde */
#modal-file.amule-modal .modal-sheet { height:92vh; max-height:92vh; }
/* Fichas (archivo, novedad, TMDB): hasta arriba del todo. Con el 92vh de por defecto
   quedaba una franja de fondo encima que no enseñaba nada y le quitaba sitio a la
   sinopsis. dvh y no vh: en el móvil vh cuenta la barra de direcciones aunque esté
   puesta, y la hoja se salía por abajo. safe-t deja libre la muesca en modo app. */
#modal-file .modal-sheet, #modal-tmdb .modal-sheet {
  max-height: calc(100dvh - var(--safe-t));
}
/* Foto de perfil: a pantalla completa, que la rejilla de resultados y el recorte
   necesitan todo el alto. Altura fija, no máxima: si no, la hoja crece y encoge
   según los resultados que haya. */
#modal-avatar .modal-sheet {
  height: calc(100dvh - var(--safe-t));
  max-height: calc(100dvh - var(--safe-t));
}


/* ── File Detail Modal ── */
.file-detail-poster {
  width:120px; height:180px;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg3);
  flex-shrink:0;
}
.file-detail-poster img { width:100%; height:100%; object-fit:cover }
.file-detail-header {
  display:flex; gap:16px; margin-bottom:16px;
}
.file-detail-info { flex:1; min-width:0 }
.file-detail-title {
  font-family:var(--font-title);
  font-size:24px; letter-spacing:1px;
  line-height:1.1; margin-bottom:6px;
}
.file-detail-year   { font-size:13px; color:var(--text2); margin-bottom:6px }
.file-detail-rating {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(245,197,24,.15);
  color:var(--gold);
  font-size:13px; font-weight:600;
  padding:3px 8px; border-radius:6px;
}
.file-detail-genres {
  display:flex; flex-wrap:wrap; gap:4px; margin-top:8px;
}
.genre-tag {
  font-size:11px; padding:2px 8px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:20px; color:var(--text2);
}
.file-detail-overview {
  font-size:13px; line-height:1.6;
  color:var(--text2);
  margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden;
}
.file-detail-overview.expanded { -webkit-line-clamp:unset }
.file-detail-meta {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-bottom:16px;
}
.meta-item { font-size:12px }
.meta-label { color:var(--text2); margin-bottom:2px }
.meta-value { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.action-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:8px;
}
@media(min-width:400px) { .action-grid { grid-template-columns:repeat(3,1fr) } }

.action-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 8px;
  color:var(--text);
  font-size:11px; font-weight:500;
  transition: all .2s;
  cursor:pointer;
}
.action-btn:hover { border-color:var(--accent); color:var(--accent) }
.action-btn:active { transform:scale(.96) }
.action-btn i { font-size:20px }
.action-btn.danger { color:var(--red) }
.action-btn.danger:hover { border-color:var(--red) }
.action-btn.success { color:var(--green) }
.action-btn.success:hover { border-color:var(--green) }
.action-btn.warn { color:var(--gold) }
.action-btn.warn:hover { border-color:var(--gold) }

/* ── Confirm Modal ── */
.confirm-modal {
  text-align:center; padding:20px;
}
.confirm-icon { font-size:48px; margin-bottom:12px }
.confirm-title { font-size:18px; font-weight:600; margin-bottom:8px }
.confirm-msg { font-size:14px; color:var(--text2); margin-bottom:20px; line-height:1.5 }
.confirm-btns { display:flex; gap:10px }
.btn-danger {
  background:var(--red); color:#fff;
  border:none; border-radius:var(--radius);
  padding:12px; font-size:15px; font-weight:600;
  flex:1; transition:opacity .2s;
}
.btn-danger:hover { opacity:.85 }
.btn-cancel {
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; font-size:15px; font-weight:600;
  flex:1; transition:background .2s;
}
.btn-cancel:hover { background:var(--border) }

/* ── Input Modal ── */
.input-modal { padding:4px 0 }
.modal-input-label { font-size:13px; color:var(--text2); margin-bottom:6px }

/* ── Destination picker ── */
.dest-list { display:flex; flex-direction:column; gap:6px }
.dest-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color .2s;
}
.dest-item:hover { border-color:var(--accent) }
.dest-item i { color:var(--accent) }
.dest-item span { font-size:14px; font-weight:500 }

/* ══════════════════════════════════
   EMBY
══════════════════════════════════ */
.emby-lib-list { display:flex; flex-direction:column; gap:8px }
.emby-lib-item {
  display:flex; align-items:center; gap:12px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
}
.emby-lib-name { flex:1; font-size:14px; font-weight:500 }
.btn-refresh {
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 12px;
  color:var(--text2);
  font-size:13px;
  transition:all .2s;
}
.btn-refresh:hover { border-color:var(--accent); color:var(--accent) }
.btn-refresh.loading { opacity:.5; pointer-events:none }
.btn-refresh-all {
  width:100%;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  padding:14px;
  font-size:15px; font-weight:600;
  margin-bottom:16px;
  transition:background .2s;
}
.btn-refresh-all:hover { background:var(--accent2) }

/* ══════════════════════════════════
   SISTEMA
══════════════════════════════════ */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:20px;
}
@media(min-width:600px) { .stats-grid { grid-template-columns:repeat(4,1fr) } }

.stat-card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  text-align:center;
}
.stat-value { font-family:var(--font-title); font-size:32px; color:var(--accent) }
.stat-label { font-size:11px; color:var(--text2); margin-top:2px; font-weight:500; text-transform:uppercase; letter-spacing:1px }

.progress-bar-wrap { margin-bottom:4px }
.progress-bar-label { display:flex; justify-content:space-between; font-size:12px; color:var(--text2); margin-bottom:4px }
.progress-bar { height:6px; background:var(--bg3); border-radius:3px; overflow:hidden }
.progress-bar-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .5s }

.services-list { display:flex; flex-direction:column; gap:8px }
.service-item {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 14px;
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
  transition:border-color .2s;
}
.service-item:hover { border-color:var(--accent) }
.service-name { flex:1; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.service-status {
  font-size:11px; font-weight:600;
  padding:3px 8px; border-radius:20px;
}
.service-status.active   { background:rgba(34,197,94,.15); color:var(--green) }
.service-status.inactive { background:rgba(239,68,68,.15);  color:var(--red) }
.service-status.unknown  { background:rgba(144,144,168,.15);color:var(--text2) }

.reboot-btn {
  width:100%; margin-top:16px;
  background:transparent;
  border:1px solid var(--red);
  border-radius:var(--radius);
  padding:12px;
  color:var(--red);
  font-size:14px; font-weight:600;
  transition:all .2s;
}
.reboot-btn:hover { background:var(--red); color:#fff }

.logs-box {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  font-size:11px; font-family:monospace;
  color:var(--text2);
  max-height:240px; overflow-y:auto;
  white-space:pre-wrap; word-break:break-all;
  margin-top:12px;
}

/* ══════════════════════════════════
   USUARIOS
══════════════════════════════════ */
.user-item {
  display:flex; align-items:center; gap:12px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-bottom:8px;
}
.user-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--accent) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff; flex-shrink:0;
  cursor:pointer;   /* se pincha para ver la foto en grande o cambiarla */
}
.user-name  { font-size:14px; font-weight:500; flex:1 }
.user-role  { font-size:11px; color:var(--text2) }
.user-role.admin { color:var(--gold) }
.user-role.viewer { color:var(--accent) }
.user-actions { display:flex; gap:6px }
.user-action-btn {
  width:30px; height:30px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg3);
  color:var(--text2);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  transition:all .2s;
}
.user-action-btn:hover { border-color:var(--accent); color:var(--accent) }
.user-action-btn.danger:hover { border-color:var(--red); color:var(--red) }

/* Reglas de aviso de novedades (Ajustes > Avisarme de novedades) */
.aviso-item {
  display:flex; align-items:center; gap:10px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 12px;
  margin-bottom:8px;
}
.aviso-item.apagado { opacity:.5 }
.aviso-txt { font-size:14px; font-weight:500 }
.aviso-sub { font-size:11px; color:var(--text2); margin-top:2px }

.add-user-btn {
  width:100%; margin-bottom:16px;
  background:var(--bg2);
  border:1px dashed var(--border);
  border-radius:var(--radius);
  padding:12px;
  color:var(--text2);
  font-size:14px;
  transition:all .2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.add-user-btn:hover { border-color:var(--accent); color:var(--accent) }

/* ══════════════════════════════════
   AJUSTES
══════════════════════════════════ */
.settings-group { margin-bottom:24px }
.settings-group-title {
  font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:1.5px;
  color:var(--text2); margin-bottom:10px;
}
.settings-item {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:8px;
  cursor:pointer;
  transition:border-color .2s;
}
.settings-item:hover { border-color:var(--accent) }
.settings-item-left { display:flex; align-items:center; gap:12px }
.settings-item-icon { width:32px; height:32px; border-radius:8px; background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--accent) }
.settings-item-label { font-size:14px; font-weight:500 }
.settings-item-sub   { font-size:12px; color:var(--text2) }
.settings-item-right { color:var(--text2); font-size:13px }

/* ── Toggle switch ── */
.toggle {
  position:relative; width:44px; height:24px;
  cursor:pointer; flex-shrink:0;
}
.toggle input { opacity:0; width:0; height:0; position:absolute }
.toggle-track {
  position:absolute; inset:0;
  background:var(--border);
  border-radius:12px;
  transition:background .2s;
}
.toggle input:checked + .toggle-track { background:var(--accent) }
.toggle-thumb {
  position:absolute;
  top:3px; left:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  transition:transform .2s;
}
.toggle input:checked ~ .toggle-thumb { transform:translateX(20px) }

/* ══════════════════════════════════
   NOVEDADES (MovieFeed)
══════════════════════════════════ */
/* Los años en una sola fila: los que no quepan se alcanzan desplazando */
.year-filter-row {
  display:flex; gap:8px; margin-bottom:12px;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
}
.year-filter-row::-webkit-scrollbar { display:none }
.year-btn { flex:0 0 auto }
.year-btn {
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:20px;
  padding:6px 14px;
  font-size:13px; font-weight:600;
  color:var(--text2);
  transition:all .2s;
}
.year-btn.active { background:var(--accent); border-color:var(--accent); color:#fff }

.news-pagination {
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin-top:16px; padding-top:16px;
  border-top:1px solid var(--border);
}
.page-btn {
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg2);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  transition:all .2s;
}
.page-btn:hover { border-color:var(--accent); color:var(--accent) }
.page-btn:disabled { opacity:.3; pointer-events:none }
.page-info { font-size:13px; color:var(--text2) }

/* ══════════════════════════════════
   CARTELES
══════════════════════════════════ */
.poster-search-result {
  display:flex; align-items:center; gap:12px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 12px;
  cursor:pointer;
  margin-bottom:8px;
  transition:border-color .2s;
}
.poster-search-result:hover { border-color:var(--accent) }
.poster-result-img {
  width:40px; height:60px;
  border-radius:6px;
  object-fit:cover;
  background:var(--bg3);
  flex-shrink:0;
}
.poster-result-title { font-size:14px; font-weight:500 }
.poster-result-year  { font-size:12px; color:var(--text2) }

.poster-preview {
  text-align:center; margin:16px 0;
}
.poster-preview img {
  max-width:min(300px,80vw);
  border-radius:var(--radius);
  margin:0 auto;
  box-shadow:var(--shadow);
}
.poster-preview-actions { display:flex; gap:10px; justify-content:center; margin-top:12px; flex-wrap:wrap }
/* El botón de pantalla completa lo trae el reproductor de YouTube: aquí sólo el hueco 16:9 */
.trailer-frame {
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border-radius:var(--radius); overflow:hidden;
}
.trailer-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0 }
.detalle-fuente-fila { display:flex; align-items:center; gap:8px; margin-bottom:10px }
.detalle-fuente-fila .view-toggle { margin-bottom:0 }
/* A la derecha del selector de fuente, y solo si no hay selector (no todas las
   fichas traen enlace del foro) se queda él en la fila. */
.btn-trailer { width:auto; padding:0 12px; gap:6px; font-size:12px; white-space:nowrap; margin-left:auto }
.btn-share {
  display:flex; align-items:center; gap:6px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px 16px;
  color:var(--text); font-size:14px; font-weight:500;
  transition:all .2s; cursor:pointer;
}
.btn-share:hover { border-color:var(--accent); color:var(--accent) }

/* ══════════════════════════════════
   TOAST
══════════════════════════════════ */
.toast-container {
  position:fixed; bottom:calc(var(--nav-h) + 12px + var(--safe-b));
  left:50%; transform:translateX(-50%);
  /* Por encima del reproductor (600) y del overlay de carga (1000): un aviso que
     queda detrás de lo que estás mirando es como no darlo. */
  z-index:1100;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.toast {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:10px 18px;
  font-size:13px; font-weight:500;
  box-shadow:var(--shadow);
  white-space:nowrap;
  animation:toast-in .25s ease, toast-out .25s ease 2.5s forwards;
  max-width:80vw; overflow:hidden; text-overflow:ellipsis;
}
.toast.success { border-color:var(--green); color:var(--green) }
.toast.error   { border-color:var(--red);   color:var(--red) }
.toast.info    { border-color:var(--blue);  color:var(--blue) }
@keyframes toast-in  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes toast-out { from{opacity:1} to{opacity:0} }

/* ══════════════════════════════════
   SPINNER / LOADING
══════════════════════════════════ */
.spinner {
  width:40px; height:40px;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin:40px auto;
}
@keyframes spin { to{transform:rotate(360deg)} }

.loading-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  z-index:300;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.loading-overlay.hidden { display:none }

/* ══════════════════════════════════
   EMPTY STATE
══════════════════════════════════ */
.empty-state {
  text-align:center; padding:60px 20px;
  color:var(--text2);
}
.empty-state i { font-size:48px; color:var(--border); margin-bottom:12px }
.empty-state p { font-size:14px }

/* ══════════════════════════════════
   FULLSCREEN POSTER
══════════════════════════════════ */
.fullscreen-modal {
  position:fixed; inset:0;
  background:rgba(0,0,0,.95);
  z-index:600;
  display:none; align-items:center; justify-content:center;
}
.fullscreen-modal.open { display:flex }
/* El zoom lo lleva el JS: 'touch-action:none' para que el navegador no se quede
   con los toques a dos dedos, y el recorte para que la imagen ampliada no se
   salga de la pantalla. */
#fullscreen-poster { overflow:hidden }
.fullscreen-modal img {
  max-width:90vw; max-height:90vh;
  border-radius:var(--radius);
  object-fit:contain;
  touch-action:none;
}
.fullscreen-close {
  position:absolute; top:16px; right:16px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.15);
  border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer;
}

/* ══════════════════════════════════
   RESPONSIVE TWEAKS
══════════════════════════════════ */
@media(min-width:768px) {
  .page { padding-top:20px }
  .action-grid { grid-template-columns:repeat(4,1fr) }
  .quick-access { grid-template-columns:repeat(4,1fr) }
  .stats-grid { grid-template-columns:repeat(4,1fr) }
}

/* ── Animations ── */
.fade-in { animation:fadeIn .3s ease }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.page.active { animation:fadeIn .2s ease }

/* ── Search clear button ── */
.search-input-wrap { position: relative }
.search-input-wrap .form-input { padding-right: 40px }
.search-clear-btn {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40px;
  min-width: 40px;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 14px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.search-clear-btn:hover { color: var(--accent) }
.search-clear-btn:active { color: var(--accent) }
.search-input-wrap:has(input:not(:placeholder-shown)) .search-clear-btn { display: flex }

/* ── Card list poster image fix ── */
.card-list-poster {
  width: 44px;
  height: 64px;
  border-radius: 6px;
  background: var(--bg3);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  font-size: 18px;
}
.card-list-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* ── Lib card collage in list ── */
.lib-card-collage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lib-card-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── File detail modal - bigger text on mobile ── */
.file-detail-title   { font-size: clamp(20px, 5vw, 28px) }
.file-detail-year    { font-size: clamp(14px, 3.5vw, 16px) }
.file-detail-overview{ font-size: clamp(14px, 3.5vw, 15px); line-height: 1.65 }
.meta-label          { font-size: clamp(12px, 3vw, 13px) }
.meta-value          { font-size: clamp(13px, 3.5vw, 14px) }
.genre-tag           { font-size: clamp(11px, 2.8vw, 12px) }
.file-detail-rating  { font-size: clamp(13px, 3.5vw, 15px) }

/* ── PWA: disable pull-to-refresh and pinch zoom ── */
html, body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  touch-action: pan-x pan-y;
}

/* ── Fix cast/reparto overflow ── */
.meta-value {
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: unset;
}
.file-detail-meta {
  overflow: hidden;
}
body {
  overflow-x: hidden;
}
.modal-sheet {
  overflow-x: hidden;
}

/* ── Disable context menu / text selection on long press ── */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Re-enable selection only on inputs and textareas ── */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}





/* ── Modal scroll fix - no body locking ── */
.modal-overlay {
  touch-action: none;
}
.modal-sheet {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  overflow-y: auto;
}
.modal-body {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
/* === Watchlist drag-and-drop === */
.wl-grip { transition: color .15s; }
.wl-grip:hover { color: var(--text) !important; }
.wl-row { transition: background .12s, box-shadow .12s, opacity .12s; will-change: transform; }
.wl-row.wl-dragging {
  background: var(--bg3);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  opacity: .92;
  position: relative;
  z-index: 50;
}
.wl-row.wl-dragging .wl-grip { color: var(--accent) !important; cursor: grabbing; }

/* === Ojo de pendientes (header) destacado === */
.wl-eye-alert {
  background: var(--red) !important;
  color: #fff !important;
}
.wl-eye-alert:hover { filter: brightness(1.1); }
/* Boton Archivo activo en el modal */
#wl-arch-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ── Reproductor: controles propios ───────────────────────────────
   En HLS la línea de tiempo del <video> es la del trozo que sirve ffmpeg, no la
   de la película, así que la barra nativa engañaría. Y ya puestos, la misma
   botonera vale para los dos modos: dentro del modal los controles nativos
   tampoco daban botón de pantalla completa. */
/* Al estilo Netflix: la capa ocupa toda la pantalla y atenúa la imagen, con los
   saltos y el play en el centro y la barra y las acciones al pie. Como capa no
   recibe toques (los pasa al modal, que saca/esconde la botonera): sólo los
   botones y los deslizadores los aceptan. */
.video-controls {
  position:absolute; inset:0; z-index:10; pointer-events:none;
  color:#fff; font-size:12px;
  background:linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.85)),
             rgba(0,0,0,.25);
}
.video-controls button, .video-controls input { pointer-events:auto }
.vc-cab {
  background:none; border:none; color:#fff; cursor:pointer;
  font-size:19px; padding:4px 6px; display:flex; align-items:center;
}
.vc-centro {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:12vw; font-size:21px;
}
.vc-centro .vc-grande svg { width:56px; height:56px }
.vc-pie {
  position:absolute; left:0; right:0; bottom:0; padding:0 14px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.vc-acciones { display:flex; justify-content:space-between; gap:6px }
.vc-acciones button { font-size:11px; font-weight:600; gap:6px; opacity:.92; white-space:nowrap }
.vc-acciones .vc-ico { display:flex; align-items:center }
/* Deslizador de brillo en vertical. 'writing-mode' vertical en un range es
   reciente y el WebView de Android puede no traerlo; el giro funciona siempre.
   Al girar, la caja sigue siendo horizontal: por eso se centra a mano. */
.vc-brillo, .vc-vol {
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:32vh; min-height:150px;
}
/* Pegados al borde caen justo debajo del notch cuando el móvil está tumbado:
   se apartan con el hueco que declara el sistema más un margen fijo, para que
   en los teléfonos sin notch tampoco queden en el filo. */
.vc-brillo { left:calc(env(safe-area-inset-left) + 20px) }
.vc-vol { right:calc(env(safe-area-inset-right) + 20px) }
.vc-brillo i, .vc-vol svg {
  position:absolute; left:50%; bottom:0; transform:translateX(-50%); opacity:.9;
}
.vc-brillo input[type=range], .vc-vol input[type=range] {
  position:absolute; left:50%; top:45%; margin:0;
  width:28vh; min-width:130px; accent-color:#fff; cursor:pointer;
  transform:translate(-50%,-50%) rotate(270deg); touch-action:none;
}
/* Con el candado echado no se toca nada: ni botonera ni play al tocar la imagen. */
.bloqueado .video-controls { display:none !important }
.bloqueado #video-title, .bloqueado #vc-cerrar, .bloqueado #vc-foto { visibility:hidden }
.bloqueado #video-cabecera { background:none }
.bloqueado .video-subs { bottom:24px }

/* En vertical la peli es una franja en medio y todo lo demás se le echa encima:
   el brillo se quita y las acciones se quedan en iconos, que si no no caben. */
@media (orientation: portrait) {
  .vc-brillo, .vc-vol { display:none }
  .vc-acciones { justify-content:space-around }
  .vc-acciones button > span:last-child { display:none }
  .vc-acciones button { padding:8px 12px }
}

/* Último recurso para girar: si el móvil tiene la rotación bloqueada, la API del
   sistema no puede hacer nada, así que se gira el reproductor entero. Los toques
   los recoloca el navegador solo, de modo que todo sigue funcionando igual. */
#video-player-modal.girado {
  inset:auto; top:50%; left:50%;
  width:100vh; height:100vw;
  transform:translate(-50%,-50%) rotate(90deg);
}
/* Con el vídeo en marcha se apartan solas; en pausa se quedan. */
/* El título y la X de arriba se van con la botonera: si no, la peli sigue
   quedando enmarcada. */
.video-controls, #video-cabecera { transition:opacity .25s }
.video-controls.oculta, #video-cabecera.oculta { opacity:0; pointer-events:none }
/* Los subtítulos los pintamos nosotros: ver más abajo por qué no vale un <track>.
   Suben cuando está la botonera para que no la tapen. */
.video-subs {
  position:absolute; left:5%; right:5%; bottom:104px; z-index:12;
  text-align:center; font-size:clamp(15px, 4.2vw, 26px);
  line-height:1.3; white-space:pre-wrap; pointer-events:none;
  transition:bottom .25s;
}
.video-subs.abajo { bottom:24px }
/* El texto va en un <span> para que la caja de fondo se ajuste a la línea y no
   ocupe todo el ancho. Color, tamaño y fondo salen de Ajustes. */
.video-subs span {
  display:inline-block; padding:1px 8px; border-radius:4px;
  color:#fff; text-shadow:0 2px 4px #000, 0 0 6px #000;
}

.video-pistas {
  position:absolute; right:12px; bottom:100px; z-index:16;
  max-height:60%; overflow-y:auto; min-width:180px; max-width:min(320px, 80vw);
  padding:8px; border-radius:var(--radius);
  background:rgba(0,0,0,.92); color:#fff; font-size:13px;
}
.video-pistas h4 {
  margin:6px 4px 4px; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; opacity:.6;
}
.video-pistas button {
  display:block; width:100%; text-align:left;
  background:none; border:none; color:#fff; cursor:pointer;
  padding:8px 10px; border-radius:6px; font-size:13px;
}
.video-pistas button:hover { background:rgba(255,255,255,.12) }
.video-pistas button.sel { background:var(--accent) }

/* El JS lo saca con display:flex, que aquí la línea de display no pintaría nada:
   manda el style de la etiqueta. */
.video-cargando {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:15; padding:10px 18px; border-radius:var(--radius);
  background:rgba(0,0,0,.7); color:#fff; font-size:13px;
  align-items:center; gap:10px;
}
/* La rueda es la misma que en el resto de la app, en pequeño y en blanco. */
.video-cargando .spinner {
  width:16px; height:16px; border-width:2px; margin:0;
  border-color:rgba(255,255,255,.25); border-top-color:#fff;
}
/* Y los puntos se encienden por turnos: relanzar ffmpeg y esperar al primer
   fragmento son varios segundos en los que si no, parece que se ha colgado. */
.video-cargando .puntos i { font-style:normal; animation:puntos 1.2s infinite }
.video-cargando .puntos i:nth-child(2) { animation-delay:.2s }
.video-cargando .puntos i:nth-child(3) { animation-delay:.4s }
@keyframes puntos { 0%, 60%, 100% { opacity:.25 } 30% { opacity:1 } }
.vc-linea { display:flex; align-items:center; gap:10px }
.vc-linea span { font-variant-numeric:tabular-nums; opacity:.85 }
.vc-linea input[type=range] { flex:1; accent-color:var(--accent); cursor:pointer; min-width:0 }

.video-controls button {
  background:none; border:none; color:#fff; cursor:pointer;
  display:flex; align-items:center; gap:2px;
  font-size:15px; padding:6px;
}
.video-controls button b { font-size:10px; font-weight:600 }
.video-controls .vc-grande { padding:0 }


.video-resume {
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75);
}
.video-resume-box {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px;
  display:flex; flex-direction:column; gap:16px;
  text-align:center; max-width:min(360px,88vw);
}
.video-resume-btns { display:flex; flex-direction:column; gap:8px }

/* ══════════════════════════════════
   FOTO DE PERFIL
══════════════════════════════════ */
.pix-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:8px; margin-top:12px;
}
.pix-grid img {
  width:100%; aspect-ratio:1; object-fit:cover; cursor:pointer;
  border-radius:var(--radius); border:1px solid var(--border);
}
/* El recorte se ve ya redondo: lo que se ve es exactamente lo que se guarda. */
.recorte-caja {
  position:relative; overflow:hidden; margin:0 auto;
  width:min(260px,70vw); aspect-ratio:1; border-radius:50%;
  background:#000; touch-action:none; cursor:grab;
}
.recorte-caja img {
  position:absolute; left:0; top:0;
  transform-origin:0 0; max-width:none; user-select:none; -webkit-user-drag:none;
}