/* EML Detector — estilo nebulosa azul (macOS vibrancy). El fondo lo dibuja
   sky.js sobre #sky; este archivo es solo la UI de vidrio por encima. */
:root{
  --blue:#38bdf8; --blue-bright:#22d3ee;
  --text:#edf2f8; --muted:rgba(226,236,245,.58); --faint:rgba(226,236,245,.34);
  --hairline:rgba(255,255,255,.10); --panel:rgba(10,14,24,.45);
  --clean:#34d399; --suspicious:#fbbf24; --malicious:#f87171;
  /* Naranja de marca Anthropic (Claude) "clay" para el "Powered by". */
  --anthropic:#cc785c; --anthropic-bright:#dd927a;
  color-scheme:dark;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:#06070f; color:var(--text); overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",system-ui,sans-serif;
  font-size:13px; -webkit-font-smoothing:antialiased;
}
#sky{position:fixed; inset:0; z-index:-1; display:block;}

.nav{display:flex; align-items:center; justify-content:space-between; max-width:1080px; margin:0 auto; padding:22px 28px;}
.brand{display:flex; align-items:center; gap:10px;}
.logo{width:50px; height:50px; padding:6px; object-fit:contain; border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(8,12,20,.92),rgba(4,6,12,.96));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 2px 10px rgba(0,0,0,.5), 0 0 18px rgba(52,211,153,.30);
  filter:drop-shadow(0 0 6px rgba(52,211,153,.4));}
.brand-name{font-family:ui-sans-serif,-apple-system,"SF Pro Display","Inter",system-ui,sans-serif;
  font-size:25px; font-weight:700; letter-spacing:-.02em; color:#f3f8fd; line-height:1; white-space:nowrap;}
.links{display:flex; gap:24px; color:var(--muted);}
.links a{color:inherit; text-decoration:none; transition:color .15s;}
.links a:hover{color:var(--text);}

.hero{max-width:680px; margin:0 auto; padding:50px 24px 90px; text-align:center;}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 12px; border-radius:999px;
  margin-bottom:28px; font-size:12.5px; color:#bfe3f7; text-decoration:none;
  background:rgba(56,189,248,.10); border:1px solid rgba(56,189,248,.34); box-shadow:0 0 26px rgba(56,189,248,.20);}
