/* Editor de listas — mismo aire que IPTV Editor (ver docs/DISENO-IPTV-EDITOR.md) */

:root{
  --fondo:#15181e;      --panel:#1b1f27;      --panel2:#20252f;
  --borde:#2a303b;      --borde2:#353d4a;
  --texto:#c8cfd9;      --apagado:#7d8694;    --blanco:#eef2f7;
  --azul:#2f4f9e;       --azul-claro:#3d63c0; --azul-barra:#2b4a8f;
  --verde:#1f9d61;      --rojo:#c9414f;       --amarillo:#d9a441;
  --fila-sel:#2c4a8a;   --fila-ok:#1d6b47;
  --alto-barra:54px;    --ancho-lateral:222px;
  /* Anchos de las columnas del árbol. Se pueden mover arrastrando el borde de la
     cabecera (como en IPTV Editor) y el JS los repone al entrar. Los de fábrica
     están también en COLS_DEF de app.js: si se cambia uno, cambiar los dos. */
  --c-nom:260px;        --c-url:300px;        --c-epg:74px;   --c-est:62px;
  --c-sport:66px;       --c-spunt:110px;      --c-scaps:100px;
  --c-ficha:600px;      --ancho-tabla:0px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--fondo); color:var(--texto);
  font:14px/1.45 "Segoe UI",Roboto,Ubuntu,system-ui,sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
.oculto{display:none !important}
/* Entrar sin ver el cuadro del PIN: la clase la pone un script de dos líneas en
   la cabecera del index, antes de que la página se pinte. Ver index.html. */
