:root {
  /* ============================================================
     TOKENS — v11 refresco visual (2026-08-27)
     Mismos selectores y nombres de variable de siempre (--bg, --panel,
     --card, --border, --text, --muted, --accent, --pink/--green/--cyan/
     --violet/--yellow/--red) para no romper nada de app.js. Lo que
     cambia son los valores + variables nuevas, puramente aditivas.
     Fondo con un pelín de tinte azulado (no gris puro) + estados
     semánticos con rol fijo, independientes de --accent (--accent es
     la ÚNICA variable de marca — la pone family Accent()/brand_color
     en shared/familyAccent.js, aquí no se toca esa lógica).
     ============================================================ */
  --bg: #05060a;
  --panel: #0a0c15;
  --card: #0e111c;
  --card-hi: #141828;       /* nuevo: tarjetas con más peso (stat) */
  --muted-surface: #191d2f; /* nuevo: hover de fila, superficies internas */
  --border: #2a3049;
  --border-subtle: #20263a; /* nuevo: separadores más discretos que --border */
  --text: #f4f5f9;
  --muted: #8b93ac;
  --faint: #80848e;         /* nuevo: terciario — ya cumple 4.5:1 en card y bg */

  /* Marca — la única variable que cambia por clienta/familia */
  --accent: #ff2d78;
  --accent-fg: #05060a;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);
  --ring: color-mix(in srgb, var(--accent) 55%, transparent);

  /* Estados con rol fijo (éxito/aviso/error/info) — no dependen del acento */
  --success: #22c58f;
  --warning: #f5a524;
  --danger: #f2586a;
  --info: #3aa8f0;
  --success-soft: color-mix(in srgb, var(--success) 10%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 10%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 10%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 10%, transparent);
  --success-border: color-mix(in srgb, var(--success) 42%, transparent);
  --warning-border: color-mix(in srgb, var(--warning) 42%, transparent);
  --danger-border: color-mix(in srgb, var(--danger) 42%, transparent);
  --info-border: color-mix(in srgb, var(--info) 42%, transparent);

  /* Paleta decorativa — mismos nombres de siempre; los 4 "de estado" quedan
     alias de su rol semántico (mismo color, ya no un hex suelto y duplicado);
     violeta y rosa se quedan como estaban, son de marca/categoría, no de estado. */
  --pink: #ff2d78;
  --green: var(--success);
  --cyan: var(--info);
  --violet: #a78bfa;
  --yellow: var(--warning);
  --red: var(--danger);

  /* Tipografía */
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --text-2xs: 10.5px; --text-xs: 11.5px; --text-sm: 12.5px; --text-base: 14px;
  --text-md: 15px; --text-lg: 16.5px; --text-xl: 19px; --text-2xl: 22px; --text-3xl: 27px;

  /* Radio / sombra */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 10px 30px rgba(0,0,0,.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  /* NO se parten palabras: solo se corta un "palabro" imposible (una URL larguísima sin
     espacios) como último recurso. En tablas, la columna se ensancha hasta caber la palabra
     entera (y la tabla hace scroll horizontal si hace falta), en vez de romperla. */
  overflow-wrap: break-word;
}
.hidden { display: none !important; }

/* Enlace suelto SIN clase (my.telegram.org en .onb-note, t.me/... en varias tarjetas): sin esta
   regla no hay NINGÚN `a { color }` base en toda la hoja, así que caían al azul por defecto del
   navegador — casi ilegible sobre el fondo oscuro del v11 (Alex, 28/8/2026, captura del paso
   "3 · Conecta tu userbot"). Los enlaces que YA tienen su propio color (.btn, #nav a,
   .manual-index a, .dd-item...) no cambian: una clase siempre gana en especificidad a esta regla
   de elemento suelto. */
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: var(--accent); }

/* Foco de teclado visible en TODO lo interactivo — antes solo cambiaba el borde 1px de
   inputs; ahora hay un anillo real (usa --ring, que ya sigue el --accent de cada clienta). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Login ---------- */
