/* ============================================================
   EgeaINC — UI theme compartido para herramientas
   Linkear DESPUÉS del style.css propio de cada tool:
   <link rel="stylesheet" href="../ui/egeainc-ui.css">
   Alinea las tools con la home nueva (paleta, fonts, cards, nav, footer).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* --- override de tokens que ya usan las tools --- */
  --bg-color-dark:#0A0C10;
  --surface-color-dark:#12171F;
  --primary-color-dark:#04CE78;
  --text-color-dark:#EAF0F6;
  --border-color-dark:rgba(255,255,255,.09);
  --font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --border-radius:14px;
  --box-shadow:0 24px 50px -26px rgba(0,0,0,.9);
  /* remapear por si el tool no setea data-theme */
  --bg-color:#0A0C10;
  --surface-color:#12171F;
  --primary-color:#04CE78;
  --text-color:#EAF0F6;
  --border-color:rgba(255,255,255,.09);
  /* --- nuevos tokens EgeaINC --- */
  --egea-green:#04CE78;
  --egea-green-bright:#1FFF9D;
  --egea-blue:#2E9BFF;
  --egea-card:#12171F;
  --egea-card-2:#161C26;
  --egea-line:rgba(255,255,255,.09);
  --egea-line-2:rgba(255,255,255,.15);
  --egea-muted:#97A4B4;
  --egea-muted-2:#6B7787;
  --egea-grad:linear-gradient(135deg,#04CE78 0%,#2E9BFF 100%);
  --egea-mono:"JetBrains Mono",ui-monospace,monospace;
  --egea-display:"Space Grotesk",system-ui,sans-serif;
}

