/* Bizzcochitozz: una hoja de libreta de verdad sobre un escritorio de terciopelo. */

:root {
  --tinta: #221d28;
  --tinta-suave: #6d6577;
  --violeta: #4b1fb0;
  --fucsia: #e0167f;
  --celeste: #1d9be6;
  --turquesa: #10a99b;
  --rojo: #e3263f;
  --oro: #e2a514;
  --berenjena: #241030;
  --papel: #fdfcf9;

  --f-titulo: 'Mynerve', 'Caveat', cursive;
  --f-mano: 'Caveat', cursive;
  --f-ui: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --linea: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='34' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 31.6Q100 30.7 200 31.7T400 31.2' fill='none' stroke='%23232027' stroke-width='1.25' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--f-ui);
  color: var(--tinta);
  background:
    radial-gradient(120% 70% at 50% -10%, #5c2479 0%, #31143f 45%, #170a20 100%) fixed,
    var(--berenjena);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--fucsia);
  outline-offset: 3px;
}

.papel {
  background-color: var(--papel);
  background-image: url("img/papel.png");
  background-size: 900px auto;
  background-blend-mode: multiply;
}

/* ---------- Entrada ---------- */

.entrada {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(20px + var(--seguro-arriba)) 18px calc(20px + var(--seguro-abajo));
  overflow-y: auto;
}

.entrada-hoja {
  width: 100%;
  max-width: 420px;
  padding: 38px 24px 30px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .75), 0 2px 0 rgba(255, 255, 255, .4) inset;
  transform: rotate(-1.2deg);
}

.entrada-marca {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(42px, 12.5vw, 60px);
  line-height: 1;
  color: var(--violeta);
  -webkit-text-stroke: .6px currentColor;
}

