/* PescaRadar · AppShell y componentes compartidos.
 *
 * Todo lo que se repite entre vistas vive aquí. Si un patrón se necesita en dos
 * pantallas, se define una vez en este fichero; no se copia.
 *
 * Móvil primero de verdad: los patrones cambian, no solo el ancho. En el móvil
 * la navegación va abajo, al alcance del pulgar; en escritorio pasa a un rail
 * lateral estrecho para devolverle superficie al mapa.
 */

/* ---- base ------------------------------------------------------------------ */

/* `100dvh` sigue la altura real disponible cuando el navegador móvil esconde o
   enseña su barra. Con `100vh` aparecía un hueco fantasma abajo. */
.prApp {
  margin: 0;
  min-height: 100dvh;
  background: var(--pr-surface);
  color: var(--pr-text);
  font-family: var(--pr-font);
  font-size: var(--pr-body);
  line-height: 1.5;
}

.prApp, .prApp * { box-sizing: border-box; }

/* Las pantallas de contenido usan una atmosfera de costa luminosa. El mapa
   conserva el modo oscuro inmersivo: son dos contextos distintos dentro de la
   misma marca, no dos temas elegidos al azar. */
.prApp:not(.prMapa) {
  --pr-surface: #edf4f7;
  --pr-surface-1: #ffffff;
  --pr-surface-2: #e5eff3;
  --pr-surface-glass: rgba(255, 255, 255, .88);
  --pr-scrim: rgba(3, 24, 34, .46);
  --pr-text: #102b3a;
  --pr-text-soft: #486673;
  --pr-text-faint: #566f7b;
  --pr-border: rgba(24, 73, 94, .13);
  --pr-border-strong: rgba(24, 73, 94, .25);
  --pr-primary: #087b9e;
  --pr-primary-hover: #096d8d;
  --pr-primary-ink: #ffffff;
  --pr-primary-soft: rgba(8, 123, 158, .11);
  --pr-accent: #0c9b86;
  --pr-success: #237d52;
  --pr-warning: #a76b08;
  --pr-danger: #b74458;
  --pr-score-excellent: #187a50;
  --pr-score-great: #527b27;
  --pr-score-good: #866b0a;
  --pr-score-fair: #a25912;
  --pr-score-low: #94505f;
  --pr-r-btn: 14px;
  --pr-r-card: 20px;
  --pr-shadow-1: 0 2px 8px rgba(25, 65, 82, .08);
  --pr-shadow-2: 0 12px 34px rgba(25, 65, 82, .12);
  --pr-shadow-float: 0 18px 54px rgba(17, 51, 66, .2);
  --pr-inset-top: inset 0 1px 0 rgba(255, 255, 255, .8);
  --pr-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 82% -10%, rgba(53, 182, 216, .2), transparent 34rem),
    linear-gradient(180deg, #f5fafc 0, var(--pr-surface) 28rem);
  background-attachment: fixed;
}

.prNoScroll { overflow: hidden; }

/* El contenido reserva sitio para la barra inferior y para la zona segura del
   iPhone. Sin esto, la última tarjeta queda siempre bajo la navegación. */
.prMain {
  padding: var(--pr-4);
  padding-bottom: calc(var(--pr-bottomnav-h) + var(--pr-safe-bottom) + var(--pr-8));
  max-width: 860px;
  margin: 0 auto;
}

/* Saltar al contenido: quien navega con teclado no debería tabular la barra
   entera en cada página. */
.prSkip {
  position: absolute; left: -9999px;
  background: var(--pr-primary); color: var(--pr-primary-ink);
  padding: var(--pr-2) var(--pr-4); border-radius: var(--pr-r-btn);
  z-index: var(--pr-z-toast); font-weight: 700;
}
.prSkip:focus { left: var(--pr-3); top: calc(var(--pr-3) + var(--pr-safe-top)); }

/* Foco visible siempre. Quitarlo por estética deja la aplicación inutilizable
   con teclado. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pr-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- cabecera --------------------------------------------------------------- */

.prTopBar {
  position: sticky; top: 0; z-index: var(--pr-z-topbar);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pr-2);
  height: calc(var(--pr-topbar-h) + var(--pr-safe-top));
  padding: var(--pr-safe-top) var(--pr-3) 0;
  background: var(--pr-surface-glass);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--pr-border);
}
.prTopLeft, .prTopActions { display: flex; align-items: center; gap: var(--pr-1); }
.prTopHeading { display: flex; min-width: 0; flex-direction: column; line-height: 1.1; }
.prTopHeading small {
  display: none; color: var(--pr-primary); font-size: 10px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
}
.prTopTitle { font-size: var(--pr-h3); font-weight: 800; letter-spacing: -.01em; }