#login-view { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  background: var(--panel); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  padding: 40px; width: 360px; box-shadow: var(--shadow-md), 0 0 60px color-mix(in srgb, var(--accent) 8%, transparent);
}
.login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.note { color: var(--info); font-size: var(--text-sm); }

/* ---------- Marca ---------- */
.brand { color: var(--accent); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.01em; }
.brand span { display: block; color: var(--faint); font-size: var(--text-xs); font-weight: 500; margin-top: 2px; }
.brand-logo {
  width: 26px; height: 26px; border-radius: 6px; object-fit: cover;
  vertical-align: -6px; margin-right: 8px; display: inline-block;
}

/* ---------- Selector de grupo ---------- */
.brand-box { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.brand-box .brand { flex: 1; min-width: 0; overflow-wrap: break-word; font-size: var(--text-lg); line-height: 1.3; }
.brand-arrow {
  background: none; border: none; color: var(--accent); font-size: 15px; cursor: pointer;
  padding: 2px 6px; border-radius: var(--r-sm); margin-top: 3px;
}
.brand-arrow:hover { background: var(--card-hi); }
.group-dd {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 50;
  background: var(--card-hi); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.dd-item { padding: 10px 12px; cursor: pointer; font-size: var(--text-sm); }
.dd-item:hover { background: var(--accent-soft); }
.dd-item.on { color: var(--accent); font-weight: 600; }

/* ---------- Layout ---------- */
#app-view { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; background: var(--panel); border-right: 1px solid var(--border-subtle);
  padding: 22px 14px; display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0;
}
#nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
#nav a {
  color: var(--muted); text-decoration: none; padding: 9px 12px; border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); font-weight: 500;
  position: relative;
}
#nav a:hover { background: var(--muted-surface); color: var(--text); }
#nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
/* Antes el color activo era la única pista; ahora hay también una marca de forma (barra),
   para que "sección activa" no dependa solo de saber leer el tono del acento. */
#nav a.active::before {
  content: ''; position: absolute; left: 2px; top: 6px; bottom: 6px; width: 3px;
  border-radius: var(--r-full); background: var(--accent);
}
/* v2.3 — "Mejora tu plan": separado del menú y en verde-éxito, para que se lea como una
   oferta y no como una sección más del panel. */
#nav a.nav-upgrade {
  margin-top: 14px; border: 1px dashed var(--success-border);
  color: var(--success); font-weight: 600; justify-content: center;
}
#nav a.nav-upgrade:hover { background: var(--success-soft); color: var(--success); }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-size: var(--text-xs); }
#main { flex: 1; padding: 0 28px 40px; min-width: 0; }
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--border-subtle); margin-bottom: 22px; color: var(--muted);
}
.topbar #topdate { flex: 1; min-width: 0; }
h2.page-title { color: var(--text); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.01em; margin-bottom: 18px; }
.page-actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.creatives-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 640px) { .creatives-grid { grid-template-columns: 1fr; } }

/* ---------- Menú hamburguesa (móvil) ---------- */
.menu-btn {
  display: none; background: var(--card); border: 1px solid var(--border-subtle); color: var(--text);
  font-size: 17px; line-height: 1; padding: 7px 11px; border-radius: var(--r-sm); cursor: pointer; flex-shrink: 0;
}
.menu-btn:hover { border-color: var(--accent); }
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 80; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sidebar-overlay.show { opacity: 1; pointer-events: auto; }

/* ---------- Tablas responsive ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Tarjetas ---------- */
.grid { display: grid; gap: 12px; margin-bottom: 16px; }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* Ajustes: las tarjetas tienen alturas muy distintas y con una rejilla quedaban huecos debajo de
   las cortas (todas las de una fila se estiran a la más alta). Con columnas CSS se empaquetan
   verticalmente y el hueco desaparece, sin JS. Mismo tratamiento que el panel Superadmin. */
