/* Radio Retention Action Color Match v1.7.40
   Canonical stylesheet for [rgseo_radio_retention_hub].
   Root fix: this module CSS is loaded after retention.css through the asset dependency.
   Goal requested by user:
   - FontAwesome/icon inside Radio badge uses the same café/naranja accent.
   - Radio badge uses the same café/naranja badge language from [rgseo_radio_emisoras_premium].
   - Escuchar button uses the same dark premium button color from [rgseo_radio_emisoras_premium].
   - Same colors on desktop and mobile.
*/

.rgseo-radio-retention-hub,
.rgseo-radio-retention-hub.rgseo-retention-hub{
  --rg1731-bg:#0B1020;
  --rg1731-panel:#111827;
  --rg1731-card:#243247;
  --rg1731-card-2:#1B2433;
  --rg1731-card-hover:#2A3A52;
  --rg1731-card-hover-2:#202B3B;
  --rg1731-border:rgba(148,163,184,.40);
  --rg1731-border-soft:rgba(148,163,184,.28);
  --rg1731-border-strong:rgba(34,211,238,.48);
  --rg1731-cyan:#22D3EE;
  --rg1731-cyan-soft:#67E8F9;
  --rg1731-cafe-text:#FFE3CC;
  --rg1731-cafe-bg-a:rgba(255,138,61,.20);
  --rg1731-cafe-bg-b:rgba(50,36,28,.98);
  --rg1731-cafe-border:rgba(255,138,61,.42);
  --rg1731-orange:#FF8A3D;
  --rg1731-text:#F8FAFC;
  --rg1731-muted:#D4DEE9;
  --rg1731-btn-a:#22324A;
  --rg1731-btn-b:#18253A;
  --rg1731-btn-hover-a:#2A3A52;
  --rg1731-btn-hover-b:#1E2C42;
  width:min(1680px,calc(100vw - 8px))!important;
  max-width:none!important;
  margin:32px 0 36px 50%!important;
  transform:translateX(-50%)!important;
  padding:0!important;
}

.rgseo-radio-retention-hub .rgseo-retention-panel{
  min-width:0!important;
  background:
    radial-gradient(circle at 6% 0%,rgba(34,211,238,.10),transparent 34%),
    radial-gradient(circle at 96% 4%,rgba(255,138,61,.08),transparent 30%),
    linear-gradient(180deg,var(--rg1731-panel) 0%,var(--rg1731-bg) 100%)!important;
  border:1px solid var(--rg1731-border-soft)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.rgseo-radio-retention-hub .rgseo-retention-panel:before{
  background:
    radial-gradient(circle at 12% 0%,rgba(34,211,238,.12),transparent 38%),
    radial-gradient(circle at 94% 0%,rgba(255,138,61,.09),transparent 36%)!important;
  opacity:.92!important;
}

.rgseo-radio-retention-hub .rgseo-retention-head{align-items:center!important;}
.rgseo-radio-retention-hub .rgseo-retention-title-line{align-items:center!important;gap:10px!important;}
.rgseo-radio-retention-hub .rgseo-retention-head h2,
.rgseo-radio-retention-hub .rgseo-retention-title{color:var(--rg1731-text)!important;text-shadow:0 2px 0 rgba(0,0,0,.16)!important;line-height:1.08!important;}
.rgseo-radio-retention-hub .rgseo-retention-head p,
.rgseo-radio-retention-hub .rgseo-retention-subtitle,
.rgseo-radio-retention-hub .rgseo-retention-card-sub{color:var(--rg1731-muted)!important;}

.rgseo-radio-retention-hub .rgseo-retention-icon,
.rgseo-radio-retention-hub .rgseo-retention-icon-heart,
.rgseo-radio-retention-hub .rgseo-retention-icon-clock,
.rgseo-radio-retention-hub .rgseo-radio-retention-icon-listen{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  border-radius:17px!important;
  color:var(--rg1731-cyan-soft)!important;
  background:linear-gradient(180deg,var(--rg1731-card) 0%,var(--rg1731-card-2) 100%)!important;
  border:1px solid var(--rg1731-border)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden!important;
}
.rgseo-radio-retention-hub .rgseo-retention-icon:before{
  content:'';
  position:absolute;
  inset:7px;
  border-radius:13px;
  background:radial-gradient(circle at 34% 24%,rgba(103,232,249,.36),rgba(11,16,32,.92) 68%)!important;
  border:1px solid rgba(103,232,249,.18)!important;
}
.rgseo-radio-retention-hub .rgseo-retention-icon i{position:relative!important;z-index:1!important;color:var(--rg1731-cyan-soft)!important;font-size:19px!important;text-shadow:0 0 16px rgba(103,232,249,.20)!important;}

.rgseo-radio-retention-hub .rgseo-retention-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:28px!important;
  padding:4px 10px!important;
  border-radius:999px!important;
  color:var(--rg1731-muted)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(17,24,39,.88))!important;
  border:1px solid rgba(203,213,225,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.rgseo-radio-retention-hub .rgseo-retention-badge i{color:var(--rg1731-orange)!important;text-shadow:0 0 10px rgba(255,138,61,.22)!important;}

.rgseo-radio-retention-hub .rgseo-retention-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:clamp(14px,1.25vw,18px)!important;}
.rgseo-radio-retention-hub .rgseo-retention-card{
  background:linear-gradient(180deg,var(--rg1731-card) 0%,var(--rg1731-card-2) 100%)!important;
  border:1px solid var(--rg1731-border)!important;
  border-radius:20px!important;
  box-shadow:0 12px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.065),0 0 0 1px rgba(15,23,42,.44)!important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,box-shadow .22s ease,background .22s ease!important;
}
.rgseo-radio-retention-hub .rgseo-retention-card:before{background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 42%),radial-gradient(circle at 18% 0%,rgba(34,211,238,.07),transparent 44%)!important;opacity:.88!important;transition:opacity .22s ease!important;}
.rgseo-radio-retention-hub .rgseo-retention-card:hover,
.rgseo-radio-retention-hub .rgseo-retention-card:focus-visible,
.rgseo-radio-retention-hub .rgseo-retention-card:focus-within{transform:translateY(-2px) scale(1.012)!important;background:linear-gradient(180deg,var(--rg1731-card-hover) 0%,var(--rg1731-card-hover-2) 100%)!important;border-color:var(--rg1731-border-strong)!important;box-shadow:0 16px 30px rgba(0,0,0,.32),0 0 0 1px rgba(34,211,238,.14),inset 0 1px 0 rgba(255,255,255,.08)!important;outline:none!important;}
.rgseo-radio-retention-hub .rgseo-retention-card:hover:before{opacity:1!important;}

