/* ============================================================================
   feedback.css — «¿Cómo vamos?» (2026-08-14).

   Hoja propia y ADITIVA, mismo motivo que `licitaciones.css` y
   `cooperacion.css`: `app.css` no tiene dueño y varios hilos lo tocan a la
   vez. Aquí solo hay clases nuevas, todas con prefijo `nv-fb-`.

   🔴 EL BOTÓN NO PUEDE TAPAR AL DE LA IA. Medido a 360 px: el botón flotante
   del asistente vive en la esquina inferior DERECHA. Éste va a la IZQUIERDA
   por eso, no por gusto — dos botones flotantes en la misma esquina se pisan y
   el de arriba se come los toques del de abajo.

   🔴 Y LA VENTANA VA POR ENCIMA DEL FAB (`z-index: 80` contra el **70** de
   `.nv-fab`). Esto se vio en la verificación a 360 px, y es LITERALMENTE el
   mismo fallo que `app.css` ya tiene documentado unas líneas más abajo del
   propio `.nv-fab`: *«el FAB mide 84px y vive pegado abajo a la derecha: justo
   encima del botón de enviar… ese solape es la razón literal de "no se ve bien
   el botón de enviar en el móvil": no era contraste, era que el planeta lo
   tapaba»*. Aquí pasaba igual: el planeta de la IA quedaba encima del botón
   «Enviar» de esta ventana, así que un toque para mandar la queja podía abrir
   el chat. Si alguien baja este número por debajo de 70, vuelve.

   El BOTÓN, en cambio, se queda en 40 — por debajo del FAB a propósito: está
   en la otra esquina, no se solapan, y si algún día el chat se abre a pantalla
   completa este botón no debe flotar encima de la conversación.
   ========================================================================== */

.nv-fb-btn {
  position: fixed; left: 14px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-radius: 999px;
  background: var(--nv-superficie); color: var(--nv-texto);
  border: 1px solid var(--nv-linea-fuerte, var(--nv-linea));
  font: inherit; font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  cursor: pointer;
}
.nv-fb-btn:hover { border-color: var(--nv-acento); }
.nv-fb-emoji { font-size: 15px; line-height: 1; }
/* A 360 px el texto cabe y AYUDA: un botón que solo enseña un bocadillo no
   dice qué hace, y nadie toca lo que no entiende. Solo se esconde por debajo
   de 340 px, que es un teléfono muy viejo. */
@media (max-width: 339px) { .nv-fb-btn-txt { display: none; } }

.nv-fb-capa {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 12px;
}
/* En el móvil sube desde abajo (el pulgar llega); en pantalla grande se
   centra. `align-items` cambia, no la caja. */
@media (min-width: 620px) { .nv-fb-capa { align-items: center; } }

.nv-fb-caja {
  width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  background: var(--nv-fondo, var(--nv-superficie)); color: var(--nv-texto);
  border: 1px solid var(--nv-linea); border-radius: 18px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}

.nv-fb-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.nv-fb-tit { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nv-fb-tit strong { font-size: 17px; }
.nv-fb-sub { font-size: 12.5px; color: var(--nv-tenue); line-height: 1.45; }
.nv-fb-x { background: none; border: 0; color: var(--nv-tenue); font-size: 18px;
  cursor: pointer; padding: 2px 6px; flex: none; }

/* --- el pulgar: la respuesta que da más gente --- */
.nv-fb-pulgares { display: flex; gap: 8px; }
.nv-fb-pulgar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 8px; background: var(--nv-superficie);
  border: 1px solid var(--nv-linea); border-radius: 14px;
  font: inherit; font-size: 12.5px; color: var(--nv-tenue); cursor: pointer; }
.nv-fb-pulgar .nv-fb-emoji { font-size: 22px; }
.nv-fb-pulgar.is-on { border-color: var(--nv-acento); color: var(--nv-texto); font-weight: 700; }

.nv-fb-tipos { display: flex; gap: 6px; flex-wrap: wrap; }
.nv-fb-tipo { background: var(--nv-superficie); border: 1px solid var(--nv-linea);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px;
  color: var(--nv-tenue); cursor: pointer; }
.nv-fb-tipo.is-on { border-color: var(--nv-acento); color: var(--nv-texto); font-weight: 700; }