.settings-cards { column-width: 380px; column-gap: 16px; margin-bottom: 16px; }
.settings-cards > .card { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 16px; width: 100%; display: inline-block; }
.card {
  background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 16px;
}
/* Tarjetas sueltas apiladas en una página (💳 Suscripciones, 📡 Mis canales…): salían
   pegadas unas a otras, sin el aire que sí tienen las de dentro de un .grid (que lo saca del
   gap). Solo afecta a las hijas DIRECTAS de #page — las de un grid no son hijas suyas, así que
   sus columnas no se tocan. Mismo hueco que el gap del grid, para que todo case. */
#page > .card + .card { margin-top: 12px; }
/* v8.10 · una suscripción 'bloqueada' es la de quien dejó el pago a medias y bloqueó al bot:
   no es un error del panel ni algo que se arregle solo, así que se marca en rojo apagado. */
.badge.bloqueada { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.stat .label { color: var(--faint); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.stat .value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-3xl); font-weight: 700; margin-top: 7px; letter-spacing: -.02em; }
.stat .sub { color: var(--muted); font-size: var(--text-xs); margin-top: 4px; }
.pink { color: var(--pink); } .green { color: var(--green); } .cyan { color: var(--cyan); } .accent { color: var(--accent); }
.violet { color: var(--violet); } .yellow { color: var(--yellow); } .red { color: var(--red); }
.vip-blocked { background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 12px; font-size: var(--text-md); line-height: 1.5; }
.muted { color: var(--muted); }

/* Tarjetas de métrica reales (statCard() en app.js siempre pinta class="card stat"): más
   presencia que una tarjeta contenedora normal, para que el bloque de cifras destaque sobre
   tablas/listas de la misma página. OJO: ".stat" solo (sin "card") también se usa suelto como
   simple etiqueta dentro de otras tarjetas (p. ej. Federaciones) — por eso el selector exige
   AMBAS clases, para no ponerle fondo propio a esas etiquetas sueltas. */
.card.stat {
  background: linear-gradient(160deg, var(--card-hi), var(--card));
  border-color: var(--border-subtle);
}

/* ---------- Botones / inputs ---------- */
.btn {
  font-family: var(--font-sans); background: var(--card-hi); color: var(--text); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: var(--r-md); cursor: pointer; font-size: var(--text-sm); font-weight: 600;
  transition: border-color .12s ease, background .12s ease;
  white-space: nowrap;   /* el texto del botón nunca se parte en sílabas: queda entero y, en
                            móvil, los botones sobrantes bajan debajo (como en escritorio) */
}
.btn:hover { border-color: var(--faint); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; font-weight: 500; }
.btn.small { padding: 6px 11px; font-size: var(--text-xs); }
.btn.danger { color: var(--danger); border-color: var(--danger-border); }
.btn.danger:hover { border-color: var(--danger); }
.btn:disabled { opacity: .5; cursor: wait; }
label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
input, select, textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text); padding: 9px 11px; font-size: var(--text-md); font-family: var(--font-sans); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 90px; }
.error { color: var(--danger); font-size: var(--text-sm); }

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
th { color: var(--faint); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; cursor: pointer; user-select: none; white-space: nowrap; }
th:hover { color: var(--text); }
th.sorted-asc::after { content: ' ▲'; color: var(--accent); }
th.sorted-desc::after { content: ' ▼'; color: var(--accent); }
tr:hover td { background: var(--muted-surface); }
td .btn { margin-right: 4px; flex-shrink: 0; }  /* en la tabla, los botones no se encogen: el texto queda entero y los sobrantes bajan debajo (móvil) */
/* Celda de acciones de una fila (Verificadas, etc.). En escritorio: flex a la derecha (igual
   que antes). En móvil: rejilla de 3 columnas para que los iconos vayan en filas de 3 debajo
   del botón de texto (que ocupa su propia fila), en vez de apilarse de uno en uno. */
