/* chasis.css — componentes de las landings. CSS propio, scoped a .nk-support, móvil-first.
   Sin reset global ni selectores de etiqueta sueltos → no rompe el host Angular al integrar. */

.nk-support * { box-sizing: border-box; }

.nk-support.nk-page {
  min-height: 100dvh;
  background: var(--nk-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 40px;
}

.nk-support .nk-card {
  width: 100%;
  max-width: var(--nk-maxw);
  background: var(--nk-white);
  border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius);
  box-shadow: var(--nk-shadow);
  padding: 22px 18px;
}
@media (min-width: 640px) { .nk-support .nk-card { padding: 30px 28px; } }

.nk-support .nk-bar {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; letter-spacing: .01em; margin-bottom: 16px;
}
.nk-support .nk-logo { height: 15px; width: auto; flex-shrink: 0; display: block; }
.nk-support .nk-bar-sep { color: var(--nk-muted); font-weight: 500; }

.nk-support .nk-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.nk-support .nk-subtitle { margin: 0 0 20px; font-size: 14px; color: var(--nk-muted); }
.nk-support .nk-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--nk-muted); margin: 18px 0 8px; }

/* Campos */
.nk-support .nk-field { margin-bottom: 14px; }
.nk-support .nk-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.nk-support .nk-input,
.nk-support .nk-textarea,
.nk-support .nk-select {
  /* 16px mínimo: por debajo, iOS Safari hace auto-zoom al enfocar cada campo */
  width: 100%; font: inherit; font-size: 16px; color: var(--nk-ink);
  background: #fafafa; border: 1px solid #e5e5e5; border-radius: var(--nk-radius-sm);
  padding: 11px 12px; -webkit-appearance: none; appearance: none;
}
.nk-support .nk-textarea { min-height: 96px; resize: vertical; }
.nk-support .nk-input:focus,
.nk-support .nk-textarea:focus,
.nk-support .nk-select:focus {
  outline: none; border-color: var(--nk-green); box-shadow: 0 0 0 3px rgba(40, 140, 90, .18);
  background: #fff;
}
.nk-support [aria-invalid="true"] { border-color: var(--nk-error); box-shadow: 0 0 0 3px rgba(181, 72, 75, .14); }
.nk-support .nk-field-error { color: var(--nk-error); font-size: 12px; margin: 5px 0 0; }
.nk-support .nk-note { font-size: 12px; color: var(--nk-muted); margin: 6px 0 0; }

/* Botones */
.nk-support .nk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  border-radius: var(--nk-radius-sm); padding: 12px 16px; border: 1px solid transparent;
  transition: background .15s, border-color .15s, opacity .15s;
}
/* Botón primario en verde OSCURO (#20714a → 5.96:1 con texto blanco, pasa AA). El verde de
   marca #288c5a queda para bordes/acentos/rings, no para texto sobre color. */
