: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;
}
/* === Controles con solo borde dorado (sin fondo) === */
:root{
  /* cambia el dorado si quieres otro tono */
  --gold-ring: #d4af37;           /* dorado clásico */
  --gold-ring-soft: rgba(212,175,55,.28);
}

/* título y fecha (ambos usan la clase .i en tu HTML) */
.i,
.i[type="date"]{
  background-color: transparent !important;        /* sin relleno */
  border: 2px solid var(--gold-ring) !important;   /* anillo dorado */
  color: inherit;
  border-radius: 10px;
  box-shadow: none;
}

/* estado enfoque */
.i:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-ring-soft);
}

/* botón/etiqueta "Subir fotos" (usa .btn-chip) */
.btn-chip{
  background: transparent !important;              /* sin relleno */
  border: 2px solid var(--gold-ring) !important;   /* anillo dorado */
  color: inherit;
  border-radius: 10px;
  box-shadow: none;
  padding: 8px 12px;
}

.btn-chip:hover,
.btn-chip:focus{
  box-shadow: 0 0 0 3px var(--gold-ring-soft);
  outline: none;
}

/* afinado del icono del selector de fecha (Chrome/WebKit) */
.i[type="date"]::-webkit-calendar-picker-indicator{
  filter: sepia(1) saturate(5) hue-rotate(340deg) brightness(1.05);
  opacity: .9;
}

*{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 }
}
/* --- Centrar los botones flotantes del índice --- */
#p1 .action-left{
  position: absolute;
  bottom: 16px;
  left: 50%;
  right: auto;                 /* anula posibles reglas anteriores */
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;                  /* por encima del fondo */
}

/* Por si quieres un poco más bajo en móvil */
@media (max-width: 640px){
  #p1 .action-left{ bottom: 12px; }
}

/* (opcional) asegura que el paginador del índice esté centrado */
.index-pager{
  justify-content: center;
}
/* Contraportada: capa y centro */
#p3 .back-layer{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
#p3 .back-center{
  width:min(900px, 90%);
  text-align:center;
  color:#d6b36a;                 /* dorado */
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
#p3 .back-title{
  margin:0 0 16px; font-weight:700; letter-spacing:.4px;
}

/* Carrusel */
#p3 .carousel{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:60vh;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
#p3 .carousel img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0; transition:opacity 800ms ease;
}
#p3 .carousel img.active{ opacity:1; }

/* Botones debajo del carrusel */
#p3 .back-actions{
  margin-top:14px;
  display:flex; gap:10px; justify-content:center;
}
/* --- Contraportada: carrusel más pequeño --- */
#p3 .back-center{
  /* ancho total del bloque centro (texto + carrusel + botones) */
  width: min(720px, 65%);   /* antes 900px/90% */
}

#p3 .carousel{
  /* reduce altura visible del carrusel */
  max-height: 46vh;         /* antes 60vh 46vh */
  aspect-ratio: 16/10;      /* un pelín menos alto que 16/9 */
  border-radius: 10px;
}

/* opcional: compactar un poco el espacio del título */
#p3 .back-title{
  margin-bottom: 10px;
  font-size: clamp(18px, 2.2vw, 24px);
}
/* ====== MÓVIL / TABLET ====== */
:root{
  /* márgenes seguros para notch, etc. */
  --safe-l: max(env(safe-area-inset-left), 8px);
  --safe-r: max(env(safe-area-inset-right), 8px);
  --safe-t: max(env(safe-area-inset-top), 8px);
  --safe-b: max(env(safe-area-inset-bottom), 12px);
}

/* contenedor general */
.wrap{
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
}

