/* Pesca Brasil — design system
   Tokens extraidos do mockup. Mobile-first, com tablet e desktop. */

:root{
  --bg-page: oklch(97.5% 0.004 240);
  --bg-card: oklch(100% 0 0);
  --border: oklch(90% 0.006 240);
  --text: var(--text-primary);
  --text-primary: oklch(22% 0.02 260);
  --text-secondary: oklch(52% 0.015 250);
  --text-tertiary: oklch(66% 0.01 245);
  --blue: oklch(56% 0.19 265);
  --blue-soft: oklch(94% 0.025 265);
  --blue-wash: oklch(56% 0.19 265 / 0.07);
  --amber: oklch(72% 0.15 55);
  --amber-soft: oklch(96% 0.03 60);
  --good-bg: oklch(95.5% 0.045 150);
  --good-border: oklch(85% 0.08 150);
  --good-text: oklch(46% 0.13 150);
  --warn-bg: oklch(96% 0.035 75);
  --warn-border: oklch(87% 0.07 75);
  --warn-text: oklch(48% 0.12 65);
  --green: oklch(70% 0.15 150);
  --gold: oklch(78% 0.14 85);
  --silver: oklch(80% 0.006 240);
  --bronze: oklch(68% 0.1 55);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  height:100%;
  background: oklch(94% 0.008 250);
  color: var(--text-primary);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y: none;
}
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
button{ font-family:inherit; cursor:pointer; }
a{ color:var(--blue); text-decoration:none; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; }

/* ---------------------------------------------------------------- shell */
#app{
  height:100dvh;
  display:flex;
  align-items:stretch;
  justify-content:center;
}

.screen{
  width:100%;
  max-width:480px;
  height:100dvh;
  background:var(--bg-page);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  padding-top: var(--safe-top);
}

/* area rolavel padrao das telas */
.scrollable{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* Filho de área que rola nunca encolhe: ele rola. Sem isto, cartão e mapa
   dentro de uma coluna flexível viravam uma linha de 2 pixels quando o
   conteúdo passava da altura da tela, e a ficha do ponto parecia quebrada. */
.scrollable > *{ flex-shrink:0; }
.scrollable::-webkit-scrollbar{ width:0; }

/* tablet: o app ganha respiro e moldura */
@media (min-width: 769px){
  #app{ padding:24px 0; background: oklch(92% 0.01 250); }
  .screen{
    height: calc(100dvh - 48px);
    max-width: 430px;
    border-radius:26px;
    border:1px solid oklch(86% 0.01 250);
    box-shadow:0 18px 50px oklch(30% 0.03 255 / 0.18);
  }
}
/* desktop: mesma moldura, um pouco maior */
@media (min-width: 1025px){
  .screen{ max-width:450px; }
}

/* ------------------------------------------------------------ primitivos */
.row{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.grow{ flex:1; }
.spacer{ flex:1; }
.hidden{ display:none !important; }

.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:18px;
}

.btn{
  background:var(--blue); color:#fff; border:none; border-radius:999px;
  padding:15px; font-size:14px; font-weight:700;
  box-shadow:0 8px 20px oklch(56% 0.19 265 / 0.3);
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active{ transform:scale(.985); }
.btn[disabled]{ opacity:.55; box-shadow:none; cursor:default; }
.btn-ghost{
  background:var(--bg-card); color:var(--blue);
  border:1.5px solid var(--blue); border-radius:999px;
  padding:14px; font-size:13.5px; font-weight:700; box-shadow:none;
}

.field{
  border:1px solid var(--border); border-radius:14px;
  padding:13px 14px; background:var(--bg-card);
  font-size:14px; color:var(--text-primary); width:100%;
  font-family:inherit;
}
.field::placeholder{ color:var(--text-tertiary); }
.field:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash); }

