/* Aprendi2 (viene de Colorines) — Subir foto (ruta 'subir'). Todo bajo .screen--subir. */
.screen--subir {
  --up-card: min(36vw, 52vh, 330px);  /* Galería / Cámara */
  --up-dest: min(19vw, 24vh, 170px);  /* Pizarra / Rompecabezas */
  --up-panel-w: clamp(200px, 24vw, 300px);
  background: var(--bg);
}
.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; }
/* 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);
}
/* Ocupado (leer, girar o guardar la foto): los controles se bloquean al instante, pero el atenuado y los
   puntitos aparecen sólo si tarda más de ~150 ms (así lo rápido no parpadea). */
.screen--subir .up-choices,
.screen--subir .up-mine,
.screen--subir .up-panel,
.screen--subir .up-bar .btn { transition: opacity 0.2s, filter 0.2s; }
.screen--subir.up-busy .up-choices,
.screen--subir.up-busy .up-mine,
.screen--subir.up-busy .up-panel,
.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; } }

/* ---------- 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);
}
/* Con fotos guardadas: las tarjetas se achican arriba y "Mis fotos" ocupa el resto. */
.screen--subir .up-has-mine { --up-card: min(22vw, 24vh, 200px); }
.screen--subir .up-has-mine .up-choices { flex: 0 0 auto; padding: 0 calc(var(--gap) * 2) calc(var(--gap) * 2); }
.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; } }

/* Mis fotos */
.screen--subir .up-mine { flex: 1; min-height: 0; padding: 0 calc(var(--gap) * 2) calc(var(--gap) * 2 + var(--safe-b)); }
.screen--subir .up-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 27vw), 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 8px 6px;
}
.screen--subir .up-cell {
  position: relative;
  transition: transform 0.3s ease, opacity 0.3s ease;
  animation: up-card-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.screen--subir .up-cell.up-out { transform: scale(0.3) rotate(-12deg); opacity: 0; pointer-events: none; }
.screen--subir .up-photo-card {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 6px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transition: transform 0.14s ease;
}
.screen--subir .up-photo-card > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; pointer-events: none; }
.screen--subir .up-photo-card:active { transform: scale(0.95); }
.screen--subir .up-photo-card:focus-visible { box-shadow: 0 0 0 5px var(--blue), var(--shadow); }
.screen--subir .up-del { position: absolute; left: -6px; bottom: -6px; z-index: 2; }

/* Aviso de error: burbuja grande con ícono (sin texto), centrada sobre lo atenuado. */
.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.has-err .up-choices,
.screen--subir.has-err .up-mine,
.screen--subir.has-err .up-stage { opacity: 0.45; filter: saturate(0.6); }
@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. Vista previa: la foto grande y adónde va ---------- */
.screen--subir .up-preview {
  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) * 2);
  overflow: hidden;
}
.screen--subir .up-shot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 6px #fff, 0 8px 0 6px rgba(43, 34, 64, 0.12), 0 18px 36px rgba(43, 34, 64, 0.2);
}
.screen--subir .up-shot > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen--subir .up-shot.spin-in { animation: up-spin-in 0.35s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes up-spin-in { from { transform: rotate(-90deg) scale(0.8); opacity: 0.4; } to { transform: none; opacity: 1; } }

.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) * 3);
  padding: var(--gap) var(--gap) calc(var(--gap) * 2.5);
}
.screen--subir .up-panel .btn.up-rotate { width: calc(var(--btn) * 1.15); height: calc(var(--btn) * 1.15); }
.screen--subir .up-dests { display: flex; flex-direction: column; align-items: center; gap: calc(var(--gap) * 2.5); }
.screen--subir .up-dest {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--up-dest);
  height: var(--up-dest);
  padding: 0;
  border: 0;
  border-radius: 24%;
  box-shadow: 0 7px 0 rgba(43, 34, 64, 0.18), 0 14px 30px 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;
  animation-delay: calc(0.1s + var(--i, 0) * 0.08s);
}
.screen--subir .up-dest::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}
.screen--subir .up-dest .icon { position: relative; width: 64%; height: 64%; pointer-events: none; }
.screen--subir .up-dest--pizarra { background: linear-gradient(160deg, #ffe3f1, #ff8fc7); }
.screen--subir .up-dest--rompecabezas { background: linear-gradient(160deg, #e2f8e9, #5fd08e); }
.screen--subir .up-dest: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-dest:focus-visible { box-shadow: 0 0 0 6px var(--blue), 0 7px 0 rgba(43, 34, 64, 0.18); }
.screen--subir .up-panel .btn.up-go {
  width: min(100%, 230px);
  height: var(--btn-lg);
  padding: 0;
  justify-content: center;
  animation: up-go-pulse 2.4s ease-in-out 1s infinite;
}
.screen--subir .btn.up-go .icon { width: calc(var(--btn-lg) * 0.78); height: calc(var(--btn-lg) * 0.78); }
@keyframes up-go-pulse { 0%, 80%, 100% { scale: 1; } 88% { scale: 1.06; } }

/* Vertical: barra arriba, foto al medio, girar y destinos abajo. */
@media (orientation: portrait) {
  .screen--subir { --up-card: min(62vw, 30vh, 330px); --up-dest: min(30vw, 17vh, 170px); }
  .screen--subir .up-has-mine { --up-card: min(38vw, 19vh, 200px); }
  .screen--subir .up-choices { flex-direction: column; padding-bottom: calc(var(--gap) * 3); }
  .screen--subir .up-has-mine .up-choices { flex-direction: row; padding-bottom: calc(var(--gap) * 2); }
  .screen--subir .up-preview {
    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: var(--gap) calc(var(--gap) * 2); }
  .screen--subir .up-panel { flex-direction: row; padding-bottom: calc(var(--gap) * 2.5 + var(--safe-b)); }
  .screen--subir .up-dests { flex-direction: row; }
}
/* Celular acostado: poco alto, todo más apretado. */
@media (orientation: landscape) and (max-height: 520px) {
  .screen--subir { --up-dest: min(15vw, 30vh, 130px); }
  .screen--subir .up-has-mine { --up-card: min(16vw, 30vh, 130px); }
  .screen--subir .up-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
  .screen--subir .up-panel { gap: calc(var(--gap) * 1.5); padding: 0 var(--gap) var(--gap); }
  .screen--subir .up-dests { gap: calc(var(--gap) * 1.5); }
  .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; }
}

/* ---------- 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 .up-cell,
  .screen--subir .up-dest,
  .screen--subir .btn.up-go,
  .screen--subir .up-shot,
  .screen--subir .up-card.up-hint,
  .screen--subir .up-err.in { animation: none !important; }
}