/* ---------- 🐾 ventana de mi mascota ---------- */

/* lo que le pasa ahora, en una frase */
.pet-mood { margin: 0; padding: 8px 12px; border-radius: 16px; background: #fff; border: 3px solid #cfe2f4;
  font: 700 21px/1.2 var(--font); color: #34506e; }

/* las barras: el nombre con su icono cabe sin cortarse */
.pet-bar { grid-template-columns: 196px 1fr 70px; }

/* los cosméticos: una rejilla de tarjetas con la foto de la mascota llevándolos */
.pet-cos { display: block; }
.pet-cos-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.pet-cos-head b { font: 700 24px var(--font); color: #10345f; }
.pet-cos-head small { font: 600 17px var(--font); color: #5a7390; }
.pet-cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.pet-cos-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 8px 10px; cursor: pointer;
  border: 4px solid #cfe2f4; border-radius: 20px; background: #fff; font: 700 18px/1.15 var(--font); color: #10345f; text-align: center; }
.pet-cos-card:hover { border-color: #7fb0dc; }
.pet-cos-card.on { border-color: #e0a91c; background: #fff6d8; }
.pet-cos-card small { font: 600 15px var(--font); color: #3c8a3c; }
.pet-cos-card.on small { color: #8a5a00; }
.pet-cos-prev { height: 92px; display: grid; place-items: center; overflow: hidden; }
.pet-cos-prev .pet-pic-wrap > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pet-cos-none { margin: 10px 0 0; font: 600 18px/1.3 var(--font); color: #5a7390; }