.rgseo-radio-retention-hub .rgseo-retention-logo-link,
.rgseo-radio-retention-hub .rgseo-retention-fav-link,
.rgseo-radio-retention-hub .rgseo-retention-logo{display:block!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;padding:0!important;margin:0!important;background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;outline:0!important;overflow:visible!important;clip-path:none!important;line-height:0!important;}
.rgseo-radio-retention-hub .rgseo-retention-logo:before,
.rgseo-radio-retention-hub .rgseo-retention-logo:after{content:none!important;display:none!important;}
.rgseo-radio-retention-hub .rgseo-retention-logo img{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important;object-fit:initial!important;object-position:center center!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;transform:none!important;border-radius:14px!important;clip-path:none!important;transition:filter .22s ease!important;}
.rgseo-radio-retention-hub .rgseo-retention-card:hover .rgseo-retention-logo img{filter:saturate(1.02) contrast(1.01)!important;}

.rgseo-radio-retention-hub .rgseo-retention-card-title{color:#FFFFFF!important;font-weight:950!important;text-shadow:0 1px 0 rgba(0,0,0,.20)!important;text-align:center!important;}

/* Radio badge: café/naranja exactly like the Radio badge in [rgseo_radio_emisoras_premium]. */
.rgseo-radio-retention-hub .rgseo-retention-type-radio,
.rgseo-radio-retention-hub .rgseo-retention-card-continue .rgseo-retention-type-radio,
.rgseo-radio-retention-hub .rgseo-retention-card-favorite .rgseo-retention-type-radio{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:28px!important;
  padding:4px 10px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:800!important;
  color:var(--rg1731-cafe-text)!important;
  background:linear-gradient(135deg,var(--rg1731-cafe-bg-a),var(--rg1731-cafe-bg-b))!important;
  border:1px solid var(--rg1731-cafe-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.rgseo-radio-retention-hub .rgseo-retention-type-radio i,
.rgseo-radio-retention-hub .rgseo-retention-type-radio .fas,
.rgseo-radio-retention-hub .rgseo-retention-card-continue .rgseo-retention-type-radio i,
.rgseo-radio-retention-hub .rgseo-retention-card-favorite .rgseo-retention-type-radio i{
  color:var(--rg1731-orange)!important;
  text-shadow:0 0 10px rgba(255,138,61,.22)!important;
}

/* Other type badges stay cyan, but never override .rgseo-retention-type-radio. */
.rgseo-radio-retention-hub .rgseo-retention-type:not(.rgseo-retention-type-radio),
.rgseo-radio-retention-hub .rgseo-retention-card-continue .rgseo-retention-type:not(.rgseo-retention-type-radio),
.rgseo-radio-retention-hub .rgseo-retention-card-favorite .rgseo-retention-type:not(.rgseo-retention-type-radio){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:28px!important;
  padding:4px 10px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:800!important;
  color:#FFE3CC!important;
  background:linear-gradient(135deg,rgba(255,138,61,.20),rgba(50,36,28,.98))!important;
  border:1px solid rgba(255,138,61,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
}

/* Escuchar: exact dark premium button language from [rgseo_radio_emisoras_premium]. */
.rgseo-radio-retention-hub .rgseo-retention-mini-btn,
.rgseo-radio-retention-hub .rgseo-retention-card-continue .rgseo-retention-mini-btn,
.rgseo-radio-retention-hub .rgseo-retention-panel-continue .rgseo-retention-mini-btn,
.rgseo-radio-retention-hub .rgseo-retention-action--continue,
.rgseo-radio-retention-hub .rgseo-retention-view-all{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:40px!important;
  padding:0 15px!important;
  border-radius:14px!important;
  color:var(--rg1731-text)!important;
  background:linear-gradient(180deg,var(--rg1731-btn-a) 0%,var(--rg1731-btn-b) 100%)!important;
  border:1px solid rgba(148,163,184,.32)!important;
  box-shadow:0 8px 16px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.09)!important;
  font-weight:900!important;
  text-decoration:none!important;
  transition:transform .2s ease,background .2s ease,border-color .2s ease!important;
}
.rgseo-radio-retention-hub .rgseo-retention-mini-btn:hover,
.rgseo-radio-retention-hub .rgseo-retention-mini-btn:focus-visible,
.rgseo-radio-retention-hub .rgseo-retention-action--continue:hover,
.rgseo-radio-retention-hub .rgseo-retention-action--continue:focus-visible,
.rgseo-radio-retention-hub .rgseo-retention-view-all:hover,
.rgseo-radio-retention-hub .rgseo-retention-view-all:focus-visible{
  transform:translateY(-1px)!important;
  background:linear-gradient(180deg,var(--rg1731-btn-hover-a) 0%,var(--rg1731-btn-hover-b) 100%)!important;
  border-color:rgba(103,232,249,.38)!important;
  outline:none!important;
}

@media (max-width:1180px){.rgseo-radio-retention-hub .rgseo-retention-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}}
@media (max-width:1024px){
  .rgseo-radio-retention-hub,
  .rgseo-radio-retention-hub.rgseo-retention-hub{width:calc(100vw - 14px)!important;margin:28px 0 32px 50%!important;}
  .rgseo-radio-retention-hub .rgseo-retention-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media (max-width:720px){
  .rgseo-radio-retention-hub,
  .rgseo-radio-retention-hub.rgseo-retention-hub{width:calc(100vw - 14px)!important;margin:22px 0 26px 50%!important;gap:18px!important;}
  .rgseo-radio-retention-hub .rgseo-retention-panel{padding:18px 10px!important;border-radius:24px!important;}
  .rgseo-radio-retention-hub .rgseo-retention-icon{width:48px!important;height:48px!important;min-width:48px!important;border-radius:16px!important;}
  .rgseo-radio-retention-hub .rgseo-retention-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  .rgseo-radio-retention-hub .rgseo-retention-card{border-radius:18px!important;padding:10px!important;}
  .rgseo-radio-retention-hub .rgseo-retention-card-sub{display:none!important;}
  .rgseo-radio-retention-hub .rgseo-retention-card-row{display:block!important;}
  .rgseo-radio-retention-hub .rgseo-retention-mini-btn{width:100%!important;max-width:none!important;margin-top:9px!important;min-height:36px!important;border-radius:12px!important;font-size:.78rem!important;}
  .rgseo-radio-retention-hub .rgseo-retention-logo img{border-radius:12px!important;}
}
@media (max-width:360px){.rgseo-radio-retention-hub .rgseo-retention-grid{gap:9px!important;}.rgseo-radio-retention-hub .rgseo-retention-card{padding:8px!important;}}