/* ============================================================
   Cliquescola UI 4-12 — camada visual responsiva
   Somente apresentação: não altera regras de negócio ou rotas.
   ============================================================ */
:root {
  --cs-navy: #123d5a;
  --cs-blue: #2477d4;
  --cs-sky: #49b8e8;
  --cs-teal: #119b89;
  --cs-green: #2f9d50;
  --cs-lime: #94c83d;
  --cs-orange: #ff9f1c;
  --cs-yellow: #ffd166;
  --cs-red: #e84f4f;
  --cs-ink: #183247;
  --cs-muted: #627386;
  --cs-paper: #ffffff;
  --cs-surface: #f4fbf8;
  --cs-border: rgba(18, 61, 90, .13);
  --cs-shadow-sm: 0 6px 18px rgba(20, 63, 84, .10);
  --cs-shadow: 0 16px 40px rgba(20, 63, 84, .16);
  --cs-shadow-lg: 0 24px 60px rgba(20, 63, 84, .20);
  --cs-radius-sm: 12px;
  --cs-radius: 20px;
  --cs-radius-lg: 28px;
  --cs-max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; min-width: 0; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-width: 0;
  min-height: 100vh;
  margin: 0 !important;
  font-family: Inter, ui-rounded, "Segoe UI", Roboto, Arial, sans-serif !important;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; }
input, select, textarea { max-width: 100%; }
button, a, input[type="submit"], input[type="button"] { -webkit-tap-highlight-color: transparent; }
button, input[type="submit"], input[type="button"] { min-height: 42px; }
:focus-visible { outline: 3px solid rgba(73,184,232,.60); outline-offset: 3px; }

/* Fundo comum: preserva a arte existente e dá leitura às telas. */
@media screen {
  body:not(#page) {
    background-color: #76ad05 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
  }
}

/* ======================= TOPO GLOBAL ======================= */
.cs-site-header {
  position: relative;
  z-index: 900;
  width: 100%;
  color: #fff;
  isolation: isolate;
  box-shadow: 0 8px 28px rgba(11,55,61,.18);
}
.cs-brandbar {
  min-height: 100px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px clamp(16px, 4vw, 54px);
  background:
    radial-gradient(circle at 83% -10%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(115deg, #80b800 0%, #67a900 48%, #4f990f 100%);
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.cs-brand-logo {
  width: clamp(64px, 6vw, 86px);
  height: clamp(64px, 6vw, 86px);
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.16));
}
.cs-brand-title {
  width: min(780px, 75vw);
  max-height: 78px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.20));
}
.cs-navbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.5fr) minmax(130px, auto);
  align-items: center;
  gap: 18px;
  padding: 8px clamp(16px, 6vw, 170px);
  background: linear-gradient(90deg, rgba(20,145,58,.98), rgba(13,140,55,.92));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.cs-nav-actions { display: flex; align-items: center; gap: 8px; }
