:root{
  --bg:radial-gradient(120% 90% at 30% 20%, #fdeaf1 0%, #f8e6ee 50%, #f3dce8 100%);
  --gold:#fbbf24;
  --gold-2:#f59e0b;
  --ink:#111827;
  --pink-1:#f8e6ee;
  --pink-2:#f3dce8;
  --flip-d: 1.2s;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden}
button,input,textarea,label{font:inherit}
.m-0{margin:0}
.mt-12{margin-top:12px}
.mb-8{margin-bottom:8px}
.mb-10{margin-bottom:10px}
.subtle{opacity:.9}
.end{justify-content:flex-end}

.wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.book{position:relative;width:100%;max-width:1100px;aspect-ratio:3/4;border-radius:16px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.45)}
.page{position:absolute;inset:0}
.hidden{display:none}
.full-height{position:relative;z-index:1;height:100%}

.icon{width:24px;height:24px;display:block}
.btn{border:1px solid rgba(255,215,0,.35);background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#111827;border-radius:999px;padding:10px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.35);cursor:pointer;position:relative;z-index:5}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn-chip{border:1px solid rgba(255,215,0,.35);background:rgba(17,24,39,.5);color:var(--ink);border-radius:10px;padding:8px 12px;cursor:pointer}
.btn-circle{width:48px;height:48px;border-radius:999px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.btn-heart .icon, .btn-trash .icon{width:32px;height:32px;transition:transform .2s, filter .2s}
.heart-emoji{display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1}
.emoji{display:block;font-size:28px;line-height:1}
.btn-heart:hover .icon{transform:scale(1.08);filter:drop-shadow(0 0 6px rgba(255,105,180,.85))}
.btn-trash:hover .icon{transform:scale(1.08);filter:drop-shadow(0 0 6px rgba(255,215,0,.65))}

.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:1fr auto;align-items:center}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photo{aspect-ratio:1/1;width:100%;object-fit:cover;border-radius:10px}
.photo-wrap{position:relative}
.photo-del{position:absolute;top:6px;right:6px;border:1px solid rgba(255,215,0,.35);background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#111827;width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(0,0,0,.35);cursor:pointer;font-weight:700}
.photo-del[disabled]{opacity:.5;cursor:not-allowed}
.pad{padding:12px}
.row{display:flex;gap:8px;align-items:center}
.title-badge{position:absolute;left:50%;transform:translateX(-50%);bottom:32px;pointer-events:none;background:rgba(0,0,0,.25);border:1px solid rgba(255,215,0,.6);padding:6px 12px;border-radius:12px;font-weight:700;text-shadow:0 1px 0 #b8860b,0 2px 0 #a67c00,0 3px 1px rgba(0,0,0,.5),0 0 5px rgba(255,215,0,.5)}

.stage{perspective:1600px}
.sheet{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;will-change:transform,opacity;display:none}
.flip-next{animation:flipNext 1.2s cubic-bezier(.22,.61,.36,1)}
.flip-prev{animation:flipPrev 1.2s cubic-bezier(.22,.61,.36,1)}
@keyframes flipNext{from{transform:rotateY(0)}50%{box-shadow:0 0 120px rgba(0,0,0,.3) inset}to{transform:rotateY(-180deg)}}
@keyframes flipPrev{from{transform:rotateY(0)}50%{box-shadow:0 0 120px rgba(0,0,0,.3) inset}to{transform:rotateY(180deg)}}

.i{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:8px;color:var(--ink);text-align:center}
textarea.i{min-height:160px;resize:vertical;text-align:center}
#content{width:62%;max-width:none;min-height:clamp(320px,60vh,1000px);margin-left:auto;background:transparent !important;border:0 !important;border-radius:12px;color:var(--ink);padding:14px 16px;text-align:center;outline:none !important;box-shadow:none !important}
#content::placeholder{color:rgba(0,0,0,.45)}
#pin-input{background:linear-gradient(135deg,var(--pink-1),var(--pink-2));border:1px solid var(--pink-2);color:var(--ink);text-align:center;letter-spacing:4px;font-size:20px}

.bg{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none}
.turning{position:absolute; inset:12px;background-size:cover;background-position:center;border-radius:12px; display:none; will-change:transform;transform-style:preserve-3d; pointer-events:none; z-index:4}
.turning.animate{ display:block; animation-duration: var(--flip-d); animation-fill-mode:forwards; animation-timing-function:ease-in-out; }
.turning::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,.38) 100%); mix-blend-mode:multiply; opacity:.9; }
.turning::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 100% at 100% 50%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 24%,rgba(0,0,0,0) 60%); opacity:.55; }
@keyframes turn-right { 0%{transform:rotateY(0deg);} 50%{transform:rotateY(-95deg) translateZ(2px) skewY(-1.2deg);} 100%{transform:rotateY(-180deg);} }
@keyframes turn-left  { 0%{transform:rotateY(0deg);} 50%{transform:rotateY(95deg)  translateZ(2px) skewY( 1.2deg);} 100%{transform:rotateY(180deg);} }