.badge .d{width:6px; height:6px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 9px var(--blue-bright);}
.badge .ar{color:var(--muted);}
h1{margin:0 0 18px; font-weight:700; letter-spacing:-.035em; line-height:1.04; font-size:clamp(2.5rem,6.2vw,4.25rem);
  background:linear-gradient(180deg,#fff 28%,#a9cdf2 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sub{margin:0 auto 38px; max-width:520px; font-size:17px; line-height:1.55; color:var(--muted);}
.sub code{color:#cfe6ff; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.92em;}

.dz{position:relative; max-width:460px; margin:0 auto; border:1.5px solid var(--hairline); border-radius:20px;
  padding:34px 24px; background:var(--panel); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s;}
.dz:hover,.dz:focus-visible,.dz.over{outline:none; transform:translateY(-2px); border-color:rgba(34,211,238,.6);
  box-shadow:0 24px 70px rgba(14,116,165,.42), 0 0 0 1px rgba(34,211,238,.25);}
.dz-icon{width:46px; height:46px; margin:0 auto 14px; border-radius:13px; display:grid; place-items:center;
  font-size:22px; color:#cdeeff; background:linear-gradient(180deg,rgba(34,211,238,.28),rgba(59,130,246,.18));
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.32), 0 0 22px rgba(56,189,248,.32);}
.dz-title{margin:0 0 3px; font-size:16px; font-weight:600;}
.dz-sub{margin:0; color:var(--faint); font-size:12.5px;}

.opts{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:20px;}
.seg{display:inline-flex; padding:3px; border-radius:11px; background:var(--panel); border:1px solid var(--hairline);}
.seg button{appearance:none; border:0; background:transparent; font:inherit; color:var(--muted);
  padding:6px 16px; border-radius:8px; cursor:pointer; transition:.15s;}
.seg button[aria-selected="true"]{color:#04121c; font-weight:600;
  background:linear-gradient(180deg,rgba(56,189,248,.95),rgba(14,165,233,.95)); box-shadow:0 2px 14px rgba(14,165,233,.5);}
.sw{display:inline-flex; align-items:center; gap:9px; color:var(--muted); cursor:pointer; user-select:none;}
.sw input{position:absolute; opacity:0;}
.track{width:40px; height:23px; border-radius:12px; background:rgba(120,120,128,.4); position:relative; transition:background .18s;}
.track::after{content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .18s;}
.sw input:checked + .track{background:var(--blue-bright);}
.sw input:checked + .track::after{transform:translateX(17px);}

.notice{max-width:460px; margin:22px auto 0; padding:11px 14px; border-radius:12px;
  background:var(--panel); border:1px solid var(--hairline); color:var(--muted); font-size:12px;}

/* Widget CAPTCHA (Turnstile). Solo se renderiza si hay site key; centrado. */
.captcha{display:flex; justify-content:center; margin:18px auto 0;}

.result{max-width:460px; margin:26px auto 0; text-align:left;}
.verdict{display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-radius:16px;
  background:var(--panel); border:1px solid var(--hairline); box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.vleft{display:flex; align-items:center; gap:11px;}
.dot{width:11px; height:11px; border-radius:50%; background:var(--faint);}
.verdict.clean .dot{background:var(--clean); box-shadow:0 0 12px rgba(52,211,153,.6);}
.verdict.suspicious .dot{background:var(--suspicious); box-shadow:0 0 12px rgba(251,191,36,.6);}
.verdict.malicious .dot{background:var(--malicious); box-shadow:0 0 12px rgba(248,113,113,.6);}
.vlabel{font-size:16px; font-weight:700; letter-spacing:.01em;}
.verdict.clean .vlabel{color:var(--clean);}
.verdict.suspicious .vlabel{color:var(--suspicious);}
.verdict.malicious .vlabel{color:var(--malicious);}
.verdict.scanning .vlabel{color:var(--muted); animation:pulse 1.2s ease-in-out infinite;}
.vscore{color:var(--muted); font-variant-numeric:tabular-nums;}

.summary{display:grid; grid-template-columns:max-content 1fr; gap:9px 18px; margin:16px 4px 0;}
.summary dt{color:var(--muted);}
.summary dd{margin:0; word-break:break-all;}

.iocs h2{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:600; margin:14px 0 6px;}
.iocs ul{list-style:none; margin:0; padding:0;}
.iocs li{padding:8px 11px; margin-bottom:6px; border-radius:9px; background:var(--panel); border:1px solid var(--hairline);
  font-size:12px; word-break:break-all; font-family:ui-monospace,"SF Mono",Menlo,monospace;}

.trust{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:64px;}
.trust-by{color:rgba(226,236,245,.78); font-size:13px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; text-shadow:0 0 14px rgba(56,189,248,.25);}

/* "Claude Opus": botón sólido estilo macOS (relleno naranja Anthropic, brillo
   interno superior, sombra suave). Pop notorio sobre el fondo. */
.trust .src{display:inline-flex; align-items:center; gap:10px; padding:11px 22px; border-radius:15px;
  text-decoration:none; font-family:ui-serif,Georgia,"Times New Roman",Times,serif;
  font-size:23px; font-weight:600; letter-spacing:-.01em; color:#fff;
  text-shadow:0 1px 1px rgba(60,20,8,.28);
  background:linear-gradient(180deg,#dd927a 0%,#cc785c 55%,#b8674c 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px rgba(204,120,92,.45), 0 2px 6px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(120,40,20,.3);
  transition:transform .18s, box-shadow .18s, filter .18s;}
.trust .src:hover,.trust .src:focus-visible{outline:none; transform:translateY(-2px);
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 16px 40px rgba(204,120,92,.55), 0 3px 8px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(120,40,20,.35);}
.trust .spark{font-size:18px; line-height:1; color:#fff;
  filter:drop-shadow(0 0 7px rgba(255,220,200,.8)); animation:spark-spin 9s linear infinite;}

/* "Running on Amazon Bedrock": pill glass oscuro con acento naranja AWS. */
.trust .bedrock{display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px;
  text-decoration:none; font-size:12.5px; font-weight:500; color:#e9f0f8;
  background:linear-gradient(180deg,rgba(38,50,66,.9),rgba(18,26,36,.9));
  border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .18s, box-shadow .18s, border-color .18s;}
.trust .bedrock:hover,.trust .bedrock:focus-visible{outline:none; transform:translateY(-1px);
  border-color:rgba(255,153,0,.5); box-shadow:0 8px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);}
.trust .bedrock .aws{color:#ff9900; font-weight:700;}
.trust .bedrock .dot{width:7px; height:7px; border-radius:50%; background:#ff9900; box-shadow:0 0 9px rgba(255,153,0,.9);}

@keyframes spark-spin{to{transform:rotate(360deg);}}

@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.45;}}
@media (prefers-reduced-motion:reduce){ .verdict.scanning .vlabel{animation:none;} .trust .spark{animation:none;} *{transition:none !important;} }

/* --- Página de login (mismo lenguaje de vidrio/nebulosa) --- */
.auth-wrap{display:flex; justify-content:center; padding:48px 20px 80px;}
.auth-card{width:100%; max-width:380px; padding:30px 28px;
  background:var(--panel); border:1px solid var(--hairline); border-radius:20px;
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);}
.auth-title{margin:0 0 4px; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--text);}
.auth-sub{margin:0 0 22px; color:var(--muted); font-size:13px;}
.auth-label{display:block; margin:14px 0 6px; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em;}
.auth-input{width:100%; padding:11px 13px; border-radius:12px; color:var(--text); font-size:14px;
  background:rgba(8,12,20,.55); border:1px solid var(--hairline); outline:none;}
.auth-input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(56,189,248,.18);}
.auth-btn{width:100%; margin-top:20px; padding:12px 16px; border:none; border-radius:13px; cursor:pointer;
  font-size:15px; font-weight:700; color:#04121c; letter-spacing:-.01em;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  box-shadow:0 10px 26px rgba(56,189,248,.35);}
.auth-btn:hover{transform:translateY(-1px);}
.auth-link{display:block; width:100%; margin-top:14px; background:none; border:none; cursor:pointer;
  color:var(--muted); font-size:13px; text-align:center;}
.auth-link:hover{color:var(--text);}
.msg{margin:12px 0 0; min-height:1em; font-size:12.5px; text-align:center; color:var(--muted);}
.msg.ok{color:var(--clean);}
.msg.err{color:var(--malicious);}
.auth-sep{display:flex; align-items:center; gap:12px; margin:22px 0 16px; color:var(--faint); font-size:12px;}
.auth-sep::before,.auth-sep::after{content:""; flex:1; height:1px; background:var(--hairline);}
.auth-social{display:flex; flex-direction:column; gap:10px;}
.auth-social-btn{width:100%; padding:11px 14px; border-radius:12px; cursor:pointer; font-size:13.5px; font-weight:600;
  color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--hairline);}
.auth-social-btn:hover{background:rgba(255,255,255,.08);}