/* Manual ControlBod - companion page for JJRey */
.control-page {
  --manual-yellow: #aeb8ff;
  --manual-yellow-deep: #6d63e9;
  --manual-blue: #635bff;
  --manual-green: #2fd7b0;
  --manual-soft: #eef0ff;
  --manual-ink-muted: rgba(11, 20, 42, 0.68);
  background: #f5f7fb;
}

.control-page .manual-header .header-cta {
  background: var(--manual-green);
  border-color: var(--manual-green);
  color: #0b142a;
  box-shadow: 0 12px 28px rgba(47, 215, 176, 0.2);
}

.control-page .manual-header .header-cta:hover,
.control-page .manual-header .header-cta:focus-visible {
  background: #59e8c8;
  border-color: #59e8c8;
}

.control-page .manual-header.is-scrolled .header-cta {
  background: #0b142a;
  border-color: #0b142a;
  color: #fff;
}

.control-page .manual-header.is-scrolled .header-cta:hover,
.control-page .manual-header.is-scrolled .header-cta:focus-visible {
  background: #26334d;
  border-color: #26334d;
}

.control-page .manual-hero {
  background:
    radial-gradient(circle at 86% 23%, rgba(99, 91, 255, 0.3), transparent 23rem),
    radial-gradient(circle at 12% 86%, rgba(47, 215, 176, 0.16), transparent 25rem),
    #0b142a;
}

.control-page .manual-hero::after {
  border-color: rgba(99, 91, 255, 0.22);
  box-shadow: 0 0 0 80px rgba(99, 91, 255, 0.04), 0 0 0 160px rgba(99, 91, 255, 0.022);
}

.control-page .manual-hero .eyebrow,
.control-page .manual-content-dark .section-label {
  color: var(--manual-green);
}

.control-page .manual-hero .button {
  background: var(--manual-green);
  border-color: var(--manual-green);
  color: #0b142a;
}

.control-page .manual-hero .button:hover,
.control-page .manual-hero .button:focus-visible {
  background: #59e8c8;
  border-color: #59e8c8;
}

.control-page .manual-ghost-link:hover,
.control-page .manual-ghost-link:focus-visible {
  color: var(--manual-green);
  border-color: var(--manual-green);
}

.control-page .manual-badges span {
  border-color: rgba(174, 184, 255, 0.28);
  color: rgba(255, 255, 255, 0.75);
}

.control-page .screenshot-window {
  background: #15213a;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
}

.control-page .screenshot-window-bar {
  background: #101b31;
}

.control-page .screenshot-window-bar > span:nth-child(2) {
  background: var(--manual-blue);
}

.control-page .screenshot-window-bar > span:nth-child(3) {
  background: var(--manual-green);
}

.control-page .manual-overview {
  background: #fff;
}

.control-page .manual-toc a:hover,
.control-page .manual-toc a:focus-visible,
.control-page .manual-toc a.is-active {
  border-color: var(--manual-blue);
  box-shadow: 0 13px 28px rgba(24, 29, 76, 0.12);
}

.control-page .manual-toc span {
  color: var(--manual-blue);
}

.control-page .manual-content {
  background: #f5f7fb;
}

.control-page .manual-content-soft {
  background: var(--manual-soft);
}

.control-page .manual-content-dark {
  background: #0b142a;
}

.control-page .manual-content-dark::before {
  border-color: rgba(99, 91, 255, 0.2);
  box-shadow: 0 0 0 70px rgba(99, 91, 255, 0.04), 0 0 0 140px rgba(99, 91, 255, 0.018);
}

.control-page .manual-note {
  border-left-color: var(--manual-blue);
  background: rgba(99, 91, 255, 0.08);
}

.control-page .manual-note-mint {
  border-left-color: var(--manual-green);
  background: rgba(47, 215, 176, 0.11);
}

.control-page .manual-note-yellow {
  border-left-color: var(--manual-yellow-deep);
  background: rgba(174, 184, 255, 0.18);
}

.control-page .manual-note-dark {
  border-left-color: var(--manual-green);
  background: rgba(255, 255, 255, 0.06);
}

.control-page .manual-steps li > span {
  background: #0b142a;
  color: var(--manual-green);
}

.control-page .manual-steps.compact li > span {
  background: var(--manual-blue);
  color: #fff;
}

.control-page .manual-steps a,
.control-page .manual-checklist a,
.control-page .manual-content a:not(.button) {
  color: #5148d8;
  text-decoration-color: rgba(81, 72, 216, 0.32);
}

