/* ===========================
   Minecraft Status Widget
   100% aislado — NO afecta la web
   =========================== */

.status-widget {
  --bg1:#0b0712;
  --bg2:#241233;
  --card:#0f1220cc;
  --accent:#39d353;
  --muted:#98a0b3;
  --glass: rgba(255,255,255,0.04);

  font-family: Inter, system-ui, Arial, sans-serif;
  color: #fff;
}

/* Contenedor */
.status-widget .status-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 16px;
  width:100%;
}

/* Centrar el logo y las letras */
.panel-head {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente (opcional) */
    text-align: center;      /* Por si hay texto */
}

/* Centrer motd */
#motd {
    text-align: center;
}

.status-widget .status-panel {
  width:100%;
  /*max-width:100%;*/
  max-width:1200px; /* controlas qué tan grande puede ser */
  border-radius:14px;
  padding:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  border:1px solid var(--glass);
  display: block;
}

/* Header */
.status-widget .panel-head {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.status-widget .server-icon {
  width:56px;
  height:56px;
  border-radius:10px;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,0.04);
  background: transparent url('https://raw.githubusercontent.com/InventivetalentDev/Minecraft-Server-Icons/master/unknown_server.png') center/cover no-repeat;
}

.status-widget .title {
  font-weight:800;
  font-size:20px;
  line-height:1;
}

.status-widget .subtitle {
  font-size:13px;
  color:var(--muted);
  margin-top:3px;
}

/* Estado */
.status-widget .status-row {
  display:flex;
  align-items:center;
  gap:14px;
  margin:6px 0 14px;
}

.status-widget .status-badge {
  min-width:86px;
  height:86px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  border:1px solid rgba(255,255,255,0.03);
}

.status-widget .status-circle {
  width:56px;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#07210b;
}

.status-widget .status-circle.online {
  background:linear-gradient(180deg,var(--accent),#14b54a);
  box-shadow:0 6px 18px rgba(57,211,83,0.18);
}

.status-widget .status-circle.offline {
  background: red;
  color:#fff;
}

.status-widget .status-circle.interrogation {
  background: orange;
  color:#fff;
}

.status-widget .meta {
  flex:1;
}

.status-widget .meta .state {
  font-size:26px;
  font-weight:800;
  margin:0;
}

.status-widget .meta .small {
  color:var(--muted);
  font-size:13px;
  margin-top:6px;
}

/* Detalles */
.status-widget .details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.status-widget .detail {
  background:rgba(255,255,255,0.02);
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.02);
  font-size:13px;
  color:var(--muted)
}

.status-widget .detail strong {
  display:block;
  color:#fff;
  font-weight:700;
  margin-bottom:6px;
}

/* MOTD */
.status-widget .motd-box {
  margin-top:12px;
  background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.02);
  font-size:14px;
  color:#e6e9f2;
  min-height:44px;
}

@keyframes shine {
  0% { background-position:-120px 0 }
  100% { background-position:120px 0 }
}

.status-widget {
  width:100%;
  display:flex;
  justify-content:center;
}

/* Forzar ancho como Teramont */
.status-widget,
.status-widget .status-wrap,
.status-widget .status-panel {
  width: 100% !important;
  max-width: 100% !important;
}

.status-widget .details,
.status-widget .status-row,
.status-widget .motd-box {
  width: 100% !important;
}

/* Fuente estilo Minecraft */
@font-face {
  font-family: 'Minecraft';
  src: url('../fonts/minecraft-extended.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Caja MOTD Celular (por defecto) */
.status-widget .motd-box {
  font-family: 'Minecraft', monospace !important;
  white-space: pre-wrap;
  line-height: 2;
  font-size: 10px;
}

@keyframes obf {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* ---------- PC ---------- */
@media (min-width:1024px){
  .status-widget .motd-box {
	line-height: 2;
    font-size: 32px;
  }
}

/* ---------- TABLET ---------- */
@media (min-width:769px) and (max-width:1023px){
  .status-widget .motd-box {
	line-height: 2;
    font-size: 28px;
  }
}

/* ---------- CELULAR GRANDE ---------- */
@media (min-width:501px) and (max-width:768px){
  .status-widget .motd-box {
	line-height: 2;
    font-size: 16px;
  }
}

/* ---------- CELULAR ---------- */
@media (min-width:351px) and (max-width:500px){
  .status-widget .motd-box {
	line-height: 2;
    font-size: 10px;
  }
}

/* ---------- CELULAR PEQUEÑO ---------- */
@media (max-width:350px){
  .status-widget .motd-box {
	line-height: 2;
    font-size: 6px;
  }
}

/* Colores de los estados del circulo ROJO y VERDE */
.status-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 30px;
}

/* ONLINE = Verde + Check ✔ */
.status-circle.online {
    background-color: #4CAF50;
    color: white;
}

.status-circle.check::after {
    content: "✔";
    color: white;
}

/* OFFLINE = Rojo + X */
.status-circle.offline {
    background-color: #d9534f;
    color: white;
}

.status-circle.cross::after {
    content: "X";
    color: white;
}

/* CONSULTANDO = naranja + ? */
.status-circle.offline {
    background-color: #FFA500;
    color: white;
}

.status-circle.interrogation::after {
    content: "?";
    color: white;
}

/* Color en el MOTD */
.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }

.c7 { color: #b2b2b2; }
.cf { color: #ffffff; }
.cc { color: #ff5555; }
.ce { color: #ffff55; }
.cb { color: #55ffff; }
.c6 { color: #ffaa00; }
.c9 { color: #5555ff; }

.mc-bg {
    background: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #3a3a3a;
}

/* Online = Verde; Offline = Rojo; Consultando = Naranja */
.state {
    font-weight: bold;
    font-size: 18px;
}

.state.consultando { color: orange !important; }
.state.online      { color: #00ff00 !important; }
.state.offline     { color: red !important; }

#refreshBtn{
    position: relative;
    z-index: 999;
}