/* ============================================================
   MAR — mini-app (condiciones del mar en San Pancho)
   Usa solo los tokens del sistema (--text, --surface, --ui-accent…)
   ============================================================ */
.app-window-mar{ width:min(94vw,430px); }
.mar-body{
  padding:16px 18px 18px; display:flex; flex-direction:column; gap:14px;
  max-height:calc(100dvh - 96px); overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; touch-action:pan-y;
  font-family:var(--f-mono); color:var(--text);
}
.mar-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }
.mar-place{ color:var(--text); }
.mar-now{ color:var(--text-muted); font-variant-numeric:tabular-nums; display:flex; gap:8px; align-items:center; }
.mar-now i{ width:6px; height:6px; border-radius:50%; background:var(--ui-accent); box-shadow:0 0 0 1px var(--text); display:inline-block; }

.mar-sea{ position:relative; height:132px; margin:0 -18px; }
.mar-sea canvas{ -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%); position:absolute; inset:0; width:100%; height:100%; display:block; }
.mar-probe{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.mar-probe.p-ink{ color:var(--text); }
.mar-probe.p-acc{ color:var(--ui-accent); }
.mar-probe.p-paper{ color:var(--surface); }

.mar-hero{ text-align:center; margin-top:-4px; }
.mar-big{ font-family:var(--f-serif); font-size:3.6rem; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.mar-big small{ font-family:var(--f-mono); font-size:.9rem; letter-spacing:0; margin-left:4px; color:var(--text-muted); }
.mar-cap{ margin-top:6px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); }

.mar-stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.mar-stats > div{ padding:11px 4px 10px; text-align:center; }
.mar-stats > div + div{ border-left:1px solid var(--border); }
.mar-stats dd{ font-size:15px; display:flex; align-items:center; justify-content:center; gap:6px; font-variant-numeric:tabular-nums; }
.mar-stats dt{ margin-top:4px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.mar-arrow{ width:14px; height:14px; display:inline-block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.mar-arrow path{ fill:none; stroke:var(--text); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.mar-tide h3{ font:inherit; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); font-weight:400; margin-bottom:6px; }
.mar-tide svg{ width:100%; height:auto; display:block; overflow:visible; }
.mar-tide .t-axis{ stroke:var(--border-strong); stroke-width:1; }
.mar-tide .t-tick{ stroke:var(--border-strong); stroke-width:1; }
.mar-tide .t-lbl{ fill:var(--text-muted); font-family:var(--f-mono); font-size:9.5px; text-anchor:middle; letter-spacing:.04em; }
.mar-tide .t-area{ fill:var(--ui-accent); opacity:.16; }
.mar-tide .t-line{ fill:none; stroke:var(--text); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.mar-tide .t-ext{ fill:var(--surface); stroke:var(--text); stroke-width:1.2; }
.mar-tide .t-now-line{ stroke:var(--text); stroke-width:1; stroke-dasharray:2 3; opacity:.7; }
.mar-tide .t-now{ fill:var(--ui-accent); stroke:var(--text); stroke-width:1.6; }
.mar-tide .t-now-lbl{ fill:var(--text); font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-anchor:middle; }
.mar-ext{ display:flex; justify-content:space-between; margin-top:8px; font-size:12px; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.mar-ext b{ font-weight:400; color:var(--text-muted); letter-spacing:.14em; margin-right:6px; font-size:10.5px; }
.mar-ext sup{ font-size:8.5px; color:var(--text-muted); margin-left:2px; }

.mar-days{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--border); padding-top:10px; }
.mar-days li{ text-align:center; }
.mar-days span{ display:block; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.mar-days b{ display:block; margin-top:4px; font-weight:400; font-size:14px; font-variant-numeric:tabular-nums; }

.mar-na{ color:var(--text-muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:14px 0; text-align:center; opacity:.8; }
.mar-body.is-loading .mar-big, .mar-body.is-loading .mar-stats dd{ opacity:.35; }

/* ícono: olas con movimiento mínimo, alimentado por las condiciones reales */
.mar-ico-w{ animation:marIco calc(var(--mar-ico-t, 9s)) linear infinite; transform-origin:0 21px; }
.mar-ico-w.b{ animation-duration:calc(var(--mar-ico-t, 9s) * 1.35); animation-direction:var(--mar-ico-dir, normal); }
@keyframes marIco{
  from{ transform:translateX(0) scaleY(var(--mar-ico-a, .8)); }
  to{ transform:translateX(-28px) scaleY(var(--mar-ico-a, .8)); }
}

@media (max-width:700px){
  .app-window-mar{ width:calc(100vw - 14px); max-width:none; min-width:0; }
  .mar-body{ padding:14px 14px 16px; max-height:calc(100dvh - 84px); }
  .mar-sea{ margin:0 -14px; height:118px; }
  .mar-big{ font-size:3.2rem; }
}
@media (prefers-reduced-motion:reduce){
  .mar-ico-w{ animation:none; }
  .mar-arrow{ transition:none; }
}