/* Macromático · Foto Estudio — identidad visual de herramientas internas.
   Paleta "papel de taller": fondo con sesgo hacia el verde de marca (no crema),
   tinta = negro de marca solo en texto/bordes, acento verde único y funcional.
   Esquinas redondeadas en lo que flota como tarjeta; el chrome pegado al borde
   de la pantalla (header, barra fija) se queda a escuadra. */

:root {
  --verde:    #00DD69;
  --amarillo: #E8DC00;
  --cian:     #35F9EF;
  --rojo:     #FB1A21;
  --negro:    #232323;
  --blanco:   #FFFFFF;
  --papel:    #EEF1EA;
  --papel-2:  #E4E9DF;
  --gris-texto: #5C6058;
  --gris-borde: #C9D1C3;
  --acento: var(--verde);
  /* La recompensa lee estos tres de aquí, para que siga al tema de la marca. */
  --recompensa-1: var(--verde);
  --recompensa-2: var(--amarillo);
  --recompensa-3: var(--cian);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --radio-sm: 6px;
  --radio-md: 10px;
}

/* ---------- Tema de Petalia ----------
   El oro #C9AD7F y el casi-negro cálido #171209 salen de la página real
   (petalia-red.vercel.app). La página es oscura; esta herramienta se queda
   clara a propósito — se usa a pleno día
   en el taller y de noche en el salón, y el fondo claro aguanta las dos.
   Lo que se conserva es el lenguaje de color, no la luminosidad: el oro
   SIEMPRE como relleno con texto casi negro encima, nunca como texto sobre
   claro (ahí no alcanza el contraste: 2.2:1). Misma regla que usa la página.

   De la marca salen dos: el oro y el casi-negro. El papel y los dos grises
   son neutros CÁLIDOS elegidos aquí — la página no tiene fondo claro. Se
   probó primero con su hueso #EBECEF, que es frío y peleaba con el oro. */
body[data-tema="petalia"] {
  --negro:  #171209;
  --papel:  #F2EFE9;
  --blanco: #FFFFFF;
  --gris-texto: #5F5A50;
  --gris-borde: #D8D2C6;
  --acento: #C9AD7F;
  --recompensa-1: #C9AD7F;
  --recompensa-2: #E0CCA6;
  --recompensa-3: #8C7248;
}

/* Una sola banda de oro en vez de las cuatro franjas de Macromático. */
body[data-tema="petalia"] .franja { background: var(--acento); }


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--negro);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, button { font-family: "Plus Jakarta Sans", sans-serif; }

.oculto { display: none !important; }

/* ---------- Cabecera y barra fija: pegadas al borde, se quedan a escuadra ---------- */
.cabecera { background: var(--negro); color: var(--blanco); }
.cabecera-contenido {
  max-width: 640px; margin: 0 auto; padding: 16px 20px 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px;
}
.logo { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 20px; }
.logo-sep { font-weight: 500; opacity: .6; padding: 0 2px; }
.cabecera-nota {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; opacity: .7;
}
.franjas { display: flex; height: 4px; }
.franja { flex: 1; }
.franja-verde    { background: var(--verde); }
.franja-amarilla { background: var(--amarillo); }
.franja-roja     { background: var(--rojo); }
.franja-cian     { background: var(--cian); }

/* ---------- Estructura ---------- */
main { max-width: 640px; margin: 0 auto; padding: 8px 20px 130px; }

.bloque { margin-top: 34px; }
.bloque h2 {
  font-size: 19px; font-weight: 800; margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
  text-wrap: balance;
}
.paso {
  background: var(--negro); color: var(--acento);
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; flex-shrink: 0;
}
.texto-tenue { color: var(--gris-texto); font-size: 14px; }
.opcion-nota { color: var(--gris-texto); font-size: 13px; }

/* ---------- Selector de marca (segmentado) ---------- */
.campo-destino { display: flex; flex-direction: column; gap: 8px; }
.campo-titulo {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 14px;
}
.campo-marca { margin-bottom: 18px; }

