/* ============================================================================
   monedero.css — el saldo de tokens en la barra superior (2026-08-14).

   Hoja propia y ADITIVA, mismo motivo que `informe.css` y `cooperacion.css`:
   `app.css` no tiene dueño y varios hilos lo tocan a la vez. Todo va con el
   prefijo `nv-mon-`, salvo `.nv-mon`, que es el botón.

   MEDIDO A 360 px: la barra superior ya lleva hamburguesa, título, tema, idioma
   y logo. El monedero tiene que caber sin empujar a nadie fuera, así que la
   ETIQUETA se cae por debajo de 400 px y queda solo el número — que es el dato.
   ========================================================================== */
.nv-mon {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--nv-linea); background: var(--nv-superficie);
  color: var(--nv-texto); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; line-height: 1;
}
.nv-mon:hover { border-color: var(--nv-acento); }
.nv-mon-ic { display: inline-flex; opacity: .8; }
.nv-mon-n { font-variant-numeric: tabular-nums; }

/* Ámbar cuando queda poco y rojo cuando no queda nada. NO es alarmismo: la
   acción más cara de la app son 40 tokens, así que por debajo de 20 el
   siguiente informe ya no sale, y enterarse ANTES de escribir las observaciones
   es justo el motivo por el que este monedero existe. */
.nv-mon.is-poco { border-color: #c98a00; color: #c98a00; }
.nv-mon.is-vacio { border-color: var(--nv-error, #d9534f); color: var(--nv-error, #d9534f); }

/* El desglose. `position: absolute` colgando de la barra: si fuera un panel en
   el flujo, empujaría la cabecera hacia abajo y movería la pantalla entera cada
   vez que alguien toca el saldo. */
[data-nv-monedero] { position: relative; display: inline-flex; }
.nv-mon-det {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 210px; max-width: 78vw;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--nv-linea); background: var(--nv-superficie);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  font-size: 12.5px; color: var(--nv-texto); white-space: normal;
}
.nv-mon-pie { color: var(--nv-tenue); font-size: 11.5px; line-height: 1.4;
  border-top: 1px solid var(--nv-linea); padding-top: 6px; margin-top: 2px; }

/* 🔴 A 360 px LA BARRA NO DABA MÁS DE SÍ, y esto lo causó el monedero: MEDIDO
   el 2026-08-14, la cabecera medía 360 exactos SIN él y 428 CON él — 68 px de
   desbordamiento horizontal que yo introduje.

   Reparto medido de la fila a 360 px:
     hamburguesa 33 · título 42 · tema 36 · MONEDERO 68 · idioma 115 · logo 56

   Se recorta por los dos sitios que no le quitan nada a nadie:
     · el monedero se aprieta (68 -> ~52), y
     · el LOGO PEQUEÑO se esconde. Es decoración pura: la marca ya está grande
       en la barra lateral, dos veces en la misma pantalla no informa de nada.
   El selector de idioma —el más ancho, 115 px— NO se toca: es funcional, y en
   una app que se usa en cuatro idiomas esconderlo sería quitar una puerta.

   ⚠️ `.nv-hlogo` no es de esta hoja, y la regla se escribe aquí a propósito:
   `app.css` no tiene dueño y varios hilos lo tocan. Así el día que se quite el
   monedero, esta línea se va con él y el logo vuelve solo. */
@media (max-width: 420px) {
  .nv-wtop .nv-hlogo { display: none; }
  /* Y ADEMÁS SE APRIETAN LAS SEPARACIONES, porque esconder el logo no bastaba.
     Segunda medición, con la pantalla de huerta abierta (título más largo):
       contenido 299 + separaciones 5×12=60 + márgenes 18+18=36  =  395 px
     en una barra de 360. El selector de idioma se salía 5 px.
     12 -> 6 de separación y 18 -> 12 de margen liberan 42 px y dejan 353.
     Se recorta el AIRE, que a 360 px es lo único que sobra: ningún control
     desaparece y el selector de idioma —el más ancho— sigue entero, que en una
     app que se usa en cuatro idiomas es una puerta y no un adorno. */
  .nv-wtop { gap: 6px; padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 400px) {
  .nv-mon { padding: 4px 7px; font-size: 12.5px; gap: 4px; }
}

/* En el papel no pinta nada: es un control de la aplicación, no del documento.
   Va sin `.nv-print-inf` a propósito — un saldo de tokens no tiene por qué
   salir impreso desde NINGUNA pantalla. */
@media print { [data-nv-monedero] { display: none !important; } }