/* ===========================
   Gráficas EA (CI4) — estilos
   Encapsulado bajo #graficasEA
   =========================== */

#graficasEA {
  font-family: "Open Sans", sans-serif;
  width: 100%;
}

/* Título general */
#graficasEA .titulo-graf-ea {
  text-align: center;
  font-size: 18px;
  margin: 10px 0 15px;
}

/* Radios superiores */
#graficasEA .graf-ea-radio {
  padding: 10px;
}

/* Fila de filtros */
#graficasEA .graf-ea-filtros {
  margin-top: 10px;
}

#graficasEA .graf-ea-label {
  padding-top: 6px;
  text-align: right;
}

/* Datepicker (icono dentro) */
#graficasEA .graf-ea-datepicker {
  position: relative;
}

#graficasEA .graf-ea-datepicker .glyphicon-calendar {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
}

/* Selects */
#graficasEA .graf-ea-select select {
  min-width: 140px;
}

/* Pasada Id */
#graficasEA #pasada {
  width: auto;
  min-width: 100px;
}

#graficasEA .graf-ea-pasada-container {
  padding-top: 20px;
  min-width: 120px;
}

/* Botones Anterior / Siguiente */
#graficasEA .graf-ea-nav-buttons {
  padding-top: 20px;
  text-align: right;
}

/* ===========================
   Contenedor iframe / prevision
   =========================== */

#graficasEA .iframe-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 50%;
  margin-top: 10px;
}

#graficasEA .iframe-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Modo Previsión */
#graficasEA .iframe-container.prevision-mode {
  padding-bottom: 0 !important;
  height: auto !important;
}

#graficasEA .iframe-container.prevision-mode #graficaPrevisionContainer {
  width: 100%;
  min-height: clamp(320px, 60vh, 720px);
  position: relative;
  display: block;
  aspect-ratio: 16/9;
}

#graficasEA .iframe-container.prevision-mode #graficaPrevisionContainer canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ===========================
   Tabla de umbrales
   =========================== */

#graficasEA #tabla-container {
  width: 95%;
  margin: 10px auto 0 auto;
  overflow-x: auto;
}

#graficasEA #t-umbralesgraf {
  width: 100%;
  table-layout: fixed;
}

#graficasEA #t-umbralesgraf td {
  word-wrap: break-word;
  white-space: normal;
  min-width: 100px;
  padding: 5px;
  text-align: center;
}

#graficasEA .hour-cell {
  height: 30px;
  vertical-align: middle;
}

#graficasEA .small-text {
  font-size: 12px;
}

/* Colores por nivel */
#graficasEA .hour-cell[data-value="1"] { background-color: #fff; }
#graficasEA .hour-cell[data-value="2"] { background-color: #ff0; }
#graficasEA .hour-cell[data-value="3"] { background-color: #ffa500; }
#graficasEA .hour-cell[data-value="4"] { background-color: #f00; }

/* ===========================
   Responsive
   =========================== */
@media screen and (min-width: 1280px) {
  #graficasEA .iframe-container {
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 35% !important;
  }
}