.tap{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tap:active{ opacity:.72; }

/* ----------------------------------------------------------- animacoes */
@keyframes riseUp { from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
@keyframes livepulse { 0%,100%{ box-shadow:0 0 0 0 oklch(56% 0.19 265 / .4);} 70%{ box-shadow:0 0 0 7px oklch(56% 0.19 265 / 0);} }
@keyframes drawLine { from{ stroke-dashoffset:700; } to{ stroke-dashoffset:0; } }
@keyframes ripple { from{ transform:translate(-50%,-50%) scale(.55); opacity:.75; } to{ transform:translate(-50%,-50%) scale(1.5); opacity:0; } }
@keyframes loadbar { from{ transform:translateX(-120%);} to{ transform:translateX(280%);} }
@keyframes spin { to{ transform:rotate(360deg); } }

.rise-a{ animation:riseUp .5s cubic-bezier(.16,1,.3,1) .03s both; }
.rise-b{ animation:riseUp .55s cubic-bezier(.16,1,.3,1) .12s both; }
.rise-c{ animation:riseUp .55s cubic-bezier(.16,1,.3,1) .21s both; }
.rise-d{ animation:riseUp .55s cubic-bezier(.16,1,.3,1) .3s both; }
.rise-e{ animation:riseUp .55s cubic-bezier(.16,1,.3,1) .39s both; }
.rise-f{ animation:riseUp .55s cubic-bezier(.16,1,.3,1) .48s both; }
.live-dot{ animation:livepulse 2.2s ease-out infinite; }
.draw-path{ stroke-dasharray:700; animation:drawLine 1.4s cubic-bezier(.4,0,.2,1) .35s both; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* -------------------------------------------------------------- toast */
#toast{
  position:fixed; left:50%; bottom:calc(26px + var(--safe-bottom));
  transform:translateX(-50%) translateY(20px);
  background:oklch(24% 0.02 260); color:#fff;
  font-size:13px; font-weight:600; padding:12px 18px; border-radius:999px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:9999; max-width:88vw; text-align:center;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ------------------------------------------------------------ spinner */
.spinner{
  width:22px; height:22px; border-radius:999px;
  border:2.5px solid var(--blue-soft); border-top-color:var(--blue);
  animation:spin .8s linear infinite;
}
.center-full{
  flex:1; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px;
}

/* --------------------------------------------------------- barra inferior */
.navbar{
  display:flex; align-items:center; justify-content:space-around;
  padding:11px 8px calc(16px + var(--safe-bottom));
  background:var(--bg-card); border-top:1px solid var(--border);
  flex-shrink:0;
}
.navitem{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--text-tertiary); background:none; border:none; padding:2px 6px;
}
.navitem span{ font-size:10px; font-weight:600; }
.navitem.active{ color:var(--blue); }
.navitem.active span{ font-weight:700; }

/* ---------------------------------------------------------------- misc */
.skeleton{
  background:linear-gradient(90deg, oklch(93% 0.006 250) 25%, oklch(96% 0.004 250) 50%, oklch(93% 0.006 250) 75%);
  background-size:200% 100%;
  animation:shimmer 1.3s ease-in-out infinite;
  border-radius:10px;
}
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.offline-banner{
  display:flex; align-items:center; gap:8px;
  padding:8px 20px; background:var(--warn-bg);
  border-bottom:1px solid var(--warn-border);
  font-size:11.5px; font-weight:600; color:var(--warn-text);
  flex-shrink:0;
}

.eyebrow{
  font-size:10.5px; font-weight:700; letter-spacing:.03em;
  color:var(--blue); text-transform:uppercase;
}
.rotulo-campo{
  font-size:12px; font-weight:600; color:var(--text-secondary);
}

/* ------------------------------------------------- puxar para atualizar */
/* A marca fica escondida acima do topo da lista e desce junto com o dedo.
   Quando passa do limite ela vira azul e a seta se inverte, sinalizando
   "pode soltar" antes de a pessoa soltar. */
.puxar-marca{
  position:absolute; left:50%; top:-50px; z-index:5;
  width:84px; height:46px; margin-left:-42px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
}
.puxar-marca svg{ display:block; }
.puxar-marca.pronta .pm-vara{ fill:var(--blue); stroke:var(--blue); }