/* ─────────────────────────────────────────────────────────────
   LA MASCOTA LECTORA
   Toma sus colores del tema activo, así que encaja con los nueve
   mundos sin necesitar una versión por tema.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Estos dos los calcula pet.js según el pelaje: ver luminance().
     Aquí van solo como respaldo. */
  --pet-eye: #241C18;
  --pet-shine: rgb(255 255 255 / .9);
  --pet-nose: var(--amber);
  --pet-accent: var(--gold);
  --pet-line: var(--lilac);
  /* El libro no puede ser del mismo color que el accesorio: con una
     bufanda dorada, ambos se leían como una sola mancha. */
  --pet-book: var(--violet);
}

/* La gata estaba metida en una caja con borde, como un widget. Ahora
   se sienta EN la balda: sin caja, apoyada sobre el mismo filete que
   separa cada mes, y lo que dice va al lado, en cursiva, como una nota
   al margen. */
.pet-shelf {
  display: grid;
  /* 30 px más que la mascota: es el hueco del rincón, a su izquierda. */
  grid-template-columns: 122px 1fr;
  gap: 12px;
  align-items: end;
  padding: 4px 2px 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: opacity .18s;
}
.pet-shelf:active { opacity: .65; }
/* La mascota se pega a la derecha de su columna y el rincón ocupa lo
   que queda: si no, el rincón se saldría del estante. */
.pet-shelf > :first-child { justify-self: end; }

.pet-svg { width: 84px; height: 74px; display: block; overflow: visible; }

/* ── LA ILUSTRADA, CON SU RINCÓN AL LADO ─────────────────────
   La escala del rincón sale de la propia imagen, en porcentaje: así
   vale igual a 92 px en el estante y a 148 en la vista previa, sin
   repetir la medida en cada sitio. */
.pet-escena { position: relative; display: inline-block; }
.pet-escena .pet-img { display: block; }
.pet-rincon {
  position: absolute;
  right: 100%;
  bottom: 6%;
  width: 38%;
  height: 56%;
  /* Metido en el aire que el lienzo deja a la izquierda del animal:
     así se apoyan en vez de quedar uno lejos del otro. En las poses
     que sí llegan al borde, la imagen le pasa por delante — que es lo
     que hace un objeto que está detrás. */
  margin-right: -20%;
  overflow: visible;
  pointer-events: none;
}

/* ── LA MASCOTA ILUSTRADA ──
   El lienzo llega cuadrado y sin recortar, a propósito: cada pose ocupa
   una parte distinta de él —la que salta llega arriba, la que duerme es
   ancha y baja— y recortarlas al contenido le daría a cada una otra
   escala. Así la gata no pega un salto de tamaño al cambiar de ánimo.

   De la animación que tenía dibujada por código se rescata lo único que
   una imagen puede hacer: RESPIRAR. La cola y los zzz se quedaron en el
   SVG, y las otras cinco especies los conservan. */
.pet-img {
  width: 92px;
  height: 92px;
  display: block;
  object-fit: contain;
  /* Se apoya en la balda: el lienzo trae aire abajo y sin esto la gata
     parece flotar por encima del filete. */
  margin-bottom: -8px;
  animation: respirar-img 4.6s ease-in-out infinite;
  transform-origin: 50% 92%;
}
@keyframes respirar-img {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.022); }
}
/* Dormida respira más despacio, como es debido. */
[data-mood="dormida"] .pet-img { animation-duration: 6.6s; }
/* Y celebrando no respira: está dando un salto. */
[data-mood="celebrando"] .pet-img { animation: none; }

/* Respira. Nada más: una mascota que se agita cansa. */
.pet-body { transform-origin: 64px 100px; animation: respirar 4.2s ease-in-out infinite; }
@keyframes respirar {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.022); }
}

.pet-tail { transform-origin: 92px 100px; animation: cola 5.5s ease-in-out infinite; }
@keyframes cola {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-7deg); }
}

.pet-head { transform-origin: 64px 56px; }
[data-mood="expectante"] .pet-head { animation: atenta 3s ease-in-out infinite; }
@keyframes atenta {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-4deg); }
}

