/* Neón · motor/src/ui/tarjeta.css — la TARJETA del configurador en la ficha (estado cerrado). Ver ui/tarjeta_ficha.js.
   Dos modos: ATERRIZAJE (solo el ejemplo: cabecera propia bajo la vista previa, panel punteado, botón Aplicar cambios)
   y CON DISEÑO (#neonCerrado.nc-conDiseno / body.neonConDiseno: barra de título arriba, campos sin panel,
   pie con Seguir editando / Empezar de nuevo / Guardar diseño / Añadir al carrito).
   Todo bajo body:not(.neonAbierto): en pantalla completa manda ui/pantalla_completa.css. */

/* ── contenedor de la tarjeta en la ficha ─────────────────────────────────────────────────────────── */
body:not(.neonAbierto) .neonMotorTarjeta { aspect-ratio: auto; height: auto; background: #1b1b1f; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
#neonVistaPrevia { position: relative; }
/* la vista previa FIJA arriba del todo al hacer scroll en el móvil, a todo el ancho y sobre la cabecera de la tienda (la pone y la
   quita ui/tarjeta_ficha.js); por debajo de la pantalla completa (100001) */
#neonVistaPrevia.nc-fija { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100000; border-radius: 0; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.nc-hueco-vista { display: none; }
.nc-hueco-vista.activo { display: block; }
body:not(.neonAbierto) .neonMotorTarjeta .personalizaturotulo { border-radius: 0; }
body:not(.neonAbierto):not(.neonConDiseno) .neonMotorTarjeta .personalizaturotulo { display: none; }
body.neonAbierto #neonCerrado { display: none; }
/* con el configurador abierto, fuera la barra flotante de contacto de la tienda (teléfono, WhatsApp, correo, Instagram: footer.tpl) */
body.neonAbierto .social_info { display: none; }

/* ── tarjeta ────────────────────────────────────────────────────────────────────────────────────────── */
#neonCerrado { font-family: "Open Sans", Inter, system-ui, sans-serif; color: #e8e8ec; padding: 22px 22px 0; }
#neonCerrado * { box-sizing: border-box; }

#neonCerrado .nc-cab { text-align: center; margin: 4px 0 16px; }
#neonCerrado .nc-cab h3 { margin: 0; font-size: 30px; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 12px; letter-spacing: -.3px; }
#neonCerrado .nc-cab h3 img { width: 36px; height: 36px; }

#neonCerrado .nc-tabs { display: flex; justify-content: center; margin-bottom: 22px; }
#neonCerrado .nc-tabs > div { display: inline-flex; background: #2a2a30; border-radius: 999px; padding: 4px; gap: 4px; }
#neonCerrado .nc-tabs button { height: 40px; padding: 0 20px; border-radius: 999px; border: 2px solid transparent; background: transparent; color: #c8c8cf; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
#neonCerrado .nc-tabs button.on { background: #fff; color: #1b1b1f; border-color: #e0187e; }

#neonCerrado .nc-panel { border: 1px dashed #b3156a; border-radius: 12px; padding: 20px 20px 24px; background: #1f1f24; }
#neonCerrado .nc-panel-cab { text-align: center; margin-bottom: 18px; }
/* SOLO LOGO (corte y plegado, 16-oct-2026): la ficha marca el anfitrión (#neonMotorHost.nc-solo-logo) desde el primer pintado, antes de
   que arranque el motor: ni pestaña ni panel de texto, y el de logo a la vista (el esqueleto lo trae con hidden) */
.nc-solo-logo #neonCerrado #ncTabTexto, .nc-solo-logo #neonCerrado #ncPanelTexto { display: none; }
.nc-solo-logo #neonCerrado #ncPanelLogo { display: block; }
#neonCerrado .nc-ico { width: 54px; height: 54px; border-radius: 50%; background: #2a1a24; border: 1px solid #6e1a4d; color: #ff4fa3; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 26px; font-weight: 700; box-shadow: 0 0 18px rgba(224, 24, 126, .35); }
#neonCerrado .nc-panel h4 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; }
#neonCerrado.nc-conDiseno .nc-cab, #neonCerrado.nc-conDiseno .nc-panel-cab { display: none !important; }
#neonCerrado.nc-conDiseno .nc-panel { border: 0; background: transparent; padding: 0; }

/* la columna de la medida mide lo que su contenido (en FR/DE «Hauteur/Largeur», «Höhe/Breite» no cabían en 1.3fr y el número quedaba aplastado) */
#neonCerrado .nc-campos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 18px; padding: 0 6px; }
#neonCerrado .nc-campos > * { min-width: 0; }
#neonCerrado label { display: block; font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 8px; text-align: center; }
#neonCerrado .nc-in { position: relative; height: 50px; border: 1px solid #3a3a42; background: #141417; border-radius: 10px; display: flex; align-items: center; padding: 0 14px; gap: 8px; }
#neonCerrado .nc-in:focus-within { border-color: #e0187e; box-shadow: 0 0 0 1px #e0187e; }
#neonCerrado .nc-in input, #neonCerrado .nc-in select { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font-size: 17px; font-weight: 600; outline: none; appearance: none; -webkit-appearance: none; padding: 0; margin: 0; }
#neonCerrado .nc-in select option { background: #141417; color: #fff; font-size: 16px; }
#neonCerrado .nc-in .nc-x { width: 24px; height: 24px; border-radius: 50%; background: #3a3a42; color: #c8c8cf; border: 0; cursor: pointer; font-size: 12px; line-height: 24px; text-align: center; padding: 0; flex: 0 0 auto; }
#neonCerrado .nc-in .nc-flecha { flex: 0 0 auto; color: #fff; font-size: 12px; pointer-events: none; }
#neonCerrado .nc-tam { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
#neonCerrado .nc-seg { height: 50px; border-radius: 999px; background: #2a2a30; display: flex; padding: 4px; gap: 2px; }
#neonCerrado .nc-seg button { height: 100%; padding: 0 16px; border-radius: 999px; border: 2px solid transparent; background: transparent; color: #9a9aa3; font-size: 15px; font-weight: 600; cursor: pointer; }
#neonCerrado .nc-seg button.on { background: #fff; color: #1b1b1f; border-color: #e0187e; }
#neonCerrado .nc-in.nc-num { min-width: 0; padding: 0 12px; border-radius: 999px; }
/* ancho propio del número: sin max (no hay tope de medida, 5-nov-2026) Chrome le da el ancho natural de una cifra y la rejilla lo aplasta */
#neonCerrado .nc-in.nc-num input { -moz-appearance: textfield; min-width: 5ch; }
#neonCerrado .nc-in.nc-num input::-webkit-outer-spin-button, #neonCerrado .nc-in.nc-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#neonCerrado .nc-in.nc-num small { color: #9a9aa3; font-size: 13px; }

/* panel LOGO */
#neonCerrado .nc-drop { border: 1px dashed #3a3a42; border-radius: 12px; background: #141417; padding: 22px; text-align: center; transition: border-color .15s, background .15s; margin: 0 6px; }
#neonCerrado.nc-conDiseno .nc-drop { margin: 0; }
#neonCerrado .nc-drop.nc-sobre { border-color: #e0187e; background: #221520; }
#neonCerrado .nc-drop-txt { font-size: 16px; color: #fff; font-weight: 600; }
#neonCerrado .nc-drop-o { font-size: 12px; color: #9a9aa3; margin: 8px 0; }
#neonCerrado .nc-drop-sub { font-size: 12px; color: #9a9aa3; margin-top: 10px; }
#neonCerrado .nc-elegir { height: 42px; padding: 0 24px; border-radius: 999px; border: 2px solid #e0187e; background: #2a1a24; color: #ff4fa3; font-size: 15px; font-weight: 600; cursor: pointer; }
#neonCerrado .nc-elegir:hover { background: #e0187e; color: #fff; }

/* pie */
#neonCerrado .nc-pie { margin: 26px -22px 0; padding: 16px 16px 18px; border-top: 1px solid #2a2a30; background: #141417; }
#neonCerrado .nc-precio { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 14px; }
#neonCerrado .nc-precio #ncPrecioSlot { font-size: 30px; font-weight: 700; color: #fff; line-height: 1; }
#neonCerrado .nc-precio .nc-iva { font-size: 13px; line-height: 1.35; color: #e8e8ec; }
#neonCerrado .nc-precio .nc-iva b { display: block; color: #ff4fa3; font-weight: 400; }
/* aterrizaje: precio grande a la izquierda + un solo botón */
#neonCerrado:not(.nc-conDiseno) .nc-pie { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 26px 22px; }
#neonCerrado:not(.nc-conDiseno) .nc-precio { margin: 0; }
#neonCerrado:not(.nc-conDiseno) .nc-precio #ncPrecioSlot { font-size: 30px; font-weight: 700; }   /* como con diseño (antes 44 px / 800; 2-nov-2026) */
/* «Aplicar cambios» con la misma forma que los botones del pie con diseño (.nc-botones button): rectángulo de esquinas suaves, sin halo (2-nov-2026) */
#neonCerrado .nc-inicial button { height: 46px; min-width: 200px; padding: 0 28px; border-radius: 8px; border: 1px solid #e0187e; background: #e0187e; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
#neonCerrado .nc-inicial button:hover { filter: brightness(1.12); }
#neonCerrado.nc-conDiseno .nc-inicial, #neonCerrado:not(.nc-conDiseno) .nc-botones { display: none !important; }
/* con diseño: fila de 4 botones */
#neonCerrado .nc-botones { display: flex; flex-wrap: wrap; gap: 10px; }   /* con poco ancho (columna estrecha de la ficha) pasan a dos filas: la anchura del viewport no dice nada de la de la tarjeta */
#neonCerrado .nc-botones button { flex: 1 1 150px; min-width: 0; height: 46px; border-radius: 8px; border: 1px solid #e0187e; background: #e0187e; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; padding: 0 10px; }
#neonCerrado .nc-botones button.nc-sec { background: transparent; border-color: #e8e8ec; }
#neonCerrado .nc-botones button:hover { filter: brightness(1.12); }

@media (max-width: 1100px) {
  #neonCerrado .nc-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #neonCerrado .nc-campos > :first-child { grid-column: 1 / -1; }
}
/* MÓVIL (una columna en el tema, hasta 767 px): la tarjeta de borde a borde, como la vista cuando se queda fija arriba
   (Susan, 20-oct-2026). El ancho y el desplazamiento los pone ui/tarjeta_ficha.js (midiendo: el contenedor del tema no está
   centrado en la pantalla); aquí, sin esquinas */
@media (max-width: 767px) {
  body:not(.neonAbierto) .neonMotorTarjeta { border-radius: 0; }
  /* el pie en UNA fila (Susan, 20-oct-2026: «muy grande»): precio a la izquierda con IVA y envío debajo; «Aplicar cambios» a la derecha */
  #neonCerrado:not(.nc-conDiseno) .nc-pie { flex-wrap: nowrap; gap: 12px; padding: 14px 16px 16px; }
  #neonCerrado:not(.nc-conDiseno) .nc-precio { flex-direction: column; align-items: flex-start; gap: 4px; }
  #neonCerrado:not(.nc-conDiseno) .nc-precio #ncPrecioSlot { font-size: 24px; white-space: nowrap; }
  #neonCerrado .nc-precio .nc-iva { font-size: 12px; line-height: 1.3; }
  #neonCerrado:not(.nc-conDiseno) .nc-pie .nc-inicial { flex: 0 0 auto; }
  #neonCerrado .nc-inicial button { min-width: 0; padding: 0 18px; }
}
@media (max-width: 700px) {
  #neonCerrado .nc-campos { grid-template-columns: minmax(0, 1fr); }
}