:root {
  --fondo: #fff8f3;
  --papel: #ffffff;
  --tinta: #3b2a2f;
  --suave: #75606a;
  --linea: #f0e0d8;
  --rosa: #e2547a;
  --rosa-oscuro: #a52f52;
  --rosa-boton: #c13d62;  /* 5.1:1 con texto blanco; --rosa queda para adornos */
  --rosa-claro: #fde4ea;
  --verde: #4f8a3c;
  --verde-claro: #e7f3dc;
  --ambar: #c98a1b;
  --radio: 18px;
  --sombra: 0 6px 20px rgb(120 60 70 / 0.08);
  --titulo: "Fraunces", Georgia, serif;
  --texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.5 var(--texto);
  min-height: 100dvh;
}
a { color: var(--rosa-oscuro); }
img { max-width: 100%; display: block; }
h1, h2 { font-family: var(--titulo); line-height: 1.2; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin-top: 1.5rem; }

.contenedor { max-width: 480px; margin: 0 auto; padding: 16px 16px 32px; }
.contenedor--con-barra { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.suave { color: var(--suave); }
.centrado { text-align: center; }
.saludo { font-size: 1.6rem; margin: .25rem 0 1rem; }

/* Cabecera y barra inferior */
.cabecera {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 480px; margin: 0 auto; padding: 12px 16px;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(8px);
}
.cabecera--panel { background: var(--tinta); color: #fff; max-width: none; }
.cabecera--panel > * { max-width: 480px; }
.cabecera__floreria { font-weight: 800; }
.cabecera__floreria small { font-weight: 600; opacity: .7; }
.cabecera form { margin: 0; }
.marca { font-family: var(--titulo); color: var(--rosa); font-size: 2.4rem; margin: 0; }
.marca--chica { font-size: 1rem; text-decoration: none; }
.marca--clara { color: #fff; }

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 480px; margin: 0 auto;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--papel);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -4px 16px rgb(120 60 70 / .06);
}
.barra a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; border-radius: 12px;
  color: var(--suave); text-decoration: none; font-size: .75rem; font-weight: 700;
}
.barra .icono { width: 24px; height: 24px; }
.barra a.activa { color: var(--rosa-oscuro); background: var(--rosa-claro); }