.cell-acts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; }
@media (max-width: 640px) {
  .cell-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .cell-acts .btn:not(.primary) { width: 100%; box-sizing: border-box; }
  .cell-acts .btn.primary { grid-column: 1 / -1; justify-self: end; }  /* botón de texto: su fila, ancho natural a la derecha */
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--r-full);
  font-size: var(--text-2xs); font-weight: 700; border: 1px solid var(--border); color: var(--muted); background: transparent;
}
/* Punto de estado además del color: para que "activa" vs "vencida" no dependa solo de saber
   leer el matiz del color (útil también para daltonismo). Puramente CSS — cero riesgo. */
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge.active, .badge.online, .badge.ok, .badge.activa, .badge.verificada { color: var(--success); border-color: var(--success-border); background: var(--success-soft); }
.badge.offline, .badge.baja, .badge.cancelada { color: var(--faint); }
.badge.error, .badge.vencida, .badge.suspendida { color: var(--danger); border-color: var(--danger-border); background: var(--danger-soft); }
.badge.pendiente, .badge.warn { color: var(--warning); border-color: var(--warning-border); background: var(--warning-soft); }
/* v5.9 "en espera": no es un error (rojo) ni está activa (verde) — falta configuración y se
   resuelve sola en cuanto vincule canal. Info para distinguirla de suspendida de un vistazo. */
.badge.en_espera { color: var(--info); border-color: var(--info-border); background: var(--info-soft); }

/* v5.9 · Selector de vista de 💋 Verificadas (activas / pendientes / archivadas): las tarjetas
   del contador son el propio conmutador, así que tienen que parecer pulsables. */
.card.creator-view { cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.card.creator-view:hover { border-color: var(--accent); }
.card.creator-view.sel { border-color: var(--accent); background: var(--accent-soft); }
.badge.alianza { color: var(--info); border-color: var(--info-border); }
.badge.sfs { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 35%, transparent); }
.badge.principal, .badge.verificadas { color: var(--pink); border-color: color-mix(in srgb, var(--pink) 35%, transparent); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.online { background: var(--success); box-shadow: 0 0 6px var(--success); }
.dot.offline { background: var(--faint); }
.dot.error { background: var(--danger); box-shadow: 0 0 6px var(--danger); }

/* ---------- Feed ---------- */
.feed { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.feed-item { display: flex; gap: 10px; font-size: var(--text-sm); padding: 7px 4px; border-bottom: 1px solid var(--border-subtle); }
.feed-item .time { color: var(--faint); white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-2xs); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(2,3,7,.72); display: flex;
  align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto;
}
.modal {
  background: var(--panel); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  padding: 24px; width: 100%; max-width: 560px; box-shadow: var(--shadow-md);
}
.modal h3 { color: var(--text); font-size: var(--text-lg); font-weight: 700; margin-bottom: 16px; }
.modal form { display: flex; flex-direction: column; gap: 12px; }
.modal .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ---------- Toast ---------- */
#toast-root { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast {
  background: var(--panel); border: 1px solid var(--border-subtle); border-left: 3px solid var(--success);
  padding: 12px 16px; border-radius: var(--r-md); font-size: var(--text-sm); max-width: 380px;
  box-shadow: var(--shadow-md);
  animation: slidein .2s ease;
}
.toast.error { border-left-color: var(--danger); }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }

.empty { color: var(--faint); padding: 24px; text-align: center; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-md); font-size: var(--text-xs); font-weight: 600;
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  transition: color .15s, border-color .15s, background .15s;
}
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip.on { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
code { background: var(--bg); padding: 2px 6px; border-radius: 5px; font-size: var(--text-xs); font-family: var(--font-mono); }
.help { color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }

/* =====================================================
   RESPONSIVE — tablet / móvil
   ===================================================== */
@media (max-width: 880px) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }

  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 90; width: 250px; max-width: 82vw;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 10px 0 40px rgba(0,0,0,.5);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay { display: block; }

  #main { padding: 0 16px 32px; }
  .topbar { padding: 14px 0; margin-bottom: 16px; }

  /* Las tarjetas de métrica (.c4, siempre statCard()) quedan en 2 columnas — más
     visuales y compactas que una debajo de otra. Las .c3/.c2 suelen llevar catálogos
     o tarjetas con botones y texto largo: se quedan a 1 columna para no apretarlas. */
  .grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .grid.c3, .grid.c2 { grid-template-columns: 1fr; }
  .settings-cards { column-width: auto; columns: 1; }

  h2.page-title { font-size: var(--text-xl); }
  .page-actions { gap: 6px; }
  .page-actions .btn { flex: 1 1 auto; text-align: center; }

  .modal-overlay { padding: 0; align-items: stretch; }
  .modal { max-width: 100%; height: 100%; border-radius: 0; overflow-y: auto; }
  .modal .row { grid-template-columns: 1fr; }

  .table-wrap table { min-width: 620px; }
}

