/* ===== Polaris — Image Editor (overlay) ===== */

:root{
  --ed-bg: rgba(8,12,18,.86);
  --ed-panel: #0f1622;
  --ed-border: rgba(0,255,248,.25);
  --ed-text: #eaf6ff;
  --ed-muted: #8aa0b3;
  --ed-accent: #00fff8;
  --ed-warn: #ffb86b;
  --ed-surface: #0b121b;

  /* móviles: deja un colchón visible sin pegar a bordes */
  --pe-pad: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
            max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.pe-overlay{
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  background:
    radial-gradient(60rem 60rem at 12% -8%, rgba(0,255,248,.06), transparent 60%),
    var(--ed-bg);
  animation: peFade .15s ease;
  backdrop-filter: blur(2px);
  padding: var(--pe-pad);
  color-scheme: dark;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@keyframes peFade{ from{ opacity:0 } to{ opacity:1 } }

.pe-modal{
  width: min(96vw, 1100px);
  height: min(92vh, 720px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--ed-border);
  border-radius: 16px;
  overflow: hidden; /* evita scroll de todo el modal */
  background: linear-gradient(180deg, rgba(14,20,30,.9), rgba(10,15,20,.96));
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  color: var(--ed-text);
  touch-action: manipulation;
}

.pe-head,.pe-foot{
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.pe-foot{
  border-top: 1px solid rgba(255,255,255,.06); border-bottom: 0;
  position: sticky; bottom: 0; z-index: 2;
  backdrop-filter: blur(4px);
}

.pe-title{ font-weight: 800; letter-spacing:.2px; font-size:1rem; opacity:.95; }
.pe-spacer{ flex:1 1 auto; }

/* ===== Botones ===== */
.pe-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width: 36px; height: 36px; padding: 0 12px;
  border-radius: 12px; border: 1px solid var(--ed-border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  color: var(--ed-text);
  cursor: pointer; user-select: none;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.pe-btn:hover{ box-shadow: 0 8px 20px rgba(0,255,248,.22); border-color: var(--ed-accent); }
.pe-btn:active{ transform: translateY(1px); }
.pe-btn[disabled]{ opacity:.6; pointer-events:none; }

.pe-btn.primary{
  background: linear-gradient(180deg, rgba(0,255,248,.22), rgba(0,255,248,.12));
  border-color: var(--ed-accent);
}
.pe-btn.warn{ border-color: var(--ed-warn); }

.pe-btn--ghost{ background: transparent; border-color: rgba(255,255,255,.08); }
.pe-btn--icon{ width: 36px; min-width: 36px; padding: 0; border-radius: 10px; }

/* Iconos (Font Awesome embebido via <use>) */
.pe-ico{ width: 18px; height: 18px; display:inline-block; flex:0 0 18px; }
.pe-btn .pe-ico{ margin-right: 6px; }
.pe-btn--icon .pe-ico{ margin-right:0; }
.pe-ico path, .pe-ico use{ fill: currentColor; }

/* ===== Cuerpo ===== */
.pe-body{
  display:grid; grid-template-columns: 1fr 320px; gap:0; min-height:0;
  background:#0a111c;
  /* clave para que sólo el panel scrollee */
  overflow: hidden;
}

/* Lienzo */
.pe-canvas-wrap{
  position:relative; display:grid; place-items:center; min-width:0; min-height:0;
  background:#0a111c;
  border-right: 1px solid rgba(255,255,255,.06);
}
.pe-canvas{ max-width:100%; max-height:100%; background:#0a111c; outline:none; }
.pe-canvas.pe-crop{ cursor: crosshair; }

/* Leyenda recorte y badge */
.pe-legend{
  position:absolute; left:10px; bottom:10px;
  font-size:12px; color:var(--ed-muted);
  background: rgba(0,0,0,.45); padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08); pointer-events:none;
}
.pe-crop-size-badge{
  position:absolute; left:0; top:0; z-index:10;
  padding:6px 10px; border-radius:10px;
  font-size:12px; line-height:1; font-weight:700;
  color: var(--ed-text);
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
  pointer-events: none;
  transform: translate(8px,8px);
  user-select: none;
}

/* ===== Herramientas ===== */
.pe-tools{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  display:grid; grid-template-rows: auto auto 1fr; gap:12px;
  padding-bottom: 6px;
}
.pe-tool-group{
  padding:12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  border-radius: 0;
}
.pe-tool-title{ font-weight:800; font-size:.92rem; margin-bottom:8px; color:var(--ed-text); }
.pe-grid-btns{ display:grid; grid-template-columns: repeat(2,1fr); gap:8px; }
.pe-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pe-help{ padding: 8px 10px; color:var(--ed-muted); font-size:12px; }
.pe-hide{ display:none !important; }

.pe-kbd{
  display:inline-block; padding:2px 6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px; background: rgba(255,255,255,.04);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--ed-text);
}

/* Inputs */
.pe-size-grid{ margin-top:8px; display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.pe-form{ display:block; }
.pe-form-row{ margin-top: 10px; }
.pe-label{ display:block; font-size:12px; opacity:.85; margin-bottom:6px; }
.pe-input{
  width:100%; padding:10px 12px; border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color: var(--ed-text);
  outline:none; font: inherit;
}
.pe-input:focus{ border-color: var(--ed-accent); box-shadow: 0 0 0 2px rgba(0,255,248,.15); }
.pe-input::-webkit-outer-spin-button,
.pe-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* ===== Select (Formato)  — tematizado ===== */
.pe-modal, .pe-modal *{ color-scheme: dark; }

.pe-select{ position: relative; }
.pe-select select{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 42px;
  padding: 10px 42px 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  color: var(--ed-text);
  outline: none;
  font: inherit;
  letter-spacing: .2px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  accent-color: var(--ed-accent);
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 9l6 6 6-6' fill='none' stroke='%2300fff8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}
.pe-select select:hover{ border-color: var(--ed-accent); box-shadow: 0 0 0 2px rgba(0,255,248,.10); }
.pe-select select:focus{ border-color: var(--ed-accent); box-shadow: 0 0 0 2px rgba(0,255,248,.15); }
.pe-select select:active{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); }
.pe-select select option{ background-color: var(--ed-surface); color: var(--ed-text); }
.pe-select select option:disabled{ color: #6e8294; }

/* ===== Responsive (móvil) ===== */
@media (max-width: 980px){
  .pe-body{ grid-template-columns: 1fr 300px; }
}
@media (max-width: 820px){
  /* modal fija con acolchado; nada se pega a bordes */
  .pe-modal{ width: 100%; height: 100%; border-radius: 16px; }

  .pe-body{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto; /* canvas arriba fijo, tools abajo */
    min-height: 0;
    overflow: hidden; /* importantísimo: bloquea scroll global */
  }

  /* Canvas alto cómodo */
  .pe-canvas-wrap{
    min-height: 52dvh;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  /* === BOTTOM SHEET con SCROLL VERTICAL (única zona que scrollea) === */
  .pe-tools{
    position: relative;
    display: block;            /* grupos apilados en columna */
    max-height: 42dvh;         /* altura del sheet */
    overflow-y: auto;          /* <— sólo aquí hay scroll */
    overflow-x: hidden;
    padding: 12px 12px 16px;
    border-top: 1px solid rgba(255,255,255,.06);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background:
      radial-gradient(60rem 40rem at -10% -60%, rgba(0,255,248,.06), transparent 70%),
      linear-gradient(180deg, rgba(14,20,30,.92), rgba(10,15,20,.96));
  }

  .pe-tool-group{
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    min-width: 0; /* evita crecimientos horizontales */
    margin-bottom: 10px;
  }

  /* barra “handle” superior del sheet */
  .pe-handle{
    position: sticky; top: 6px; left: 50%; transform: translateX(-50%);
    width: 48px; height: 4px; border-radius: 4px;
    background: rgba(255,255,255,.18);
    margin: 6px auto 8px;
    pointer-events: none;
  }

  .pe-btn{ height: 44px; border-radius: 14px; }
  .pe-select select{ height: 44px; }
  .pe-crop-size-badge{ font-size:13px; padding:7px 12px; }
}

/* ===== CropperJS – look & touch targets ===== */
.cropper-modal { opacity: .18 !important; }
.cropper-view-box { outline: 2px solid rgba(0,255,248,.95) !important; }
.cropper-line, .cropper-point { background-color: rgba(0,255,248,.95) !important; }
.cropper-point{ width:10px; height:10px; opacity:.95; }
@media (pointer:coarse){ .cropper-point{ width:16px; height:16px; } }