/* PescaRadar · ficha de ubicación visual
 *
 * Esta hoja solo compone la ficha nueva. Reutiliza los tokens globales y no
 * redefine el branding ni crea un segundo sistema de componentes.
 */

.fFicha {
  --f-green: #59e5ad;
  --f-cyan: #46d3f1;
  --f-border: rgba(112, 214, 229, .22);
  color: var(--pr-text);
  font-size: var(--pr-small);
}
.fFicha *, .fFicha *::before, .fFicha *::after { box-sizing: border-box; }
.fFicha button, .fFicha a { -webkit-tap-highlight-color: transparent; }
.fFicha button:focus-visible, .fFicha a:focus-visible, .fFicha summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--f-cyan) 52%, transparent);
  outline-offset: 2px;
}

.fEstadoCarga {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 10px; padding: 11px 13px;
  border: 1px solid rgba(70, 211, 241, .32); border-radius: 14px;
  background: rgba(8, 42, 54, .92); color: #dff8fc;
  font-weight: 750; line-height: 1.35;
}
.fEstadoCarga--loading::before, .fEstadoCarga--cached::before {
  content: ""; flex: 0 0 auto; width: 15px; height: 15px;
  border: 2px solid rgba(70, 211, 241, .3); border-top-color: var(--f-cyan);
  border-radius: 50%; animation: fGiro .8s linear infinite;
}
.fEstadoCarga--error { border-color: rgba(255, 151, 134, .48); background: rgba(66, 28, 29, .9); }
.fEstadoCarga--empty { border-color: var(--f-border); color: var(--pr-text-soft); }
.fEstadoCarga span { flex: 1; }
.fReintentar {
  min-height: 40px; padding: 8px 12px; border: 1px solid currentColor;
  border-radius: 11px; background: transparent; color: inherit; font-weight: 800; cursor: pointer;
}
@keyframes fGiro { to { transform: rotate(360deg); } }

/* Carga con la ficha todavia vacia. Va en el centro y ocupa sitio, porque una
   franja fina arriba se perdia y parecia que la app se habia colgado. */