/* 44px de lado: por debajo, en móvil se falla el toque constantemente. */
.prIconBtn {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--pr-r-btn);
  background: transparent; color: var(--pr-text-soft);
  cursor: pointer; transition: background var(--pr-fast) var(--pr-ease);
}
.prIconBtn:hover { background: var(--pr-surface-2); color: var(--pr-text); }
.prIconBtn:active { transform: scale(.94); }
.prApp:not(.prMapa) .prIconBtn {
  background: var(--pr-surface-2); border: 1px solid var(--pr-border);
  color: var(--pr-primary);
}
.prApp:not(.prMapa) .prIconBtn:hover {
  background: var(--pr-primary); border-color: var(--pr-primary); color: var(--pr-primary-ink);
}

/* Punto de avisos sin leer. Un punto basta: el número exacto no cambia lo que
   vas a hacer, que es abrirlo igualmente. */
.prDot {
  position: absolute; top: 9px; right: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pr-accent);
  border: 2px solid var(--pr-surface);
}

/* ---- navegación inferior (móvil) -------------------------------------------- */

.prBottomNav {
  position: fixed;
  left: max(var(--pr-2), var(--pr-safe-left));
  right: max(var(--pr-2), var(--pr-safe-right));
  bottom: calc(var(--pr-safe-bottom) + var(--pr-2));
  z-index: var(--pr-z-bottomnav);
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: var(--pr-bottomnav-h);
  padding: var(--pr-1);
  background: var(--pr-surface-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--pr-border-strong);
  border-radius: 22px;
  box-shadow: var(--pr-shadow-float);
}

.prNavItem {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0; min-height: 52px; justify-content: center; padding: var(--pr-1) 0;
  border-radius: 16px;
  text-decoration: none; color: var(--pr-text-faint);
  font-size: 11px; font-weight: 700;
  transition: color var(--pr-fast) var(--pr-ease);
  -webkit-tap-highlight-color: transparent;
}
/* El destino activo se marca con color Y con un punto: quien no distingue bien
   el cian del gris necesita otra señal además del color. */
.prNavItem.isActive { background: var(--pr-primary-soft); color: var(--pr-primary); }
.prNavItem.isActive::after {
  content: ""; width: 16px; height: 3px; border-radius: 99px;
  background: var(--pr-primary); margin-top: -1px;
}
.prNavItem:active { transform: scale(.95); }

/* Crear: ocupa el centro de la barra pero nunca marca destino activo, porque
   es una acción y no un sitio al que ir. */