.nv-fb-texto { width: 100%; box-sizing: border-box; resize: vertical; min-height: 88px;
  padding: 11px 12px; font: inherit; font-size: 14px; line-height: 1.5;
  background: var(--nv-superficie); color: var(--nv-texto);
  border: 1px solid var(--nv-linea); border-radius: 14px; }

.nv-fb-vias { display: flex; gap: 8px; }
.nv-fb-via { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 8px; background: var(--nv-superficie);
  border: 1px solid var(--nv-linea); border-radius: 14px;
  font: inherit; font-size: 12.5px; color: var(--nv-tenue); cursor: pointer; }
.nv-fb-via.is-on { border-color: var(--nv-acento); color: var(--nv-texto); font-weight: 700; }
/* Apagado y con su motivo en el `title`, no escondido: un botón que
   desaparece según el navegador hace pensar que la app está incompleta. */
.nv-fb-via:disabled { opacity: .45; cursor: not-allowed; }

.nv-fb-nota { font-size: 11.5px; color: var(--nv-tenue); line-height: 1.45; margin: 0; }

.nv-fb-aviso { font-size: 12.5px; line-height: 1.45; padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--nv-linea); }
/* Ámbar, no rojo: «te falta escribir algo» no es una avería. */
.nv-fb-aviso.is-mal { border-color: #c98a00; color: #c98a00; }
.nv-fb-aviso.is-bien { border-color: var(--nv-acento); }

.nv-fb-pie { display: flex; }
.nv-fb-enviar { width: 100%; }

.nv-fb-gracias { display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center; padding: 18px 8px; }
.nv-fb-gracias strong { font-size: 17px; }
.nv-fb-gracias p { margin: 0; font-size: 13px; color: var(--nv-tenue); line-height: 1.5; }
.nv-fb-emoji-grande { font-size: 40px; line-height: 1; }

/* ─────────────────────────────────────────────────────────────────────────
   LA BANDEJA DEL FUNDADOR (pestaña «Retroalimentación» dentro de founder.js).

   Vive en ESTA hoja y no en `app.css` por lo mismo que todo lo de arriba:
   `app.css` no tiene dueño. Y prefijo `nv-fd-fb-`: `nv-fd-` es el del Comando
   Central, `fb` es lo que esta pieza añade, así que no puede chocar con nada
   de las otras doce pestañas.
   ───────────────────────────────────────────────────────────────────────── */
.nv-fd-h3 { font-size: 14px; margin: 14px 0 8px; }
.nv-fd-fblista { display: flex; flex-direction: column; gap: 6px; }
/* Cada fila es un BOTÓN, no un div con un `onclick`: así llega el teclado y
   el lector de pantalla lo anuncia como algo que se puede pulsar. */
.nv-fd-fbfila { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 11px 12px;
  background: var(--nv-superficie); color: var(--nv-texto);
  border: 1px solid var(--nv-linea); border-radius: 14px;
  font: inherit; font-size: 13.5px; cursor: pointer; }
.nv-fd-fbfila:hover { border-color: var(--nv-acento); }
.nv-fd-fbpant { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.nv-fd-fbmets { display: flex; align-items: center; gap: 10px; flex: none; font-size: 12px; }
/* Ámbar y en negrita: es el número que decide qué se arregla primero. */
.nv-fd-fbprob { color: #c98a00; font-weight: 700; white-space: nowrap; }

.nv-fd-fbmsg { background: var(--nv-superficie); border: 1px solid var(--nv-linea);
  border-radius: 14px; padding: 11px 12px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 6px; }
.nv-fd-fbtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.nv-fd-fbtipo { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--nv-linea);
  font-size: 11.5px; white-space: nowrap; }
.nv-fd-fbtipo.is-problema { border-color: #c98a00; color: #c98a00; }
/* El texto de la persona, con el tamaño de lectura normal: es lo importante
   de la tarjeta, no el metadato de arriba. */
.nv-fd-fbtxt { margin: 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.nv-fd-fbfoto { font-size: 12.5px; color: var(--nv-acento); text-decoration: underline; }
.nv-fd-fbpie { font-size: 11.5px; }
.nv-fd-dim { color: var(--nv-tenue); }
.nv-fd-vacio { padding: 20px 12px; text-align: center; color: var(--nv-tenue); font-size: 13.5px; }
.nv-fd-vacio p { margin: 0 0 6px; }
.nv-fd-volver { margin-bottom: 10px; }