/*
 * CCJ Home V308
 * - 10 accesos rapidos en 5 + 5 en movil <=760 px.
 * - "En linea" conserva fondo gris; solo el contador se vuelve verde con presencia.
 */

body.jc-ccj-route .jc-ccj5-compose__online,
body.jc-ccj-route .jc-ccj5-compose__online.is-live {
  border-color:#cbd2d9!important;
  background:linear-gradient(145deg,#f7f8f9,#e8ecef)!important;
  box-shadow:0 4px 11px rgba(44,55,66,.10),inset 0 1px 0 rgba(255,255,255,.82)!important;
  color:#15191d!important;
}
body.jc-ccj-route .jc-ccj5-compose__online i,
body.jc-ccj-route .jc-ccj5-compose__online.is-live i {
  background:#aab3bb!important;
  box-shadow:0 0 0 5px rgba(107,119,130,.10)!important;
}
body.jc-ccj-route .jc-ccj5-compose__online small {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  padding:3px 7px;
  border-radius:999px;
  background:#dfe4e8;
  color:#4c565f;
  font-weight:900;
  opacity:1;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
body.jc-ccj-route .jc-ccj5-compose__online.is-live small {
  background:#21a85d;
  color:#fff;
  box-shadow:0 0 0 3px rgba(33,168,93,.13),0 3px 8px rgba(24,129,70,.18);
}

@media (max-width:760px) {
  body.jc-ccj-route .jc-ccj5-homebar__nav {
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    overflow:visible!important;
    padding-right:0!important;
  }
  body.jc-ccj-route .jc-ccj5-homebar__row,
  body.jc-ccj-route .jc-ccj5-homebar__row--one,
  body.jc-ccj-route .jc-ccj5-homebar__row--two {
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
    overflow:visible!important;
    padding:1px 0 4px!important;
    scroll-snap-type:none!important;
  }
  body.jc-ccj-route .jc-ccj5-homebar__row a,
  body.jc-ccj-route .jc-ccj5-homebar__row--one a,
  body.jc-ccj-route .jc-ccj5-homebar__row--two a {
    width:auto!important;
    min-width:0!important;
    min-height:42px!important;
    flex:none!important;
    padding:6px 4px!important;
    border-radius:15px!important;
    font-size:clamp(8px,2.2vw,9.5px)!important;
    line-height:1.06!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    scroll-snap-align:none!important;
  }
}