/* ---------- base ---------- */
body{
  font-family:var(--font-family)!important;
  color:var(--text-color-dark)!important;
  background:
    radial-gradient(820px 520px at 82% -6%,rgba(46,155,255,.08),transparent 60%),
    radial-gradient(680px 460px at 0% 105%,rgba(4,206,120,.09),transparent 60%),
    #0A0C10 !important;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--egea-display)!important;letter-spacing:-.02em;font-weight:700}
::selection{background:rgba(4,206,120,.28)}
a{transition:color .2s}
:focus-visible{outline:2px solid var(--egea-green-bright);outline-offset:3px;border-radius:6px}

/* ---------- header / nav ---------- */
header{
  background:rgba(10,12,16,.72)!important;
  border-bottom:1px solid var(--egea-line)!important;
  backdrop-filter:blur(12px);
  box-shadow:none!important;
  padding:14px clamp(18px,4vw,40px)!important;
}

/* nav de sitio (igual que soporte / blog) — usado en las tools */
header.anav{position:sticky;top:0;z-index:50;display:block!important;justify-content:initial!important;align-items:initial!important}
.anav__in{width:100%;max-width:1100px;margin-inline:auto;display:flex;align-items:center;gap:18px}
.anav__logo{height:38px!important;width:auto!important;max-height:38px!important;filter:drop-shadow(0 2px 10px rgba(46,155,255,.4))}
.anav__links{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.anav__links a{color:var(--egea-muted)!important;font-size:14.5px;font-family:var(--font-family)!important;
  padding:8px 13px;border-radius:9px;text-decoration:none;transition:.2s}
.anav__links a:hover{color:var(--text-color-dark)!important;background:rgba(255,255,255,.05)}
.anav__links a.cta{background:var(--egea-green)!important;color:#04130B!important;font-family:var(--egea-display)!important;
  font-weight:600;box-shadow:0 8px 24px -12px rgba(4,206,120,.8)}
.anav__links a.cta:hover{background:var(--egea-green-bright)!important;transform:translateY(-1px)}
@media(max-width:560px){
  .anav__in{gap:10px}
  .anav__links{gap:2px}
  .anav__links a{padding:7px 10px;font-size:13.5px}
}
.logo{max-height:42px!important;filter:drop-shadow(0 2px 10px rgba(46,155,255,.4))}
.nav-button{
  background:var(--egea-green)!important;color:#04130B!important;
  font-family:var(--egea-display)!important;font-weight:600!important;
  border-radius:10px!important;padding:10px 18px!important;
  box-shadow:0 8px 24px -12px rgba(4,206,120,.8)!important;
}
.nav-button i{color:#04130B!important}
.nav-button:hover{background:var(--egea-green-bright)!important;transform:translateY(-2px)!important;
  box-shadow:0 14px 30px -12px rgba(4,206,120,1)!important}

/* ---------- títulos de sección ---------- */
.page-title-container h1{color:var(--text-color-dark)!important;font-size:clamp(28px,4vw,42px)!important}
.page-title-container p{color:var(--egea-muted)!important}
.page-title-container h1::after{
  background:var(--egea-grad)!important;width:72px!important;height:3px!important;border-radius:3px!important;
}

/* ---------- cards (todas las variantes) ---------- */
.info-card,.card,.generator-card,.history-card,.geo-card,.main-ip-card{
  background:linear-gradient(180deg,var(--egea-card-2),var(--egea-card))!important;
  border:1px solid var(--egea-line)!important;
  border-radius:16px!important;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9)!important;
  transition:border-color .25s ease, transform .25s ease!important;
}
.info-card:hover,.card:hover,.generator-card:hover,.history-card:hover{
  border-color:var(--egea-line-2)!important;
}
.info-card h2,.card h2,.history-card h2,.geo-card h2{color:var(--egea-green)!important}
.map-card{border:1px solid var(--egea-line)!important;border-radius:16px!important}

/* ---------- displays mono (IP / password) ---------- */
.ip-display-container,.password-display-container{
  font-family:var(--egea-mono)!important;
  background:#0A0C10 !important;
  border:1px solid var(--egea-green)!important;
  border-radius:12px!important;
  color:var(--egea-green-bright)!important;
  box-shadow:0 0 24px -6px rgba(4,206,120,.35)!important;
}
.geo-details span{color:var(--egea-green)!important}

/* ---------- botones primarios ---------- */
.generate-button,button.generate,button[type="submit"].generate-button{
  background:var(--egea-green)!important;color:#04130B!important;
  font-family:var(--egea-display)!important;font-weight:600!important;
  border-radius:11px!important;border:none!important;
  box-shadow:0 10px 26px -12px rgba(4,206,120,.8)!important;
  transition:transform .18s ease, background .25s, box-shadow .25s!important;
}
.generate-button:hover{background:var(--egea-green-bright)!important;transform:translateY(-2px)!important;
  box-shadow:0 16px 34px -12px rgba(4,206,120,1)!important;opacity:1!important}
.copy-btn:hover{color:var(--egea-green)!important}
.copy-btn.copied{color:var(--egea-green)!important}

/* ---------- inputs / selects / range / checkbox ---------- */
input[type="text"],input[type="number"],input[type="password"],input[type="email"],
input[type="tel"],input[type="url"],select,textarea{
  background:#0A0C10 !important;color:var(--text-color-dark)!important;
  border:1px solid var(--egea-line)!important;border-radius:10px!important;
  font-family:var(--font-family)!important;
}
input:focus,select:focus,textarea:focus{border-color:var(--egea-green)!important;outline:none!important;
  box-shadow:0 0 0 3px rgba(4,206,120,.15)!important}
input[type="range"]{accent-color:var(--egea-green)!important}
input[type="range"]::-webkit-slider-thumb{background:var(--egea-green)!important}
input[type="range"]::-moz-range-thumb{background:var(--egea-green)!important}
input[type="checkbox"]{accent-color:var(--egea-green)!important}
#length-value{color:var(--egea-green)!important;font-family:var(--egea-mono)!important}

/* ---------- fuerza de contraseña (mantiene semáforo, verde=marca) ---------- */
.strength-bar.very-strong{background-color:var(--egea-green)!important}
.strength-text.very-strong{color:var(--egea-green)!important}

/* ---------- tabs (QR) ---------- */
.tab-button.active,.tab.active{color:var(--egea-green)!important;border-color:var(--egea-green)!important}
.tab-button.active i{color:var(--egea-green)!important}

/* ---------- footer ---------- */
footer{
  background:transparent!important;
  border-top:1px solid var(--egea-line)!important;
  color:var(--egea-muted-2)!important;
  font-family:var(--egea-mono)!important;font-size:12px!important;letter-spacing:.04em;
}
footer p{color:var(--egea-muted-2)!important}

/* ---------- leaflet popup dark ---------- */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:var(--egea-card)!important;color:var(--text-color-dark)!important;
}