/* Diary page paper and the photos glued on it. Shared by the site (sitio.css builds the book around it)
   and by the panel's "Acomodar fotos" editor, so both look exactly the same. */
.paper {
  position: relative; overflow: hidden; container-type: inline-size;
  aspect-ratio: .8; /* every page has the same shape, so photo positions in % land in the same place */
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, 0) 60%, rgba(160, 120, 60, .10)),
    #FFFCF2;
}
/* Feelings page: red margin line (the ruled lines live on the note itself, so they always match the text) */
.paper.lined {
  background:
    linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(232, 120, 120, .45) calc(10% - 1px) 10%, transparent 10%),
    radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, 0) 60%, rgba(160, 120, 60, .10)),
    #FFFCF2;
}
/* Dotted paper for the photos page */
.paper.dotted { background: radial-gradient(rgba(140, 120, 80, .2) 1px, transparent 1.5px) 0 0 / 18px 18px, radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, 0) 60%, rgba(160, 120, 60, .10)), #FFFCF2; }

/* Area where photos are placed; x / y / width are % of this box */
.dp-area { position: absolute; inset: 6% 7% 9%; container-type: inline-size; }
.dp {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  transform: translate(-50%, -50%) rotate(var(--r));
  display: flex; flex-direction: column; gap: 0;
  padding: 3.2cqw 3.2cqw 0; background: #fff; border: 0; margin: 0; font: inherit; color: inherit; text-align: center;
  border-radius: 3px; box-shadow: 0 1.4cqw 3cqw rgba(42, 40, 30, .28), 0 0 0 1px rgba(0, 0, 0, .04);
}
.dp-img { position: relative; display: block; aspect-ratio: var(--ar, 1.333); overflow: hidden; background: #DDF1EE; }
.dp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-cap { display: block; min-height: 6cqw; padding: 1.6cqw 1cqw 2.2cqw; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: max(11px, 3.4cqw); line-height: 1.25; color: #4B3A2A; overflow-wrap: anywhere; }
/* Washi tape on top, alternating colors */
.dp::before { content: ""; position: absolute; top: -2.2cqw; left: 50%; width: 34%; height: 5cqw; translate: -50% 0; rotate: -4deg;
  background: rgba(255, 212, 92, .7); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); z-index: 1; }
.dp:nth-child(3n+2)::before { background: rgba(127, 200, 190, .7); rotate: 5deg; }
.dp:nth-child(3n)::before { background: rgba(240, 138, 106, .55); rotate: -2deg; }

/* Feelings stickers */
.feelings { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45em .5em; }
.feelings li { display: inline-flex; align-items: center; gap: .3em; padding: .2em .7em .2em .45em; border-radius: 99px; font-weight: 700; font-size: .82em; line-height: 1.4;
  background: #FFEFB8; color: #5A4300; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); rotate: -2deg; }
.feelings li:nth-child(2n) { background: #DDF1EE; color: #1F5B55; rotate: 2deg; }
.feelings li:nth-child(3n) { background: #FBE3DA; color: #7A2E1A; rotate: -1deg; }
.feelings li span { font-size: 1.25em; }