/* ══════════════════════════════════════════════════════
   Plan Pro — tarjeta «Tu plan» (pestaña Control) y panel lateral con ejemplos.
   Lo pinta /assets/comun/js/plan-pro.js. El acento cambia por plataforma (data-czp).
   ══════════════════════════════════════════════════════ */
.czp-scope {
  --czp-acc: #9147ff; --czp-acc-soft: rgba(145,71,255,0.14); --czp-acc-ink: #ffffff; --czp-acc-txt: #bf94ff;
  --czp-bg: #0e0e19; --czp-bg2: #141423; --czp-bg3: #08080f;
  --czp-line: rgba(236,236,255,0.08); --czp-line2: rgba(236,236,255,0.15);
  --czp-text: #ececf8; --czp-muted: rgba(236,236,248,0.6); --czp-faint: rgba(236,236,248,0.4);
  --czp-ok: #3ddc84;
  --czp-display: 'Syne', 'Plus Jakarta Sans', system-ui, sans-serif;
  --czp-body: 'DM Sans', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --czp-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}
.czp-scope[data-czp="kick"]    { --czp-acc: #53fc18; --czp-acc-soft: rgba(83,252,24,0.11); --czp-acc-ink: #06130a; --czp-acc-txt: #7dff4f; }
.czp-scope[data-czp="youtube"] { --czp-acc: #ff2d2d; --czp-acc-soft: rgba(255,45,45,0.12); --czp-acc-ink: #ffffff; --czp-acc-txt: #ff6b6b; }
.czp-scope[data-czp="tiktok"]  { --czp-acc: #fe2c55; --czp-acc-soft: rgba(254,44,85,0.12); --czp-acc-ink: #ffffff; --czp-acc-txt: #ff6d8a; }

/* ── A. «Tu plan» a la derecha de la barra «💡 Los cambios se aplican…» (#infoBanner) ── */
#infoBanner.czp-con-plan { flex-wrap: wrap; row-gap: 10px; }
#infoBanner.czp-con-plan > div:not(.czp-plan) { flex: 1 1 260px; min-width: 0; }   /* el texto de la barra */
.czp-plan {
  margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--czp-body); font-size: 13px; color: var(--czp-muted);
}
.czp-plan b { color: var(--czp-text); font-weight: 700; }
.czp-btn.czp-btn-sm { padding: 7px 13px; font-size: 12.5px; border-radius: 9px; }
/* botón de «Tu plan»: color de la plataforma (como los «⭐ Quiero el Pro»); un brillo cruza UNA vez al entrar, luego quieto */
.czp-btn-brillo { position: relative; overflow: hidden; }
.czp-btn-brillo::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-18deg);
  animation: czpBrillo 1.1s ease-out 0.8s 1 both;
}
@keyframes czpBrillo { from { left: -60%; } to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .czp-btn-brillo::after { display: none; } }
@media (max-width: 560px) {
  .czp-plan { flex-basis: 100%; margin-left: 0; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--czp-line2); }
  .czp-plan-sub { display: none; }
}

.czp-btn {
  font: 700 13px var(--czp-body); border-radius: 10px; padding: 10px 16px; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter .15s, background .15s, border-color .15s;
}
.czp-btn-acc { background: var(--czp-acc); color: var(--czp-acc-ink); }
.czp-btn-acc:hover { filter: brightness(1.1); }
.czp-btn-ghost { background: transparent; color: var(--czp-text); border-color: var(--czp-line2); }
.czp-btn-ghost:hover { border-color: var(--czp-acc); }
.czp-scope button:focus-visible, .czp-scope a:focus-visible { outline: 2px solid var(--czp-acc); outline-offset: 2px; }

/* ── B. Panel lateral (escritorio) / hoja inferior (móvil) ── */
.czp-overlay {
  position: fixed; inset: 0; z-index: 10000; background: rgba(4,4,10,0.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; justify-content: flex-end; opacity: 0; transition: opacity .25s ease;
}
.czp-overlay.czp-on { opacity: 1; }
.czp-sheet {
  width: min(600px, 100%); height: 100%; background: var(--czp-bg); border-left: 1px solid var(--czp-line2);
  display: flex; flex-direction: column; font-family: var(--czp-body); color: var(--czp-text); font-size: 14px; line-height: 1.55;
  transform: translateX(24px); transition: transform .3s ease; box-shadow: -30px 0 80px rgba(0,0,0,.5);
}
.czp-overlay.czp-on .czp-sheet { transform: none; }
.czp-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
@media (max-width: 640px) {
  .czp-overlay { align-items: flex-end; justify-content: stretch; }
  .czp-sheet { width: 100%; height: auto; max-height: 92vh; max-height: 92dvh; border-left: 0; border-top: 1px solid var(--czp-line2); border-radius: 18px 18px 0 0; transform: translateY(30px); }
}
@media (prefers-reduced-motion: reduce) { .czp-overlay, .czp-sheet { transition: none; } }

.czp-head { padding: 22px 22px 16px; display: grid; gap: 6px; position: relative; border-bottom: 1px solid var(--czp-line); }
.czp-kicker { font: 500 11px var(--czp-mono); color: var(--czp-acc-txt); letter-spacing: .08em; text-transform: uppercase; }
.czp-head h2 { font-family: var(--czp-display); font-weight: 800; font-size: 23px; line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; padding-right: 36px; color: var(--czp-text); }
.czp-head p { margin: 0; color: var(--czp-muted); }
.czp-x { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--czp-line2); background: none; color: var(--czp-muted); cursor: pointer; font-size: 15px; line-height: 1; }
.czp-x:hover { color: var(--czp-text); }

