@import './program-wallpaper-shine.css';

/* Estilo compartido de CorpHunters e Influencers. */
.program-page {
  font-family: 'Bahnschrift', 'Preice Barlow', 'Montserrat', Arial, sans-serif;
  font-weight: 400;
  --glass-background: rgba(100, 109, 113, .28);
  --glass-filter: blur(2px) saturate(120%);
  --glass-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  min-height: 100vh;
  background: #000;
  isolation: isolate;
}
/* BLACK WALLPAPER fijo: fuera de la composición escalada del simulador. */
.program-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background: #000 url('/assets/v-s-003/optimized/black-wallpaper-extended.webp') center / max(3072px, 100vw, 100dvh) auto no-repeat;
  pointer-events: none;
}
/* Sombreado fijo: tercios laterales intensos y centro más claro. */
.program-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
    rgba(0, 0, 0, .84) 0%,
    rgba(0, 0, 0, .84) 33.333%,
    rgba(0, 0, 0, .12) 50%,
    rgba(0, 0, 0, .84) 66.667%,
    rgba(0, 0, 0, .84) 100%);
  pointer-events: none;
}

.program-page .page :is(.lede, .simulator-description) { color: #fff; }
.program-page :is(.fine-print, .internal-footer) { color: #fff; }
.program-page .program-topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
.program-page .header-brand {
  display: grid; grid-template-columns: auto 2px auto 44px; width: 100%; row-gap: 8px;
}
.program-page .header-brand .logo { grid-column: 1; grid-row: 1; }
.program-page .header-brand-divider { grid-column: 2; grid-row: 1; }
.program-page .header-program-name { grid-column: 3; grid-row: 1; }
.program-page .header-program-name { display: inline-flex; align-items: center; gap: 12px; }
/* Iconos de cada programa, iguales a los portales de la página de inicio. */
.header-program-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--program-accent, #A5DC4F); color: #fff;
}
.header-program-icon svg {
  width: 27px; height: 27px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.program-page .header-whatsapp {
  grid-column: 4; grid-row: 1; display: inline-flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  color: #25D366;
}
.header-whatsapp svg { width: 44px; height: 44px; }
.header-whatsapp:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* Empavonado solo en superficies principales; conservar los recuadros interiores. */
.program-page :is(
  .topbar, .application-trigger, .editable-wheel-card,
  .projection-card, .operation-panel, .projection-chart, .commission-rates, .breakdown,
  .application-secondary, .simulator-retry, .application-dialog
) {
  background: var(--glass-background);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-shadow);
  border-color: transparent;
  color: #fff;
}
.program-page .application-trigger:hover {
  background: rgba(100, 109, 113, .36);
  box-shadow: var(--glass-shadow);
}
.program-page :is(
  .editable-wheel-label, .projection-value, .projection-metric h3,
  .operation-panel h2, .annual-projection h2, .operation-symbol,
  .projection-note, .drum-help, .rates-heading, .rates-grid > div,
  .commission-description, .projection-chart h3, .projection-bar-label,
  .projection-month-label, .breakdown-row .label, .breakdown-row .value
) { color: #fff; }

/* Tipografía de inicio: Regular 400, títulos y controles SemiBold 600. */
.program-page :is(
  h1, h2, h3, .header-program-name, .program-label, .corphunters-label,
  .application-invitation > span:not(.application-cursor-space),
  .application-secondary, .application-submit, .application-dialog label,
  .projection-value, .operation-value, .operation-symbol, .breakdown-row .value,
  .drum-input, .drum-neighbor, .drum-unit, .drum-prefix,
  strong, b
) { font-weight: 600; }
.program-page :is(.wheel-label-detail, .projection-metric h3) { font-weight: 400; }
/* Los textos del emergente siguen los pesos de los desplegables de inicio. */
.program-page .application-dialog { font-weight: 300; }
.program-page .application-dialog :is(strong, b, input) { font-weight: 400; }
/* Textos planos, incluidos los números: sin sombras perimetrales. */
.program-page :is(.program-composition, .application-dialog) *,
.program-page .application-invitation > span:not(.application-cursor-space) { text-shadow: none; }

.corphunters-page { --program-accent: #1FCBE0; }
@media (max-width: 680px) {
  .program-page .header-brand { column-gap: 20px; }
}