/* recorte.css — la pantalla de acomodar la foto de perfil. */

.veloRec{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.88)}
.hojaRec{position:fixed;z-index:45;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(360px,calc(100vw - 28px));box-sizing:border-box;
  background:var(--panel);border:1px solid var(--linea);border-radius:18px;
  padding:18px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.hojaRec h4{margin:0 0 12px;font-size:16px;text-align:center}

/* El marco es cuadrado siempre: aspect-ratio en vez de alto fijo, para que en
   pantallas angostas se achique solo sin dejar de ser cuadrado. */
.recMarco{position:relative;width:100%;aspect-ratio:1;overflow:hidden;
  border-radius:14px;background:#000;cursor:grab;
  touch-action:none;   /* los gestos los maneja el recorte, no el navegador */
  user-select:none}
.recMarco:active{cursor:grabbing}
.recImg{position:absolute;max-width:none;display:block;pointer-events:none;
  -webkit-user-drag:none}

/* El círculo. Es lo único que se va a ver después, así que se muestra desde
   ya: lo de afuera se oscurece en vez de esconderse, para poder apuntar con lo
   que queda alrededor. No atrapa toques —el arrastre pasa por debajo—. */
.recVelo{position:absolute;inset:0;pointer-events:none;
  background:rgba(0,0,0,.55);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
  mask:radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%)}
.recVelo::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.85)}

.recAy{margin:10px 0 0;font-size:12px;color:var(--gris);text-align:center}

.recZoom{display:flex;align-items:center;gap:10px;margin-top:12px}
.recZoom span{font-size:11px;color:var(--gris);flex:none}
.recBarra{flex:1;accent-color:var(--acento);cursor:pointer}

.recPie{display:flex;gap:10px;margin-top:16px}
.recPie button{flex:1;border-radius:99px;padding:11px 12px;font-weight:700;
  font-size:13px;cursor:pointer;border:1px solid transparent}
.recNo{background:transparent;border-color:var(--linea);color:var(--gris)}
.recNo:hover{border-color:var(--gris);color:var(--tinta)}
.recSi{background:var(--acento);color:#04151a}
.recSi:hover{background:#7de3e7}