.nk-support .nk-btn--primary { background: var(--nk-green-d); color: #fff; }
.nk-support .nk-btn--primary:hover { background: #185a3a; }
.nk-support .nk-btn--ghost { background: #fff; color: var(--nk-ink); border-color: #d8d8d8; }
.nk-support .nk-btn--ghost:hover { border-color: var(--nk-ink); }
.nk-support .nk-btn[disabled] { opacity: .55; cursor: not-allowed; }
.nk-support .nk-btn--link { background: none; border: 0; color: var(--nk-green-d); text-decoration: underline; width: auto; padding: 6px 0; font-size: 13px; cursor: pointer; }
.nk-support .nk-btn-row { display: flex; gap: 8px; margin-top: 8px; }

/* Elecciones (radios grandes tipo lista) */
.nk-support .nk-choices { display: grid; gap: 8px; border: 0; padding: 0; margin: 0 0 14px; }
.nk-support .nk-choice {
  display: flex; align-items: center; gap: 10px; background: #fafafa;
  border: 1px solid #ececec; border-radius: var(--nk-radius-sm); padding: 12px 14px; cursor: pointer; font-size: 14px;
}
.nk-support .nk-choice:has(input:checked) { border-color: var(--nk-green); background: #f1f6f3; }
.nk-support .nk-choice input { accent-color: var(--nk-green); width: 18px; height: 18px; }

/* Guía (deflect de Acceso) */
.nk-support .nk-guide {
  background: #f1f6f3; border: 1px solid #d7e8de; color: #2c5a41;
  border-radius: var(--nk-radius-sm); padding: 14px 16px; margin: 4px 0 12px; font-size: 14px; line-height: 1.55;
}
.nk-support .nk-guide p { margin: 0 0 8px; }
.nk-support .nk-guide p:last-child { margin-bottom: 0; }
/* Pasos de la guía: cada uno en su línea, numerado */
.nk-support .nk-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.nk-support .nk-steps li { padding-left: 2px; }
/* Foco programático del título al revelar guía/formulario: es un heading (no un control), el foco
   solo sirve para que el lector de pantalla anuncie el bloque → sin outline visible molesto. */
.nk-support [data-nk-title]:focus { outline: none; }
/* Intro opcional del formulario (solo se muestra si tiene texto, p.ej. al entrar por «otro») */
.nk-support [data-nk-form-intro] { margin: -4px 0 14px; }
.nk-support [data-nk-form-intro]:empty { display: none; }
/* Filas de «otras redes» (Colaboraciones): plataforma + handle, repetibles */
.nk-support .nk-social-row { display: flex; gap: 8px; margin-bottom: 6px; }
.nk-support .nk-social-row input:first-child { flex: 1; }
.nk-support .nk-social-row input:last-child { flex: 1.4; }
/* Aviso reforzado (Cobros): no escribir datos bancarios completos */
.nk-support .nk-guard { display: flex; gap: 8px; align-items: flex-start; background: #fff8e1; border: 1px solid #f0e2b8; color: #7a5a12; border-radius: var(--nk-radius-sm); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
/* Variante informativa (verde) — p.ej. deflect de Academy en Contacto */
.nk-support .nk-guard--info { background: #f1f6f3; border-color: #d7e8de; color: #2c5a41; }
.nk-support .nk-guard--info a { color: var(--nk-green-d); font-weight: 600; }

/* Enlace cruzado entre audiencias (creador ↔ marca) */
.nk-support .nk-cross { font-size: 13px; color: var(--nk-muted); margin: -12px 0 20px; }
.nk-support .nk-cross a { color: var(--nk-green-d); font-weight: 600; text-decoration: none; }
.nk-support .nk-cross a:hover { text-decoration: underline; }

/* Zona de estado / confirmación / errores globales */
.nk-support .nk-status { margin-top: 16px; font-size: 14px; }
.nk-support .nk-status:empty { display: none; }
.nk-support .nk-status--ok { background: #f1f6f3; border: 1px solid #cfe6d9; color: #23543c; border-radius: var(--nk-radius-sm); padding: 14px 16px; }
.nk-support .nk-status--error { background: #fbf1f1; border: 1px solid #eccdce; color: var(--nk-error); border-radius: var(--nk-radius-sm); padding: 14px 16px; }
/* Banner de MODO TEST — inconfundible, naranja, NUNCA parece confirmación real */
.nk-support .nk-status--test { background: #fff2ea; border: 1px dashed var(--nk-orange); color: #a24a12; border-radius: var(--nk-radius-sm); padding: 14px 16px; font-weight: 600; }
.nk-support .nk-ref { font-weight: 700; }
/* answer de Cobros: texto plano con saltos de línea, SIN check celebratorio */
.nk-support .nk-answer { white-space: pre-line; background: var(--nk-cream); border: 1px solid var(--nk-border); border-radius: var(--nk-radius-sm); padding: 14px 16px; font-size: 14px; }
.nk-support .nk-answer-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 8px; }

/* Navegación defensiva (Otros) */
.nk-support .nk-deflect { background: #fafafa; border: 1px solid #ececec; border-radius: var(--nk-radius-sm); padding: 12px 14px; margin-bottom: 18px; font-size: 13px; }
.nk-support .nk-deflect a { color: var(--nk-green-d); font-weight: 600; }

/* RGPD */
.nk-support .nk-rgpd { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; font-size: 12.5px; color: var(--nk-ink-2); }
.nk-support .nk-rgpd input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--nk-green); flex: none; }
.nk-support .nk-rgpd a { color: var(--nk-green-d); }

/* Honeypot: oculto de forma accesible (fuera de pantalla, no anunciado como campo relevante) */
.nk-support .nk-hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.nk-support [hidden] { display: none !important; }