[data-mood="dormida"] .pet-body { animation-duration: 6.5s; }
[data-mood="dormida"] .pet-tail { animation: none; }
.pet-zzz { animation: flotar 3.4s ease-in-out infinite; }
@keyframes flotar {
  0%, 100% { opacity: .3; transform: translateY(2px); }
  50%      { opacity: .75; transform: translateY(-3px); }
}

.pet-spark { animation: destello 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes destello {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

.pet-talk { min-width: 0; padding-bottom: 8px; }
.pet-name {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--gold);
  letter-spacing: var(--label-spacing);
  margin-bottom: 4px;
}
.pet-phrase {
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
}

/* ── PERSONALIZAR ────────────────────────────────────────────
   Segundo estante de la tienda: la misma mecánica que los temas. */
.pet-preview {
  display: grid;
  place-items: center;
  padding: 10px;
  margin-bottom: 14px;
  background: var(--fog-soft);
  border: var(--hairline);
  border-radius: var(--card-radius);
}
.pet-preview .pet-svg { width: 128px; height: 112px; }
.pet-preview .pet-img { width: 148px; height: 148px; margin-bottom: -10px; }

.pet-group-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 8px;
}
.pet-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pet-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 8px;
  border: var(--hairline);
  border-radius: var(--pill-radius);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: all .18s;
}
.pet-opt:hover:not(.locked) { border-color: var(--border-strong); }
.pet-opt.on { border-color: var(--gold); color: var(--gold); }
.pet-opt.locked { opacity: .45; cursor: not-allowed; }
.pet-dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .2);
  flex-shrink: 0;
}

/* Las que aún no están. Se escriben, no se insinúan con un candado:
   es la lista de lo que hay por delante, y por eso va con el filete
   dorado del margen en vez de en gris de nota al pie. */
/* La pista del planificador nace con el margen de arriba en negativo,
   para pegarse al campo que explica. Aquí no explica un campo: viene
   detrás de una fila de botones, y ese negativo la metía dentro. */
.pet-options + .planner-hint,
.pet-porganar + .planner-hint { margin-top: 10px; }

.pet-porganar {
  list-style: none;
  margin: 10px 0 0;
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--gold);
  display: grid;
  gap: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.pet-porganar-quien { color: var(--text); }
.pet-porganar-quien::after { content: ' · '; color: var(--muted); }
.pet-name-input {
  width: 100%;
  padding: 10px 12px;
  border: var(--hairline);
  border-radius: var(--ctl-radius);
  background: var(--fog-soft);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}

/* ── LO QUE ELLA PREGUNTA  ·  historia #45 ───────────────────
   La misma cabeza que el chat —retrato, nombre, lo que dice— para que
   se lea como la misma persona y no como un formulario que se abrió
   detrás de ella. */
.petask-cabeza {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: var(--hairline);
}
.petask-retrato .pet-img { width: 64px; height: 64px; margin-bottom: 0; }
.petask-retrato .pet-svg { width: 64px; height: 56px; }
.petask-quien {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  color: var(--gold);
  margin-bottom: 4px;
}
.petask-dice {
  margin: 0;
  font-size: 15px;
  font-style: italic;
  line-height: 1.4;
  color: var(--text);
}

.petask-grupo { margin-bottom: 16px; }
.petask-pagina-fila { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.petask-pagina-fila .finput { flex: 1; min-width: 0; }
/* El botón no puede pedir la fila entera: `.btn-magic` trae width:100%
   y con flex-basis auto se comía el campo. Ya pasó en el chat. */
.petask-pagina-fila .btn-magic { flex: 0 0 auto; width: auto; padding: 10px 16px; }
.petask-de { font-size: 12px; color: var(--muted); white-space: nowrap; }

.petask-opciones { display: grid; gap: 8px; }

/* CADA RESPUESTA DICE QUÉ PASA SI LA TOCAS. «Lo dejo» sin más da
   miedo —¿se borra?, ¿pierdo lo leído?—, y el miedo se contesta con
   una línea, no con un diálogo de confirmación encima. */
.petask-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: var(--hairline);
  border-radius: var(--ctl-radius);
  background: var(--card-bg);
  color: var(--text);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .18s;
}
.petask-opt:hover { border-color: var(--border-strong); }
.petask-opt-que { display: block; font-size: 14px; }
.petask-opt-por { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* «Ahora no» es una salida, no una opción más: se ve, pero no compite. */
.petask-opt-suave { background: transparent; }