/* =========================================================================
   CARA DE LOS DEALERS (F1 · Tanda 3): colores y medidas copiados de IPTV Editor
   (ver referencia.md → F1). SOLO vale con html.modo-cuentas: sin el interruptor
   EDITOR_CUENTAS=1 esta hoja no cambia nada y el editor se ve como siempre.
   ========================================================================= */

html.modo-cuentas body{
  font-family:"Open Sans","Segoe UI",Roboto,Ubuntu,system-ui,sans-serif;
  font-size:14.4px;
}

/* ---- Modo claro (el de fábrica para los dealers) ---- */
html.modo-cuentas body.claro{
  --fondo:#F8F9FE;   --panel:#ffffff;   --panel2:#F5F6FA;
  --borde:#e9ecef;   --borde2:#dee2e6;
  --texto:#525F7F;   --apagado:#8898aa; --blanco:#32325d;
  --azul-barra:#3970E1; --azul:#3970E1; --azul-claro:#5e72e4;
  --verde:#2dce89;   --rojo:#f5365c;
  --fila-sel:#dbe6fb; --fila-ok:#d7f5e8;
}
html.modo-cuentas .barra{background:#3970E1;box-shadow:none}

/* Menú lateral blanco con íconos de colores */
html.modo-cuentas .menu-item{font-size:12.8px}
html.modo-cuentas .menu-item.sub{font-size:12.8px}
html.modo-cuentas body.claro .menu-item.activo,
html.modo-cuentas body.claro .menu-item.sub.activo{color:#3970E1}
html.modo-cuentas body.claro .menu-item.activo svg{color:inherit}
html.modo-cuentas .menu-item[data-grupo="canales"] svg{color:#fb6340}
html.modo-cuentas .menu-item[data-grupo="pelis"] svg{color:#8965e0}
html.modo-cuentas .menu-item[data-grupo="series"] svg{color:#11cdef}
html.modo-cuentas .menu-item[data-grupo="clientes"] svg{color:#2dce89}
html.modo-cuentas .menu-item[data-vista="fuente"] svg{color:#8898aa}
html.modo-cuentas .menu-item[data-vista="listas"] svg{color:#5e72e4}

/* Tarjetas: fondo gris clarito, esquinas de 6 px y la sombra suave del Editor */
html.modo-cuentas body.claro .tarjeta,
html.modo-cuentas body.claro .ficha,
html.modo-cuentas body.claro .arbol-caja{
  background:#F5F6FA;border-color:transparent;border-radius:6px;
  box-shadow:rgba(136,152,170,.15) 0 0 32px;
}
html.modo-cuentas body.claro .tarjeta{background:#fff}

/* Botones: 12 px y peso 600; colores del Editor */
html.modo-cuentas .btn{font-size:12px;font-weight:600;border-radius:6px}
html.modo-cuentas .btn-verde{background:#2dce89;color:#fff}
html.modo-cuentas .btn-rojo{background:#f5365c;color:#fff}
html.modo-cuentas body.claro .btn-oscuro{background:#172B4D;border-color:#172B4D;color:#fff}
html.modo-cuentas body.claro .btn-oscuro:hover:not(:disabled){background:#0f1d36}
/* Ficha: Mover gris oscuro · Duplicar lila · «Ponerlo primero» gris a lo ancho */
html.modo-cuentas .fila-mover .btn-gris{background:#525F7F;color:#fff}
html.modo-cuentas .fila-mover .btn-azul{background:#8965e0;color:#fff}
html.modo-cuentas body.claro .btn-oscuro.ancho{background:#e9ecef;border-color:#e9ecef;color:#525F7F}

/* Ventanas centradas con el fondo borroso */
html.modo-cuentas .velo{background:rgba(23,43,77,.35);backdrop-filter:blur(4px)}
html.modo-cuentas body.claro .ventana{border:none;border-radius:6px;
  box-shadow:rgba(136,152,170,.3) 0 0 40px}
html.modo-cuentas .ventana-cabeza h3{font-size:14.4px;font-weight:600}

/* Categorías ocultas en gris (la «menta = nueva» queda para cuando exista la marca de nueva) */
html.modo-cuentas body.claro .cat.cat-oculta{background:#e9ecef}

/* ---- Gestor de listas (F1 · tanda 4) ---- */
html.modo-cuentas .tarjeta.tarjeta-dealer{grid-template-columns:1.6fr repeat(4,.6fr) 1fr auto}
html.modo-cuentas .tarjeta-dealer .campo b{display:block;font-size:15px;color:var(--blanco)}
html.modo-cuentas .tarjeta-dealer .campo span{font-size:12px;color:var(--apagado)}
html.modo-cuentas .tabla-info{width:100%;border-collapse:collapse;font-size:13px}
html.modo-cuentas .tabla-info td{padding:8px 4px;border-bottom:1px solid var(--borde)}
html.modo-cuentas .tabla-info td:first-child{color:var(--apagado);width:42%}

/* ---------- F2: editor de guía (EPG) ---------- */
html.modo-cuentas .cab-guia,html.modo-cuentas .fila-guia{display:grid;grid-template-columns:34px 44px 1fr 180px 60px;align-items:center;gap:6px}
html.modo-cuentas .fila-guia .celda-logo img{width:36px;height:24px;object-fit:contain}
html.modo-cuentas .fila-guia .celda{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-buscar{display:flex;gap:6px;align-items:center}
.fila-buscar input,.fila-buscar select{flex:1;min-width:0}
.fila-buscar .crece{flex:1;min-width:0}
.dos-botones{display:flex;gap:8px}.dos-botones .btn{flex:1}
.guia-resultados{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.guia-res{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:7px 9px;border:1px solid var(--borde,#ccd);border-radius:6px;background:transparent;color:inherit;cursor:pointer;font-size:12.5px;position:relative}
.guia-res.activo{border-color:var(--azul-claro);background:rgba(60,130,240,.10)}
.guia-res .btn.chico{position:absolute;right:6px;top:6px;padding:2px 8px;font-size:11px}
.guia-vista{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.guia-prog{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:6px 8px;border-radius:6px;background:rgba(127,127,127,.08)}
.paises-guia{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;max-height:55vh;overflow:auto}
.pais-guia{display:flex;gap:8px;align-items:flex-start;padding:9px;border:1px solid var(--borde,#ccd);border-radius:8px;cursor:pointer;font-size:12.5px}
.creador-guia{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.creador-guia h4{margin:0 0 10px}

/* ---------- F3: conectados ---------- */
html.es-dealer .submenu .menu-item.btn-conectados{display:flex !important}
html:not(.es-dealer) .btn-conectados{display:none !important}
.tarjetas-con{display:flex;gap:10px;flex-wrap:wrap}
.tarjeta-con{display:flex;flex-direction:column;gap:2px;min-width:170px;padding:12px 14px;border:1px solid var(--borde);border-radius:8px;font-size:12.5px}
.tarjeta-con b{font-size:22px}
.tabla-con .con-fila{cursor:pointer}
.con-detalle.oculta{display:none}
.con-detalle td{background:rgba(127,127,127,.06)}
.con-paso{padding:2px 0;font-size:12.5px}.con-paso small:first-child{display:inline-block;width:46px}
.punto-con{display:inline-block;width:8px;height:8px;border-radius:50%;background:#9aa3b2}
.punto-con.vivo{background:#2fbf71}

/* F4 · datos para los clientes en la info de la lista */
.pestanas-info{display:flex;gap:6px;margin:16px 0 8px}
.pestana-info.oculta{display:none}

/* F5 · Búsqueda de info (TMDB) y actualizador manual */
.lista-info { margin-top: 8px; max-height: 360px; overflow: auto; }
.fila-info { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--borde, #ddd); cursor: pointer; }
.fila-info:hover { background: rgba(0,0,0,.05); }
.man-paneles { display: grid; grid-template-columns: 1fr 260px 1fr; gap: 14px; align-items: start; }
.man-panel { border: 1px solid var(--borde, #ddd); border-radius: 8px; padding: 10px; min-width: 0; }
.man-panel h4 { margin: 0 0 8px; }
.man-medio { display: flex; flex-direction: column; gap: 8px; }
.man-scroll { max-height: 62vh; overflow: auto; }
.man-cat { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-bottom: 1px solid var(--borde, #ddd); cursor: pointer; }
.man-item { display: flex; gap: 8px; align-items: center; padding: 5px 6px; cursor: pointer; }
.man-item.sel { background: rgba(37,99,235,.12); }
.man-item img, .man-item i { width: 34px; height: 22px; object-fit: contain; flex: none; }
@media (max-width: 900px) { .man-paneles { grid-template-columns: 1fr; } }