/* JFPanel — tema oscuro inspirado en Jellyfin/Plex */
:root {
  --bg: #0d1015;
  --bg-soft: #11151c;
  --panel: #161b23;
  --panel-2: #1c222d;
  --border: #262e3a;
  --text: #e9edf3;
  --muted: #8d97a7;
  --faint: #5c6575;
  --accent-a: #aa5cc3;
  --accent-b: #00a4dc;
  --grad: linear-gradient(135deg, #aa5cc3, #00a4dc);
  --green: #2ecc71;
  --red: #e5544b;
  --yellow: #e7b93c;
  --radius: 14px;
  --sidebar-w: 232px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--accent-b); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 650; margin: 0 0 .5rem; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.05rem; letter-spacing: .02em; color: var(--text); }
::selection { background: rgba(0, 164, 220, .35); }
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: #2b3442; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- disposición ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  transition: transform .25s ease;
}
.main {
  flex: 1; margin-left: var(--sidebar-w);
  display: flex; flex-direction: column; min-width: 0;
  /* red de seguridad: ningún desborde puntual debe hacer scrollear TODA la
     página en horizontal (clip no crea contenedor de scroll → no rompe el
     sticky de la topbar). Las tablas siguen con su scroll interno (.tbl-wrap) */
  overflow-x: clip;
}
.content { padding: 1.4rem 1.8rem 3rem; max-width: 1500px; width: 100%; margin: 0 auto; }

.brand {
  display: flex; align-items: center; gap: .65rem;
  padding: 1.1rem 1.2rem .9rem;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .02em;
}
.brand .logo { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.brand span em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* wordmark JFPanel: «JF» en degradado, «Panel» en el color del texto */
.dev-row { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.dev-row:last-child { border-bottom: 0; }

.brand .jfw { font-weight: 800; letter-spacing: -.01em; }
.brand .jfw .jf { background: linear-gradient(92deg, #a855f7, #3f9ae8); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav { padding: .4rem .7rem; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; border-radius: 9px;
  color: var(--muted); font-weight: 500; text-decoration: none;
  position: relative;
}
.nav a svg { width: 19px; height: 19px; flex-shrink: 0; opacity: .85; }
.nav a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--panel-2); color: var(--text); }
.nav a.active::before {
  content: ""; position: absolute; left: -0.7rem; top: 20%; bottom: 20%;
  width: 3px; border-radius: 3px; background: var(--grad);
}
.sidebar-foot { padding: .9rem 1.2rem; color: var(--faint); font-size: .78rem; border-top: 1px solid var(--border); }

.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.8rem; border-bottom: 1px solid var(--border);
  background: rgba(13, 16, 21, .8); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.topbar h1 { margin: 0; font-size: 1.1rem; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* los indicadores de tamaño fijo no encogen: solo lo hace el nombre de usuario */
.topbar .hamburger, .topbar .status-pill { flex-shrink: 0; }
.hamburger { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: .3rem; }
.hamburger svg { width: 24px; height: 24px; }

.status-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--panel); border: 1px solid var(--border);
  padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; color: var(--muted);
  white-space: nowrap;
}
/* botón de mantenimiento del admin (mismo aspecto que las píldoras) */
button.status-pill { cursor: pointer; font: inherit; font-size: .8rem; }
button.status-pill:hover { color: var(--text); }
.status-pill.maint-on {
  color: var(--yellow); border-color: rgba(231, 185, 60, .5);
  background: rgba(231, 185, 60, .12);
}

/* franja de mantenimiento en curso (todas las páginas, todos los roles).
   OJO: display:flex (regla de autor) le gana al [hidden]{display:none} del
   navegador — sin la regla de abajo la franja se vería SIEMPRE. */
