/* =========================
   VARIABLES Y RESET
========================= */
:root{
  --bg:#0b0f14;
  --card:#121826;
  --accent:#58a6ff;
  --accent2:#22c55e;
  --text:#e6edf3;
  --muted:#8b949e;
  --violet:#c084fc;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  background-color:#030712;
  background:radial-gradient(circle at top, #111827, #030712);
  color:var(--text);
}


/* =========================
   LAYOUT GENERAL
========================= */
.container{
  max-width:1000px;
  margin:auto;
  padding:40px 20px;
}

header{
  text-align:center;
  margin-bottom:40px;
}

header h1{
  font-size:2.6em;
  font-weight:800;
  letter-spacing:0.02em;

  /* Fallback sólido (SIEMPRE visible) */
  color:var(--text);

  /* Enhancement visual */
  background-image:linear-gradient(
    90deg,
    #8bdcff,
    #e6c98c
  );
  background-clip:text;
  -webkit-background-clip:text;

  /* Solo transparente si el navegador lo soporta bien */
  -webkit-text-fill-color:transparent;

  /* Mejora legibilidad en fondos complejos */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.45);
}

header h2{
  margin-top:10px;

  font-size:1.15em;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;

  /* Color base */
  color:#9fd3ff;

  /* Separación visual */
  opacity:0.9;

  /* Sutil glow técnico */
  text-shadow:
    0 0 6px rgba(139,220,255,0.25),
    0 1px 2px rgba(0,0,0,0.6);
}


header p{
  margin-top:10px;
  font-size:1rem;
  color:var(--muted);
  letter-spacing:0.02em;
}

@media (forced-colors: active) {
  header h1{
    background:none;
    -webkit-text-fill-color:CanvasText;
    color:CanvasText;
    text-shadow:none;
  }
}

header h1::after{
  content:"";
  display:block;
  width:120px;
  height:3px;
  margin:14px auto 0;
  background:linear-gradient(
    90deg,
    transparent,
    #8bdcff,
    transparent
  );
  opacity:0.6;
}


/* =========================
   CARDS / FORM
========================= */
.card{
  background:linear-gradient(180deg,#161b22,#0d1117);
  border-radius:16px;
  padding:30px;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

label{
  font-size:.9em;
  color:var(--muted);
}

input, select{
  width:100%;
  padding:12px;
  margin-top:6px;
  background:#020617;
  border:1px solid #1f2937;
  color:var(--text);
  border-radius:8px;
  font-size:1em;
}

button{
  margin-top:20px;
  width:100%;
  padding:14px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,var(--accent2),#16a34a);
  color:#04210f;
  font-weight:700;
  font-size:1em;
  cursor:pointer;
}

button:hover{
  filter:brightness(1.1);
}

/* =========================
   RESULTADOS
========================= */
.results{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}

.result{
  background:#020617;
  border:1px solid #1f2937;
  border-radius:12px;
  padding:16px;
}

.result h3{
  color:var(--accent);
  font-size:1em;
  margin-bottom:6px;
}

small{
  color:var(--muted);
  font-size:.8em;
}

.muted{
  color:var(--muted);
  font-size:13px;
  margin-bottom:10px;
}

/* =========================
   SLIM JIM
========================= */
#slimjimCanvas{
  width: 340px;  
  height: 520px;
  max-width: 90vw;
  background: radial-gradient(circle at top, #111827, #030712);
  border-radius: 12px;
}


/* =========================
   SECCIÓN DIAGRAMA
========================= */

.diagram-section{
  margin-top:40px;
  text-align:center;
}

.diagram-section h2{
  font-size:1.8em;
  margin-bottom:8px;
  color:var(--text);
}

.diagram-note{
  max-width:520px;
  margin:0 auto 18px auto;
  font-size:0.9em;
  color:var(--muted);
  line-height:1.4;
}

/* Canvas centrado */
.diagram-canvas{
  display:flex;
  justify-content:center;
  margin-bottom:26px;
}

/* Resultados centrados pero en grilla */
.diagram-section .results{
  max-width:900px;
  margin:0 auto;
}


/* =========================
   FOOTER
========================= */
footer{
  text-align:center;
  margin-top:40px;
  color:var(--muted);
  font-size:.85em;
}


/* =========================
   BANDERA 
========================= */
.country-tag{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:12px;
}

.flag{
  width:44px;
  height:auto;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.6));
}

/* ===== Fondo watermark repetido LU9ABV en diagonal ===== */
body::before{
  content: "";
  position: fixed;
  inset: -50%;
  z-index: -1;
  pointer-events: none;

  transform: rotate(-45deg);
  transform-origin: center;

  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent 120px
  );
}

body::after{
  content:
  "LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
  "LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
"LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
"LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
"LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
"LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
"LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
"LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
"LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV";
  position: fixed;
  inset: -50%;
  z-index: -1;
  pointer-events: none;

  display: block;
  font-size: 72px;
  font-weight: 800;
  letter-spacing: 0.3em;
  line-height: 140px;

  color: rgba(255,255,255,0.07);
  white-space: pre-wrap;

  transform: rotate(-45deg);
  transform-origin: center;

  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* TOOL NAVBAR */
.tool-nav {
  background: #0e1117;
  border-bottom: 1px solid #262c36;
  padding: .65rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  display: block;
}

.tool-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tool-brand {
  font-size: 1.05rem;
  font-weight: 700;
  color: #eab308;
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tool-menu a {
  margin-left: 1rem;
  color: #e2e8f0;
  text-decoration: none;
  font-size: .85rem;
  padding: .25rem .4rem;
  border-radius: 4px;
}

.tool-menu a:hover {
  background: rgba(255,255,255,.06);
  color: #f1c93b;
}

/* MÓVIL */
@media (max-width: 600px) {
  .tool-container {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }
  .tool-menu a {
    margin-left: 0;
    margin-right: .6rem;
  }
}