/* El cartel de "Sumaste puntos". Lo dibuja js/puntos-pop.js.

   Reusa .bienpop/.bcard de datos.css -- la misma tarjeta del cartel de
   bienvenida y del aviso de error -- asi que aca va SOLO lo propio: el circulo
   verde y el numero grande.

   Va DESPUES de datos.css en el index, que es donde vive la tarjeta. */

/* El circulo del icono, en verde. Es lo que distingue este cartel de los otros
   dos que usan la misma tarjeta, y se lee antes que cualquier palabra:
     rojo lleno  = algo salio mal (no pudimos guardar)
     rojo suave  = te invitamos a hacer algo (bienvenida)
     verde       = esto ya es tuyo (puntos) */
.bcard .bico.verde{background:#EAF6EE;color:#177245}

/* EL NUMERO, GRANDE. Es lo primero que tiene que ver el socio: cuanto sumo.
   El motivo se lee despues. Al reves -- un parrafo explicando y el numero
   escondido adentro del texto -- es lo que hacia la cinta finita que casi
   nadie veia al pie de "Mis datos". */
.bcard .ptsnum{font-family:"Days One",sans-serif;font-size:44px;line-height:1;
  color:#177245;margin:2px 0 14px}
.bcard .ptsnum span{display:block;font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#3F6B55;
  margin-top:7px}

/* El saldo, mas discreto: es dato de contexto, no la noticia. */
.bcard p.ptstot{font-size:13.5px;color:var(--mut,#6C6C73);margin:0 0 10px}
.bcard p.ptstot b{color:#177245;font-weight:600}

@media(max-width:480px){
.bcard .ptsnum{font-size:38px}
}