.prFab {
  justify-self: center;
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-top: -14px;
  border: 0; border-radius: 18px;
  background: linear-gradient(150deg, var(--pr-primary), #1d8fae);
  color: var(--pr-primary-ink);
  box-shadow: var(--pr-shadow-float);
  cursor: pointer;
  transition: transform var(--pr-fast) var(--pr-ease);
}
.prFab:hover { background: linear-gradient(150deg, var(--pr-primary-hover), var(--pr-primary)); }
.prFab:active { transform: scale(.92); }

/* ---- rail (escritorio) -------------------------------------------------------- */

.prRail { display: none; }

@media (min-width: 840px) {
  .prBottomNav { display: none; }

  .prRail {
    position: fixed; top: 0; bottom: 0; left: 0;
    z-index: var(--pr-z-rail);
    display: flex; flex-direction: column; align-items: stretch;
    gap: var(--pr-2);
    width: var(--pr-rail-w);
    padding: var(--pr-3) var(--pr-2);
    background: var(--pr-surface-glass);
    backdrop-filter: blur(22px);
    border-right: 1px solid var(--pr-border);
    box-shadow: var(--pr-shadow-1);
  }
  .prRailLogo {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--pr-1) 0 var(--pr-3); color: var(--pr-text); text-decoration: none;
  }
  .prRailLogo img { width: 42px; height: 42px; border-radius: 13px; }
  .prRailLogo span { margin-top: 3px; font-size: 12px; font-weight: 900; letter-spacing: -.02em; }
  .prRailLogo small { color: var(--pr-text-faint); font-size: 8px; font-weight: 700; }
  .prRailLabel {
    padding: 0 var(--pr-2); color: var(--pr-text-faint); font-size: 9px;
    font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  }
  .prRailNav { display: flex; flex-direction: column; gap: var(--pr-1); }

  .prRailItem, .prRailCrear {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-height: 52px; padding: var(--pr-2) var(--pr-1);
    border: 1px solid transparent; border-radius: var(--pr-r-btn);
    background: transparent; color: var(--pr-text-faint);
    font: inherit; font-size: 11px; font-weight: 700;
    text-decoration: none; cursor: pointer; position: relative;
    transition: background var(--pr-fast) var(--pr-ease), color var(--pr-fast) var(--pr-ease);
  }
  .prRailItem svg {
    box-sizing: content-box; padding: 5px; border-radius: 11px;
    transition: background var(--pr-fast) var(--pr-ease), color var(--pr-fast) var(--pr-ease), transform var(--pr-fast) var(--pr-ease);
  }
  .prRailItem:hover svg { transform: translateY(-1px); }
  .prRailItem.isActive svg {
    background: var(--pr-primary); color: var(--pr-primary-ink);
    box-shadow: 0 5px 14px rgba(8, 123, 158, .22);
  }
  .prRailItem:hover, .prRailCrear:hover { background: var(--pr-surface-2); color: var(--pr-text); }
  .prRailItem.isActive {
    background: var(--pr-primary-soft); border-color: color-mix(in srgb, var(--pr-primary) 40%, transparent);
    color: var(--pr-primary);
  }
  .prRailCrear {
    background: linear-gradient(145deg, var(--pr-primary), var(--pr-accent));
    color: var(--pr-primary-ink); margin-top: var(--pr-1);
    box-shadow: 0 8px 22px rgba(8, 123, 158, .22);
  }
  .prRailCrear:hover { background: linear-gradient(145deg, var(--pr-primary-hover), var(--pr-primary)); color: #fff; }
  .prRailFoot { display: flex; flex-direction: column; gap: var(--pr-1); margin-top: auto; }
  .prRailFree {
    display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    padding: 5px 4px; color: var(--pr-success); font-size: 9px; font-weight: 900;
  }

  /* El contenido se aparta del rail y recupera el espacio de la barra inferior,
     que en escritorio ya no existe. */
  .prApp { padding-left: var(--pr-rail-w); }
  .prMain { padding: var(--pr-8) var(--pr-6) var(--pr-12); }
  .prTopBar {
    top: var(--pr-3); width: min(860px, calc(100% - var(--pr-12)));
    margin: var(--pr-3) auto 0; padding: 0 var(--pr-2) 0 var(--pr-4);
    border: 1px solid var(--pr-border); border-radius: var(--pr-r-chip);
    box-shadow: var(--pr-shadow-2);
  }
  .prTopHeading small { display: block; }
}

/* ---- sheets ------------------------------------------------------------------- */

.prSheetWrap { position: fixed; inset: 0; z-index: var(--pr-z-sheet); }
.prSheetWrap[hidden] { display: none !important; }

.prSheetScrim {
  position: absolute; inset: 0;
  background: var(--pr-scrim); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--pr-base) var(--pr-ease);
}
.prSheetWrap.isOpen .prSheetScrim { opacity: 1; }

.prSheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88dvh; overflow-y: auto;
  padding: var(--pr-3) var(--pr-4) calc(var(--pr-6) + var(--pr-safe-bottom));
  background: var(--pr-surface-1);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-sheet) var(--pr-r-sheet) 0 0;
  box-shadow: var(--pr-shadow-float);
  transform: translateY(100%);
  transition: transform var(--pr-slow) var(--pr-ease);
}
.prSheetWrap.isOpen .prSheet { transform: translateY(0); }

.prSheetGrip {
  width: 38px; height: 4px; border-radius: 99px;
  background: var(--pr-border-strong); margin: 0 auto var(--pr-3);
}
.prSheetTitle { margin: 0 0 var(--pr-3); font-size: var(--pr-h2); }
.prSheetNota {
  margin: 0 0 var(--pr-3); padding: var(--pr-3);
  background: var(--pr-primary-soft); border-radius: var(--pr-r-btn);
  font-size: var(--pr-small); color: var(--pr-text-soft); line-height: 1.55;
}

/* En escritorio una hoja pegada abajo obliga a bajar la vista. Se centra. */
@media (min-width: 840px) {
  .prSheet {
    left: 50%; bottom: auto; top: 50%; right: auto;
    width: min(520px, 92vw);
    transform: translate(-50%, -46%) scale(.98);
    border-radius: var(--pr-r-sheet);
    max-height: 84dvh;
    opacity: 0;
    transition: transform var(--pr-base) var(--pr-ease), opacity var(--pr-base) var(--pr-ease);
  }
  .prSheetWrap.isOpen .prSheet { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .prSheetGrip { display: none; }
}

.prAccion {
  display: flex; align-items: center; gap: var(--pr-3);
  padding: var(--pr-3); margin-bottom: var(--pr-2);
  border: 1px solid var(--pr-border); border-radius: var(--pr-r-card);
  background: var(--pr-surface-2); color: var(--pr-text);
  text-decoration: none;
  transition: border-color var(--pr-fast) var(--pr-ease);
}
.prAccion:hover { border-color: var(--pr-border-strong); }
.prAccion span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.prAccion small { color: var(--pr-text-soft); font-size: var(--pr-small); }
.prAccionIcono {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--pr-r-btn);
  background: linear-gradient(145deg, var(--pr-primary-soft), var(--pr-surface-2));
  border: 1px solid var(--pr-border); color: var(--pr-primary);
}

