/*
 * Semáforo Inversor Membresía — pantallas públicas.
 * Usa los tokens del tema con valores de reserva.
 */

.smb-panel,
.smb-plans-wrap,
.smb-gate {
  --smb-ink: var(--si-black, #080b0a);
  --smb-paper: var(--si-white, #fff);
  --smb-soft: var(--si-mist, #edf0ed);
  --smb-graphite: var(--si-graphite, #58605c);
  --smb-line: var(--si-line, rgba(8, 11, 10, .14));
  --smb-green: var(--si-green, #00b957);
  --smb-amber: var(--si-amber, #ffbf00);
  --smb-red: var(--si-red, #ff1d25);
  --smb-display: var(--si-font-display, "Helvetica Neue", Helvetica, Arial, sans-serif);
  color: var(--smb-ink);
  font-family: var(--si-font-body, "Helvetica Neue", Helvetica, Arial, sans-serif);
}

.smb-panel {
  background: var(--smb-paper);
  border: 1px solid var(--smb-line);
  margin: 32px 0;
  padding: clamp(26px, 4vw, 44px);
}

.smb-panel--narrow { margin-inline: auto; max-width: 560px; }

.smb-panel h2,
.smb-gate h2 {
  font-family: var(--smb-display);
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 0 0 14px;
}

.smb-eyebrow,
.smb-label {
  color: var(--smb-graphite);
  font-family: var(--smb-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.smb-muted { color: var(--smb-graphite); }
.smb-note { color: var(--smb-graphite); font-size: 13px; line-height: 1.6; margin-top: 18px; }

/* ------------------------------------------------------------ Cuenta */

.smb-account-head {
  align-items: center;
  border-bottom: 1px solid var(--smb-line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 26px;
  padding-bottom: 22px;
}

.smb-status {
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  margin: 0;
  padding: 7px 12px;
  text-transform: uppercase;
}

.smb-status--ok { color: var(--si-green-dark, #008c42); }
.smb-status--off { color: var(--smb-graphite); }

.smb-grid {
  border-top: 1px solid var(--smb-line);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.smb-grid > div { border-bottom: 1px solid var(--smb-line); padding: 18px 0; }
.smb-grid > div + div { border-left: 1px solid var(--smb-line); padding-left: 22px; }

.smb-value {
  font-family: var(--smb-display);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  margin: 0;
}

.smb-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}

.smb-actions form { margin: 0; }

.smb-button {
  align-items: center;
  background: var(--smb-green);
  border: 1px solid var(--smb-green);
  color: #080b0a;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--si-font-body, Arial, sans-serif);
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: .07em;
  min-height: 50px;
  padding: 0 22px;
  text-transform: uppercase;
  transition: background 180ms ease, transform 180ms ease;
}

.smb-button:hover { background: #12d66b; transform: translateY(-1px); }

.smb-button--ghost {
  background: transparent;
  border-color: var(--smb-line);
  color: var(--smb-ink);
}

.smb-button--ghost:hover { background: var(--smb-soft); border-color: var(--smb-ink); }

.smb-link { border-bottom: 1px solid var(--smb-green); font-size: 13px; font-weight: 700; }
.smb-links { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; margin-top: 22px; }
.smb-links a { border-bottom: 1px solid var(--smb-line); }
.smb-links a:hover { border-bottom-color: var(--smb-green); }

/* ------------------------------------------------------------ Avisos */

.smb-alert {
  border-left: 3px solid var(--smb-line);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 20px;
  padding: 12px 0 12px 16px;
}

.smb-alert--error { border-left-color: var(--smb-red); }
.smb-alert--warn { border-left-color: var(--smb-amber); }
.smb-alert--ok { border-left-color: var(--smb-green); }

/* ------------------------------------------------------------ Formulario */

#smb-login p { margin: 0 0 16px; }
#smb-login label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }

#smb-login input[type="text"],
#smb-login input[type="password"] {
  border: 1px solid var(--smb-line);
  min-height: 50px;
  padding: 0 14px;
  width: 100%;
}

#smb-login input:focus-visible { outline: 3px solid var(--smb-green); outline-offset: 2px; }
#smb-login .login-remember label { display: flex; align-items: center; font-weight: 400; gap: 8px; }

/* wp_login_form() wraps its button in .login-submit, and the theme's own button
   styles would otherwise win, leaving the primary action looking disabled. */
#smb-login .login-submit input,
#smb-login .submit input,
#smb-login input[type="submit"] {
  background: var(--smb-green);
  border: 0;
  color: #080b0a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  min-height: 50px;
  padding: 0 24px;
  text-transform: uppercase;
  transition: background 180ms ease;
  width: 100%;
}

#smb-login .login-submit input:hover,
#smb-login input[type="submit"]:hover { background: #12d66b; }

/* ------------------------------------------------------------ Planes */

.smb-plans { display: grid; gap: 1px; background: var(--smb-line); border: 1px solid var(--smb-line); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 26px 0; }
.smb-plan { background: var(--smb-paper); padding: 30px 26px; position: relative; }
.smb-plan--anual { background: #f5f8f6; }

.smb-plan__flag {
  background: var(--smb-green);
  color: #080b0a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  margin: 0 0 14px;
  padding: 5px 9px;
  text-transform: uppercase;
  display: inline-block;
}

.smb-plan h3 { font-family: var(--smb-display); font-size: 20px; letter-spacing: -.03em; margin: 0 0 12px; }
.smb-plan__price { align-items: baseline; display: flex; gap: 8px; margin: 0 0 10px; }
.smb-plan__price strong { font-family: var(--smb-display); font-size: 42px; letter-spacing: -.045em; line-height: 1; }
.smb-plan__price span { color: var(--smb-graphite); font-size: 13px; }
.smb-plan__note { color: var(--smb-graphite); font-size: 13px; margin: 0 0 22px; min-height: 40px; }
.smb-plan form { margin: 0; }
.smb-plan .smb-button { width: 100%; }

.smb-plan-facts { color: var(--smb-graphite); font-size: 13px; line-height: 1.7; list-style: none; margin: 0; padding: 0; }
.smb-plan-facts li { padding-left: 18px; position: relative; }
.smb-plan-facts li::before { color: var(--smb-green); content: "·"; font-size: 20px; left: 0; line-height: 1; position: absolute; top: 2px; }

/* ------------------------------------------------------------ Muro */

.smb-gate {
  background: var(--smb-paper);
  border: 1px solid var(--smb-line);
  border-top: 3px solid var(--smb-green);
  margin: 32px 0;
  padding: clamp(28px, 4vw, 48px);
}

.smb-gate__eyebrow {
  color: var(--smb-graphite);
  font-family: var(--smb-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.smb-gate__teaser { font-size: 17px; margin: 0 0 22px; max-width: 62ch; }

.smb-gate__list {
  border-top: 1px solid var(--smb-line);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.smb-gate__list li {
  border-bottom: 1px solid var(--smb-line);
  font-size: 14px;
  padding: 14px 0;
}

.smb-gate__list li + li { border-left: 1px solid var(--smb-line); padding-left: 20px; }
.smb-gate__cta { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; }

@media (max-width: 640px) {
  .smb-grid > div + div { border-left: 0; padding-left: 0; }
  .smb-gate__list li + li { border-left: 0; padding-left: 0; }
}