/* ============================================================
   BARBERFLOW — Map Panel Premium
   Módulo de mapa expansível com animações premium.
   NÃO altera animações de abas, navegação ou transições do Router.
   Importar após map-card.css.
============================================================ */

/* ── Seção raiz ───────────────────────────────────────────── */
.map-panel-section {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* ── Botão controle (MapHandleButton) ──────────────────────── */
.mph-wrapper {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            0;
  width:          100%;
  padding:        6px 1rem 1.65rem;
  background:     transparent;
  border:         none;
  outline:        none;
  position:       relative;
  cursor:         pointer;
  -webkit-tap-highlight-color: transparent;
  user-select:    none;
}

/* Row superior: texto + label GPS */
.mph-row-top {
  display:        flex;
  align-items:    baseline;
  gap:            10px;
  width:          100%;
  justify-content: flex-end;
}

.mph-text {
  position:       absolute;
  right:          1rem;
  bottom:         0;
  font-family:    var(--font, sans-serif);
  font-size:      .78rem;
  font-weight:    700;
  color:          #6B4A32;
  letter-spacing: 0.01em;
  line-height:    1;
  display:        inline-flex;
  overflow:       hidden;
  max-width:      calc(100% - 2rem);
  white-space:    nowrap;
}

/* Caractere individual — animado por MapTextAnimation */
.mta-char {
  display:     inline-block;
  transition:  opacity 60ms linear, transform 60ms linear;
  will-change: opacity, transform;
}
.mta-char.mta-saindo {
  opacity:   0;
  transform: translateY(-4px);
}
.mta-char.mta-oculto {
  opacity:   0;
  transform: translateY(-4px);
  pointer-events: none;
}

.mph-gps-label {
  font-family:    var(--font, sans-serif);
  font-size:      0.85rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--gold, #D4A017);
  line-height:    1;
  flex-shrink:    0;
}

/* Trilho do traço */
.mph-bar-track {
  position:   relative;
  display:    flex;
  align-items: center;
  justify-content: flex-end;
  width:      100%;
  height:     16px;
  margin-top: 3px;
}

/* Hint de fechar — aparece quando o texto dos chars some (mapa aberto) */
.mph-close-hint {
  font-family:  var(--font, sans-serif);
  font-size:    0.72rem;
  color:        var(--text-dim, rgba(42,33,27,.5));
  font-style:   italic;
  opacity:      0;
  pointer-events: none;
  white-space:  nowrap;
  transition:   opacity 240ms ease 200ms;
  flex:         1;
  text-align:   left;
}

/* Só aparece com o mapa aberto */
.mph-wrapper[aria-expanded="true"] .mph-close-hint {
  opacity: 1;
  pointer-events: none;
}

/* Traço animado */
.mph-bar {
  height:        0.3rem;
  background:    linear-gradient(90deg, transparent 0%, #6B4A32 100%);
  border-radius: 3px;
  transition:    width 280ms cubic-bezier(.4, 0, .2, 1),
                 background 200ms ease;
  /* width é controlado por JS: começa em 48px, vai para 100% */
  will-change: width;
}

/* Feedback toque */
.mph-wrapper:active .mph-bar {
  background: linear-gradient(90deg, transparent 0%, #8B5A3C 100%);
}

/* ── Frame amadeirado (MapBorderFrame) ─────────────────────── */
.mpf-frame {
  border-radius: 16px;
  padding:       4px;

  /* textura amadeirada via gradientes sobrepostos */
  background:
    /* veios em diagonal (muito sutis) */
    repeating-linear-gradient(
      105deg,
      transparent              0px,
      transparent              12px,
      rgba(255,255,255,.025)   13px,
      rgba(255,255,255,.025)   14px,
      transparent              15px,
      transparent              28px
    ),
    repeating-linear-gradient(
      82deg,
      transparent              0px,
      transparent              20px,
      rgba(0,0,0,.04)          21px,
      rgba(0,0,0,.04)          22px,
      transparent              23px
    ),
    /* base: gradiente de madeira escura */
    linear-gradient(
      160deg,
      #3a1f0e 0%,
      #2B1B12 40%,
      #321a0b 70%,
      #2a1909 100%
    );

  box-shadow:
    0  2px  0   rgba(255,255,255,.08) inset,  /* brilho superior */
    0 -1px  0   rgba(0,0,0,.35) inset,        /* sombra inferior */
    0  8px 24px rgba(0, 0, 0, .30),           /* sombra externa profunda */
    0  2px  8px rgba(0, 0, 0, .20),           /* sombra close */
    0  0   16px rgba(212, 160, 23, .08);      /* glow dourado sutil */

  /* estado oculto inicial */
  display:     none;
  position:    relative;
  overflow:    hidden;
  will-change: transform;
}

.mpf-frame.mpf-visivel {
  display: block;
}

/* ── Painel do mapa (MapPanel) ─────────────────────────────── */
.mpp-panel {
  overflow: hidden;
  /* height animada pelo JS via style.height */
  transition: height 300ms cubic-bezier(.4, 0, .2, 1);
  will-change: height;
  border-radius: 12px 12px 0 0;
  background: transparent;
}

/* Dentro do frame: map-card sem border-radius próprio */
.mpf-frame .map-card {
  border-radius: 12px 12px 0 0;
  overflow:      hidden;
  margin:        0;
}

/* ── Handle de arraste (MapDragHandle) ─────────────────────── */
.mpd-handle {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  height:          36px;
  cursor:          ns-resize;
  border-radius:   0 0 12px 12px;
  touch-action:    none; /* impede scroll durante drag */
  background:      rgba(43, 27, 18, .35);
  transition:      background var(--ease, .22s ease);
}

.mpd-handle:active,
.mpd-handle.mpd-arrastando {
  background: rgba(43, 27, 18, .55);
}

/* Pill indicador — 3 traços elegantes */
.mpd-pill {
  position: relative;
  display:  flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

.mpd-pill::before,
.mpd-pill::after,
.mpd-pill span {
  content: '';
  display: block;
  height:  2.5px;
  border-radius: 99px;
  background: var(--gold, #D4A017);
  opacity: 0.6;
  transition: width 220ms ease, opacity 220ms ease;
}

/* traço do meio menor — cria efeito escalonado */
.mpd-pill::before { width: 20px; }
.mpd-pill span    { width: 20px; }
.mpd-pill::after  { width: 20px; }

.mpd-handle.mpd-arrastando .mpd-pill::before,
.mpd-handle.mpd-arrastando .mpd-pill span,
.mpd-handle.mpd-arrastando .mpd-pill::after,
.mpd-handle:hover .mpd-pill::before,
.mpd-handle:hover .mpd-pill span,
.mpd-handle:hover .mpd-pill::after {
  opacity: 1;
}

.mpd-handle:hover .mpd-pill::before,
.mpd-handle:hover .mpd-pill::after { width: 24px; }
.mpd-handle:hover .mpd-pill span   { width: 24px; }

/* Hint de arraste — visível apenas no estado semiaberto */
.mpd-hint {
  font-family:  var(--font, sans-serif);
  font-size:    0.62rem;
  letter-spacing: 0.04em;
  color:        rgba(212, 160, 23, .7);
  opacity:      0;
  transition:   opacity 300ms ease 150ms;
  pointer-events: none;
  white-space:  nowrap;
}

.mpf-frame[data-state="semiopen"] .mpd-hint {
  opacity: 1;
}

/* ── Responsividade ────────────────────────────────────────── */
@media (min-width: 640px) {
  .mpf-frame {
    border-radius: 20px;
    padding:       5px;
  }

  .mpf-frame .map-card {
    border-radius: 15px 15px 0 0;
  }

  .mpd-handle {
    border-radius: 0 0 15px 15px;
  }
}

/* ============================================================
   MÓDULO DE ORIENTAÇÃO / BÚSSOLA (MapOrientationModule)
============================================================ */

/* Toolbar injetada dinamicamente dentro de .mpp-panel */
.moc-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         10px 14px;
  background:      var(--card, #fff);
  border-top:      1px solid rgba(43, 27, 18, .08);
  border-radius:   0 0 12px 12px;
}

/* Botão bússola */
.moc-btn {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       7px 16px;
  background:    var(--card2, #F0E4D7);
  border:        1px solid var(--gold-border, rgba(212, 160, 23, .3));
  border-radius: var(--r-full, 9999px);
  font-family:   var(--font, sans-serif);
  font-size:     0.78rem;
  font-weight:   600;
  color:         var(--text, #2A211B);
  cursor:        pointer;
  transition:    background var(--ease, .22s ease),
                 color var(--ease, .22s ease),
                 border-color var(--ease, .22s ease);
  flex-shrink:   0;
  -webkit-tap-highlight-color: transparent;
}

.moc-btn-svg {
  width:       16px;
  height:      16px;
  flex-shrink: 0;
}

/* Estado ativo (bússola ON) */
.moc-btn.ativo {
  background:   var(--gold, #D4A017);
  border-color: var(--gold, #D4A017);
  color:        #2A211B;
}

.moc-btn:active {
  filter: brightness(0.9);
}

.moc-btn-label {
  white-space: nowrap;
}

/* Display do heading: "NE 47°" */
.moc-heading-text {
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.8rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  color:          var(--gold, #D4A017);
  min-width:      54px;
  text-align:     right;
}

/* Fundo escuro para corners ao rotacionar (combina com tiles OSM invertidos) */
.mapa-container {
  background: #111a22;
}

/* Cone de direção — wrapper que gira ao redor do centro do avatar do usuário */
.mapa-heading-cone {
  position:         absolute;
  inset:            0;
  transform-origin: center center;
  opacity:          0;
  /* transition controlada pelo JS para interpolação de caminho mínimo */
  pointer-events:   none;
  z-index:          5;
}

/* Seta triangular dentro do cone — aponta sempre "para cima" (Norte do cone).
   O cone é rotacionado pelo JS; a seta não precisa de rotação própria. */
.mapa-heading-arrow {
  position:      absolute;
  top:           -18px;
  left:          50%;
  transform:     translateX(-50%);
  width:         0;
  height:        0;
  border-left:   8px  solid transparent;
  border-right:  8px  solid transparent;
  border-bottom: 16px solid rgba(212, 160, 23, .92);
  filter:        drop-shadow(0 0 5px rgba(212, 160, 23, .55));
  pointer-events: none;
}


/* ============================================================
   MÓDULO DE ORIENTAÇÃO / BÚSSOLA (MapOrientationModule)
============================================================ */

/* Toolbar injetada dinamicamente dentro de .mpp-panel */
.moc-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         10px 14px;
  background:      var(--card, #fff);
  border-top:      1px solid rgba(43, 27, 18, .08);
  border-radius:   0 0 12px 12px;
}

/* Botão bússola */
.moc-btn {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       7px 16px;
  background:    var(--card2, #F0E4D7);
  border:        1px solid var(--gold-border, rgba(212, 160, 23, .3));
  border-radius: var(--r-full, 9999px);
  font-family:   var(--font, sans-serif);
  font-size:     0.78rem;
  font-weight:   600;
  color:         var(--text, #2A211B);
  cursor:        pointer;
  transition:    background var(--ease, .22s ease),
                 color var(--ease, .22s ease),
                 border-color var(--ease, .22s ease);
  flex-shrink:   0;
  -webkit-tap-highlight-color: transparent;
}

.moc-btn-svg {
  width:       16px;
  height:      16px;
  flex-shrink: 0;
}

/* Estado ativo (bússola ON) */
.moc-btn.ativo {
  background:   var(--gold, #D4A017);
  border-color: var(--gold, #D4A017);
  color:        #2A211B;
}

.moc-btn:active {
  filter: brightness(0.9);
}

.moc-btn-label {
  white-space: nowrap;
}

/* Display do heading: "NE 47°" */
.moc-heading-text {
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.8rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  color:          var(--gold, #D4A017);
  min-width:      54px;
  text-align:     right;
}

/* Fundo escuro previne cantos brancos (tiles OSM invertidos) */
.mapa-container {
  background: #111a22;
}