:root {
  color-scheme: dark;
  --bg: #120e2e;
  --bg-deep: #0c0920;
  --surface: #2b225e;
  --surface-raised: #2b225e;
  --surface-soft: #171238;
  --line: rgba(0, 0, 0, 0.25);
  --line-strong: #000000;
  --text: #ffffff;
  --muted: #a0a0c0;
  --muted-dark: #7f779f;
  --yellow: #ffcc00;
  --yellow-dark: #d7a92d;
  --good: #00ff66;
  --medium: #ffcc00;
  --high: #ff3333;
  --radius: 16px;
  --shadow: 0px 8px 0px #000000;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  background: url('background.png') repeat center center fixed;
  background-size: cover; /* O 'auto' si prefieres que se repita el patrón de los logos */
  color: var(--text);
  font-family: 'Lilita One', Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

button, input { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

a { 
  color: var(--yellow) !important; /* #ffcc00 */
  text-decoration: underline !important; 
  text-underline-offset: 3px;
}

a:hover { 
  color: #ffe89a !important; /* Amarillo más claro al pasar el cursor */
}

.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 10;
  padding: 8px 12px; transform: translateY(-160%);
  color: var(--bg); background: var(--yellow); border-radius: 8px; font-weight: 800;
}
.skip-link:focus { transform: translateY(0); }

.page { width: min(100% - 20px, 700px); margin-inline: auto; padding: 0; }

.intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1, h2, h3, .title {
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0px 4px 0 #000;
  letter-spacing: 0.1px;
}

.title { 
  margin: 10px 0; 
  font-family: "Lilita One", Impact, sans-serif; 
  font-size: 60px; 
  font-weight: 400; 
  color: #ffffff;
}
.title span { color: var(--yellow); }

.intro > p, .intro__lead, .intro__disclaimer { 
  max-width: 700px; 
  margin: 15px auto 6px auto; 
  color: #ffffff; 
  font-size: 28px; 
  line-height: 1.4; 
  letter-spacing: -0.3px;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.ping-button {
  display: inline-flex;
  font-family: 'Lilita One', Impact, sans-serif;
  font-size: 38px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.1px;
  padding: 22px 40px;
  
  /* --- CONTROL DE MÁRGENES DESDE EL BOTÓN --- */
  /* [Arriba] [Derecha] [Abajo (distancia hacia la tabla/estado)] [Izquierda] */
  margin: 15px auto 30px auto; 

  cursor: pointer;
  position: relative;
  transform: skewX(-4deg);
  border-radius: 8px;
  background: linear-gradient(180deg, #fce879 0%, #e8ba3c 92%, #8d4f23 92%, #723e19 100%);
  border: 3.5px solid #000000;
  box-shadow: 0px 6px 0px #000000, inset 0px 5px 0px rgba(255, 255, 255, 0.7);
  -webkit-text-stroke: 0.04em #000;
  text-shadow: 0px 0.07em 0 #000;
  transition: transform 0.06s ease-in-out, filter .16s ease;
}

.ping-button__label { 
  display: inline-block;
  transform: skewX(4deg);
  font-family: "Lilita One", Impact, sans-serif; 
}

.ping-button:hover:not(:disabled) { filter: brightness(1.07); }
.ping-button:active:not(:disabled) {
  transform: skewX(-4deg) scale(0.95);
  box-shadow: 0px 6px 0px #000000, inset 0px 3px 0px rgba(255, 255, 255, 0.7);
}
.ping-button:disabled { cursor: wait; filter: saturate(.75); opacity: .9; }
.ping-button.is-loading .ping-button__label { animation: pulse .9s ease-in-out infinite alternate; }

.status:empty {
  margin: 0;
  min-height: 0;
}

.status { 
  display: block;
  width: 100%;
  text-align: center; 
  min-height: 1em; 
  margin: 0 auto; /* Sin márgenes verticales propios para que obedezca al botón y a la tabla */
  color: var(--yellow); 
  font-size: .95rem; 
  text-shadow: 1px 1px 0 #000; 
}

.status[data-kind="success"] { color: var(--good); }
.status[data-kind="error"] { color: var(--high); }
.status[data-kind="working"] { color: var(--yellow); }

.table-card { 
  overflow: hidden; 
  border: 4px solid #000; 
  border-radius: 16px; 
  background: rgba(18, 14, 46, 0.25); /* Antes estaba más opaco */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow); 
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.ping-table { 
  width: 100%; 
  border-collapse: separate; 
  border-spacing: 0; 
  text-align: left; 
  background: transparent; /* Asegura que la tabla no tape el fondo */
}

.ping-table thead { background-color: #000000; }
.ping-table thead th { padding: 12px 24px; color: var(--yellow); font-size: 20px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; border-bottom: 2px solid rgba(0,0,0,0.25); }
.ping-table .col-latency { width: 35%; text-align: right; }

.group-row th { 
  padding: 12px 0; 
  background-color: rgba(0, 0, 0, 0.15); /* Más transparente */
  border-top: 2px solid rgba(0,0,0,0.25);
  border-bottom: 2px solid rgba(0,0,0,0.25); 
  color: #ffffff; 
  font-size: 17px; 
  font-weight: bold; 
  letter-spacing: 1px; 
  text-align: center !important; 
  text-transform: uppercase;
}

.region-row { 
  border-top: 1px solid rgba(0, 0, 0, 0.15); 
  background: transparent !important; 
  transition: background .15s ease; 
}

.region-row:hover { 
  background: rgba(255, 255, 255, 0.05) !important; 
}

.region-row td { 
  padding: 12px 24px; 
  vertical-align: middle; 
  border-bottom: 2px solid rgba(0, 0, 0, 0.25); 
  font-size: 17px; 
  background: transparent !important; /* Vital para que se vea el fondo */
}

.ping-table tbody tr:last-child td { border-bottom: none; }

.server-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Franjas laterales de colores según la región */
.region-strip {
  width: 5px;
  height: 32px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.strip-EA   { background-color: #ff00f2; box-shadow: 0 0 6px #ff00f2; }
.strip-SEA  { background-color: #ff008c; box-shadow: 0 0 6px #ff008c; }
.strip-SAS  { background-color: #b700ff; box-shadow: 0 0 6px #b700ff; }
.strip-EMEA { background-color: #0088ff; box-shadow: 0 0 6px #0088ff; }
.strip-SA   { background-color: #e66000; box-shadow: 0 0 6px #e66000; }
.strip-SAW  { background-color: #e6b400; box-shadow: 0 0 6px #e6b400; }
.strip-NA   { background-color: #91ff00; box-shadow: 0 0 6px #91ff00; }
.strip-CNML { background-color: #00ffe5; box-shadow: 0 0 6px #00ffe5; }

.region-name { 
  min-width: 0; 
  color: #ffffff; 
  font-size: 20px; 
  font-weight: 400; /* Se cambia de 'bold' / 700 a 400 (normal) */
  letter-spacing: 0.3px;
  line-height: 1.35; 
}

.latency-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.latency-line { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; }

.latency-value { 
  color: var(--text); 
  font-size: 20px; 
  font-weight: 500; /* Se cambia de 'bold' a 500 o 400 */
  font-variant-numeric: tabular-nums; 
}

.latency-unit { color: var(--muted); font-size: 14px; }

.latency-state { 
  display: inline-flex; 
  align-items: center; 
  gap: 5px; 
  color: var(--muted); 
  font-size: 12px; 
  font-weight: 400; /* Reducido de 'bold' a 400 */
}

.latency-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.latency-bar { overflow: hidden; width: min(100%, 100px); height: 4px; border-radius: 9px; background: rgba(255, 255, 255, 0.1); }
.latency-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: currentColor; transition: width .3s ease; }

.region-row--good .latency-state, .region-row--good .latency-value { color: var(--good); filter: drop-shadow(0px 0px 4px rgba(0, 255, 102, 0.5)); }
.region-row--medium .latency-state, .region-row--medium .latency-value { color: var(--medium); filter: drop-shadow(0px 0px 4px rgba(255, 204, 0, 0.5)); }
.region-row--high .latency-state, .region-row--high .latency-value { color: var(--high); filter: drop-shadow(0px 0px 4px rgba(255, 51, 51, 0.5)); }
.region-row--pending .latency-state { color: var(--muted-dark); }
.region-row--unavailable .region-name, .region-row--unavailable .latency-state, .region-row--unavailable .latency-value { color: var(--muted-dark); }
.region-row--error .latency-value, .region-row--error .latency-state { color: var(--high); }

.region-row--measuring .latency-value { color: var(--yellow); }
.region-row--measuring .latency-state { color: var(--yellow); }
.region-row--measuring .latency-bar span { width: 45% !important; background: var(--yellow); animation: indeterminate 1s ease-in-out infinite alternate; }

.info { 
  margin: 30px auto 0; 
  padding: 25px; 
  border: 4px solid #000; 
  border-radius: 16px; 
  background: rgba(18, 14, 46, 0.50); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 700px; 
  box-shadow: 0px 8px 0px #000; 
}

.info h2 { 
  margin: 10px 0 25px;
  font-size: 32px;
  text-align: center;
  color: var(--yellow);
   }

.info p { 
  color: #ffffff !important; 
  font-size: 20px; 
  opacity: 0.95; /* Alta opacidad para máxima legibilidad */
}

.info h3 { 
  font-size: 32px;
  text-align: center;
  color: #ffffff !important; 
}

.legend { 

  display: flex; 
  flex-wrap: wrap; 
  gap: 15px 15px; /* Espacio entre los elementos de la lista */
  margin: 18px 0; 
  padding: 0; 
  list-style: none; 
}

.legend li { 

  display: inline-flex; 
  align-items: center; 
  gap: 5px; /* <--- Aumenta o ajusta este valor para separar el círculo del texto */
  color: #ffffff !important; 
  font-size: 14px; 
}

.dot { 
  display: inline-block; 
  width: 9px; 
  height: 9px; 
  border-radius: 50%; 
  flex-shrink: 0;
}

.dot--good { background: var(--good); }
.dot--medium { background: var(--medium); }
.dot--high { background: var(--high); }

.about {
  padding: 30px 20px 0;
  color: #ffffff !important;
  font-size: 14px;
  text-align: center; /* Centra todo el texto automáticamente */
  max-width: 700px;
  margin: 0 auto; /* Centra el bloque completo en la pantalla */
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.about h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 32px;
  text-align: center;
}

.about p {
  font-size: 20px;
  margin: 8px 0;
  line-height: 1.5;
  color: #ffffff !important;
  opacity: 0.9;
  max-width: 100%;
}


.rule {
  height: 2px;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  border: 0;
  background: rgba(255, 255, 255, 0.2);
}

.legal {
  color: #ffffff !important;
  opacity: 0.85;
  font-size: 20px;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
}

.noscript { padding: 12px 16px; border: 1px solid var(--high); border-radius: 10px; color: var(--high); margin-bottom: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes pulse { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes indeterminate { from { transform: translateX(-18%); } to { transform: translateX(118%); } }

@media (max-width: 600px) {
  body { padding: 15px 8px; }

  /* Título compacto y sin espacios excesivos en móviles */
  .title {
    font-size: clamp(2.4rem, 9vw, 3.2rem);
    line-height: 0.95;
    margin: 5px 0 12px 0;
  }

  .intro { 
    padding-bottom: 0px; 
  }

  .intro > p, .intro__lead, .intro__disclaimer {
    font-size: 24px;
    margin: 6px auto;
  }

  /* Control de márgenes desde el botón en móviles: [Arriba] [Derecha] [Abajo (distancia a la tabla)] [Izquierda] */
  .ping-button { 
    font-size: 28px; 
    padding: 14px 20px; 
    margin: 22px auto 22px auto; /* <--- Cambia el tercer valor (22px) para ajustar la separación exacta */
  }

  .status {
    margin: 0 auto;
    min-height: 1em;
  }

  .ping-table thead th, .region-row td { 
    padding: 10px 12px; 
    font-size: 18px; 
  }
  
  .latency-value { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}