/* El “libro” ocupa alto completo en móvil para evitar scroll raro */
@media (max-width: 768px){
  .book{
    height: calc(100svh - 10px);
    width: 100%;
    max-width: none;
    aspect-ratio: auto;      /* quita relación 3/4 para que no se corte */
  }

  /* fondo y marcos siempre cubren */
  .bg{ background-size: cover; background-position: center; }

  /* Área interior de cada página (se reduce el padding) */
  .page .pad{
    height: 100%;
    padding: 10px 14px 14px 14px;
  }

  /* ---- ÍNDICE ---- */
  /* centra el bloque del índice y evita scroll horizontal */
  #p1 .pad{ max-width: 960px; margin: 0 auto; }
  #index-pager{ justify-content: center !important; }
  #index-list{
    width: min(92vw, 700px);
    margin: 10px auto 0 auto;
    max-height: 55svh;
    overflow-y: auto;               /* solo scroll vertical */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #index-list li{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 0;
  }
  #index-list li .row{ gap: 8px; }

  /* Botones circulares algo más pequeños en móvil */
  .btn{ padding: 12px; }
  .icon{ width: 22px; height: 22px; }

  /* ---- EDITOR (página de escritura) ---- */
  /* inputs título/fecha a dos columnas; en muy pequeño, 1 columna */
  .grid-2{ grid-template-columns: 1fr 1fr; gap: 8px; }
  @media (max-width: 420px){
    .grid-2{ grid-template-columns: 1fr; }
  }

  /* área de texto: más estrecha y centrada, alta para escribir cómodo */
  #content{
    width: 92%;
    max-width: 680px;              /* no se hace gigante en tablets */
    height: clamp(220px, 58svh, 460px);
    margin: 8px auto 0 auto;
  }

  /* barra de navegación de día anterior/siguiente centrada */
  #p2 .btn-group,
  #p2 .nav-days{
    justify-content: center;
  }

  /* Modal PIN adaptado a móvil */
  .modal .card{
    width: 92vw; max-width: 420px;
    padding: 16px;
  }
  .kbd button{ padding: 12px 0; }
}
/* ====== RESPONSIVE MEJORADO (añadir al final) ====== */
:root{
  /* márgenes seguros para notch */
  --safe-l: max(env(safe-area-inset-left), 8px);
  --safe-r: max(env(safe-area-inset-right), 8px);
  --safe-t: max(env(safe-area-inset-top), 8px);
  --safe-b: max(env(safe-area-inset-bottom), 12px);
}

@media (max-width: 900px){
  /* Contenedor general y libro a altura de pantalla */
  .wrap{
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
    padding-top: var(--safe-t);
    padding-bottom: var(--safe-b);
  }
  .book{
    height: calc(100svh - 10px);
    width: 100%;
    max-width: none;
    aspect-ratio: auto;       /* evita cortes */
  }
  .bg{ background-size: cover; background-position: center; }
  
  /* ---------- ÍNDICE centrado y sin scroll horizontal ---------- */
  #p1 .pad{ max-width: 960px; margin: 0 auto; padding: 12px 14px; }
  #index-pager{ justify-content: center !important; gap: 8px; }
  #index-list{
    width: min(92vw, 700px);
    margin: 10px auto 0;
    max-height: 55svh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #index-list li{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:8px 0;
  }

  /* ---------- P2: Título, fecha y texto centrados ---------- */
  #p2 .pad{
    display:flex; flex-direction:column; align-items:center;
    padding: 10px 14px 14px 14px;      /* menos padding en móvil */
  }
  /* apila título y fecha; centrados */
  #p2 .grid-2{
    width: min(92vw, 680px);
    margin: 0 auto 10px;
    grid-template-columns: 1fr;        /* 1 columna */
    justify-items: center;
    gap: 10px;
  }
  #p2 #title, #p2 #date{
    width: 100%;
    text-align: center;
  }
  /* área de texto centrada, sin desbordes, alto cómodo en móvil */
  #p2 #content{
    width: min(92vw, 500px);
    margin: 8px auto 0;
    text-align: left;
    height: clamp(240px, 60svh, 520px);
    max-width: 680px;
    overflow: auto;                    /* por si el texto crece mucho */
    -webkit-overflow-scrolling: touch; /* scroll suave */
  }
  /* galería bajo el texto, 2 columnas en móvil */
  #p2 .photos{
    width: min(92vw, 680px);
    margin: 10px auto 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
/* ====== AJUSTE EXTRA PARA MÓVIL: Texto P2 más pequeño ====== */
@media (max-width: 768px){
  /* contenedor superior del P2 también un poco más estrecho */
  #p2 .grid-2{
    width: min(88vw, 560px);
  }
  /* textarea más estrecho y bajo */
  #p2 #content{
    width: min(84vw, 560px);          /* ↓ antes: min(92vw, 680px) */
    height: clamp(180px, 50svh, 420px);/* ↓ un poco más bajo para que “quepa” */
    margin: 8px auto 0;
    overflow: auto;                    /* por si el texto crece */
    -webkit-overflow-scrolling: touch;
  }
  /* fotos debajo a juego con el ancho */
  #p2 .photos{
    width: min(84vw, 560px);
  }
}

@media (max-width: 560px){
  #p2 .grid-2{ width: min(90vw, 500px); }
  #p2 #content{
    width: min(86vw, 500px);
    height: clamp(170px, 46svh, 380px);
  }
  #p2 .photos{ width: min(86vw, 500px); }
}

