/* Newsletter del blog (Views/Shared/_NewsletterForm y Views/Newsletter/Message). Lienzo 6y1J5t7KKxVB8wzPoUxFFq,
   tablero "Definitiva": banda en tinta con los temas como casillas y tarjeta compacta para el articulo. Solo tokens. */

.nl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nl-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Banda (portada del blog) */
.nl-band {
  background: var(--bg-dark); color: var(--text-on-dark); border-radius: var(--radius-lg);
  padding: 44px 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center;
}
.nl-band__intro { display: flex; flex-direction: column; gap: 12px; }
.nl-band__kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-primary); }
.nl-band__title { margin: 0; font-size: 34px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--text-on-accent); }
.nl-band__text { margin: 0; font-size: 16px; line-height: 1.6; max-width: 44ch; }
.nl-band .nl-form { display: flex; flex-direction: column; gap: 14px; }
.nl-band__row { display: flex; gap: 8px; }

.nl-topics { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nl-topics legend { font-size: 13px; font-weight: 700; padding: 0; margin-bottom: 8px; width: 100%; }
.nl-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--text-on-dark); background: transparent;
}
.nl-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nl-chip__box {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-on-dark);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: transparent;
}
.nl-chip:has(input:checked) { background: var(--bg-card); color: var(--text-primary); border-color: var(--bg-card); }
.nl-chip:has(input:checked) .nl-chip__box { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-on-accent); }
.nl-chip:has(input:focus-visible) { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.nl-input {
  flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 16px; color: var(--text-primary); background: var(--bg-card);
}
.nl-input--bordered { border-color: var(--border-subtle); }
.nl-input:focus { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
.nl-btn {
  height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius-pill); background: var(--accent-primary);
  color: var(--text-on-accent); font-family: var(--font-sans); font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.nl-btn:hover { background: var(--accent-primary-hover); }
.nl-btn:disabled { opacity: .6; cursor: wait; }
.nl-btn--dark { background: var(--bg-dark); }
.nl-btn--dark:hover { background: var(--bg-dark-raised); }

.nl-status { margin: 0; font-size: 14px; line-height: 1.5; min-height: 0; }
.nl-status:empty { display: none; }
.nl-status--ok { font-weight: 600; }
.nl-band .nl-status--error { color: var(--wine-40); }
.nl-legal { margin: 0; font-size: 12.5px; line-height: 1.5; opacity: .85; }
.nl-legal a { color: inherit; text-decoration: underline; }

/* Tarjeta compacta (articulo) */
.nl-compact {
  background: var(--bg-canvas); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; color: var(--text-primary);
}
.nl-compact__title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 800; }
.nl-compact .nl-form { display: flex; flex-direction: column; gap: 12px; }
.nl-compact__row { display: flex; gap: 8px; }
.nl-compact .nl-input, .nl-compact .nl-btn { height: 50px; }
.nl-compact .nl-legal { color: var(--text-muted); opacity: 1; font-size: 12px; }
.nl-compact .nl-status--error { color: var(--status-danger); }

/* Pagina de resultado (confirmar, darse de baja) */
.nl-page { padding: var(--space-8) var(--space-4); display: flex; justify-content: center; }
.nl-page__card {
  max-width: 520px; width: 100%; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.nl-page__icon { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--wine-15); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.nl-page__title { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.nl-page__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.nl-page__card form { margin: 6px 0 0; }
.nl-page__back { font-size: 14px; font-weight: 600; color: var(--text-secondary); }

@media (max-width: 767px) {
  .nl-band { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 22px; }
  .nl-band__title { font-size: 24px; }
  .nl-band__row, .nl-compact__row { flex-direction: column; }
  .nl-topics .nl-chip { width: 100%; }
  .nl-compact { padding: 20px; }
  .nl-page__card { padding: 28px 20px; }
}