/* Pass · AMSAT Argentina
   PC: dos columnas (pasos a la izquierda; seguimiento y mapa fijos a la derecha).
   Celular: modo campo, una sola mano: pestañas abajo, botones grandes, brújula gigante. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #000; --card: #07090c; --fg: #fff; --t1: rgba(255,255,255,.88); --t2: rgba(255,255,255,.62); --t3: rgba(255,255,255,.4);
  --b1: rgba(255,255,255,.09); --b2: rgba(255,255,255,.2); --ac: #1aaee0; --ok: #3ddc84; --mal: #ff6b6b; --alto: #ffd166;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body.noche { --fg: #ff5a4a; --t1: #ff5a4a; --t2: #d8473a; --t3: #a3362c; --b1: rgba(255,60,40,.18); --b2: rgba(255,60,40,.35); --ac: #ff5a4a; --ok: #ff8a6a; --alto: #ff8a6a; --card: #060000; }
body.noche img, body.noche canvas { filter: sepia(1) saturate(4) hue-rotate(-30deg) brightness(.55); }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--t1); font: 300 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--ac); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 500; color: var(--fg); }
[hidden] { display: none !important; }

/* ── Barra superior ─────────────────────────── */
.ps-top { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 20px; padding-top: max(10px, env(safe-area-inset-top)); background: rgba(0,0,0,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--b1); }
.ps-marca { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.ps-marca img { width: 34px; height: 34px; }
.ps-marca b { font-size: 20px; letter-spacing: .04em; }
.ps-marca small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-top: -3px; }
.ps-acciones { display: flex; align-items: center; gap: 8px; }
.ps-icono { min-width: 44px; height: 44px; border: 1px solid var(--b2); background: transparent; font-size: 18px; cursor: pointer; }
.ps-icono[aria-pressed="true"] { border-color: var(--ac); }
.ps-idioma { display: inline-flex; border: 1px solid var(--b2); }
.ps-idioma button { min-width: 44px; height: 42px; padding: 0 10px; border: 0; background: transparent; font-size: 12px; letter-spacing: .1em; cursor: pointer; color: var(--t2); }
.ps-idioma button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.ps-chip { height: 40px; padding: 0 14px; border: 1px solid var(--ac); background: transparent; color: var(--ac); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ps-ios { margin: 10px 20px 0; padding: 10px 14px; border: 1px solid var(--ac); color: var(--t1); font-size: 13px; }

/* ── Estructura ─────────────────────────────── */
.ps-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(420px, 1fr); gap: 16px; padding: 0 20px 20px; max-width: 1800px; margin: 0 auto; align-items: start; }
.ps-col { display: grid; gap: 16px; min-width: 0; }
.ps-col-b { position: sticky; top: 78px; max-height: calc(100vh - 92px); grid-template-rows: auto minmax(0, 1fr); }
.ps-col-b .ps-pasos { overflow: auto; min-height: 0; }
.ps-barra { max-width: 1800px; margin: 0 auto; padding: 12px 20px; display: grid; gap: 10px; }
.ps-barra .ps-chips { margin: 0; }
.ps-barra .ps-msj { align-self: center; }
.ps-tle { max-width: 1760px; margin: 0 auto 16px; }
.ps-ubic { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--b2); background: transparent; cursor: pointer; margin-right: auto; margin-left: 18px; }
.ps-ubic b { font-family: var(--mono); font-size: 16px; letter-spacing: .06em; }
.ps-ubic-i { color: var(--ac); font-size: 20px; }
.ps-ubic:hover { border-color: var(--ac); }
.ps-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.ps-chips button small { color: var(--t3); font-family: var(--mono); margin-left: 4px; }
/* mapa con globitos */
.ps-mapa-wrap { position: relative; }
.ps-mapa-lienzo { position: relative; }
.ps-mapa-card h2 small { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ps-mapa { cursor: pointer; }
.ps-globo { position: absolute; z-index: 5; width: min(300px, 92%); background: rgba(5,10,16,.96); border: 1px solid var(--ac); padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.6); font-size: 13px; }
.ps-globo-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; color: var(--t2); }
.ps-globo-n { font-size: 17px; padding-right: 28px; }
.ps-globo-n small { color: var(--t3); font-size: 12px; }
.ps-globo-e { font: 14px var(--mono); color: var(--alto); margin: 6px 0; }
.ps-globo-e.ps-arriba { color: var(--ok); }
.ps-globo ul { list-style: none; margin: 8px 0; font: 12px var(--mono); color: var(--t2); }
.ps-globo ul b { color: var(--ac); }
.ps-globo .ps-btn { height: 38px; font-size: 11px; }
.ps-autor { border: 0; background: transparent; color: var(--t2); cursor: pointer; font: inherit; letter-spacing: inherit; }
.ps-autor i { font-style: normal; color: var(--ac); font-size: 14px; margin-left: 4px; }
.ps-autor:hover { color: var(--fg); }
.ps-c-falta { font-family: var(--mono); font-size: 15px; color: var(--alto); }
.ps-c-falta b { color: var(--ok); text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
.ps-c-sat small { color: var(--t3); font-size: 11px; }
.ps-intro h1 { font-size: clamp(26px, 3vw, 38px); font-weight: 200; color: var(--fg); }
.ps-intro p { color: var(--t2); margin-top: 4px; }
.ps-card { background: var(--card); border: 1px solid var(--b1); padding: 18px 20px; min-width: 0; }
.ps-card h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--t2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps-card h2 b { text-transform: none; letter-spacing: 0; font-size: 16px; }
.ps-card h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--t3); margin: 18px 0 8px; }
.ps-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: ps-lat 2s infinite; }
@keyframes ps-lat { 50% { opacity: .35; } }
.ps-nota { font-size: 12px; color: var(--t3); }
.ps-msj { font-size: 13px; color: var(--alto); min-height: 1em; }
.ps-msj:empty { display: none; }