.control-page .manual-checklist,
.control-page .manual-steps-card,
.control-page .report-table-card,
.control-page .permission-card {
  box-shadow: 0 16px 40px rgba(22, 30, 74, 0.07);
}

.control-page .check-list li::before,
.control-page .manual-bullet-list li::before {
  color: var(--manual-blue);
}

.control-page .manual-bullet-list strong {
  color: #0b142a;
}

.control-page .manual-stat-row span {
  border-color: rgba(174, 184, 255, 0.2);
}

.control-page .manual-stat-row strong,
.control-page .dashboard-cards span {
  color: var(--manual-green);
}

.control-page .dashboard-cards article {
  border-color: rgba(174, 184, 255, 0.17);
  background: rgba(255, 255, 255, 0.045);
}

.control-page .manual-feature-band > div,
.control-page .manual-action-grid article {
  background: #fff;
}

.control-page .feature-index {
  background: var(--manual-blue);
  color: #fff;
}

.control-page .manual-action-grid span {
  color: var(--manual-blue);
}

.control-page .module-card-blue {
  background: linear-gradient(135deg, #4f46d9, #172650);
}

.control-page .module-icon {
  background: var(--manual-green);
  color: #0b142a;
}

.control-page .manual-check-panel h3 {
  color: var(--manual-green);
}

.control-page .manual-check-panel input {
  accent-color: var(--manual-green);
}

/* Caja se presenta sobre un fondo claro en ControlBod; conserva el panel como tarjeta legible. */
.control-page .manual-content-soft .manual-check-panel {
  border-color: rgba(11, 20, 42, 0.12);
  background: #fff;
  box-shadow: 0 16px 40px rgba(22, 30, 74, 0.08);
}

.control-page .manual-content-soft .manual-check-panel label {
  border-bottom-color: rgba(11, 20, 42, 0.1);
  color: #24334f;
}

.control-page .report-table-head {
  background: #0b142a;
  color: var(--manual-green);
}

.control-page .manual-faq {
  background: #fff;
}

.control-page .manual-faq-list summary span {
  color: var(--manual-blue);
}

.control-page .manual-faq-list details[open] summary span {
  color: var(--manual-blue);
}

.control-page .manual-faq-list details[open] summary i {
  background: var(--manual-green);
  border-color: var(--manual-green);
}

.control-page .manual-cta {
  background: var(--manual-blue);
  color: #fff;
}

.control-page .manual-cta .section-label {
  color: rgba(255, 255, 255, 0.65);
}

.control-page .manual-cta .button {
  border-color: #0b142a;
  background: #0b142a;
  color: #fff;
}

.control-page .manual-cta .button:hover,
.control-page .manual-cta .button:focus-visible {
  background: #26334d;
  border-color: #26334d;
}

.control-page .manual-cta .manual-ghost-link:hover,
.control-page .manual-cta .manual-ghost-link:focus-visible {
  border-color: #fff;
  color: #fff;
}

.control-page .manual-footer {
  background: #070e1e;
}

.control-page .manual-footer .footer-bottom a {
  color: var(--manual-green);
}

.control-page .control-access-card {
  display: grid;
  gap: 20px;
  min-height: 250px;
  padding: 27px;
  border: 1px solid rgba(99, 91, 255, 0.22);
  border-radius: 20px;
  background: linear-gradient(145deg, #111e39, #1c2c50);
  color: #fff;
  box-shadow: 0 18px 44px rgba(22, 30, 74, 0.16);
}

.control-access-card > span {
  color: var(--manual-green);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.control-access-card strong {
  max-width: 340px;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.control-access-card small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  line-height: 1.55;
}

.control-access-url {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(174, 184, 255, 0.2);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
}

.control-access-url b {
  color: var(--manual-green);
  font-weight: 700;
}

.control-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 44px;
}

.control-mini-grid article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.control-mini-grid span {
  color: var(--manual-blue);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.control-mini-grid strong {
  display: block;
  margin-top: 24px;
  font-size: 1rem;
}

.control-mini-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.55;
}

.control-callout {
  margin-top: 22px;
  padding: 17px 18px;
  border-radius: 14px;
  background: rgba(47, 215, 176, 0.1);
  color: #204d46;
  font-size: 0.78rem;
  line-height: 1.58;
}

.control-callout strong {
  color: #0e6e5b;
}

.control-page .whatsapp-float {
  background: #1cc77d;
}

@media (max-width: 760px) {
  .control-mini-grid { grid-template-columns: 1fr; }
}