/* ═══════════════════════════════════════════════════════════════════════════
   como-nos-conocio.css — Tarjeta "¿Cómo nos conociste?" de /pago/ok
   Ubicación: Transotel.Web/wwwroot/css/como-nos-conocio.css

   Se carga DESPUÉS de pago-resultado.css y reutiliza sus tokens
   (--teal, --gold, --navy, --radius). Los fallback están puestos por si
   algún día la tarjeta se monta en otra página que no cargue ese fichero.

   La tarjeta va debajo de la de confirmación, dentro del mismo contenedor
   .pago-resultado (480px). Es deliberadamente más callada que la principal:
   sombra más fina y sin animación de entrada. El protagonista de la página
   sigue siendo el "¡Pago confirmado!".

   [CNC-RESERVA · 01/10/2026] La hoja la carga también el buscador, para la
   misma pregunta en el paso 4. Allí van los mismos botones SIN la tarjeta,
   dentro del contenedor .cnc-form (bloque del final). Las reglas de
   /pago/ok no cambian.
   ═══════════════════════════════════════════════════════════════════════════ */

.cnc {
  background   : #fff;
  border-radius: var(--radius, 10px);
  box-shadow   : 0 2px 12px rgba(11, 31, 58, .08);
  padding      : 1.5rem 1.5rem 1.25rem;
  margin-top   : 1rem;
  position     : relative;
  font-family  : 'Inter', 'Segoe UI', sans-serif;
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.cnc__titulo {
  font-size    : .95rem;
  font-weight  : 700;
  color        : var(--navy, #0B1F3A);
  margin       : 0 0 .3rem;
  padding-right: 1.75rem;          /* hueco para el botón de cerrar */
  display      : flex;
  align-items  : center;
  gap          : .45rem;
}
.cnc__titulo .fas { color: var(--gold, #dfbb3e); }

.cnc__sub {
  font-size    : .82rem;
  color        : #64748b;
  line-height  : 1.5;
  margin       : 0 0 1rem;
  padding-right: 1.75rem;
}

.cnc__cerrar {
  position     : absolute;
  top          : .85rem;
  right        : .85rem;
  width        : 1.85rem;
  height       : 1.85rem;
  border       : none;
  background   : transparent;
  color        : #94a3b8;
  border-radius: 50%;
  cursor       : pointer;
  font-size    : .9rem;
  line-height  : 1;
  display      : flex;
  align-items  : center;
  justify-content: center;
  transition   : background .2s, color .2s;
}
.cnc__cerrar:hover { background: #f1f5f9; color: var(--navy, #0B1F3A); }

/* ── Rejilla de opciones ────────────────────────────────────────────────── */
.cnc__opciones {
  display              : grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap                  : .5rem;
}

.cnc__opcion {
  display        : flex;
  align-items    : center;
  gap            : .55rem;
  text-align     : left;
  background     : #f8fafc;
  border         : 1.5px solid #e2e8f0;
  border-radius  : 8px;
  padding        : .7rem .75rem;
  font-family    : inherit;
  font-size      : .82rem;
  line-height    : 1.35;
  color          : #374151;
  cursor         : pointer;
  width          : 100%;
  transition     : border-color .18s, background .18s, color .18s;
}
.cnc__opcion:hover {
  border-color : var(--teal, #008572);
  background   : #fff;
  color        : var(--teal, #008572);
}
.cnc__opcion:focus-visible {
  outline       : 2px solid var(--teal, #008572);
  outline-offset: 2px;
}
.cnc__opcion[aria-pressed="true"] {
  border-color : var(--teal, #008572);
  background   : #e8f5f2;
  color        : var(--teal, #008572);
  font-weight  : 600;
}
.cnc__opcion:disabled { opacity: .55; cursor: default; }

.cnc__opcion-icono {
  color        : var(--teal, #008572);
  font-size    : .95rem;
  flex-shrink  : 0;
  width        : 1.1rem;
  text-align   : center;
}
.cnc__opcion-texto { flex: 1; min-width: 0; }

/* ── Texto libre de la opción "Otro" ────────────────────────────────────── */
.cnc__otro {
  margin-top   : .75rem;
  display      : flex;
  flex-direction: column;
  gap          : .5rem;
}
.cnc__otro[hidden] { display: none !important; }   /* [hidden] lo pisa el display */

.cnc__otro-input {
  width        : 100%;
  border       : 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding      : .65rem .8rem;
  font-family  : inherit;
  font-size    : .85rem;
  color        : #374151;
  resize       : vertical;
  min-height   : 2.75rem;
}
.cnc__otro-input:focus {
  outline      : none;
  border-color : var(--teal, #008572);
}

.cnc__otro-enviar {
  align-self   : flex-end;
  display      : inline-flex;
  align-items  : center;
  gap          : .4rem;
  background   : var(--teal, #008572);
  color        : #fff;
  border       : none;
  border-radius: 8px;
  padding      : .55rem 1.1rem;
  font-family  : inherit;
  font-size    : .85rem;
  font-weight  : 600;
  cursor       : pointer;
  transition   : background .2s;
}
.cnc__otro-enviar:hover    { background: #006a5a; }
.cnc__otro-enviar:disabled { opacity: .55; cursor: default; }

/* ── Estado final: respuesta guardada ───────────────────────────────────── */
.cnc__gracias {
  display      : flex;
  align-items  : center;
  justify-content: center;
  gap          : .5rem;
  font-size    : .88rem;
  font-weight  : 600;
  color        : var(--teal, #008572);
  padding      : .5rem 0;
  text-align   : center;
}
.cnc__gracias[hidden] { display: none !important; }
.cnc__gracias .fas    { font-size: 1.05rem; }

.cnc__cuerpo[hidden] { display: none !important; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .cnc           { padding: 1.25rem 1rem 1rem; }
  .cnc__opciones { grid-template-columns: 1fr; }
  .cnc__opcion   { font-size: .85rem; padding: .75rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cnc__opcion,
  .cnc__cerrar,
  .cnc__otro-enviar { transition: none; }
}

/* ── Variante del buscador: paso 4 de /traslado-web ─────────────────────────
   [CNC-RESERVA] Los mismos botones, sin la tarjeta: van dentro del bloque
   blanco del formulario, no llevan botón de cerrar y hay más ancho que en
   /pago/ok, así que caben tres columnas. En el móvil se quedan en dos para
   que las doce opciones no ocupen media pantalla antes de pagar.           */
.cnc-form               { margin: 0 0 1.25rem; }
.cnc-form .cnc__sub     { padding-right: 0; }
.cnc-form .cnc__opciones {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

@media (max-width: 420px) {
  .cnc-form .cnc__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cnc-form .cnc__opcion   { font-size: .8rem; padding: .65rem .6rem; gap: .45rem; }
}