/* =====================================================================
   MIMAGO shell — app-wide chrome (header + nav + cuenta + tabs + tema)
   Plain HTML, sin DevExpress. Loaded globally by Root.master.
   Everything is scoped under .mg-* / [data-theme] so it never touches
   page content styles. Fonts (Poppins + Inter) load via <link> in head.
   ===================================================================== */

:root{
  --mg-azure:#12A6E8; --mg-azure-deep:#0E93D4; --mg-azure-ink:#0B7FBB; --mg-azure-wash:#E7F4FD;
  --mg-red:#E5253A;
  --mg-page-bg:#EAEFF4; --mg-surface:#FFFFFF; --mg-surface-2:#F6F9FC;
  --mg-line:#E6EBF1;
  --mg-ink:#14243D; --mg-ink-2:#33455E; --mg-slate:#66768A; --mg-slate-2:#93A1B0;
  --mg-header-h:58px;
  --mg-shadow:0 12px 30px -14px rgba(20,36,61,.20), 0 2px 6px -2px rgba(20,36,61,.06);
  --mg-font-display:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
  --mg-font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --mg-azure:#2BB4F2; --mg-azure-deep:#12A6E8; --mg-azure-ink:#8AD5F7; --mg-azure-wash:#12283A;
    --mg-page-bg:#0C1420; --mg-surface:#152130; --mg-surface-2:#101B28;
    --mg-line:#243449;
    --mg-ink:#EAF1F8; --mg-ink-2:#C3D1DF; --mg-slate:#8B9BAD; --mg-slate-2:#66768A;
    --mg-shadow:0 14px 34px -16px rgba(0,0,0,.6), 0 2px 8px -3px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --mg-azure:#2BB4F2; --mg-azure-deep:#12A6E8; --mg-azure-ink:#8AD5F7; --mg-azure-wash:#12283A;
  --mg-page-bg:#0C1420; --mg-surface:#152130; --mg-surface-2:#101B28;
  --mg-line:#243449;
  --mg-ink:#EAF1F8; --mg-ink-2:#C3D1DF; --mg-slate:#8B9BAD; --mg-slate-2:#66768A;
  --mg-shadow:0 14px 34px -16px rgba(0,0,0,.6), 0 2px 8px -3px rgba(0,0,0,.5);
}

/* Root.master linkea bootstrap.min.css DESPUÉS de este archivo, y su `body`
   (--bs-body-bg:#fff) empata en especificidad con el de Layout.css y gana por
   orden. `html body` gana sin depender del orden de los <link>. */
html body{ background:var(--mg-page-bg); color:var(--mg-ink); }

/* ===================== HEADER ===================== */
.mg-header{
  position:sticky; top:0; z-index:200;
  height:var(--mg-header-h);
  background:var(--mg-surface);
  border-bottom:1px solid var(--mg-line);
  box-shadow:0 1px 0 rgba(20,36,61,.02), 0 6px 20px -16px rgba(20,36,61,.4);
}
.mg-header-inner{
  height:100%; max-width:1280px; margin:0 auto;
  display:flex; align-items:center; gap:18px; padding:0 clamp(12px,3vw,28px);
}

.mg-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.mg-logo{
  width:36px; height:36px; border-radius:11px; flex:0 0 auto;
  background:linear-gradient(140deg,var(--mg-azure),var(--mg-azure-deep)); color:#fff;
  display:grid; place-items:center; font-family:var(--mg-font-display); font-weight:800; font-size:20px;
  box-shadow:0 8px 16px -6px rgba(18,166,232,.6);
}
.mg-word{ display:flex; flex-direction:column; line-height:1; }
.mg-word b{ font-family:var(--mg-font-display); font-weight:800; font-size:17px; letter-spacing:-.02em; color:var(--mg-ink); }
.mg-word span{ font-size:10.5px; font-weight:600; color:var(--mg-slate); letter-spacing:.02em; margin-top:3px; }