.cs-nav-link {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.cs-nav-link:hover {
  transform: translateY(-2px) scale(1.03);
  background: rgba(255,255,255,.12);
  box-shadow: 0 8px 18px rgba(0,0,0,.11);
}
.cs-nav-link img, .cs-nav-link .menuOption {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  object-fit: contain;
  padding: 2px !important;
  filter: none !important;
}
.cs-status {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.cs-status .image1 {
  width: clamp(100px, 10vw, 138px) !important;
  height: 56px !important;
  object-fit: contain;
  filter: none !important;
  padding: 0 !important;
  opacity: .9;
}
.cs-status .ft {
  display: inline-flex !important;
  align-items: center;
  min-height: 42px;
  padding: 7px 14px !important;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.cs-status .ft p { white-space: nowrap; }
.cs-user {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cs-user-name {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.92);
}
.cs-logout {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff8b2a, #eb6130) !important;
  box-shadow: 0 8px 18px rgba(128,48,20,.24) !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform .16s ease, filter .16s ease !important;
}
.cs-logout:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Compatibilidade com páginas que ainda referenciam #menu. */
#menu.cs-navbar { width: 100% !important; height: auto !important; float: none !important; clear: both !important; margin: 0 !important; opacity: 1 !important; padding-top: 8px !important; padding-bottom: 8px !important; box-shadow: none !important; }
#menu.cs-navbar .user-info { flex-direction: row !important; align-items: center !important; gap: 10px !important; }
#menu.cs-navbar .user-info a { margin: 0; }

/* ======================= LOGIN ======================= */
#page {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.42), transparent 25%),
    linear-gradient(135deg, rgba(240,255,250,.22), rgba(0,115,105,.08)),
    url('../img/wallpp.jpg') center/cover fixed no-repeat !important;
}
#page .layout-pagina { min-height: 100svh; }
#page .conteudo-principal { padding: clamp(22px, 4vw, 48px) !important; }
#page .bloco-central { max-width: 980px; }
#page .identidade-logo { gap: 2px; margin-bottom: 18px !important; }
#page .identidade-logo img {
  width: clamp(108px, 10vw, 144px) !important;
  height: auto !important;
  filter: drop-shadow(0 12px 16px rgba(22,75,73,.14));
  animation: csFloat 4.5s ease-in-out infinite;
}
#page .texto-plataforma { font-size: 15px !important; color: #153f49; letter-spacing: .1px; }
#page .texto-versao { color: #4e6c72; font-size: 12px !important; }
#page .login-box-principal,
#page .animais-box {
  border: 1px solid rgba(255,159,28,.28) !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(8px);
  border-radius: 24px !important;
  box-shadow: var(--cs-shadow) !important;
}
#page .login-box-principal { padding: 18px !important; }
#page .login-box-principal::before {
  content: "Acesso à plataforma";
  display: block;
  margin-bottom: 12px;
  color: var(--cs-ink);
  font-size: 18px;
  font-weight: 900;
}
#page .btn-dange {
  width: auto !important;
  min-width: 150px;
  height: 42px !important;
  margin: 0 auto 12px !important;
  padding: 0 18px;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0ba56f, #0a8e78) !important;
  box-shadow: 0 8px 18px rgba(10,142,120,.20);
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
#page .btn-dange:hover { transform: translateY(-2px); background: linear-gradient(135deg, #0db87c, #0a8e78) !important; }
#page .input.is-large {
  min-height: 52px;
  border: 1px solid #d6e2e7;
  border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(20,63,84,.05);
  font-size: 17px;
  transition: border .16s ease, box-shadow .16s ease;
}
#page .input.is-large:focus { border-color: var(--cs-sky); box-shadow: 0 0 0 4px rgba(73,184,232,.15); }
#page .button.is-link {
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #2d83e5, #2369c6);
  box-shadow: 0 10px 22px rgba(35,105,198,.22);
  font-weight: 900;
  letter-spacing: .2px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#page .button.is-link:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(35,105,198,.27); filter: brightness(1.03); }
