/* La pantalla de salud. Hereda de estilos.css; aquí solo lo suyo. */

.semaforo{
  display:flex; align-items:center; gap:.7rem;
  min-height:44px; padding:.6rem .9rem;
  border:1px solid var(--linea); border-radius:var(--radio);
  margin:1rem 0;
}
.semaforo__punto{
  width:14px; height:14px; border-radius:50%;
  background:var(--gris-claro); flex:0 0 auto;
}
.semaforo--verde .semaforo__punto{ background:var(--verde) }
.semaforo--ambar .semaforo__punto{ background:var(--ambar) }
.semaforo--rojo  .semaforo__punto{ background:#B02A1E }
.semaforo--verde{ border-color:var(--verde) }
.semaforo--ambar{ border-color:var(--ambar) }
.semaforo--rojo { border-color:#B02A1E }
.semaforo__que{ font-weight:600 }

.medidas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem }
.medida{
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:.7rem .8rem;
}
.medida__que{ display:block; font-size:.875rem; color:var(--grafito-tenue) }
.medida__cifra{ display:block; font-size:1.35rem; font-weight:700; line-height:1.3 }
.medida--mal .medida__cifra{ color:#B02A1E }

/* La tira: doce barras. Alto proporcional a lo que quedaba libre. */
.tira-medidas{
  display:flex; align-items:flex-end; gap:3px;
  height:64px; margin:.5rem 0;
}
.tira-medidas i{
  flex:1; background:var(--verde); border-radius:2px 2px 0 0;
  min-height:3px;
}
.tira-medidas i.ambar{ background:var(--ambar) }
.tira-medidas i.rojo { background:#B02A1E }

.informe{
  white-space:pre-wrap; word-break:break-word;
  font-size:.875rem; line-height:1.45;
  background:var(--papel-tenue); border:1px solid var(--linea);
  border-radius:var(--radio); padding:.8rem;
  max-height:60vh; overflow:auto;
}