/*
 * CCJ Home V317
 * - Perfil rápido fuera de APP/PWA móvil: intereses en una sola línea + Guardar compacto a la derecha.
 * - Los 10 accesos usan siempre tipografía blanca.
 * - Solo APP/PWA móvil <=760px: header CCJ levemente más compacto para mostrar Mensajes completo.
 */

/* Accesos: texto blanco en toda la secuencia azul, incluso sobre los tonos claros. */
body.jc-ccj-route .jc-ccj5-homebar__nav a{
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,38,102,.58)!important;
}

/* Perfil rápido de escritorio / Windows / tablet / navegador convencional. */
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__quick-footer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  min-width:0;
  margin-top:1px;
}
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__interest-summary{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  overflow:hidden;
  white-space:nowrap;
}
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__interest-summary>b{
  flex:0 0 auto;
  color:#51687d;
  font-size:10px;
  font-weight:900;
}
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__interest-chips{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
  overflow:hidden;
  white-space:nowrap;
}
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__interest-chip,
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__interest-more{
  flex:0 0 auto;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border:1px solid #cbd9ee;
  border-radius:999px;
  background:#eef3ff;
  color:#244f92;
  font-size:9.5px;
  font-weight:850;
}
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__interest-more{
  background:#003399;
  border-color:#003399;
  color:#fff;
}
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__interest-empty{
  color:#8290a0;
  font-size:10px;
  font-weight:700;
}
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__quick-save{
  min-height:38px!important;
  width:auto!important;
  min-width:122px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  justify-self:end;
  padding:0 15px!important;
  border:0!important;
  border-radius:999px!important;
  background:#003399!important;
  color:#fff!important;
  box-shadow:0 5px 12px rgba(0,51,153,.18)!important;
  font-size:10.5px!important;
  font-weight:900!important;
  white-space:nowrap;
  cursor:pointer;
}
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__quick-save:hover,
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__quick-save:focus-visible{
  background:#002a80!important;
  transform:translateY(-1px);
}
body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__mobile-save{display:none!important}

/* APP/PWA móvil: mantener Mi Perfil previo y compactar solamente el header local. */
@media (max-width:760px){
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__quick-footer,
  body.jc-native-app.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__quick-footer{display:none!important}
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__mobile-save,
  body.jc-native-app.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__mobile-save{display:inline-flex!important}

  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-header__row,
  body.jc-native-app.jc-ccj-route .jc-ccj5-header__row{
    min-height:74px!important;
    padding:3px 4px!important;
    overflow-x:hidden!important;
  }
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-header__cluster,
  body.jc-native-app.jc-ccj-route .jc-ccj5-header__cluster{
    width:100%!important;
    max-width:100%!important;
    margin-inline:0!important;
    gap:4px!important;
    justify-content:center!important;
    flex:1 1 auto!important;
  }
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-header__identity,
  body.jc-native-app.jc-ccj-route .jc-ccj5-header__identity{
    min-width:0!important;
    gap:5px!important;
    flex:1 1 auto!important;
    overflow:hidden!important;
  }
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-header__back,
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-header__profile,
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-header__chat,
  body.jc-native-app.jc-ccj-route .jc-ccj5-header__back,
  body.jc-native-app.jc-ccj-route .jc-ccj5-header__profile,
  body.jc-native-app.jc-ccj-route .jc-ccj5-header__chat{
    width:40px!important;
    min-height:40px!important;
    flex-basis:40px!important;
  }
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-header__brand,
  body.jc-native-app.jc-ccj-route .jc-ccj5-header__brand{
    width:82px!important;
    height:62px!important;
  }
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-header__brand img,
  body.jc-native-app.jc-ccj-route .jc-ccj5-header__brand img{
    max-width:79px!important;
    max-height:60px!important;
  }
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-header__tagline,
  body.jc-native-app.jc-ccj-route .jc-ccj5-header__tagline{
    font-size:9.5px!important;
  }
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-header__juco,
  body.jc-native-app.jc-ccj-route .jc-ccj5-header__juco{
    width:45px!important;
    height:45px!important;
  }
  html.jc-pwa-standalone body.jc-ccj-route .jc-ccj5-header__juco img,
  body.jc-native-app.jc-ccj-route .jc-ccj5-header__juco img{
    width:40px!important;
    height:40px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.jc-ccj-route .jc-ccj5-layout--v317 .jc-ccj5-profile__quick-save{transition:none!important;transform:none!important}
}