/* ══════════════════════════════════════════════════════════════════════════
   KORA · ACOMODAR LAS FOTOS Y PINTAR AL FINAL — 1 oct 2026 — ADITIVO
   Lo que dibuja js/kora-mover.js: la foto «sin pintar» y «pintándose» en su
   hueco, los botones de pintar, el menú al tocar una foto, el aviso de que se
   pueden arrastrar y la foto que va en la mano.
   Desde el 2 oct, en todos los libros (antes solo Navidad).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LA FOTO SIN PINTAR ───────────────────────────────────────────────────
   Va completa, en su hueco y con las mismas orillas difuminadas que tendrá la
   pintura (en Kids eso lo pone ya `.blob.real`), apenas apagada para que se lea
   como «todavía no» sin parecer un error. */
.blob.sinpintar .ph-foto img, .blob.sinpintar > img{ filter:saturate(.78) brightness(1.03) }
/* Keepsake no trae el desvanecido de Kids: aquí se le pone a la foto sin pintar,
   para que se vea igual de suelta en los dos (2 oct). */
.spread:not(.kids) .blob.sinpintar img{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
                     linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%),
                     radial-gradient(ellipse 72% 72% at 50% 50%, #000 78%, transparent 100%);
  -webkit-mask-composite:source-in, source-in;
          mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
                     linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%),
                     radial-gradient(ellipse 72% 72% at 50% 50%, #000 78%, transparent 100%);
          mask-composite:intersect;
}
.blob .pv-sinpintar{ background:rgba(135,20,0,.78); display:none }
/* La marca va en el libro que se edita y en «Ver libro completo»; no en las
   miniaturas del panel (estorba) ni en el PDF (no se imprime). */
#spread .blob .pv-sinpintar, #fullWrap .blob .pv-sinpintar{ display:block }
#printRoot .pv-sinpintar{ display:none !important }
/* Pintándose: la misma foto, en su hueco, con la marca AL CENTRO de la foto y
   respirando. Vivi (2 oct): «cuidar que cuando diga "pintando" sí lo diga sobre
   su espacio correspondiente». */
.blob .pv-pintando{
  top:50%; bottom:auto; transform:translate(-50%,-50%);
  background:rgba(78,126,106,.88); font-size:9px; padding:5px 12px;
  /* La que respira es la foto; el letrero se queda quieto y nítido (Vivi,
     2 oct: «que el texto que dice "pintando" se quede sin movimiento»). */
  animation:none; opacity:1;
}
/* 2 oct · Vivi: «debería verse que están pintando sobre donde están puestas…
   que se pongan más difusas o se prendan y apaguen lentamente». La foto
   respira despacio, entre nítida y difusa, mientras se pinta. */
.blob.pintandose .ph-foto img, .blob.pintandose > img{ animation:km-late 3.2s ease-in-out infinite }
@keyframes km-late{
  0%,100%{ opacity:1;   filter:saturate(.7) brightness(1.04) blur(0) }
  50%    { opacity:.55; filter:saturate(.45) brightness(1.1) blur(2.5px) }
}
@media (prefers-reduced-motion:reduce){ .blob.pintandose .ph-foto img, .blob.pintandose > img{ animation:none; opacity:.7 } }

/* Una foto puesta se puede arrastrar: sin el menú de iOS al dejar el dedo
   apoyado, y sin que el navegador arrastre la imagen por su cuenta. */
