/* Colorines — Subir imágenes (ruta 'subir'). Todo bajo .screen--subir. */
.screen--subir {
  --up-card: min(36vw, 56vh, 340px);
  --up-panel-w: clamp(260px, 31vw, 380px);
  --up-b: var(--btn);            /* botones del panel de ajuste */
  --up-b-sm: var(--btn-sm);
  background: var(--bg);
}
/* Pantallas grandes (compu, tablet): botones del panel más grandes, hay lugar de sobra. */
@media (min-width: 700px) and (min-height: 700px) {
  .screen--subir { --up-b: calc(var(--btn) * 1.2); --up-b-sm: var(--btn); }
}
/* Burbujas de adorno sólo en la pantalla de elegir. */
.screen--subir .up-pick {
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 210, 63, 0.28) 0 70px, transparent 71px),
    radial-gradient(circle at 88% 84%, rgba(76, 195, 255, 0.22) 0 90px, transparent 91px);
}
.screen--subir [hidden] { display: none !important; }
.screen--subir .up-view { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.screen--subir .up-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Ocupado: los controles se bloquean al instante, pero el atenuado y los puntitos aparecen sólo si
   tarda más de ~150 ms (así girar o cambiar de modo en una compu rápida no parpadea). */
.screen--subir .up-panel,
.screen--subir .up-choices,
.screen--subir .up-bar .btn { transition: opacity 0.2s; }
.screen--subir.up-busy .up-panel,
.screen--subir.up-busy .up-choices,
.screen--subir.up-busy .up-bar .btn-back { pointer-events: none; opacity: 0.5; transition-delay: 0.15s; }
.screen--subir > .spinner { animation: up-late 0.2s ease 0.15s both; }
@keyframes up-late { from { opacity: 0; } to { opacity: 1; } }
/* Guardando / guardado (festejo): nada se puede tocar hasta pasar a pintar. */
.screen--subir.up-saving .up-bar .btn:not(.btn-mute),
.screen--subir.up-saved .up-bar .btn:not(.btn-mute),
.screen--subir.up-saved .up-panel { pointer-events: none; }
.screen--subir.up-saved .up-bar .btn:not(.btn-mute),
.screen--subir.up-saved .up-group,
.screen--subir.up-saved .up-slider { opacity: 0.4; }
.screen--subir.up-busy.up-saving .up-panel { opacity: 1; }
.screen--subir.up-saving .up-group,
.screen--subir.up-saving .up-slider { opacity: 0.4; transition: opacity 0.2s; }
.screen--subir.up-saving .up-panel .btn.up-save,
.screen--subir.up-saved .up-panel .btn.up-save { animation: none; }
.screen--subir.up-saved .btn.up-save .icon { animation: up-check 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes up-check { from { transform: scale(0.4) rotate(-20deg); } to { transform: none; } }

/* ---------- 1. Elegir ---------- */
.screen--subir .up-choices {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 6vmin, 72px);
  padding: 0 calc(var(--gap) * 2) calc(var(--gap) * 3 + var(--btn) * 0.5);
}
.screen--subir .up-card {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--up-card);
  height: var(--up-card);
  padding: 0;
  border: 0;
  border-radius: 22%;
  box-shadow: 0 7px 0 rgba(43, 34, 64, 0.18), 0 16px 34px rgba(43, 34, 64, 0.16);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  animation: up-card-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
.screen--subir .up-card::before {
  content: '';
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}
.screen--subir .up-card .icon { position: relative; width: 66%; height: 66%; pointer-events: none; }
.screen--subir .up-card--file { background: linear-gradient(160deg, #fff1b8, #ffc94a); }
.screen--subir .up-card--cam { background: linear-gradient(160deg, #d8f3ff, #6fcdfa); animation-delay: 0.08s; }
.screen--subir .up-card:hover .icon { transform: rotate(-4deg) scale(1.04); transition: transform 0.2s; }
.screen--subir .up-card:active { transform: translateY(5px) scale(0.96); box-shadow: 0 2px 0 rgba(43, 34, 64, 0.18), 0 6px 14px rgba(43, 34, 64, 0.14); }
.screen--subir .up-card:focus-visible { box-shadow: 0 0 0 6px var(--blue), 0 7px 0 rgba(43, 34, 64, 0.18); }
.screen--subir .up-card.up-hint { animation: up-hint 1s ease-in-out 8; box-shadow: 0 0 0 6px var(--orange), 0 7px 0 6px rgba(43, 34, 64, 0.16); }
@keyframes up-hint { 0%, 100% { transform: none; } 50% { transform: scale(1.07); } }
.screen--subir .up-pick.dragging .up-card--file { outline: 6px dashed var(--orange); outline-offset: 8px; transform: scale(1.04); }
@keyframes up-card-in { from { opacity: 0; transform: translateY(24px) scale(0.85); } to { opacity: 1; transform: none; } }

/* Aviso de error: burbuja grande con ícono (sin texto), centrada sobre las tarjetas atenuadas. */
.screen--subir .up-err {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  padding: 20px;
  border-radius: 40px;
  background: #fff;
  box-shadow: 0 0 0 6px var(--red), 0 10px 0 6px rgba(43, 34, 64, 0.14), 0 22px 44px rgba(43, 34, 64, 0.25);
  pointer-events: none;
}
.screen--subir .up-err .icon { width: 100%; height: 100%; }
.screen--subir .up-err.in { animation: up-err-in 0.7s ease both; }
.screen--subir .up-choices { transition: opacity 0.2s, filter 0.2s; }
.screen--subir.has-err .up-choices,
.screen--subir.has-err .up-stage { opacity: 0.45; filter: saturate(0.6); transition: opacity 0.2s, filter 0.2s; }
@keyframes up-err-in {
  0% { opacity: 0; transform: scale(0.4); }
  35% { opacity: 1; transform: scale(1.08); }
  50% { transform: rotate(-8deg); }
  65% { transform: rotate(8deg); }
  80% { transform: rotate(-4deg); }
  100% { transform: none; }
}

/* ---------- 2. Ajustar ---------- */
.screen--subir .up-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--up-panel-w);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'stage bar' 'stage panel';
}
.screen--subir .up-bar { grid-area: bar; }
.screen--subir .up-stage {
  grid-area: stage;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--gap) * 1.5);
  overflow: hidden;
}
.screen--subir .up-paper {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 4px #fff, 0 6px 0 4px rgba(43, 34, 64, 0.12), 0 16px 34px rgba(43, 34, 64, 0.18);
}
.screen--subir .up-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen--subir .up-orig { opacity: 0; transition: opacity 0.15s; }
.screen--subir .up-paper.show-orig .up-orig { opacity: 1; }
.screen--subir .up-paper.spin-in { animation: up-spin-in 0.35s cubic-bezier(0.2, 1.3, 0.4, 1); }
.screen--subir .up-paper.flip-in { animation: up-flip-in 0.3s ease; }
@keyframes up-spin-in { from { transform: rotate(-90deg) scale(0.8); opacity: 0.4; } to { transform: none; opacity: 1; } }
/* Página vacía: el papel tiembla (junto con el aviso). */
.screen--subir .up-paper.up-shake { animation: up-shake 0.5s ease; }
@keyframes up-shake {
  20% { transform: translateX(-10px) rotate(-1.5deg); }
  40% { transform: translateX(9px) rotate(1.2deg); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(3px); }
  100% { transform: none; }
}
@keyframes up-flip-in { 0% { transform: scale(1); } 40% { transform: scale(0.96); } 100% { transform: none; } }
.screen--subir.up-saved .up-paper { animation: up-saved 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes up-saved { 40% { transform: scale(1.05) rotate(-2deg); } 100% { transform: none; } }

.screen--subir .up-panel {
  grid-area: panel;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gap) * 2);
  padding: var(--gap) var(--gap) calc(var(--gap) * 2.5);
}
.screen--subir .up-panel .btn { width: var(--up-b); height: var(--up-b); }
.screen--subir .up-panel .btn.btn-sm { width: var(--up-b-sm); height: var(--up-b-sm); }
.screen--subir .up-group {
  display: flex;
  gap: var(--gap);
  padding: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 2px rgba(43, 34, 64, 0.06);
}
.screen--subir .up-group .btn.active { background: #fff6d6; }
.screen--subir .btn.up-eye { touch-action: none; } /* si el dedo se mueve un poco, sigue mostrando la original */
.screen--subir .btn.up-eye.pressed { transform: translateY(3px) scale(0.94); box-shadow: 0 0 0 4px var(--blue), var(--shadow-press); }

/* Deslizador grande */
.screen--subir .up-slider { display: flex; align-items: center; gap: var(--gap); width: 100%; }
.screen--subir .up-range {
  --val: 50%;
  flex: 1;
  min-width: 0;
  height: var(--up-b);
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.screen--subir .up-range::-webkit-slider-runnable-track {
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff, #a59cb8 50%, #1b1428);
  box-shadow: inset 0 0 0 3px var(--ink);
}
.screen--subir .up-range::-moz-range-track {
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff, #a59cb8 50%, #1b1428);
  box-shadow: inset 0 0 0 3px var(--ink);
}
.screen--subir .up-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(var(--up-b) * 0.8);
  height: calc(var(--up-b) * 0.8);
  margin-top: calc(10px - var(--up-b) * 0.4);
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 3px 0 rgba(43, 34, 64, 0.2), 0 6px 12px rgba(43, 34, 64, 0.18);
  transition: transform 0.12s;
}
.screen--subir .up-range::-moz-range-thumb {
  width: calc(var(--up-b) * 0.8 - 10px);
  height: calc(var(--up-b) * 0.8 - 10px);
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 3px 0 rgba(43, 34, 64, 0.2);
}
.screen--subir .up-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.screen--subir .up-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--blue); }

