/* Editor de foto VidalRun (assets/js/foto-editor.js) fora do painel: mesmas regras do admin.css,
   com as cores escritas direto. Usado na ferramenta Stories da sua prova. */
.fe, .fe * { box-sizing: border-box; }
.fe { font-family: 'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; }
.fe button { font-family: inherit; }
.fe-aberto, .fe-aberto body { overflow: hidden; }
.fe { position: fixed; inset: 0; z-index: 80; background: #06103D; color: #fff; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(120px, 1fr) auto auto; height: 100vh; height: 100dvh; }
.fe__topo { padding: 10px clamp(14px, 3vw, 28px); }
.fe__topo b { font-family: 'Archivo', 'Arial Narrow', sans-serif; font-stretch: 70%; font-size: 22px; margin-right: 10px; }
.fe__info { color: #B9C6E6; font-size: 14px; }
.fe__dica { color: #B9C6E6; font-size: 13px; margin-top: 2px; }
.fe__palco { position: relative; overflow: hidden; touch-action: none; cursor: grab; background: #020718; outline-offset: -3px; }
.fe__palco:active { cursor: grabbing; }
.fe__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; pointer-events: none; }
.fe__quadro { position: absolute; border: 2px solid #F2EC1D; box-shadow: 0 0 0 9999px rgba(2, 7, 24, .72); pointer-events: none; }
.fe__quadro::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px) 0 33.33% / 100% 33.33%, linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px) 33.33% 0 / 33.33% 100%; }
.fe__alca { display: none; position: absolute; width: 28px; height: 28px; pointer-events: auto; z-index: 1; touch-action: none; }
.fe__alca::before { content: ""; position: absolute; inset: 9px; background: #F2EC1D; border-radius: 2px; box-shadow: 0 0 0 2px #06103D; }
.fe__quadro--livre .fe__alca { display: block; }
.fe__alca--nw { left: -14px; top: -14px; cursor: nwse-resize; } .fe__alca--se { right: -14px; bottom: -14px; cursor: nwse-resize; }
.fe__alca--ne { right: -14px; top: -14px; cursor: nesw-resize; } .fe__alca--sw { left: -14px; bottom: -14px; cursor: nesw-resize; }
.fe__alca--n { left: calc(50% - 14px); top: -14px; cursor: ns-resize; } .fe__alca--s { left: calc(50% - 14px); bottom: -14px; cursor: ns-resize; }
.fe__alca--w { left: -14px; top: calc(50% - 14px); cursor: ew-resize; } .fe__alca--e { right: -14px; top: calc(50% - 14px); cursor: ew-resize; }
.fe__alca--n::before, .fe__alca--s::before { inset: 11px 5px; } .fe__alca--e::before, .fe__alca--w::before { inset: 5px 11px; }
.fe__painel { padding: 10px clamp(14px, 3vw, 28px); display: grid; gap: 10px; align-content: start; max-height: 40vh; max-height: 40dvh; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid rgba(255,255,255,.12); }
.fe__abas { display: flex; gap: 6px; }
.fe__abas button { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: 14px; cursor: pointer; }
.fe__abas button[aria-selected="true"] { background: #fff; color: #06103D; border-color: #fff; }
.fe__grupo { display: grid; gap: 10px; }
.fe__formatos { display: flex; flex-wrap: wrap; gap: 6px; }
.fe__chip { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 6px; padding: 8px 12px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px; white-space: nowrap; flex: none; }
.fe__chip[aria-pressed="true"] { background: #F2EC1D; color: #06103D; border-color: #F2EC1D; }
.fe__faixa { display: grid; grid-template-columns: 92px 1fr 48px; align-items: center; gap: 10px; font-size: 14px; }
.fe__faixa input { width: 100%; accent-color: #F2EC1D; min-height: 32px; }
.fe__faixa output { text-align: right; color: #B9C6E6; font-variant-numeric: tabular-nums; }
.fe__botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.fe__btn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 9px 14px; font-weight: 700; font-size: 14px; cursor: pointer; min-height: 44px; }
.fe__btn:hover { border-color: #fff; }
.fe__btn--ok { background: #F2EC1D; color: #06103D; border-color: #F2EC1D; padding-inline: 20px; }
.fe__btn--link { border-color: transparent; text-decoration: underline; padding-inline: 4px; color: #B9C6E6; }
/* Barra de ações sempre visível, embaixo de tudo */
.fe__acoes { display: flex; gap: 8px; align-items: center; padding: 10px clamp(14px, 3vw, 28px) max(10px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.16); background: #040B2E; }
.fe__esp { flex: 1; }
@media (max-width: 700px) {
  /* Celular: formatos numa linha que desliza; botões de girar/espelhar/centralizar dividem a linha */
  .fe__formatos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * clamp(14px, 3vw, 28px)); padding-inline: clamp(14px, 3vw, 28px); }
  .fe__formatos::-webkit-scrollbar { display: none; }
  .fe__botoes { display: grid; grid-template-columns: repeat(3, 1fr); }
  .fe__botoes .fe__btn { padding-inline: 6px; }
  .fe__painel { gap: 8px; padding-block: 8px; }
}
@media (min-width: 960px) {
  .fe { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .fe__topo { grid-column: 1 / -1; }
  .fe__palco { grid-row: 2 / 4; grid-column: 1; }
  .fe__painel { grid-row: 2; grid-column: 2; }
  .fe__acoes { grid-row: 3; grid-column: 2; }
  .fe__painel { max-height: none; border-top: 0; border-left: 1px solid rgba(255,255,255,.12); }
  .fe__acoes { border-left: 1px solid rgba(255,255,255,.12); display: grid; grid-template-columns: 1fr 1fr; }
  .fe__acoes [data-acao="restaurar"] { grid-column: 1 / -1; justify-self: start; }
  .fe__esp { display: none; }
}
@media (max-width: 520px) { .fe__dica { display: none; } .fe__topo b { font-size: 19px; } .fe__info { font-size: 13px; } .fe__faixa { grid-template-columns: 78px 1fr 44px; } }
/* Editor: camadas de temperatura e vinheta (prévia) e filtros prontos */
.fe__camada { position: absolute; inset: 0; pointer-events: none; }
.fe__camada--temp { mix-blend-mode: soft-light; }
.fe__filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.fe__filtro { background: transparent; border: 2px solid transparent; border-radius: 10px; padding: 4px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; display: grid; gap: 4px; justify-items: center; }
.fe__filtro[aria-pressed="true"] { border-color: #F2EC1D; }
.fe__fmini { position: relative; display: block; width: 64px; height: 64px; border-radius: 6px; background: #1b2550 center / cover no-repeat; overflow: hidden; }
.fe__fmini i { position: absolute; inset: 0; }
.fe__fmini-t { mix-blend-mode: soft-light; }
@media (max-width: 700px) {
  .fe__filtros { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * clamp(14px, 3vw, 28px)); padding-inline: clamp(14px, 3vw, 28px); }
  .fe__filtros::-webkit-scrollbar { display: none; }
  .fe__filtro { flex: none; }
}