/* =====================================================================
   MUNNICH OPERACIONES · sistema visual corporativo
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&family=Space+Grotesk:wght@500;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

*,*::before,*::after{box-sizing:border-box}

:root{
  /* azules corporativos */
  --n950:#08131f; --n900:#0B1826; --n850:#102133; --n800:#17263a; --n700:#1F3550;
  --n600:#2c4665; --blue:#234e9e; --blue2:#316db0; --sky:#2ea3f2;
  /* naranja Munnich */
  --orange:#ED6C05; --orange2:#c65a04; --orange3:#ffb267;
  /* superficies */
  --paper:#f4f6f9; --card:#ffffff; --line:#e3e8ef; --line2:#eef2f7;
  --ink:#16202e; --ink2:#4a5b70; --ink3:#8697ab;
  /* semáforo */
  --ok:#15905f; --ok-bg:#e6f6ee;
  --warn:#b06a00; --warn-bg:#fff4e2;
  --dang:#c02b2b; --dang-bg:#fdecec;
  --info:#2f5fb5; --info-bg:#eaf1fd;
  --violet:#6b4bb8; --violet-bg:#f0ecfb;
  --teal:#0d7a86; --teal-bg:#e5f5f6;
  /* sombras y radios */
  --sh1:0 1px 2px rgba(16,33,51,.06), 0 1px 3px rgba(16,33,51,.05);
  --sh2:0 4px 14px rgba(16,33,51,.09), 0 2px 5px rgba(16,33,51,.05);
  --sh3:0 24px 60px rgba(8,19,31,.28);
  --r:12px; --r2:16px;
  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fd:'Space Grotesk','Inter',sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}

html,body{margin:0;padding:0;height:100%}
body{font-family:var(--ff);background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--blue);text-decoration:none}
.oculto,.hide{display:none !important}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c8d2de;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#a9b7c8;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ===================== FONDO PARALLAX ===================== */
.px{position:absolute;inset:-8%;will-change:transform;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.px-0{background:
   radial-gradient(1100px 700px at 18% 12%, #1c3c66 0%, transparent 60%),
   radial-gradient(900px 620px at 86% 82%, #16324f 0%, transparent 62%),
   radial-gradient(700px 500px at 70% 8%, rgba(237,108,5,.16) 0%, transparent 60%),
   linear-gradient(160deg, #0a1725 0%, #0e2136 45%, #08131f 100%)}
.px-grid{background-image:
   linear-gradient(rgba(120,170,225,.07) 1px, transparent 1px),
   linear-gradient(90deg, rgba(120,170,225,.07) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 45%, #000 25%, transparent 78%);
          mask-image:radial-gradient(80% 70% at 50% 45%, #000 25%, transparent 78%)}
.px-glow{filter:blur(2px)}
.orb{position:absolute;border-radius:50%;filter:blur(48px);opacity:.5}
.orb.a{width:520px;height:520px;left:4%;top:8%;background:radial-gradient(circle,#2a63b8,transparent 66%)}
.orb.b{width:600px;height:600px;right:-4%;bottom:-8%;background:radial-gradient(circle,#ED6C05,transparent 64%);opacity:.3}
.orb.c{width:380px;height:380px;left:52%;top:52%;background:radial-gradient(circle,#2ea3f2,transparent 66%);opacity:.28}
.shape{position:absolute;border:1px solid rgba(150,195,240,.2);border-radius:22px;
  background:linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.008));
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.s1{width:230px;height:230px;left:8%;top:16%;transform:rotate(15deg)}
.s2{width:150px;height:150px;right:13%;top:22%;transform:rotate(-12deg);border-radius:18px}
.s3{width:300px;height:300px;right:6%;bottom:8%;transform:rotate(22deg);border-radius:36px}
.s4{width:110px;height:110px;left:16%;bottom:16%;transform:rotate(-20deg);border-radius:14px}
.s5{width:64px;height:64px;left:44%;top:12%;transform:rotate(30deg);border-radius:10px;border-color:rgba(237,108,5,.3)}
.px-rays{background:repeating-linear-gradient(105deg, rgba(255,255,255,.028) 0 2px, transparent 2px 130px)}
.px-vig{background:radial-gradient(120% 110% at 50% 45%, transparent 42%, rgba(4,10,17,.72) 100%)}
.dust{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(180,215,255,.6);
  animation:flotar linear infinite}
@keyframes flotar{0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.75} 90%{opacity:.5} 100%{transform:translateY(-130px) translateX(28px);opacity:0}}
@keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .px,.dust,.shape{animation:none !important;transition:none !important}
}

/* ===================== BARRA SUPERIOR COMÚN ===================== */
.mo-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;
  padding:0 18px;height:56px;flex:0 0 56px;
  background:linear-gradient(180deg,var(--n900),var(--n850));
  border-bottom:1px solid rgba(255,255,255,.08);color:#dbe7f4;
  box-shadow:0 1px 0 rgba(0,0,0,.25), 0 8px 24px rgba(8,19,31,.18)}
.mo-bar .mo-sp{flex:1}
.mo-volver{display:flex;align-items:center;gap:7px;color:#a9c6e4;font-size:12.5px;font-weight:600;
  padding:7px 12px 7px 9px;border-radius:9px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);transition:background .16s,color .16s,transform .16s}
.mo-volver:hover{background:rgba(237,108,5,.18);border-color:rgba(237,108,5,.4);color:#ffc98f;transform:translateX(-2px)}
.mo-marca{display:flex;flex-direction:column;gap:3px;line-height:1.05;
  border-left:1px solid rgba(255,255,255,.12);margin-left:2px;padding-left:14px}
.mo-marca b{font-family:var(--fd);font-size:14px;letter-spacing:.14em;font-weight:700;color:#fff}
.mo-marca img{height:15px;width:auto;object-fit:contain;display:block}
.mo-marca i{font-style:normal;font-size:8.5px;letter-spacing:.3em;color:var(--orange3);font-weight:600}
.mo-amb{font-size:13px;font-weight:600;color:#8fb2d2;letter-spacing:.01em;
  padding:5px 12px;border-radius:999px;background:rgba(46,163,242,.12);border:1px solid rgba(46,163,242,.22)}
.mo-sync{font-size:11px;color:#8fb0cf;display:flex;align-items:center;gap:6px}
.mo-sync i{width:7px;height:7px;border-radius:50%;background:#3fbf7f;font-style:normal;
  box-shadow:0 0 0 3px rgba(63,191,127,.18)}
.mo-sync.busy i{background:var(--orange);box-shadow:0 0 0 3px rgba(237,108,5,.2);animation:latir 1s infinite}
.mo-sync.err i{background:#e35d5d;box-shadow:0 0 0 3px rgba(227,93,93,.2)}
@keyframes latir{50%{opacity:.35}}
.mo-yo{display:flex;align-items:center;gap:9px}
.mo-av{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--orange2));box-shadow:0 4px 12px rgba(237,108,5,.3)}
.mo-yo-t{display:flex;flex-direction:column;line-height:1.15}
.mo-yo-t b{font-size:12.5px;color:#eaf2fb;font-weight:600}
.mo-yo-t em{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7fa6cc}
.mo-salir{padding:7px 13px;border-radius:9px;font-size:12.5px;font-weight:600;color:#a9c6e4;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);transition:all .16s}
.mo-salir:hover{background:rgba(192,43,43,.22);border-color:rgba(227,93,93,.4);color:#ffc2c2}
@media(max-width:780px){.mo-marca,.mo-yo-t,.mo-amb{display:none}}