html.ya-entro #pantallaPin{display:none !important}
html.ya-entro #app.oculto{display:block !important}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
input,select,button,textarea{font:inherit;color:inherit}
/* Un poco más gorda y más clara que antes: la de 10 px gris oscuro sobre fondo
   oscuro casi no se veía y Rafelin terminaba usando siempre la ruedita. */
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:#0e1116}
::-webkit-scrollbar-thumb{background:#525c6d;border-radius:7px;border:3px solid #0e1116}
::-webkit-scrollbar-thumb:hover{background:#6b7688}

/* ---------- PIN ---------- */
.pin-fondo{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#22304f 0%,#111319 70%);
}
.pin-caja{
  background:var(--panel);border:1px solid var(--borde);border-radius:14px;
  padding:38px 40px;width:340px;text-align:center;box-shadow:0 24px 60px #0009;
}
.logo-grande{font-size:22px;font-weight:800;letter-spacing:1.5px;color:var(--blanco);margin-bottom:6px}
.logo-grande span{display:block;font-size:12px;font-weight:600;color:var(--azul-claro);letter-spacing:4px}
.pin-texto{color:var(--apagado);font-size:13px;margin:16px 0 14px}
#campoPin{
  width:100%;background:#12151b;border:1px solid var(--borde2);border-radius:8px;
  padding:12px;text-align:center;font-size:26px;letter-spacing:10px;margin-bottom:14px;
}
#campoPin:focus{outline:none;border-color:var(--azul-claro)}
.pin-error{color:#e2707c;font-size:12.5px;min-height:18px;margin-top:10px}

/* ---------- Barra de arriba ---------- */
.barra{
  height:var(--alto-barra);background:var(--azul-barra);display:flex;align-items:center;
  gap:10px;padding:0 12px;position:relative;z-index:50;box-shadow:0 1px 6px #0006;
}
.buscador{position:relative;width:300px}
.buscador .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:#c2cee6;pointer-events:none}
.buscador input{
  width:100%;background:#e9eef7;color:#1b2129;border:none;border-radius:20px;
  padding:8px 14px 8px 34px;font-size:13px;
}
.buscador input::placeholder{color:#78818f}
.buscador input:focus{outline:2px solid #7ea3ec}
.barra-titulo{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;color:#fff;
  white-space:nowrap;pointer-events:none;
}
.ico-lapiz{width:16px;height:16px}
.barra-derecha{margin-left:auto;display:flex;align-items:center;gap:2px;position:relative}
.barra-ico{
  background:none;border:none;color:#dbe4f2;padding:7px;border-radius:6px;cursor:pointer;
  display:flex;align-items:center;
}
.barra-ico:hover:not(:disabled){background:#ffffff22}
.barra-ico:disabled{opacity:.35;cursor:default}

.menu-flotante{
  position:absolute;top:44px;right:0;min-width:290px;background:var(--panel2);
  border:1px solid var(--borde2);border-radius:8px;padding:6px 0;
  box-shadow:0 14px 40px #000a;z-index:80;
}
.menu-titulo{font-size:10.5px;letter-spacing:1.4px;color:var(--apagado);padding:8px 16px 6px}
.menu-flotante button{
  display:block;width:100%;text-align:left;background:none;border:none;
  padding:9px 16px;font-size:13.5px;color:var(--texto);cursor:pointer;
}
.menu-flotante button:hover{background:var(--azul);color:#fff}
.menu-sep{height:1px;background:var(--borde);margin:6px 0}

/* ---------- Armazón ---------- */
.cuerpo{display:flex;height:calc(100vh - var(--alto-barra))}

/* ---------- Columna izquierda ---------- */
.lateral{
  width:var(--ancho-lateral);background:#101319;border-right:1px solid var(--borde);
  display:flex;flex-direction:column;flex-shrink:0;transition:width .15s;
}
.lateral.plegada{width:58px}
.lateral.plegada .logo,.lateral.plegada .menu-item span,
.lateral.plegada .submenu,.lateral.plegada .lateral-pie,
.lateral.plegada .flecha{display:none}
.lateral-cabeza{display:flex;align-items:center;justify-content:space-between;
  padding:14px 12px 14px 16px;border-bottom:1px solid var(--borde)}
.logo{font-size:14px;font-weight:800;letter-spacing:1.1px;color:var(--blanco);line-height:1.15}
.logo span{display:block;font-size:9px;font-weight:600;color:var(--azul-claro);letter-spacing:2.6px}
.lateral-cabeza .barra-ico{color:var(--apagado)}
.lateral-cabeza .barra-ico:hover{background:#ffffff14}

.menu{flex:1;overflow-y:auto;padding:8px 0}
.menu-item{
  display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;
  padding:10px 16px;font-size:13.5px;color:var(--texto);cursor:pointer;text-align:left;
}
.menu-item:hover{background:#ffffff0d;color:var(--blanco)}
.menu-item.activo{color:#f2637a;background:#ffffff0a}
.menu-item.activo svg{color:#f2637a}
.menu-item svg{width:17px;height:17px;flex-shrink:0;color:var(--azul-claro)}
.menu-item.sub{padding:7px 16px 7px 46px;font-size:13px;color:var(--apagado)}
.menu-item.sub:hover{color:var(--blanco)}
.menu-item.sub.activo{color:#f2637a}
.flecha{margin-left:auto;width:0;height:0;border:4px solid transparent;
  border-left-color:var(--apagado);transition:transform .15s}
.tiene-hijos.abierto .flecha{transform:rotate(90deg) translateX(-2px)}
.submenu{display:none}
.submenu.abierto{display:block}
.punto-vivo{margin-left:auto;width:8px;height:8px;border-radius:50%;background:#25c26a;
  box-shadow:0 0 0 0 #25c26a99;animation:latido 1.8s infinite}
@keyframes latido{70%{box-shadow:0 0 0 7px #25c26a00}100%{box-shadow:0 0 0 0 #25c26a00}}

.lateral-pie{padding:12px 16px;border-top:1px solid var(--borde)}
.lista-activa{font-size:11.5px;color:var(--apagado);margin-bottom:6px;line-height:1.35}
.lista-activa b{display:block;color:var(--texto);font-size:12.5px;font-weight:600}
.version{font-size:10.5px;color:#5b6472;letter-spacing:.4px}

/* ---------- Contenido ---------- */
.contenido{flex:1;overflow:auto;padding:16px;min-width:0}

/* ---------- Mis listas (tarjetas) ---------- */
.tarjetas{display:flex;flex-direction:column;gap:14px;max-width:1180px}
.tarjeta{
  background:var(--panel);border:1px solid var(--borde);border-radius:10px;
  padding:20px 24px;display:grid;grid-template-columns:1.5fr 1fr .7fr 1fr 1fr auto;
  gap:18px;align-items:center;
}
.tarjeta:hover{border-color:var(--borde2)}
.tarjeta .nombre{font-size:15px;font-weight:600;color:var(--blanco)}
.tarjeta .nombre small{display:block;font-size:11px;color:var(--apagado);font-weight:400;margin-top:3px}
.tarjeta .cifras{font-size:12.5px;color:var(--texto);line-height:1.7}
.tarjeta .campo{font-size:12.5px}
.tarjeta .campo b{display:block;color:var(--blanco);font-weight:600;margin-bottom:3px;font-size:12px}
.tarjeta .campo span{color:var(--apagado)}
.tarjeta .acciones{display:flex;gap:6px}
.btn-ico{
  background:var(--panel2);border:1px solid var(--borde2);border-radius:6px;
  padding:7px 9px;cursor:pointer;color:var(--texto);display:flex;
}
.btn-ico:hover{background:var(--azul);border-color:var(--azul);color:#fff}
.btn-ico.peligro:hover{background:var(--rojo);border-color:var(--rojo)}

.cabeza-vista{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cabeza-vista h2{font-size:17px;font-weight:600;color:var(--blanco)}
.cabeza-vista .crece{flex:1}

/* ---------- Editor: dos columnas ---------- */
/* El ancho de la ficha de la derecha lo corre él con el divisor: así puede darle
   toda la pantalla a la lista y ver el nombre y la dirección enteros a la vez. */
.editor{display:grid;grid-template-columns:minmax(0,1fr) var(--c-ficha);
  gap:16px;height:calc(100vh - var(--alto-barra) - 32px);position:relative}
.editor.sin-ficha{grid-template-columns:minmax(0,1fr)}
.editor.sin-ficha .ficha{display:none}
.arbol-caja,.ficha{
  background:var(--panel);border:1px solid var(--borde);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;min-width:0;
}

/* Divisor entre la lista y la ficha. Se arrastra; doble clic la esconde o la trae. */
.divisor{
  position:absolute;top:0;bottom:0;width:15px;z-index:6;cursor:col-resize;
  right:calc(var(--c-ficha) + 1px);
}
.editor.sin-ficha .divisor{right:0}
/* Escondida la ficha, el divisor es lo único que queda para traerla: que se vea. */
.editor.sin-ficha .divisor::after{background:var(--azul-claro);opacity:.75}
.divisor::after{
  content:'';position:absolute;left:6px;top:0;bottom:0;width:3px;border-radius:3px;
  background:var(--borde2);transition:background .12s;
}
.divisor:hover::after,.divisor.tirando::after{background:var(--azul-claro)}
/* La cabecera y la lista viajan juntas dentro de este envoltorio: así, cuando la
   tabla no entra a lo ancho, la barra de abajo las corre a las dos a la vez y los
   títulos nunca se despegan de sus columnas. */
/* El scroll —el de arriba a abajo Y el de lado a lado— va en ESTE envoltorio, no
   en `.arbol`. Antes lo tenía `.arbol`, que con la tabla ancha mide más que la
   caja: su barra de bajar quedaba ~100 px fuera de la vista y solo se podía
   recorrer la lista con la ruedita del mouse (pedido de Rafelin, 2026-08-02).
   Acá la barra cae siempre en el borde derecho de lo que se ve. */
.arbol-scroll{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.arbol-caja.tabla-ancha .arbol-cabecera,
.arbol-caja.tabla-ancha .arbol{min-width:var(--ancho-tabla)}

/* Mismo padding que las filas: ahora la barra de bajar vive en `.arbol-scroll`,
   fuera de la tabla, así que ya no hay que reservarle hueco acá para que los
   títulos queden a plomo con sus columnas.
   `sticky` porque el scroll pasó al envoltorio: sin esto la cabecera se iba para
   arriba al bajar por la lista. */
.arbol-cabecera{
  display:grid;
  grid-template-columns:34px var(--c-nom) minmax(var(--c-url),1fr) 74px var(--c-epg) var(--c-est);
  padding:9px 10px;font-size:11.5px;color:var(--apagado);
  border-bottom:1px solid var(--borde);background:var(--panel2);flex-shrink:0;
  position:sticky;top:0;z-index:6;
}
/* `position:relative` para poder colgarle la manija; SIN overflow:hidden, que
   recortaría la manija (asoma 5 px hacia afuera para poder agarrarla). */
.arbol-cabecera span{border-left:1px solid var(--borde2);padding-left:9px;
  position:relative;white-space:nowrap}
.arbol-cabecera span:first-child{border:none}
/* "Dirección" tapa dos columnas: la del enlace y la del botón ▶ (que no tiene título). */
.arbol-cabecera .cab-doble{grid-column:span 2}

/* Manija para ensanchar una columna arrastrando, como en IPTV Editor.
   Va pegada al borde IZQUIERDO de su título y es más ancha que la línea para
   que se pueda agarrar sin puntería. Doble clic = vuelve al ancho de fábrica. */
.manija{
  position:absolute;left:-5px;top:0;bottom:0;width:11px;z-index:3;
  cursor:col-resize;
}
.manija:hover::after,.manija.tirando::after{
  content:'';position:absolute;left:4px;top:0;bottom:0;width:2px;
  background:var(--azul-claro);
}
/* Mientras se arrastra, que no se seleccione texto ni cambie el cursor por la fila. */
body.midiendo{user-select:none;cursor:col-resize}
/* Las otras vistas (logos, portadas, clientes, capítulos) no llevan envoltorio:
   ahí el que se desplaza sigue siendo `.arbol`, como siempre. */
.arbol{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}
/* Dentro del envoltorio manda él: si los dos tuvieran scroll, quedarían dos
   barras, una encima de la otra. */
.arbol-scroll .arbol{overflow:visible;scrollbar-gutter:auto}

.cat{
  display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid #22262f;user-select:none;
}
.cat:hover{background:#ffffff08}
/* Cabecera chica que dice de qué carpeta sale cada resultado de la búsqueda.
   No se abre ni se cierra (no tiene data-cat): es solo para ubicarse. */
.cat-resultado{display:flex;align-items:center;gap:8px;padding:6px 10px 4px 34px;
  background:transparent;border-bottom:1px solid #22262f}
.cat-resultado .nom{font-size:11px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--apagado)}
/* La categoría ABIERTA se queda pegada arriba mientras se recorren sus canales.
   Sin esto, en una categoría de 300 canales había que subir hasta el principio
   solo para cerrarla (pedido de Rafelin, 2026-08-01).
   ⚠️ Dos cosas de las que depende y que no hay que romper:
     · cada categoría vive dentro de su `.grupo-cat` (si no, la cabecera queda
       clavada hasta el final de TODA la lista);
     · el `.grupo-cat` NO puede llevar overflow ni transform: matan el sticky. */
.grupo-cat{position:relative}
/* `top:36px` = el alto medido de la cabecera de columnas, que ahora también es
   sticky: si fuera 0, la categoría abierta se metería debajo de los títulos. */
.cat.abierta{
  position:sticky;top:36px;z-index:5;
  background:var(--panel2);
  box-shadow:0 2px 8px #0007;
}
.cat.abierta:hover{background:#2a3040}
.cat .tri{width:0;height:0;border:5px solid transparent;border-left-color:var(--apagado);
  flex-shrink:0;transition:transform .12s}
.cat.abierta .tri{transform:rotate(90deg) translate(-2px,2px)}
.cat .nom{font-size:13px;font-weight:600;color:var(--blanco);letter-spacing:.2px}
.cat .cant{font-size:12px;color:var(--apagado)}
.cat .llave{font-size:10px;padding:1px 6px;border-radius:9px;background:#3a3050;color:#c4a7f0}

/* ---- Categorías agrupadas por sección de la APK PRO ----
   Solo una forma de mirar: el orden real de la lista no cambia. La cabecera de
   la sección se queda pegada arriba (top:0) y la de la categoría abierta debajo
   (top:36px), así se sabe siempre en qué sección se está parado. */
.seccion-apk{position:relative}
.seccion-apk.plegada .sec-hijos{display:none}
.sec-cab{
  display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;
  position:sticky;top:0;z-index:6;user-select:none;
  background:linear-gradient(90deg,#2b3550,#232838);
  border-top:1px solid var(--borde2);border-bottom:1px solid #1a1e26;
}
.sec-cab:hover{background:linear-gradient(90deg,#324063,#272d3f)}
.sec-cab .tri{width:0;height:0;border:5px solid transparent;
  border-left-color:#9fb2d8;flex-shrink:0;transition:transform .12s}
.sec-cab.abierta .tri{transform:rotate(90deg) translate(-2px,2px)}
.sec-cab .sec-nom{font-size:13px;font-weight:700;color:#dfe8f7;letter-spacing:.3px}
.sec-cab .cant{font-size:11.5px;color:#93a2bd;margin-left:auto}
.ver-secciones{display:flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--apagado);cursor:pointer;user-select:none}
.ver-secciones:hover{color:var(--texto)}
.ver-secciones input{cursor:pointer}

.fila{
  display:grid;
  grid-template-columns:34px var(--c-nom) minmax(var(--c-url),1fr) 74px var(--c-epg) var(--c-est);
  align-items:center;
  padding:6px 10px;cursor:pointer;border-bottom:1px solid #1f232b;font-size:13px;
}
.fila:hover{background:#ffffff0a}
.fila.sel{background:var(--fila-sel)}
.fila.sel .url,.fila.sel .celda{color:#d7e2f7}
.fila.guardada{background:var(--fila-ok)}
.fila .agarre{color:#4d5666;cursor:grab;font-size:12px;letter-spacing:-1px;line-height:1}
.fila .titulo{display:flex;align-items:center;gap:9px;min-width:0}
.fila .logo{width:26px;height:20px;object-fit:contain;flex-shrink:0;
  background:#0e1116;border-radius:3px}
.fila .nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .url,.fila .celda{color:var(--apagado);font-size:12px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding-left:9px}
.fila.oculta .nom{opacity:.45;text-decoration:line-through}
.fila .marca{font-size:10px;padding:1px 5px;border-radius:8px;margin-left:6px}
.marca.nuevo{background:#1d4b33;color:#6fdca2}
.marca.caido{background:#4b1d22;color:#ef8b96}
/* Categoría escondida: se sigue viendo acá (hay que poder editarla), pero
   apagada, para que se note de un vistazo que el cliente NO la recibe. */
.marca.escondida{background:#3b3f4a;color:#aab3c2;font-size:10px;padding:1px 6px;
  border-radius:8px;margin-left:6px}
.cat.cat-oculta .nom{opacity:.5}
.cat.cat-oculta .cant{opacity:.5}
.cargar-mas{padding:9px;text-align:center;color:var(--azul-claro);font-size:12.5px;
  cursor:pointer;border-bottom:1px solid #1f232b}
.cargar-mas:hover{background:#ffffff08}
.vacio{padding:34px;text-align:center;color:var(--apagado);font-size:13px}

/* ---------- Ficha de la derecha ---------- */
.ficha{padding:18px 20px;overflow-y:auto}
.ficha .logo-vista{
  width:110px;height:78px;object-fit:contain;background:#0e1116;border-radius:6px;
  border:1px solid var(--borde);margin:0 auto 16px;display:block;
}
.campo-bloque{margin-bottom:13px}
.campo-bloque label{display:block;font-size:12.5px;color:var(--texto);margin-bottom:5px}
.campo-bloque input,.campo-bloque select,.campo-bloque textarea{
  width:100%;background:var(--panel2);border:1px solid var(--borde2);border-radius:6px;
  padding:9px 11px;font-size:13px;color:var(--blanco);
}
.campo-bloque input:focus,.campo-bloque select:focus{outline:none;border-color:var(--azul-claro)}
.campo-bloque input:disabled{opacity:.5}
.dos-columnas{display:grid;grid-template-columns:1fr 110px;gap:11px}
.fila-mover{display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:end;margin-bottom:13px}
.casillas{display:flex;gap:24px;margin:14px 0}
.casilla{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--texto);cursor:pointer}
.casilla input{width:15px;height:15px;accent-color:var(--azul-claro)}

.btn{
  border:none;border-radius:6px;padding:10px 16px;font-size:13.5px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.btn:disabled{opacity:.45;cursor:default}
.btn.ancho{width:100%}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover:not(:disabled){background:#25b673}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-rojo:hover:not(:disabled){background:#dc4f5d}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover:not(:disabled){background:var(--azul-claro)}
.btn-gris{background:var(--panel2);border:1px solid var(--borde2);color:var(--texto)}
.btn-gris:hover:not(:disabled){background:#2a303c;color:var(--blanco)}
.btn-oscuro{background:#1c2842;border:1px solid #2c3d63;color:#b9c9e8}
.btn-oscuro:hover:not(:disabled){background:#243357}
.botonera{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.botonera .btn{width:100%}

/* ---------- Editor de logos ---------- */
.arbol-cabecera.cab-logos{grid-template-columns:34px 92px 1fr}
.fila.fila-logos{grid-template-columns:34px 92px 1fr;padding:8px 10px}
.fila-logos .celda-logo{display:flex;align-items:center;justify-content:center}
.fila-logos .logo{width:52px;height:34px}
.marca.sinlogo{background:#4a3a1c;color:#e8c37a}

.cabeza-logo{display:flex;gap:18px;align-items:flex-start;margin-bottom:16px}
.cabeza-logo .logo-vista{margin:0;flex-shrink:0;width:130px;height:92px}
.cabeza-logo .crece{flex:1;min-width:0}
.tres-botones{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:6px}
.dos-botones{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tres-botones .btn,.dos-botones .btn{width:100%;padding:10px 8px;font-size:12.5px}
.btn-rojo-suave{background:#8e2f3c;color:#fff}
.btn-rojo-suave:hover:not(:disabled){background:#a83a48}
.sub-titulo{font-size:13px;color:var(--texto);font-weight:600;margin:20px 0 11px}
.fila-buscar{display:grid;grid-template-columns:1fr auto;gap:9px;margin-bottom:14px}
.fila-buscar input{background:var(--panel2);border:1px solid var(--borde2);border-radius:6px;
  padding:9px 11px;font-size:13px;color:var(--blanco)}
.fila-buscar input:focus{outline:none;border-color:var(--azul-claro)}

.grilla-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.tarjeta-logo{background:#f2f5fa;border:1px solid var(--borde2);border-radius:7px;
  padding:11px;cursor:pointer;transition:transform .1s,border-color .1s;overflow:hidden}
.tarjeta-logo:hover{border-color:var(--azul-claro);transform:translateY(-2px)}
.tarjeta-logo.grande{border-color:#8a6a1e}
.tarjeta-logo img{width:100%;height:62px;object-fit:contain;display:block}
.pie-logo{font-size:10px;color:#4b5563;margin-top:7px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pie-logo span{display:block;color:#8b93a1;font-size:9.5px;margin-top:2px}
/* De qué fuente salió cada logo: se ve de un vistazo cuál es de IPTV Editor. */
.pie-logo span.de-donde{display:inline-block;margin:3px 0 0;padding:1px 6px;
  border-radius:9px;font-size:9px;font-weight:600;letter-spacing:.2px;
  background:#e6ebf3;color:#5a6474}
.pie-logo span.de-donde.f-m3uassets{background:#1f6feb22;color:#2f6fd0}
.pie-logo span.de-donde.f-tv-logos{background:#1f8b4c22;color:#2e8b57}
.pie-logo span.de-donde.f-iptv-org{background:#8b5cf622;color:#8b5cf6}
.pie-logo span.de-donde.f-mios{background:#f59e0b22;color:#d98b0a}
.pie-logo span.de-donde.f-motor247{background:#0ea5e922;color:#0284c7}

/* En qué base buscar el logo. Rafelin las quiere separadas: busca en una y,
   si el canal no está, toca la de al lado. */
.fuentes-logo{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 9px}
.chip{background:var(--panel2);border:1px solid var(--borde2);color:var(--apagado);
  border-radius:20px;padding:5px 13px;font-size:11.5px;cursor:pointer;
  font-family:inherit;transition:background .12s,color .12s}
.chip:hover{background:var(--borde);color:var(--blanco)}
.chip.activo{background:var(--azul);border-color:var(--azul-claro);color:#fff;font-weight:600}

.lista-casillas{max-height:210px;overflow-y:auto;background:var(--panel2);
  border:1px solid var(--borde2);border-radius:6px;padding:11px 13px;
  display:flex;flex-direction:column;gap:9px}

/* ---------- Quién está viendo ---------- */
.tablero{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px;margin-bottom:18px}
.dato{background:var(--panel);border:1px solid var(--borde);border-radius:9px;padding:17px 19px}
.dato .num{font-size:29px;font-weight:700;color:var(--blanco);line-height:1.1}
.dato .num.vivo{color:#3fd483}
.dato .num.caido{color:#ef8b96}

/* Selección múltiple (Ctrl / Shift), como en IPTV Editor. La fila abierta en la
   ficha lleva `.sel`; las marcadas en lote, `.marcada`. */
.fila.marcada{background:#1e3358;box-shadow:inset 3px 0 0 var(--azul-claro)}
.fila.marcada:hover{background:#24406e}
.barra-marcados{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--panel2);border:1px solid var(--borde2);border-radius:11px;
  padding:11px 15px;box-shadow:0 16px 44px #000a;max-width:94vw}
.barra-marcados b{font-size:13px;color:var(--blanco);white-space:nowrap}
.barra-marcados select{margin:0;max-width:210px}
.barra-marcados .btn{padding:7px 13px;font-size:12.5px}

/* Mis reglas: una tarjeta por regla, leída como una frase.
   Gana la primera que coincide, así que el ORDEN importa: por eso las flechas. */
.regla{background:var(--panel2);border:1px solid var(--borde);border-radius:9px;
  padding:13px 15px;margin-bottom:11px}
.regla-cabeza{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.regla-cabeza .rTitulo{flex:1;min-width:0}
.regla-cabeza .btn{padding:6px 11px;font-size:12px}
.regla-linea{display:flex;align-items:center;gap:9px;margin-top:8px;flex-wrap:wrap}
.regla-linea>span{font-size:12.5px;color:var(--apagado);white-space:nowrap}
.regla-linea select,.regla-linea input{margin:0}
.regla-linea .crece{flex:1;min-width:120px}
.regla-linea.chica{margin-top:11px;padding-top:10px;border-top:1px solid var(--borde)}
.regla-linea.chica>span{font-size:11.5px}
.regla-linea.chica input{max-width:190px}
.dato .eti{font-size:12px;color:var(--apagado);margin-top:5px}
.bloque{background:var(--panel);border:1px solid var(--borde);border-radius:9px;
  padding:17px 19px;margin-bottom:15px}
.bloque h3{font-size:14px;color:var(--blanco);margin-bottom:13px;display:flex;
  align-items:center;gap:9px;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11.5px;color:var(--apagado);font-weight:600;
   padding:7px 9px;border-bottom:1px solid var(--borde)}
td{padding:8px 9px;border-bottom:1px solid #22262f}
tr:last-child td{border-bottom:none}
tr:hover td{background:#ffffff06}
.pastilla{background:#1d4b33;color:#6fdca2;padding:2px 9px;border-radius:11px;
  font-size:11.5px;font-weight:600}
.cat-chica{color:var(--apagado);font-size:11.5px}

/* ---------- Ventanas ---------- */
.velo{position:fixed;inset:0;background:#000a;backdrop-filter:blur(2px);
  z-index:150;display:flex;align-items:center;justify-content:center;padding:20px}
.ventana{background:var(--panel);border:1px solid var(--borde2);border-radius:11px;
  width:100%;max-width:660px;max-height:88vh;overflow-y:auto;box-shadow:0 26px 70px #000b}
.ventana-cabeza{display:flex;align-items:center;justify-content:space-between;
  padding:17px 22px;border-bottom:1px solid var(--borde)}
.ventana-cabeza h3{font-size:15.5px;color:var(--blanco);font-weight:600}
.ventana-cuerpo{padding:22px}
.ventana-pie{display:flex;justify-content:space-between;gap:11px;
  padding:15px 22px;border-top:1px solid var(--borde)}
.cerrar{background:none;border:none;color:var(--apagado);cursor:pointer;padding:5px}
.cerrar:hover{color:var(--blanco)}

/* pasos del asistente, como los de IPTV Editor */
.pasos{display:flex;align-items:center;justify-content:center;margin:8px 0 26px}
.paso{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.paso .bola{width:38px;height:38px;border-radius:50%;background:var(--azul);
  display:flex;align-items:center;justify-content:center;color:#fff}
.paso.apagado .bola{background:#39414f}
.paso .eti{font-size:10.5px;letter-spacing:1.1px;color:var(--apagado)}
.union{height:2px;width:130px;background:var(--azul);margin:0 0 22px}
.union.apagada{background:#39414f}

.opciones{display:flex;flex-direction:column;gap:13px;margin-bottom:8px}
.opcion{display:flex;align-items:center;gap:11px;font-size:13.5px;cursor:pointer}
.opcion input{width:16px;height:16px;accent-color:var(--azul-claro)}
.opcion.desactivada{opacity:.45;cursor:default}
.aviso-caja{background:#3a2f1a;border:1px solid #6b5423;border-radius:7px;
  padding:13px 15px;font-size:12.5px;color:#e8cf9a;margin:14px 0;line-height:1.5}
.aviso-caja b{color:#ffd98a}
.info-caja{background:#16283f;border:1px solid #24446b;border-radius:7px;
  padding:13px 15px;font-size:12.5px;color:#a9c8ea;margin:14px 0;line-height:1.5}
.resultado{background:#12151b;border:1px solid var(--borde);border-radius:7px;
  padding:13px 15px;font-size:12.5px;max-height:230px;overflow-y:auto;
  font-family:ui-monospace,monospace;line-height:1.6;margin-top:14px}
.resultado small{color:var(--apagado);word-break:break-all}

/* «a qué se lo aplico»: varias categorías con buscador, como IPTV Editor */
.opciones.alcance{margin-top:16px}
.cat-buscar{display:flex;gap:8px;margin:12px 0 8px}
.cat-buscar input{flex:1}
.cat-buscar .btn{padding:7px 13px;font-size:12px}
.cat-lista{max-height:210px;overflow-y:auto;border:1px solid var(--borde);
  border-radius:7px;background:#12151b;padding:5px 0}
.cat-fila{padding:6px 13px;justify-content:flex-start}
.cat-fila:hover{background:var(--panel2)}
.cat-fila span{flex:1}
.cat-fila i{font-style:normal;font-size:11px;color:var(--apagado)}
.cat-cuenta{font-size:11.5px;color:var(--apagado);margin-top:7px}

/* Las reglas del actualizador: una fila por categoría con sus TRES casillas
   (nombre del proveedor · nuevos arriba · borrar lo de ayer).
   Listas de 373 categorías (como las de IPTV Editor) no entran en pantalla. */
.reglas-cabeza{display:flex;align-items:flex-end;gap:0;padding:0 13px 6px;
  font-size:9.5px;line-height:1.25;color:var(--apagado);text-align:center;
  text-transform:uppercase;letter-spacing:.3px}
.reglas-cabeza .crece,.regla-fila .crece{flex:1;min-width:0}
.reglas-cabeza span:not(.crece){width:62px;flex:none}
.regla-fila{display:flex;align-items:center;gap:0;padding:6px 13px;
  font-size:12.5px;color:var(--texto)}
.regla-fila:hover{background:var(--panel2)}
.regla-fila i{font-style:normal;font-size:11px;color:var(--apagado);margin-left:5px}
.regla-fila .marca{width:62px;flex:none;display:flex;justify-content:center;cursor:pointer}
.regla-fila .marca input{width:15px;height:15px;accent-color:var(--azul-claro);cursor:pointer}

/* ventana de proceso */
.ventana-proceso{background:var(--panel);border:1px solid var(--borde2);border-radius:11px;
  padding:28px 34px;width:410px;text-align:center;box-shadow:0 26px 70px #000b}
.proceso-titulo{font-size:15.5px;color:var(--blanco);font-weight:600;margin-bottom:9px}
.proceso-linea{font-size:12.5px;color:var(--apagado);margin-bottom:18px;min-height:18px}
.rueda{width:26px;height:26px;border:3px solid #2f3949;border-top-color:var(--azul-claro);
  border-radius:50%;margin:0 auto 16px;animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.proceso-barra{height:5px;background:#252b36;border-radius:3px;overflow:hidden;margin-bottom:12px}
.proceso-barra div{height:100%;background:var(--azul-claro);width:0;transition:width .3s}
.proceso-pie{font-size:11px;color:#5b6472}
/* «Parar»: solo sale en los trabajos largos (logos, portadas). */
.ventana-proceso #btnParar{margin-top:15px;padding:8px 22px;font-size:12.5px}

/* avisos flotantes */
.avisos{position:fixed;top:66px;left:50%;transform:translateX(-50%);z-index:180;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.aviso{background:#1d6b47;color:#fff;padding:11px 19px;border-radius:9px;font-size:13px;
  box-shadow:0 10px 30px #0008;display:flex;align-items:center;gap:10px;
  animation:entrar .22s ease-out;max-width:640px}
.aviso.malo{background:#a63744}
.aviso.ojo{background:#8a6a1e}
@keyframes entrar{from{opacity:0;transform:translateY(-12px)}}

@media(max-width:1100px){
  .editor{grid-template-columns:1fr;height:auto}
  .arbol-caja{height:62vh}
  .tarjeta{grid-template-columns:1fr 1fr;gap:12px}
}

/* filtro del editor de logos */
.barra-filtro{display:flex;align-items:center;gap:12px;padding:9px 12px;
  background:var(--panel2);border-bottom:1px solid var(--borde);flex-shrink:0}
.barra-filtro .casilla{font-size:12.5px}
.barra-filtro .crece{flex:1}

/* ---------- Editor de portadas ---------- */
.arbol-cabecera.cab-portadas{grid-template-columns:34px 66px 1fr 96px}
.fila.fila-portadas{grid-template-columns:34px 66px 1fr 96px;padding:6px 10px}
.fila-portadas .celda-portada{display:flex;align-items:center;justify-content:center}
.mini-portada{width:34px;height:50px;object-fit:cover;border-radius:3px;background:#0e1116;display:block}

.cabeza-portada{display:flex;gap:18px;align-items:flex-start;margin-bottom:16px}
.portada-vista{width:132px;height:198px;object-fit:cover;border-radius:7px;
  background:#0e1116;border:1px solid var(--borde);flex-shrink:0;display:block}
.cabeza-portada .crece{flex:1;min-width:0}

.grilla-portadas{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.tarjeta-portada{background:#0e1116;border:1px solid var(--borde2);border-radius:7px;
  overflow:hidden;cursor:pointer;transition:transform .1s,border-color .1s}
.tarjeta-portada:hover{border-color:var(--azul-claro);transform:translateY(-2px)}
.tarjeta-portada img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.pie-portada{font-size:10px;color:var(--texto);padding:7px 6px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pie-portada span{display:block;color:var(--apagado);font-size:9.5px;margin-top:2px}

/* ---------- Clientes ---------- */
/* Pantalla «Dónde cae cada categoría» */
.arbol-cabecera.cab-llaves{grid-template-columns:36px 82px minmax(180px,1.4fr) 74px 168px 1fr 1fr 1fr}
.fila.fila-llave{grid-template-columns:36px 82px minmax(180px,1.4fr) 74px 168px 1fr 1fr 1fr;
  padding:7px 10px;cursor:default}
/* Pantalla «El Cine en la TV» (los carruseles) */
.arbol-cabecera.cab-cine{grid-template-columns:44px minmax(220px,1.6fr) 110px 120px 1fr 132px}
.fila.fila-cine{grid-template-columns:44px minmax(220px,1.6fr) 110px 120px 1fr 132px;
  padding:7px 10px;cursor:default;align-items:center}
.fila.fila-cine.apagada{opacity:.45}
.acciones-cine{display:flex;gap:4px;justify-content:flex-end}
.btn.chico{padding:2px 8px;font-size:12px;min-width:0}
.cine-cats{display:flex;flex-wrap:wrap;gap:5px;padding:2px 12px 9px 56px}
.cine-cats .chip{font-size:11.5px;padding:2px 7px;border-radius:10px;
  background:var(--fondo2);border:1px solid var(--borde);color:var(--tenue)}
.cine-cats .chip.clavado{border-color:#4c9f70;color:#8fe0b0}
body.claro .cine-cats .chip.clavado{color:#1d7a4a}
.fila-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}

/* El desplegable que le clava la sección a una categoría. En verde cuando está
   clavada por nombre: de un vistazo se ve cuáles dependen todavía de una palabra. */
.sel-seccion{max-width:158px;font-size:12px;padding:3px 4px;border-radius:6px;
  background:var(--fondo2);color:var(--texto);border:1px solid var(--borde)}
.sel-seccion.fijada{border-color:#4c9f70;color:#8fe0b0}
body.claro .sel-seccion.fijada{color:#1d7a4a}
.fila.fila-llave.peligro{background:#3a1f24}
.fila.fila-llave.peligro:hover{background:#48262c}
.fila.fila-llave.choque{background:#3a331a}
.fila.fila-llave.choque:hover{background:#474025}
.marca.choque{background:#5a4a1c;color:#e8cf8a}
.marca.choque a{color:#ffd86b;text-decoration:underline}
.tabla-tipos{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.fila-tipo{background:var(--panel2);border:1px solid var(--borde);border-radius:6px;
  padding:8px 12px;font-size:13px}
.fila-tipo .cat-chica{display:block;margin-top:3px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.filtros-llave{display:flex;gap:7px;flex-wrap:wrap}
.filtros-llave .btn{padding:5px 11px;font-size:12.5px}
body.claro .fila.fila-llave.peligro{background:#fdeaec}

.arbol-cabecera.cab-clientes{grid-template-columns:56px 1fr 150px 78px}
.fila.fila-cliente{grid-template-columns:56px 1fr 150px 78px;padding:9px 10px}
/* La casilla de «ya lo pasé a M3» (mudanza desde IPTV Editor). */
.fila-cliente .celda-mudado{display:flex;align-items:center;justify-content:center}
.fila-cliente .celda-mudado input{width:16px;height:16px;cursor:pointer}
.fila-cliente.pasado .nom{opacity:.55}
.fila-cliente.porvencer{background:#43302a}
.fila-cliente.vencido{background:#4a2028}
.fila-cliente.sel{background:var(--fila-sel)}
.busca-chica{background:var(--panel);border:1px solid var(--borde2);border-radius:6px;
  padding:6px 11px;font-size:12.5px;color:var(--blanco);width:210px}
.busca-chica:focus{outline:none;border-color:var(--azul-claro)}
.ficha textarea{width:100%;background:var(--panel2);border:1px solid var(--borde2);
  border-radius:6px;padding:9px 11px;font-size:13px;color:var(--blanco);resize:vertical}
.ficha textarea:focus{outline:none;border-color:var(--azul-claro)}

.tres-selectores{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px}
.selector-cats{position:relative;min-width:0}
.selector-cats>label{display:block;font-size:12px;color:var(--texto);margin-bottom:5px}
.caja-selector{width:100%;display:flex;align-items:center;gap:7px;background:var(--panel2);
  border:1px solid var(--borde2);border-radius:6px;padding:9px 11px;font-size:12.5px;
  color:var(--blanco);cursor:pointer;text-align:left}
.caja-selector:hover{border-color:var(--azul-claro)}
.resumen-sel{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flecha-abajo{width:0;height:0;border:4px solid transparent;border-top-color:var(--apagado);
  margin-top:4px;flex-shrink:0}
/* ⚠️ `position:fixed`, no absolute: la ficha del cliente tiene `overflow-y:auto`
   y su panel `overflow:hidden`, así que un menú absoluto queda RECORTADO por
   ellos —el de «Categorías de series» se veía cortado por la derecha y, al
   abrirlo hacia el otro lado, por la izquierda—. Con fixed no lo recorta nadie;
   la posición la calcula `ubicarDesplegable()` al abrirlo. */
.desplegable-cats{position:fixed;z-index:200;
  background:var(--panel2);border:1px solid var(--borde2);border-radius:7px;
  box-shadow:0 14px 40px #000b;width:320px;max-width:calc(100vw - 16px)}
.fila-buscar-cats{display:flex;gap:6px;padding:9px;border-bottom:1px solid var(--borde)}
.busca-cats{flex:1;min-width:0;background:var(--panel);border:1px solid var(--borde2);
  border-radius:5px;padding:6px 9px;font-size:12px;color:var(--blanco)}
.busca-cats:focus{outline:none;border-color:var(--azul-claro)}
.btn.chico{padding:5px 10px;font-size:11.5px}
.opciones-cats{max-height:250px;overflow-y:auto;padding:7px 0}
.opcion-cat{display:flex;align-items:center;gap:9px;padding:6px 12px;font-size:12.5px;cursor:pointer}
.opcion-cat:hover{background:#ffffff0a}
.opcion-cat span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opcion-cat b{font-weight:400;flex-shrink:0}

/* ---------- Editor de números y de guía ---------- */
.arbol-cabecera.cab-simple{grid-template-columns:34px 1fr 190px}
.fila.fila-simple{grid-template-columns:34px 1fr 190px;padding:5px 10px}
.celda-editable{padding-left:9px}
.celda-editable input{width:100%;background:var(--panel2);border:1px solid var(--borde2);
  border-radius:5px;padding:5px 9px;font-size:12.5px;color:var(--blanco)}
.celda-editable input:focus{outline:none;border-color:var(--azul-claro);background:var(--panel)}

/* ---------- Interruptor de modo (como el NIGHT MODE del original) ---------- */
.modo-noche{display:flex;align-items:center;gap:9px;margin-bottom:12px;cursor:pointer;
  font-size:10.5px;letter-spacing:1.1px;color:var(--apagado)}
.modo-noche input{display:none}
.modo-noche .palanca{width:34px;height:18px;border-radius:10px;background:#39414f;
  position:relative;transition:background .15s;flex-shrink:0;margin-left:auto}
.modo-noche .palanca::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:#8a95a5;transition:transform .15s,background .15s}
.modo-noche input:checked + .palanca{background:#2f4f9e}
.modo-noche input:checked + .palanca::after{transform:translateX(16px);background:#fff}

/* ---------- MODO CLARO (el que usa Rafelin en IPTV Editor) ---------- */
body.claro{
  --fondo:#eef1f6;      --panel:#ffffff;      --panel2:#f5f7fa;
  --borde:#dde2ea;      --borde2:#c9d1dd;
  --texto:#3b4453;      --apagado:#7c8697;    --blanco:#161c26;
  --fila-sel:#cfe0fb;   --fila-ok:#c8ecd8;
}
body.claro .lateral{background:#fff;border-right-color:#e2e7ef}
body.claro .menu-item:hover{background:#f0f3f8}
body.claro .menu-item.activo{background:#f7f9fc}
body.claro .cat{border-bottom-color:#eef1f6}
body.claro .cat:hover{background:#f5f7fa}
body.claro .sec-cab{background:linear-gradient(90deg,#dde6f7,#eef2f8);
  border-top-color:#cfd8e6;border-bottom-color:#e6ebf3}
body.claro .sec-cab:hover{background:linear-gradient(90deg,#d3dff5,#e7edf6)}
body.claro .sec-cab .sec-nom{color:#22304a}
body.claro .sec-cab .cant{color:#5d6a80}
body.claro .sec-cab .tri{border-left-color:#5d6a80}
body.claro .fila{border-bottom-color:#f0f3f7}
body.claro .fila:hover{background:#f5f8fc}
body.claro .fila.sel .url,body.claro .fila.sel .celda{color:#1b3566}
body.claro .fila-logos .logo,body.claro .fila .logo,
body.claro .logo-vista,body.claro .mini-portada{background:#eef1f6}
body.claro .tarjeta-portada{background:#eef1f6}
body.claro .pie-portada{color:#3b4453}
body.claro td{border-bottom-color:#eef1f6}
body.claro tr:hover td{background:#f7f9fc}
body.claro .resultado{background:#f5f7fa}
body.claro ::-webkit-scrollbar-track{background:#eef1f6}
body.claro ::-webkit-scrollbar-thumb{background:#aeb9c9;border-color:#eef1f6}
body.claro ::-webkit-scrollbar-thumb:hover{background:#8f9cae}
body.claro .fila-cliente.porvencer{background:#fdf0e3}
body.claro .fila-cliente.vencido{background:#fbe0e4}
body.claro .btn-oscuro{background:#e8edf6;border-color:#cdd7e6;color:#2c3d63}
body.claro .btn-oscuro:hover:not(:disabled){background:#dbe4f2}
body.claro .buscador input{background:#fff}
body.claro .aviso-caja{background:#fdf6e3;border-color:#e8d5a0;color:#7a5f16}
body.claro .aviso-caja b{color:#5c4610}
body.claro .info-caja{background:#e8f1fc;border-color:#bcd6f2;color:#2b4f7d}

/* ---------- Gestor de listas ---------- */
.contador{background:var(--panel2);border:1px solid var(--borde2);border-radius:14px;
  padding:3px 13px;font-size:12.5px;color:var(--texto);font-weight:600}
.tarjeta.activa{border-color:var(--azul-claro)}
.punto-activa{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#25c26a;margin-right:8px;vertical-align:middle}
.menu-tarjeta button.rojo{color:#e2707c}
.menu-tarjeta button.rojo:hover{background:var(--rojo);color:#fff}
body.claro .contador{background:#fff}

/* ---------- Arrastrar para reordenar ---------- */
.fila[draggable="true"] .agarre,tr[draggable="true"] .agarre{cursor:grab}
.fila.arrastrando,tr.arrastrando{opacity:.4}
.fila.encima{box-shadow:inset 0 3px 0 0 var(--azul-claro)}
.fila.encima-abajo{box-shadow:inset 0 -3px 0 0 var(--azul-claro)}
tr.encima td{box-shadow:inset 0 3px 0 0 var(--azul-claro)}
tr.encima-abajo td{box-shadow:inset 0 -3px 0 0 var(--azul-claro)}
tr[draggable="true"]{cursor:default}

/* ---------- Series en el editor básico ---------- */
.arbol-cabecera.cab-series{
  grid-template-columns:34px var(--c-sport) minmax(var(--c-nom),1fr) var(--c-spunt) var(--c-scaps)}
.fila.fila-series{
  grid-template-columns:34px var(--c-sport) minmax(var(--c-nom),1fr) var(--c-spunt) var(--c-scaps);
  padding:6px 10px}

/* lista que se está importando ahora */
.tarjeta.importando{border-color:var(--azul-claro);opacity:.85}
.tarjeta.importando .nombre small{color:var(--azul-claro)}

/* ---------- Embudo de filtros ---------- */
.barra-ico.con-filtro{background:#ffffff2e;color:#fff}
.barra-ico.con-filtro::after{content:'';position:absolute;top:5px;right:5px;
  width:7px;height:7px;border-radius:50%;background:#3fd483}
.barra-ico{position:relative}
.panel-filtros{min-width:310px;z-index:120}
.opcion-filtro{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:13px;cursor:pointer}
.opcion-filtro:hover{background:#ffffff0d}
.opcion-filtro span{flex:1}
.pie-filtros{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px}
body.claro .opcion-filtro:hover{background:#f0f3f8}
body.claro .barra-ico.con-filtro{background:#ffffff33}

/* campos con botón de copiar */
.fila-copiar{display:grid;grid-template-columns:1fr auto;gap:8px}
.fila-copiar input{background:var(--panel2);border:1px solid var(--borde2);border-radius:6px;
  padding:9px 11px;font-size:13px;color:var(--blanco);width:100%}
.fila-copiar .btn{padding:9px 15px;font-size:12.5px;white-space:nowrap}

/* ---------- Categorías en el editor: asa, subir arriba y arrastre ---------- */
.cat .asa{cursor:grab;color:var(--apagado);font-size:13px;letter-spacing:-1px;
  opacity:0;transition:opacity .12s;user-select:none}
.cat:hover .asa{opacity:.75}
.cat .asa:active{cursor:grabbing}
.cat .asa.apagada{cursor:default;opacity:.25}
.cat .btn-cat{margin-left:auto;background:none;border:0;color:var(--apagado);
  cursor:pointer;font-size:15px;line-height:1;padding:2px 6px;border-radius:5px;
  opacity:0;transition:opacity .12s,background .12s}
.cat:hover .btn-cat{opacity:.8}
.cat .btn-cat:hover{opacity:1;background:var(--panel2);color:var(--azul-claro)}
.cat.arrastrando{opacity:.45}
.cat.encima{box-shadow:inset 0 3px 0 0 var(--azul-claro)}

/* Botón ▶ para probar un link en el reproductor de la computadora. */
.btn-play{background:none;border:0;color:var(--apagado);cursor:pointer;font-size:11px;
  padding:2px 7px;border-radius:5px;opacity:0;transition:opacity .12s,color .12s,background .12s;
  min-width:26px}
.fila:hover .btn-play{opacity:.7}
.btn-play:hover{opacity:1 !important;color:#3fd483;background:var(--panel2)}

.cat-chica.malo{color:#e05563;font-weight:600}

/* ---------- el menú de la TV, dentro del editor de canales ----------
   Las herramientas para acomodar las secciones viven en el árbol (pedido de
   Rafelin el 2026-08-09: «quiero editar todo donde edito los canales»). */
.sec-tools{margin-left:auto;display:flex;gap:3px;align-items:center}
.sec-tools .btn-cat{opacity:.6}
.sec-cab:hover .sec-tools .btn-cat{opacity:1}
.sel-secc{background:var(--panel2);border:1px solid var(--borde2);color:var(--apagado);
  border-radius:5px;font-size:11px;padding:1px 3px;max-width:120px;margin-left:2px}
.barra-menutv{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 14px;background:var(--azul-barra);color:#fff;font-size:13px;
  border-bottom:1px solid var(--borde2)}
.barra-menutv.oculto{display:none}

/* ── MODO FÁCIL de un cliente (2026-08-27) ─────────────────────────────────
   Las dos carpetas que arma M3 para el cliente que se pierde con tantos
   canales: ⭐ LOS MEJORES y 🔥 MÁS VISTOS. Filas finitas para que entren
   muchas sin estirar la ficha. */
.sub-titulo.chico{margin:14px 0 7px;font-size:12px;color:var(--apagado)}

/* ---------- La ficha del cliente, compacta (2026-08-29) ----------
   Antes cada sección traía su cuadro azul de explicación y los botones iban en
   tres filas al final: para llegar a «Guardar» había que bajar con la rueda.
   Ahora la explicación vive en un ⓘ que se abre al pasar el mouse, y la barra
   de botones queda pegada abajo. */
.ayuda{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-left:6px;border-radius:50%;cursor:help;
  background:#24446b;color:#a9c8ee;font-size:11px;font-weight:700;
  border:1px solid #2f5b8e;position:relative;vertical-align:middle}
.ayuda:hover{background:#2f5b8e;color:#fff}
/* El globito. Se dibuja con ::after para no meter un nodo por cada ayuda. */
.ayuda::after{content:attr(data-ayuda);position:absolute;top:22px;right:-4px;
  width:290px;background:#16283f;border:1px solid #24446b;border-radius:7px;
  padding:9px 11px;font-size:12px;font-weight:400;line-height:1.5;
  color:#a9c8ee;text-align:left;white-space:pre-wrap;z-index:40;
  opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none;
  box-shadow:0 8px 22px #0009}
.ayuda:hover::after{opacity:1;visibility:visible}
/* La última sección de la ficha queda cerca de la barra: sin esto el globito de
   una ayuda de abajo se salía de la caja. */
.ficha-cliente{padding-bottom:4px}
.ficha-cliente .sub-titulo{margin:15px 0 8px}
.ficha-cliente .campo-bloque{margin-bottom:10px}
/* La barra de guardar, pegada al fondo de la ficha: se ve siempre, haya el
   scroll que haya. */
.barra-guardar{position:sticky;bottom:0;display:flex;gap:9px;align-items:center;
  margin:14px -20px -18px;padding:12px 20px;background:var(--panel);
  border-top:1px solid var(--borde)}
.barra-guardar .btn{padding:10px 8px;font-size:12.5px}
.barra-guardar .btn-verde{flex:1}
.barra-guardar .btn-gris{flex:1}
.barra-guardar .mas{position:relative}
.barra-guardar .mas>.btn{width:42px}
.menu-mas{position:absolute;bottom:44px;right:0;min-width:186px;z-index:45;
  background:var(--panel2);border:1px solid var(--borde2);border-radius:8px;
  padding:5px;box-shadow:0 10px 26px #000a}
.menu-mas button{display:block;width:100%;text-align:left;background:none;
  border:0;color:var(--texto);font-size:12.5px;padding:8px 10px;border-radius:6px;
  cursor:pointer;font-family:inherit}
.menu-mas button:hover{background:var(--panel)}
.menu-mas button.rojo{color:#e2707c}
.menu-mas button.rojo:hover{background:var(--rojo);color:#fff}
body.claro .ayuda{background:#d7e6f8;color:#2b4f7d;border-color:#bcd6f2}
body.claro .ayuda::after{background:#e8f1fc;border-color:#bcd6f2;color:#2b4f7d;
  box-shadow:0 8px 22px #0002}
body.claro .barra-guardar{background:#fff}
.lista-facil{max-height:260px;overflow:auto;border:1px solid var(--borde);
  border-radius:8px;margin-bottom:10px}
.lista-facil:empty{display:none}
.fila-facil{display:flex;align-items:center;gap:8px;padding:5px 8px;
  border-bottom:1px solid var(--borde)}
.fila-facil:last-child{border-bottom:0}
.fila-facil img,.fila-facil .sin-logo{width:34px;height:22px;object-fit:contain;
  flex:0 0 34px;border-radius:3px}
.fila-facil .sin-logo{background:var(--borde)}
.fila-facil .nom{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-facil .cat{color:var(--apagado);font-size:11.5px;max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Pantalla del MODO FÁCIL (2026-08-28): tres cajas y los botones al pie. */
.panel-facil{max-width:1100px;padding:4px 2px 20px}
.caja-facil{border:1px solid var(--borde);border-radius:10px;padding:14px 16px;
  margin-bottom:16px}
.caja-facil .opciones-cats{max-height:300px;overflow:auto;border:1px solid var(--borde);
  border-radius:8px;margin-top:8px}
.fila-cliente-facil{display:flex;align-items:center;gap:10px;padding:6px 10px;
  border-bottom:1px solid var(--borde)}
.fila-cliente-facil:last-child{border-bottom:0}
.fila-cliente-facil .nom{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.casilla.chica{font-size:12px;white-space:nowrap;margin:0}

/* «Cómo le queda a una TV» (v1.78.1). Las columnas van acá y no en el HTML:
   `.fila` y `.arbol-cabecera` son grid, y sin su `grid-template-columns` propio
   heredan el de los canales y la pantalla sale descuadrada. */
.arbol-cabecera.cab-linea{grid-template-columns:minmax(220px,1.4fr) 150px 190px 90px}
.fila.fila-linea{grid-template-columns:minmax(220px,1.4fr) 150px 190px 90px;
  padding:7px 10px;cursor:default;align-items:center}
.fila.fila-linea.marcada{background:var(--panel2)}
.arbol-cabecera.cab-linea-sec{grid-template-columns:44px minmax(240px,1.5fr) 100px 250px}
.fila.fila-linea-sec{grid-template-columns:44px minmax(240px,1.5fr) 100px 250px;
  padding:7px 10px;cursor:default;align-items:center}
.fila.fila-linea-sec.apagada{opacity:.45}
.fila.fila-linea-sec.peligro .nom{color:#ef8b96}
.arbol-cabecera.cab-linea-cat{grid-template-columns:minmax(240px,1.6fr) 180px minmax(160px,1fr)}
.fila.fila-linea-cat{grid-template-columns:minmax(240px,1.6fr) 180px minmax(160px,1fr);
  padding:6px 10px;cursor:default;align-items:center}
.fila.fila-linea-cat.peligro .nom{color:#ef8b96}