.selector-carpeta {
  display: flex; border: 1.5px solid var(--negro); border-radius: var(--radio-md);
  overflow: hidden;
}
.chip-carpeta {
  flex: 1; border: none; border-left: 1.5px solid var(--negro);
  background: var(--blanco); color: var(--negro);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 14px;
  padding: 12px 10px; cursor: pointer; transition: none;
}
.chip-carpeta:first-child { border-left: none; }
.chip-carpeta.activa { background: var(--negro); color: var(--acento); }
.chip-carpeta:hover:not(.activa) { background: var(--negro); color: var(--blanco); }
.chip-carpeta:disabled { opacity: .5; cursor: not-allowed; }
.chip-carpeta:disabled:hover { background: var(--blanco); color: var(--negro); }
.chip-carpeta.activa:disabled { background: var(--negro); color: var(--acento); }

/* ---------- Zona de arrastre ---------- */
.zona-arrastre {
  border: 1.5px dashed var(--gris-borde); border-radius: var(--radio-md);
  padding: 30px 20px; text-align: center;
}
.zona-arrastre.encima { border-color: var(--acento); border-style: solid; }
.zona-titulo { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 17px; margin: 0; }
.zona-sub { color: var(--gris-texto); margin: 8px 0 14px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.zona-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.zona-witty { font-size: 12.5px; color: var(--gris-texto); margin: 14px 0 0; }

.boton-secundario {
  background: var(--blanco); color: var(--negro); border: 1.5px solid var(--negro);
  border-radius: var(--radio-sm);
  padding: 10px 18px; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.boton-secundario:hover { background: var(--negro); color: var(--blanco); }

.boton-texto {
  background: none; border: none; color: var(--gris-texto);
  font-size: 14px; cursor: pointer; padding: 0; text-decoration: underline;
  text-underline-offset: 3px;
}

.lista-archivos { margin-top: 14px; }
.contador { font-weight: 700; }
.lista-encabezado { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.crop-ayuda { margin: 8px 0 12px; max-width: 46ch; }
.crop-ayuda b { color: var(--negro); }

/* ---------- Rejilla de miniaturas (hoja de contacto) ---------- */
.rejilla-fotos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px; background: var(--negro); border: 1px solid var(--negro);
  border-radius: var(--radio-md); overflow: hidden;
}
.foto-card { background: var(--blanco); position: relative; }
.foto-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.foto-acciones { display: flex; }
.foto-nombre {
  font-family: var(--mono); font-size: 10.5px; color: var(--gris-texto);
  padding: 5px 7px 6px; border-top: 1px dashed var(--gris-borde);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-icono {
  position: absolute; top: 6px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blanco); border: 1.5px solid var(--negro);
  border-radius: var(--radio-sm); font-size: 12px; cursor: pointer; padding: 0;
}
.crop-btn { right: 6px; }
.crop-btn.activa { background: var(--negro); color: var(--acento); }
.quitar-btn { left: 6px; }
.chip-icono:hover, .chip-icono:focus-visible {
  background: var(--negro); color: var(--acento); outline: none;
}
.foto-card.saliendo { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .foto-card { transition: opacity .12s linear; }
}

/* ---------- Orden de subida (paso 1): número + mover antes/después ---------- */
.foto-orden {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 7px; border-top: 1px dashed var(--gris-borde);
}
.orden-num {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  background: var(--negro); color: var(--acento);
  border-radius: var(--radio-sm); min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; padding: 0 2px;
}
.orden-btn {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: var(--blanco); border: 1.5px solid var(--negro);
  border-radius: var(--radio-sm); font-size: 13px; font-weight: 700; cursor: pointer; padding: 0;
  margin-left: auto;
}
.orden-btn + .orden-btn { margin-left: 4px; }
.orden-btn:hover, .orden-btn:focus-visible { background: var(--negro); color: var(--acento); outline: none; }
.orden-btn:disabled { opacity: .35; cursor: not-allowed; }
.orden-btn:disabled:hover { background: var(--blanco); color: var(--negro); }

/* ---------- Espera / progreso (paso 2, antes de procesar) ---------- */
.espera {
  font-size: 13.5px; color: var(--gris-texto);
  border: 1.5px dashed var(--gris-borde); border-radius: var(--radio-md);
  padding: 16px; text-align: center;
}
.bloque-resumen { margin-top: 4px; }

/* ---------- Progreso ---------- */
.progreso { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.progreso-pista { flex: 1; height: 12px; background: var(--negro); border-radius: var(--radio-sm); overflow: hidden; }
.progreso-relleno { height: 100%; width: 0; background: var(--acento); transition: width .25s; }
.progreso-texto { font-family: var(--mono); font-size: 13px; font-weight: 600; min-width: 60px; text-align: right; }

/* ---------- Resumen / resultados ---------- */
.rejilla-resumen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px; background: var(--negro); border: 1px solid var(--negro);
  border-radius: var(--radio-md); overflow: hidden; margin-top: 14px;
}
.tarjeta-resultado { background: var(--blanco); position: relative; }
.tarjeta-resultado img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.tarjeta-resultado img.ampliable { cursor: zoom-in; }
.tarjeta-resultado .info { padding: 8px 9px; }
.tarjeta-resultado .nombre {
  font-family: var(--mono); font-size: 10px; color: var(--gris-texto);
  word-break: break-all; margin-bottom: 6px;
}
.resultado-quitar {
  position: absolute; top: 6px; right: 6px; z-index: 2;
}

.fila-url { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.fila-url input {
  flex: 1; font-family: var(--mono); font-size: 11px; padding: 5px 6px;
  border: 1px solid var(--gris-borde); border-radius: var(--radio-sm);
  color: var(--gris-texto); min-width: 0;
}
.acciones-copiar { display: flex; gap: 6px; margin-top: 6px; }
.acciones-copiar .btn-copiar { flex: 1; }
.btn-copiar {
  border: 1.5px solid var(--negro); border-radius: var(--radio-sm);
  background: var(--blanco); color: var(--negro);
  font-size: 12px; font-weight: 700; padding: 5px 10px; cursor: pointer;
}
.btn-copiar:hover { background: var(--negro); color: var(--blanco); }

/* ---------- Zona de subida ---------- */
.subir-zona {
  margin-top: 16px; padding: 13px 15px;
  border: 1.5px solid var(--negro); border-left: 4px solid var(--acento);
  border-radius: var(--radio-sm);
}
.destino-carpeta { margin: 0; font-weight: 700; font-size: 14px; }

/* ---------- Botón principal ---------- */
.boton-principal {
  background: var(--acento); color: var(--negro); border: none;
  border-radius: var(--radio-sm);
  padding: 15px 30px; font-size: 16px; font-weight: 800; cursor: pointer;
  width: 100%;
}
.boton-principal:hover, .boton-principal:focus-visible {
  background: var(--negro); color: var(--acento);
  outline: 2px solid var(--acento); outline-offset: 2px;
}
.boton-principal:disabled {
  background: var(--gris-borde); color: var(--gris-texto); cursor: not-allowed;
}
.boton-principal:disabled:hover { outline: none; }

/* ---------- Barra fija (alcance del pulgar) ----------
   Acoplada al borde inferior, igual que la cabecera al superior: a escuadra. */
.barra-fija {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: var(--papel); border-top: 1.5px solid var(--negro);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
}
.barra-fija .contador {
  font-family: var(--mono); font-size: 11px; color: var(--gris-texto);
  display: block; margin-bottom: 8px; text-align: center; min-height: 1em;
}
.barra-fija-interior { max-width: 640px; margin: 0 auto; }
/* Marca única: no hay nada que elegir, pero tampoco se ve deshabilitada. */
.chip-carpeta[data-fijo] { pointer-events: none; }

/* Aparece al terminar la subida: recarga la página para empezar otra tanda. */
.boton-otra-tanda { width: 100%; margin-top: 10px; }

/* ---------- Errores ---------- */
.aviso-error {
  border: 1.5px solid var(--rojo); border-radius: var(--radio-sm); color: var(--rojo);
  padding: 12px 16px; margin-top: 24px; font-weight: 500;
}
.nota-error { color: var(--rojo); font-size: 13px; }

/* ---------- Modal de encuadre 1:1 y lightbox ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(35, 35, 35, .78);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal-caja {
  background: var(--blanco); border-radius: var(--radio-md);
  padding: 20px 22px; max-width: 92vw; max-height: 92vh; overflow: auto;
}
.modal-caja h3 { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.cropper-lienzo { position: relative; margin: 14px auto; line-height: 0; user-select: none; touch-action: none; }
.cropper-lienzo img { display: block; max-width: 82vw; max-height: 56vh; }
.cropper-marco {
  position: absolute; top: 0; left: 0;
  border: 2px solid var(--blanco); box-shadow: 0 0 0 9999px rgba(35, 35, 35, .55);
  cursor: grab; box-sizing: border-box;
}
.cropper-marco:active { cursor: grabbing; }
.modal-acciones { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.modal-acciones .espaciador { flex: 1; }

#lightbox { cursor: zoom-out; }
#lightbox img { max-width: 92vw; max-height: 92vh; display: block; border-radius: var(--radio-sm); }

/* ---------- Pie ---------- */
.pie {
  border-top: 1px dashed var(--gris-borde);
  max-width: 640px; margin: 0 auto; padding: 18px 20px 26px;
  color: var(--gris-texto); font-size: 12.5px;
}
.pie code { font-size: 11.5px; }
.form-logout { display: inline; margin-left: 8px; }
.form-logout .boton-texto { font-size: 12.5px; }

@media (min-width: 700px) {
  .cabecera-contenido, main, .pie { max-width: 720px; }
  .barra-fija-interior { max-width: 720px; }
}

/* ---------- Recompensa: easter egg al terminar de subir a Cloudinary ----------
   Combo elegido tras comparar variantes: sacudida+flash, monedas, rayos de
   sol, banner "¡Listo!" y botón gomoso. Colores aleatorios (verde/amarillo/
   cian) en cada ejecución — el rojo queda fuera porque está reservado para
   errores en toda la identidad de marca. */
.capa-recompensa { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }

body.sacudida { animation: recompensa-sacude 260ms ease-out; }
@keyframes recompensa-sacude {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-6px, 3px); }
  30%  { transform: translate(5px, -4px); }
  45%  { transform: translate(-4px, 4px); }
  60%  { transform: translate(4px, -3px); }
  75%  { transform: translate(-2px, 2px); }
  100% { transform: translate(0, 0); }
}

.recompensa-flash { position: absolute; inset: 0; opacity: 0; }
.recompensa-flash.jugar { animation: recompensa-parpadeo 140ms ease-out forwards; }
@keyframes recompensa-parpadeo { 0% { opacity: 0; } 30% { opacity: .8; } 100% { opacity: 0; } }

#recompensa-monedas-canvas { position: absolute; inset: 0; }

.recompensa-rayo {
  position: absolute; left: 50%; bottom: 4%; width: 6px; height: 32vh;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--ang)) scaleY(0);
  opacity: .9;
}
.recompensa-rayo.jugar { animation: recompensa-rayo-crece 700ms ease-out forwards; }
@keyframes recompensa-rayo-crece {
  0%   { transform: translateX(-50%) rotate(var(--ang)) scaleY(0); opacity: .9; }
  55%  { transform: translateX(-50%) rotate(var(--ang)) scaleY(1); opacity: .7; }
  100% { transform: translateX(-50%) rotate(calc(var(--ang) + 10deg)) scaleY(1); opacity: 0; }
}

