/* DIEI — Diseño de Ingeniería Eléctrica Industrial
   Página temporal "en construcción" */
:root{
  --navy-950:#06111b;
  --navy-900:#0a1824;
  --navy-800:#10233a;
  --line:#1d3a55;
  --ink:#e8eef4;
  --muted:#93a7ba;
  --green:#12a150;
  --green-hi:#2bd47a;
  --amber:#f2b230;
  --amber-bg:rgba(242,178,48,.06);
  --grid:rgba(29,58,85,.35);
  --grid-fine:rgba(29,58,85,.15);
  --glow:#0e2236;
  --wire:#4f6f8c;
  --sym:#c9d6e2;
  --btn-ink:#fff;
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--navy-950);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid-fine) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-fine) 1px,transparent 1px),
    radial-gradient(ellipse at 70% 40%,var(--glow) 0%,var(--navy-950) 70%);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px,100% 100%;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
a{color:inherit}
.sheet{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(16px,3vw,32px);
}
.frame{
  border:1px solid var(--line);
  outline:1px solid var(--grid);
  outline-offset:6px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height:calc(100vh - 2*clamp(16px,3vw,32px));
}

/* Tema claro */
[data-theme="light"]{
  --navy-950:#f6f8fa;
  --navy-900:#ffffff;
  --navy-800:#e9eef3;
  --line:#c9d5e0;
  --ink:#0a1824;
  --muted:#4b6075;
  --green:#0b8a43;
  --green-hi:#0b8a43;
  --amber:#a86a00;
  --amber-bg:rgba(168,106,0,.07);
  --grid:rgba(30,80,130,.10);
  --grid-fine:rgba(30,80,130,.05);
  --glow:#ffffff;
  --wire:#8aa1b6;
  --sym:#0a1824;
}
html{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
.logo-light{display:none!important}
[data-theme="light"] .logo-dark{display:none!important}
[data-theme="light"] .logo-light{display:block!important}
[data-theme="light"] .flow{filter:none}

/* Header */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(14px,2.2vw,24px) clamp(16px,3vw,40px);
  border-bottom:1px solid var(--line);
}
.top img{height:clamp(52px,6.5vw,84px);width:auto;display:block}
.lang{
  display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  font:600 .78rem/1 var(--mono);letter-spacing:.06em;
}
.lang a,.lang span{padding:.55em .8em;text-decoration:none}
.lang span{background:var(--green);color:#fff}
.lang a{color:var(--muted)}
.lang a:hover{color:var(--ink);background:var(--navy-800)}
.tools{display:flex;align-items:center;gap:10px}
.theme-toggle{
  width:36px;height:34px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:4px;color:var(--muted);
}
.theme-toggle:hover{color:var(--ink);background:var(--navy-800)}
.theme-toggle:focus-visible,.lang a:focus-visible,.btn:focus-visible{outline:2px solid var(--green-hi);outline-offset:2px}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .i-sun{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:block}
[data-theme="dark"] .theme-toggle .i-moon{display:none}

/* Main */
main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;
  gap:clamp(24px,4vw,64px);
  padding:clamp(28px,5vw,72px) clamp(16px,4vw,64px);
}
.eyebrow{
  font:600 .74rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-hi);display:inline-flex;align-items:center;gap:.6em;margin-bottom:1.2rem;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--green-hi)}
h1{
  font-weight:700;
  font-size:clamp(2rem,4.4vw,3.6rem);
  line-height:1.08;letter-spacing:-.02em;margin-bottom:1.2rem;
}
h1 em{font-style:normal;color:var(--green-hi)}
.lead{color:var(--muted);font-size:clamp(1rem,1.3vw,1.15rem);max-width:34rem;margin-bottom:2rem}
.pending-box{fill:var(--amber-bg);stroke:var(--amber);stroke-width:2;stroke-dasharray:6 5}
.status{
  display:inline-flex;align-items:center;gap:.7em;
  font:600 .8rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--amber);border:1px dashed var(--amber);padding:.75em 1em;border-radius:4px;margin-bottom:2rem;
}
.status i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(242,178,48,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(242,178,48,0)}100%{box-shadow:0 0 0 0 rgba(242,178,48,0)}}
.contact{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;gap:.6em;text-decoration:none;
  font-weight:600;font-size:.95rem;padding:.9em 1.3em;border-radius:4px;
  border:1px solid var(--green);background:var(--green);color:#fff;
  transition:background .2s,border-color .2s,transform .2s;
}
.btn:hover{background:var(--green-hi);border-color:var(--green-hi);transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--muted);background:var(--navy-800)}
.btn svg{width:18px;height:18px}

/* Diagram */
.diagram{position:relative}
.diagram svg{width:100%;height:auto;display:block}
.wire{stroke:var(--wire);stroke-width:2;fill:none}
.sym{stroke:var(--sym);stroke-width:2;fill:none}
.sym-fill{fill:var(--navy-950)}
.flow{
  stroke:var(--green-hi);stroke-width:2.5;fill:none;
  stroke-dasharray:6 14;animation:flow 1.1s linear infinite;
  filter:drop-shadow(0 0 4px rgba(43,212,122,.7));
}
.flow.pending{stroke:var(--amber);filter:drop-shadow(0 0 4px rgba(242,178,48,.6));animation-duration:2.2s}
@keyframes flow{to{stroke-dashoffset:-20}}
.lbl{font:600 11px var(--mono);fill:var(--muted);letter-spacing:.06em}
.lbl.hi{fill:var(--ink)}
.lbl.amber{fill:var(--amber)}
.node{fill:var(--green-hi)}

/* Title block */
footer{
  display:grid;grid-template-columns:2fr repeat(4,1fr);
  border-top:1px solid var(--line);
  font:500 .72rem/1.35 var(--mono);letter-spacing:.04em;
}
footer>div{padding:12px 16px;border-left:1px solid var(--line)}
footer>div:first-child{border-left:0}
footer b{display:block;color:var(--muted);font-weight:500;font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}
footer a{text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{border-color:var(--green-hi)}

@media (max-width:900px){
  main{grid-template-columns:1fr}
  .diagram{order:-1;max-width:560px;width:100%;margin:0 auto}
  footer{grid-template-columns:1fr 1fr}
  footer>div{border-left:0;border-top:1px solid var(--line)}
  footer>div:first-child{grid-column:1/-1;border-top:0}
}
@media (prefers-reduced-motion:reduce){
  .flow,.status i{animation:none}
}