.maint-banner[hidden] { display: none; }
.maint-banner {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 1rem auto 0; max-width: 1500px; width: calc(100% - 3.6rem);
  padding: .65rem 1rem; border-radius: 10px; font-size: .9rem;
  background: rgba(231, 185, 60, .12); border: 1px solid rgba(231, 185, 60, .45);
  color: #f3d183;
}
.maint-banner .mb-text { flex: 1; min-width: 200px; }
.maint-banner b { color: inherit; }
@media (max-width: 640px) { .maint-banner { width: calc(100% - 2rem); } }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.status-dot.ok { background: var(--green); box-shadow: 0 0 6px rgba(46, 204, 113, .7); }
.status-dot.warn { background: var(--yellow, #e5a50a); box-shadow: 0 0 6px rgba(229, 165, 10, .7); }
.status-pill { cursor: pointer; user-select: none; }
.status-pill .pill-caret { font-size: .65rem; opacity: .7; margin-left: 2px; }
.status-pill .pill-short { display: none; font-variant-numeric: tabular-nums; }
.server-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 240px; padding: .45rem; border-radius: 10px;
  background: var(--bg-card, #171a21); border: 1px solid var(--border, #2a2f3a);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.server-pop .sp-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .5rem; border-radius: 7px; font-size: .85rem;
}
.server-pop .sp-row + .sp-row { margin-top: 2px; }
.server-pop .sp-row .pf-mini svg { width: 16px; height: 16px; display: block; }
.server-pop .sp-name { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.server-pop .sp-streams { color: var(--muted, #8b93a3); font-variant-numeric: tabular-nums; }
.server-pop .sp-row.down { background: rgba(229, 84, 75, .12); }
.server-pop .sp-row.down .sp-name { color: var(--red, #e5544b); }
.status-dot.bad { background: var(--red); box-shadow: 0 0 6px rgba(229, 84, 75, .7); }
/* panel VACÍO: sin servidor conectado todavía. Gris apagado y SIN halo, para
   que no se confunda con el rojo de «servidor caído» ni con el verde de «ok». */
.status-dot.idle { background: var(--faint); box-shadow: none; }

.user-chip { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted);
  font-size: .85rem; min-width: 0; }
/* el nombre/correo (puede ser largo, p. ej. un email) se trunca en vez de
   estirar la barra y provocar scroll horizontal de toda la página */
.user-chip .uc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip a { color: var(--muted); flex-shrink: 0; }
.user-chip a::before { content: "·"; margin-right: .4rem; color: var(--faint); }
.user-chip a:hover { color: var(--red); text-decoration: none; }

/* ---------- tarjetas y secciones ---------- */
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.card + .card, .section + .section { margin-top: 1.2rem; }
/* flex-wrap: en móvil las piezas (título, subtítulo, totales y el selector de
   servidor, que no puede encoger) suman más que el ancho y el selector quedaba
   RECORTADO por el clip global. Envolver a otra línea nunca estorba en
   escritorio: ahí sobra sitio y no llega a activarse. */
.section-head { display: flex; flex-wrap: wrap; row-gap: .3rem;
  align-items: baseline; gap: .8rem .8rem; margin: 1.6rem 0 .8rem; }
.section-head select { max-width: 100%; }
.section-head:first-child { margin-top: 0; }
.section-head h2 { margin: 0; }
.section-head .sub { color: var(--muted); font-size: .82rem; }
.section-head .spacer { flex: 1; }

.grid { display: grid; gap: 1.1rem; }
/* minmax(0,1fr) y no 1fr a secas: el mínimo de 1fr es `auto`, y un solo título
   largo sin cortes inflaría la columna entera (visto en móvil con «DanMachi:
   ¿Qué tiene de malo…»: tarjeta de 490px en un grid de 353 → desborde). Con
   mínimo 0 la celda aguanta y el nombre se recorta con su elipsis. */
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat-num { font-size: 1.6rem; font-weight: 700; }
.stat-label { color: var(--muted); font-size: .8rem; }

/* ---------- botones y formularios ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: .5rem .95rem; font-size: .88rem; font-weight: 550;
  cursor: pointer; text-decoration: none;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.15); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad); border: 0; color: #fff; }
.btn-danger { background: rgba(229, 84, 75, .15); border-color: rgba(229, 84, 75, .4); color: #ff8e87; }
.btn-sm { padding: .3rem .65rem; font-size: .8rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }

label.fld { display: block; margin-bottom: .9rem; }
label.fld span { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .3rem; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea {
  width: 100%; background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: .55rem .75rem; font-size: .9rem; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-b); }
input[type=checkbox] { accent-color: var(--accent-b); width: 16px; height: 16px; }
.check-row { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; font-size: .88rem; }

/* ---------- tablas ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 640px; }
.tbl th, .tbl td { padding: .6rem .8rem; text-align: left; white-space: nowrap; }
.tbl th {
  color: var(--muted); font-weight: 600; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--panel);
}
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--text); }
.tbl th .arrow { opacity: .9; color: var(--accent-b); }
.tbl tbody tr { border-bottom: 1px solid rgba(38, 46, 58, .55); }
.tbl tbody tr:last-child { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--panel-2); }
.tbl td.trunc { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

.pager { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; justify-content: flex-end; font-size: .85rem; color: var(--muted); }

/* ---------- insignias / píldoras ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; padding: .12rem .55rem;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--muted); white-space: nowrap;
}
.badge.green { color: #7ee2a8; border-color: rgba(46, 204, 113, .35); background: rgba(46, 204, 113, .1); }
.badge.red { color: #ff9d96; border-color: rgba(229, 84, 75, .35); background: rgba(229, 84, 75, .1); }
.badge.yellow { color: #f3d183; border-color: rgba(231, 185, 60, .35); background: rgba(231, 185, 60, .1); }
.badge.purple { color: #d3a8e8; border-color: rgba(170, 92, 195, .4); background: rgba(170, 92, 195, .12); }
.badge.blue { color: #7fd4f5; border-color: rgba(0, 164, 220, .4); background: rgba(0, 164, 220, .12); }

/* ---------- sesiones activas ---------- */
.stream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 1.1rem; }
.stream-card { display: flex; gap: 1rem; overflow: hidden; }
.stream-card .poster {
  width: 92px; aspect-ratio: 2/3; border-radius: 10px; flex-shrink: 0;
  object-fit: cover; background: var(--panel-2); box-shadow: var(--shadow);
}
.stream-card .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.stream-card .title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream-card .subtitle { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream-card .meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.stream-card .who { color: var(--muted); font-size: .82rem; margin-top: auto; padding-top: .4rem; display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.progress { height: 6px; background: var(--panel-2); border-radius: 4px; overflow: hidden; margin-top: .45rem; }
.progress > div { height: 100%; background: var(--grad); border-radius: 4px; transition: width .6s ease; }
.progress-times { display: flex; justify-content: space-between; color: var(--faint); font-size: .74rem; margin-top: .25rem; font-variant-numeric: tabular-nums; }

.empty {
  color: var(--muted); text-align: center; padding: 2.2rem 1rem;
  border: 1px dashed var(--border); border-radius: var(--radius); font-size: .9rem;
}

/* ---------- fila de pósteres ---------- */
.poster-row { display: flex; gap: .9rem; overflow-x: auto; padding: .3rem .1rem .8rem; scroll-snap-type: x proximity; }
.poster-item { width: 132px; flex-shrink: 0; scroll-snap-align: start; text-decoration: none; color: var(--text); }
.poster-item:hover { text-decoration: none; }
.poster-item img {
  width: 132px; aspect-ratio: 2/3; object-fit: cover;
  border-radius: 10px; background: var(--panel-2);
  transition: transform .18s ease, box-shadow .18s ease; display: block;
}
.poster-item:hover img { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
.poster-item .cap { font-size: .8rem; margin-top: .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poster-item .sub { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poster-fallback {
  width: 132px; aspect-ratio: 2/3; border-radius: 10px;
  background: var(--panel-2); display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 1.8rem; font-weight: 700;
}

/* ---------- listas de ranking ---------- */
.rank-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.rank-item { display: flex; align-items: center; gap: .7rem; font-size: .87rem; }
.rank-item .pos { color: var(--faint); font-weight: 700; width: 1.1rem; text-align: right; font-variant-numeric: tabular-nums; }
.rank-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-item .val { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.rank-bar { height: 4px; background: var(--panel-2); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.rank-bar > div { height: 100%; background: var(--grad); }

/* ---------- avatares ---------- */
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--panel-2); }
.avatar-fallback {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-weight: 700; font-size: 1.05rem;
}
.avatar-fallback.lg, .avatar.lg { width: 72px; height: 72px; font-size: 1.6rem; }

.user-card { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--text); }
.user-card:hover { text-decoration: none; border-color: var(--accent-b); }
.user-card .info { min-width: 0; flex: 1; }
.user-card .name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card .sub { color: var(--muted); font-size: .78rem; }

/* ---------- página de medio ---------- */
.media-hero { display: flex; gap: 1.6rem; align-items: flex-start; }
.media-hero .poster { width: 190px; aspect-ratio: 2/3; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow); background: var(--panel-2); flex-shrink: 0; }
.media-hero .info { flex: 1; min-width: 0; }
.media-hero .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.media-hero .overview { color: var(--muted); max-width: 70ch; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.2rem; font-size: .86rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- gráficas ---------- */
.chart-card { min-height: 300px; display: flex; flex-direction: column; }
.chart-card h2 { font-size: .92rem; margin-bottom: .8rem; }
.chart-box { position: relative; flex: 1; min-height: 240px; }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(5, 8, 12, .72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 1rem; z-index: 100; backdrop-filter: blur(3px);
}
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  width: 100%; max-width: 540px; padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow); max-height: 85vh; overflow-y: auto;
}
.modal h2 { margin-bottom: 1rem; }
.modal .actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }

/* ---------- toast ---------- */
#toasts { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--accent-b);
  padding: .7rem 1rem; border-radius: 10px; font-size: .87rem; box-shadow: var(--shadow);
  animation: slide-in .25s ease; max-width: 340px;
}
.toast.err { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--green); }
@keyframes slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- login / setup ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .brand { justify-content: center; padding: 0 0 1.4rem; font-size: 1.5rem; }
.auth-card .brand .logo { width: 40px; height: 40px; }
.setup-card { max-width: 560px; }
.steps { display: flex; gap: .5rem; margin-bottom: 1.4rem; }
.steps .step { flex: 1; height: 4px; border-radius: 3px; background: var(--panel-2); }
.steps .step.on { background: var(--grad); }
.form-error { color: #ff9d96; font-size: .85rem; margin-top: .6rem; min-height: 1.2em; }
.form-ok { color: #7ee2a8; font-size: .85rem; margin-top: .6rem; }

/* ---------- ajustes ---------- */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--border); margin-bottom: 1.3rem; flex-wrap: wrap; }
.tabs button {
  background: none; border: 0; color: var(--muted); padding: .6rem 1rem;
  font-size: .9rem; font-weight: 550; cursor: pointer; border-bottom: 2px solid transparent;
  font-family: inherit;
}
.tabs button.on { color: var(--text); border-bottom-color: var(--accent-b); }
.notifier-row { display: flex; align-items: center; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid rgba(38, 46, 58, .55); }
.notifier-row:last-child { border-bottom: 0; }
.notifier-row .grow { flex: 1; min-width: 0; }
.notifier-row .name { font-weight: 600; }
.notifier-row .sub { color: var(--muted); font-size: .78rem; }

.filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; align-items: end; }
.filter-bar label.fld { margin: 0; flex: 1; min-width: 130px; max-width: 220px; }
.filter-bar label.fld.wide { max-width: 320px; min-width: 200px; }

.sev-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: .4rem; background: var(--faint); }
.sev-dot.Information { background: var(--accent-b); }
.sev-dot.Warning { background: var(--yellow); }
.sev-dot.Error { background: var(--red); }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .8rem; }
.mt0 { margin-top: 0; } .mt1 { margin-top: .5rem; } .mt2 { margin-top: 1rem; } .mt3 { margin-top: 1.5rem; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .82em; }
.nowrap { white-space: nowrap; }

/* ---------- adaptable ---------- */
@media (max-width: 1100px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  .sidebar.open { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.6); }
  .main { margin-left: 0; }
  .hamburger { display: inline-flex; }
  .content { padding: 1rem 1rem 3rem; }
  .topbar { padding: .7rem 1rem; }
  .stream-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .media-hero { flex-direction: column; align-items: center; text-align: center; }
  .media-hero .chips { justify-content: center; }
  .kv { grid-template-columns: 1fr; gap: 0 0; }
  .kv dt { margin-top: .5rem; }
  .filter-bar label.fld, .filter-bar label.fld.wide { max-width: none; min-width: 45%; }
  /* móvil: texto largo fuera, pero la píldora sigue INFORMANDO e invitando
     al toque — «3/3 ▾» o «▶2 ▾» en vez de un punto mudo */
  .status-pill .pill-text { display: none; }
  .status-pill .pill-short { display: inline; }
  /* la topbar lleva 6 piezas de ancho fijo y solo el título es flexible: en
     móvil se le libera sitio o se queda en «Inic…». El nombre de usuario es lo
     más ancho y lo menos útil aquí (cada uno ya sabe quién es): fuera; queda
     «salir» limpio. Y todo un punto más holgado de alto para que respire. */
  .topbar { gap: .5rem; padding: .75rem .9rem; }
  .topbar h1 { font-size: 1rem; }
  .user-chip .uc-name { display: none; }
  .user-chip a::before { content: none; margin-right: 0; }
}
#sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; }
#sidebar-overlay.show { display: block; }
@media (min-width: 961px) {
  /* al ensanchar la ventana con el menú móvil abierto, el overlay no debe quedarse */
  #sidebar-overlay.show { display: none; }
}