.modal{position:absolute;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50}
.modal.open{display:flex}
.card{background:linear-gradient(135deg,var(--pink-1),var(--pink-2));border:1px solid var(--pink-2);border-radius:16px;max-width:400px;width:100%;padding:20px;box-shadow:0 30px 60px rgba(0,0,0,.35);color:var(--ink)}
.kbd{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.kbd button{padding:12px;border-radius:10px;border:1px solid rgba(255,215,0,.35);background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#111827;font-weight:700;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.kbd button:hover{filter:brightness(1.02)}
.kbd button:active{transform:translateY(1px)}
.pin-error{color:#b00;margin-top:8px;min-height:18px}

#p2[data-side="right"] .grid.grid-2{ margin:220px 300px 20px 240px }
#p2[data-side="right"] #content,
#p2[data-side="right"] #photos,
#p2[data-side="right"] #lab-photos{ margin:20px 300px 20px 240px }
#p2[data-side="left"] .grid.grid-2{ margin:220px 240px 20px 180px }
#p2[data-side="left"] #content,
#p2[data-side="left"] #photos,
#p2[data-side="left"] #lab-photos{ margin:20px 240px 20px 180px }

#back-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
#back-title{font-weight:700;font-size:28px;color:var(--gold);text-shadow:0 1px 0 #b8860b,0 0 8px rgba(255,215,0,.35)}
#back-sub{opacity:.95;color:var(--gold)}

.index-title-bar{margin:220px 300px 20px 240px}
.index-pager{justify-content:center;gap:8px;margin:12px 84px 8px 90px}
.index-list{list-style:none;margin:20px 16px 20px 240px;padding:0;max-height:60%;overflow-y:auto;overflow-x:hidden;border-top:1px solid rgba(255,215,0,.2)}
.diario-public{margin:16px 240px 0 240px}
.diario-lista{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.public-actions{margin:16px 0;display:flex;gap:8px;align-items:center;justify-content:flex-end}
.diario-form{display:none;margin:16px 0;gap:8px}

.bottom-left{position:absolute;bottom:8px;left:8px}
.action-left{position:absolute;bottom:64px;left:16px;display:flex;gap:8px;z-index:3}
.action-right-index{position:absolute;bottom:64px;right:16px;z-index:3}
.action-center-page{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3}
.action-right-page{position:absolute;bottom:64px;right:16px;display:flex;gap:8px;z-index:3}
.back-leftbar{position:absolute;bottom:16px;left:16px;display:flex;gap:8px}

.spacer{height:10px}

@media (max-width: 640px) {
  .wrap{padding:8px;padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right));padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .book{height:calc(100svh - 24px);width:auto;max-width:none}
  .pad{padding:10px}
  .grid-2{grid-template-columns:1fr;gap:8px}
  .photos{grid-template-columns:repeat(2,1fr)}
  .btn{padding:14px}
  .icon{width:22px;height:22px}
  .title-badge{bottom:12px;font-size:14px;padding:6px 10px}
  #index-list{max-height:55%;-webkit-overflow-scrolling:touch}
  .i{font-size:16px}
  #p2[data-side] .grid.grid-2,
  #p2 #content,
  #p2 #photos,
  #p2 #lab-photos{ margin:20px 24px 0 24px }
}