/*
 * EL RECORTADOR. Ver assets/js/recortar.js.
 *
 * Velo negro y la caja centrada, como pidio el dueno: «otro popup que tenga un
 * overlay negro al fondo para centrar la informacion».
 */

.lt-recorte {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
  /* Negro de verdad, no un gris: lo que importa es la foto de dentro y todo lo
     demas tiene que desaparecer. */
  background: rgb(4 8 15 / .88);
}

.lt-recorte__caja {
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgb(0 0 0 / .45);
}

.lt-recorte__titulo {
  margin: 0 0 10px;
  font-family: var(--fuente-titulo, inherit);
  font-size: 1.05rem;
  font-weight: 700;
  color: #0b1220;
}

.lt-recorte__aviso {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid #b0201a;
  border-radius: 6px;
  background: #fbeae8;
  color: #5c1310;
  font-size: .86rem;
  line-height: 1.45;
}

.lt-recorte__aviso[hidden] { display: none; }

/*
 * El marco es lo que se va a ver publicado. Fondo a cuadros para que se
 * entienda que lo de fuera se pierde, y `touch-action: none` para que arrastrar
 * dentro NO haga scroll de la pagina en el telefono —sin eso, mover la foto
 * mueve la pantalla y no se puede encuadrar nada.
 */
.lt-recorte__marco {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #eef1f5;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.lt-recorte__marco:active { cursor: grabbing; }

.lt-recorte__lienzo {
  display: block;
  width: 100%;
  height: 100%;
}

.lt-recorte__zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  font-size: .85rem;
  color: #6b7280;
}

.lt-recorte__zoom input {
  flex: 1 1 auto;
  min-height: 32px;
}

.lt-recorte__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.lt-recorte__botones button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
}

.lt-recorte__usar {
  border: 0;
  background: var(--marca, #1b4fd1);
  color: #fff;
}

.lt-recorte__usar:hover,
.lt-recorte__usar:focus-visible { background: var(--marca-oscuro, #16409f); }

.lt-recorte__cancelar {
  border: 1px solid #d9dee6;
  background: #fff;
  color: #6b7280;
}

.lt-recorte__cancelar:hover,
.lt-recorte__cancelar:focus-visible { border-color: #9aa4b2; color: #0b1220; }

.lt-recorte__usar:focus-visible,
.lt-recorte__cancelar:focus-visible {
  outline: 2px solid var(--marca, #1b4fd1);
  outline-offset: 2px;
}

/* Con la ventana abierta, la pagina de detras no se mueve. */
body.lt-recorte-abierto { overflow: hidden; }