/* ==========================================================================
   medir-dnp.css
   Estilos específicos da tela "Medir DNP".
   Depende das variáveis e classes já definidas em style.css
   (--bg-dark, --blue, --blue-2, --accent, --line, --text, --heading,
   --shadow, --shadow-lg, --transition, .container, .btn, .btn-outline,
   .section-label, .check-list, .section-heading). Carregar DEPOIS de style.css.
   ========================================================================== */

:root {
  /* únicas cores novas introduzidas por esta tela — mantidas ao mínimo
     e harmonizadas com a paleta azul/dourado já existente */
  --measure-success: #34d399;
  --measure-success-dim: rgba(52, 211, 153, .15);
  --measure-error: #ff6161;
  --measure-error-dim: rgba(255, 97, 97, .1);
}

/* --------------------------------------------------------------------
   Header simplificado (sem navegação) — página standalone acessada por URL
-------------------------------------------------------------------- */
.measure-topbar {
  /* Header claro (opção A): degradê definido em style.css (--header-bg) */
  background: var(--header-bg);
  border-bottom: 1px solid #d3deee;
  box-shadow: 0 6px 24px rgba(10, 20, 40, .18);
  padding-top: env(safe-area-inset-top, 0px);
}
.measure-topbar-inner {
  display: flex;
  align-items: center;
  min-height: 72px;
}

.measure-section {
  padding: 60px 0 calc(120px + env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.measure-shell {
  max-width: 620px;
  margin: 0 auto;
}

.measure-eyebrow {
  margin: 0 0 12px;
}

.measure-shell h1 {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--heading);
  margin: 0 0 18px;
}

.measure-shell p {
  color: rgba(233, 240, 255, .82);
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0 0 20px;
}

/* --------------------------------------------------------------------
   Card base (reaproveita a linguagem visual do .product-card)
-------------------------------------------------------------------- */
.measure-card {
  background: linear-gradient(135deg, rgba(50,65,100,.55) 0%, rgba(15,25,50,.85) 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 36px;
}

@media (max-width: 600px) {
  .measure-card { padding: 24px; border-radius: 18px; }
}

.measure-status {
  margin-top: 14px;
  font-size: .9rem;
  color: rgba(255,255,255,.55);
  text-align: center;
  min-height: 1.3em;
}

.measure-error-box {
  background: var(--measure-error-dim);
  border: 1px solid rgba(255,97,97,.35);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: .9rem;
  color: #ffd4d4;
  margin-top: 16px;
}

.measure-btn-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.measure-btn-row .btn,
.measure-btn-row .btn-outline {
  flex: 1;
}

/* Um botão por linha (tela da câmera) — ação principal em cima */
.measure-btn-row-stacked {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

/* Aparência clara de desabilitado — sem isto, o botão "Capturar agora"
   mantinha a mesma cor viva de sempre mesmo com o atributo disabled,
   parecendo clicável quando não estava. */
#btn-capture[disabled] {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.35);
  box-shadow: none;
  cursor: not-allowed;
}
#btn-capture[disabled]:hover {
  transform: none;
  box-shadow: none;
}
#btn-capture:not([disabled]) {
  background: linear-gradient(135deg, #3f7cff 0%, #2f5ccc 100%);
  color: #fff;
}

.measure-hidden { display: none !important; }

/* --------------------------------------------------------------------
   Manual ilustrado (antes de abrir a câmera)
-------------------------------------------------------------------- */
.measure-manual-illustrations {
  display: flex;
  gap: 16px;
  margin: 8px 0 24px;
}
.measure-manual-illo {
  flex: 1;
  text-align: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px 12px;
}
.measure-manual-illo svg {
  width: 100%;
  max-width: 150px;
  height: auto;
  color: rgba(255,255,255,.72);
}
.measure-manual-illo .label {
  margin-top: 8px;
  font-size: .8rem;
  font-weight: 700;
}
.measure-manual-illo.is-good {
  border-color: rgba(52, 211, 153, .35);
}
.measure-manual-illo.is-good .label { color: var(--measure-success); }
.measure-manual-illo.is-bad {
  border-color: rgba(255, 97, 97, .3);
}
.measure-manual-illo.is-bad .label { color: var(--measure-error); }

@media (max-width: 380px) {
  .measure-manual-illustrations { gap: 10px; }
  .measure-manual-illo { padding: 10px 6px 10px; }
}

/* Pequenas animações em loop — deixam a ilustração mais "viva" sem
   distrair; respeitam prefers-reduced-motion (ver abaixo) */
@keyframes manual-illo-pulse-anim {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes manual-illo-ring-anim {
  0% { r: 15; opacity: .6; }
  100% { r: 26; opacity: 0; }
}
@keyframes manual-illo-wobble-anim {
  0%, 100% { transform: rotate(-22deg); }
  50% { transform: rotate(-27deg); }
}
@keyframes manual-illo-float-anim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.measure-manual-illo .manual-illo-pulse {
  transform-origin: 150px 112px;
  animation: manual-illo-pulse-anim 1.8s ease-in-out infinite;
}
.measure-manual-illo .manual-illo-ring {
  transform-origin: 150px 112px;
  animation: manual-illo-ring-anim 1.8s ease-out infinite;
}
.measure-manual-illo.is-bad .manual-illo-pulse {
  animation-duration: 1.4s;
}
.measure-manual-illo .manual-illo-wobble {
  transform-origin: 100px 128px;
  animation: manual-illo-wobble-anim 1.6s ease-in-out infinite;
}
.measure-manual-illo .manual-illo-float {
  animation: manual-illo-float-anim 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .measure-manual-illo .manual-illo-pulse,
  .measure-manual-illo .manual-illo-ring,
  .measure-manual-illo .manual-illo-wobble,
  .measure-manual-illo .manual-illo-float {
    animation: none;
  }
}

/* --------------------------------------------------------------------
   Tela da câmera
-------------------------------------------------------------------- */
.measure-cam-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 75vh;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}

/* Celular deitado (largura maior que altura, tela baixa) —
   evita que a moldura 3:4 estoure a viewport verticalmente */
@media (max-height: 480px) and (orientation: landscape) {
  .measure-cam-wrap {
    aspect-ratio: 4 / 3;
    max-height: 80vh;
    max-width: 400px;
  }
  /* moldura deitada (4:3): oval e cartão menores, mantendo a proporção */
  .measure-face-guide { width: 40%; top: 42%; }
  .measure-card-guide { width: 25%; top: 24%; }
  .measure-section { padding-top: 24px; padding-bottom: 40px; }
}

.measure-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.measure-canvas.is-mirrored {
  transform: scaleX(-1); /* só espelha em modo selfie (câmera frontal) */
}

.measure-flip-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10, 20, 40, .65);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.measure-flip-btn svg {
  width: 20px;
  height: 20px;
}
.measure-flip-btn:hover {
  background: rgba(63, 124, 255, .35);
  border-color: var(--blue-2);
}