#page .animais-box { margin-top: 18px !important; padding: 18px !important; }
#page #itens-login {
  background: linear-gradient(135deg, #fff8e7, #fff4d4) !important;
  border: 1px dashed rgba(255,159,28,.45);
  border-radius: 16px !important;
}
#page .botoes-bichos { gap: 7px !important; }
#page .botao-bicho {
  border: 1px solid rgba(18,61,90,.11) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 5px 14px rgba(20,63,84,.09);
}
#page .botao-bicho:hover { transform: translateY(-4px) rotate(-1deg) !important; box-shadow: 0 10px 20px rgba(20,63,84,.16) !important; }
#page .menu-inferior { margin-top: 18px !important; }
#page .menu-inferior .image,
#page .menu-inferior .image:hover {
  width: 92px !important;
  height: 92px !important;
  filter: grayscale(18%) !important;
  transition: transform .18s ease, filter .18s ease !important;
}
#page .menu-inferior .image:hover { transform: translateY(-4px) scale(1.03); filter: grayscale(0%) !important; top: 0 !important; }
#page .patrocinadores-faixa {
  flex-basis: clamp(390px, 31vw, 540px) !important;
  padding: 28px clamp(20px, 2vw, 32px) !important;
  background:
    radial-gradient(circle at 86% 4%, rgba(255,255,255,.11), transparent 26%),
    linear-gradient(180deg, rgba(18,132,111,.91), rgba(25,119,108,.84)) !important;
  border-left: 1px solid rgba(255,255,255,.15);
}
#page .patrocinadores-area { max-width: 500px !important; }
#page .patrocinadores-titulo { font-size: clamp(22px, 2vw, 30px) !important; margin-bottom: 14px !important; }
#page .patrocinadores-sliders { display: grid; grid-template-columns: 1fr; gap: 18px; }
#page .patrocinadores-slider {
  height: clamp(250px, 34vh, 340px) !important;
  border: 7px solid rgba(255,255,255,.92);
  border-radius: 18px !important;
  box-shadow: 0 16px 32px rgba(0,54,48,.20) !important;
  background: #fff;
}
#page .patrocinadores-slide { object-fit: contain !important; border-radius: 11px; }

/* ======================= HOME / MENU PRINCIPAL ======================= */
.cs-home {
  width: min(calc(100% - 28px), 1180px);
  margin: clamp(24px, 4vw, 48px) auto 30px;
}
.cs-home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  padding: clamp(20px, 3vw, 34px);
  border-radius: 30px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(38,75,22,.14);
}
.cs-home-card {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  border-radius: 24px;
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(255,255,255,.75);
  color: var(--cs-ink) !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: var(--cs-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cs-home-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--cs-shadow);
  border-color: rgba(73,184,232,.36);
}
.cs-home-card img {
  width: clamp(100px, 10vw, 140px) !important;
  height: clamp(100px, 10vw, 140px) !important;
  object-fit: contain;
  padding: 0 !important;
  filter: none !important;
  top: 0 !important;
}
.cs-home-label { font-size: 15px; font-weight: 900; color: #173e52; }
.cs-home-footer {
  margin: 24px auto 0;
  padding: 16px 18px;
  border-top: 1px solid rgba(255,255,255,.55);
  color: #fff;
  text-align: center;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.14);
}