.screen--subir .up-actions { margin-top: calc(var(--gap) * 1.5); display: flex; justify-content: center; width: 100%; }
.screen--subir .up-panel .btn.up-save {
  width: min(100%, 250px);
  height: var(--btn-lg);
  padding: 0;
  justify-content: center;
  animation: up-save-pulse 2.4s ease-in-out 1s infinite;
}
.screen--subir .btn.up-save .icon { width: calc(var(--btn-lg) * 0.78); height: calc(var(--btn-lg) * 0.78); }
@keyframes up-save-pulse { 0%, 80%, 100% { scale: 1; } 88% { scale: 1.06; } }

/* Vertical: barra arriba, dibujo al medio, controles abajo. */
@media (orientation: portrait) {
  .screen--subir { --up-card: min(62vw, 33vh, 340px); }
  .screen--subir .up-choices { flex-direction: column; padding-bottom: calc(var(--gap) * 3); }
  .screen--subir .up-edit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: 'bar' 'stage' 'panel';
  }
  .screen--subir .up-stage { padding: 0 calc(var(--gap) * 1.5) var(--gap); }
  .screen--subir .up-panel {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: 'modes tools' 'slider slider' 'save save';
    justify-content: center;
    column-gap: calc(var(--gap) * 1.5);
    row-gap: var(--gap);
    width: min(100%, 640px);
    justify-self: center;
  }
  .screen--subir .up-modes { grid-area: modes; }
  .screen--subir .up-tools { grid-area: tools; }
  .screen--subir .up-slider { grid-area: slider; }
  .screen--subir .up-actions { grid-area: save; margin-top: 0; }
}
/* Celular vertical angosto: grupos más compactos. */
@media (orientation: portrait) and (max-width: 420px) {
  .screen--subir .up-group { gap: 6px; padding: 5px; }
  .screen--subir .up-panel { column-gap: var(--gap); }
}
/* Celular horizontal: poco alto, todo más apretado. */
@media (orientation: landscape) and (max-height: 520px) {
  .screen--subir .up-panel { gap: var(--gap); padding-top: 0; padding-bottom: var(--gap); }
  .screen--subir .up-group { padding: 4px; gap: 6px; }
  .screen--subir .up-stage { padding: var(--gap); }
  .screen--subir .up-err { width: 120px; height: 120px; margin: -60px 0 0 -60px; padding: 16px; border-radius: 32px; }
}
/* Celular apaisado MUY bajo (iPhone 8/SE con la barra de Safari ≈ 667×331, Android 640×360, 568×320):
   botones de 46 px, modos y herramientas en una sola fila, guardar más bajo. */
