/* Colorines — galería "Mis obras" (#obras). Pantalla bajo .screen--obras; vista grande bajo .modal-back.gal-view. */

.screen--obras {
  background:
    radial-gradient(rgba(255, 159, 28, 0.1) 2px, transparent 2.5px) 0 0 / 28px 28px,
    linear-gradient(180deg, #fff1f6 0%, var(--bg) 55%);
}

/* ---------- Barra superior ---------- */
.screen--obras .gal-top { position: relative; z-index: 2; }
.screen--obras .gal-title { width: var(--btn); height: var(--btn); flex: 0 0 auto; }
.screen--obras .gal-book .icon { width: 72%; height: 72%; }
.screen--obras .gal-title { padding: 4px; animation: gal-swing 4s ease-in-out infinite; }
.screen--obras .gal-title .icon { width: 100%; height: 100%; }
@keyframes gal-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

.screen--obras .gal-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow);
}
.screen--obras .gal-tab {
  width: auto;
  height: var(--btn);
  padding: 0 16px 0 8px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  gap: 4px;
}
.screen--obras .gal-tab .icon { width: calc(var(--btn) * 0.72); height: calc(var(--btn) * 0.72); }
.screen--obras .gal-tab.active { background: var(--paper); box-shadow: 0 0 0 3px var(--ink); transform: none; }
.screen--obras .gal-count {
  min-width: 1.9em;
  padding: 0.1em 0.45em;
  border-radius: 999px;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  text-align: center;
}
.screen--obras .gal-tab[data-tab="progress"] .gal-count,
.screen--obras .gal-tab:nth-child(2) .gal-count { background: #bfe9ff; }
.screen--obras .gal-tab.empty .gal-count { background: #eee9f5; color: var(--ink-soft); }

/* En celulares finitos el ícono decorativo sobra: más lugar para las pestañas. */
@media (max-width: 420px) {
  .screen--obras .gal-title { display: none; }
  .screen--obras .gal-tab { padding: 0 10px 0 4px; }
}

/* ---------- Grilla ---------- */
.screen--obras .gal-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.screen--obras .gal-grid {
  --gal-min: 230px;
  --gal-gap: 22px;
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--gal-min), 1fr));
  align-content: start;
  gap: var(--gal-gap);
  padding: 10px max(18px, var(--gap)) calc(28px + var(--safe-b));
}
@media (max-width: 1100px) { .screen--obras .gal-grid { --gal-min: 205px; --gal-gap: 20px; } }
@media (max-width: 600px), (max-height: 520px) { .screen--obras .gal-grid { --gal-min: 140px; --gal-gap: 14px; padding-left: 12px; padding-right: 12px; } }
.screen--obras .gal-grid.is-empty { display: flex; align-items: center; justify-content: center; }
/* Con una obra resaltada (siempre queda primera): lugar para la estrella y el anillo que sobresalen. */
.screen--obras .gal-grid.has-new { padding-top: 34px; padding-left: max(20px, var(--gap)); padding-right: max(20px, var(--gap)); }

.screen--obras .gal-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px;
  border: 4px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 6px 0 rgba(43, 34, 64, 0.18), 0 12px 22px rgba(43, 34, 64, 0.1);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transform: rotate(var(--tilt, -1.2deg));
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  animation: gal-in 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
.screen--obras .gal-card:nth-child(even) { --tilt: 1.2deg; }
.screen--obras .gal-card:nth-child(3n) { --tilt: -0.6deg; }
.screen--obras .gal-card:active { transform: translateY(4px) scale(0.97); box-shadow: 0 2px 0 rgba(43, 34, 64, 0.18); }
.screen--obras .gal-card:focus-visible { box-shadow: 0 0 0 5px var(--blue), 0 6px 0 rgba(43, 34, 64, 0.18); }
@media (hover: hover) {
  .screen--obras .gal-card:hover { transform: rotate(0deg) translateY(-4px) scale(1.02); }
  .screen--obras .gal-card:active { transform: translateY(4px) scale(0.97); }
}
@keyframes gal-in {
  from { opacity: 0; transform: translateY(24px) scale(0.8) rotate(-4deg); }
}

