/* Macromático · Foto Estudio — identidad visual de herramientas internas.
   Estilo flat: sin gradientes ni sombras decorativas. */

:root {
  --verde:    #00DD69;
  --amarillo: #E8DC00;
  --cian:     #35F9EF;
  --rojo:     #FB1A21;
  --negro:    #232323;
  --blanco:   #FFFFFF;
  --gris-borde: #DDDDDD;
  --gris-texto: #6A6A6A;
  /* Acento fijo de la herramienta: verde Macro (color de acción principal). */
  --acento: var(--verde);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--blanco);
  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 ---------- */
.cabecera { background: var(--negro); color: var(--blanco); }
.cabecera-contenido {
  max-width: 980px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.logo { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 22px; }
.logo-sep { font-weight: 500; opacity: .6; padding: 0 2px; }
.cabecera-nota { font-size: 13px; opacity: .65; }
.franjas { display: flex; height: 6px; }
.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: 980px; margin: 0 auto; padding: 8px 24px 48px; }

.bloque { margin-top: 36px; }
.bloque h2 {
  font-size: 18px; font-weight: 700; margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.paso {
  background: var(--negro); color: var(--acento);
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.texto-tenue { color: var(--gris-texto); font-size: 15px; }
.opcion-nota { color: var(--gris-texto); font-size: 13px; }

/* ---------- Campo nombre de proyecto / tags ---------- */
.campo-proyecto { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.campo-proyecto label, .campo-titulo {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 15px;
}
.campo-proyecto input, .campo-destino input {
  border: 2px solid var(--gris-borde); padding: 10px 12px;
  font-family: "DM Sans", sans-serif; font-size: 15px; color: var(--negro);
  max-width: 420px;
}
.campo-proyecto input:focus, .campo-destino input:focus { outline: none; border-color: var(--acento); }

/* ---------- Zona de arrastre ---------- */
.zona-arrastre { border: 2px dashed var(--gris-borde); padding: 36px 24px; text-align: center; }
.zona-arrastre.encima { border-color: var(--acento); border-style: solid; }
.zona-titulo { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 18px; margin: 0; }
.zona-sub { color: var(--gris-texto); margin: 8px 0 14px; }
.zona-botones { display: flex; gap: 12px; justify-content: center; }

.boton-secundario {
  background: var(--blanco); color: var(--negro); border: 2px solid var(--negro);
  padding: 9px 20px; font-size: 15px; font-weight: 600; 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;
}

.lista-archivos { margin-top: 14px; }
.contador { font-weight: 700; }
.lista-encabezado { display: flex; align-items: baseline; gap: 16px; }
.hero-ayuda { margin: 8px 0 12px; }

/* ---------- Rejilla de miniaturas ---------- */
.rejilla-fotos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
}
.foto-card { border: 1px solid var(--gris-borde); }
.foto-card.es-hero { border: 2px solid var(--negro); }
.foto-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.foto-acciones { display: flex; border-top: 1px solid var(--gris-borde); }
.foto-nombre {
  font-size: 11.5px; color: var(--gris-texto); padding: 4px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-btn, .crop-btn {
  flex: 1; border: none; background: var(--blanco); color: var(--gris-texto);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 12px;
  padding: 7px 4px; cursor: pointer;
}
.crop-btn { border-left: 1px solid var(--gris-borde); }
.hero-btn:hover, .crop-btn:hover { background: #F2F2F2; }
/* Estados activos sobre negro: el acento queda siempre sobre #232323. */
.hero-btn.activa { background: var(--negro); color: var(--acento); }
.crop-btn.activa { background: var(--negro); color: var(--acento); }

/* ---------- Opciones y destino ---------- */
.opciones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.opcion { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.opcion input { width: 18px; height: 18px; accent-color: var(--negro); }
.nota-error { color: var(--rojo); font-size: 13px; }

.campo-marca { margin-bottom: 18px; }
.campo-ratio { margin-bottom: 18px; }
.campo-tags-fila { margin-bottom: 20px; }

.campo-destino { display: flex; flex-direction: column; gap: 8px; }
.destino-carpeta { margin: 0 0 12px; font-weight: 600; color: var(--negro); }

/* ---------- Zona de subida (tras revisar) ---------- */
.subir-zona {
  margin-top: 24px; padding: 18px 20px;
  border: 2px solid var(--gris-borde); border-left: 4px solid var(--acento);
}
.subir-zona.subido { border-color: var(--acento); }
.subir-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.selector-carpeta { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-carpeta {
  border: 2px solid var(--gris-borde); background: var(--blanco); color: var(--negro);
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 14px;
  padding: 8px 16px; cursor: pointer;
}
.chip-carpeta:hover { border-color: var(--negro); }
.chip-carpeta.activa { background: var(--negro); border-color: var(--negro); color: var(--acento); }

/* ---------- Botón principal ---------- */
.boton-principal {
  background: var(--acento); color: var(--negro); border: none;
  padding: 14px 36px; font-size: 17px; font-weight: 700; cursor: pointer;
}
.boton-principal:disabled { background: var(--gris-borde); color: var(--gris-texto); cursor: not-allowed; }

/* ---------- Progreso ---------- */
.progreso { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.progreso-pista { flex: 1; height: 14px; background: var(--negro); }
.progreso-relleno { height: 100%; width: 0; background: var(--acento); transition: width .25s; }
.progreso-texto { font-size: 14px; font-weight: 600; min-width: 90px; }

/* ---------- Resumen ---------- */
.rejilla-resumen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 16px;
}
.tarjeta-resultado { border: 1px solid var(--gris-borde); }
.tarjeta-resultado img { width: 100%; display: block; }
.tarjeta-resultado img.ampliable { cursor: zoom-in; }
.tarjeta-resultado .info { padding: 10px 12px; }
.tarjeta-resultado .nombre { font-size: 12.5px; word-break: break-all; }
.tarjeta-resultado .etiqueta {
  display: inline-block; background: var(--negro); color: var(--acento);
  font-size: 11.5px; font-weight: 700; padding: 2px 8px; margin-bottom: 6px;
}
.tarjeta-resultado .etiqueta-hero { margin-left: 6px; }
.fila-url { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.fila-url input {
  flex: 1; font-size: 11.5px; padding: 4px 6px;
  border: 1px solid var(--gris-borde); 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: 1px solid var(--negro); background: var(--blanco); color: var(--negro);
  font-size: 12px; font-weight: 600; padding: 4px 10px; cursor: pointer;
}
.btn-copiar:hover { background: var(--negro); color: var(--blanco); }

/* ---------- Errores ---------- */
.aviso-error {
  border: 2px solid var(--rojo); color: var(--rojo);
  padding: 12px 16px; margin-top: 24px; font-weight: 500;
}

/* ---------- Modal de encuadre 1:1 ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(35, 35, 35, .78);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50;
}
.modal-caja {
  background: var(--blanco); padding: 22px 24px; max-width: 92vw; max-height: 92vh; overflow: auto;
}
.modal-caja h3 { font-size: 18px; font-weight: 700; 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: 80vw; max-height: 58vh; }
.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 ---------- */
#lightbox { cursor: zoom-out; }
#lightbox img { max-width: 92vw; max-height: 92vh; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }

/* ---------- Pie ---------- */
.pie {
  border-top: 1px solid var(--gris-borde);
  max-width: 980px; margin: 0 auto; padding: 18px 24px 28px;
  color: var(--gris-texto); font-size: 13px;
}
.pie code { font-size: 12px; }

@media (max-width: 720px) {
  .rejilla-fotos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .destino { flex-direction: column; gap: 16px; }
}