/* =========================
   App Shell (global)
   ========================= */
:root{
  --primary:#0056a0;
  --bg:#f4f7f6;
  --card:#fff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --radius:.75rem;
  --radius-sm:.5rem;
  --z-sidebar:1040; --z-overlay:1080; --z-toast:1090; --z-sheet:1085;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y: contain; /* evita "rebote" agressivo em navegadores compatíveis */
}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-body{padding:1.25rem}

/* =========================
   Topbar
   ========================= */
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  transition: box-shadow .15s ease, background .15s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.topbar.scrolled{ box-shadow:0 4px 18px rgba(0,0,0,.08); background:#fff; }

/* Hamburguer (injetado via JS) */
.mobile-hamburger{ display:none; }
@media (max-width: 768px){
  .mobile-hamburger{display:inline-flex;align-items:center;gap:.5rem;border:0;background:transparent;font-size:1.35rem}
}

/* Sidebar */
.sidebar{width:260px}
@media (max-width: 768px){
  .sidebar{
    position:fixed; left:-260px; top:0; bottom:0; width:260px;
    background:#0b4b83; color:#fff; z-index:var(--z-sidebar);
    transition:left .22s ease; box-shadow:2px 0 12px rgba(0,0,0,.22)
  }
  .sidebar.open{left:0}
  .main-content{padding-left:0!important}
}

/* Padding/espaçamento em mobile */
@media (max-width: 768px){
  body.mobile .content{padding:1rem!important}
  body.mobile .card-body{padding:1rem!important}
  body.mobile .row.g-3>[class^="col-"],
  body.mobile .row.g-3>[class*=" col-"]{width:100%}
  body.mobile .btn{padding:.64rem 1rem}
  body.mobile .pagination .page-link{padding:.6rem .85rem}
}

/* =========================
   Login (landing) — cabeçalho de marcas + herói
   ========================= */
.brand-strip{
  display:flex; align-items:center; justify-content:center;
  background:#0b4b83; padding:.35rem .75rem;
}
.brand-strip img{ height: clamp(16px, 2.5vw, 24px); width:auto; margin:0 .5rem; object-fit:contain }

/* bloco de fundo/hero */
.login-hero{
  position:relative; display:grid; place-items:center;
  min-height: clamp(60vh, 80vh, 92vh);
  background-size:cover; background-position:center;
}
.login-hero .hero-inner{
  text-align:center; padding: clamp(16px, 3.5vw, 32px);
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.login-hero .hero-logo{
  width: clamp(64px, 22vw, 120px); height:auto; margin: 0 auto 12px auto;
  display:block;
}
.login-hero h1{
  font-weight:800; letter-spacing:.5px;
  font-size: clamp(1.4rem, 5.4vw, 2.6rem);
  margin: .25rem 0 .35rem;
}
.login-hero h2, .login-hero .subtitle{
  font-weight:500; color:#f3f4f6;
  font-size: clamp(.95rem, 3.4vw, 1.15rem);
}

@media (max-width: 768px){
  .portal-logo,
  .navbar-brand img {
    width: 100%;
    max-width: 420px; /* mesma largura máxima do box de login */
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* cartão de login */
.login-card{
  margin: clamp(12px, 3vw, 24px) auto;
  max-width: 560px;
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(4px);
}

/* =========================
   Tabelas → Cards no mobile
   ========================= */
@media (max-width: 768px){
  body.mobile table.table{display:block;width:100%}
  body.mobile table.table thead{display:none}
  body.mobile table.table tbody{display:grid;gap:.85rem}
  body.mobile table.table tbody tr{
    display:grid; gap:.25rem;
    padding:.95rem; border:1px solid var(--border);
    border-radius:var(--radius-sm); background:#fff; box-shadow:var(--shadow)
  }
  body.mobile table.table tbody td{
    display:block; padding:.28rem 0; border:0!important; word-break:break-word;
  }
  body.mobile .table .text-end, body.mobile .table .text-center{ text-align:left!important }
  .__label{ display:block; font-size:.75rem; color:var(--muted); margin:0 0 2px }
  /* separadores visuais opcionais */
  body.mobile table.table tbody td + td{ border-top:1px dashed #eef1f4; padding-top:.55rem; margin-top:.25rem }
}

/* =========================
   Cards, métricas e badges
   ========================= */
.metric{ font-weight:800; font-size: clamp(1.6rem, 6vw, 2.2rem) }
.badge-soft{ background:#eef6ff; color:#0b4b83; border-radius:999px; padding:.25rem .6rem }

/* =========================
   Floating Action Button (opcional)
   ========================= */
.fab{
  position:fixed; right:16px; bottom:16px;
  border-radius:999px; padding:.9rem 1rem;
  background:var(--primary); color:#fff; border:0;
  box-shadow:0 6px 18px rgba(0,0,0,.18); z-index:1070
}

/* =========================
   Toasts e overlays (se usar ui-kit)
   ========================= */
.ui-toast-wrap{position:fixed;left:0;right:0;bottom:0;display:grid;gap:.5rem;padding:.75rem;z-index:var(--z-toast)}
.ui-toast{background:#111827;color:#fff;padding:.85rem 1rem;border-radius:.6rem;box-shadow:0 6px 24px rgba(0,0,0,.2);opacity:.98}
.ui-toast.success{background:#065f46} .ui-toast.warn{background:#92400e} .ui-toast.error{background:#7f1d1d}

.ui-loading{position:fixed;inset:0;background:rgba(255,255,255,.7);display:none;align-items:center;justify-content:center;z-index:var(--z-overlay)}
.ui-loading.show{display:flex}
.ui-spinner{width:38px;height:38px;border:4px solid #cbd5e1;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================
   Bottom Sheet (ui-kit)
   ========================= */
.ui-sheet{position:fixed;left:0;right:0;bottom:-100%;background:#fff;border-top-left-radius:1rem;border-top-right-radius:1rem;box-shadow:0 -8px 30px rgba(0,0,0,.2);z-index:var(--z-sheet);transition:bottom .25s}
.ui-sheet.show{bottom:0}
.ui-sheet .handle{width:44px;height:5px;background:#e5e7eb;border-radius:999px;margin:8px auto}

/* =========================
   Banner de rede
   ========================= */
.net-banner{position:fixed;top:0;left:0;right:0;display:none;gap:.6rem;align-items:center;justify-content:center;padding:.5rem .8rem;background:#b91c1c;color:#fff;z-index:1100}
.net-banner.show{display:flex}

/* =========================
   100dvh / iOS teclado
   ========================= */
@supports (height: 100dvh){ body{min-height:100dvh} }

/* Acessibilidade / redução de animação */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}
/* ====== COMPAT: tiras de marcas do login (topo azul) ====== */
@media (max-width: 768px){
  /* qualquer barra azul com múltiplas logos */
  .brand-strip img,
  header .logos img,
  header .brand img,
  .topbar .logos img,
  .header-brand img,
  .header .logos img {
    height: clamp(16px, 2.8vw, 22px) !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 .4rem !important;
    filter: none !important;
  }

  /* reduz padding do topo azul para ficar mais “leve” */
  .brand-strip,
  header .logos,
  .header-brand {
    padding: .35rem .8rem !important;
    display:flex; align-items:center; justify-content:center;
    gap:.5rem;
  }

  /* logo central do herói (mesmo sem classes novas) */
  .login-hero img.hero-logo,
  .hero img.logo,
  .hero img[alt*="logo" i],
  .login-hero img[alt*="inovacao" i],
  .login-hero img[alt*="centro" i]{
    width: clamp(68px, 24vw, 110px) !important;
    height:auto !important;
    display:block; margin: 0 auto 10px auto !important;
  }

  /* títulos do herói mais contidos */
  .login-hero h1 { font-size: clamp(1.35rem, 5.2vw, 2.3rem) !important; }
  .login-hero h2, .login-hero .subtitle { font-size: clamp(.95rem, 3.4vw, 1.1rem) !important; }
}

/* ====== COMPAT: tabelas sem classe .table => viram “cards” no mobile ====== */
@media (max-width: 768px){
  body.mobile table:not([data-no-mobile-cards]){
    display:block; width:100%;
  }
  body.mobile table:not([data-no-mobile-cards]) thead{ display:none; }
  body.mobile table:not([data-no-mobile-cards]) tbody{
    display:grid; gap:.85rem;
  }
  body.mobile table:not([data-no-mobile-cards]) tbody tr{
    display:grid; gap:.25rem;
    padding:.95rem; border:1px solid var(--border);
    border-radius:var(--radius-sm); background:#fff; box-shadow:var(--shadow);
  }
  body.mobile table:not([data-no-mobile-cards]) tbody td{
    display:block; padding:.3rem 0; border:0 !important; word-break: break-word;
  }
  body.mobile table:not([data-no-mobile-cards]) tbody td + td{
    border-top:1px dashed #eef1f4; padding-top:.55rem; margin-top:.25rem;
  }
  body.mobile .__label{ display:block; font-size:.75rem; color:var(--muted); margin:0 0 2px }
}