/* ===================================================
   MG Tools · Recortar imagen
   Archivo exclusivo de la herramienta
   =================================================== */

/* ===================================================
   Base UI
   =================================================== */

.mg-tool-wrap { padding-top: 90px; } /* navbar fixed */
.mg-card { border-radius: 18px; }
.mg-btn { border-radius: 14px; }

.mg-soft { color: rgba(0,0,0,.6); }

.mg-help {
  font-size: .92rem;
  line-height: 1.25rem;
}

/* ===================================================
   Header tool (pill + volver)
   =================================================== */

.mg-tool-topbar{
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.mg-back-btn{
  margin-left: auto;
  border-radius: 999px;
  white-space: nowrap;
}

/* Desktop: botón volver discreto */
@media (min-width: 992px){

  /* DARK */
  html.mg-theme-dark .mg-back-btn.mg-back-btn--soft{
    border-color: rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.7) !important;
    background: transparent !important;
  }

  html.mg-theme-dark .mg-back-btn.mg-back-btn--soft:hover{
    border-color: rgba(255,255,255,.22) !important;
    color: #fff !important;
    background: rgba(255,255,255,.06) !important;
  }

  /* LIGHT */
  html:not(.mg-theme-dark) .mg-back-btn.mg-back-btn--soft{
    border-color: rgba(0,0,0,.18) !important;
    color: rgba(0,0,0,.75) !important;
    background: transparent !important;
  }

  html:not(.mg-theme-dark) .mg-back-btn.mg-back-btn--soft:hover{
    border-color: rgba(0,0,0,.32) !important;
    color: rgba(0,0,0,.95) !important;
    background: rgba(0,0,0,.04) !important;
  }
}

/* ===================================================
   Área de recorte
   =================================================== */

.mg-crop-stage{
  position: relative;
  width: 100%;
  min-height: 300px;
  max-height: 420px;
  margin-top: 1rem;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.04);
  display: grid;
  place-items: center;
}

@media (min-width: 992px){
  .mg-crop-stage{
    min-height: 360px;
    max-height: 460px;
    margin-top: 1.25rem;
  }
}

.mg-crop-stage img{
  max-width: 100%;
  display: block;
}

.mg-crop-clickable{
  cursor: pointer;
}

@media (hover: hover){
  .mg-crop-clickable:hover{
    box-shadow: 0 0 0 1px rgba(255,255,255,.15);
  }
}

.mg-seg{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;         
}

@media (min-width: 992px){
  .mg-seg{
    gap: .45rem;      
  }
}


/* ===================================================
   Estado vacío · borde punteado MG
   =================================================== */

.mg-crop-stage:has(#mgEmptyState){
  position: relative;
}

.mg-crop-stage:has(#mgEmptyState)::after{
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px dashed rgba(240,173,91,.75);
  border-radius: 14px;
  pointer-events: none;
}

html.mg-theme-dark
.mg-crop-stage:has(#mgEmptyState)::after{
  border-color: rgba(255,160,60,.9);
}

/* ===================================================
   Vista previa
   =================================================== */

.mg-preview{
  width: 100%;
  height: 120px;
  border-radius: 14px;
  background: rgba(0,0,0,.04);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.mg-preview .preview-box{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 575.98px){
  .mg-preview-block{
    display: none !important;
  }
}

/* ===================================================
   Mobile · Botones imagen
   =================================================== */

@media (max-width: 575.98px){
  .mg-tool-wrap .d-flex.flex-wrap > .btn,
  .mg-tool-wrap .d-flex.flex-wrap > label.btn{
    flex: 1 1 calc(50% - .5rem);
    text-align: center;
  }

  #mgClearBtn{
    margin-left: 0 !important;
  }
}

/* ===================================================
   DARK MODE (MG)
   =================================================== */

html.mg-theme-dark .mg-tool-wrap{
  color: var(--mg-text);
}

html.mg-theme-dark .mg-tool-wrap p,
html.mg-theme-dark .mg-tool-wrap .text-muted,
html.mg-theme-dark .mg-soft,
html.mg-theme-dark .mg-help{
  color: rgba(255,255,255,.72) !important;
}

html.mg-theme-dark .mg-crop-stage,
html.mg-theme-dark .mg-preview{
  background: rgba(255,255,255,.06) !important;
}

/* ===================================================
   Preset REDONDO · UN SOLO CÍRCULO REAL
   =================================================== */

.mg-round-active .cropper-view-box,
.mg-round-active .cropper-face{
  border-radius: 50%;
}

/* sin grilla ni puntos */
.mg-round-active .cropper-dashed,
.mg-round-active .cropper-line,
.mg-round-active .cropper-point{
  display: none !important;
}

/* apagamos overlay original */
.mg-round-active .cropper-modal{
  opacity: 0 !important;
}

/* único borde visible */
.mg-round-active .cropper-view-box{
  outline: 3px solid rgba(255,255,255,.45) !important;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.30);
}

.mg-round-active .cropper-face{
  background: transparent !important;
}

#mgRotateLeft,
#mgRotateRight {
  line-height: 1;
  padding: .35rem .55rem;
}