.entrada-adorno {
  display: block;
  width: min(270px, 90%);
  margin: 8px auto 0;
  fill: none;
  stroke: var(--celeste);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.entrada-adorno .punta { fill: var(--celeste); stroke-width: 1.2; }
.entrada-adorno use { stroke-width: 1.9; }

.entrada-sub {
  margin: 10px 0 0;
  font-family: var(--f-mano);
  font-weight: 600;
  font-size: 27px;
  color: var(--fucsia);
}

.entrada-preg {
  margin: 30px 0 14px;
  font-family: var(--f-titulo);
  font-size: 23px;
}

.quien {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.quien-btn {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 8px 14px;
  border: 2px solid currentColor;
  border-radius: 20px 16px 22px 14px;
  background: rgba(255, 255, 255, .55);
  font-family: var(--f-titulo);
  font-size: 26px;
  transition: transform .2s, background-color .2s;
}
.quien-btn[data-quien="adan"] { color: var(--violeta); }
.quien-btn[data-quien="michelle"] { color: var(--fucsia); }
.quien-btn:hover { background: #fff; }
.quien-btn:active { transform: scale(.96); }

.quien-corazon { width: 42px; height: 42px; fill: currentColor; }

.form-clave { display: grid; gap: 10px; text-align: left; }
.form-clave .entrada-preg { margin: 26px 0 4px; text-align: center; }

.clave-label { font-family: var(--f-mano); font-weight: 600; font-size: 22px; }

.clave-input {
  height: 54px;
  padding: 0 16px;
  border: 2px solid #d8cfe0;
  border-radius: 14px;
  background: #fff;
  font: 500 18px var(--f-ui);
  color: var(--tinta);
}
.clave-input:focus { border-color: var(--violeta); outline: none; }

.clave-error { min-height: 20px; margin: 0; font-size: 14px; color: #c4123a; }

.entrada-demo { margin: 22px 0 0; font-size: 13px; line-height: 1.45; color: var(--tinta-suave); }

/* ---------- Botones ---------- */

.btn-principal {
  position: relative;
  width: 100%;
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #ff4f9a 0%, #e8166f 45%, #e3263f 100%);
  color: #fff;
  font-weight: 650;
  font-size: 17px;
  letter-spacing: .1px;
  box-shadow: 0 14px 28px -12px rgba(227, 22, 100, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .15s, box-shadow .2s, background .2s;
}
.btn-principal:active { transform: scale(.98); }
.btn-principal:disabled {
  background: #ece5ef;
  color: #8f8699;
  box-shadow: none;
  cursor: default;
}

.btn-secundario {
  width: 100%;
  min-height: 50px;
  margin-top: 12px;
  border: 1.5px solid var(--violeta);
  border-radius: 999px;
  background: #fff;
  color: var(--violeta);
  font-weight: 600;
  font-size: 16px;
}

.btn-texto {
  display: block;
  margin: 8px auto 0;
  padding: 12px;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- App ---------- */

.principal {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.barra {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: calc(10px + var(--seguro-arriba)) 16px 8px;
}

.marca {
  flex: 1;
  margin: 0;
  font-family: var(--f-titulo);
  font-size: 27px;
  line-height: 1;
  color: #fff;
  letter-spacing: .3px;
  text-shadow: 0 0 18px rgba(255, 120, 190, .55);
}

.barra-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background-color .2s, transform .15s;
}
.barra-btn:active { transform: scale(.92); }
.barra-btn svg { width: 22px; height: 22px; fill: #ff5c9d; filter: drop-shadow(0 0 6px rgba(255, 92, 157, .7)); }
.barra-btn.avatar { font-family: var(--f-titulo); font-size: 21px; }

.pestanas {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 640px;
  margin: 6px auto 0;
  padding: 0 12px;
}

.pestana {
  position: relative;
  padding: 9px 18px 7px;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .78);
  font-family: var(--f-titulo);
  font-size: 20px;
  line-height: 1.1;
  transition: background-color .25s, color .25s;
}
.pestana[aria-selected="true"] { background: var(--papel); }
.pestana[data-banco="adan"][aria-selected="true"] { color: var(--violeta); }
.pestana[data-banco="michelle"][aria-selected="true"] { color: var(--fucsia); }

.pestana-nuevo {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 10px var(--rojo);
}

.carrusel {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrusel::-webkit-scrollbar { display: none; }

.hoja-marco {
  flex: 0 0 100%;
  height: 100%;
  overflow-y: auto;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overscroll-behavior-y: contain;
}

.hoja {
  width: 100%;
  max-width: 640px;
  min-height: 100%;
  margin: 0 auto;
  padding: 22px 14px calc(130px + var(--seguro-abajo));
}

.hoja[data-banco="adan"] { --c-titulo: #4b1fb0; --c-pregunta: #e0167f; --c-deco: #1d9be6; --c-punt: #5b25c4; }
.hoja[data-banco="michelle"] { --c-titulo: #e0167f; --c-pregunta: #5b25c4; --c-deco: #10a99b; --c-punt: #e0167f; }

/* Cabecera de la hoja, como en el dibujo original */
.hoja-cab { text-align: center; }

.titulo-linea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ooo {
  flex: none;
  width: 34px;
  height: 12px;
  fill: none;
  stroke: var(--c-deco);
  stroke-width: 2.2;
}
.hoja[data-banco="michelle"] .ooo { fill: var(--c-deco); stroke: none; }

.hoja-titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(27px, 7.5vw, 44px);
  line-height: 1.12;
  color: var(--c-titulo);
  -webkit-text-stroke: .55px currentColor;
}

.adorno {
  display: block;
  width: min(330px, 88%);
  margin: 2px auto 0;
  fill: none;
  stroke: var(--c-deco);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.adorno .punta { fill: var(--c-deco); stroke-width: 1.2; }
.adorno use { stroke-width: 1.9; }
.adorno .estrellita { fill: var(--c-deco); stroke: none; }

.pregunta {
  margin: 18px 0 6px;
  font-family: var(--f-titulo);
  font-size: clamp(19px, 5.3vw, 23px);
  line-height: 1.3;
  color: var(--c-pregunta);
  text-align: left;
}

.saldo {
  margin: 0;
  font-family: var(--f-mano);
  font-weight: 600;
  font-size: 21px;
  color: var(--tinta-suave);
  text-align: left;
}
.saldo b {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 25px;
  color: var(--c-titulo);
  display: inline-block;
}
.saldo b.sube { animation: sube .7s cubic-bezier(.3, 1.6, .5, 1); }

.lista-cab {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: end;
  gap: 6px;
  margin-top: 12px;
}
.lista-cab .fila-corazon { stroke: var(--c-pregunta); }
.punt-cab {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-titulo);
  font-size: 17px;
}
.punt-cab u { text-decoration-thickness: 1.3px; text-underline-offset: 4px; }

.fila-reaccion { font-family: system-ui, sans-serif; font-size: 18px; vertical-align: 2px; }
.punt-cab svg { width: 18px; height: 18px; fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linejoin: round; }

.lista { list-style: none; margin: 4px 0 0; padding: 0; }

.dia {
  margin: 20px 0 2px;
  padding-left: 36px;
  font-family: var(--f-titulo);
  font-size: 18px;
  color: var(--c-deco);
}
.dia:first-child { margin-top: 10px; }

.fila {
  display: grid;
  grid-template-columns: 30px 1fr 56px;
  gap: 6px;
  width: 100%;
  padding: 3px 0;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  transition: background-color .2s;
}
button.fila:hover { background: rgba(75, 31, 176, .04); }
.fila:disabled { cursor: default; }

.fila-corazon {
  width: 27px;
  height: 27px;
  margin-top: 5px;
  fill: transparent;
  stroke: var(--rojo);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill .8s;
}
.nueva .fila-corazon { fill: var(--rojo); animation: latido 1.2s ease-in-out 2; }

.fila-texto {
  min-height: 34px;
  font-family: var(--f-mano);
  font-weight: 600;
  font-size: 23px;
  line-height: 34px;
  color: var(--tinta);
  background-image: var(--linea);
  background-size: 100% 34px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.fila-texto.vacio { color: #a59dae; font-weight: 500; }

.fila-punt {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding-left: 4px;
}

.punt-corazon { position: relative; width: 27px; height: 27px; flex: none; }
.punt-corazon svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke-linecap: round; stroke-linejoin: round; }
.punt-corazon .borde { fill: none; stroke: var(--c-punt); stroke-width: 1.9; }
.punt-corazon .lleno { fill: var(--c-punt); opacity: .9; clip-path: inset(var(--vacio, 100%) 0 0 0); }

.punt-num {
  font-family: var(--f-titulo);
  font-size: 21px;
  color: var(--c-punt);
  min-width: 18px;
}
.punt-num.vacio { color: var(--tinta); }

/* Joya: un 10 reluce en dorado */
.joya .fila-texto {
  background-image:
    linear-gradient(100deg, transparent 0 30%, rgba(255, 255, 255, .85) 45%, transparent 60%),
    linear-gradient(transparent 52%, rgba(255, 206, 64, .42) 52%, rgba(255, 206, 64, .42) 88%, transparent 88%),
    var(--linea);
  background-size: 250% 100%, 100% 34px, 100% 34px;
  background-position: 120% 0, 0 0, 0 0;
  animation: reluce 4.5s ease-in-out infinite;
}
.joya .punt-corazon .lleno { fill: var(--oro); opacity: 1; }
.joya .punt-corazon .borde { stroke: #b07b00; }
.joya .punt-num { color: #b07b00; }
.joya .punt-corazon { filter: drop-shadow(0 0 5px rgba(240, 180, 20, .7)); }

/* Recién escrito: se escribe solo */
.recien .fila-texto { animation: escribir 1s cubic-bezier(.4, 0, .2, 1) both; }
.recien .fila-corazon { animation: latido .9s .2s ease-in-out 2; }

/* Dibujo de la cabecera al abrir */
.dibujar .hoja-titulo { animation: escribir 1.3s .15s cubic-bezier(.45, 0, .2, 1) both; }
.dibujar .adorno path:not(.punta), .dibujar .adorno circle, .dibujar .ooo circle {
  stroke-dasharray: 1;
  animation: trazo 1s .9s ease-out both;
}
.dibujar .adorno .punta, .dibujar .adorno use, .dibujar .adorno .estrellita { animation: aparece .4s 1.6s both; }

/* ---------- Dock ---------- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 26px 16px calc(14px + var(--seguro-abajo));
  background: linear-gradient(to bottom, rgba(253, 252, 249, 0), rgba(253, 252, 249, .92) 45%);
  pointer-events: none;
}

.btn-depositar {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  min-height: 58px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #ff4f9a 0%, #e8166f 45%, #e3263f 100%);
  color: #fff;
  font-weight: 650;
  font-size: 17px;
  box-shadow: 0 16px 30px -12px rgba(227, 22, 100, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .15s;
}
.btn-depositar:active { transform: scale(.97); }
.btn-depositar svg { width: 22px; height: 22px; fill: #fff; flex: none; }
.btn-depositar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: brillo 1.4s 1.8s ease-in-out both;
}

/* ---------- Paneles ---------- */

.velo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(22, 8, 30, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s;
}
.velo.abierto { opacity: 1; }

.panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  width: min(100%, 560px);
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 20px calc(22px + var(--seguro-abajo));
  border-radius: 28px 28px 0 0;
  background: #fffdfb;
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .5);
  transform: translate(-50%, 100%);
  transition: transform .42s cubic-bezier(.2, .9, .25, 1);
}
.panel.abierto { transform: translate(-50%, 0); }

.panel-asa { width: 44px; height: 5px; margin: 0 auto 8px; border-radius: 9px; background: #e2dae6; }

.panel-cerrar {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #f4eef6;
  color: var(--tinta-suave);
  font-size: 26px;
  line-height: 1;
}

.panel-titulo {
  margin: 8px 48px 2px 0;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  color: var(--violeta);
}
.panel-titulo.de-michelle { color: var(--fucsia); }

.panel-sub { margin: 4px 0 16px; font-size: 15px; line-height: 1.45; color: var(--tinta-suave); }

.panel-error { min-height: 0; margin: 0 0 8px; font-size: 14px; color: #c4123a; }
.panel-error:empty { display: none; }

.dep-preg {
  display: block;
  margin: 6px 0 10px;
  font-family: var(--f-titulo);
  font-size: 19px;
  line-height: 1.3;
  color: var(--fucsia);
}
.dep-preg.de-michelle { color: var(--violeta); }

.dep-papel {
  padding: 6px 14px 4px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1.5px #ece3ee;
  transition: box-shadow .2s;
}
.dep-papel:focus-within { box-shadow: inset 0 0 0 2px var(--violeta); }

.dep-papel textarea {
  display: block;
  width: 100%;
  min-height: 102px;
  padding: 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent var(--linea);
  background-size: 100% 34px;
  font-family: var(--f-mano);
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  color: var(--tinta);
}
.dep-papel textarea::placeholder { color: #b3abbb; }

.dep-cuenta { margin: 4px 2px 0; text-align: right; font-size: 12px; color: var(--tinta-suave); }

/* Amorómetro */
.amorometro { margin: 8px 0 14px; text-align: center; }

.amor-preg { margin: 0; font-family: var(--f-titulo); font-size: 21px; color: var(--violeta); }

.amor-visor {
  position: relative;
  display: block;
  width: 148px;
  height: 148px;
  margin: 2px auto 0;
  padding: 0;
  border: 0;
  background: none;
  touch-action: manipulation;
}
.amor-visor:active .amor-corazon { transform: scale(.94); }

.amor-corazon { width: 100%; height: 100%; overflow: visible; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.amor-corazon.late { animation: latido .45s ease-out; }
.amor-corazon.joya-amor { filter: drop-shadow(0 0 12px rgba(255, 190, 40, .9)); }
.amor-borde { fill: none; stroke: #2b1937; stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; }
.amor-nivel-g { transform: translateY(22px); transition: transform .55s cubic-bezier(.3, 1.35, .5, 1); }
.amor-ola { animation: ola 2.2s linear infinite; }

.amor-num {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--f-titulo);
  font-size: 46px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 10px rgba(120, 0, 40, .45);
  pointer-events: none;
}
.amor-num.sin { color: var(--violeta); text-shadow: none; }

.amor-nombre {
  min-height: 36px;
  margin: 0 0 6px;
  font-family: var(--f-mano);
  font-weight: 700;
  font-size: 27px;
  color: var(--fucsia);
}
.amor-nombre.sin { font-weight: 600; font-size: 21px; color: var(--tinta-suave); }

.amor-barra {
  --p: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
}
.amor-barra::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff5ea8, #e3263f) 0 0 / var(--p) 100% no-repeat, #f0e6f1;
}
.amor-barra::-moz-range-track { height: 10px; border-radius: 99px; background: #f0e6f1; }
.amor-barra::-moz-range-progress { height: 10px; border-radius: 99px; background: linear-gradient(90deg, #ff5ea8, #e3263f); }
.amor-barra::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  border: 3px solid #e3263f;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px -2px rgba(227, 38, 63, .55);
}
.amor-barra::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid #e3263f;
  border-radius: 50%;
  background: #fff;
}

.amor-marcas { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin-top: 2px; }
.amor-marca {
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: var(--f-mano);
  font-weight: 700;
  font-size: 22px;
  color: var(--tinta-suave);
  transition: background-color .2s, color .2s;
}
.amor-marca.activa { background: var(--fucsia); color: #fff; }

/* Detalle de un depósito */
.det-fecha { margin: 8px 48px 0 0; font-family: var(--f-titulo); font-size: 19px; color: var(--celeste); }
.det-fecha.de-michelle { color: var(--turquesa); }

.det-texto {
  margin: 14px 0 6px;
  padding: 2px 14px 6px;
  border-radius: 16px;
  font-family: var(--f-mano);
  font-weight: 600;
  font-size: 27px;
  line-height: 38px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='38' viewBox='0 0 400 38' preserveAspectRatio='none'%3E%3Cpath d='M0 35.4Q100 34.6 200 35.6T400 35.1' fill='none' stroke='%23232027' stroke-width='1.25' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 100% 38px;
}

.det-autor { margin: 0; font-size: 14px; color: var(--tinta-suave); }

.det-punt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 6px;
  padding: 12px 16px;
  border-radius: 18px;
  background: #fbf2f7;
}
.det-punt .punt-corazon { width: 44px; height: 44px; --c-punt: var(--fucsia); }
.det-punt.joya { background: linear-gradient(100deg, #fff6d9, #fff0f6); }
.det-punt-num { font-family: var(--f-titulo); font-size: 30px; color: var(--fucsia); }
.det-punt-nombre { font-family: var(--f-mano); font-weight: 700; font-size: 24px; }

.det-reaccion-titulo { margin: 18px 0 8px; font-family: var(--f-titulo); font-size: 19px; color: var(--violeta); }
.reacciones { display: flex; gap: 8px; }
.reaccion {
  flex: 1;
  height: 52px;
  border: 1.5px solid #ece3ee;
  border-radius: 16px;
  background: #fff;
  font-size: 26px;
  transition: transform .15s, border-color .2s, background-color .2s;
}
.reaccion:active { transform: scale(.9); }
.reaccion[aria-pressed="true"] { border-color: var(--fucsia); background: #fff0f7; transform: scale(1.04); }
.det-reaccion-vista { margin: 16px 0 0; font-size: 16px; }

.det-borrar { color: #b0213a; }

/* Cariños */
.carinos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.carino-btn {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 8px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(160deg, #fff1f7, #f1eafe);
  transition: transform .15s;
}
.carino-btn:active { transform: scale(.95); }
.carino-emoji { font-size: 42px; line-height: 1; }
.carino-txt { font-family: var(--f-titulo); font-size: 19px; color: var(--violeta); }

.menu-ayuda { margin-top: 14px; padding: 12px 16px; border-radius: 16px; background: #f7f2f9; font-size: 15px; line-height: 1.5; }
.menu-ayuda summary { cursor: pointer; font-weight: 600; color: var(--violeta); }
.menu-ayuda p { margin: 10px 0 0; }

/* ---------- Cariño recibido ---------- */

.lluvia {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(110, 30, 120, .86), rgba(20, 6, 28, .94) 75%);
  animation: aparece .35s both;
  cursor: pointer;
}
.lluvia-centro { position: relative; padding: 24px; text-align: center; }
.lluvia-emoji { font-size: 104px; line-height: 1; animation: latido 1.1s ease-in-out infinite; }
.lluvia-txt {
  max-width: 16ch;
  margin: 18px auto 0;
  font-family: var(--f-titulo);
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 22px rgba(255, 110, 180, .7);
}
.lluvia-cerrar { margin: 26px 0 0; font-size: 14px; color: rgba(255, 255, 255, .6); }
.gota {
  position: absolute;
  top: -60px;
  line-height: 1;
  animation: caer linear forwards;
  pointer-events: none;
}

/* ---------- Avisos y moneda ---------- */

.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(96px + var(--seguro-abajo));
  z-index: 120;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  text-align: center;
  border-radius: 999px;
  background: #2a1238;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55);
  transform: translateX(-50%);
  animation: aviso .3s both;
}

.moneda {
  position: fixed;
  z-index: 90;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255, 70, 130, .9));
}
.moneda svg { width: 100%; height: 100%; fill: #ff3f86; }

.chispa {
  position: fixed;
  z-index: 91;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  pointer-events: none;
  fill: var(--oro);
}

/* ---------- Escritorio ---------- */

@media (min-width: 700px) {
  .hoja-marco { padding: 0 20px; }
  .hoja {
    padding: 36px 44px calc(150px + var(--seguro-abajo));
    border-radius: 4px 4px 0 0;
    box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .8);
  }
  .pestanas { padding: 0 20px; }
  .dock { background: none; }
}

@media (max-width: 380px) {
  .ooo { display: none; }
}

/* ---------- Animaciones ---------- */

@keyframes escribir { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes trazo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes latido { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 55% { transform: scale(.96); } }
@keyframes sube { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes ola { from { transform: translateX(0); } to { transform: translateX(12px); } }
@keyframes reluce { 0%, 55% { background-position: 120% 0, 0 0, 0 0; } 100% { background-position: -40% 0, 0 0, 0 0; } }
@keyframes brillo { to { transform: translateX(120%); } }
@keyframes caer { to { transform: translate3d(var(--dx, 0), calc(100dvh + 120px), 0) rotate(var(--giro, 0deg)); } }
@keyframes aviso { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

.fila-corazon, .amor-corazon, .lluvia-emoji { transform-origin: center; transform-box: fill-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .gota { display: none; }
}