/* =========================================================
   VARIÁVEIS GLOBAIS
========================================================= */
:root {
  --bg1: #FDFDFD;
  --bg2: #FFFFFF;
  --txt: #000000;
  --title: #202020;
  --accent: #510424;
  --hover: #6B0931;
  --border: #EFEFEF;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================================================
   RESET E ESTADOS GLOBAIS
========================================================= */
.mp-root, .mp-root * { box-sizing: border-box; }
.mp-root { font-family: var(--font); color: var(--txt); }
.mp-root button:focus, .mp-root a:focus { outline: none !important; box-shadow: none !important; }

/* =========================================================
   LAYOUT GERAL
========================================================= */
.mp-dash { width: 100%; padding: 18px 18px 26px; }

/* =========================================================
   TOPBAR E NAVEGAÇÃO
========================================================= */
.mp-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 36px !important; }
.mp-brand__title { font-size: 22px; font-weight: 700; color: var(--title); line-height: 1.1; }
.mp-brand__sub { margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--accent); }
.mp-topbar__right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 2px; }

.mp-nav { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.mp-nav__link { text-decoration: none; color: var(--title); font-weight: 500; font-size: 12px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.mp-nav__link:hover { border-color: rgba(81,4,36,.20); color: var(--accent); background: rgba(81,4,36,.03); }
.mp-nav__link.is-active { border-color: rgba(81,4,36,.45); color: var(--accent); background: transparent; }

/* =========================================================
   BOTÕES GERAIS E MATADOR DE FLOAT
========================================================= */
html body .mp-root .mp-btn {
  font-family: var(--font); border-radius: 10px; padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.10); background: #fff; cursor: pointer;
  font-weight: 600; font-size: 13px; color: var(--title); display: inline-flex;
  align-items: center; justify-content: center; gap: 8px;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease !important;
  transform: translateY(0) !important; box-shadow: none !important;
}
html body .mp-root .mp-btn:hover, html body .mp-root .mp-btn:active { 
  transform: translateY(0) !important; box-shadow: none !important;
}

html body .mp-root .mp-btn--primary { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
html body .mp-root .mp-btn--primary:hover { background: var(--hover) !important; border-color: var(--hover) !important; color: #fff !important; }

html body .mp-root .mp-btn--ghost { background: transparent !important; border: 1px solid rgba(0,0,0,.12) !important; color: #333 !important; box-shadow: none !important; text-decoration: none !important; }
html body .mp-root .mp-btn--ghost:hover { border-color: #111 !important; color: #111 !important; background: rgba(0,0,0,.03) !important; }

/* =========================================================
   A BOMBA ATÔMICA DO BOTÃO ATUALIZAR (Tirando o Preto no Hover)
========================================================= */
html body .mp-root .mp-topbar__right .mp-btn { border-radius: 12px !important; transform: translateY(0) !important; }

html body #modelar-painel-app .mp-topbar__right button[data-action="reload"]:hover,
html body #modelar-painel-app .mp-topbar__right button[data-action="reload"]:active,
html body #modelar-painel-app .mp-topbar__right button[data-action="reload"]:focus {
  border-color: var(--accent, #510424) !important;
  color: var(--accent, #510424) !important;
  background: transparent !important;
  outline: none !important;
}

html body #modelar-painel-app .mp-topbar__right a[href*="logout"]:hover,
html body #modelar-painel-app .mp-topbar__right a[href*="logout"]:active {
  border-color: #d32f2f !important;
  color: #d32f2f !important;
  background: rgba(211,47,47,0.05) !important;
}

/* =========================================================
   LOADING SCREEN (GLOBAL) E MÍDIA QUERIES
========================================================= */
.mp-loadingScreen { position: fixed; inset: 0; z-index: 999999; background: rgba(253,253,253,.86); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; }
.mp-loadingScreen.is-on { display: flex; }
.mp-loadingScreen__card { width: min(420px, 92vw); background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.14); padding: 18px 18px; text-align: center; }
.mp-spinner { width: 44px; height: 44px; border-radius: 999px; border: 4px solid rgba(0,0,0,.08); border-top-color: var(--accent); margin: 0 auto 12px; animation: mpSpin .8s linear infinite; }
@keyframes mpSpin { to { transform: rotate(360deg); } }
.mp-loadingScreen__title { font-weight: 900; color: var(--accent); font-size: 14px; margin-bottom: 6px; }
.mp-loadingScreen__sub { font-weight: 600; color: #666; font-size: 12px; }

@media (max-width: 980px) { .mp-topbar__right { align-items: flex-start; } .mp-nav { justify-content: flex-start; } }