.screen--obras .gal-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: #f4f0fb;
}
.screen--obras .gal-frame--neon { background: #0d0620; }
.screen--obras .gal-frame--neon .gal-thumb-bg { opacity: 0.8; }
.screen--obras .gal-thumb-bg {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  filter: blur(14px) saturate(1.15);
  opacity: 0.5;
}
.screen--obras .gal-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.screen--obras .gal-missing { width: 50%; height: 50%; opacity: 0.5; }

.screen--obras .gal-badge {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 46px;
  height: 46px;
  padding: 5px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 0 3px 0 rgba(43, 34, 64, 0.18);
  pointer-events: none;
}
.screen--obras .gal-badge .icon { width: 100%; height: 100%; }
@media (max-width: 600px), (max-height: 520px) {
  .screen--obras .gal-badge { width: 38px; height: 38px; padding: 4px; left: -8px; top: -8px; }
}

/* Obra recién terminada (#obras/<id>): brillo y pulso */
.screen--obras .gal-card.gal-new {
  z-index: 1;
  animation: gal-in 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) backwards, gal-pulse 1.1s 0.4s ease-in-out 4;
  box-shadow: 0 0 0 5px var(--yellow), 0 0 0 9px var(--ink), 0 0 34px 12px rgba(255, 210, 63, 0.75);
}
@keyframes gal-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06) rotate(0deg); }
}
.screen--obras .gal-new-star {
  position: absolute;
  right: -16px;
  top: -18px;
  width: 58px;
  height: 58px;
  pointer-events: none;
  filter: drop-shadow(0 3px 0 rgba(43, 34, 64, 0.2));
  animation: gal-star 0.7s 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) backwards, gal-spin 3s 1s ease-in-out infinite;
}
.screen--obras .gal-new-star .icon { width: 100%; height: 100%; }
@keyframes gal-star { from { transform: scale(0) rotate(-90deg); } }
@keyframes gal-spin { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg) scale(1.1); } }

