:root {
  --bg: #0a0a0f;
  --panel: #121218;
  --card: #16161f;
  --border: #232330;
  --text: #e8e8ee;
  --muted: #8a8a99;
  --pink: #ff2d78;
  --green: #2dd4a0;
  --cyan: #38bdf8;
  --violet: #a78bfa;
  --yellow: #fbbf24;
  --red: #f87171;
  /* v5: color de acento de la marca — por defecto el rosa; app.js lo sobreescribe
     con brand_color (🎨 Marca en Ajustes). Solo afecta a marca/botones/acentos sobrios. */
  --accent: #ff2d78;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px;
  /* 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; }

/* ---------- Login ---------- */
#login-view { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 40px; width: 360px; box-shadow: 0 0 60px rgba(255,45,120,.08);
}
.login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.note { color: var(--cyan); font-size: 13px; }

/* ---------- Marca ---------- */
.brand { color: var(--accent); font-size: 22px; font-weight: 800; letter-spacing: .3px; }
.brand span { display: block; color: var(--muted); font-size: 11px; font-weight: 400; 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: 16px; line-height: 1.3; }
.brand-arrow {
  background: none; border: none; color: var(--accent); font-size: 15px; cursor: pointer;
  padding: 2px 6px; border-radius: 6px; margin-top: 3px;
}
.brand-arrow:hover { background: var(--card); }
.group-dd {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 50;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); overflow: hidden;
}
.dd-item { padding: 10px 12px; cursor: pointer; font-size: 13px; }
.dd-item:hover { background: rgba(255,45,120,.1); }
.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);
  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: 8px;
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
}
#nav a:hover { background: var(--card); color: var(--text); }
#nav a.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; }
/* v2.3 — "Mejora tu plan": separado del menú y en verde, 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 color-mix(in srgb, #22c55e 45%, transparent);
  color: #22c55e; font-weight: 600; justify-content: center;
}
#nav a.nav-upgrade:hover { background: color-mix(in srgb, #22c55e 12%, transparent); color: #22c55e; }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
#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); margin-bottom: 22px; color: var(--muted);
}
.topbar #topdate { flex: 1; min-width: 0; }
h2.page-title { color: var(--accent); font-size: 22px; 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); color: var(--text);
  font-size: 17px; line-height: 1; padding: 7px 11px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.menu-btn:hover { border-color: var(--pink); }
.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)); }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
}
/* Tarjetas sueltas apiladas en una página (💋 Fans y 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; }
.stat .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
.stat .value { font-size: 26px; font-weight: 800; margin-top: 6px; }
.stat .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pink { color: var(--pink); } .green { color: var(--green); } .cyan { color: var(--cyan); }
.violet { color: var(--violet); } .yellow { color: var(--yellow); } .red { color: var(--red); }
.muted { color: var(--muted); }

/* ---------- Botones / inputs ---------- */
.btn {
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
  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(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); }
.btn:disabled { opacity: .5; cursor: wait; }
label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12.5px; }
input, select, textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 9px 11px; font-size: 13.5px; font-family: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 90px; }
.error { color: var(--red); font-size: 13px; }

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; cursor: pointer; user-select: none; white-space: nowrap; }
th:hover { color: var(--text); }
th.sorted-asc::after { content: ' ▲'; color: var(--pink); }
th.sorted-desc::after { content: ' ▼'; color: var(--pink); }
tr:hover td { background: rgba(255,255,255,.015); }
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-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border); color: var(--muted);
}
.badge.active, .badge.online, .badge.ok, .badge.activa, .badge.verificada { color: var(--green); border-color: rgba(45,212,160,.4); background: rgba(45,212,160,.08); }
.badge.offline, .badge.baja, .badge.cancelada { color: var(--muted); }
.badge.error, .badge.vencida, .badge.suspendida { color: var(--red); border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); }
.badge.pendiente, .badge.warn { color: var(--yellow); border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
/* v5.9 "en espera": no es un error (rojo) ni está activa (verde) — falta configuración y se
   resuelve sola en cuanto vincule canal. Cian para distinguirla de suspendida de un vistazo. */
.badge.en_espera { color: var(--cyan); border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.08); }

/* 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(--pink); }
.card.creator-view.sel { border-color: var(--pink); background: rgba(255,45,120,.07); }
.badge.alianza { color: var(--cyan); border-color: rgba(56,189,248,.35); }
.badge.sfs { color: var(--violet); border-color: rgba(167,139,250,.35); }
.badge.principal, .badge.verificadas { color: var(--pink); border-color: rgba(255,45,120,.35); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot.offline { background: var(--muted); }
.dot.error { background: var(--red); box-shadow: 0 0 6px var(--red); }

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

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); 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); border-radius: 14px;
  padding: 24px; width: 100%; max-width: 560px;
}
.modal h3 { color: var(--accent); 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); border-left: 3px solid var(--green);
  padding: 12px 16px; border-radius: 10px; font-size: 13px; max-width: 380px;
  animation: slidein .2s ease;
}
.toast.error { border-left-color: var(--red); }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }

.empty { color: var(--muted); 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: 9px; font-size: 12px; 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: #fff; background: var(--accent); border-color: var(--accent); }
code { background: var(--bg); padding: 2px 6px; border-radius: 5px; font-size: 12px; }
.help { color: var(--muted); font-size: 12px; 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; }

  h2.page-title { font-size: 19px; }
  .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: 19px; }
  .stat .value { font-size: 21px; }
  th, td { padding: 8px 9px; font-size: 12px; }
  .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: 19px; 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, #ddd); text-decoration: none; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; }
.manual-index a:hover { background: rgba(255,255,255,.06); }
.manual-index a.on { background: color-mix(in srgb, var(--accent) 18%, transparent); 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: rgba(255,255,255,.08); 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 rgba(255,255,255,.12); padding: 6px 10px; text-align: left; font-size: 13px; }
.manual-table th { background: rgba(255,255,255,.05); }
@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: 14px; }
.vip-step { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,.06)); 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: 13px; }
.vip-ev th, .vip-ev td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border, rgba(255,255,255,.06)); vertical-align: top; }
.vip-ev th { color: var(--muted); font-weight: 600; }
@media (max-width: 640px) { .modal-body { max-height: none; } }