@media (max-width: 420px){
  #p2 .grid-2{ width: 92vw; }
  #p2 #content{
    width: 88vw;                       /* aún más estrecho en móviles muy pequeños */
    height: clamp(160px, 44svh, 340px);
  }
  #p2 .photos{ width: 88vw; }
}
  /* ---------- Botones: tamaño y toque cómodo ---------- */
  .btn{ padding: 12px; }
  .icon{ width: 22px; height: 22px; }
}

@media (max-width: 420px){
  /* muy pequeño: aún más compacto */
  #p2 #content{ width: 94%; height: clamp(220px, 58svh, 480px); }
  .btn{ padding: 11px; }
  .icon{ width: 20px; height: 20px; }
}/* ===== HOTFIX: aplicar ajustes móviles SOLO cuando P2 está visible ===== */
/* Requiere navegadores modernos (Chrome, Edge, Safari, iOS). */
@media (max-width: 900px){
  /* Solo al ver P2, ajustamos el “lienzo” del libro a pantalla */
  .book:has(#p2:not(.hidden)){
    height: calc(100svh - 10px);
    width: 100%;
    max-width: none;
    aspect-ratio: auto; /* evita cortes en móvil */
  }

  /* P2: contenedor centrado */
  .book:has(#p2:not(.hidden)) #p2 .pad{
    display:flex; flex-direction:column; align-items:center;
    padding: 10px 14px 14px 14px;
  }

  /* P2: apilar título y fecha; centrados */
  .book:has(#p2:not(.hidden)) #p2 .grid-2{
    width: min(92vw, 680px);
    margin: 0 auto 10px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }

  /* P2: título y fecha 100% de ancho y centrados */
  .book:has(#p2:not(.hidden)) #p2 #title,
  .book:has(#p2:not(.hidden)) #p2 #date{
    width: 100%;
    text-align: center;
  }

  /* P2: área de texto centrada, altura cómoda, sin desbordes */
  .book:has(#p2:not(.hidden)) #p2 #content{
    width: min(92vw, 680px);
    margin: 8px auto 0;
    text-align: center;
    height: clamp(240px, 60svh, 520px);
    max-width: 680px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* P2: galería a 2 columnas */
  .book:has(#p2:not(.hidden)) #p2 .photos{
    width: min(92vw, 680px);
    margin: 10px auto 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* Ajuste extra: móviles más pequeños */
@media (max-width: 768px){
  .book:has(#p2:not(.hidden)) #p2 .grid-2{ width: min(88vw, 560px); }
  .book:has(#p2:not(.hidden)) #p2 #content{
    width: min(84vw, 560px);
    height: clamp(180px, 50svh, 420px);
  }
  .book:has(#p2:not(.hidden)) #p2 .photos{ width: min(84vw, 560px); }
}

@media (max-width: 560px){
  .book:has(#p2:not(.hidden)) #p2 .grid-2{ width: min(90vw, 500px); }
  .book:has(#p2:not(.hidden)) #p2 #content{
    width: min(86vw, 500px);
    height: clamp(170px, 46svh, 380px);
  }
  .book:has(#p2:not(.hidden)) #p2 .photos{ width: min(86vw, 500px); }
}
/* ===== SOLO P2 EN MÓVIL (añadir al final de styles.css) ===== */
@media (max-width: 900px){
  /* Ajusta el lienzo solo cuando P2 está a la vista */
  .book:has(#p2:not(.hidden)){
    height: calc(100svh - 10px);
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
  }

  /* P2 contenedor centrado */
  .book:has(#p2:not(.hidden)) #p2 .pad{
    display:flex; flex-direction:column; align-items:center;
    padding: 10px 14px 14px 14px;
  }

  /* P2 título + fecha apilados y centrados */
  .book:has(#p2:not(.hidden)) #p2 .grid-2{
    width: min(92vw, 680px);
    margin: 0 auto 10px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }
  .book:has(#p2:not(.hidden)) #p2 #title,
  .book:has(#p2:not(.hidden)) #p2 #date{
    width: 100%;
    text-align: center;
  }

  /* P2 textarea centrado, sin desbordes */
  .book:has(#p2:not(.hidden)) #p2 #content{
    width: min(92vw, 680px);
    margin: 8px auto 0;
    text-align: center;
    height: clamp(240px, 60svh, 520px);
    max-width: 680px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* P2 galería a 2 columnas */
  .book:has(#p2:not(.hidden)) #p2 .photos{
    width: min(92vw, 680px);
    margin: 10px auto 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* Ajuste extra: móviles medianos */
@media (max-width: 768px){
  .book:has(#p2:not(.hidden)) #p2 .grid-2{ width: min(88vw, 560px); }
  .book:has(#p2:not(.hidden)) #p2 #content{
    width: min(84vw, 560px);
    height: clamp(180px, 50svh, 420px);
  }
  .book:has(#p2:not(.hidden)) #p2 .photos{ width: min(84vw, 560px); }
}

/* Ajuste extra: móviles pequeños */
@media (max-width: 560px){
  .book:has(#p2:not(.hidden)) #p2 .grid-2{ width: min(90vw, 500px); }
  .book:has(#p2:not(.hidden)) #p2 #content{
    width: min(86vw, 500px);
    height: clamp(170px, 46svh, 380px);
  }
  .book:has(#p2:not(.hidden)) #p2 .photos{ width: min(86vw, 500px); }
}

/* Ajuste extra: móviles muy pequeños */
@media (max-width: 420px){
  .book:has(#p2:not(.hidden)) #p2 .grid-2{ width: 92vw; }
  .book:has(#p2:not(.hidden)) #p2 #content{
    width: 88vw;
    height: clamp(160px, 44svh, 340px);
    font-size: 0.95rem; line-height: 1.35; /* opcional: más compacto */
  }
  .book:has(#p2:not(.hidden)) #p2 .photos{ width: 88vw; }
}
@media (max-width: 420px){
  .book:has(#p2:not(.hidden)) #p2 .grid-2{ width: 92vw; }
  .book:has(#p2:not(.hidden)) #p2 #content{
    width: 88vw;
    height: clamp(160px, 44svh, 340px);
    font-size: 0.95rem; line-height: 1.35; /* compacto */
  }
  .book:has(#p2:not(.hidden)) #p2 .photos{ width: 88vw; }
}



/* ===== SOLO P2 (pégalo al final de tu CSS) ===== */

/* Desktop / base */
#p2 .pad{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#p2 .grid-2{
  width: min(920px, 92%);
  margin: 0 auto 12px;
  grid-template-columns: 1fr auto; /* título + fecha en 2 columnas en desktop */
  align-items: center;
  gap: 12px;
}

#p2 #title,
#p2 #date{
  text-align: center;
}

#p2 #content{
  /* bloque centrado y más estrecho que el ancho de la página */
  width: 62%;
  max-width: 820px;
  margin: 8px auto 0;
  text-align: center;
  /* si prefieres texto a la izquierda: text-align: left; */
}

#p2 .photos{
  width: 62%;
  max-width: 820px;
  margin: 10px auto 0;
}

/* ---------- Móvil / tablet: hacer el cuadro más pequeño y evitar desbordes ---------- */
@media (max-width: 900px){
  /* apila título y fecha, y centra todo */
  #p2 .grid-2{
    width: min(92vw, 680px);
    margin: 0 auto 10px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }

  #p2 #title,
  #p2 #date{
    width: 100%;
    text-align: center;
  }

  #p2 #content{
    width: min(92vw, 680px);
    max-width: 680px;
    margin: 8px auto 0;
    text-align: center;
    height: clamp(240px, 60svh, 520px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #p2 .photos{
    width: min(92vw, 680px);
    margin: 10px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

@media (max-width: 768px){
  #p2 .grid-2{ width: min(88vw, 560px); }
  #p2 #content{
    width: min(84vw, 560px);
    height: clamp(180px, 50svh, 420px);
  }
  #p2 .photos{ width: min(84vw, 560px); }
}

@media (max-width: 560px){
  #p2 .grid-2{ width: min(90vw, 500px); }
  #p2 #content{
    width: min(86vw, 500px);
    height: clamp(170px, 46svh, 380px);
  }
  #p2 .photos{ width: min(86vw, 500px); }
}

@media (max-width: 420px){
  #p2 .grid-2{ width: 92vw; }
  #p2 #content{
    width: 88vw;
    height: clamp(160px, 44svh, 340px);
    font-size: 0.95rem;
    line-height: 1.35; /* más compacto en móviles pequeños */
  }
  #p2 .photos{ width: 88vw; }
}




/* ====== Ajustes finos en pantallas MUY pequeñas ====== */
@media (max-width: 380px){
  .btn{ padding: 11px; }
  .icon{ width: 20px; height: 20px; }
  #content{ width: 94%; }
}