/* Botones y formularios */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px;
  border: 0; border-radius: 999px;
  background: var(--rosa-boton); color: #fff;
  font: 800 1rem var(--texto); text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: transform .1s, background .2s, opacity .2s;
}
.boton:active { transform: scale(.97); }
.boton[aria-busy=true] { opacity: .7; pointer-events: none; }
.barra a, .contador button, .enlace { touch-action: manipulation; }
.boton:hover { background: var(--rosa-oscuro); }
.boton--suave { background: var(--rosa-claro); color: var(--rosa-oscuro); }
.boton--suave:hover { background: #fbd3dd; }
.boton--grande { width: 100%; min-height: 56px; font-size: 1.05rem; }
.boton--google { width: 100%; background: #fff; color: var(--tinta); border: 1.5px solid var(--linea); }
.boton--google:hover { background: #fafafa; }
.boton--whatsapp { background: #0f7a40; }
.boton--whatsapp:hover { background: #0b6334; }
.boton--peligro { background: #b3261e; }
.enlace { background: none; border: 0; padding: 8px; color: var(--rosa-oscuro); font: 700 .95rem var(--texto); cursor: pointer; text-decoration: underline; }
.enlace--claro { color: #fff; }
.volver { display: inline-block; margin-bottom: 8px; text-decoration: none; font-weight: 700; }

.formulario { display: grid; gap: 14px; }
.formulario .boton { width: 100%; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
legend { font-family: var(--titulo); font-size: 1.1rem; margin-bottom: 8px; }
.campo { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.campo--fila { display: flex; align-items: center; gap: 10px; }
.campo input:not([type=checkbox]):not([type=radio]):not([type=color]), .campo textarea, .campo select, .buscador input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid var(--linea); border-radius: 14px;
  background: var(--papel); color: var(--tinta);
  font: 400 1rem var(--texto);
}
.campo input:focus, .campo textarea:focus, .campo select:focus, .buscador input:focus { outline: 3px solid var(--rosa-claro); border-color: var(--rosa); }
.campo input[type=color] { width: 56px; height: 40px; border: 0; background: none; }
.campo input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--rosa); }
.campo__sufijo { display: flex; align-items: center; gap: 6px; }
.campo__sufijo span { color: var(--suave); font-weight: 400; white-space: nowrap; }
.campos-dobles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pista { margin: -4px 0 0; font-size: .85rem; }
.separador { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--suave); font-size: .9rem; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

.aviso { padding: 12px 16px; margin-bottom: 12px; border-radius: 14px; font-weight: 700; }
.aviso--ok { background: var(--verde-claro); color: #2f5d22; }
.aviso--error { background: #fde2e1; color: #9b1c1c; }

.tarjeta {
  display: grid; gap: 4px; padding: 16px; margin-bottom: 16px;
  border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra);
  color: var(--tinta); text-decoration: none;
}
.tarjeta--invitacion { background: linear-gradient(135deg, #fde4ea, #fff1e6); }
.tarjeta--invitacion strong { color: var(--rosa-oscuro); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0; }
.bloque { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--linea); }
.vacio { text-align: center; padding: 32px 8px; color: var(--suave); }
.vacio__icono { font-size: 3rem; }

/* Jardín */
.cuadro {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1; width: 100%;
  border-radius: 24px; border: 6px solid #fff;
  box-shadow: var(--sombra), inset 0 0 0 1px var(--linea);
  background: #fff8f3;
}
.escena { position: absolute; inset: 0; width: 100%; height: 100%; }
.cuadro__vacio {
  position: absolute; left: 0; right: 0; top: 24%; margin: 0; padding: 0 24px;
  text-align: center; color: var(--suave); font-weight: 700;
}
/* Cada flor se ubica por la base del tallo (left/top) y se inclina desde ahí (--inclina). El ancho lo da reglas.acomodar. */
.cuadro__flores { position: absolute; inset: 0; }
.flor {
  position: absolute; display: block;
  aspect-ratio: 40 / 100;
  /* El giro es a la altura de la tierra (--pivote), no en la punta del tallo escondida bajo ella. */
  transform: translate(-50%, -100%) rotate(var(--inclina, 0deg));
  transform-origin: 50% var(--pivote, 100%);
  -webkit-tap-highlight-color: transparent;
}
.escena--frente { pointer-events: none; }
/* De noche las flores se ven en penumbra */
.cuadro--noche .cuadro__flores { filter: brightness(.8) saturate(.9); }
.flor:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; border-radius: 8px; }
.flor-svg { width: 100%; height: 100%; overflow: visible; display: block; transform-origin: 50% 100%; }
.flor--fresca .flor-svg { animation: mecer 4s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -0.6s); }
.flor-cabeza { transform-box: view-box; transform-origin: 20px 38px; transition: transform .3s; }
/* El aspecto cambia día a día con --m (0 a 1). */
.flor--marchitandose .flor-svg {
  filter: saturate(calc(1 - var(--m) * .75)) sepia(calc(var(--m) * .55)) brightness(calc(1 - var(--m) * .1));
  transform: rotate(calc(var(--m) * 6deg));
}
.flor--marchitandose .flor-cabeza { transform: rotate(calc(var(--m) * 40deg)) scale(calc(1 - var(--m) * .18)); }
.flor--nueva .flor-svg { animation: crecer 1.1s cubic-bezier(.2, .9, .3, 1.3) both, mecer 4s ease-in-out 1.1s infinite; }
@keyframes mecer { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
@keyframes crecer { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flor-svg { animation: none !important; } }

/* Riego */
.jardin-riego { position: relative; }
.regar { text-align: center; margin-top: 14px; }
.boton--agua { background: #1f6fa8; }
.boton--agua:hover { background: #185a89; }
.regar__pista { font-size: .85rem; margin: 6px 0 0; }
.regar__hecho { margin: 0; padding: 10px 14px; border-radius: 14px; background: #e3f0fa; color: #184e74; font-weight: 700; }
/* Regadera: entra, se inclina, riega barriendo de derecha a izquierda y se va (3,2 s) */
.regadera { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); pointer-events: none; overflow: visible; }
.regadera__mover { animation: regadera-mover 3.2s ease-in-out both; }
.regadera__lata { transform-box: view-box; transform-origin: 74px 34px; animation: regadera-inclinar 3.2s ease-in-out both; }
.regadera__agua { opacity: 0; stroke-dasharray: 2.5 3.5; animation: regadera-agua 3.2s linear both, agua-cae .35s linear infinite; }
@keyframes regadera-mover {
  0% { transform: translate(40px, -30px); opacity: 0; }
  14% { transform: translate(6px, 0); opacity: 1; }
  30% { transform: translate(6px, 0); }
  76% { transform: translate(-22px, 2px); }
  88% { transform: translate(-22px, 2px); opacity: 1; }
  100% { transform: translate(30px, -34px); opacity: 0; }
}
@keyframes regadera-inclinar {
  0%, 16% { transform: rotate(0); }
  28%, 78% { transform: rotate(-32deg); }
  90%, 100% { transform: rotate(0); }
}
@keyframes regadera-agua { 0%, 27% { opacity: 0; } 32%, 74% { opacity: .9; } 80%, 100% { opacity: 0; } }
@keyframes agua-cae { to { stroke-dashoffset: -6; } }

/* Clima real encima del escenario. En los niveles con ventana solo se ve por la ventana. */
.clima-capa { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.clima-capa--ventana { clip-path: inset(8% 20% 50% 20%); }

/* Detalles que se ganan y cosas de la noche */
.mariposa { transform-box: view-box; animation: revolotear calc(7s + var(--i) * 2s) ease-in-out calc(var(--i) * -3s) infinite; }
.mariposa__alas { transform-box: fill-box; transform-origin: center; animation: aletear .28s ease-in-out infinite alternate; }
@keyframes revolotear { 0%, 100% { translate: 0 0; } 25% { translate: 6px -4px; } 50% { translate: 10px 2px; } 75% { translate: 3px 5px; } }
@keyframes aletear { to { scale: .25 1; } }
.pajaros { animation: volar 18s linear infinite; }
@keyframes volar { from { translate: -30px 0; } to { translate: 60px -4px; } }
.estrella, .luciernaga, .foco { animation: titilar calc(2.4s + var(--i) * .7s) ease-in-out calc(var(--i) * -.9s) infinite; }
@keyframes titilar { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.clima--nublado .escena, .clima--lluvia .escena, .clima--tormenta .escena { filter: saturate(.75) brightness(.94); }
.clima--lluvia .escena, .clima--tormenta .escena { filter: saturate(.6) brightness(.86); }
.clima--nublado .sol, .clima--lluvia .sol, .clima--tormenta .sol { opacity: .3; }
.nube-clima {
  position: absolute; top: calc(4% + var(--i) * 9%); left: 0; width: 42%; opacity: .9;
  animation: nube-cruza calc(38s + var(--i) * 9s) linear calc(var(--i) * -14s) infinite;
}
.clima--lluvia .nube-clima svg g, .clima--tormenta .nube-clima svg g { fill: #c9cfd8; }
@keyframes nube-cruza { from { transform: translateX(-110%); } to { transform: translateX(250%); } }
.gota-clima {
  position: absolute; top: -12%; width: 1.5px; height: 12%;
  background: linear-gradient(transparent, rgb(120 170 220 / .8)); border-radius: 2px;
  rotate: 12deg; animation: gota-cae .7s linear infinite;
}
@keyframes gota-cae { to { transform: translateY(1000%); } }
.clima--tormenta .clima-capa::after {
  content: ""; position: absolute; inset: 0; background: #fff; opacity: 0;
  animation: relampago 8s linear infinite;
}
@keyframes relampago { 0%, 90%, 92.5%, 100% { opacity: 0; } 91% { opacity: .55; } 93.5% { opacity: .35; } 95% { opacity: 0; } }
/* Viento (más de 25 km/h): las flores se mecen más fuerte hacia un lado */
.clima--viento .flor--fresca .flor-svg { animation: viento 1.7s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -0.25s); }
@keyframes viento { 0%, 100% { rotate: 1deg; } 50% { rotate: 10deg; } }
.clima-chip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin: 8px 0 0; font-size: .9rem; color: var(--suave); }
.clima-chip .enlace { padding: 6px; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) {
  .mariposa, .mariposa__alas, .pajaros, .estrella, .luciernaga, .foco { animation: none; }
  .nube-clima, .gota-clima, .clima--tormenta .clima-capa::after { animation: none; }
  .gota-clima { display: none; }
  .clima--viento .flor--fresca .flor-svg { animation: none; }
}

/* Sol: rayos que giran despacio y halo que respira */
.sol__rayos, .sol__halo { transform-box: view-box; transform-origin: var(--sx) var(--sy); }
.sol__rayos { animation: sol-girar 40s linear infinite; }
.sol__halo { animation: sol-respirar 4s ease-in-out infinite; }
@keyframes sol-girar { to { rotate: 360deg; } }
@keyframes sol-respirar { 0%, 100% { scale: 1; opacity: .3; } 50% { scale: 1.25; opacity: .15; } }

@media (prefers-reduced-motion: reduce) {
  .regadera { display: none; }
  .sol__rayos, .sol__halo { animation: none; }
}
/* Al regar, las flores se enderezan un instante */
.jardin-riego--regando .flor-svg { animation: revivir .9s ease-out .4s both, mecer 4s ease-in-out 1.3s infinite; }
@keyframes revivir { 0% { scale: 1; } 40% { scale: 1.08; } 100% { scale: 1; } }

.nivel { margin-top: 16px; }
.nivel__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.nivel__nombre { font-family: var(--titulo); font-size: 1.15rem; font-weight: 700; }
.nivel__siguiente { margin: 6px 0 0; font-size: .9rem; }
.progreso { height: 12px; border-radius: 999px; background: var(--rosa-claro); overflow: hidden; margin-top: 6px; }
.progreso span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f28bb0, var(--rosa)); }

/* Detalle de flor */
.detalle { text-align: center; }
.detalle__flor { width: 120px; height: 300px; margin: 0 auto 8px; }
.detalle__flor .flor-svg { animation: mecer 4s ease-in-out infinite; }
.detalle__flor.flor--marchitandose .flor-svg { animation: none; }
.etiqueta { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: .85rem; }
.etiqueta--fresca { background: var(--verde-claro); color: #2f5d22; }
.etiqueta--marchitandose { background: #fdf0d5; color: #8a5a00; }
.etiqueta--album { background: #ece6e8; color: var(--suave); }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; text-align: left; margin: 16px 0; padding: 16px; background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); }
.datos dt { color: var(--suave); font-weight: 700; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.mensaje {
  margin: 16px 0; padding: 16px 20px;
  background: #fffdf7; border-left: 4px solid var(--rosa);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-family: var(--titulo); font-style: italic; font-size: 1.05rem; text-align: left;
  white-space: pre-line;
}

/* Álbum: StPageFlip arma el libro y curva las hojas; aquí solo va el aspecto del papel. */
/* El álbum usa todo el ancho: con el celular de lado se ven dos páginas, como un álbum abierto */
.vista-album .contenedor { max-width: 1100px; }
.vista-album .libro__controles { max-width: 448px; margin-inline: auto; }
.album { width: 100%; margin: 4px auto 0; filter: drop-shadow(0 12px 22px rgb(90 50 40 / .22)); }
/* container-type: size → cqh/cqi = % del alto/ancho de la hoja, para que todo quepa en cualquier tamaño */
.hoja { background: #fbf6ec; overflow: hidden; container-type: size; }
.pagina {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  padding: 5cqh 22px 9cqh;
  background:
    linear-gradient(to right, rgb(80 40 30 / .14), transparent 22px),
    #fbf6ec;
}
/* El texto no se encoge; si falta espacio, cede la foto */
.pagina > * { flex-shrink: 0; }
.pagina__fecha { font: 700 min(1.45rem, 6cqh)/1.1 "Caveat", var(--titulo); color: var(--rosa-oscuro); margin-bottom: 2cqh; }
.pagina__foto {
  position: relative; align-self: center;
  width: fit-content; max-width: 86%; margin: 1.5cqh 0 3cqh;
  padding: 8px 8px 24px; background: #fff;
  box-shadow: 0 5px 12px rgb(60 30 20 / .18);
  rotate: var(--giro, -2deg);
}
/* La foto entera, con su forma real (vertical u horizontal), sin recortes */
.pagina__ampliar { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pagina__foto img { display: block; max-width: 100%; max-height: 30cqh; width: auto; height: auto; pointer-events: none; }
/* Cinta adhesiva en dos esquinas */
.pagina__foto::before, .pagina__foto::after {
  content: ""; position: absolute; top: -9px; width: 64px; height: 20px;
  background: rgb(246 226 180 / .75);
}
.pagina__foto::before { left: -16px; rotate: -38deg; }
.pagina__foto::after { right: -16px; rotate: 38deg; }
.pagina__flores { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 0 1.5cqh; }
.pagina__flor .flor-mini { height: min(48px, 10cqh); width: auto; aspect-ratio: 1 / 2; }
.pagina__flor { display: grid; justify-items: center; gap: 2px; font-size: .8rem; color: var(--suave); }
/* Flores prensadas */
.pagina__flor .flor-mini { filter: sepia(.55) saturate(.65); rotate: -8deg; }
.pagina__flor:nth-child(even) .flor-mini { rotate: 10deg; }
.pagina__mensaje {
  font: 600 min(1.5rem, 6.5cqh)/1.2 "Caveat", var(--titulo); margin: 1cqh 0 0; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.pagina__de { text-align: right; font: 700 min(1.3rem, 5.5cqh) "Caveat", var(--titulo); color: var(--suave); margin: 0; }
.pagina__nota { font: 500 min(1.25rem, 5.5cqh)/1.2 "Caveat", var(--titulo); color: #5b4a50; border-top: 1px dashed #e2d3bd; padding-top: 1cqh; margin: 1cqh 0 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pagina__numero { position: absolute; right: 20px; bottom: 12px; font: 700 1.1rem "Caveat", var(--titulo); color: var(--suave); }

/* Tapas duras de tela con letras doradas */
.hoja--dura { background: #8c2a48; }
.tapa {
  height: 100%; display: grid; align-content: center; justify-items: center; gap: 8px; text-align: center;
  padding: min(32px, 8cqi); color: #f1d08f;
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 4px), #8c2a48;
  box-shadow: inset 0 0 0 12px #8c2a48, inset 0 0 0 13px rgb(241 208 143 / .55);
}
.tapa__adorno { font-size: 2.4rem; line-height: 1; }
.tapa__titulo { font: 700 min(2.2rem, 13cqi)/1.1 var(--titulo); color: inherit; margin: 0; }
.tapa__nombre { font: 700 min(1.9rem, 11cqi) "Caveat", var(--titulo); margin: 0; }
.tapa__floreria { margin: 0; opacity: .85; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.tapa__pista { margin-top: 28px; font-size: .85rem; opacity: .8; }

.libro__controles { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 16px 0; }
.libro__controles .boton { min-width: 52px; font-size: 1.2rem; }
.libro__controles .boton:disabled { opacity: .4; pointer-events: none; }

/* Marco vacío para agregar la foto, y lápiz para cambiarla */
.pagina__hueco {
  align-self: center; flex-shrink: 0;
  width: 70%; height: 26cqh; margin: 1.5cqh 0 3cqh;
  display: grid; place-items: center;
  border: 2px dashed #d9c6aa; border-radius: 4px; background: rgb(255 255 255 / .55);
  font: 700 min(1.4rem, 6cqh) "Caveat", var(--titulo); color: var(--rosa-oscuro);
  rotate: var(--giro, -2deg); cursor: pointer;
}
.pagina__lapiz {
  position: absolute; right: -12px; bottom: -12px;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--papel); color: var(--rosa-oscuro); font-size: 1.1rem;
  box-shadow: 0 2px 8px rgb(60 30 20 / .25); cursor: pointer;
}
.editor { width: min(92vw, 420px); border: 0; border-radius: var(--radio); padding: 20px; background: var(--fondo); color: var(--tinta); }
.editor::backdrop { background: rgb(20 10 12 / .6); }
.editor h2 { margin-top: 0; }
.editor__pie { display: flex; justify-content: space-between; margin-top: 8px; }

/* Celular de lado: el álbum a pantalla completa, sin cabecera ni barra, como un álbum abierto */
@media (orientation: landscape) and (max-height: 520px) {
  .vista-album .cabecera, .vista-album .barra { display: none; }
  .vista-album .contenedor { padding-top: 8px; padding-bottom: 8px; }
  .vista-album .libro__controles { margin: 8px auto 0; }
}

/* Visor de foto a pantalla completa */
.visor { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; }
.visor::backdrop { background: rgb(20 10 12 / .88); }
.visor img { display: block; max-width: 96vw; max-height: 90dvh; object-fit: contain; border: 6px solid #fff; border-radius: 4px; }
.visor__cerrar {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .92); color: var(--tinta); font-size: 1.3rem; cursor: pointer;
}
.visor[open] img { animation: ampliar .25s ease-out; }
@keyframes ampliar { from { transform: scale(.85); opacity: 0; } }

/* Sin JavaScript: hojas una debajo de otra */
.album:not(.stf__parent) .hoja { min-height: 420px; margin-bottom: 14px; border-radius: 6px; position: relative; }

/* Ramos: foto real de la florería o, sin foto, sus flores dibujadas juntas */
.ramo-imagen { width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: cover; background: var(--rosa-claro); }
.ramo-imagen--dibujo { display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.ramo-imagen--dibujo .flor-mini { width: 20px; height: 50px; margin: 0 -3px; }
.ramo-vista { display: flex; justify-content: center; }
.ramo-foto { width: 160px; height: 160px; border-radius: 16px; object-fit: cover; background: var(--rosa-claro); }
.ramo-foto.ramo-foto--dibujo { display: flex; align-items: flex-end; justify-content: center; }
.ramo-foto--dibujo .flor-mini { width: 48px; height: 120px; margin: 0 -6px; }
.selector-flores__nombre small { display: block; font-weight: 600; }
.detalle__ramo { margin: 0 auto 12px; max-width: 260px; }
.detalle__ramo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); box-shadow: var(--sombra); }
.detalle__ramo figcaption { margin-top: 6px; font-size: .9rem; }

.flor-mini { display: inline-block; width: 28px; height: 56px; flex: none; }
.flor-mini .flor-svg { width: 100%; height: 100%; }

/* Populares y estadísticas */
.ranking { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ranking li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); }
.ranking__pos { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--rosa-claro); color: var(--rosa-oscuro); font-weight: 800; flex: none; }
.ranking__info { flex: 1; display: grid; gap: 6px; }
.ranking__barra { height: 8px; background: var(--rosa-claro); border-radius: 999px; overflow: hidden; }
.ranking__barra span { display: block; height: 100%; background: var(--rosa); border-radius: inherit; }
.ranking__total { font-weight: 800; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cifras div { padding: 14px; background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); display: grid; }
.cifras strong { font-family: var(--titulo); font-size: 1.6rem; color: var(--rosa-oscuro); }
.cifras span { color: var(--suave); font-size: .85rem; }

/* Perfil */
.perfil__cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.perfil__cabeza .saludo { margin: 0; }
.avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar--vacio { display: grid; place-items: center; background: var(--rosa-claro); color: var(--rosa-oscuro); font: 700 1.6rem var(--titulo); }

/* Panel de la florería */
.titulo-accion { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lista a, .lista__fila { display: grid; gap: 2px; padding: 12px 16px; background: var(--papel); border-radius: 14px; box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; }
.lista--catalogo a { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.lista--catalogo a > span:last-child { display: grid; }
.lista__fecha { font-size: .8rem; color: var(--suave); }
.inactivo { opacity: .55; }
.buscador { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 16px; }
.buscador input[type=search] { grid-column: 1 / -1; }
.selector-flores { display: grid; gap: 8px; }
.selector-flores__item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--papel); border-radius: 14px; box-shadow: var(--sombra); }
.selector-flores__nombre { flex: 1; font-weight: 700; }
.contador { display: flex; align-items: center; gap: 4px; }
.contador button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--rosa-claro); color: var(--rosa-oscuro); font: 800 1.3rem var(--texto); cursor: pointer; }
.contador input { width: 48px; height: 40px; text-align: center; border: 1.5px solid var(--linea); border-radius: 10px; font: 800 1rem var(--texto); -moz-appearance: textfield; }
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ilustraciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ilustraciones__item { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 2px solid var(--linea); border-radius: 14px; background: var(--papel); cursor: pointer; font-size: .75rem; color: var(--tinta); }
.ilustraciones__item input { position: absolute; opacity: 0; pointer-events: none; }
.ilustraciones__item:has(input:checked) { border-color: var(--rosa); background: var(--rosa-claro); }
.ilustraciones__item:has(input:focus-visible) { outline: 3px solid var(--rosa); }
.ilustraciones .flor-mini { width: 32px; height: 64px; }

/* Tarjeta con QR (pantalla e impresión) */
.tarjeta-qr {
  max-width: 340px; margin: 0 auto; padding: 24px; text-align: center;
  background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra);
}
.tarjeta-qr__floreria { font-family: var(--titulo); font-size: 1.2rem; color: var(--rosa-oscuro); margin: 0 0 8px; }
.tarjeta-qr__mensaje { font-family: var(--titulo); font-style: italic; white-space: pre-line; margin: 0 0 4px; }
.tarjeta-qr__de { color: var(--suave); margin: 0 0 12px; }
.tarjeta-qr__codigo svg { width: 220px; height: 220px; margin: 0 auto; display: block; }
.tarjeta-qr__pie { font-weight: 800; margin: 8px 0 0; }

@media print {
  body { background: #fff; }
  .cabecera, .barra, .no-imprimir, .aviso { display: none !important; }
  .contenedor { padding: 0; }
  .tarjeta-qr { box-shadow: none; border: 1px dashed #ccc; }
}

/* Portada */
.portada { text-align: center; padding-top: 10vh; display: grid; gap: 12px; justify-items: center; }
.portada__flores { display: flex; gap: 4px; height: 160px; }
.portada__flores span { width: 64px; }
.portada__flores .flor-svg { animation: mecer 4s ease-in-out infinite; }
.portada__flores span:nth-child(2) .flor-svg { animation-delay: -1.3s; }
.portada__flores span:nth-child(3) .flor-svg { animation-delay: -2.6s; }