.measure-face-guide {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 60%;
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255,255,255,.55);
  border-radius: 50%;
  pointer-events: none;
  transition: border-color .2s ease;
  /* propositalmente sutil e sem reagir a cor: é só uma sugestão de
     enquadramento, a tolerância real do gating (isFacePositioned() em
     dnp.html) é uma faixa bem mais larga que este oval — não queremos
     prometer uma precisão maior do que a lógica realmente exige */
}

.measure-card-guide {
  position: absolute;
  left: 50%;
  top: 24%; /* testa, logo acima das sobrancelhas (quase no plano dos olhos) */
  /* Proporcional ao oval do rosto: um cartão (85,6 mm) tem ~60% da largura
     de um rosto adulto (~140 mm). Com a moldura antiga (58% contra um oval
     de 42%), o único jeito de "encaixar" o cartão era segurá-lo à frente
     do rosto, mais perto da câmera — e a DNP saía bem menor que a real. */
  width: 37%;
  aspect-ratio: 85.6 / 53.98;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255,255,255,.6);
  border-radius: 10px;
  /* só uma indicação de onde segurar: o cartão é localizado na foto, não
     precisa encaixar exato (antes escurecia todo o resto da imagem e o
     verde dependia dele, o que fazia a pessoa insistir em encaixar) */
  pointer-events: none;
  transition: border-color .2s ease;
}
.measure-face-guide.is-aligned {
  border-color: var(--measure-success);
  border-style: solid;
}

.measure-countdown {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(3.5rem, 18vw, 6rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.7);
  background: rgba(8,14,28,.2);
}