/* ---- botones ------------------------------------------------------------------ */

/* Botones.
 *
 * 44 px de alto siempre: es el minimo para acertar con el pulgar sin mirar,
 * que es como se usa esto de pie en una escollera.
 *
 * El brillo superior y la sombra dan volumen sin recurrir a bordes gruesos.
 * Un boton plano sobre fondo oscuro se confunde con una tarjeta; con una
 * arista clara arriba se lee como algo que se pulsa. */
.prBtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pr-2);
  min-height: 44px; padding: 0 var(--pr-4);
  border: 1px solid var(--pr-border-strong); border-radius: var(--pr-r-btn);
  background: linear-gradient(180deg, var(--pr-surface-1), var(--pr-surface-2));
  color: var(--pr-text);
  font: inherit; font-size: var(--pr-small); font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--pr-inset-top), 0 1px 2px rgba(0, 0, 0, .3);
  /* Sin resaltado azul al tocar en movil: lo marca el propio boton. */
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--pr-fast) var(--pr-ease),
    border-color var(--pr-fast) var(--pr-ease),
    box-shadow var(--pr-fast) var(--pr-ease),
    transform var(--pr-fast) var(--pr-ease);
}
.prBtn:hover {
  background: linear-gradient(180deg, var(--pr-surface-2), var(--pr-surface-1));
  border-color: var(--pr-primary);
}
/* Se hunde al pulsar: el gesto se confirma antes de que responda la red. */
.prBtn:active { transform: translateY(1px) scale(.985); box-shadow: none; }
.prBtn:focus-visible { outline: 2px solid var(--pr-primary); outline-offset: 2px; }
.prBtn[disabled] {
  opacity: .45; cursor: not-allowed;
  box-shadow: none; transform: none;
}
.prBtn[disabled]:hover { border-color: var(--pr-border-strong); }

/* Los iconos no compiten con el texto: mismo color, algo mas tenues. */
.prBtn svg { flex: 0 0 auto; opacity: .9; }

.prBtnPrimary {
  background: linear-gradient(180deg, var(--pr-primary), var(--pr-primary-hover, var(--pr-primary)));
  border-color: transparent;
  color: var(--pr-primary-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 2px 8px rgba(53, 182, 216, .28);
  border-radius: var(--pr-r-chip);
}
.prBtnPrimary:hover {
  background: var(--pr-primary-hover);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 3px 12px rgba(53, 182, 216, .36);
}
.prBtnPrimary svg { opacity: 1; }

/* Peligro: borrar, retirar, cancelar. Va con color Y con texto claro, nunca
   solo con el color. */
.prBtnPeligro {
  background: transparent;
  border-color: var(--pr-danger);
  color: var(--pr-danger);
  box-shadow: none;
}
.prBtnPeligro:hover { background: var(--pr-danger); color: #fff; border-color: var(--pr-danger); }

/* Discreto: acciones secundarias que no deben competir. */
.prBtnGhost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--pr-text-soft);
}
.prBtnGhost:hover { background: var(--pr-surface-2); border-color: var(--pr-border); color: var(--pr-text); }

.prBtnWide { width: 100%; }
.prBtnSm { min-height: 40px; padding: 0 var(--pr-3); font-size: var(--pr-caption); }
/* Con dedo, 44 px. En raton se dejan en 40: ahi la precision no es el problema
   y subir todos los botones pequenos descolocaria las filas densas. */
@media (pointer: coarse) {
  .prBtnSm { min-height: 44px; }
}

/* Con el teclado abierto en movil, un boton ancho pegado al borde inferior se
   queda debajo del area segura del iPhone. */
.prBtnWide:last-child { margin-bottom: env(safe-area-inset-bottom, 0px); }

@media (prefers-reduced-motion: reduce) {
  .prBtn { transition: none; }
  .prBtn:active { transform: none; }
}

/* ---- chips y tabs --------------------------------------------------------------- */

.prChips { display: flex; gap: var(--pr-2); overflow-x: auto; scrollbar-width: none; }
.prChips::-webkit-scrollbar { display: none; }

.prChip {
  display: inline-flex; align-items: center; gap: var(--pr-1);
  min-height: 38px; padding: 0 var(--pr-3);
  border: 1px solid var(--pr-border); border-radius: var(--pr-r-chip);
  background: var(--pr-surface-1); color: var(--pr-text-soft);
  font: inherit; font-size: var(--pr-caption); font-weight: 800;
  white-space: nowrap; cursor: pointer;
}
.prChip.isActive {
  background: var(--pr-primary-soft); border-color: var(--pr-primary); color: var(--pr-primary);
}

.prTabs {
  display: flex; gap: var(--pr-1); margin-bottom: var(--pr-4);
  padding: var(--pr-1);
  background: var(--pr-surface-1); border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-chip);
  box-shadow: var(--pr-shadow-1);
}
.prTab {
  flex: 1; min-height: 40px;
  border: 0; border-radius: var(--pr-r-chip);
  background: transparent; color: var(--pr-text-soft);
  font: inherit; font-size: var(--pr-small); font-weight: 800; cursor: pointer;
  transition: background var(--pr-fast) var(--pr-ease), color var(--pr-fast) var(--pr-ease);
}
.prTab[aria-selected="true"] { background: var(--pr-primary); color: var(--pr-primary-ink); }
.prTab[aria-selected="true"] { box-shadow: 0 5px 14px rgba(8, 123, 158, .2); }

/* ---- tarjetas ------------------------------------------------------------------- */

.prCard {
  background: var(--pr-surface-1);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card);
  box-shadow: var(--pr-inset-top), var(--pr-shadow-1);
  overflow: hidden;
}
.prCardPad { padding: var(--pr-4); }
.prSection { margin-bottom: var(--pr-6); }
.prSectionHead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pr-3); margin-bottom: var(--pr-3);
}
.prSectionHead h2 { margin: 0; font-size: var(--pr-h3); }

/* ---- score ---------------------------------------------------------------------
   Un único componente para la puntuación en todo el producto. La etiqueta
   siempre acompaña al número: el color solo refuerza. */

.prScore {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--pr-font-num); font-variant-numeric: tabular-nums;
  font-weight: 800; line-height: 1;
}
.prScore b { font-size: 1.4em; }
.prScore small { font-size: .72em; color: var(--pr-text-faint); font-weight: 700; }

.prScoreBox {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--pr-2) var(--pr-3);
  border: 1px solid var(--pr-border); border-radius: var(--pr-r-btn);
  background: var(--pr-surface-2);
}
.prScoreLabel {
  font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.prScore--excellent { color: var(--pr-score-excellent); }
.prScore--great { color: var(--pr-score-great); }
.prScore--good { color: var(--pr-score-good); }
.prScore--fair { color: var(--pr-score-fair); }
.prScore--low { color: var(--pr-score-low); }

/* ---- estados ---------------------------------------------------------------------- */

.prEstado {
  display: flex; flex-direction: column; align-items: center; gap: var(--pr-3);
  padding: var(--pr-12) var(--pr-4);
  text-align: center;
}
.prEstadoIcono {
  display: grid; place-items: center; width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--pr-surface-2); color: var(--pr-text-faint);
}
.prEstado h3 { margin: 0; font-size: var(--pr-h3); }
.prEstado p { margin: 0; max-width: 40ch; color: var(--pr-text-soft); font-size: var(--pr-small); }
.prEstadoError .prEstadoIcono { color: var(--pr-warning); }

.prSkeletonWrap { display: flex; flex-direction: column; gap: var(--pr-3); }
.prSkeleton {
  height: 72px; border-radius: var(--pr-r-card);
  background: linear-gradient(90deg, var(--pr-surface-1) 25%, var(--pr-surface-2) 50%, var(--pr-surface-1) 75%);
  background-size: 200% 100%;
  animation: prShimmer 1.4s infinite;
}
@keyframes prShimmer { to { background-position: -200% 0; } }

/* El pulso del esqueleto es decoracion: quien pide menos movimiento se queda
   con el hueco quieto, que sigue diciendo lo mismo. */
@media (prefers-reduced-motion: reduce) {
  .prSkeleton { animation: none; }
}

/* ---- toast y conexión -------------------------------------------------------------- */

.prToast {
  position: fixed; left: 50%; transform: translate(-50%, 120%);
  bottom: calc(var(--pr-bottomnav-h) + var(--pr-safe-bottom) + var(--pr-3));
  z-index: var(--pr-z-toast);
  display: flex; align-items: center; gap: var(--pr-3);
  max-width: min(440px, calc(100vw - 32px));
  padding: var(--pr-3) var(--pr-4);
  background: var(--pr-surface-2); border: 1px solid var(--pr-border-strong);
  border-radius: var(--pr-r-btn); box-shadow: var(--pr-shadow-float);
  font-size: var(--pr-small);
  transition: transform var(--pr-slow) var(--pr-ease);
}
.prToast.isOpen { transform: translate(-50%, 0); }
.prToast button {
  border: 0; background: none; color: var(--pr-primary);
  font: inherit; font-weight: 800; cursor: pointer;
}

/* Aviso global enviado desde Timonel. Es modal y no desaparece solo: un
   mensaje administrativo no debe perderse como un toast de tres segundos. */
.prBroadcastWrap {
  position: fixed; inset: 0; z-index: calc(var(--pr-z-toast) + 5);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; transition: opacity var(--pr-base) var(--pr-ease);
}
.prBroadcastWrap.isOpen { opacity: 1; }
.prBroadcastScrim {
  position: absolute; inset: 0; background: rgba(3, 17, 23, .74);
  backdrop-filter: blur(5px);
}
.prBroadcast {
  position: relative; width: min(100%, 430px); padding: 25px;
  border: 1px solid var(--pr-border-strong); border-radius: 22px;
  background: var(--pr-surface); box-shadow: var(--pr-shadow-float); text-align: center;
}
.prBroadcastIcono {
  display: grid; place-items: center; width: 52px; height: 52px;
  margin: 0 auto 13px; border-radius: 50%;
  background: var(--pr-primary-soft); color: var(--pr-primary);
}
.prBroadcast h2 { margin: 0; color: var(--pr-text); font-size: var(--pr-h2); }
.prBroadcast p {
  margin: 10px 0 20px; color: var(--pr-text-soft); line-height: 1.6;
  white-space: pre-line;
}

.prOffline {
  position: fixed; left: 0; right: 0; z-index: var(--pr-z-toast);
  top: calc(-1 * (var(--pr-topbar-h) + var(--pr-safe-top)));
  display: flex; align-items: center; justify-content: center; gap: var(--pr-2);
  padding: calc(var(--pr-2) + var(--pr-safe-top)) var(--pr-4) var(--pr-2);
  background: var(--pr-warning); color: #20180a;
  font-size: var(--pr-caption); font-weight: 800;
  transition: transform var(--pr-base) var(--pr-ease);
}
.prOffline.isOpen { transform: translateY(calc(var(--pr-topbar-h) + var(--pr-safe-top))); }

@media (min-width: 840px) {
  .prToast { left: calc(var(--pr-rail-w) + 50%); bottom: var(--pr-6); }
}

/* ---- formularios --------------------------------------------------------------------- */

.prField { display: block; margin-bottom: var(--pr-4); }
.prField > span {
  display: block; margin-bottom: var(--pr-2);
  font-size: var(--pr-small); font-weight: 700; color: var(--pr-text-soft);
}
.prField input, .prField select, .prField textarea {
  width: 100%; box-sizing: border-box; min-height: 46px;
  padding: var(--pr-3);
  border: 1px solid var(--pr-border-strong); border-radius: var(--pr-r-btn);
  background: var(--pr-surface); color: var(--pr-text);
  font: inherit; font-size: var(--pr-body);
}
.prField textarea { min-height: 96px; resize: vertical; }
.prHint { margin: var(--pr-2) 0 0; font-size: var(--pr-caption); color: var(--pr-text-faint); line-height: 1.5; }
.prError {
  margin: var(--pr-3) 0; padding: var(--pr-3);
  background: rgba(224, 97, 114, .14); border: 1px solid var(--pr-danger);
  border-radius: var(--pr-r-btn); font-size: var(--pr-small);
}

.prCheck {
  display: flex; align-items: flex-start; gap: var(--pr-3);
  margin-bottom: var(--pr-4); font-size: var(--pr-small); line-height: 1.5;
}
.prCheck input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }

/* ---- listas ---------------------------------------------------------------------------- */

.prList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pr-2); }
.prRow {
  display: flex; align-items: center; gap: var(--pr-3);
  padding: var(--pr-3);
  background: var(--pr-surface-1); border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card);
  color: inherit; text-decoration: none;
  box-shadow: var(--pr-shadow-1);
  transition: transform var(--pr-fast) var(--pr-ease), border-color var(--pr-fast) var(--pr-ease), box-shadow var(--pr-fast) var(--pr-ease);
}
.prRow:hover { transform: translateY(-1px); border-color: var(--pr-border-strong); box-shadow: var(--pr-shadow-2); }
.prRow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prRow small { color: var(--pr-text-soft); font-size: var(--pr-caption); }
.prRowIcon {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: var(--pr-r-btn);
  background: linear-gradient(145deg, var(--pr-primary-soft), var(--pr-surface-2));
  border: 1px solid var(--pr-border); color: var(--pr-primary);
  box-shadow: var(--pr-inset-top);
}

.prAvatar {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--pr-border); background: var(--pr-surface-2);
}
.prAvatarEmpty { display: grid; place-items: center; color: var(--pr-text-faint); }

/* ---- insignias ------------------------------------------------------------------------- */

.prBadge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--pr-2); border-radius: var(--pr-r-chip);
  border: 1px solid var(--pr-border);
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pr-text-soft);
}
.prBadgeOk { background: rgba(63, 189, 122, .16); border-color: var(--pr-success); color: #cdf3de; }
.prBadgeWarn { background: rgba(224, 168, 60, .16); border-color: var(--pr-warning); color: #f6e5c2; }
.prBadgeInfo { background: var(--pr-primary-soft); border-color: var(--pr-primary); color: #cdeef8; }

.prApp:not(.prMapa) .prBadgeOk { color: #145f3e; }
.prApp:not(.prMapa) .prBadgeWarn { color: #7b5009; }
.prApp:not(.prMapa) .prBadgeInfo { color: var(--pr-primary); }
.prApp:not(.prMapa) .socEnviar,
.prApp:not(.prMapa) .msgPunto { color: var(--pr-primary-ink); }
.prApp:not(.prMapa) .perNivel b { color: #f5fbfd; }
.prApp:not(.prMapa) .perStaff.isAdmin { color: #8ee9fa; }

/* ---- aviso de actualización -----------------------------------------------
   Arriba y discreto: informa sin tapar lo que se está haciendo. Una versión
   nueva no es una emergencia. */
.prUpdate {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--pr-safe-top) + var(--pr-3));
  z-index: var(--pr-z-toast);
  display: flex; align-items: center; gap: var(--pr-3);
  max-width: min(440px, calc(100vw - 24px));
  padding: var(--pr-2) var(--pr-2) var(--pr-2) var(--pr-4);
  background: var(--pr-surface-2); border: 1px solid var(--pr-primary);
  border-radius: var(--pr-r-chip); box-shadow: var(--pr-shadow-float);
  font-size: var(--pr-small); font-weight: 700;
}
.prUpdate .prBtn { min-height: 36px; padding: 0 var(--pr-3); }

.perInstalar { margin-top: var(--pr-2); }
.perInstalada { display: flex; align-items: center; gap: var(--pr-2); margin-top: var(--pr-4); color: var(--pr-success); }

/* Insignia con número. El punto sin cifra no dice cuántos mensajes esperan, y
   "tienes algo" es peor aviso que "tienes tres". */
.prDotNum {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--pr-primary);
  color: #04161c;
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Aviso de versión nueva para páginas sin AppShell (la portada).
   No tapa contenido: se apoya abajo y respeta el área segura del iPhone. */
.versionAviso {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pr-safe-bottom) + var(--pr-4));
  transform: translateX(-50%);
  z-index: var(--pr-z-toast, 900);
  display: flex;
  align-items: center;
  gap: var(--pr-3);
  max-width: min(92vw, 460px);
  padding: var(--pr-3) var(--pr-4);
  background: var(--pr-surface-1);
  color: var(--pr-text);
  border: 1px solid var(--pr-border-strong);
  border-radius: 99px;
  box-shadow: var(--pr-shadow-2);
  font-size: var(--pr-small);
}
.versionAviso button {
  flex: 0 0 auto;
  padding: 6px var(--pr-3);
  background: var(--pr-primary);
  color: #04161c;
  border: 0;
  border-radius: 99px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}


/* El visor de fotografías vivía aquí y ahora está en `css/visor.css`.
 * Se movió porque `timonel.html` usa el visor y no carga esta hoja. */

/* Aviso de correo sin confirmar.
   Va arriba del todo a proposito: la pildora del cabecero solo dice "EMAIL
   PENDIENTE", y quien nunca recibio el correo no tiene forma de saber que
   puede estar en spam ni que puede pedirlo otra vez. */
.verifyBanner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 16px;
  background:var(--pr-warning); color:#fff;
  font-size:14px; line-height:1.5;
}
.verifyBanner p{margin:0; flex:1 1 260px}
.verifyBanner button{
  border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14);
  color:#fff; border-radius:8px; padding:7px 14px; font-weight:600; cursor:pointer;
}
.verifyBanner button:hover{background:rgba(255,255,255,.25)}
.verifyBanner button:disabled{opacity:.7; cursor:default}
.verifyBanner .verifyClose{border:0; background:transparent; font-size:20px; padding:0 6px; line-height:1}

/* Asistente de captura · dónde se pescó.
   Antes no se preguntaba y ninguna captura guardaba el sitio. */
.wizDonde{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.wizDondeTitulo{display:block;font-size:11px;font-weight:900;letter-spacing:.04em;color:#eaf7fb;margin-bottom:8px}
.wizDondeBotones{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.wizSitios{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.wizSitio{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;width:100%;
  border:1px solid var(--line);background:#0b2027;color:#eaf7fb;border-radius:10px;padding:8px 10px;cursor:pointer;min-height:42px}
.wizSitio:hover{border-color:#3fa0bd;background:#113947}
.wizSitio small{font-size:9px;color:var(--muted)}
.wizSitioElegido{display:flex;align-items:center;gap:7px;margin-bottom:8px;padding:8px 10px;
  border:1px solid #3fa0bd;background:#113947;border-radius:10px;font-size:11px;color:#eaf7fb}
.wizSitioElegido small{color:var(--muted);font-size:9px}
.wizSitioQuitar{margin-left:auto;background:none;border:0;color:#9fb9c1;font-size:14px;cursor:pointer;
  padding:2px 6px;border-radius:8px;min-width:28px;min-height:28px}
.wizSitioQuitar:hover{background:#0b2027;color:#eaf7fb}

/* ---------------------------------------------------------------------------
   Ficha de tienda con datos en vivo de Google

   La cáscara es de PescaRadar y el bloque de dentro es de Google. Se estilan
   por separado a propósito: el componente de Google se pinta como él quiera y
   aquí solo se le da sitio, fondo y radio. Forzarle colores por dentro
   acabaría tapándole la atribución, que es condición de uso.
   --------------------------------------------------------------------------- */
.prTiendaG {
  display: grid;
  gap: var(--pr-3, 12px);
  padding: var(--pr-4, 16px);
  border-radius: 22px;
  /* Azul noche translúcido: se lee sobre el mapa satélite sin taparlo. */
  background: var(--pr-surface-glass, rgba(7, 26, 35, .92));
  border: 1px solid var(--pr-accent, #38e0c4);
  box-shadow: var(--pr-shadow-2, 0 4px 16px rgba(0, 0, 0, .38));
  backdrop-filter: blur(10px);
}
.prTiendaGCabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-2, 8px);
}
.prTiendaGEtiqueta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pr-accent, #38e0c4);
}
.prTiendaGVivo {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--pr-r-chip, 999px);
  color: var(--pr-primary, #35b6d8);
  background: var(--pr-primary-soft, rgba(53, 182, 216, .14));
}

/* El componente de Google. Solo se le da caja; por dentro manda él. */
.prTiendaGGoogle {
  display: block;
  width: 100%;
  border-radius: var(--pr-r-card, 16px);
  overflow: hidden;
  /* Su propio tema oscuro necesita un fondo detrás o se ve translúcido. */
  background: var(--pr-surface-1, #071a23);
}

/* Datos propios: separados y dichos como tales, para que no parezcan de Google. */
.prTiendaGPropio {
  padding: var(--pr-3, 12px);
  border-radius: var(--pr-r-card, 16px);
  border: 1px dashed var(--pr-border-strong, rgba(120, 170, 190, .34));
}
.prTiendaGPropio h3 {
  margin: 0 0 2px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pr-text-soft, #a3bcc7);
}
.prTiendaGPropioNota {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--pr-text-faint, #6f8b97);
}
.prTiendaGPropio a { color: var(--pr-primary, #35b6d8); font-weight: 600 }

.prTiendaGPie { display: flex; gap: var(--pr-2, 8px) }
.prTiendaGPie .prBtn { flex: 1; text-align: center }

.prTiendaGCargando,
.prTiendaGAviso {
  margin: 0;
  padding: var(--pr-4, 16px);
  font-size: 15px;
  color: var(--pr-text-soft, #a3bcc7);
}
.prTiendaGFallo { border-color: var(--pr-border, rgba(120, 170, 190, .18)) }
.prTiendaGAyuda {
  margin: 0 0 var(--pr-3, 12px);
  font-size: 13px;
  color: var(--pr-text-faint, #6f8b97);
}

/* Móvil: la ficha vive como hoja inferior, igual que el resto del mapa. */
@media (max-width: 767px) {
  .prTiendaG { border-radius: 22px 22px 0 0; max-height: 75vh; overflow-y: auto }
}

/* Capa nacional de tiendas: marcador y panel de la ficha. */
.tiendaGMarcador { background: none; border: 0 }
.tiendaGPin {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 16px;
  border-radius: 50%;
  /* Azul petróleo con halo verde agua, para distinguirse del marcador de
     tienda del directorio propio sin competir con los pesqueros. */
  background: #0d3a4a;
  border: 2px solid var(--pr-accent, #38e0c4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.tiendaGPanel {
  position: fixed;
  z-index: 1200;
  right: 16px;
  bottom: 16px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 78vh;
  overflow-y: auto;
}
.tiendaGCerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--pr-border, rgba(120, 170, 190, .18));
  background: var(--pr-surface-1, #071a23);
  color: var(--pr-text, #e9f6fb);
  font-size: 15px;
  cursor: pointer;
}
@media (max-width: 767px) {
  /* En móvil, hoja inferior: el panel flotante deja el mapa inservible. */
  .tiendaGPanel {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 75vh;
  }
}