/* Cámara de la página (js/camara.js) y hoja del mensaje (js/dedicatoria.js). */

/* ---------- cámara ---------- */
.camara {
  position: fixed; inset: 0; z-index: 35;
  display: grid; grid-template-rows: auto 1fr auto auto;
  background: #000; color: #fff;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.cam-arriba { display: flex; justify-content: space-between; align-items: center; padding: .6rem .75rem; }
.cam-opciones { display: flex; gap: .35rem; }
.cam-boton {
  position: relative; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
  transition: background .2s, color .2s;
}
.cam-boton svg { width: 1.35rem; height: 1.35rem; }
.cam-boton.activo { background: #fff; color: #000; }
.cam-boton span { position: absolute; right: -2px; bottom: -2px; font-size: .62rem; font-weight: 700; background: var(--oro); color: #fff; border-radius: 999px; padding: 0 .3rem; line-height: 1.35; }
.cam-boton span:empty { display: none; }

.cam-visor { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; container-type: size; }
.cam-marco {
  --ar: .75;
  position: relative; overflow: hidden;
  width: min(100cqw, 100cqh * var(--ar)); aspect-ratio: var(--ar);
  background: #111;
}
.cam-marco video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(var(--zoom, 1)); transition: transform .25s ease;
}
.cam-marco video.espejo { transform: scaleX(-1) scale(var(--zoom, 1)); }
.cam-vineta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.38) 100%); }
.cam-cuadricula {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px));
}
.cam-cuenta {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-family: var(--f-titulo, inherit); font-size: 7rem; font-weight: 300; text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.cam-cuenta.late { animation: cam-late 1s ease-out; }
@keyframes cam-late { from { transform: scale(1.4); opacity: 0; } 20% { transform: scale(1); opacity: 1; } to { opacity: .2; } }

.cam-zoom {
  position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .3rem; padding: .25rem; border-radius: 999px; background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cam-zoom button { width: 2.35rem; height: 2.35rem; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: .8rem; font-weight: 600; cursor: pointer; }
.cam-zoom button.activo { background: rgba(255,255,255,.2); color: var(--oro); font-size: .9rem; }

.cam-error { position: absolute; inset: 0; display: grid; place-content: center; gap: 1rem; padding: 2rem; text-align: center; background: #000; }
.cam-error p { margin: 0; font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 20rem; }
.cam-sistema { justify-self: center; padding: .85rem 1.4rem; border: 0; border-radius: 999px; background: #fff; color: #000; font-weight: 600; cursor: pointer; }

.cam-filtros {
  display: flex; gap: .4rem; overflow-x: auto; padding: .7rem .75rem .2rem;
  scrollbar-width: none;
}
/* centrados cuando caben; si no, se deslizan sin cortar el primero */
.cam-filtros button:first-child { margin-left: auto; }
.cam-filtros button:last-child { margin-right: auto; }
.cam-filtros::-webkit-scrollbar { display: none; }
.cam-filtros button {
  flex: 0 0 auto; padding: .4rem .8rem; border: 0; border-radius: 999px; background: transparent;
  color: rgba(255,255,255,.7); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.cam-filtros button.activo { color: var(--oro); background: rgba(255,255,255,.08); }

.cam-abajo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .6rem 1.5rem 1rem; }
.cam-ultima {
  justify-self: start; position: relative; width: 3.1rem; height: 3.1rem; padding: 0;
  border: 2px solid #fff; border-radius: 10px; overflow: hidden; background: #222; cursor: pointer;
}
.cam-ultima img { width: 100%; height: 100%; object-fit: cover; }
.cam-ultima span { position: absolute; right: 2px; top: 2px; min-width: 1.1rem; padding: 0 .2rem; border-radius: 999px; background: var(--oro); font-size: .65rem; font-weight: 700; line-height: 1.1rem; color: #fff; }
.cam-voltear { justify-self: end; width: 3.1rem; height: 3.1rem; }
.cam-voltear svg { width: 1.6rem; height: 1.6rem; }

.cam-disparador {
  width: 4.75rem; height: 4.75rem; padding: 0; border: 4px solid #fff; border-radius: 50%;
  background: transparent; display: grid; place-items: center; cursor: pointer;
}
.cam-disparador span { width: 3.65rem; height: 3.65rem; border-radius: 50%; background: #fff; transition: transform .12s ease, background .2s; }
.cam-disparador:active span { transform: scale(.86); }
.camara.disparando .cam-disparador span { background: color-mix(in srgb, #fff 70%, var(--oro)); transform: scale(.9); }

.cam-destello { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.camara.luz .cam-destello { opacity: 1; transition: opacity .12s; } /* flash con la pantalla (cámara de frente) */

/* ---------- hoja del mensaje ---------- */
.dedicatoria {
  position: fixed; inset: 0; z-index: 36;
  display: flex; flex-direction: column;
  background: rgba(10,12,11,.94);
  padding-top: env(safe-area-inset-top);
}
.ded-foto { flex: 1; min-height: 6rem; display: grid; place-items: center; padding: 1rem; }
.ded-foto img { max-width: 100%; max-height: 100%; object-fit: contain; border: 6px solid #fff; border-radius: 4px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6); transform: rotate(-1.2deg); }
.ded-panel {
  width: 100%; max-width: 30rem; margin: 0 auto;
  background: var(--papel); color: var(--tinta);
  border-radius: 22px 22px 0 0;
  padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  display: grid; gap: .7rem;
}
.ded-titulo { font-weight: 600; font-size: 1rem; }
.ded-titulo span { font-weight: 400; color: var(--tinta-suave); font-size: .9rem; }
.ded-campo { position: relative; }
.ded-campo textarea {
  width: 100%; resize: none; padding: .75rem 3.2rem .75rem .9rem;
  border: 1.5px solid color-mix(in srgb, var(--tinta) 18%, transparent); border-radius: 14px;
  background: #fff; color: var(--tinta); font: inherit; font-size: 1rem; line-height: 1.4;
}
.ded-campo textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 22%, transparent); }
.ded-campo textarea.mal { border-color: var(--cera, #b33); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cera, #b33) 18%, transparent); }
.ded-contador { position: absolute; right: .7rem; bottom: .55rem; font-size: .72rem; color: var(--tinta-suave); }
.ded-aviso { margin: -.2rem 0 0; font-size: .85rem; color: var(--cera, #b33); }
.ded-emojis { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.25rem; }
.ded-emojis::-webkit-scrollbar { display: none; }
.ded-emojis button { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 12px; background: transparent; font-size: 1.45rem; cursor: pointer; transition: transform .12s; }
.ded-emojis button:active { transform: scale(1.3); background: var(--salvia); }

.ded-audio { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; min-height: 3rem; }
.ded-mic {
  --avance: 0;
  flex: 0 0 auto; width: 3rem; height: 3rem; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--tinta);
  background:
    radial-gradient(closest-side, var(--salvia) calc(100% - 3px), transparent calc(100% - 2px)),
    conic-gradient(var(--cera, #c33) calc(var(--avance) * 360deg), color-mix(in srgb, var(--tinta) 12%, transparent) 0);
}
.ded-mic svg { width: 1.4rem; height: 1.4rem; }
.dedicatoria.grabando .ded-mic { color: var(--cera, #c33); animation: ded-pulso 1.2s ease-in-out infinite; }
@keyframes ded-pulso { 50% { transform: scale(1.08); } }
.ded-nota { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem .3rem .3rem; border-radius: 999px; background: var(--salvia); }
.ded-nota-oir { width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: var(--tinta); color: var(--papel); display: grid; place-items: center; cursor: pointer; }
.ded-nota-oir svg { width: 1rem; height: 1rem; }
.ded-onda { display: flex; align-items: center; gap: 3px; height: 1.4rem; }
.ded-onda i { width: 3px; height: 40%; border-radius: 2px; background: var(--tinta); opacity: .55; }
.ded-onda i:nth-child(2n) { height: 80%; } .ded-onda i:nth-child(3n) { height: 60%; }
.ded-nota-oir.sonando + .ded-onda i { animation: ded-onda .8s ease-in-out infinite; }
.ded-nota-oir.sonando + .ded-onda i:nth-child(2n) { animation-delay: -.3s; }
.ded-nota-oir.sonando + .ded-onda i:nth-child(3n) { animation-delay: -.55s; }
@keyframes ded-onda { 50% { transform: scaleY(.35); } }
.ded-nota-duracion { font-size: .85rem; font-variant-numeric: tabular-nums; }
.ded-nota-borrar { width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%; background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--tinta-suave); }
.ded-estado { margin: 0; font-size: .85rem; color: var(--tinta-suave); flex: 1 1 10rem; }
.ded-estado:empty { display: none; }

.ded-botones { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; margin-top: .2rem; }
.ded-botones .boton-camara { min-height: 3.4rem; font-size: 1.05rem; }
.ded-botones .boton-camara:disabled { opacity: .45; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .cam-marco video, .cam-disparador span { transition: none; }
  .dedicatoria.grabando .ded-mic, .ded-nota-oir.sonando + .ded-onda i, .cam-cuenta.late { animation: none; }
}