/* ---------- editor de plantillas de notificación ---------- */
.tpl-editor summary {
  cursor: pointer; color: var(--muted); font-size: .85rem; font-weight: 600;
  padding: .4rem 0; user-select: none;
}
.tpl-editor summary:hover { color: var(--text); }
.tpl-editor textarea {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.45; min-height: 88px; resize: vertical;
}
.tpl-grid { display: grid; gap: .8rem; margin-top: .5rem; }
.ph-table { width: 100%; border-collapse: collapse; font-size: .76rem; margin-top: .4rem; }
.ph-table td { padding: .18rem .5rem .18rem 0; vertical-align: top; }
.ph-table td:first-child { font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #7fd4f5; white-space: nowrap; }
.ph-table td:last-child { color: var(--muted); }

/* ---------- página de cuentas ---------- */
.stat-card.warn .stat-num { color: var(--yellow); }
.stat-card.bad .stat-num { color: var(--red); }
.acct-cell { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.acct-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-weight: 700; font-size: .95rem;
}
.acct-avatar.off { background: var(--panel-2); color: var(--faint); }
.acct-info { min-width: 0; }
.acct-name, .acct-sub {
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-name { line-height: 1.3; }
.acct-sub { color: var(--muted); font-size: .78rem; }
.row-suspended .acct-name, .row-suspended .acct-sub { opacity: .65; }
.btn-icon { padding: .3rem .5rem; }
.row-actions { display: inline-flex; gap: .35rem; align-items: center; }
.tbl th.acts, .tbl td.acts { text-align: right; }
table.tbl.fit { min-width: 0; }
/* 1150px y no 860: con la barra lateral fija (232px) el área útil a 961-1150px
   es MÁS estrecha que a 860px sin barra; sin este margen la tabla desborda */
@media (max-width: 1150px) {
  .tbl .hide-sm { display: none; }
  .acct-name, .acct-sub { max-width: 220px; }
}
.qc-input {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.5rem; letter-spacing: .45em; text-align: center;
  padding: .6rem .4rem .6rem .85rem;
}
.modal-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.modal-actions-grid .btn { justify-content: flex-start; }
@media (max-width: 560px) { .modal-actions-grid { grid-template-columns: 1fr; } }

/* ---------- selector de destinatarios de correo ---------- */
.recip-picker { border: 1px solid var(--border); border-radius: var(--radius); margin-top: .6rem; overflow: hidden; }
.recip-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; background: var(--panel-2); flex-wrap: wrap; }
.recip-head .recip-count { font-size: .84rem; font-weight: 600; }
.recip-head .spacer { flex: 1; }
.recip-search { border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; background: var(--bg-soft) !important; }
.recip-list { max-height: 260px; overflow-y: auto; }
.recip-item { display: flex; align-items: center; gap: .6rem; padding: .4rem .7rem; border-bottom: 1px solid rgba(38,46,58,.5); font-size: .86rem; cursor: pointer; }
.recip-item:last-child { border-bottom: 0; }
.recip-item:hover { background: var(--panel-2); }
.recip-item input { flex-shrink: 0; }
.recip-item .ri-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recip-item .ri-mail { color: var(--muted); font-size: .78rem; }
.recip-item .ri-meta { color: var(--faint); font-size: .76rem; white-space: nowrap; }
.recip-empty { padding: 1rem; text-align: center; color: var(--muted); font-size: .85rem; }

/* ---------- temporadas y episodios (detalle tipo Tautulli) ---------- */
.season-card { position: relative; }
.season-card .bell {
  position: absolute; top: 6px; right: 6px;
  background: rgba(13, 16, 21, .82); border: 1px solid var(--border);
  border-radius: 8px; padding: .2rem .45rem; font-size: .85rem; cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.season-card:hover .bell { opacity: 1; }
.season-card .bell:hover { border-color: var(--accent-b); }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.ep-card { text-decoration: none; color: var(--text); }
.ep-card:hover { text-decoration: none; }
.ep-card img, .ep-card .ep-fallback {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px;
  background: var(--panel-2); display: block;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ep-card:hover img { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.ep-card .ep-fallback { display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 1.4rem; font-weight: 700; }
.ep-card .cap { font-size: .82rem; margin-top: .35rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ep-card .sub { font-size: .74rem; color: var(--muted); }
.crumb { margin-bottom: .7rem; font-size: .85rem; }

/* ---------- multi-servidor (Fase B): distintivos de plataforma y lista ---------- */
.acct-avatar { position: relative; }
.pf-dot {
  position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px;
  border-radius: 5px; overflow: hidden; display: flex; background: #1e1e24;
  border: 2px solid var(--panel);
}
.pf-dot svg { width: 100%; height: 100%; display: block; }
.pf-ico {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px;
  overflow: hidden; display: inline-flex; background: #1e1e24; margin-top: .15rem;
}
.pf-ico svg { width: 100%; height: 100%; display: block; }
.srv-row {
  display: flex; align-items: flex-start; gap: .8rem; padding: .8rem .15rem;
  border-bottom: 1px solid rgba(38, 46, 58, .55);
}
.srv-row:last-child { border-bottom: 0; }
.srv-info { flex: 1; min-width: 0; }
.srv-name { font-weight: 600; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.srv-sub { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
/* aviso de licencia de pago ausente (Plex Pass / Emby Premiere): ámbar, el
   mismo color con el que el panel marca «funciona, pero con límites» */
.lic-warn { margin: .35rem 0; padding: .45rem .6rem; border-radius: 8px;
  color: #f3d183; border: 1px solid rgba(231, 185, 60, .35);
  background: rgba(231, 185, 60, .08); line-height: 1.45; }
.lic-warn .muted { color: var(--muted); }
.pf-mini {
  display: inline-flex; width: 15px; height: 15px; border-radius: 4px;
  overflow: hidden; background: #1e1e24; vertical-align: -2px; flex-shrink: 0;
  margin-right: .3rem;
}
.pf-mini svg { width: 100%; height: 100%; display: block; }
.stream-card .poster-col {
  display: flex; flex-direction: column; gap: .4rem;
  align-items: stretch; flex-shrink: 0;
  width: 92px;                 /* = ancho del póster: TODAS las tarjetas iguales */
}
.stream-card .poster-col .badge {
  width: 100%; justify-content: center; font-size: .64rem;
  padding-left: .3rem; padding-right: .3rem;
}
.stream-card .poster-col .badge .lbl {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-ico.sm { width: 18px; height: 18px; margin-top: 0; margin-right: .35rem; vertical-align: -4px; }
.q-poster { width: 54px; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px;
  background: var(--panel-2); flex-shrink: 0; }

/* ---------- distintivo de servidor SOBRE el póster (multi-servidor) ---------- */
.pw { position: relative; display: block; line-height: 0; }
/* el hover eleva la carátula: la etiqueta va dentro del mismo marco y sube con ella */
.poster-item:hover .pw .pf-badge { transform: translateY(-4px); }
.pf-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(8, 10, 14, .78); backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px;
  padding: 3px 5px; transition: transform .18s ease; pointer-events: none;
}
.pf-badge .pf-mini { width: 15px; height: 15px; margin: 0; vertical-align: 0; }
.pf-badge .pf-mini svg { width: 100%; height: 100%; }
.q-pw { flex-shrink: 0; }
.q-pw img { width: 54px; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px;
  background: var(--panel-2); display: block; }
.q-pw .pf-badge { top: 4px; left: 4px; padding: 2px 4px; border-radius: 6px; }
.q-pw .pf-badge .pf-mini { width: 12px; height: 12px; }

/* ---------- chips de identificador externo (IMDb / TMDb) ---------- */
.id-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .4rem .1rem .25rem; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: .7rem; color: var(--muted); text-decoration: none; white-space: nowrap;
}
/* chip informativo: no navega a ninguna parte */
.id-chip .id-logo {
  font-weight: 800; font-size: .62rem; letter-spacing: .02em;
  padding: .1rem .3rem; border-radius: 3px; line-height: 1.15;
}
.id-chip.imdb .id-logo { background: #f5c518; color: #000; }
.id-chip.tmdb .id-logo { background: #01b4e4; color: #001b25; }
.alt-name { color: var(--muted); font-weight: 400; }

/* ---------- filas de resultado clicables (buscador de contenido) ---------- */
.row-link { text-decoration: none; color: inherit; border-radius: 10px;
  transition: background .12s ease; cursor: pointer; }
/* solo el buscador: carátula a la izquierda con el texto CENTRADO en vertical
   (las filas de Ajustes→Servidores comparten .srv-row y van alineadas arriba) */
.srv-row.row-link { align-items: center; padding: .55rem .5rem; }
.row-link:hover { background: var(--panel-2); text-decoration: none; }
.row-link:hover .row-go { opacity: 1; transform: translateX(0); }
.row-go { margin-left: auto; align-self: center; color: var(--muted); font-size: 1.15rem;
  opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease; }
/* el enlace del badge de servidor no arrastra el estilo de enlace */
.srv-link { text-decoration: none; }
.srv-link:hover .badge { border-color: var(--accent-b); color: var(--text); }
.avail-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-top: .7rem; padding-top: .6rem; border-top: 1px solid rgba(38, 46, 58, .55); }

/* ---- Guías del panel (Fase D) ---- */
.help-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--muted); font-weight: 700; font-size: .78rem;
  line-height: 1; cursor: pointer; flex: none; margin-left: .1rem; }
.help-btn:hover { color: var(--text); border-color: var(--accent, #7c4de0); }
.guide-box { max-width: 480px; }
.guide-head { display: flex; align-items: baseline; gap: .6rem; }
.guide-head h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.guide-count { font-size: .78rem; color: var(--muted); margin-left: auto; white-space: nowrap; }
.guide-body h3 { font-size: .98rem; margin: .7rem 0 .3rem; }
.guide-body p { margin: 0 0 .6rem; color: var(--muted); font-size: .93rem; line-height: 1.55; }
.guide-dots { display: flex; gap: .3rem; justify-content: center; margin: .5rem 0 .2rem; }
.guide-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.guide-dot.on { background: var(--accent, #7c4de0); }
@media (max-width: 640px) { .guide-box { max-width: 100%; } }
.guide-off { display: flex; gap: .45rem; align-items: center; font-size: .82rem;
  color: var(--muted); margin: .6rem 0 .1rem; cursor: pointer; }
.guide-off input { width: auto; flex: none; }

/* Texto recortado pulsable: la celda .trunc que NO cabe muestra su elipsis y,
   al pulsarla, abre el texto completo. Solo cambia el cursor cuando de verdad
   está cortada (la clase la pone app.js midiendo), para no prometer un clic
   donde no hay nada más que leer. */
.trunc.recortado { cursor: pointer; text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.trunc.recortado:hover { color: var(--text); }

.tc-back {
  position: fixed; inset: 0; background: rgba(6, 9, 14, .66);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; z-index: 60;
}
.tc-box {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
  max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.tc-box h3 { margin: 0 0 .6rem; font-size: .95rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; }
/* el texto va con salto de línea normal y respeta los que traiga */
.tc-box p { margin: 0; white-space: pre-wrap; word-break: break-word;
  line-height: 1.55; font-size: .92rem; }
.tc-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }