/* PescaRadar · planificador, comparador, timeline y Modo Jornada.
 *
 * Todo pensado para el pulgar: hojas inferiores, tarjetas que se deslizan y
 * ningún número por debajo de 10 px. Nada de tablas de escritorio comprimidas.
 */

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

.planCargando {
  display: flex; align-items: center; justify-content: center; gap: var(--pr-3);
  padding: var(--pr-6) var(--pr-4);
  color: var(--pr-text-soft); font-size: var(--pr-small);
}
.planLatido {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pr-primary);
  animation: planLatir 1.2s ease-in-out infinite;
}
@keyframes planLatir { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .planLatido, .jorPunto { animation: none; } }

.planVacio, .planPista {
  margin: var(--pr-2) 0 0;
  font-size: var(--pr-caption);
  color: var(--pr-text-faint);
  line-height: 1.5;
}
.planAviso {
  margin: var(--pr-2) 0;
  padding: var(--pr-2) var(--pr-3);
  background: var(--pr-surface-2);
  border-left: 3px solid var(--pr-primary);
  border-radius: var(--pr-2);
  font-size: var(--pr-caption);
  color: var(--pr-text-soft);
}
.planFaltantes {
  margin: var(--pr-3) 0 0; padding-left: var(--pr-4);
  font-size: var(--pr-caption); color: var(--pr-text-faint);
}

/* La confianza lleva texto además de borde: "Datos parciales" se entiende sin
   distinguir tonos de color. */
.planConfianza {
  display: inline-block;
  padding: 2px var(--pr-2);
  border-radius: 99px;
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--pr-border-strong);
  color: var(--pr-text-soft);
}
.planConfianza.is-high { border-color: var(--pr-success); color: var(--pr-success); }
.planConfianza.is-medium { border-color: var(--pr-primary); color: var(--pr-primary); }

.planScoreVacio { font-size: var(--pr-caption); color: var(--pr-text-faint); font-style: italic; }

/* ---- cabecera y bloques -------------------------------------------------------- */

.planCabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pr-3); margin-bottom: var(--pr-3);
}
.planCabecera b { font-size: var(--pr-h3); display: block; }
.planCabecera small { font-size: var(--pr-caption); color: var(--pr-text-faint); }

.planBloque { margin-top: var(--pr-5); }
.planBloque h3 {
  margin: 0 0 var(--pr-2);
  font-size: var(--pr-small); text-transform: uppercase;
  letter-spacing: .05em; color: var(--pr-text-faint);
}

/* ---- mejor ventana -------------------------------------------------------------- */

.planVentana {
  display: flex; align-items: center; gap: var(--pr-3);
  width: 100%; min-height: 64px;
  margin-top: var(--pr-3); padding: var(--pr-3) var(--pr-4);
  background: var(--pr-primary-soft);
  border: 1px solid var(--pr-primary);
  border-radius: var(--pr-r-card);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.planVentana.isVacia { background: var(--pr-surface-1); border-color: var(--pr-border); cursor: default; }
.planVentanaTitulo {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pr-text-faint); font-weight: 900;
}
.planVentana b { font-size: var(--pr-h2); font-variant-numeric: tabular-nums; }
.planVentana small { color: var(--pr-text-soft); font-size: var(--pr-caption); }
.planVentana > svg { margin-left: auto; }

/* ---- timeline -------------------------------------------------------------------- */

/* Se desliza en horizontal: 18 horas no caben en 375 px, y comprimirlas las
   dejaría ilegibles. */
.tlWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tlBarras {
  display: flex; align-items: flex-end; gap: 6px;
  list-style: none; margin: 0; padding: var(--pr-2) 0;
  min-height: 140px;
}
.tlHora {
  flex: 0 0 auto; width: 38px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  height: 130px; justify-content: flex-end;
  cursor: pointer; border-radius: var(--pr-2);
}
.tlHora:focus-visible { outline: 2px solid var(--pr-primary); outline-offset: 2px; }
.tlNum {
  font-size: 11px; font-weight: 900;
  font-variant-numeric: tabular-nums; color: var(--pr-text-soft);
}
.tlBarra {
  width: 100%;
  background: linear-gradient(180deg, var(--pr-primary), var(--pr-surface-2));
  border-radius: var(--pr-2) var(--pr-2) 0 0;
  min-height: 6px;
}
.tlHora.isVentana .tlBarra { background: linear-gradient(180deg, var(--pr-success), var(--pr-primary)); }
.tlHora.isVentana .tlNum { color: var(--pr-text); }
.tlEtiqueta { font-size: 10px; color: var(--pr-text-faint); font-variant-numeric: tabular-nums; }

/* ---- razones ---------------------------------------------------------------------- */

.planRazones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.planRazones li {
  display: flex; align-items: baseline; gap: var(--pr-2);
  font-size: var(--pr-small); line-height: 1.5;
}
.planRazones li b { flex: 0 0 auto; width: 14px; font-weight: 900; }
.planRazones .isSuma b { color: var(--pr-success); }
.planRazones .isResta b { color: var(--pr-danger); }

/* ---- qué llevo hoy ------------------------------------------------------------------ */

.eqGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--pr-3); }
.eqGrupo h4 {
  margin: 0 0 var(--pr-1);
  font-size: var(--pr-caption); color: var(--pr-text-faint);
  text-transform: uppercase; letter-spacing: .04em;
}
.eqGrupo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.eqGrupo li { font-size: var(--pr-small); line-height: 1.4; }
.eqGrupo li small { display: block; font-size: 11px; color: var(--pr-text-faint); }
.eqGrupo li.isAviso { color: var(--pr-danger); font-weight: 700; }

/* ---- acciones ------------------------------------------------------------------------ */

.planAcciones { display: flex; flex-direction: column; gap: var(--pr-2); margin-top: var(--pr-5); }

/* ---- comparador ----------------------------------------------------------------------- */

.cmpGanador {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--pr-3) var(--pr-4); margin-bottom: var(--pr-4);
  background: var(--pr-primary-soft);
  border: 1px solid var(--pr-primary);
  border-radius: var(--pr-r-card);
}
.cmpGanador span {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pr-text-faint); font-weight: 900;
}
.cmpGanador b { font-size: var(--pr-h2); }
.cmpGanador small { font-size: var(--pr-caption); color: var(--pr-text-soft); }

/* Tarjetas que se deslizan, no una tabla: cuatro columnas de catorce filas en
   un móvil no hay quien las lea. */
.cmpTarjetas {
  display: flex; gap: var(--pr-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--pr-2);
}
.cmpTarjeta {
  flex: 0 0 82%; max-width: 320px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--pr-3);
  background: var(--pr-surface-1);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card);
}
.cmpTarjeta header { display: flex; align-items: center; justify-content: space-between; gap: var(--pr-2); }
.cmpTarjeta header b { font-size: var(--pr-small); }
.cmpFila {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pr-2);
  padding: 4px 0; border-bottom: 1px solid var(--pr-border);
  font-size: var(--pr-caption);
}
.cmpFila span { color: var(--pr-text-faint); }
.cmpFila b { font-variant-numeric: tabular-nums; }
.cmpFila i { color: var(--pr-text-faint); font-size: 11px; font-style: italic; }
.cmpTarjeta .prBtn { margin-top: var(--pr-2); }

@media (min-width: 840px) {
  .cmpTarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); overflow: visible; }
  .cmpTarjeta { flex: 1 1 auto; max-width: none; }
}

/* ---- pasos dentro de los resultados ------------------------------------------------------ */

.hoyItem {
  display: flex; flex-direction: column;
  border: 1px solid var(--pr-border); border-radius: var(--pr-r-card);
  overflow: hidden; margin-bottom: var(--pr-2);
}
.hoyPasos {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pr-2);
  padding: var(--pr-2) var(--pr-3);
  border-top: 1px solid var(--pr-border);
}
.hoyComparar {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; font-size: var(--pr-caption); color: var(--pr-text-soft); cursor: pointer;
}
.hoyComparar input { width: 18px; height: 18px; accent-color: var(--pr-primary); }

.hoyBarraComparar {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--pr-3);
  margin-top: var(--pr-3); padding: var(--pr-3);
  background: var(--pr-surface-2);
  border: 1px solid var(--pr-primary);
  border-radius: var(--pr-r-card);
  font-size: var(--pr-small);
}

/* ---- modo jornada ------------------------------------------------------------------------ */

.jorCabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pr-3);
  padding-bottom: var(--pr-3); border-bottom: 1px solid var(--pr-border);
}
.jorCabecera b { font-size: var(--pr-h3); display: block; }
.jorCabecera small { font-size: var(--pr-caption); color: var(--pr-text-faint); font-variant-numeric: tabular-nums; }
.jorPunto {
  width: 10px; height: 10px; border-radius: 50%; background: var(--pr-success);
  animation: planLatir 2s ease-in-out infinite;
}

/* Botones grandes: se usan con una mano, de pie y con las manos mojadas. */
.jorAcciones { display: flex; gap: var(--pr-2); margin-top: var(--pr-3); }
.jorAcciones .prBtn { flex: 1 1 0; min-height: 48px; }

.jorEventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pr-2); }
.jorEventos li {
  display: flex; align-items: baseline; gap: var(--pr-2);
  padding: var(--pr-2); background: var(--pr-surface-1);
  border-radius: var(--pr-2); font-size: var(--pr-small);
}
.jorEventos li b { flex: 0 0 auto; }
.jorEventos li span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.jorEventos li time { flex: 0 0 auto; font-size: 11px; color: var(--pr-text-faint); }

.jorResumen { text-align: center; padding: var(--pr-4) 0; }
.jorResumen h3 { margin: 0 0 var(--pr-4); font-size: var(--pr-h2); }
.jorCifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pr-2); }
.jorCifras div {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--pr-3) var(--pr-1);
  background: var(--pr-surface-1); border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card);
}
.jorCifras b { font-size: var(--pr-h3); font-variant-numeric: tabular-nums; }
.jorCifras small { font-size: 10px; color: var(--pr-text-faint); }
.jorXp { margin: var(--pr-4) 0 0; font-size: var(--pr-h3); font-weight: 900; color: var(--pr-success); }

/* ---- puerta de entrada del planificador ---------------------------------------- */

.buscForm { display: flex; flex-direction: column; gap: var(--pr-3); }
.buscRadios { border: 0; margin: 0; padding: 0; }
.buscRadios legend {
  padding: 0 0 var(--pr-2);
  font-size: var(--pr-caption); color: var(--pr-text-faint);
  text-transform: uppercase; letter-spacing: .04em;
}

/* Los chips de especie pueden ser muchos: se envuelven y hacen scroll vertical
   en vez de comprimirse hasta ser ilegibles. */
.espChips { flex-wrap: wrap; max-height: 40vh; overflow-y: auto; }

/* ---- mis planificaciones -------------------------------------------------------- */

.planLista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pr-2); }

.planFila {
  display: flex; align-items: stretch; gap: var(--pr-2);
  background: var(--pr-surface-1);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card);
  overflow: hidden;
}
.planFilaAbrir {
  flex: 1 1 auto; min-width: 0; min-height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--pr-3);
  padding: var(--pr-3);
  background: transparent; border: 0; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.planFilaAbrir:hover { background: var(--pr-surface-2); }
.planFilaInfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.planFilaInfo b { font-size: var(--pr-small); }
.planFilaInfo small { font-size: var(--pr-caption); color: var(--pr-text-faint); }
.planFilaScore {
  flex: 0 0 auto;
  font-size: var(--pr-h3); font-weight: 900;
  font-variant-numeric: tabular-nums; color: var(--pr-primary);
}
.planFilaBorrar {
  flex: 0 0 auto; width: 44px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-left: 1px solid var(--pr-border);
  color: var(--pr-text-faint); cursor: pointer;
}
.planFilaBorrar:hover { color: var(--pr-danger); background: var(--pr-surface-2); }

/* ---- comparación entonces / ahora ------------------------------------------------- */

/* Los dos números juntos y del mismo tamaño: enseñar solo el de ahora ocultaría
   que las condiciones han cambiado desde que se planificó. */
.planComparaScore {
  display: flex; align-items: center; justify-content: center; gap: var(--pr-4);
  margin: var(--pr-4) 0;
  padding: var(--pr-4);
  background: var(--pr-surface-1);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card);
}
.planComparaScore > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.planComparaScore small {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pr-text-faint); font-weight: 900;
}
.planComparaScore b { font-size: var(--pr-h1, 30px); font-variant-numeric: tabular-nums; }
.planFlecha { color: var(--pr-text-faint); }

/* ---- pasos dentro de la ficha del pesquero ------------------------------------------ */

.fichaPasos {
  display: flex; gap: var(--pr-2);
  margin: var(--pr-3) 0;
}
.fichaPasos .prBtn { flex: 1 1 0; }

/* ---- radar de condiciones --------------------------------------------------------
 *
 * Sin animación de espera: cuando esto se pinta el cálculo ya está hecho, así
 * que una barra de progreso solo haría esperar por nada.
 *
 * Un factor sin dato se marca con una raya y el texto "Información no
 * disponible", no con un visto atenuado: la diferencia entre "se ha mirado" y
 * "no había dato" tiene que leerse, no intuirse por el tono del gris.
 */

.radarLista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.radarLista li {
  display: flex; align-items: center; gap: var(--pr-3);
  padding: var(--pr-2) 0;
  border-bottom: 1px solid var(--pr-border);
  font-size: var(--pr-small);
}
.radarLista li:last-child { border-bottom: 0; }

.radarMarca {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-weight: 900;
}
.radarLista .isOn .radarMarca {
  background: var(--pr-primary-soft);
  color: var(--pr-success);
  border: 1px solid var(--pr-success);
}
.radarLista .isOff .radarMarca {
  background: var(--pr-surface-2);
  color: var(--pr-text-faint);
  border: 1px solid var(--pr-border-strong);
}

.radarNombre { flex: 1 1 auto; min-width: 0; }
.radarLista .isOff .radarNombre { color: var(--pr-text-faint); }

.radarValor {
  flex: 0 0 auto;
  font-size: var(--pr-caption);
  color: var(--pr-text-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.radarValor i { color: var(--pr-text-faint); font-size: 11px; font-style: italic; }

/* ---- seguridad como override -------------------------------------------------------
 *
 * Va arriba del todo, antes del score. Si primero se lee "92/100" y luego, más
 * abajo, "no salgas", la gente ya ha decidido: el orden de lectura es parte
 * del aviso.
 *
 * Lleva icono, color Y texto. Un borde rojo por sí solo no dice qué pasa.
 */

.segAviso {
  display: flex; align-items: flex-start; gap: var(--pr-3);
  margin-bottom: var(--pr-4); padding: var(--pr-3) var(--pr-4);
  border-radius: var(--pr-r-card);
  border: 1px solid var(--pr-border-strong);
  background: var(--pr-surface-1);
}
.segAviso b { display: block; font-size: var(--pr-small); }
.segAviso small { display: block; margin-top: 2px; font-size: var(--pr-caption); color: var(--pr-text-soft); }
.segIcono { flex: 0 0 auto; }

.segAviso.isPeligro {
  border-color: var(--pr-danger);
  background: rgba(224, 97, 114, .12);
}
.segAviso.isPeligro .segIcono, .segAviso.isPeligro b { color: var(--pr-danger); }

.segAviso.isPrecaucion { border-color: var(--pr-primary); background: var(--pr-primary-soft); }
.segAviso.isPrecaucion .segIcono { color: var(--pr-primary); }

/* En el comparador, la tarjeta descartada se marca entera: en una fila de
   cuatro hay que ver de un vistazo cuál no entra. */
.cmpTarjeta.isPeligro { border-color: var(--pr-danger); }
.cmpPeligro {
  display: flex; align-items: center; gap: 6px;
  margin: calc(var(--pr-3) * -1) calc(var(--pr-3) * -1) var(--pr-2);
  padding: 6px var(--pr-3);
  background: rgba(224, 97, 114, .16);
  color: var(--pr-danger);
  border-radius: var(--pr-r-card) var(--pr-r-card) 0 0;
  font-size: 11px; font-weight: 900;
}

/* ---- previsión de 7 días -----------------------------------------------------
 *
 * La confianza va escrita en CADA día, no una vez al principio: quien mira el
 * sábado tiene que ver ahí mismo que eso es una tendencia, no una hora.
 */

.semLista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pr-2); }

.semDia button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pr-3);
  width: 100%; min-height: 62px;
  padding: var(--pr-3);
  background: var(--pr-surface-1);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--pr-fast) var(--pr-ease);
}
.semDia button:hover { border-color: var(--pr-primary); }
.semDia button:focus-visible { outline: 2px solid var(--pr-primary); outline-offset: 2px; }

.semFecha { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.semFecha b { font-size: var(--pr-small); text-transform: capitalize; }
.semFecha small { font-size: var(--pr-caption); color: var(--pr-text-faint); }

.semDerecha { display: flex; align-items: center; gap: var(--pr-2); flex: 0 0 auto; }