#spread .blob.real img, #spread .kesf-cara{
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none;
}
@media (hover:hover){ #spread .blob.real.clickable{ cursor:grab } }
body.km-arrastrando, body.km-arrastrando *{ cursor:grabbing !important; -webkit-user-select:none; user-select:none }

/* El hueco donde caería la foto. */
.km-sobre{ outline:3px dashed #871400; outline-offset:4px; border-radius:6px }
.kesf-bola.km-sobre{ border-radius:50% }

/* La foto que va en la mano. */
.km-fantasma{
  position:fixed; left:0; top:0; z-index:9999; pointer-events:none;
  width:72px; height:72px; border-radius:8px; overflow:hidden;
  box-shadow:0 8px 24px rgba(40,28,20,.35); opacity:.92;
  transform:translate(-200px,-200px);
}
.km-fantasma img{ width:100%; height:100%; object-fit:cover; display:block }

/* El aviso de un fallo al mandar a pintar. */
.km-aviso span{ line-height:1.45 }
/* La pista de una sola vez, sobre la foto: «arrastra para cambiarla de lugar». */
.km-pista{
  position:fixed; left:50%; top:10px; transform:translateX(-50%); z-index:70;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:6px 8px 6px 12px; border-radius:999px; background:rgba(58,48,38,.86); color:#fff;
  font:500 11.5px/1.2 var(--font-body, sans-serif); letter-spacing:.02em; pointer-events:auto;
  box-shadow:0 6px 16px rgba(40,28,20,.25);
}
.km-pista button{ border:0; background:rgba(255,255,255,.18); color:#fff; width:20px; height:20px; border-radius:50%; font-size:10px; line-height:20px; padding:0; cursor:pointer }
#printRoot .km-pista, .acom-mini .km-pista{ display:none }

/* ── LA BARRA: «Pintar esta página» ───────────────────────────────────────
   Va abajo, fuera del libro: en esta pantalla lo escaso es el ALTO, y una fila
   debajo del pliego le quitaría tamaño al libro. */
.km-barra{
  position:fixed; left:20px; bottom:14px; z-index:60;
  display:flex; align-items:center; gap:8px;
  max-width:min(620px, calc(100vw - 40px));
}
.km-barra[hidden]{ display:none }
.km-pintar-hoja{
  font:600 13px/1 var(--font-body, sans-serif); letter-spacing:.02em;
  color:#fff; background:#871400; border:0; border-radius:999px;
  padding:10px 16px; cursor:pointer; box-shadow:0 4px 14px rgba(40,28,20,.18);
  white-space:nowrap; flex:none;
}
.km-pintar-hoja:hover{ background:#6E1000 }
.km-pintar-hoja[hidden]{ display:none }

/* «Pintar libro», arriba junto a «Ver libro completo». */
.km-pintar-libro{ color:#871400 !important; font-weight:600 }
.km-pintar-libro[hidden]{ display:none }
.km-pintar-libro:disabled{ opacity:.75; cursor:default }

/* En pantalla ancha va en la fila de abajo del libro, centrada entre «Anterior»
   y «Siguiente» (la columna del libro es `position:relative` desde 901 px). */
@media (min-width:901px){
  #s2 .ed-left > .km-barra{ position:absolute; left:50%; transform:translateX(-50%); bottom:10px; max-width:calc(100% - 320px) }
}
/* 2 oct · Ahora vive dentro de la fila de «Anterior / Siguiente» (ver `barra()`
   en kora-mover.js): ahí es un hijo más de la fila y no flota encima. */
@media (min-width:901px){
  #s2 .spread-nav > .km-barra{ position:static; transform:none; max-width:none; margin:0 auto }
}
/* «Pintar libro» va aquí en todas las pantallas (2 oct), junto a «Pintar esta
   página»: la misma pastilla, en blanco, porque es la de todo el libro. */
.km-pintar-libro-cel{
  font:600 13px/1 var(--font-body, sans-serif); letter-spacing:.02em;
  color:#871400; background:#fff; border:0; border-radius:999px;
  padding:10px 16px; cursor:pointer; white-space:nowrap; flex:none;
  box-shadow:inset 0 0 0 1px rgba(135,20,0,.45), 0 4px 14px rgba(40,28,20,.12);
}
.km-pintar-libro-cel:hover{ background:#fbf3f0 }
.km-pintar-libro-cel[hidden]{ display:none }
.km-pintar-libro-cel:disabled{ opacity:.8; cursor:default }

/* ── EN EL TELÉFONO: UNA SOLA FILA ─────────────────────────────────────────
   En el iPhone parado «Pintar libro» caía encima del encabezado: ahí va abajo,
   junto a «Página · N». */
@media (max-width:700px){
  #s2 .km-pintar-libro{ display:none !important }
  .km-barra{ left:10px; right:10px; bottom:10px; max-width:none; gap:6px; flex-wrap:nowrap; justify-content:center }
  .km-pintar-hoja, .km-pintar-libro-cel{
    display:inline-flex; font:600 12.5px/1 var(--font-body, sans-serif); color:#fff;
    background:#871400; border:0; border-radius:999px; padding:11px 13px;
    white-space:nowrap; flex:none; box-shadow:0 4px 14px rgba(40,28,20,.18);
  }
  .km-pintar-libro-cel{ background:#fff; color:#871400; box-shadow:inset 0 0 0 1px rgba(135,20,0,.45), 0 4px 14px rgba(40,28,20,.12) }
  .km-pintar-hoja[hidden], .km-pintar-libro-cel[hidden]{ display:none }
  .km-pintar-hoja{ font-size:0 }
  .km-pintar-hoja::after{ content:attr(data-corto); font-size:12.5px }
  .km-pintar-libro-cel{ font-size:0 }
  .km-pintar-libro-cel::after{ content:attr(data-corto); font-size:12.5px }
  /* Lo de hasta abajo de la página no se queda debajo de la barra. */
  body.km-con-barra #s2 .editor{ padding-bottom:64px }
}

/* ═══ PINTAR, EN EL VERDE OLIVO DE LA CASA ═══════════════════ 6 oct 2026
   Vivi: «los botones de "pintar" deben de ir siempre en el tono verde olivo
   que tenemos establecido.. solo dejar en el rojo para el de navidad». El
   olivo es el de «Siguiente» (#647A66); el rojo quemado se queda solo en los
   libros de Navidad (body.nav-mode). */
body:not(.nav-mode) .km-pintar-hoja{ background:#647A66 }
body:not(.nav-mode) .km-pintar-hoja:hover{ background:#576B59 }
body:not(.nav-mode) .km-pintar-libro{ color:#576B59 !important }
body:not(.nav-mode) .km-pintar-libro-cel{ color:#576B59; box-shadow:inset 0 0 0 1px rgba(100,122,102,.55), 0 4px 14px rgba(40,28,20,.12) }
body:not(.nav-mode) .km-pintar-libro-cel:hover{ background:#f3f5f1 }
@media (max-width:700px){
  body:not(.nav-mode) .km-pintar-hoja{ background:#647A66 }
  body:not(.nav-mode) .km-pintar-libro-cel{ background:#fff; color:#576B59; box-shadow:inset 0 0 0 1px rgba(100,122,102,.55), 0 4px 14px rgba(40,28,20,.12) }
}