/* JDServer-Webs — modules/satellite_color/satellite_color.css */

#satellite-color-root{ display:block; }

.sc-card{
  margin-top: 14px;
  background: var(--card, rgba(255,255,255,.7));
  border: 1px solid var(--border, rgba(148,163,184,.25));
  border-radius: 18px;
  box-shadow: var(--shadow-2, 0 10px 25px rgba(0,0,0,.06));
  padding: 14px;
  backdrop-filter: blur(10px);
}

.sc-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.sc-title{
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: var(--fg, #0f172a);
}

.sc-sub{
  margin: 6px 0 0;
  color: var(--muted, rgba(100,116,139,.95));
  font-size: 14px;
  line-height: 1.35;
}

.sc-tabs{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 10px;
}

.sc-tab{
  border: 1px solid var(--border, rgba(148,163,184,.35));
  background: var(--card, rgba(255,255,255,.75));
  color: var(--fg, #0f172a);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.sc-tab:active{ transform: scale(.98); }
.sc-tab.on{
  border-color: color-mix(in oklab, var(--brand, #3b82f6) 55%, rgba(148,163,184,.35));
  background: color-mix(in oklab, var(--brand, #3b82f6) 16%, var(--card, rgba(255,255,255,.75)));
}

.sc-frame{
  margin-top: 10px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--border, rgba(148,163,184,.25));
  background: rgba(148,163,184,.15);
}

/* 👇 importante: evitar “pixel art” y suavizar escalado */
.sc-img{
  display:block;
  width:100%;
  height:min(62vh, 640px);
  object-fit: cover;
  object-position: 50% 40%;
  image-rendering: auto;
}

.sc-mode-europe .sc-img{
  object-position: 50% 35%;
}

.sc-mode-iberia .sc-img{
  /* Ajusta fino a ojo: esto “acerca” Península sin recortar servidor */
  object-position: 48% 48%;
}

.sc-foot{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color: var(--muted, rgba(100,116,139,.95));
  font-size: 12.5px;
}
.sc-link{
  color: var(--fg, #0f172a);
  text-decoration: none;
  border-bottom: 1px dashed rgba(100,116,139,.55);
}
.sc-link:hover{ border-bottom-style: solid; }

.sc-status{
  color: var(--muted, rgba(100,116,139,.95));
  font-size: 12.5px;
  white-space: nowrap;
}