/* web nav */
.mg-nav{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.mg-nav-item{
  display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 15px; border-radius:11px;
  text-decoration:none; color:var(--mg-slate);
  font-family:var(--mg-font-display); font-weight:600; font-size:14px;
  transition:background .16s, color .16s;
}
.mg-nav-item svg{ width:19px; height:19px; }
.mg-nav-item:hover{ background:var(--mg-surface-2); color:var(--mg-ink-2); }
.mg-nav-item.is-active{ background:var(--mg-azure-wash); color:var(--mg-azure-ink); }

.mg-header-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.mg-icon-btn{
  width:40px; height:40px; border-radius:11px; border:1px solid var(--mg-line);
  background:var(--mg-surface); cursor:pointer; display:grid; place-items:center;
  color:var(--mg-ink-2); transition:border-color .18s, transform .18s;
}
.mg-icon-btn:hover{ border-color:var(--mg-azure); transform:translateY(-1px); }
.mg-icon-btn svg{ width:18px; height:18px; }

.mg-signin{
  display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:11px;
  text-decoration:none; color:#fff; background:linear-gradient(140deg,var(--mg-azure),var(--mg-azure-deep));
  font-family:var(--mg-font-display); font-weight:700; font-size:14px;
  box-shadow:0 8px 16px -8px rgba(18,166,232,.6);
}

/* ===================== ACCOUNT DROPDOWN ===================== */
.mg-account{ position:relative; }
.mg-account-btn{
  width:40px; height:40px; padding:0; border:0; background:transparent; cursor:pointer;
  border-radius:50%; display:grid; place-items:center;
}
.mg-avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(140deg,var(--mg-azure),var(--mg-azure-deep)); color:#fff;
  display:grid; place-items:center; font-family:var(--mg-font-display); font-weight:800; font-size:14px;
  box-shadow:0 6px 14px -6px rgba(18,166,232,.6);
}
.mg-account-btn:hover .mg-avatar{ filter:brightness(1.05); }

.mg-menu{
  position:absolute; top:calc(100% + 10px); right:0; width:264px;
  background:var(--mg-surface); border:1px solid var(--mg-line); border-radius:16px;
  box-shadow:var(--mg-shadow); padding:8px;
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right;
  pointer-events:none; transition:opacity .16s, transform .16s;
}
.mg-account.open .mg-menu{ opacity:1; transform:none; pointer-events:auto; }
.mg-menu-head{ padding:10px 12px 12px; border-bottom:1px solid var(--mg-line); margin-bottom:6px; }
.mg-menu-id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mg-uname{ font-family:var(--mg-font-display); font-weight:700; font-size:14px; color:var(--mg-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-uemail{ font-size:12px; color:var(--mg-slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-menu-item{
  display:flex; align-items:center; gap:11px; width:100%; box-sizing:border-box;
  padding:11px 12px; border:0; background:transparent; cursor:pointer; border-radius:10px;
  text-decoration:none; color:var(--mg-ink-2); text-align:left;
  font-family:var(--mg-font-body); font-weight:600; font-size:13.5px;
  transition:background .14s, color .14s;
}
.mg-menu-item svg{ width:18px; height:18px; flex:0 0 auto; color:var(--mg-slate); }
.mg-menu-item:hover{ background:var(--mg-surface-2); color:var(--mg-ink); }
.mg-menu-item:hover svg{ color:var(--mg-azure); }
.mg-menu-item.danger{ color:var(--mg-red); }
.mg-menu-item.danger svg{ color:var(--mg-red); }
.mg-menu-item.danger:hover{ background:color-mix(in srgb,var(--mg-red) 10%,transparent); color:var(--mg-red); }

/* ===================== TOOLBAR + RIGHT PANEL WRAPPERS ===================== */
.mg-toolbar-wrap{
  position:sticky; top:var(--mg-header-h); z-index:150;
  background:var(--mg-surface); border-bottom:1px solid var(--mg-line);
}
.mg-rightpanel{ display:none; }   /* aparece sólo si una página inyecta contenido (lo controla el code-behind) */

/* ===================== MOBILE BOTTOM TABS ===================== */
.mg-tabs{ display:none; }

@media (max-width:820px){
  .mg-nav{ display:none; }
  .mg-word span{ display:none; }
  .mg-header-inner{ gap:10px; }

  .mg-tabs{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:250;
    height:62px; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0));
    background:var(--mg-surface); border-top:1px solid var(--mg-line);
    box-shadow:0 -8px 24px -16px rgba(20,36,61,.5);
  }
  .mg-tab{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    text-decoration:none; color:var(--mg-slate); border-radius:12px;
    font-family:var(--mg-font-display); font-weight:600; font-size:10.5px;
    transition:color .16s;
  }
  .mg-tab svg{ width:22px; height:22px; }
  .mg-tab.is-active{ color:var(--mg-azure); }

  /* espacio para que el contenido no quede tapado por las tabs */
  .content-wrapper{ padding-bottom:62px; }
}

@media (prefers-reduced-motion:reduce){
  .mg-icon-btn, .mg-menu, .mg-nav-item{ transition:none; }
}