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

   --hGrafica  altura de cada grafica. Es lo que hay que subir o bajar si
               los paneles se ven bajos o demasiado altos.
   ========================================================================= */

:root{
  --area:#1f6fb2; --nd:#c8ced6;
  --hGrafica:320px;
}

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

/* ---------------------------------------------------------------- mapa */

.mapaWrap{position:relative;width:100%}
.mapaWrap img{width:100%;display:block;border-radius:6px}
.capa{position:absolute;pointer-events:none}

.cuad{
  position:absolute;pointer-events:auto;cursor:pointer;
  border:1px solid transparent;border-radius:2px;
}
.cuad:hover{border-color:#111;background:rgba(255,255,255,.30)}
.cuad.p1{border:2px solid var(--c1)}
.cuad.p2{border:2px solid var(--c2)}
.cuad.p3{border:2px solid var(--c3)}

/* ---------------------------------------------------------------- graficas */

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

.cab .pnum{
  font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:3px 10px;border-radius:11px;
  color:#fff;white-space:nowrap;
}
.cab input{width:74px}

.stats{
  font-size:13px;color:var(--muted);flex:1;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}

.chart{height:var(--hGrafica)}
canvas{width:100%;display:block;cursor:crosshair}

.vacio{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--muted);font-size:14px;border:1px dashed var(--line);
  border-radius:8px;text-align:center;padding:12px;
}

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

@media (max-width:1100px){
  .grid{grid-template-columns:1fr}
  :root{--hGrafica:300px}
}

/* El orden del HTML ya es mapa, panel 1, panel 2, panel 3, asi que en una
   sola columna quedan apilados en ese orden sin reordenar nada. */

@media (max-width:700px){
  :root{--hGrafica:250px}

  .grid{gap:10px}
  .cab{gap:8px}
  .stats{
    flex:1 1 100%;text-align:left;white-space:normal;
    font-size:12px;line-height:1.45;
  }
}