/* --------------------------------------------------------------------
   Tela de resultado
-------------------------------------------------------------------- */
.measure-photo {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  touch-action: none;
}
.measure-photo-inner {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.measure-photo-inner img { display: block; width: 100%; }
.measure-photo-inner canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.measure-photo-inner canvas.is-dragging { cursor: grabbing; }
.measure-photo-inner canvas.is-panning { cursor: move; }

.measure-zoom-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.measure-zoom-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.measure-zoom-btn:hover {
  background: rgba(63,124,255,.25);
  border-color: var(--blue-2);
}
.measure-zoom-level {
  min-width: 52px;
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  font-variant-numeric: tabular-nums;
}
.measure-zoom-reset {
  margin-left: 6px;
  background: transparent;
  border: none;
  color: var(--blue-2);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 4px;
}
.measure-zoom-reset:hover { text-decoration: underline; }

.measure-adjust-hint {
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  line-height: 1.6;
  margin: 16px 0 10px;
}

.measure-detect-status {
  font-size: .85rem;
  font-weight: 600;
  color: #ffd4a8;
  background: rgba(255, 166, 43, .1);
  border: 1px solid rgba(255, 166, 43, .3);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 16px 0 0;
}
.measure-detect-status:empty { display: none; } /* sem mensagem, não mostra a caixa vazia */
.measure-detect-status.is-ok {
  color: var(--measure-success);
  background: var(--measure-success-dim);
  border-color: rgba(52, 211, 153, .35);
}

.measure-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.measure-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
}
.measure-legend .dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.measure-dot-pupil { background: var(--blue-2); }
.measure-dot-card { background: var(--measure-success); }
.measure-legend .measure-dot-nose { background: #fbbf24; border-radius: 2px; transform: rotate(45deg) scale(.9); } /* losango, igual à alça no canvas */

/* Subtítulo da tela única de instruções */
.measure-subtitle {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
  margin: 0 0 14px;
}

/* Intro: o que a pessoa precisa, em três itens curtos com ícone */
.measure-needs {
  list-style: none;
  padding: 0;
  margin: 4px 0 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.measure-needs li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  text-align: center;
  font-size: .82rem;
  line-height: 1.35;
  color: rgba(233, 240, 255, .85);
}
.measure-needs svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--blue-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Instruções: três dicas numeradas */
.measure-tips {
  list-style: none;
  counter-reset: tip;
  padding: 0;
  margin: 22px 0 14px;
}
.measure-tips li {
  counter-increment: tip;
  position: relative;
  padding-left: 36px;
  margin: 12px 0;
  color: rgba(233, 240, 255, .85);
  line-height: 1.5;
}
.measure-tips li::before {
  content: counter(tip);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 .78rem/1 Inter, system-ui, sans-serif;
  color: #0a1120;
  background: var(--blue-2);
}
/* Versão do medidor: pequena e de baixo contraste, mas legível em print */
.measure-version-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 4;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(10, 17, 32, .55);
  color: rgba(255, 255, 255, .72);
  font: 600 10.5px/1.4 Inter, system-ui, sans-serif;
  letter-spacing: .04em;
  pointer-events: none;
  user-select: none;
}
.measure-version-footer {
  margin-top: 6px;
  font-size: .72rem;
  letter-spacing: .04em;
  opacity: .55;
}

/* Conferência pela íris: discreta quando bate, aviso quando diverge */
.measure-iris-check.is-ok {
  color: var(--measure-success);
  background: transparent;
  border-color: transparent;
  text-align: center;
  padding: 4px 0;
}

/* Aviso quando a DNP sai da faixa adulta típica (50–78 mm) — não bloqueia */
.measure-range-warn {
  font-size: .85rem;
  line-height: 1.55;
  color: #ffd4a8;
  background: rgba(255, 166, 43, .1);
  border: 1px solid rgba(255, 166, 43, .35);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 14px 0 0;
}

.measure-pd-value {
  text-align: center;
  margin: 26px 0 4px;
}
.measure-pd-value .num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 12vw, 4rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 20px rgba(63,124,255,.35);
}
.measure-pd-value .unit {
  font-size: 1.2rem;
  color: rgba(255,255,255,.55);
  margin-left: 6px;
  font-weight: 600;
}
.measure-pd-label {
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--blue-2);
}

.measure-split-row {
  display: flex;
  gap: 14px;
  margin: 26px 0;
}
.measure-split-box {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.measure-split-box .n {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
}
.measure-split-box .l {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 4px;
}

.measure-disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255,215,0,.06);
  border: 1px solid rgba(255,215,0,.28);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: .85rem;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  margin-top: 22px;
}

.measure-reset-btn {
  margin-top: 6px;
}

/* --------------------------------------------------------------------
   Passos numerados (reaproveita .check-list do style.css como base,
   com pequeno ajuste de espaçamento para o contexto de instruções)
-------------------------------------------------------------------- */
.measure-steps {
  margin: 0 0 28px;
}
.measure-steps li {
  margin: 14px 0;
  color: rgba(233, 240, 255, .85);
}
.measure-steps li::before {
  color: var(--blue-2);
}

/* --------------------------------------------------------------------
   Responsivo
-------------------------------------------------------------------- */
@media (max-width: 600px) {
  .measure-section { padding: 32px 0 80px; }
  .measure-btn-row { flex-direction: column; }
}

/* Telas bem estreitas: iPhone SE (375px), Android compactos (360px),
   e o piso comum de 320px */
@media (max-width: 380px) {
  .measure-card { padding: 18px; }
  .measure-shell h1 { font-size: 1.7rem; }
  .measure-shell p { font-size: .95rem; }
  .measure-split-row { gap: 10px; }
  .measure-split-box { padding: 12px 8px; }
  .measure-legend { gap: 12px; }
}

/* Corrige possível scroll horizontal em qualquer largura */
html, body { overflow-x: hidden; }