/* ======================= CARTÕES E FORMULÁRIOS ======================= */
.relatorio-card,
#aluno-conteudo .al-card,
.wrap .card:not(.cs-home-card),
.ld-card {
  border-radius: var(--cs-radius) !important;
}
.relatorio-card {
  width: min(calc(100% - 28px), 880px) !important;
  margin: clamp(24px, 5vw, 48px) auto !important;
  border: 1px solid var(--cs-border) !important;
  box-shadow: var(--cs-shadow) !important;
  overflow: hidden;
}
.relatorio-card .relatorio-header {
  padding: 20px 24px !important;
  background: linear-gradient(135deg, #f8fcff, #eefaf4) !important;
}
.relatorio-card .relatorio-title { color: var(--cs-ink) !important; font-size: clamp(20px, 3vw, 27px) !important; }
.relatorio-card .relatorio-body { padding: 22px 24px !important; gap: 18px !important; }
.relatorio-card .control {
  min-height: 46px !important;
  border-radius: 12px !important;
  border-color: #d7e2e7 !important;
}
.relatorio-card .btn {
  min-height: 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #ee4f59, #d93d47) !important;
}

/* Cadastro de usuários */
body .wrap { width: min(calc(100% - 28px), 1280px); max-width: 1280px; }
body .dashboard-grid { gap: 18px !important; }
body .dashboard-grid .card {
  border: 1px solid var(--cs-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--cs-shadow-sm) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
body .dashboard-grid .card:hover { transform: translateY(-3px); box-shadow: var(--cs-shadow) !important; }
body .dashboard-grid .card h2 { color: var(--cs-ink) !important; }
body .dashboard-grid .btn,
body .dashboard-grid .btn-usuarios,
body .dashboard-grid .btn-senhas { border-radius: 12px !important; }

/* Área do aluno */
#aluno-conteudo { width: min(calc(100% - 28px), 1180px); margin: 30px auto !important; padding: 0 !important; }
#aluno-conteudo .al-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 0 2px 14px !important;
}
#aluno-conteudo .al-title { color: #175b42 !important; font-size: clamp(24px, 4vw, 34px) !important; }
#aluno-conteudo .al-print-btn { border-radius: 12px !important; }
#aluno-conteudo .al-card { padding: 12px !important; box-shadow: var(--cs-shadow) !important; border: 1px solid var(--cs-border); overflow: hidden; }
#aluno-conteudo thead th { background: linear-gradient(90deg, #ffe597, #ffd369) !important; color: #654414 !important; border-bottom-color: #e8a52a !important; }
#aluno-conteudo tbody tr { transition: background .15s ease; }
#aluno-conteudo tbody tr:hover { background: #f1faf5 !important; }

/* Trilhas */
.wrap { margin-top: 22px !important; padding-top: 12px !important; }
.wrap > h2, .wrap > h3 { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.15); }
.wrap .carrossel { gap: 14px !important; scroll-snap-type: x proximity; padding-bottom: 12px !important; }
.wrap .carrossel .card {
  scroll-snap-align: start;
  background: linear-gradient(145deg, #174f78, #123d5a) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
.wrap .carrossel .card .muted { color: rgba(255,255,255,.72) !important; }
.wrap .sec:not(hr) {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--cs-shadow-sm);
}
.wrap .sec h3, .wrap .sec h4 { color: var(--cs-ink); }
.wrap .tbl { background: #fff; border-radius: 14px; overflow: hidden; }
.wrap .btn { border-radius: 12px !important; box-shadow: 0 7px 16px rgba(11,116,209,.18); }
.games-wrap { border-radius: 14px !important; }

/* Letras digitais */
#ld-page { width: min(calc(100% - 28px), 1120px); margin: 32px auto 48px !important; padding: 0 !important; }
#ld-page .ld-card {
  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(17,76,88,.30) !important;
  box-shadow: var(--cs-shadow-lg) !important;
  backdrop-filter: blur(7px);
}
#ld-page .ld-title { text-wrap: balance; }
#ld-page select { min-height: 52px; }

/* Biblioteca / listas legadas */
.dropdownmenu {
  width: min(calc(100% - 24px), 980px);
  margin: 22px auto 10px;
  border-radius: 16px;
  overflow: visible;
}
.dropdownmenu > ul {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100% !important;
  padding: 7px !important;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 16px;
  list-style: none;
}
.dropdownmenu li { float: none !important; }
.dropdownmenu a {
  border-radius: 11px;
  background: rgba(139,196,53,.94) !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}
.dropdownmenu a:hover { background: #173e52 !important; color: #fff !important; }
form[name="srchfrm"] {
  width: min(calc(100% - 28px), 1180px);
  margin: 16px auto 20px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.90);
  box-shadow: var(--cs-shadow-sm);
}
form[name="srchfrm"] > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
form[name="srchfrm"] input[type="text"] {
  flex: 1 1 360px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #d5e0e5;
  border-radius: 10px;
}
form[name="srchfrm"] select,
form[name="srchfrm"] input[type="submit"] { min-height: 44px; border-radius: 10px; }
form[name="srchfrm"] select { padding: 8px 12px; border: 1px solid #d5e0e5; }
form[name="srchfrm"] input[type="submit"] { border: 0; padding: 8px 18px; background: #2477d4; color: #fff; font-weight: 800; cursor: pointer; }
body > div[align="left"] > font > b > ol,
body > div[align="left"] ol {
  width: min(calc(100% - 28px), 1180px);
  margin: 18px auto;
  padding: 16px 16px 16px 46px;
  border-radius: 20px;
  background: rgba(255,255,255,.90);
  box-shadow: var(--cs-shadow-sm);
  color: var(--cs-ink);
}
body > div[align="left"] ol li { padding: 5px 4px; }
body > div[align="left"] ol a { color: #114f75 !important; font-weight: 800; font-size: 14px !important; }
body > div[align="left"] ol a:hover { color: #df6a17 !important; }

/* Programas / jogos */
.elm-game {
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 4px 6px;
  border-radius: 9px;
  transition: background .15s ease;
}
.elm-game:hover { background: rgba(255,255,255,.16); }
.elm-game .links { float: none !important; margin-top: 0 !important; font-size: 14px !important; line-height: 1.3; }
summary {
  padding: 7px 8px;
  border-radius: 9px;
  font-size: 15px !important;
  cursor: pointer;
  transition: background .15s ease;
}
summary:hover { background: rgba(255,255,255,.14); }

/* Pontuação por unidade */
#hits-report {
  width: min(calc(100% - 28px), 900px);
  margin: 30px auto;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255,255,255,.93);
  box-shadow: var(--cs-shadow);
  color: var(--cs-ink);
}
#hits-report h3, #hits-report label { color: var(--cs-ink) !important; }
#hits-report .input-group { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
#hits-report .input-group > div:last-child { grid-column: 1 / -1; }
#hits-report select { width: 100%; min-height: 140px; border: 1px solid #d5e0e5; border-radius: 12px; padding: 8px; background: #fff; }
#btGerarPDF { min-height: 48px; border: 0 !important; border-radius: 12px !important; background: linear-gradient(135deg, #ef514a, #d93d47) !important; color: #fff; box-shadow: 0 9px 20px rgba(217,61,71,.22); }
#btGerarPDF:hover { transform: translateY(-1px) !important; padding-right: 10px !important; background: linear-gradient(135deg, #f45d56, #d93d47) !important; }

/* Páginas institucionais antigas */
.cs-legacy-card,
body > center > table,
body > .container,
body > div.container {
  max-width: calc(100% - 28px) !important;
}
body > center > table {
  width: min(calc(100% - 28px), 900px) !important;
}
body > center > table td { max-width: 100%; }
body > center img { height: auto !important; }

/* Scrollbars discretas */
* { scrollbar-width: thin; scrollbar-color: rgba(36,119,212,.45) rgba(255,255,255,.18); }

/* ======================= RESPONSIVIDADE ======================= */
@media (max-width: 1024px) {
  .cs-brandbar { min-height: 88px; }
  .cs-navbar { grid-template-columns: auto 1fr auto; padding-inline: 22px; }
  .cs-status .image1 { display: none; }
  .cs-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page .layout-pagina { flex-direction: column !important; }
  #page .patrocinadores-faixa { width: 100% !important; min-height: 0 !important; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  #page .patrocinadores-area { max-width: 900px !important; }
  #page .patrocinadores-sliders { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #page .patrocinadores-slider { height: clamp(230px, 34vw, 330px) !important; }
}

@media (max-width: 720px) {
  .cs-brandbar { min-height: 72px; padding: 8px 12px; gap: 10px; }
  .cs-brand-logo { width: 56px; height: 56px; }
  .cs-brand-title { width: min(76vw, 580px); max-height: 54px; }
  .cs-navbar {
    grid-template-columns: auto 1fr;
    grid-template-areas: "actions user" "status status";
    gap: 8px 12px;
    padding: 8px 12px 10px;
  }
  .cs-nav-actions { grid-area: actions; }
  .cs-user { grid-area: user; }
  .cs-status { grid-area: status; justify-content: flex-start; }
  .cs-nav-link { width: 50px; height: 50px; border-radius: 15px; }
  .cs-nav-link img, .cs-nav-link .menuOption { width: 46px !important; height: 46px !important; }
  .cs-status .ft { min-height: 36px; padding: 5px 10px !important; }
  #menu.cs-navbar .ft p { font-size: 14px !important; }
  #menu.cs-navbar .ft p .acessos-num { font-size: 16px !important; }
  .cs-user-name { max-width: 105px; font-size: 11px; }
  .cs-logout { min-height: 34px; padding: 6px 11px !important; font-size: 12px; }

  #page .conteudo-principal { padding: 18px 12px !important; }
  #page .login-box-principal, #page .animais-box { border-radius: 18px !important; }
  #page .botoes-bichos { display: grid !important; grid-template-columns: repeat(6, 1fr); width: 100% !important; }
  #page .botao-bicho { width: 100% !important; height: auto !important; aspect-ratio: 1; padding: 4px !important; }
  #page .botao-bicho img { width: 100% !important; height: 100% !important; }
  #page #itens-login { min-height: 64px !important; height: auto !important; overflow-x: auto !important; justify-content: flex-start !important; }
  #page .btn-acessar-animais { max-width: 100% !important; }
  #page .patrocinadores-sliders { grid-template-columns: 1fr; }
  #page .patrocinadores-slider { height: min(68vw, 310px) !important; }
  #page .menu-inferior tr { gap: 4px 8px !important; }
  #page .menu-inferior .image, #page .menu-inferior .image:hover { width: 76px !important; height: 76px !important; }

  .cs-home { width: min(calc(100% - 20px), 1180px); margin-top: 18px; }
  .cs-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; border-radius: 22px; }
  .cs-home-card { min-height: 150px; border-radius: 18px; padding: 12px 8px; }
  .cs-home-label { font-size: 13px; }

  .relatorio-card .relatorio-body { grid-template-columns: 1fr !important; padding: 18px !important; }
  .relatorio-card .actions { padding: 16px 18px 18px !important; }
  .relatorio-card .btn { width: 100%; }

  body .dashboard-grid { grid-template-columns: 1fr !important; }
  body .dashboard-grid .card { min-height: auto !important; }
  body .wrap { width: min(calc(100% - 20px), 1280px); padding-inline: 0 !important; }

  #aluno-conteudo { width: min(calc(100% - 20px), 1180px); }
  #aluno-conteudo .al-header { align-items: flex-start; flex-direction: column; }
  #aluno-conteudo .al-print-btn { width: 100%; }
  #aluno-conteudo .al-card { padding: 8px !important; background: transparent !important; box-shadow: none !important; border: 0; overflow: visible; }
  #aluno-conteudo table, #aluno-conteudo tbody, #aluno-conteudo tr, #aluno-conteudo td { display: block; width: 100%; }
  #aluno-conteudo thead { display: none; }
  #aluno-conteudo tbody tr { margin-bottom: 12px; padding: 13px; border-radius: 16px; background: #fff !important; box-shadow: var(--cs-shadow-sm); }
  #aluno-conteudo tbody td { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; padding: 7px 4px !important; text-align: left !important; }
  #aluno-conteudo tbody td::before { color: var(--cs-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  #aluno-conteudo tbody td:nth-child(1)::before { content: "Conteúdo"; }
  #aluno-conteudo tbody td:nth-child(2)::before { content: "Questões"; }
  #aluno-conteudo tbody td:nth-child(3)::before { content: "Acertos"; }
  #aluno-conteudo tbody td:nth-child(4)::before { content: "Avanço"; }

  .wrap .sec:not(hr) { padding: 13px; }
  .tbl { display: block; overflow-x: auto; }
  .games-table th, .games-table td { padding: 9px 8px !important; }
  .games-table td.order { width: 92px !important; }
  .order-input { width: 68px !important; }

  #ld-page { width: min(calc(100% - 20px), 1120px); margin-top: 22px !important; }
  #ld-page .ld-card-inner { padding: 18px !important; }

  .dropdownmenu { width: calc(100% - 20px); margin-top: 16px; }
  .dropdownmenu > ul { justify-content: stretch; }
  .dropdownmenu li { flex: 1 1 45%; }
  .dropdownmenu a { height: 100%; display: grid !important; place-items: center; padding: 9px !important; }

  form[name="srchfrm"] { width: calc(100% - 20px); }
  form[name="srchfrm"] > div { display: grid; grid-template-columns: 1fr; text-align: left !important; }
  form[name="srchfrm"] input[type="text"], form[name="srchfrm"] select, form[name="srchfrm"] input[type="submit"] { width: 100%; }

  #hits-report { width: calc(100% - 20px); padding: 18px; }
  #hits-report .input-group { grid-template-columns: 1fr; }
  #hits-report .input-group > div:last-child { grid-column: auto; }
  #btGerarPDF { width: 100%; white-space: normal; }

  body > center > table { width: calc(100% - 20px) !important; }
  body > center > table tr, body > center > table td { display: block; width: 100% !important; height: auto !important; text-align: center; }
  body > center > table img { max-width: 160px; margin: 0 auto 12px; }
}

@media (max-width: 430px) {
  .cs-brand-title { width: calc(100vw - 82px); }
  .cs-home-grid { grid-template-columns: 1fr; }
  .cs-home-card { min-height: 138px; flex-direction: row; justify-content: flex-start; text-align: left; padding: 12px 16px; }
  .cs-home-card img { width: 92px !important; height: 92px !important; }
  #page .botoes-bichos { grid-template-columns: repeat(4, 1fr); }
  #page .patrocinadores-faixa { padding: 20px 12px 24px !important; }
  #page .patrocinadores-slider { height: 66vw !important; min-height: 220px; }
  .dropdownmenu li { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@keyframes csFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media print {
  .cs-site-header { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* Ajustes específicos da listagem de jogos */
.programas-layout {
  width: min(calc(100% - 28px), 1240px);
  margin: 0 auto;
  align-items: flex-start;
  gap: 24px;
}
.programas-lista { width: min(58%, 720px) !important; min-width: 0; }
.programas-tutorial { flex: 1 1 auto; min-width: 0; }
#tutorial {
  max-width: min(38vw, 520px);
  max-height: 70vh;
  right: 4vw;
  top: 190px;
  z-index: 1200;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--cs-shadow-lg);
}
#tutorial-img { max-width: 100%; max-height: calc(70vh - 20px); height: auto !important; border-radius: 12px; }
@media (max-width: 720px) {
  .programas-layout { width: calc(100% - 20px); display: block !important; }
  .programas-lista { width: 100% !important; }
  .programas-tutorial { display: none; }
  #tutorial { display: none !important; }
  a:hover span { display: none !important; }
}


/* Acabamento das páginas institucionais legadas */
@media screen {
  body > center {
    width: min(calc(100% - 28px), 980px);
    margin: 26px auto;
  }
  body > center > table:not(:first-child) {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(5px);
  }
  body > div[align="left"] ol p { margin: 0 !important; }
}

/* Garantia de largura fluida no login (corrige larguras fixas legadas). */
#page .bloco-central { width: 100% !important; max-width: 980px !important; }
#page .topo-login { width: 100% !important; max-width: 430px !important; }
#page .login-box-principal { width: 100% !important; max-width: 430px !important; }
#page .animais-box { width: 100% !important; max-width: 920px !important; }
#page .menu-inferior { width: 100% !important; max-width: 920px !important; }
#page .botoes-bichos { width: 100% !important; max-width: 860px !important; }
#page #itens-login { width: 100% !important; max-width: 760px !important; }
#page .btn-acessar-animais { width: 100% !important; max-width: 760px !important; }

/* O CSS legado define #menu como flex; força o novo grid do topo. */
#menu.cs-navbar {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.5fr) minmax(130px, auto) !important;
  align-items: center !important;
  justify-content: initial !important;
}
@media (max-width: 1024px) {
  #menu.cs-navbar { grid-template-columns: auto 1fr auto !important; }
}
@media (max-width: 720px) {
  #menu.cs-navbar {
    grid-template-columns: auto 1fr !important;
    grid-template-areas: "actions user" "status status" !important;
  }
  #menu.cs-navbar .cs-nav-actions { grid-area: actions; }
  #menu.cs-navbar .cs-user { grid-area: user; }
  #menu.cs-navbar .cs-status { grid-area: status; justify-content: center; }
}