@media (orientation: landscape) and (max-height: 360px) {
  .screen--subir { --up-b: 46px; --up-b-sm: 46px; --up-panel-w: 292px; }
  .screen--subir .up-panel {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: 'modes tools' 'slider slider' 'save save';
    justify-content: center;
    align-content: center;
    gap: 6px;
    padding: 0 4px 4px;
  }
  .screen--subir .up-modes { grid-area: modes; }
  .screen--subir .up-tools { grid-area: tools; }
  .screen--subir .up-slider { grid-area: slider; gap: 6px; }
  .screen--subir .up-actions { grid-area: save; margin-top: 0; }
  .screen--subir .up-group { padding: 3px; gap: 4px; }
  .screen--subir .up-panel .btn.up-save { height: 54px; }
  .screen--subir .btn.up-save .icon { width: 42px; height: 42px; }
  .screen--subir .up-stage { padding: 6px; }
}

/* ---------- Visor de cámara ---------- */
.screen--subir .up-cam { position: absolute; inset: 0; z-index: 20; background: #140c26; }
.screen--subir .up-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #140c26; }
/* Cámara de frente: el visor se ve como un espejo (la foto no se espeja). */
.screen--subir .up-video.up-mirror { transform: scaleX(-1); }
.screen--subir .up-cam .btn { position: absolute; z-index: 2; }
.screen--subir .up-cam-close { top: calc(var(--safe-t) + var(--gap)); left: calc(var(--safe-l) + var(--gap)); }
.screen--subir .up-cam-flip { top: calc(var(--safe-t) + var(--gap)); right: calc(var(--safe-r) + var(--gap) * 2 + var(--btn)); }
.screen--subir .up-cam-mute { position: absolute; z-index: 2; top: calc(var(--safe-t) + var(--gap)); right: calc(var(--safe-r) + var(--gap)); }
.screen--subir .up-cam .up-cam-mute .btn { position: static; }
.screen--subir .up-shutter {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(var(--safe-b) + var(--gap) * 2.5);
  width: calc(var(--btn-lg) * 1.2);
  height: calc(var(--btn-lg) * 1.2);
  margin-left: calc(var(--btn-lg) * -0.6);
  padding: 0;
  border: 7px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 4px rgba(20, 12, 38, 0.5), 0 10px 26px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transition: transform 0.12s;
}
.screen--subir .up-shutter-dot {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a9d, var(--red) 60%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.15);
}
.screen--subir .up-shutter:active { transform: scale(0.9); }
.screen--subir .up-shutter:focus-visible { box-shadow: 0 0 0 6px var(--blue); }
.screen--subir .up-shutter[disabled] { opacity: 0.4; pointer-events: none; }
@media (orientation: landscape) {
  .screen--subir .up-shutter {
    left: auto;
    bottom: auto;
    top: 50%;
    right: calc(var(--safe-r) + var(--gap) * 2.5);
    margin: calc(var(--btn-lg) * -0.6) 0 0 0;
  }
}
.screen--subir .up-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.screen--subir .up-flash.go { animation: up-flash 0.35s ease-out; }
@keyframes up-flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .screen--subir .up-card,
  .screen--subir .btn.up-save,
  .screen--subir .up-paper,
  .screen--subir .up-card.up-hint,
  .screen--subir .up-err.in { animation: none !important; }
}