/* =========================================================================
   Visualizador de sargazo, vientos y corrientes: lo especifico.
   La base comun (colores, tipografia, cabecera, controles, pie) esta en
   ../shared.css
   ========================================================================= */

:root{
  --altoSaws:74vh;      /* tope de altura de la imagen de sargazo   */
  --altoVel:88vh;       /* tope de altura del campo de velocidad    */
}

/* ---------------------------------------------------------------- barra de reproduccion */

.reproductor{margin-top:14px}

.navFila{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:10px;
}

.navFila .tab{min-width:46px;text-align:center}
.navFila .tab.play{min-width:56px;color:var(--txt);font-weight:600}

.lectura{
  display:flex;gap:20px;flex-wrap:wrap;font-size:14px;
  margin-left:8px;
}
.lectura b{font-weight:600;color:var(--muted)}

.estado{
  margin-left:auto;font-size:13px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

#frameSlider{width:100%;display:block;accent-color:var(--c1)}

/* Agrupa el campo de fecha con su boton Go */
.grupo{display:flex;gap:6px;align-items:center}

.check{
  display:flex;align-items:center;gap:7px;font-size:14px;
  color:var(--txt);padding:7px 0;text-transform:none;letter-spacing:0;
}
.check input{accent-color:var(--c1);width:16px;height:16px}

/* ---------------------------------------------------------------- paneles */

.grid{
  display:grid;grid-template-columns:1.12fr 1fr;gap:14px;margin-top:14px;
  align-items:start;
}

.imgWrap{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:6px;overflow:hidden;min-height:220px;
  display:flex;align-items:center;justify-content:center;
}

.imgWrap img{
  width:100%;height:auto;display:block;
  max-height:var(--altoSaws);object-fit:contain;
}
.imgWrap.alto img{max-height:var(--altoVel)}

.vacioImg{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:24px;
  color:var(--muted);font-size:14px;background:#fff;
}

.hidden{display:none !important}

/* ---------------------------------------------------------------- responsivo */

@media (max-width:1100px){
  .grid{grid-template-columns:1fr}
  :root{--altoSaws:none;--altoVel:none}
  .imgWrap img{max-height:none}
}

@media (max-width:700px){
  .grid{gap:10px}
  .navFila{gap:6px}
  .navFila .tab{min-width:0;flex:1 1 auto;padding:8px 6px}
  .lectura{
    margin-left:0;flex:1 1 100%;gap:14px;font-size:13px;
    order:3;
  }
  .estado{margin-left:0;flex:1 1 100%;order:4;white-space:normal}
  .imgWrap{min-height:160px}
}