/* ── Formularios ────────────────────────────── */
.ps-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ps-campo { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.ps-campo input, .ps-campo select, textarea { height: 44px; padding: 0 12px; background: #000; border: 1px solid var(--b2); color: var(--fg); font-size: 15px; letter-spacing: normal; text-transform: none; min-width: 0; }
.ps-campo input:focus, .ps-campo select:focus, textarea:focus { outline: none; border-color: var(--ac); }
#inLocator { width: 120px; font-family: var(--mono); text-transform: uppercase; }
#inLatLon { width: 190px; font-family: var(--mono); }
.ps-crece { flex: 1 1 200px; }
.ps-crece input { width: 100%; }
textarea { width: 100%; height: auto; padding: 10px; font-family: var(--mono); font-size: 12px; margin: 8px 0; }
.ps-btn { height: 44px; padding: 0 18px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; }
.ps-btn:hover { background: transparent; color: var(--fg); }
.ps-btn-ghost { background: transparent; color: var(--t1); border-color: var(--b2); }
.ps-btn-ghost:hover { border-color: var(--ac); color: var(--ac); }
.ps-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.ps-check input { width: 22px; height: 22px; accent-color: var(--ac); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ps-chips button { height: 40px; padding: 0 16px; border: 1px solid var(--b2); background: transparent; font-size: 13px; cursor: pointer; color: var(--t2); }
.ps-chips button[aria-pressed="true"] { border-color: var(--ac); color: var(--fg); background: rgba(26,174,224,.15); }
.ps-tle summary { cursor: pointer; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); min-height: 28px; }
.ps-tle[open] summary { margin-bottom: 8px; }

/* ── Modos (etiquetas) ──────────────────────── */
.ps-m { display: inline-block; padding: 1px 6px; margin: 1px 2px 1px 0; border: 1px solid var(--b2); font: 10px/1.6 var(--mono); font-style: normal; color: var(--t2); letter-spacing: .04em; }
.ps-m-fm { border-color: #3ddc84; color: #3ddc84; } .ps-m-lineal { border-color: #ffd166; color: #ffd166; }
.ps-m-aprs { border-color: #1aaee0; color: #1aaee0; } .ps-m-sstv { border-color: #c77dff; color: #c77dff; }
body.noche .ps-m { border-color: var(--b2) !important; color: var(--t2) !important; }

/* ── Listado de satélites y favoritos ───────── */
.ps-sats-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ps-sats-cab h2 small { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ps-sats-lista { max-height: 520px; overflow-y: auto; border-top: 1px solid var(--b1); }
.ps-sat { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--b1); cursor: pointer; }
.ps-sat:hover { background: rgba(26,174,224,.06); }
.ps-sat-fav { background: rgba(255,210,63,.05); }
.ps-sat-n b { font-size: 15px; } .ps-sat-n small { color: var(--t3); font-size: 11px; }
.ps-sat-m { font-size: 11px; color: var(--t3); margin-top: 1px; }
.ps-sat-e { text-align: right; font: 13px var(--mono); color: var(--t2); }
.ps-sat-e small { display: block; color: var(--alto); }
.ps-ok { color: var(--ok); font-weight: 500; }
.ps-fav { width: 44px; height: 44px; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--t3); cursor: pointer; }
.ps-fav[aria-pressed="true"], .ps-estrella { color: #ffd23f; }
.ps-estrella { margin-right: 4px; }
.ps-globo-n .ps-fav { width: 36px; height: 36px; font-size: 22px; vertical-align: middle; margin-left: -6px; }
.ps-chip-fav[aria-pressed="true"] { border-color: #ffd23f !important; background: rgba(255,210,63,.14) !important; }
.ps-fav-bt[aria-pressed="true"] { border-color: #ffd23f; color: #ffd23f; }
.ps-solofav [data-solofav="1"][aria-pressed="true"] { background: #ffd23f; color: #000; }
.ps-pasos .ps-sats-cab h2 { margin-bottom: 10px; }

/* ── Próximo paso ───────────────────────────── */
.ps-proximo { border-color: var(--ac); background: linear-gradient(135deg, rgba(26,174,224,.12), var(--card) 60%); }
.ps-px-l { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); }
.ps-px-n { font-size: 26px; font-weight: 300; color: var(--fg); margin: 2px 0; }
.ps-px-c { font: 600 34px var(--mono); color: var(--alto); font-variant-numeric: tabular-nums; }
.ps-px-d { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 14px var(--mono); color: var(--t2); margin: 6px 0 14px; }
.ps-px-d b { font-size: 18px; }

/* ── Visibles ahora ─────────────────────────── */
.ps-visibles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.ps-vis { text-align: left; padding: 10px 12px; border: 1px solid var(--b1); background: rgba(61,220,132,.05); cursor: pointer; min-height: 64px; }
.ps-vis:hover, .ps-vis.ps-on { border-color: var(--ok); }
.ps-vis b { display: block; font-size: 15px; }
.ps-vis span { display: block; font-family: var(--mono); font-size: 12px; color: var(--t2); margin-bottom: 2px; }

/* ── Tabla de pasos ─────────────────────────── */
.ps-tabla-wrap { overflow-x: auto; }
.ps-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.ps-tabla th { text-align: left; font-weight: 400; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); padding: 6px 10px; border-bottom: 1px solid var(--b2); white-space: nowrap; }
.ps-tabla td { padding: 10px; border-bottom: 1px solid var(--b1); white-space: nowrap; }
.ps-tabla tbody tr { cursor: pointer; }
.ps-tabla tbody tr:hover, .ps-tabla tbody tr:focus { background: rgba(26,174,224,.08); outline: none; }
.ps-tabla td small { color: var(--t3); font-size: 11px; }
.ps-c-ini, .ps-c-max, .ps-c-fin, .ps-c-dur, .ps-c-rum { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ps-c-sat em { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); }
.ps-encurso { background: rgba(61,220,132,.06); }
.ps-encurso .ps-c-sat b { color: var(--ok); }
.ps-alto .ps-c-max b { color: var(--alto); }

/* ── Polar y brújula ────────────────────────── */
.ps-polar { width: 100%; max-width: 260px; height: auto; overflow: visible; }
.pl-b { fill: rgba(26,174,224,.04); stroke: var(--b2); }
.pl-g { fill: none; stroke: var(--b1); }
.pl-t { fill: var(--t2); font: 10px var(--mono); text-anchor: middle; }
.pl-e { fill: var(--t3); font: 8px var(--mono); }
.pl-c { fill: none; stroke: var(--ac); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--ac)); }
.pl-aos { fill: var(--ok); } .pl-los { fill: var(--mal); }
.pl-yo { fill: #fff; } .pl-yo-h { fill: rgba(255,255,255,.2); }
.ps-vivo-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ps-vivo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ps-brujula-wrap { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ps-brujula { width: 100%; max-width: 320px; height: auto; }
.br-fondo { fill: #02070d; stroke: var(--b1); stroke-width: 10; }
.br-el { fill: none; stroke: var(--ok); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--ok)); }
.br-anillo { fill: none; stroke: var(--b2); stroke-dasharray: 2 6; }
.br-t { fill: var(--t2); font: 16px var(--mono); text-anchor: middle; }
.br-n { fill: var(--mal); font-weight: 700; }
.br-flecha { fill: var(--ac); filter: drop-shadow(0 0 10px var(--ac)); }
.br-off .br-flecha { fill: var(--t3); filter: none; }
.br-az { fill: var(--fg); font: 600 34px var(--mono); text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 6px; }
.br-elt { fill: var(--t2); font: 14px var(--mono); text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 5px; }
.ps-cuenta { font: 500 20px var(--mono); color: var(--alto); margin-bottom: 10px; }
.ps-cuenta.ps-arriba { color: var(--ok); }
.ps-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--b1); border: 1px solid var(--b1); margin-bottom: 12px; }
.ps-gauges div { background: var(--card); padding: 8px 10px; }
.ps-gauges span { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.ps-gauges b { font: 500 18px var(--mono); font-variant-numeric: tabular-nums; }
.ps-vivo-datos .ps-campo select { width: 100%; }
.ps-frec { display: grid; gap: 8px; margin: 12px 0; }
.ps-frec div { border: 1px solid var(--b1); padding: 8px 12px; }
.ps-frec span { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.ps-frec b { display: block; font: 600 26px var(--mono); font-variant-numeric: tabular-nums; color: var(--ac); }
.ps-frec small { font: 11px var(--mono); color: var(--t3); }

/* ── Mapa ───────────────────────────────────── */
.ps-mapa { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; margin-top: 10px; border: 1px solid var(--b1); background: #020811; }

/* ── Diálogo ────────────────────────────────── */
.ps-dialogo { margin: auto; width: min(720px, 94vw); max-height: 92vh; background: var(--card); color: var(--t1); border: 1px solid var(--b2); padding: 18px 20px; }
.ps-dialogo::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(3px); }
.ps-dlg-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.ps-dlg-cab h2 { font-size: 22px; font-weight: 300; color: var(--fg); }
.ps-dlg-cuerpo { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: center; }
.ps-dlg-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.ps-dlg-datos dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); padding-top: 3px; }
.ps-dlg-datos dd { font-family: var(--mono); font-size: 13px; }
.ps-acerca p { margin-bottom: 10px; color: var(--t2); line-height: 1.6; }
.ps-dlg-tx { display: grid; gap: 6px; }
.ps-tx { border: 1px solid var(--b1); padding: 8px 12px; }
.ps-tx-d { font-size: 13px; }
.ps-tx-f { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 13px var(--mono); color: var(--t2); margin-top: 2px; }
.ps-tx-f small { color: var(--t3); }
.ps-dlg-botones { margin-top: 16px; }

/* ── Acerca y pie ───────────────────────────── */
.ps-acerca p { margin-bottom: 10px; color: var(--t2); max-width: 75ch; }
.ps-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; padding: 22px 20px 30px; font-size: 11px; color: var(--t3); letter-spacing: .04em; border-top: 1px solid var(--b1); }
.ps-pie a { color: var(--t2); }
.ps-tabs { display: none; }

/* ── PC mediana ─────────────────────────────── */
@media (max-width: 1180px) {
  .ps-main { grid-template-columns: 1fr; }
  .ps-col-b { position: static; max-height: none; }
  .ps-vivo-grid { grid-template-columns: 300px 1fr 1fr; }
  .ps-brujula-wrap { grid-column: auto; }
}

/* ── Celular: modo campo ────────────────────── */
@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .ps-top { padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
  .ps-marca small { display: none; }
  .ps-main { display: block; padding: 12px; }
  .ps-barra { display: none; padding: 12px; }
  body[data-tab="ajustes"] .ps-barra { display: grid; }
  .ps-tle { display: none; margin: 0 12px 12px; }
  body[data-tab="ajustes"] .ps-tle { display: block; }
  .ps-top { gap: 6px; }
  .ps-ubic { margin-left: 4px; padding: 0 8px; gap: 5px; }
  .ps-ubic b { font-size: 14px; }
  .ps-acciones { gap: 4px; }
  .ps-acciones .ps-idioma button { min-width: 32px; padding: 0 4px; }
  .ps-icono { min-width: 36px; }
  .ps-marca span { display: none; }
  .ps-col { display: contents; }
  .ps-main [data-tab] { display: none; margin-bottom: 12px; }
  body[data-tab="pasos"] [data-tab="pasos"], body[data-tab="seguir"] [data-tab="seguir"],
  body[data-tab="mapa"] [data-tab="mapa"], body[data-tab="ajustes"] [data-tab="ajustes"], body[data-tab="sats"] [data-tab="sats"] { display: block; }
  .ps-sats-lista { max-height: none; }
  .ps-sat { padding: 8px 2px; }
  .ps-tabs button b { font-size: 11px; }
  .ps-intro p { display: none; }
  .ps-intro h1 { font-size: 24px; }
  .ps-card { padding: 14px; }

  .ps-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(0,0,0,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--b2); padding-bottom: env(safe-area-inset-bottom); }
  .ps-tabs button { height: 70px; border: 0; background: transparent; color: var(--t3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
  .ps-tabs button span { font-size: 24px; line-height: 1; }
  .ps-tabs button b { font-size: 12px; font-weight: 400; letter-spacing: .06em; color: inherit; }
  .ps-tabs button[aria-current="page"] { color: var(--ac); box-shadow: inset 0 3px 0 var(--ac); }

  /* pasos como tarjetas grandes */
  .ps-tabla thead { display: none; }
  .ps-tabla, .ps-tabla tbody { display: block; }
  .ps-tabla tr { display: grid; grid-template-columns: 64px 1fr auto; grid-template-areas: "fal sat max" "fal ini max" "fal rum mod"; gap: 2px 10px; padding: 12px 4px; border-bottom: 1px solid var(--b1); }
  .ps-c-falta { grid-area: fal; align-self: center; font-size: 18px; }
  .ps-tabla td { padding: 0; border: 0; white-space: normal; }
  .ps-c-sat { grid-area: sat; font-size: 17px; } .ps-c-ini { grid-area: ini; font-size: 16px; }
  .ps-c-max { grid-area: max; text-align: right; font-size: 13px; align-self: center; }
  .ps-c-max b { display: block; font-size: 30px; line-height: 1; }
  .ps-c-rum { grid-area: rum; font-size: 13px; color: var(--t2); } .ps-c-mod { grid-area: mod; text-align: right; }
  .ps-visibles { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .ps-vis { flex: 0 0 auto; min-width: 150px; min-height: 64px; scroll-snap-align: start; }
  .ps-px-seguir { height: 64px !important; font-size: 16px; flex: 2 1 auto !important; }
  .ps-proximo { order: -1; }

  /* seguir: todo grande */
  .ps-vivo-grid { grid-template-columns: 1fr; }
  .ps-vivo-grid > .ps-polar { order: 3; }
  .ps-vivo-datos { order: 2; }
  .ps-brujula-wrap { order: 1; }
  .ps-brujula { max-width: 100%; }
  .ps-polar { max-width: 220px; margin: 0 auto; display: block; }
  .ps-cuenta { font-size: 24px; text-align: center; }
  .ps-gauges b { font-size: 22px; }
  .ps-frec b { font-size: 32px; }
  .ps-fila .ps-btn, .ps-fila .ps-btn-ghost { flex: 1 1 auto; justify-content: center; height: 50px; }
  #inLocator, #inLatLon { width: 100%; }
  .ps-estacion .ps-campo { flex: 1 1 140px; }
  .ps-mapa-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; }
  .ps-mapa-lienzo { width: 940px; }
  .ps-mapa { margin-top: 0; }
  .ps-globo { width: 280px; }
  .ps-dialogo { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100%; margin: 0; padding: 14px; }
  .ps-dlg-cuerpo { grid-template-columns: 1fr; }
  .ps-dlg-cuerpo .ps-polar { max-width: 240px; }
  .ps-pie { padding-bottom: 20px; }
  #btInstalar { display: none; }
  body[data-tab="ajustes"] #btInstalar:not([hidden]) { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) { .ps-punto { animation: none; } }
@media print {
  .ps-top, .ps-tabs, .ps-col-b, .ps-filtros, .ps-estacion, .ps-tle, .ps-pie { display: none !important; }
  body { background: #fff; color: #000; } .ps-card { border: 0; background: #fff; } .ps-tabla td, .ps-tabla th { color: #000; }
}

/* ── Opinión ────────────────────────────────── */
.ps-opinion { display: grid; gap: 14px; }
.ps-opinion textarea { margin: 0; font-family: var(--font); font-size: 15px; }
.ps-opinion .ps-campo input { width: 100%; }
.ps-estrellas { display: flex; gap: 6px; }
.ps-estrellas button { width: 54px; height: 54px; border: 1px solid var(--b2); background: transparent; font-size: 30px; color: var(--t3); cursor: pointer; }
.ps-estrellas button.on { color: #ffd23f; border-color: #ffd23f; }
.ps-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ps-opinar i { color: #ffd23f; }
.ps-opinar-card { padding: 12px 14px; }
.ps-opinar-card .ps-btn { width: 100%; justify-content: center; height: 50px; }

.ps-difundir { display: inline-flex; align-items: center; justify-content: center; color: var(--t1); }
.ps-difundir:hover { border-color: var(--ac); }
.ps-difundir-dlg { width: min(460px, 94vw); }
.ps-difundir-op { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.ps-difundir-op .ps-btn { text-align: center; text-decoration: none; }
.ps-admin { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; opacity: .7; }
.ps-admin:hover { opacity: 1; border-color: var(--ac); }
@media (max-width: 380px) {
  .ps-ubic-i { display: none; }
  .ps-ubic b { font-size: 13px; letter-spacing: 0; }
  .ps-marca img { width: 30px; height: 30px; }
}