@media (max-width: 480px) {
  body { font-size: 13px; }
  .login-card { width: 100%; padding: 28px 22px; }
  .brand { font-size: var(--text-xl); }
  .stat .value { font-size: var(--text-2xl); }
  th, td { padding: 8px 9px; font-size: var(--text-2xs); }
  .toast { max-width: calc(100vw - 40px); }
  /* Tarjetas de métrica más densas en 2 columnas, a juego con el resto del móvil */
  .grid.c4 { gap: 8px; }
  .grid.c4 .card { padding: 13px; }
  .grid.c4 .stat .label { font-size: 10px; }
  .grid.c4 .stat .sub { font-size: 10.5px; overflow-wrap: break-word; }
  /* Importes largos (p. ej. las cajas financieras) NO deben desbordar la tarjeta en 2 columnas:
     envuelven y bajan un pelo de tamaño en pantallas estrechas. */
  .grid.c4 .stat .value { font-size: var(--text-lg); overflow-wrap: break-word; line-height: 1.15; }
}

/* ---------- 📚 Manual (v5.0, Fase 6) ---------- */
.manual-wrap { display: flex; gap: 16px; align-items: flex-start; }
.manual-index { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.manual-index a { color: var(--text); text-decoration: none; padding: 7px 10px; border-radius: var(--r-sm); font-size: var(--text-md); }
.manual-index a:hover { background: var(--muted-surface); }
.manual-index a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.manual-article { flex: 1; min-width: 0; line-height: 1.65; }
.manual-article h2 { margin: 4px 0 12px; color: var(--accent); }
.manual-article h3 { margin: 20px 0 8px; }
.manual-article h4 { margin: 16px 0 6px; }
.manual-article p { margin: 8px 0; }
.manual-article ul, .manual-article ol { margin: 8px 0 8px 22px; }
.manual-article li { margin: 4px 0; }
.manual-article code { background: var(--muted-surface); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.manual-table { border-collapse: collapse; margin: 10px 0; width: 100%; }
.manual-table th, .manual-table td { border: 1px solid var(--border-subtle); padding: 6px 10px; text-align: left; font-size: var(--text-sm); }
.manual-table th { background: var(--muted-surface); }
@media (max-width: 900px) { .manual-wrap { flex-direction: column; } .manual-index { width: 100%; position: static; } }

/* v7.10 — visor de estado/instrucciones con el bot VIP (infoModal) */
.modal-body { display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow-y: auto; }
.vip-block h4 { color: var(--accent); margin: 0 0 8px; font-size: var(--text-md); }
.vip-step { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.vip-step:last-child { border-bottom: 0; }
.vip-step .vip-tick { flex: none; }
.vip-step b { flex: none; }
.vip-ev { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.vip-ev th, .vip-ev td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.vip-ev th { color: var(--faint); font-weight: 600; }
@media (max-width: 640px) { .modal-body { max-height: none; } }

/* ---------- v10 (i18n): selector de idioma ---------- */
.lang-switch { display: flex; gap: 0; flex: none; }
.lang-switch button {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 6px 11px; cursor: pointer; font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
  border-radius: 0;
}
.lang-switch button:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: none; }
.lang-switch button:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.lang-switch button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.top-right { display: flex; align-items: center; gap: 8px; }
.login-lang { display: flex; justify-content: center; margin: 4px 0 -4px; }