/* Obra que el chico volvió a ver (al volver con "atrás"): un brillo suave que se apaga solo */
.screen--obras .gal-card.gal-back::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 30px;
  box-shadow: 0 0 0 5px var(--yellow), 0 0 26px 8px rgba(255, 210, 63, 0.7);
  pointer-events: none;
  animation: gal-back 3s ease-out forwards;
}
@keyframes gal-back { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* Refresco en segundo plano: las tarjetas aparecen quietas (sin la entrada ni el pulso) */
.screen--obras .gal-grid.gal-still .gal-card:not(.gal-leaving) { animation: none; }

/* Obra que se va (borrada) */
.screen--obras .gal-card.gal-leaving {
  pointer-events: none;
  animation: gal-out 0.5s cubic-bezier(0.5, -0.4, 0.8, 0.6) forwards;
}
@keyframes gal-out {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  30% { transform: scale(1.08) rotate(-6deg); opacity: 1; }
  100% { transform: scale(0.1) rotate(40deg) translateY(120px); opacity: 0; }
}

/* ---------- Estado vacío ---------- */
.screen--obras .gal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 3vmin, 28px);
  padding: 8px;
}
.screen--obras .gal-empty-art {
  display: block;
  width: min(76vw, 46vh, 360px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  animation: gal-float 4s ease-in-out infinite;
  transition: scale 0.14s ease;
}
.screen--obras .gal-empty-art:active { scale: 0.95; }
.screen--obras .gal-empty-art:focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; border-radius: 24px; }
.screen--obras .gal-empty-art svg { width: 100%; height: auto; pointer-events: none; }
.screen--obras .gal-twinkle { animation: gal-twinkle 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.screen--obras .gal-twinkle.t2 { animation-delay: -0.8s; }
@keyframes gal-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes gal-twinkle { 0%, 100% { transform: scale(0.7); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } }
.screen--obras .gal-empty-go { display: flex; gap: clamp(16px, 5vmin, 36px); }
.screen--obras .gal-go {
  width: clamp(84px, 16vmin, 116px);
  height: clamp(84px, 16vmin, 116px);
  border: 4px solid var(--ink);
  animation: gal-bob 2.2s ease-in-out infinite;
}
.screen--obras .gal-go .icon { width: 66%; height: 66%; }
.screen--obras .gal-go--colorear { background: #ffe07a; }
.screen--obras .gal-go--pizarra { background: #7fe6bd; animation-delay: -1.1s; }
@keyframes gal-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
/* Celular acostado: dibujo y botones lado a lado */
@media (max-height: 520px) and (orientation: landscape) {
  .screen--obras .gal-empty { flex-direction: row; }
  .screen--obras .gal-empty-art { width: min(40vw, 58vh, 300px); }
}

/* ---------- Vista grande (modal) ---------- */
.modal-back.gal-view { padding: 12px; }
.modal-back.gal-view .modal {
  max-width: calc(100vw - 24px);
  max-height: calc(var(--app-h) - 24px);
  border: 4px solid var(--ink);
  border-radius: 30px;
}
.modal-back.gal-view .modal-body { padding: 14px; }
.gal-view .gv {
  --pad: 36px; /* padding + borde del modal + margen del fondo, por lado y lado */
  --abtn: min(var(--btn-lg), calc((100vw - 120px) / 5));
  --wmax: min(calc(100vw - 24px - var(--pad)), 900px);
  --hmax: calc(var(--app-h) - 24px - var(--pad) - 14px - var(--abtn) - 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gal-view .gv-pic {
  border-radius: 18px;
  overflow: hidden;
  background: #f4f0fb;
  box-shadow: inset 0 0 0 3px rgba(43, 34, 64, 0.12);
  line-height: 0;
}
.gal-view .gv-pic--neon { background: #150c2b; }
.gal-view .gv-pic { position: relative; }
/* Borde encima de la imagen: una obra con fondo blanco no se funde con el modal blanco. */
.gal-view .gv-pic::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(43, 34, 64, 0.2);
  pointer-events: none;
}
.gal-view .gv-missing { position: absolute; inset: 0; display: grid; place-items: center; }
/* Colorear en alta: pintura + líneas encima (multiply), sobre papel blanco; aparece suave sobre la miniatura. */
.gal-view .gv-layers { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 0.18s ease; }
.gal-view .gv-layers.in { opacity: 1; }
.gal-view .gv-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.gal-view .gv-lines { mix-blend-mode: multiply; }
.gal-view .gv-missing .icon { width: 34%; height: 34%; opacity: 0.45; }
.gal-view .gv-img {
  display: block;
  width: min(var(--wmax), calc(var(--hmax) * var(--ar, 1)));
  height: auto;
  aspect-ratio: var(--ar, 1);
  object-fit: contain;
}
.gal-view .gv-actions { display: flex; gap: 12px; justify-content: center; }
.gal-view .gv-actions .btn { width: var(--abtn); height: var(--abtn); border: 3px solid var(--ink); }
.gal-view .gv-actions .btn > .icon { width: 60%; height: 60%; }
.gal-view .gv-go { margin-right: 6px; }
.gal-view .gv-close { margin-left: 6px; }
.gal-view .gv-busy { pointer-events: none; animation: gal-busy 0.6s ease-in-out infinite; }
@keyframes gal-busy { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.9); opacity: 0.7; } }

/* Pantallas bajas y apaisadas: imagen a la izquierda, botones 2×2 a la derecha. */
@media (orientation: landscape) and (max-height: 620px) {
  .gal-view .gv {
    --abtn: var(--btn-lg);
    flex-direction: row;
    --hmax: calc(var(--app-h) - 24px - var(--pad));
    --wmax: calc(100vw - 24px - var(--pad) - 14px - var(--abtn) * 2 - 12px);
  }
  .gal-view .gv-actions { display: grid; grid-template-columns: repeat(2, auto); }
  .gal-view .gv-go, .gal-view .gv-close { margin: 0; }
}

/* Celulares angostísimos (plegables, ~280 px): barra compacta, 2 columnas y botones de la vista sin
   márgenes extra, para que todo entre y siga siendo tocable (≥ 46 px). */
@media (max-width: 340px) {
  .screen--obras .gal-top .btn:not(.gal-tab) { width: 46px; height: 46px; }
  .screen--obras .gal-tabs { gap: 2px; padding: 3px; }
  .screen--obras .gal-tab { height: 46px; padding: 0 5px 0 2px; gap: 1px; }
  .screen--obras .gal-tab .icon { width: 30px; height: 30px; }
  .screen--obras .gal-count { font-size: 0.9rem; min-width: 1.7em; padding: 0.05em 0.3em; }
  .screen--obras .gal-grid { --gal-min: 110px; --gal-gap: 12px; padding-left: 10px; padding-right: 10px; }
  .gal-view .gv { --abtn: max(46px, calc((100vw - 24px - 36px - 24px) / 5)); }
  .gal-view .gv-actions { gap: 6px; flex-wrap: wrap; }
  .gal-view .gv-go, .gal-view .gv-close { margin: 0; }
}

/* ---------- ¿Pintado o para pintar? (antes de descargar o imprimir) ---------- */
.modal-back.gal-ask .modal {
  width: min(94vw, 640px);
  border: 4px solid var(--ink);
  border-radius: 30px;
}
.modal-back.gal-ask .modal-body { padding: 18px 20px 22px; }
.gal-ask .gv-ask { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.gal-ask .gv-ask-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--btn-sm);
  padding: 0 calc(var(--btn-sm) + 6px);
  font-size: 1.45rem;
  font-weight: 600;
}
.gal-ask .gv-ask-title .icon { width: 46px; height: 46px; flex: 0 0 auto; }
.gal-ask .gv-ask-opts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3vmin, 22px); width: 100%; }
.gal-ask .gv-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 4px solid var(--ink);
  border-radius: 24px;
  background: #fff3cc;
  box-shadow: 0 5px 0 rgba(43, 34, 64, 0.2);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.gal-ask .gv-opt--lines { background: #e3f3ff; }
.gal-ask .gv-opt:active { transform: translateY(4px) scale(0.97); box-shadow: 0 1px 0 rgba(43, 34, 64, 0.2); }
.gal-ask .gv-opt:focus-visible { box-shadow: 0 0 0 4px var(--blue), 0 5px 0 rgba(43, 34, 64, 0.2); }
@media (hover: hover) { .gal-ask .gv-opt:hover { transform: translateY(-3px) rotate(-1deg); } }
.gal-ask .gv-opt-pic {
  display: block;
  width: min(100%, calc(var(--app-h) * 0.42));
  aspect-ratio: 1;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 3px rgba(43, 34, 64, 0.15);
  overflow: hidden;
}
.gal-ask .gv-opt-pic img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.gal-ask .gv-opt-label { font-size: 1.3rem; font-weight: 600; line-height: 1.1; text-align: center; }
@media (max-height: 520px) {
  .gal-ask .gv-ask { gap: 10px; }
  .gal-ask .gv-opt { padding: 8px; gap: 6px; }
  .gal-ask .gv-opt-label { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .screen--obras .gal-title,
  .screen--obras .gal-empty-art,
  .screen--obras .gal-twinkle,
  .screen--obras .gal-go,
  .screen--obras .gal-new-star { animation: none; }
  .screen--obras .gal-card,
  .screen--obras .gal-card.gal-new { animation: none; }
  .screen--obras .gal-card.gal-back::after { animation: none; opacity: 0; }
}