.recompensa-banner {
  position: absolute; left: 50%; bottom: 30%;
  background: var(--negro); color: var(--acento);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 22px;
  padding: 10px 26px; border-radius: var(--radio-sm); white-space: nowrap;
  transform: translate(-50%, 60%) scale(.6) rotate(-4deg); opacity: 0;
}
.recompensa-banner.jugar { animation: recompensa-banner-bounce 1300ms cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes recompensa-banner-bounce {
  0%   { transform: translate(-50%, 60%) scale(.6) rotate(-4deg); opacity: 0; }
  40%  { transform: translate(-50%, 0%) scale(1.08) rotate(2deg); opacity: 1; }
  55%  { transform: translate(-50%, 0%) scale(.97) rotate(-1deg); opacity: 1; }
  80%  { transform: translate(-50%, 0%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -60%) scale(.92) rotate(0deg); opacity: 0; }
}

.boton-principal.gomoso { animation: recompensa-goma 550ms cubic-bezier(.36,1.8,.4,1); }
@keyframes recompensa-goma {
  0%   { transform: scale(1, 1); }
  20%  { transform: scale(1.15, .8); }
  45%  { transform: scale(.9, 1.15); }
  65%  { transform: scale(1.05, .95); }
  85%  { transform: scale(.98, 1.02); }
  100% { transform: scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  body.sacudida, .recompensa-flash.jugar, .recompensa-rayo.jugar,
  .recompensa-banner.jugar, .boton-principal.gomoso { animation-duration: 1ms !important; }
}