.czp-tabs { display: flex; gap: 4px; padding: 14px 22px 0; overflow-x: auto; scrollbar-width: none; }
.czp-tabs::-webkit-scrollbar { display: none; }
.czp-tabs button { flex: 0 0 auto; }
.czp-tabs button { font: 600 12.5px var(--czp-body); color: var(--czp-muted); background: none; border: 1px solid transparent; border-bottom: 0; padding: 8px 12px; border-radius: 9px 9px 0 0; cursor: pointer; }
.czp-tabs button[aria-selected="true"] { color: var(--czp-text); background: var(--czp-bg2); border-color: var(--czp-line); }
.czp-tabbody { margin: 0 22px; padding: 16px; background: var(--czp-bg2); border: 1px solid var(--czp-line); border-radius: 0 12px 12px 12px; display: grid; gap: 12px; }

.czp-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 520px) { .czp-vs { grid-template-columns: minmax(0, 1fr); } }
.czp-box { border-radius: 10px; border: 1px solid var(--czp-line); background: var(--czp-bg3); padding: 11px 13px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.czp-box.czp-pro { border-color: var(--czp-acc-soft); box-shadow: inset 0 0 0 1px var(--czp-acc-soft); }
.czp-cap { font: 500 10.5px var(--czp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--czp-faint); display: flex; justify-content: space-between; gap: 8px; }
.czp-box.czp-pro .czp-cap { color: var(--czp-acc-txt); }
.czp-msg { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.czp-msg b { font-weight: 700; margin-right: 6px; color: var(--czp-acc-txt); }
.czp-msg .czp-t { color: var(--czp-muted); font-size: 12.5px; display: block; margin-top: 2px; }
.czp-lang { font: 500 10px var(--czp-mono); border: 1px solid var(--czp-line2); border-radius: 5px; padding: 0 5px; color: var(--czp-muted); margin-right: 6px; }
.czp-note { font-size: 12px; color: var(--czp-faint); }

.czp-voces { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.czp-voz { border: 1px solid var(--czp-line); border-radius: 10px; background: var(--czp-bg3); padding: 10px 12px; display: grid; gap: 3px; }
.czp-voz strong { font-size: 13px; }
.czp-voz small { color: var(--czp-faint); font-size: 11.5px; }
.czp-play { justify-self: start; margin-top: 5px; font: 600 12px var(--czp-body); color: var(--czp-text); background: var(--czp-bg2); border: 1px solid var(--czp-line2); border-radius: 99px; padding: 4px 12px; cursor: pointer; }
.czp-play[aria-pressed="true"] { border-color: var(--czp-acc); color: var(--czp-acc-txt); }

.czp-cmp { margin: 16px 22px 0; overflow-x: auto; }
.czp-cmp table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 420px; }
.czp-cmp th { text-align: left; font: 500 10.5px var(--czp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--czp-faint); padding: 0 10px 8px; }
.czp-cmp th:nth-child(n+2), .czp-cmp td:nth-child(n+2) { text-align: center; width: 104px; }
.czp-cmp th.czp-pc { color: var(--czp-acc-txt); }
.czp-cmp td { padding: 9px 10px; border-top: 1px solid var(--czp-line); vertical-align: middle; }
.czp-cmp td small { color: var(--czp-faint); display: block; font-size: 11.5px; }
.czp-cmp td.czp-pc { background: var(--czp-acc-soft); }
.czp-y { color: var(--czp-ok); font-weight: 700; } .czp-n { color: var(--czp-faint); } .czp-part { color: var(--czp-muted); font-size: 12px; }

.czp-foot { padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; border-top: 1px solid var(--czp-line); background: var(--czp-bg); }
.czp-foot-txt { color: var(--czp-muted); font-size: 12.5px; }
.czp-foot-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.czp-foot-row .czp-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-left: auto; }
.czp-link { background: none; border: 0; color: var(--czp-faint); font: 500 12.5px var(--czp-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
.czp-link:hover { color: var(--czp-muted); }
@media (max-width: 420px) { .czp-foot-row .czp-acts { margin-left: 0; width: 100%; } .czp-foot-row .czp-acts .czp-btn { flex: 1; } }