.fFicha { position: relative; }
.fCargaCentro {
  position: absolute; inset: 0; z-index: 6;
  /* Centrado horizontal, pero arriba en vertical con un margen: si la ficha
     fuese mas alta que la ventana, un centrado real dejaria el aviso fuera de
     vista, que es justo lo contrario de lo que se quiere. */
  display: grid; justify-items: center; align-content: start;
  padding: min(16vh, 110px) 24px 24px;
  background: linear-gradient(180deg, rgba(6,27,35,.86), rgba(6,27,35,.96));
  backdrop-filter: blur(3px);
  border-radius: 22px;
}
.fCargaCaja {
  display: grid; justify-items: center; gap: 9px; max-width: 300px;
  padding: 22px 20px; text-align: center;
  border: 1px solid rgba(70, 211, 241, .3); border-radius: 18px;
  background: rgba(8, 42, 54, .96);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .38);
}
.fCargaCaja b { color: #dff8fc; font: 800 15px/1.3 var(--pr-font); }
.fCargaCaja small { color: var(--pr-text-soft); font-size: 11px; line-height: 1.45; }
.fCargaGiro {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(70, 211, 241, .26); border-top-color: var(--f-cyan);
  animation: fGiro .8s linear infinite;
}

/* Flechas del carril de horas. En movil sobran: se arrastra con el dedo. */
.fAvanceFlecha { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fAvanceCarril { padding-inline: 30px; }
  .fAvanceFlecha {
    position: absolute; top: 50%; z-index: 3;
    display: grid; place-items: center;
    width: 28px; height: 44px; margin-top: -26px; padding: 0;
    border: 1px solid var(--f-border); border-radius: 11px;
    background: rgba(8, 42, 54, .96); color: #dff8fc;
    font: 700 19px/1 var(--pr-font); cursor: pointer;
    transition: opacity .15s ease, border-color .15s ease;
  }
  .fAvanceFlecha:hover:not(:disabled) { border-color: var(--f-cyan); }
  .fAvanceFlecha:disabled { opacity: .28; cursor: default; }
  .fAvanceFlecha--izq { left: 0; }
  .fAvanceFlecha--der { right: 0; }
  .fAvanceCarril.sinDesplazamiento,
  .fAvanceCarril.sinDesplazamiento .fAvanceFlecha,
  /* Las del selector de días son más bajas: las pastillas también lo son. */
  /* Con flechas ya no hace falta insinuar el borde. */
  .fAvanceCarril::after { display: none; }
}
.fAvance:focus-visible { outline: 2px solid var(--f-cyan); outline-offset: 3px; border-radius: 15px; }

/* La cabecera antigua sirve de tirador cuando la hoja está minimizada. Al
   expandirla, el hero nuevo pasa a ser la única cabecera. */
.sheet.fichaRedisenada.open .head { display: none; }
.sheet.fichaRedisenada.open {
  max-height: calc(100dvh - var(--pr-safe-top) - 78px);
  border-radius: 28px 28px 22px 22px;
  background: linear-gradient(180deg, rgba(8, 35, 46, .985), rgba(4, 20, 28, .995));
}
.sheet.fichaRedisenada.open .body { padding: 0 12px 18px; }
.sheet.fichaRedisenada.open > .handle { margin-top: 10px; }

.fHero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 14px;
  min-height: 204px;
  padding: 22px 18px 18px;
  overflow: hidden;
  border: 1px solid var(--f-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 10%, rgba(70, 211, 241, .12), transparent 42%),
    linear-gradient(155deg, rgba(11, 43, 55, .94), rgba(5, 23, 31, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Cabecera compacta: nombre, zona, guardar y cerrar. El Score vive debajo de
   seguridad en el resumen de decisión, no dentro del hero. */
.fHero { min-height: 128px; padding: 20px 18px; align-content: center; }
.fHeroTexto { padding-right: 96px; }

/* Único control de contexto temporal de la ficha. */
.actContexto { margin-top: 10px; }
.actSelector {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 1px 8px;
  scrollbar-width: none;
}
.actSelector::-webkit-scrollbar, .actCalTira::-webkit-scrollbar { display: none; }
.actChip {
  flex: 0 0 auto; min-height: 44px; padding: 9px 13px;
  border: 1px solid var(--f-border); border-radius: 999px;
  background: rgba(10, 39, 50, .88); color: var(--pr-text-soft);
  font: 800 12px/1.2 var(--pr-font); cursor: pointer;
}
.actChip.active { border-color: var(--f-cyan); background: rgba(70,211,241,.14); color: #e2faff; }
.actCalendario {
  display: flex; align-items: stretch; gap: 5px; padding: 2px 0 11px;
  overflow: hidden; border-bottom: 1px solid var(--f-border);
}
.actCalTira {
  flex: 1; min-width: 0; display: flex; gap: 7px; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px;
}
.actCalFlecha {
  flex: 0 0 44px; min-height: 64px; border: 1px solid var(--f-border);
  border-radius: 12px; background: rgba(10,39,50,.88); color: var(--pr-text);
  font-size: 20px; cursor: pointer;
}
.actDia {
  position: relative; flex: 0 0 62px; min-height: 68px; padding: 7px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  scroll-snap-align: start; border: 1px solid var(--f-border); border-radius: 13px;
  background: rgba(8,35,45,.82); color: var(--pr-text); cursor: pointer;
}
.actDia span { color: var(--pr-text-soft); font-size: 11px; font-weight: 850; }
.actDia i { color: var(--pr-text-soft); font-style: normal; font-size: 12px; }
.actDia b { font: 900 17px/1 var(--pr-font-num); }
.actDia em { position: absolute; top: 2px; right: 4px; color: #f0d665; font-style: normal; }
.actDia.active { border-color: var(--f-cyan); background: rgba(70,211,241,.14); box-shadow: 0 0 0 1px var(--f-cyan); }
.actCalendarioCargando { min-height: 72px; }
.actCalendarioCargando .actEsqueleto { flex: 1; border-radius: 12px; background: rgba(34,75,87,.6); }
.actCalendarioError, .actError, .actCalendarioBloqueado, .actSinCalendario, .actContextoEstado {
  margin: 5px 0 10px; padding: 10px 12px; border: 1px solid var(--f-border);
  border-radius: 12px; color: var(--pr-text-soft); font-size: 12px; line-height: 1.45;
}
.actReintentar { min-width: 44px; min-height: 44px; margin-top: 7px; border: 1px solid var(--f-cyan); border-radius: 11px; background: transparent; color: var(--pr-text); font-weight: 800; }

/* Resumen único: Score, confianza, ventana y cuatro condiciones. */
.fDecision {
  display: grid; grid-template-columns: minmax(130px, .85fr) 1.15fr; gap: 12px;
  margin-top: 12px; padding: 15px; border: 1px solid rgba(89,229,173,.38);
  border-radius: 18px; background: linear-gradient(135deg, rgba(10,48,52,.9), rgba(7,31,42,.94));
}
.fDecisionScore { display: flex; flex-direction: column; align-items: flex-start; }
.fDecisionScore > span, .fDecisionCuando span, .fDecisionCondiciones span { color: var(--pr-text-soft); font-size: 11px; }
.fDecisionScore > b { margin: 4px 0; font: 900 40px/1 var(--pr-font-num); letter-spacing: -.06em; }
.fDecisionScore > b i { margin-left: 3px; color: var(--pr-text-soft); font: 700 14px/1 var(--pr-font); }
.fDecisionScore strong { font-size: 14px; }
.fDecisionScore small { margin-top: 4px; color: var(--pr-text-soft); font-size: 12px; }
.fDecisionCuando { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.fDecisionCuando div, .fDecisionCondiciones div { min-width: 0; }
.fDecisionCuando b, .fDecisionCondiciones b { display: block; margin-top: 3px; font-size: 13px; overflow-wrap: anywhere; }
.fDecisionCondiciones { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--f-border); }
.fDecision > p, .fDecisionAviso { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.45; }
.fDecision > p { color: #d7edf1; }
.fDecisionAviso { color: var(--pr-text-soft); }
.fDecisionCargando { display: flex; align-items: center; justify-content: space-between; min-height: 70px; color: var(--pr-text-soft); }

/* Barra del Score. Misma longitud que el numero, mismo color que la escala
   unica de `api.js`. No es un dato nuevo: es el mismo, legible sin leer. */
.fScoreBarra {
  width: 100%; height: 7px; margin: 8px 0 2px;
  overflow: hidden; border-radius: 999px;
  background: rgba(255,255,255,.09);
}
.fScoreBarra i {
  display: block; height: 100%; border-radius: inherit;
  transition: width var(--pr-base, 180ms) var(--pr-ease, ease);
}

/* Cuatro condiciones caben en fila en cuanto hay sitio; por debajo van en 2x2.
   A 360 px, cuatro columnas dejaban "27 °C" partido en dos lineas. */
@media (max-width: 519px) {
  .fDecisionCondiciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .fScoreBarra i { transition: none; }
}

.fFactoresServidor { display: grid; gap: 10px; }
.fFactorServidor > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.fFactorBarra { height: 6px; margin: 5px 0; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.fFactorBarra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--f-cyan),var(--f-green)); }
.fFactorServidor small, .fDatosResumen span { color: var(--pr-text-soft); font-size: 11px; }
.fFactoresAusentes { margin-top: 12px; color: var(--pr-text-soft); font-size: 12px; }
.fFactoresAusentes ul { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 6px 0 0; padding-left: 18px; }
.fDatosResumen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.fFuentesLista { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; }
.fFuentesLista li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--f-border); font-size: 12px; }
.fAccionesInvitado { grid-template-columns: minmax(0,220px); }

@media (max-width: 520px) {
  .fDecision { grid-template-columns: 1fr; }
  .fDecisionCondiciones { grid-column: 1; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fDecision > p, .fDecisionAviso { grid-column: 1; }
  .actCalFlecha { display: none; }
}
.fHeroArte {
  position: absolute;
  top: 24px; right: -28px;
  width: 58%;
  color: #9fdbe2;
  opacity: .24;
  pointer-events: none;
}
.fHeroArte svg { width: 100%; height: auto; }
.fHeroTexto { position: relative; z-index: 1; min-width: 0; padding-right: 22px; }
.fHeroNombre {
  max-width: 78%;
  margin: 0;
  font-size: clamp(25px, 7.3vw, 34px);
  line-height: 1.04;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.fHeroZona { margin: 9px 0 0; color: #8fc1ca; font-size: 13px; line-height: 1.4; }
.fFav {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--f-border); border-radius: 50%;
  background: rgba(4, 22, 30, .62); color: var(--pr-text);
  font-size: 25px; cursor: pointer;
}
.fFav.on { color: var(--f-green); border-color: rgba(89, 229, 173, .52); }
.fCierre {
  position: absolute; z-index: 3; top: 14px; right: 66px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--f-border); border-radius: 50%;
  background: rgba(4, 22, 30, .62); color: var(--pr-text);
  font: 700 25px/1 var(--pr-font); cursor: pointer;
}
.fHeroScore {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-width: 126px; padding: 13px 15px;
  border: 1px solid rgba(89, 229, 173, .62); border-radius: 18px;
  background: rgba(4, 28, 35, .72);
  box-shadow: 0 0 26px rgba(89, 229, 173, .08);
}
.fHeroScore b { font: 900 44px/1 var(--pr-font-num); letter-spacing: -.07em; }
.fHeroScore b i { margin-left: 4px; color: #c7dae0; font: 700 17px/1 var(--pr-font); letter-spacing: 0; }
.fHeroScore span { margin-top: 7px; color: #b4cbd2; font-size: 11px; }
.fHeroEstado {
  position: relative; z-index: 1; align-self: center;
  min-width: 0; padding-right: 8px;
}
.fHeroEstado strong { display: flex; align-items: center; gap: 8px; color: var(--f-green); font-size: 15px; }
.fHeroEstado strong i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.fHeroEstado p { margin: 7px 0 0 16px; color: #c7d9df; line-height: 1.45; }

.fLectura { margin: 12px 4px 0; color: #c7d9df; font-size: 13px; line-height: 1.5; }
.fLectura::before { content: "✦"; margin-right: 8px; color: var(--f-cyan); }

.fChips, .fTecnicas {
  display: flex; gap: 8px; overflow-x: auto;
  margin-top: 12px; padding: 1px 1px 5px;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.fChips::-webkit-scrollbar, .fTecnicas::-webkit-scrollbar { display: none; }
.fChip, .fTecnica {
  flex: 0 0 auto; min-height: 44px; padding: 9px 13px;
  border: 1px solid var(--f-border); border-radius: 14px;
  background: rgba(10, 39, 50, .88); color: var(--pr-text);
  font: 750 12px/1.2 var(--pr-font); scroll-snap-align: start;
}
.fTecnicas { margin-top: 4px; }
.fTecnica { cursor: pointer; color: var(--pr-text-soft); }
.fTecnica.on { border-color: var(--f-cyan); background: rgba(70, 211, 241, .14); color: #dff9ff; }

.fCondiciones {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px; margin-top: 8px;
}
.fCond {
  min-width: 0; padding: 11px 12px;
  border: 1px solid var(--f-border); border-radius: 15px;
  background: rgba(8, 35, 45, .8);
}
.fCond span, .fCond small { display: block; color: var(--pr-text-soft); font-size: 11px; }
.fCond b { display: block; margin: 5px 0 3px; color: #f0f8fa; font: 800 17px/1.15 var(--pr-font-num); overflow-wrap: anywhere; }
.fCond small { min-height: 14px; color: var(--f-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fCargando .fCond b, .fCargando .fHeroScore b, .fCargando .fLectura {
  color: transparent; border-radius: 6px;
  background: linear-gradient(90deg, #173640 25%, #244b57 50%, #173640 75%);
  background-size: 200% 100%; animation: fShimmer 1.2s infinite;
}
@keyframes fShimmer { to { background-position: -200% 0; } }

.fActividad {
  margin-top: 10px; padding: 13px 14px;
  border: 1px solid rgba(89, 229, 173, .34); border-radius: 17px;
  background: linear-gradient(100deg, rgba(16, 61, 54, .72), rgba(9, 43, 54, .78));
}
.fActividadVacia { display: flex; align-items: center; justify-content: space-between; border-color: var(--f-border); background: rgba(8, 35, 45, .7); }
.fActividadVacia span { color: var(--pr-text-soft); }
.fActTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.fActTop span { color: var(--pr-text-soft); }
.fActTop b { color: var(--f-green); }
.fActPeces { display: flex; gap: 6px; margin: 10px 0 7px; color: #31545b; }
.fPez { display: inline-flex; width: 27px; height: 16px; }
.fPez svg { width: 27px; height: 14px; }
.fPez.on { color: var(--f-green); filter: drop-shadow(0 0 5px rgba(89,229,173,.28)); }
.fActLinea { margin: 0; font-weight: 800; }
.fActPie { margin: 4px 0 0; color: var(--pr-text-soft); font-size: 11px; }

.fAcciones { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 8px; margin-top: 12px; }
.fBtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--f-border); border-radius: 15px;
  background: rgba(10, 39, 50, .88); color: var(--pr-text);
  font: 800 12px/1.2 var(--pr-font); text-decoration: none; text-align: center; cursor: pointer;
}
.fBtnPrimario { border-color: transparent; background: linear-gradient(135deg, #45d8f0, #54c4e9); color: #05202a; box-shadow: 0 7px 22px rgba(70, 211, 241, .18); }
.fBtnTerciario { width: 68px; padding-inline: 7px; font-size: 10px; }

.fMontaje {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; min-height: 52px; margin-top: 10px; padding: 10px 13px;
  border: 1px solid var(--f-border); border-radius: 15px;
  background: rgba(8, 35, 45, .72); color: var(--pr-text); text-align: left; cursor: pointer;
}
.fMontajeEtiqueta { font-weight: 800; }
.fMontajeValor { min-width: 0; overflow: hidden; color: var(--pr-text-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.fMontaje i { font-size: 24px; transition: transform var(--pr-base) var(--pr-ease); }
.fMontaje[aria-expanded="true"] i { transform: rotate(90deg); }
.fMontajeDetalle { padding: 10px 4px 0; }
.fMontajeDetalle[hidden] { display: none; }

.fTabs {
  position: sticky; top: 0; z-index: 4;
  display: flex; gap: 4px; overflow-x: auto;
  margin: 14px 0 0; padding: 7px 0 0;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(5,24,32,.98), rgba(5,24,32,.94));
  scrollbar-width: none;
}
.fTabs::-webkit-scrollbar { display: none; }
.fTab {
  flex: 0 0 auto; min-height: 44px; padding: 9px 12px;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--pr-text-soft);
  font: 750 12px/1 var(--pr-font); cursor: pointer;
}
.fTab.on { border-bottom-color: var(--f-cyan); color: #fff; }
.fPanel { padding: 14px 0 2px; animation: fPanelIn var(--pr-base) var(--pr-ease); }
@keyframes fPanelIn { from { opacity: .55; transform: translateY(3px); } }

.fObjetivo {
  display: grid; grid-template-columns: minmax(110px, 1fr) 1fr; align-items: center;
  min-height: 136px; padding: 13px;
  border: 1px solid var(--f-border); border-radius: 17px;
  background: rgba(8, 35, 45, .76);
}
.fObjetivoArte { color: #b4d6dc; }
.fObjetivoArte svg { width: 100%; height: auto; }
.fObjetivoTexto { display: flex; flex-direction: column; align-items: flex-start; }
.fObjetivoTexto span { color: var(--pr-text-soft); font-size: 11px; }
.fObjetivoTexto b { margin-top: 6px; font-size: clamp(24px, 7vw, 32px); line-height: 1; }
.fObjetivoTexto small { margin-top: 7px; color: var(--f-green); }
.fEspeciesMini { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.fEspecieMini { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 5px 9px; border: 1px solid var(--f-border); border-radius: 12px; color: var(--pr-text-soft); }
.fEspecieMini svg { width: 38px; height: 20px; color: #9fc6ce; }
.fConsejo, .fAviso { margin-top: 10px; padding: 13px; border: 1px solid var(--f-border); border-radius: 16px; background: rgba(8, 35, 45, .7); }
.fConsejo span, .fAviso strong { color: var(--f-cyan); font-weight: 800; }
.fConsejo p, .fAviso p { margin: 6px 0 0; color: #c9d9de; line-height: 1.55; }
.fAviso { border-color: rgba(224, 168, 60, .38); background: rgba(58, 45, 15, .34); }
.fAviso strong { color: #f1c96c; }

.fBloque { margin-top: 12px; }
.fBloque:first-child { margin-top: 0; }
.fBloque h4 { margin: 0 0 8px; color: #d8edf2; font-size: 12px; letter-spacing: .02em; }
.fLista, .fPeriodos { list-style: none; margin: 0; padding: 0; }
.fLista li, .fPeriodos li { padding: 9px 11px; border-bottom: 1px solid rgba(255,255,255,.06); color: #c7d9df; }
.fPeriodos small { display: block; margin-top: 3px; color: var(--pr-text-soft); }
.fDesglose { margin-top: 12px; border: 1px solid var(--f-border); border-radius: 15px; background: rgba(8,35,45,.7); overflow: hidden; }
.fDesglose summary { min-height: 48px; padding: 14px; cursor: pointer; font-weight: 800; }
.fDesglose .factorlist, .fDesglose .coverageTag { margin: 0 13px 13px; }

/* ---- Selector de día ---------------------------------------------------------
   Va justo bajo la cabecera porque es lo primero que se decide: qué día. Con
   ratón se desliza igual que la tira de horas; en táctil, con el dedo. */
.fFecha {
  position: relative; flex: 0 0 auto;
  display: grid; justify-items: center; gap: 1px;
  min-width: 62px; min-height: 44px; padding: 8px 9px 7px;
  border: 1px solid var(--f-border); border-radius: 14px;
  background: linear-gradient(160deg, rgba(11,43,55,.9), rgba(6,27,35,.94));
  color: var(--pr-text-soft); font: inherit; cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .15s ease, background .15s ease;
}
.fFecha:hover { border-color: rgba(70,211,241,.45); }
.fFecha.on {
  border-color: var(--f-cyan);
  background: linear-gradient(160deg, rgba(12,58,74,.96), rgba(7,34,44,.98));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--f-cyan) 30%, transparent);
}
.fFechaDia {
  font: 800 10px/1 var(--pr-font); text-transform: uppercase; letter-spacing: .07em;
}
.fFecha.on .fFechaDia { color: var(--f-cyan); }
.fFechaNum { font: 600 11px/1 var(--pr-font-num); color: var(--pr-text-soft); }
.fFecha > b { font: 900 18px/1.1 var(--pr-font-num); }
.fFecha > small { font-size: 9px; color: var(--pr-text-soft); white-space: nowrap; }
/* Confianza de la previsión: llena, media o vacía. Sin texto, para no cargar
   una pastilla de 62 px; el `title` lo dice con palabras. */
.fFechaConf {
  width: 18px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.14);
}
.fFechaConf--high { background: var(--f-green); }
.fFechaConf--medium { background: linear-gradient(90deg, var(--f-green) 60%, rgba(255,255,255,.14) 60%); }
.fFechaConf--low { background: linear-gradient(90deg, #d9a441 30%, rgba(255,255,255,.14) 30%); }
.fFechaConf--faint { background: linear-gradient(90deg, #8a6a3a 15%, rgba(255,255,255,.1) 15%); }
/* Los días a los que el modelo marino ya no llega. */
.fFechaSinMar {
  position: absolute; top: 4px; right: 6px;
  color: #6f8c96; font: 700 11px/1 var(--pr-font);
}

.fFechaHueco {
  flex: 0 0 auto; width: 62px; height: 68px; border-radius: 14px;
  background: linear-gradient(100deg, rgba(255,255,255,.03) 30%,
    rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 70%);
  background-size: 220% 100%; animation: fVeta 1.1s linear infinite;
}
@keyframes fVeta { to { background-position: -220% 0; } }
.fEnlaceBoton {
  padding: 0; border: 0; background: none; color: var(--f-cyan);
  font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer;
}

/* Aviso de que lo que se ve NO es de hoy. Sin esto, "Viento 12 km/h" bajo la
   cabecera de un jueves se lee como el viento de ahora mismo. */
.fAvisoDia {
  margin: 0 0 11px; padding: 8px 11px;
  border: 1px solid rgba(70,211,241,.24); border-radius: 12px;
  background: rgba(8,42,54,.7); color: var(--pr-text-soft);
  font-size: 11px; line-height: 1.45;
}
.fAvisoDia b { color: #dff8fc; }

.actError, .actCalendarioError {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px; border: 1px dashed rgba(255, 151, 134, .5);
  border-radius: 12px; color: var(--pr-text-soft); font-size: 12px;
}
.actError p { margin: 0; }
.actReintentar {
  min-height: 40px; padding: 7px 11px; border: 1px solid currentColor;
  border-radius: 10px; background: transparent; color: var(--pr-text);
  font: 700 12px/1 var(--pr-font); cursor: pointer;
}
.actCalendarioError { margin: 0 0 12px; border-style: solid; }
.actCalendarioCargando { display: flex; gap: 7px; }
.actCalendarioCargando .actEsqueleto {
  flex: 1; min-width: 48px; height: 64px; border-radius: 11px;
}
.actCalendarioBloqueado { margin: 0 0 12px; }
.actResumenEtiqueta { margin: 4px 0 8px; }
.fConf { font-weight: 700; }
.fConf--high { color: var(--f-green); }
.fConf--medium { color: #7fd4e8; }
.fConf--low { color: #d9a441; }

.fCondCuando {
  margin: 0 0 8px; color: var(--pr-text-soft); font-size: 11px; line-height: 1.45;
}
.fCondCuando b { color: #dff8fc; }

/* ---- Estado del mar ----------------------------------------------------------
   El periodo va con el mismo peso visual que la altura, que es el fondo del
   asunto: un metro con 12 s no es el mismo mar que un metro con 3 s. */
/* Rejilla de tarjetas, no lista de filas. Seis magnitudes en una columna
   ocupaban media pantalla y se leian como una tabla tecnica; en dos columnas
   caben de un vistazo y se pueden comparar entre si. `auto-fit` las pone en
   una sola columna cuando no hay sitio, sin necesidad de otra media query. */
.fMar { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.fMarFila {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; padding: 11px 12px;
  border: 1px solid var(--f-border); border-radius: 14px;
  background: rgba(11, 43, 55, .6);
}
/* El dato manda: grande arriba, rotulo pequeno debajo. */
.fMarFila > b { font: 800 20px/1.05 var(--pr-font-num); color: #dff8fc; overflow-wrap: anywhere; }
.fMarFila > span { color: var(--pr-text-soft); font-size: 11px; line-height: 1.3; }
.fMarFila > small { color: var(--pr-text-faint); font-size: 10px; }
.fMarLectura {
  margin: 9px 0 6px; padding: 9px 12px;
  border-left: 3px solid var(--f-cyan); border-radius: 0 10px 10px 0;
  background: rgba(8, 42, 54, .6);
  color: #cfe6ec; font-size: 12px; line-height: 1.5;
}

/* ---- Línea temporal horaria --------------------------------------------------
   Rejilla, no tarjetas: hay que poder seguir una fila con el dedo para ver cómo
   evoluciona una magnitud. La primera columna se queda fija al deslizar, porque
   una fila de números sin su etiqueta no dice nada. */


/* ---- Pleamares y bajamares ---------------------------------------------------
   Lista, no gráfica: el documento pide que la hora y la altura no queden
   escondidas dentro de un dibujo. */
/* Dos por fila cuando caben: los extremos de un dia son cuatro y en una sola
   columna estiraban la seccion sin anadir nada. La hora sigue siendo lo grande;
   el tipo y la altura la acompanan. */
.fMareas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 8px; margin: 0; padding: 0; list-style: none;
}
.fMarea {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px;
  padding: 11px 13px; border: 1px solid var(--f-border); border-radius: 14px;
  background: rgba(11,43,55,.66);
}
.fMarea .fMareaTipo { grid-column: 1 / -1; order: -1; }
.fMarea.alta { border-left: 3px solid var(--f-cyan); }
.fMarea.baja { border-left: 3px solid rgba(255,255,255,.18); }
.fMareaTipo {
  font: 800 11px/1 var(--pr-font); text-transform: uppercase; letter-spacing: .06em;
  color: var(--pr-text-soft);
}
.fMarea.alta .fMareaTipo { color: var(--f-cyan); }
.fMareaHora { font: 900 17px/1 var(--pr-font-num); color: #dff8fc; }
.fMareaAltura { min-width: 54px; text-align: right; font: 700 13px/1 var(--pr-font-num); color: var(--pr-text-soft); }

.fMareaAhora {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 9px;
}
.fMareaAhora > div {
  flex: 1 1 130px; padding: 9px 11px;
  border: 1px solid var(--f-border); border-radius: 13px; background: rgba(8,42,54,.7);
}
.fMareaAhora span {
  display: block; color: var(--pr-text-soft); font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em;
}
.fMareaAhora b { display: block; margin-top: 3px; font: 900 16px/1.15 var(--pr-font-num); color: #dff8fc; }
.fMareaAhora small { color: var(--pr-text-soft); font-size: 10px; }

/* Con 18 tarjetas el carril se sale de la pantalla y hay que decirlo: el
   degradado de la derecha se apaga solo al llegar al final. */
.fAvanceCarril { position: relative; }
.fAvanceCarril::after {
  content: ""; position: absolute; inset-block: 0; right: -2px; width: 34px;
  pointer-events: none; border-radius: 0 15px 15px 0;
  background: linear-gradient(90deg, rgba(6,27,35,0), rgba(6,27,35,.92));
}
.fAvanceCarril:has(.fAvance:not(:hover))::after { opacity: 1; }
.fBloqueApunte {
  margin-left: 7px; color: var(--pr-text-soft);
  font: 500 11px/1 var(--pr-font); letter-spacing: .02em;
}

/* Cambio de día. No es una tarjeta: es una marca vertical entre dos, para que
   un "03:00" no se lea como el de esta mañana. */
.fAvanceDia {
  flex: 0 0 auto; display: flex; align-items: center; align-self: stretch;
  padding: 0 2px; scroll-snap-align: start;
}
.fAvanceDia span {
  display: block; padding: 5px 3px; border-left: 1px solid var(--f-border);
  color: var(--pr-text-soft); font: 700 10px/1 var(--pr-font);
  letter-spacing: .09em; text-transform: uppercase;
  writing-mode: vertical-rl; text-orientation: mixed;
}

.fAvanceHora.esMejor {
  border-color: color-mix(in srgb, var(--f-green) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
              0 0 0 1px color-mix(in srgb, var(--f-green) 22%, transparent);
}

.fAvance {
  display: flex; gap: 8px; overflow-x: auto;
  margin-inline: -2px; padding: 2px 2px 9px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fAvance::-webkit-scrollbar { display: none; }
.fAvanceHora {
  flex: 0 0 clamp(108px, 31vw, 126px); min-width: 108px; min-height: 112px;
  padding: 12px; border: 1px solid var(--f-border); border-radius: 15px;
  background: linear-gradient(155deg, rgba(11,43,55,.94), rgba(6,27,35,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  scroll-snap-align: start;
}
.fAvanceTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fAvanceTop span { display: block; color: var(--pr-text-soft); font-size: 11px; }
.fAvanceTop i { color: var(--f-green); font: 900 18px/1 var(--pr-font); font-style: normal; }
.fAvanceHora > b { display: block; margin-top: 4px; font: 900 21px/1.15 var(--pr-font-num); }
.fAvanceHora > small { display: block; min-height: 14px; margin-top: 5px; color: var(--pr-text-soft); font-size: 9px; white-space: nowrap; }
.fAvancePeces { display: flex; gap: 2px; margin-top: 7px; }
.fPezMini { width: 7px; height: 4px; border-radius: 60% 40% 40% 60%; background: #24444d; }
.fPezMini.on { background: var(--f-green); }

.fMejorVentana { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid rgba(89,229,173,.35); border-radius: 16px; background: rgba(16,61,54,.45); }
.fMejorVentana span { color: var(--pr-text-soft); }
.fMejorVentana b { flex: 1; font-size: 20px; }
.fMejorVentana i { font-style: normal; font-weight: 900; }
.fPista { margin-top: 8px; }
.fPistaBanda { position: relative; height: 18px; border-radius: 99px; background: #102b34; overflow: hidden; }
.fBanda { position: absolute; top: 0; bottom: 0; background: rgba(70,211,241,.55); }
.fBanda.mayor { background: rgba(89,229,173,.75); }
.fPistaHoras { display: flex; justify-content: space-between; margin-top: 5px; color: var(--pr-text-faint); font-size: 10px; }
.fAstro, .fFuentes { color: var(--pr-text-soft); font-size: 11px; line-height: 1.5; }
.fFuentes a { color: var(--f-cyan); }

.fEspeciesGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fEspecieCard { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 9px; border: 1px solid var(--f-border); border-radius: 14px; background: rgba(8,35,45,.76); color: var(--pr-text); cursor: pointer; }
.fEspecieCard svg { width: 54px; height: 27px; flex: 0 0 auto; color: #a9ced5; }
.fSinArte { display: grid; place-items: center; width: 42px; height: 28px; color: var(--pr-text-faint); }
.fAtributos { display: grid; gap: 7px; }
.fAtributos > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--f-border); border-radius: 13px; background: rgba(8,35,45,.66); }
.fAtributos span { color: var(--pr-text-soft); }
.fAtributos b { text-align: right; }

@media (min-width: 620px) {
  .fCondiciones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fEspeciesGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 839px) {
  .sheet.fichaRedisenada.open {
    transform: translateY(var(--ficha-arrastre-y, 0px));
  }
  /* La barra inferior es `position: fixed` y flota POR ENCIMA de la hoja, asi
     que los ultimos 64 px de contenido quedaban debajo y no habia forma de
     leerlos: la tira de horas se cortaba justo por la fila de peces. */
  .sheet.fichaRedisenada.open .body {
    padding-bottom: calc(var(--pr-bottomnav-h, 64px) + var(--pr-safe-bottom, 0px) + 20px);
  }
  .sheet.fichaRedisenada.arrastrando { transition: none; user-select: none; }
  .sheet.fichaRedisenada.cerrando {
    transition: transform .18s cubic-bezier(.4, 0, 1, 1);
  }
  /* El tirador se ve de 28 px, pero se agarra en 44: la barrita fina es la
     senal, no el objetivo. Se estira la caja hacia arriba con padding en vez de
     hacerla mas alta, para no separar la cabecera del borde de la hoja. */
  .sheet.fichaRedisenada > .handle {
    position: sticky; top: 0; z-index: 8;
    display: block; width: 88px; height: 28px; min-height: 44px; margin: 0 auto;
    padding: 0; border: 0; border-radius: 0;
    background: transparent; cursor: grab; touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .sheet.fichaRedisenada > .handle::after {
    content: ""; position: absolute; top: 10px; left: 50%;
    width: 46px; height: 5px; border-radius: 99px;
    background: rgba(194, 231, 239, .32); transform: translateX(-50%);
  }
  .sheet.fichaRedisenada.arrastrando > .handle { cursor: grabbing; }
  .sheet.fichaRedisenada.open > .handle { margin-top: 0; }
}

@media (min-width: 840px) {
  .sheet.fichaRedisenada {
    left: auto; right: 18px; bottom: 18px;
    width: min(520px, calc(100vw - var(--pr-rail-w) - 54px));
    max-height: calc(100dvh - 36px);
    transform: none;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(8,35,46,.985), rgba(4,20,28,.995));
  }
  .sheet.fichaRedisenada .head, .sheet.fichaRedisenada > .handle { display: none; }
  .sheet.fichaRedisenada .body { padding: 12px 14px 18px; }
  .fHeroNombre { font-size: 32px; }
}

@media (max-width: 379px) {
  .sheet.fichaRedisenada.open .body { padding-inline: 8px; }
  .fHero { padding-inline: 14px; }
  .fHeroNombre { max-width: 82%; }
  .fHeroScore { min-width: 112px; padding-inline: 12px; }
  .fHeroScore b { font-size: 39px; }
  .fAcciones { grid-template-columns: 1fr 1fr; }
  .fBtnTerciario { width: auto; grid-column: 1 / -1; min-height: 44px; }
  .fTab { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fPanel, .fCargando .fCond b, .fCargando .fHeroScore b, .fCargando .fLectura,
  .fEstadoCarga--loading::before, .fEstadoCarga--cached::before { animation: none; }
  .sheet.fichaRedisenada.cerrando { transition-duration: .01ms; }
  /* Los giros y las vetas de carga tambien son decoracion: se quedan quietos.
     Se les deja algo de opacidad para que sigan leyendose como "esto carga". */
  .fCargador, .fCargadorMini, .fVeta, [class*="fCargando"] > * { animation: none !important; }
}

/* ---- Sectores ----------------------------------------------------------------
   Tramos dentro de un mismo pesquero. Cuando no hay, este bloque no existe: un
   apartado vacío repetido en 294 fichas sería ruido. */
.fSectores { display: grid; gap: 9px; }
.fSector {
  padding: 12px 13px; border: 1px solid var(--f-border); border-radius: 15px;
  background: linear-gradient(155deg, rgba(11,43,55,.9), rgba(6,27,35,.94));
}
.fSectorTop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.fSectorTop h5 { margin: 0; font: 800 14px/1.25 var(--pr-font); color: #dff8fc; }
.fSectorIr {
  flex: 0 0 auto; color: var(--f-cyan); font-size: 11px; font-weight: 700;
  text-decoration: none; border-bottom: 1px solid currentColor;
}
.fSector > p { margin: 7px 0 0; color: #cfe6ec; font-size: 12px; line-height: 1.55; }
.fSectorDatos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 7px; margin: 10px 0 0; padding: 0; list-style: none;
}
.fSectorDatos li {
  padding: 7px 9px; border: 1px solid var(--f-border); border-radius: 11px;
  background: rgba(6,27,35,.5);
}
.fSectorDatos span {
  display: block; color: var(--pr-text-soft); font-size: 9px;
  text-transform: uppercase; letter-spacing: .06em;
}
.fSectorDatos b { display: block; margin-top: 2px; font-size: 12px; color: #dff8fc; }
.fSectorLista { font-size: 12px; }
.fSectorLista span {
  color: var(--pr-text-soft); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em;
}
/* Los riesgos no son una etiqueta más: van marcados y en su propio bloque. */
.fSectorRiesgo {
  margin-top: 9px !important; padding: 8px 11px;
  border-left: 3px solid #ff9786; border-radius: 0 10px 10px 0;
  background: rgba(66, 28, 29, .55); color: #ffd9d2 !important; font-size: 12px;
}
.fSectorRiesgo b {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
}

/* Encabezado del montaje: de qué mar se está hablando. */
.rigMar {
  display: flex; align-items: baseline; gap: 9px;
  margin-bottom: 9px; padding: 9px 12px;
  border: 1px solid var(--f-border); border-radius: 12px;
  background: rgba(8, 42, 54, .6);
}
.rigMar span {
  color: var(--pr-text-soft); font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em;
}
.rigMar b { font: 800 13px/1.2 var(--pr-font); color: #dff8fc; }

/* ---- Especies según la jornada ----------------------------------------------
   Ordenadas por cómo les sientan las condiciones del día. La barra de la
   izquierda es la señal rápida; el número sigue siendo el Score, no una
   probabilidad de captura. */
.fEspeciesJornada { display: grid; gap: 7px; }
/* La tarjeta ya no es un botón: son dos acciones distintas dentro.
   Pulsarla elige la especie como objetivo; «Ver ficha» abre su Atlas. Un
   `<a>` dentro de un `<button>` es marcado inválido, de ahí el contenedor. */
.fEspecieJornada {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
  padding: 9px 12px 9px 10px;
  border: 1px solid var(--f-border); border-left: 3px solid var(--f-border);
  border-radius: 13px; background: rgba(11, 43, 55, .62);
}
.fEjElegir {
  display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 11px;
  min-width: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.fEjElegir:focus-visible { outline: 2px solid var(--f-cyan); outline-offset: 3px; border-radius: 9px; }
/* Discreto: la acción principal sigue siendo elegir la especie. */
.fEjFicha {
  flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 10px; border: 1px solid var(--f-border); border-radius: 999px;
  color: var(--pr-text-soft); font: 700 11px/1 var(--pr-font);
  text-decoration: none; white-space: nowrap;
}
.fEjFicha:hover, .fEjFicha:focus-visible { border-color: var(--f-cyan); color: var(--pr-text); }
/* Solo se destaca lo que el motor distingue de verdad: que coincida un patrón
   curado de la zona. No hay gradación por Score porque para las especies de un
   mismo pesquero el Score es el mismo número. */
.fEspecieJornada.conPatron { border-left-color: var(--f-green); }
.fEjArte { display: grid; place-items: center; color: #9fc4cf; }
.fEjArte svg { width: 100%; height: auto; }
.fSinArte { color: #3f5d67; font-size: 18px; }
.fEjTexto { min-width: 0; display: grid; gap: 2px; }
.fEjTexto b { font: 800 13px/1.2 var(--pr-font); color: #dff8fc; }
.fEjEtiqueta { color: var(--pr-text-soft); font-size: 11px; }
.fEjCebos, .fEjTalla {
  color: var(--pr-text-soft); font-size: 10px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fEjTalla { color: #7fd4e8; }
.fEjScore { text-align: right; white-space: nowrap; }
.fEjScore b { font: 900 19px/1 var(--pr-font-num); }
.fEjScore i { color: var(--pr-text-soft); font-style: normal; font-size: 10px; }

.fEjConPatron { color: var(--f-green) !important; font-weight: 700; }
.fEjNota { color: var(--pr-text-soft); font-size: 10px; line-height: 1.45; }


/* ---- Partes de condiciones ---------------------------------------------------
   Lo que cuenta quien está allí. Se distingue del resto de la ficha con un
   borde propio: no sale de un modelo. */
.fParteCabecera {
  margin: 0 0 9px; padding: 9px 12px;
  border-left: 3px solid var(--f-green); border-radius: 0 11px 11px 0;
  background: rgba(20, 56, 44, .5);
  color: #d6f3e4; font-size: 12px; line-height: 1.5;
}
.fParteAcuerdos, .fParteNotas {
  display: grid; gap: 5px; margin: 0 0 9px; padding: 0; list-style: none;
}
.fParteAcuerdos li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 10px;
  padding: 8px 11px; border: 1px solid var(--f-border); border-radius: 11px;
  background: rgba(11, 43, 55, .6);
}
.fParteAcuerdos span {
  color: var(--pr-text-soft); font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em;
}
.fParteAcuerdos b { font: 800 13px/1.2 var(--pr-font); color: #dff8fc; }
.fParteAcuerdos small { color: var(--pr-text-soft); font-size: 10px; }
.fParteNotas li {
  padding: 8px 11px; border: 1px solid var(--f-border); border-radius: 11px;
  background: rgba(6, 27, 35, .5); color: #cfe6ec; font-size: 12px; line-height: 1.5;
}
.fParteNotas small {
  display: block; margin-top: 3px; color: var(--pr-text-soft); font-size: 10px;
}
.fBtnParte {
  width: 100%; min-height: 44px; margin-top: 4px; padding: 11px 14px;
  border: 1px solid var(--f-border); border-radius: 13px;
  background: rgba(8, 42, 54, .8); color: #dff8fc;
  font: 700 13px/1.2 var(--pr-font); cursor: pointer;
}
.fBtnParte:hover { border-color: var(--f-green); }

/* El formulario, dentro de la hoja inferior. */
.fParteCampos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px;
  margin: 12px 0;
}
.fParteCampo { display: grid; gap: 4px; margin-bottom: 9px; }
.fParteCampo > span {
  color: var(--pr-text-soft); font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em;
}
.fParteCampo select, .fParteCampo input {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--f-border); border-radius: 12px;
  background: rgba(6, 27, 35, .8); color: #dff8fc; font: inherit; font-size: 13px;
}
.fParteAviso { margin: 8px 0; font-size: 12px; min-height: 18px; }
.fParteAviso.mal { color: #ff9786; }

/* ---- Seguridad y viento para pescar ------------------------------------------
   Van ANTES del Score. Un pesquero puede puntuar 92 con tormenta prevista: si el
   aviso queda debajo del número, el número decide. */
.fSeguridad {
  margin: 0 0 11px; padding: 11px 13px; border-radius: 14px;
  border: 1px solid var(--f-border); background: rgba(11, 43, 55, .7);
}
.fSeguridad.normal { border-color: rgba(78, 204, 136, .32); background: rgba(18, 76, 55, .46); }
.fSeguridad.normal strong { color: #a8efc5; }
.fSeguridad.cargando { color: var(--pr-text-soft); }
.fSeguridad.peligro {
  border-color: rgba(255, 151, 134, .55); background: rgba(66, 28, 29, .88);
}
.fSeguridad.precaucion {
  border-color: rgba(217, 164, 65, .5); background: rgba(58, 44, 20, .8);
}
.fSeguridad strong { display: block; font: 800 14px/1.25 var(--pr-font); color: #fff; }
.fSeguridad.peligro strong { color: #ffd9d2; }
.fSeguridad.precaucion strong { color: #ffe6b8; }
.fSeguridad p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #f0e2df; }
.fSeguridad small {
  display: block; margin-top: 7px; color: var(--pr-text-soft);
  font-size: 10px; line-height: 1.45;
}

/* Viento que no es peligroso pero estropea la jornada. */
.fVientoPesca {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  margin: 0 0 11px; padding: 10px 13px; border-radius: 14px;
  border: 1px solid var(--f-border); border-left: 3px solid #7fd4e8;
  background: rgba(11, 43, 55, .66);
}
.fVientoPesca.muy-fuerte { border-left-color: #d9a441; }
.fVientoPesca strong { font: 800 13px/1.25 var(--pr-font); color: #dff8fc; }
.fVientoCifra {
  justify-self: end; font: 900 15px/1 var(--pr-font-num); color: #dff8fc; white-space: nowrap;
}
.fVientoPesca p {
  grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.5;
  color: var(--pr-text-soft);
}

/* En la línea temporal, la hora en que el viento ya estorba. */
.fViento-fuerte { color: #ffd678 !important; }
.fViento-muy-fuerte, .fViento-extremo {
  color: #ff9786 !important; font-weight: 800;
}

/* ---- Cupos y prohibiciones ----------------------------------------------------
   Una prohibición pesa más que una talla: saber que el mero no se puede retener
   importa más que saber cuánto mide. */
.fEjProhibida {
  display: inline-block; margin-top: 3px; padding: 2px 8px;
  border-radius: 999px; background: rgba(66, 28, 29, .9);
  border: 1px solid rgba(255, 151, 134, .5);
  color: #ffd9d2 !important; font-size: 10px; font-weight: 800;
}
.fCupos { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fCupos li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--f-border); border-radius: 12px;
  background: rgba(11, 43, 55, .6);
}
.fCupos span { color: var(--pr-text-soft); font-size: 12px; }
.fCupos b { font: 900 16px/1 var(--pr-font-num); color: #dff8fc; }
.fCupos small { color: var(--pr-text-soft); font-size: 10px; }

/* ---- Pestana Prediccion: linea temporal ------------------------------------
 *
 * Etiquetas fijas + horas que se deslizan. En movil no caben veinticuatro
 * horas en 375 px sin volverlas ilegibles, asi que la columna de etiquetas se
 * queda pegada con `position: sticky` y solo se desplaza la zona de horas.
 *
 * La columna seleccionada se distingue por BORDE y FONDO, no solo por color:
 * quien no distinga colores tiene que poder seguirla igual.
 */

.fPredCabecera { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--pr-surface-2); border: 1px solid var(--f-border) }
.fPredCabecera b { display: block; font-size: 13px; color: var(--pr-text);
  text-transform: capitalize }
.fPredCabecera p { margin: 3px 0 0; font-size: 10px; line-height: 1.55;
  color: var(--pr-text-soft) }

/* Curva de actividad horaria. El SVG ya se generaba con los 24 scores reales,
   pero el rediseño perdió tanto su inserción como sus estilos y la gráfica
   quedaba invisible. La escala permanece siempre en 0–100 para no exagerar
   diferencias pequeñas entre horas. */
.actGrafica {
  margin: 0 0 14px; padding: 13px 12px 11px;
  overflow: hidden; border: 1px solid var(--f-border); border-radius: 15px;
  background: linear-gradient(160deg, rgba(10, 43, 55, .9), rgba(5, 25, 34, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.actGraficaTitulo { margin: 0 0 9px; color: #dff8fc; font-size: 12px; }
.actLienzo { position: relative; height: 210px; }
.actLienzo svg { display: block; width: 100%; height: 210px; overflow: visible; }
.actEjeY {
  position: absolute; z-index: 2; inset: 0; pointer-events: none;
  color: #789aa4; font: 650 9px/1 var(--pr-font-num);
}
.actEjeY span { position: absolute; left: 1px; transform: translateY(-50%); }
.actEjeX {
  position: relative; height: 17px; margin-top: 1px;
  color: #789aa4; font: 650 9px/1 var(--pr-font-num);
}
.actEjeX span { position: absolute; top: 2px; transform: translateX(-50%); }
.actGuia { stroke: rgba(151, 199, 209, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.actBanda { fill: rgba(89, 229, 173, .1); stroke: rgba(89, 229, 173, .22);
  stroke-width: 1; vector-effect: non-scaling-stroke; }
.actC0 { stop-color: #527481; }
.actC25 { stop-color: #4ca4bd; }
.actC50 { stop-color: #46d3f1; }
.actC75 { stop-color: #59e5ad; }
.actC100 { stop-color: #f1cf68; }
.actA0 { stop-color: #527481; stop-opacity: .03; }
.actA25 { stop-color: #4ca4bd; stop-opacity: .08; }
.actA50 { stop-color: #46d3f1; stop-opacity: .14; }
.actA75 { stop-color: #59e5ad; stop-opacity: .22; }
.actA100 { stop-color: #f1cf68; stop-opacity: .28; }
.actArea { fill: url(#actAreaDeg); stroke: none; }
.actLinea { fill: none; stroke: url(#actLineaDeg); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(70, 211, 241, .3)); }
.actPunto { fill: #dffaff; stroke: rgba(5, 25, 34, .9); stroke-width: 1.5;
  vector-effect: non-scaling-stroke; }
.actAhoraLinea { stroke: rgba(234, 252, 255, .52); stroke-width: 1.2;
  stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.actAhoraTexto {
  position: absolute; z-index: 3; top: 0; transform: translateX(-50%);
  padding: 2px 5px; border-radius: 999px; background: rgba(5, 25, 34, .88);
  color: #dff8fc; font: 750 9px/1 var(--pr-font); pointer-events: none;
}
.actPico { fill: #f1cf68; stroke: #071e28; stroke-width: 2.2;
  vector-effect: non-scaling-stroke; }
.actElegidaLinea { stroke: var(--f-cyan); stroke-width: 1.6;
  vector-effect: non-scaling-stroke; }
.actElegidaPunto { fill: #fff; stroke: var(--f-cyan); stroke-width: 3;
  vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--f-cyan)); }
.actZona { fill: transparent; cursor: pointer; }
.actZona:hover, .actZona:focus { fill: rgba(70, 211, 241, .07); outline: none; }
.actZona.elegida { fill: rgba(70, 211, 241, .05); }
.actTabla { margin-top: 8px; color: var(--pr-text-soft); font-size: 10px; }
.actTabla summary { min-height: 36px; padding: 10px 2px; color: #9fc5ce;
  font-weight: 700; cursor: pointer; }
.actTabla table { width: 100%; border-collapse: collapse; }
.actTabla th, .actTabla td { padding: 6px; border-bottom: 1px solid var(--f-border); text-align: left; }
.actTabla th { color: #dff8fc; }

@media (max-width: 420px) {
  .actGrafica { padding-inline: 8px; }
  .actGraficaTitulo { padding-left: 4px; }
  .actLienzo, .actLienzo svg { height: 190px; }
}

/* El carril: una rejilla de filas. Cada fila = etiqueta pegada + pista. */
.fPredCarril { position: relative; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scrollbar-width: thin; padding-bottom: 2px }
.fPredCarril::-webkit-scrollbar { height: 6px }
.fPredCarril::-webkit-scrollbar-thumb { background: var(--f-border);
  border-radius: 3px }

/* `width: max-content` es lo que hace funcionar la etiqueta pegada.
   Sin ella la fila mide lo que el viewport, la etiqueta se queda anclada a ese
   ancho y al desplazar el carril se va con las horas: comprobado, salia en
   -130 px. Con `max-content` la fila abarca todo lo desplazable y `sticky`
   tiene contra que pegarse. */
.fPredFila { display: flex; align-items: stretch; min-height: 30px; width: max-content;
  min-width: 100% }
.fPredEtiqueta { position: sticky; left: 0; z-index: 2; flex: 0 0 88px; width: 88px;
  display: flex; align-items: center; gap: 4px; padding: 0 8px 0 2px;
  font-size: 10px; color: var(--pr-text-soft);
  background: var(--pr-surface-1); border-right: 1px solid var(--f-border) }
.fPredEtiqueta i { font-style: normal; opacity: .6; font-size: 9px }
.fPredPista { display: flex; align-items: stretch; flex: 0 0 auto }

.fPredCelda { flex: 0 0 44px; width: 44px; display: flex; align-items: center;
  justify-content: center; font-size: 11px; color: var(--pr-text);
  border-right: 1px solid transparent }
.fPredCelda i { font-style: normal; font-size: 14px }

/* La hora: es el control. Area tactil de 40 px de alto. */
.fPredFilaHoras { border-bottom: 1px solid var(--f-border) }
.fPredHora { flex: 0 0 44px; width: 44px; min-height: 40px; border: 0; background: none;
  color: var(--pr-text-soft); font-size: 12px; font-weight: 800; cursor: pointer;
  border-top: 2px solid transparent }
.fPredHora.sel { color: var(--pr-text); border-top-color: var(--f-cyan) }
.fPredHora:focus-visible { outline: 2px solid var(--f-cyan); outline-offset: -2px }

/* Columna seleccionada: se sigue en vertical de la hora a la ultima fila. */
.fPredCelda.sel, .fPredHora.sel { background: color-mix(in srgb, var(--f-cyan) 13%, transparent) }
.fPredFilaScore .fPredCelda.sel { background: color-mix(in srgb, var(--f-cyan) 20%, transparent) }

.fPredFilaScore { min-height: 36px; border-bottom: 1px solid var(--f-border) }
.fPredFilaScore .fPredEtiqueta { font-weight: 900; color: var(--pr-text) }
.fPredFilaScore .fPredCelda b { font-size: 15px; font-weight: 900 }

/* Avisos discretos: el color como informacion, no como decoracion. */
.fPredAviso { color: var(--pr-warning) }
.fPredMal { color: var(--pr-danger) }

/* Marea: curva real, alineada con la rejilla horaria. */
.fPredFilaMarea { min-height: 58px; border-bottom: 1px solid var(--f-border) }
.fPredMareaArea { fill: var(--f-cyan); opacity: .16 }
.fPredMareaCurva { fill: none; stroke: var(--f-cyan); stroke-width: 1.8;
  vector-effect: non-scaling-stroke }
.fPredMareaLinea { stroke: #dff3f7; stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .5 }
.fPredMareaPunto { fill: #eafcff; stroke: #0d2530; stroke-width: 2 }

.fPredExtremos { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0;
  font-size: 10px; color: var(--pr-text-soft) }
.fPredExtremos .ple { color: var(--f-cyan) }
.fPredExtremos .baj { color: var(--pr-text-soft) }

/* Detalle de la hora elegida, debajo del carril. */
.fPredDetalle { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  background: var(--pr-surface-2);
  border: 1px solid var(--f-border) }
.fPredDetalle b { font-size: 15px; font-weight: 900 }
.fPredDetalle em { font-style: normal; font-size: 11px; color: var(--pr-text-soft) }
.fPredDetalle span { flex-basis: 100%; font-size: 10px; color: var(--pr-text-soft) }

/* Escritorio: las etiquetas caben mas anchas y las columnas respiran. */
@media (min-width: 768px) {
  .fPredEtiqueta { flex-basis: 104px; width: 104px; font-size: 11px }
}

/* Procedencia de especies y cebos.
 *
 * Discreto pero legible: no es una alarma, es una etiqueta de origen. Que se
 * lea como advertencia seria pasarse; que no se lea, quedarse corto. */
.fProcedencia {
  margin: var(--pr-2) 0 0;
  padding: 8px 10px;
  border-left: 2px solid var(--pr-border-strong);
  border-radius: 0 6px 6px 0;
  background: var(--pr-surface-1);
  color: var(--pr-text-faint);
  font-size: var(--pr-caption);
  line-height: 1.5;
}
.fProcedencia b { color: var(--pr-text-soft); font-weight: 700 }
.fProcedencia.esComprobado { border-left-color: var(--pr-success) }
.fProcedencia.esComprobado b { color: var(--pr-success) }

/* Bloque bloqueado.
 *
 * Se ve, y se ve que está ahí. La tentación es dejar el hueco vacío, y es un
 * error: un bloque que desaparece no se lee como "esto necesita cuenta", se
 * lee como que la aplicación ha fallado, y quien piensa eso se va sin
 * registrarse.
 *
 * Discreto a propósito. No es un muro de pago gritando: es una parte de la
 * ficha esperando, con el mismo lenguaje visual que el resto. */
.fCandado {
  display: grid;
  justify-items: start;
  gap: var(--pr-1);
  margin: var(--pr-3) 0;
  padding: var(--pr-3);
  border-radius: var(--pr-3);
  border: 1px dashed var(--pr-border-strong, rgba(120, 170, 190, .34));
  background: var(--pr-surface-1, rgba(255, 255, 255, .02));
}
.fCandadoIcono { font-size: 18px; line-height: 1; opacity: .75 }
.fCandado h4 {
  margin: 0;
  font-size: var(--pr-body);
  font-weight: 800;
  color: var(--pr-text);
}
.fCandado p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--pr-caption);
  line-height: 1.45;
  color: var(--pr-text-soft);
}
.fCandado button { margin-top: var(--pr-1) }

/* El candado sin botón, para los bloques secundarios: mismo lenguaje, menos
   peso. Solo el panel de la pestaña abierta pide el registro; si lo pidieran
   los cuatro a la vez, la ficha entera sería un muro. */
.fCandadoSuave {
  padding: var(--pr-2) var(--pr-3);
  background: none;
  border-style: dashed;
  opacity: .82;
}
.fCandadoSuave h4 { font-size: var(--pr-caption) }
.fCandadoSuave p { font-size: var(--pr-caption) }

/* Franja de invitado. Informa, no bloquea: la ficha se lee entera debajo. */
.fInvitado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pr-2) var(--pr-3);
  margin-bottom: var(--pr-3);
  padding: var(--pr-3);
  border-radius: var(--pr-3);
  border: 1px solid var(--pr-primary);
  background: var(--pr-primary-soft);
}
.fInvitado b { flex: 0 0 auto; color: var(--pr-text); font-size: var(--pr-body) }
.fInvitado p {
  flex: 1 1 200px;
  margin: 0;
  color: var(--pr-text-soft);
  font-size: var(--pr-caption);
  line-height: 1.45;
}
.fInvitado button { flex: 0 0 auto }

/* ---- Tarjeta de pesca interior, con el lenguaje de la ficha -----------------
 *
 * Es otra tarjeta y otro contenido -un embalse no tiene Score, ni marea, ni
 * oleaje- pero no tiene por qué parecer de otra aplicación. Se le da la misma
 * paleta, las mismas cajas y los mismos chips que a la ficha del pesquero.
 *
 * Va por clase envolvente y no tocando `.ficha*` directamente: esas clases las
 * comparten las tarjetas de tiendas, clubes y guías, y no se arrastran aquí.
 */

.fichaAgua .fichaCabecera { align-items: center; gap: var(--pr-3) }
.fichaAgua .fichaIcono {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--pr-grad-mapa);
  border: 1px solid var(--pr-border);
  font-size: 22px;
}
.fichaAgua .fichaCabecera h2 {
  font-size: var(--pr-h2, 22px);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--pr-text);
}
.fichaAgua .fichaTipo {
  margin: 2px 0 0;
  color: var(--pr-text-soft);
  font-size: var(--pr-caption);
}

/* Cada apartado, como los bloques de la ficha: caja propia, no una lista con
   rayas. Las rayas hacían que todo pesara igual. */
.fichaAgua .fichaBloque {
  margin-top: var(--pr-3);
  padding: var(--pr-3);
  border: 1px solid var(--pr-border);
  border-top: 1px solid var(--pr-border);
  border-radius: var(--pr-3);
  background: var(--pr-surface-1);
}
.fichaAgua .fichaBloque h3 {
  margin: 0 0 var(--pr-2);
  font-size: var(--pr-caption);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pr-text-faint);
}
.fichaAgua .fichaBloque p { color: var(--pr-text-soft); font-size: var(--pr-caption); line-height: 1.55 }

.fichaAgua .fichaChips { display: flex; flex-wrap: wrap; gap: 6px }
.fichaAgua .fichaChip {
  padding: 5px 10px;
  border-radius: 99px;
  border: 1px solid var(--pr-border-strong);
  background: var(--pr-surface-2);
  color: var(--pr-text);
  font-size: var(--pr-caption);
  font-weight: 700;
}

.fichaAgua .fichaAccion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--pr-2);
  padding: 8px var(--pr-3);
  border-radius: 99px;
  border: 1px solid var(--pr-primary);
  background: var(--pr-primary-soft);
  color: var(--pr-text);
  font-size: var(--pr-caption);
  font-weight: 800;
  text-decoration: none;
}
.fichaAgua .fichaAccion:hover { border-color: var(--pr-text) }

/* El estado de pesca manda: va arriba y con color, como la seguridad en la
   ficha de costa. */
.fichaAgua .fichaAviso,
.fichaAgua .fichaAvisoMedio,
.fichaAgua .fichaAvisoGrave {
  margin-top: var(--pr-3);
  padding: var(--pr-3);
  border-radius: var(--pr-3);
  border-left: 3px solid var(--pr-border-strong);
  background: var(--pr-surface-1);
}
.fichaAgua .fichaAviso b,
.fichaAgua .fichaAvisoMedio b,
.fichaAgua .fichaAvisoGrave b { display: block; color: var(--pr-text); font-size: var(--pr-body) }
.fichaAgua .fichaAviso p,
.fichaAgua .fichaAvisoMedio p,
.fichaAgua .fichaAvisoGrave p {
  margin: 2px 0 0; color: var(--pr-text-soft);
  font-size: var(--pr-caption); line-height: 1.5;
}
.fichaAgua .fichaAvisoMedio { border-left-color: var(--pr-warning) }
.fichaAgua .fichaAvisoMedio b { color: var(--pr-warning) }
.fichaAgua .fichaAvisoGrave { border-left-color: var(--pr-danger) }
.fichaAgua .fichaAvisoGrave b { color: var(--pr-danger) }
.fichaAgua .fichaAvisoOk,
.fichaAguaEstado { border: 1px solid var(--pr-border); border-left: 3px solid var(--pr-accent); border-radius: 10px; padding: 10px 12px; background: rgba(66, 201, 255, .06); margin-top: 10px; }
.fichaAguaEstado { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fichaAguaEstado b { color: var(--pr-text); font-size: var(--pr-body); }
.fichaAguaEstado small { color: var(--pr-text-soft); font-size: var(--pr-caption); }
.fichaAguaEstado.fichaAvisoMedio { border-left-color: var(--pr-warning); }
.fichaAguaEstado.fichaAvisoGrave { border-left-color: var(--pr-danger); }

.fichaAgua .fichaNota,
.fichaAgua .fichaLegal {
  margin-top: var(--pr-3);
  color: var(--pr-text-faint);
  font-size: var(--pr-caption);
  line-height: 1.5;
}

/* Administración dentro de la tarjeta. Al final y en ámbar: es una herramienta
   de trabajo, no parte de lo que lee un pescador. */
.fichaAdmin {
  margin-top: var(--pr-4);
  padding: var(--pr-3);
  border-radius: var(--pr-3);
  border: 1px solid var(--pr-warning);
  background: rgba(224, 168, 60, .06);
}
.fichaAdmin h3 {
  margin: 0 0 var(--pr-2);
  font-size: var(--pr-caption);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pr-warning);
}
.fichaAdminNota {
  margin: 0 0 var(--pr-3);
  color: var(--pr-text-faint);
  font-size: var(--pr-caption);
  line-height: 1.5;
}
.fichaAdminBotones { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px }

/* ---- revisión de masa de agua ---------------------------------------------- */

.fichaRevGrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;
}
.fichaRevGrid > label {
  display: grid; gap: 3px;
  font-size: 10px; font-weight: 800; color: var(--pr-text-faint);
  text-transform: uppercase; letter-spacing: .05em;
}
.fichaRevAncho { grid-column: 1 / -1 }
.fichaRevGrid select, .fichaRevGrid input[type="url"],
.fichaRevGrid input[type="text"], .fichaRevGrid input[type="date"],
.fichaRevGrid textarea {
  width: 100%; min-height: 36px; padding: 6px 9px;
  border: 1px solid var(--pr-border); border-radius: 10px;
  background: var(--pr-surface-1); color: var(--pr-text);
  font: 600 13px/1.3 var(--pr-font);
}
.fichaRevGrid textarea { min-height: 52px; resize: vertical }
/* Las dos casillas son afirmaciones, no rótulos: en línea y sin mayúsculas. */
.fichaRevGrid label:has(input[type="checkbox"]) {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--pr-text);
}
.fichaRevTitulo {
  margin: 12px 0 6px; font-size: 11px; font-weight: 900;
  color: var(--pr-text-faint); text-transform: uppercase; letter-spacing: .06em;
}

/* Lo que falta se lee antes de tocar nada: es la guía de la revisión. */
.revFaltan { margin: 5px 0 0; padding-left: 17px }
.revFaltan li { margin-bottom: 3px; line-height: 1.45 }
.revOk { color: var(--pr-success) }

.fichaRevAccesos, .fichaRevRetirar { margin-top: 10px }
.fichaRevAccesos > summary, .fichaRevRetirar > summary {
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--pr-text-soft);
  padding: 6px 0;
}
.revListaAccesos { margin: 0 0 6px; padding-left: 17px }
.revListaAccesos li { font-size: 12.5px; line-height: 1.5; margin-bottom: 3px }
.revListaAccesos small { color: var(--pr-text-faint) }
.fichaAdminEstado {
  margin: var(--pr-2) 0 0;
  min-height: 1em;
  color: var(--pr-text-soft);
  font-size: var(--pr-caption);
}


/* ===========================================================================
   Globo de la grafica de actividad (§19).

   Dice hora, score, oleaje y viento sin salir de la curva. Antes habia que
   tocar un punto, leer la tarjeta de abajo, tocar otro y volver a leer.
   =========================================================================== */

.actTip {
  position: absolute; top: 6px; z-index: 4;
  min-width: 104px; max-width: 190px;
  padding: 7px 10px;
  border: 1px solid var(--f-border); border-radius: 12px;
  background: rgba(4, 20, 28, .96);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .38);
  /* No captura el puntero: si lo hiciera, moverse por la curva haria parpadear
     el globo cada vez que pasara por debajo de el. */
  pointer-events: none;
  font-size: 11px; line-height: 1.35;
}
.actTip[hidden] { display: none; }
.actTip b { display: block; font: 900 15px/1.1 var(--pr-font-num); }
.actTip span { display: block; margin-top: 1px; color: var(--pr-text); font-weight: 700; }
.actTip small { display: block; margin-top: 3px; color: var(--pr-text-soft); font-size: 10px; }

/* La columna fija de la tabla horaria se despega del contenido con una sombra
   cuando hay algo desplazado por debajo. Sin ella, al deslizar parecia que los
   numeros pasaban POR ENCIMA del rotulo en vez de por detras. */
.fPredEtiqueta::after {
  content: ""; position: absolute; top: 0; right: -10px; bottom: 0; width: 10px;
  background: linear-gradient(90deg, rgba(2, 12, 17, .38), transparent);
  pointer-events: none;
}
.fPredEtiqueta { position: sticky; }

/* ===========================================================================
   Esqueletos de carga de la ficha (§49).

   NO se inventa un sistema nuevo: el proyecto ya tiene `.prSkeleton` en
   `app.css`, con su pulso y su color. Aqui solo se le dan las formas que hacen
   falta en la ficha, para que el hueco tenga el alto del contenido que va a
   llegar y la pagina no pegue un salto al sustituirlo.
   =========================================================================== */

.fEsqueleto { display: grid; gap: 10px; }
/* El alto de cada pieza imita al del contenido real. */
.fEsqueleto .prSkeleton { height: 14px; border-radius: 8px; }
.fEsqueleto .esAlto { height: 92px; border-radius: 16px; }
.fEsqueleto .esMedio { height: 44px; border-radius: 12px; }
.fEsqueleto .esFila {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.fEsqueleto .esFila .prSkeleton { height: 38px; border-radius: 12px; }
/* La grafica: el alto exacto del lienzo, para que la curva no desplace nada. */
.fEsqueleto .esGrafica { height: 210px; border-radius: 16px; }
@media (max-width: 419px) { .fEsqueleto .esGrafica { height: 190px; } }


/* Sol y luna (§18). Compacta a proposito: son cuatro horas y una fase, no una
   seccion de astronomia. El nombre de la clase NO es : esa ya existe
   con otro estilo y heredaba un gris pequeno que se comia los numeros. */
.fSolLunaDatos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px;
}
.fSolLunaDato {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 9px 11px; border: 1px solid var(--f-border); border-radius: 13px;
  background: rgba(11, 43, 55, .55);
}
.fSolLunaDato b { font: 800 17px/1.05 var(--pr-font-num); color: #dff8fc; }
.fSolLunaDato span { color: var(--pr-text-soft); font-size: 11px; }
.fSolLunaFase {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 9px 0 0; padding: 9px 11px;
  border-left: 3px solid var(--f-cyan); border-radius: 0 10px 10px 0;
  background: rgba(8, 42, 54, .55);
}
.fSolLunaFase b { font-size: 13px; color: #dff8fc; }
.fSolLunaFase span { color: var(--pr-text-soft); font-size: 12px; }


/* Salida al atlas completo desde la pestaña Especies. */
.fEspeciesAtlas {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 10px; padding: 0 14px;
  border: 1px solid var(--f-border); border-radius: 999px;
  color: var(--pr-text-soft); font: 700 12px/1 var(--pr-font); text-decoration: none;
}
.fEspeciesAtlas:hover, .fEspeciesAtlas:focus-visible {
  border-color: var(--f-cyan); color: var(--pr-text);
}


/* Afinidad de especie del Atlas. Se distingue del patrón curado (verde) y del
   «sin orden»: son tres cosas distintas y el color lo dice. */
.fEjAfinidad { color: var(--f-cyan); font-weight: 800; }
.fEjSinAfinidad { color: var(--pr-warning, #ffc94a); }
.fEjPorque { color: var(--pr-text-soft); font-size: 10px; line-height: 1.4; }

/* ---- normativa y accesos de una masa de agua ---------------------------------- */

.fichaLegalEstado {
  display: grid; gap: 2px;
  margin: 0 0 8px !important; padding: 9px 12px;
  border-left: 4px solid var(--pr-border-strong); border-radius: 0 12px 12px 0;
  background: var(--pr-surface-1);
}
.fichaLegalEstado b { font-size: 14px }
.fichaLegalEstado small { color: var(--pr-text-soft); font-size: 11.5px }
/* Cuatro estados, cuatro colores. "Por revisar" es neutro a proposito: no es
   una advertencia, pero tampoco un permiso. */
.fichaLegalOk { border-left-color: var(--pr-success) }
.fichaLegalAviso { border-left-color: var(--pr-warning) }
.fichaLegalGrave { border-left-color: var(--pr-danger) }
.fichaLegalNeutro { border-left-color: var(--pr-border-strong) }
.fichaLegalAviso2 {
  margin: 8px 0 0 !important;
  color: var(--pr-text-faint); font-size: 11.5px !important;
}

/* Un embalse no se pesca "en el embalse": se pesca desde un sitio concreto. */
.fichaAccesos { margin: 0; padding: 0; list-style: none }
.fichaAccesos li {
  padding: 9px 0; border-bottom: 1px solid var(--pr-border);
}
.fichaAccesos li:last-child { border-bottom: 0 }
.fichaAccesos b { font-size: 13.5px }
.fichaAccesos small { color: var(--pr-text-soft); font-size: 12px }

/* Aceptar y eliminar: lo que se hace el 90 % de las veces, arriba y en un clic. */
.fichaDecision {
  margin-bottom: var(--pr-3); padding: var(--pr-3);
  border: 1px solid var(--pr-border-strong); border-radius: 14px;
  background: var(--pr-surface-1);
}
.fichaDecisionEstado {
  margin: 0 0 8px !important; font-size: 13px !important;
}
.fichaDecision .prHint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45 }
.fichaDecision .prBtn[disabled] { opacity: .45; cursor: not-allowed }

/* ---- radar del fondo ----------------------------------------------------------
   Cuatro anillos en fila: se lee de un vistazo como cae el fondo, que es la
   pregunta. Una tabla con minimo, media y maximo seria mas completa y nadie la
   leeria antes de salir a pescar. */
.fFondo { }
.fFondoResumen { margin: 0 0 var(--pr-3); font-size: 14px; line-height: 1.55 }
.fFondoAnillos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin: 0 0 var(--pr-3); padding: 0; list-style: none;
}
.fFondoAnillos li {
  display: grid; gap: 2px; padding: 9px 6px; text-align: center;
  border: 1px solid var(--pr-border); border-radius: 12px;
  background: var(--pr-surface-1);
}
.fFondoAnillos b { font-size: 11px; color: var(--pr-text-faint); font-weight: 800 }
.fFondoAnillos span { font: 900 16px/1 var(--pr-font-num, inherit); letter-spacing: -.02em }

.fFondoHitos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--pr-3) }
.fFondoHito {
  padding: 5px 10px; border-radius: 999px;
  background: var(--pr-primary-soft); font-size: 11.5px; font-weight: 700;
}

/* El cortado es lo que hace util todo lo demas: se destaca. */
.fFondoCortado {
  margin: 0 0 var(--pr-2); padding: 9px 12px;
  border-left: 3px solid var(--pr-primary); border-radius: 0 10px 10px 0;
  background: var(--pr-primary-soft);
  font-size: 13px; line-height: 1.5; font-weight: 600;
}
.fFondoPie { margin: 0; color: var(--pr-text-faint); font-size: 11px; line-height: 1.45 }

@media (max-width: 460px) {
  .fFondoAnillos { grid-template-columns: repeat(2, 1fr) }
}

/* Reportar un problema del pesquero.
 *
 * Discreto a propósito: no compite con «Planificar jornada» ni con «Cómo
 * llegar». Se busca cuando hace falta, y quien no lo necesita no lo ve porque
 * está debajo de todo y sin color de acción. */
.fReportar {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--pr-borde, rgba(255, 255, 255, .18));
  border-radius: 10px;
  background: transparent;
  color: var(--pr-texto-suave, rgba(255, 255, 255, .62));
  font-size: 12px;
  cursor: pointer;
}
.fReportar:hover,
.fReportar:focus-visible {
  color: var(--pr-texto, #fff);
  border-color: var(--pr-borde-fuerte, rgba(255, 255, 255, .38));
}