:root{
  --bg:#fff;
  --text:#111;
  --muted:#566;
  --primary-color:#0A66FF;
  --access-blue: #0A66FF; /* azul mais carregado solicitado */
  --access-blue-hover: #0056d9; /* cor ao passar o cursor */
  --bg-glow: rgba(77,184,255,0.22); /* subtle cyan glow matching the background image */
  --bg-glow-strong: rgba(77,184,255,0.34);
  --card:#f7f9fb;
  /* Use Arial for content as requested */
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:16px; line-height:1.5;}
/* add background image for the whole app (system) */
body {
  padding-top: 74px;
  /* keep overlay color on body but move the actual image to html so it covers full page including footer */
  background-color: rgba(255,255,255,0.18);
  background-blend-mode: overlay;
}
/* Apply the background image to the html element so it always covers the full page (including footer) */
html {
  background-image: url('/Imagem sistema.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
.welcome-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #eee}
/* Android-like phone frame for main menu */
.phone-frame{
  margin:20px auto;
  width:360px;
  max-width:92%;
  box-shadow:0 18px 40px rgba(10,20,30,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
  overflow:auto; /* allow internal scrolling so all menu info is reachable */
  max-height: calc(100vh - 40px); /* ensure the frame fits the viewport and becomes scrollable on small screens */
  /* make frame semi-transparent so the system background image can be seen through */
  background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(251,253,255,0.56));
  border:1px solid rgba(0,0,0,0.05);
  position: relative; /* needed so footer can stick inside frame */
}
/* small top status area to make it look like a mobile phone UI so users see it's on a phone */
.phone-frame::before{
  content:''; display:block; height:28px; background:linear-gradient(180deg,rgba(0,0,0,0.04),transparent); border-radius:20px 20px 0 0; margin:0; position:relative;
}
/* Add thin blue edge bars at top and bottom of the phone-frame */
.phone-frame::before{
  content:''; display:block; height:30px; position:relative; margin:0;
  background: linear-gradient(180deg, #0078FF 0%, #0078FF 100%), linear-gradient(180deg, rgba(0,0,0,0.04), transparent);
  background-blend-mode: normal, overlay;
  border-radius:20px 20px 0 0;
}
/* make main sections inside frame scrollable on small screens */
.phone-frame > .welcome-content,
.phone-frame > .welcome-actions{padding:16px 18px}
/* ensure main menu buttons are compact and clearly visible like on mobile */
.phone-frame .welcome-actions-inner{display:flex;flex-direction:column;gap:8px;}
.phone-frame .action-btn{max-width:280px;padding:8px 10px;font-size:0.84rem;border-radius:10px;}
/* make main menu action buttons compact and shorter length */
.phone-frame .action-btn{
    width:auto;
    max-width:160px;
    align-self:center;
    border-radius:10px;
    padding:4px 6px;
    font-size:0.72rem;
}
.phone-frame .action-btn{width:100%;border-radius:10px;padding:6px 8px;font-size:0.82rem;}
/* New: course button hover — avoid white, use colored glow and different hover color */
.courses-grid .course-btn {
  background: var(--access-blue) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: 0 8px 22px rgba(10,86,179,0.06), 0 14px 40px var(--bg-glow);
  transition: transform 160ms ease, box-shadow 180ms ease, filter 140ms ease, background-color 160ms ease;
}
.courses-grid .course-btn:hover {
  background: var(--access-blue-hover) !important;
  filter: brightness(1.08);
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(10,86,179,0.12), 0 30px 90px var(--bg-glow-strong);
  color: #fff !important;
}
.phone-frame .welcome-footer{border-radius:0 0 24px 24px;padding:12px 16px}
/* small bottom navigation visual */
.phone-frame::after{
  content:'';
  display:block;
  height:10px;
  width:76px;
  background:rgba(0,0,0,0.06);
  border-radius:20px;
  margin:12px auto 18px;
}
/* Add thin blue edge bars at top and bottom of the phone-frame */
.phone-frame::after{
  content:'';
  display:block;
  height:18px;
  width:100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), transparent);
  position:relative;
  margin:0;
  box-shadow: inset 0 6px 0 #0078FF;
  border-radius:0 0 20px 20px;
}
/* Top social buttons were removed — footer links remain active (styles below) */
.course-select{padding:8px 10px;border-radius:8px;border:1px solid #e4edf5;background:#fff}
.courses-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;padding:12px}
.search-container{display:flex;gap:8px;align-items:center;padding:12px;max-width:760px}
.search-controls{display:flex;gap:8px;flex:1}
#search-input,#disease-search-input{flex:1;padding:6px 8px;border-radius:8px;border:1px solid #e6eef8;font-size:0.9rem;max-width:220px}
.select-wrapper select, .course-select, #exam-select, #disease-select, .illustrative-select select { max-width:180px; width:100%; padding:6px 8px; }
/* ensure on small screens these remain compact */
@media (max-width:480px){
  #search-input,#disease-search-input{max-width:160px}
  .select-wrapper select, .course-select, #exam-select, #disease-select, .illustrative-select select { max-width:140px }
}
.results-card{background:#fff;border:1px solid #eee;padding:12px;border-radius:8px;margin-bottom:10px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-content{background:#fff;padding:18px;border-radius:10px;max-height:90vh;overflow:auto;box-shadow:0 6px 30px rgba(0,0,0,0.12)}
.tutorial-section h3{margin:8px 0 6px 0}
.welcome-footer{
  margin-top:12px;
  padding:10px 12px;
  background:var(--card);
  border-radius:12px 12px 20px 20px;
  font-size:0.95rem;
  color:var(--muted);
  box-shadow: 0 -6px 20px rgba(10,20,30,0.04);
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index: 12;
}
.welcome-footer h4{margin:0 0 6px 0;color:var(--text);font-size:1rem}
.welcome-footer details summary{cursor:pointer}
#cursos-btn { background:#1F8A70 !important; } /* teal */
#doencas-btn { background:#D35400 !important; } /* orange */
#simuladores-btn { background:#7FC9FF !important; } /* light blue for Simuladores */
/* ensure simulator-specific UI uses the same light blue */
#simulators-screen .action-btn, #simulators-screen .category-folder, #simulators-guide-folder {
  background: #7FC9FF !important;
  color: #07364a !important;
  border-color: transparent !important;
}
/* change manuals support button color (top nav and main menu) */
#manuals-support-btn, #manuals-support-btn-top { background: #A6372A !important; color: #fff !important; }
.action-btn { 
  background: var(--primary-color) !important;
  color:#fff !important;
}
/* make individual card/share and other small buttons distinct */
.open-exam { background:#0B845E !important; border-radius:12px; padding:4px 8px; font-size:0.8rem; }
.card-share { background:#0057d9 !important; border-radius:12px; padding:4px 8px; font-size:0.8rem; }
.manual-title{
  font-weight:700;
  text-decoration:underline;
  font-size:1rem;
  color:var(--text);
}
.empty-pointer{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;color:var(--muted);text-align:center}
.pointer-dot{font-size:3.2rem;line-height:1;color:var(--primary-color);opacity:0.95;margin-bottom:6px}
.empty-text{font-size:0.95rem;color:#556}
@media (max-width:480px){
  /* Reduce disease select size on phones */
  #disease-select { font-size:0.88rem; padding:6px 6px; max-width:180px; width:100%; }
}
@media (max-width:640px){
  .welcome-actions-inner{flex-direction:column}
}
@media (max-width:420px){
  .phone-frame{width:300px}
  .phone-frame .action-btn{max-width:100%; font-size:0.74rem; padding:6px 8px}
}
@media (min-width:900px){
  /* make buttons look more "Windows"/professional on desktop */
  .action-btn, .back-btn, .open-exam, .manual-open, .card-share {
    background: transparent !important;
    color: var(--text) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 0.95rem !important;
    min-width: 120px;
    text-transform: none;
  }
  .action-btn { background: linear-gradient(180deg, #f7f8fa, #ffffff) !important; }
  .action-btn:hover, .open-exam:hover, .manual-open:hover { background: linear-gradient(180deg,#eef3ff,#e6edff) !important; border-color: rgba(10,100,255,0.14) !important; }
  .back-btn { min-width:44px; padding:6px 10px; font-weight:600; border-radius:6px; }
}
@media (min-width:900px){
  /* remove phone-like frame on desktop */
  .phone-frame{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    box-shadow:none !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
    max-height:none !important;
    position: static !important;
  }
  .phone-frame::before, .phone-frame::after{ display:none !important; }
  .phone-frame .welcome-footer{ position: static !important; box-shadow:none !important; border-radius:0 !important; }
}
@media (min-width:900px){
  /* New: on desktop make main menu (welcome-actions-inner) appear as a horizontal plain link list instead of prominent buttons */
  .welcome-actions-inner{
    display:flex;
    flex-direction:row;
    gap:12px;
    align-items:center;
    padding:0;
  }
  /* render action buttons as simple inline links */
  .phone-frame .welcome-actions-inner .action-btn,
  .welcome-actions-inner .action-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 8px !important;
    font-weight:600;
    color: var(--primary-color) !important;
    text-decoration: none;
    min-width: 0 !important;
  }
  .welcome-actions-inner .action-btn:hover{
    text-decoration: underline;
    background: transparent !important;
  }
}
/* responsive main navigation (mobile pills / desktop inline links) */
.main-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  width:100%;
  padding:0;
  margin:0;
  list-style:none;
}
.main-nav .nav-link{
  display:inline-block;
  padding:10px 18px;
  border-radius:8px;
  background:#fff !important;
  color:var(--primary-color) !important;
  border:1px solid rgba(10,86,179,0.08) !important;
  box-shadow: 0 6px 18px rgba(10,86,179,0.06);
  text-decoration:none;
  font-weight:700;
  text-transform:capitalize;
  transition: background 0.2s, color 0.2s;
}
/* Graduation hat icon (visible, larger and bright with subtle shimmer) */
.grad-icon{
  display:inline-block;
  font-size:1.35em;
  line-height:1;
  margin-right:8px;
  vertical-align:middle;
  filter: drop-shadow(0 6px 14px rgba(10,120,255,0.22));
  text-shadow:
    0 2px 8px rgba(10,102,255,0.25),
    0 6px 22px rgba(127,201,255,0.10);
  transform: translateY(-1px);
  transition: transform 220ms ease, text-shadow 320ms ease, filter 320ms ease;
  will-change: transform, text-shadow, filter;
  /* shimmer animation */
  animation: grad-shimmer 3.2s infinite ease-in-out;
}
/* reduce motion fallback */
@media (prefers-reduced-motion: reduce){
  .grad-icon { animation: none; transform: none; }
}
@keyframes grad-shimmer{
  0%{ transform: translateY(-1px) rotate(-2deg); text-shadow: 0 2px 6px rgba(10,102,255,0.14), 0 6px 18px rgba(127,201,255,0.06); filter: drop-shadow(0 4px 10px rgba(10,120,255,0.14)); }
  35%{ transform: translateY(-3px) rotate(0deg); text-shadow: 0 4px 12px rgba(10,102,255,0.28), 0 10px 30px rgba(127,201,255,0.12); filter: drop-shadow(0 10px 20px rgba(10,120,255,0.22)); }
  70%{ transform: translateY(-1px) rotate(2deg); text-shadow: 0 2px 6px rgba(10,102,255,0.14), 0 6px 18px rgba(127,201,255,0.06); filter: drop-shadow(0 4px 10px rgba(10,120,255,0.14)); }
  100%{ transform: translateY(-1px) rotate(-2deg); text-shadow: 0 2px 6px rgba(10,102,255,0.14), 0 6px 18px rgba(127,201,255,0.06); filter: drop-shadow(0 4px 10px rgba(10,120,255,0.14)); }
}
.main-nav .nav-link:hover{ background:#0056b3; color:#fff; }

/* Biblioteca access card (modern dashboard style) */
.biblioteca-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  margin:16px auto 6px;
  max-width:520px;
  width:92%;
  border-radius:14px;
  box-shadow: 0 12px 36px rgba(7,34,77,0.12), 0 4px 10px rgba(10,102,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,255,0.9));
  border: 1px solid rgba(10,86,179,0.06);
  transition: transform 220ms ease, box-shadow 220ms ease, opacity 180ms ease;
  z-index: 800;
}

/* inner layout */
.biblioteca-card-inner{ text-align:center; padding:12px 14px; width:100%; }
.biblioteca-card-icon{
  font-size:44px;
  display:inline-block;
  width:72px;
  height:72px;
  line-height:72px;
  border-radius:18px;
  background: linear-gradient(180deg,#0A66FF,#0056d9);
  color:#fff;
  box-shadow: 0 10px 26px rgba(10,102,255,0.18), inset 0 -6px 14px rgba(255,255,255,0.12);
  margin-bottom:8px;
}
.biblioteca-card-title{
  margin:6px 0 4px;
  font-size:18px;
  font-weight:800;
  color:#07364a;
  letter-spacing:0.6px;
}
.biblioteca-card-desc{
  margin:0;
  color:#45607a;
  font-size:0.95rem;
  margin-top:6px;
}

/* Primary access button with soft glow */
.biblioteca-access-btn{
  background: linear-gradient(90deg, #0A66FF 0%, #0056d9 100%) !important;
  color: #fff !important;
  padding:12px 18px !important;
  font-size:0.98rem !important;
  font-weight:800 !important;
  border-radius:12px !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(10,102,255,0.18), 0 2px 8px rgba(10,102,255,0.08);
  transition: transform 180ms ease, box-shadow 220ms ease, filter 160ms ease;
  text-transform:uppercase;
}

/* subtle animated glow */
.biblioteca-access-btn::after{
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 14px;
  width: 60%;
  height: 60%;
  left: 20%;
  top: 18%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.00) 60%);
  opacity: 0.9;
  filter: blur(10px);
}

/* hover/active */
.biblioteca-access-btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(10,102,255,0.22), 0 6px 18px rgba(10,102,255,0.08);
  filter: brightness(1.04);
}

/* ensure close button sits visually compact next to primary button */
#close-biblioteca-card{
  background:#eef3ff !important;
  color:#00345c !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  border:1px solid rgba(10,86,179,0.06) !important;
}

/* responsive tweaks */
@media (max-width:420px){
  .biblioteca-card{ margin:10px auto; padding:12px; border-radius:12px; }
  .biblioteca-card-icon{ width:56px; height:56px; line-height:56px; font-size:36px; border-radius:12px; }
  .biblioteca-card-title{ font-size:16px; }
  .biblioteca-card-desc{ font-size:0.9rem; }
  .biblioteca-access-btn{ padding:10px 12px; font-size:0.92rem; }
}
/* MENU EM LISTA (PC) - professional inline links */
@media screen and (min-width:768px){
  .main-nav{ flex-direction:row; gap:18px; justify-content:center; background:transparent; padding:20px 0; }
  .main-nav .nav-link{
    background:#fff !important;
    color:var(--primary-color) !important;
    font-size:17px;
    font-weight:700;
    text-transform:uppercase;
    padding:10px 20px;
    margin:0 8px;
    border-radius:8px;
    box-shadow:0 6px 22px rgba(10,86,179,0.06);
  }
  .main-nav .nav-link:hover{
    color:#00345c;
    background: rgba(10,86,179,0.06);
    text-decoration:none;
  }
}
@media screen and (max-width:900px){
  .main-nav .nav-link{
    background:#1F8A70 !important;
    color:#fff !important;
    padding:10px 18px;
    border-radius:8px;
    box-shadow: 0 6px 18px rgba(31,138,112,0.06);
  }

  /* Make main menu links match the Centro de Aprendizagem button style on phones:
     full-width pill, centered, same color, padding and font weight */
  .main-nav .nav-link {
    width: 100%;
    max-width: 320px;
    align-self: center;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: none;
    box-shadow: 0 8px 20px rgba(31,138,112,0.08);
  }
}
.top-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1100;
  /* keep header saturated blue on all viewports per request ("azul carregado") */
  background:#003f8a;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  box-shadow:0 3px 8px rgba(0,0,0,0.12);
}
.top-nav .logo { display:flex; flex-direction:column; gap:2px; }
.top-nav .brand{ font-weight:600; font-size:1rem; color:#fff; font-family: 'Broadway', 'Poppins', sans-serif; text-transform:uppercase; letter-spacing:1px; }
.top-nav .brand-sub{ font-size:0.85rem; color:rgba(255,255,255,0.92); font-family: 'Roboto Flex', sans-serif; text-transform:none; }
.top-nav-links{ display:flex; gap:10px; align-items:center; }
.top-nav .nav-link{ color:#fff; text-decoration:none; font-weight:700; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,0.03); }
.top-nav .nav-link:hover{ background:rgba(255,255,255,0.08); }
/* Top-nav contact block for the phone link */
.top-nav-contact{ display:flex; align-items:center; gap:10px; position:relative; }
/* robot button */
.robot-btn{
  background: #fff;
  color: #003f8a;
  border: 0;
  width:40px;
  height:40px;
  border-radius:10px;
  font-size:1.1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
/* popup */
.contact-robot-popup{
  display:none;
  position:fixed;
  top:64px;
  right:14px;
  width:320px;
  max-width:92%;
  background:#fff;
  color:var(--text);
  border-radius:10px;
  box-shadow:0 14px 40px rgba(0,0,0,0.18);
  padding:12px;
  z-index:1200;
  border:1px solid rgba(0,0,0,0.06);
  overflow:auto;
  max-height:60vh;
}
/* compact footer clone styles inside popup */
.contact-robot-popup #contactos{ background:transparent; padding:0; }
.contact-robot-popup .redes a{ display:inline-block; margin:6px 6px; padding:8px 12px; font-size:0.9rem; }
#contactos {
    margin-top: 36px;
    padding-top: 10px; /* small extra internal spacing so links don't sit at the very top */
}
@media (min-width:900px){
  /* Desktop: keep the saturated blue header (do not switch to white) */
  .top-nav{ background:#003f8a; color:#fff; padding:12px 22px; box-shadow:0 2px 10px rgba(0,0,0,0.06); }
  .top-nav .phone-link{ background: rgba(255,255,255,0.08); color:#fff; padding:8px 12px; border-radius:8px; font-weight:800; }
  .top-nav .phone-link:hover{ background: rgba(255,255,255,0.16); }
  body { padding-top:86px; } /* slightly larger to account for desktop nav height */
}
/* Footer styles added per request */
footer{
  background-color:#003366;
  color:#f0f0f0;
  text-align:center;
  padding:25px 10px;
  font-size:14px;
  margin-top:18px;
}
footer p{ margin:6px 0 12px; }
.footer-links a{
  text-decoration:none;
  color:#fff;
  background-color:#007bff;
  padding:10px 18px;
  margin:6px;
  border-radius:8px;
  display:inline-block;
  font-weight:700;
  transition: background 0.25s ease;
}
.footer-links a:hover{
  background-color:#004a99;
}
/* Make TikTok and YouTube footer buttons larger and more prominent */
.footer-tiktok, .footer-youtube{
  padding:14px 24px;
  font-size:1.08rem;
  font-weight:800;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  background-color: #007bff;
  color: #fff;
  border-radius:8px;
}
@media(min-width:900px){
  .footer-tiktok, .footer-youtube{
    background:transparent;
    color: var(--primary-color);
    border:1px solid rgba(0,0,0,0.08);
    padding:10px 14px;
    font-size:0.98rem;
    box-shadow:none;
  }
  .footer-tiktok::after, .footer-youtube::after { content: ''; }
}
@media(min-width:900px){
  /* make footer buttons more subtle on wide screens to match "professional" desktop style */
  .footer-links a{
    background:transparent;
    color:var(--primary-color);
    border:1px solid rgba(0,0,0,0.06);
    padding:8px 12px;
    border-radius:6px;
    transform:none;
  }
  .footer-links a:hover{
    background:linear-gradient(180deg,#eef6ff,#fff);
    color:var(--primary-color);
    transform:none;
  }
}

/* Unified access button color + hover brightness */
.action-btn,
.open-exam,
.manual-open,
.card-share,
.top-nav .nav-link,
.main-nav .nav-link,
.footer-links a,
#cursos-btn, #doencas-btn, #simuladores-btn,
#manuals-support-btn, #manuals-support-btn-top {
  background: var(--access-blue) !important;
  color: #ffffff !important; /* texto branco para contraste com azul carregado */
  border-color: transparent !important;
  transition: filter 180ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
  /* replaced generic shadow with layered neon-compatible glow that reads well over the background image */
  box-shadow: 0 6px 18px rgba(31,138,112,0.06), 0 8px 30px var(--bg-glow);
  font-family: "Arial Rounded MT Bold", "Arial Rounded", Arial, sans-serif;
}
/* Ensure the Study button uses the same blue style as other action buttons */
#study-btn {
  background: var(--access-blue) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(31,138,112,0.06), 0 8px 30px var(--bg-glow);
  transition: filter 180ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}
/* increase brightness on hover */
.action-btn:hover,
.open-exam:hover,
.manual-open:hover,
.card-share:hover,
.top-nav .nav-link:hover,
.main-nav .nav-link:hover,
.footer-links a:hover,
#cursos-btn:hover, #doencas-btn:hover, #simuladores-btn:hover,
#manuals-support-btn:hover, #manuals-support-btn-top:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  background-color: var(--access-blue-hover) !important;
  color: #fff !important;
  /* stronger neon glow on hover to harmonize with background colors */
  box-shadow: 0 12px 36px rgba(31,138,112,0.10), 0 18px 60px var(--bg-glow-strong);
}
/* ensure desktop overrides for top-nav and main-nav still look professional but keep access-blue color */
@media (min-width:900px){
  .top-nav .nav-link, .main-nav .nav-link, .footer-links a {
    background: var(--access-blue) !important;
    color: #07364a !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
  }

  /* Keep module "Abrir" and manual open buttons blue on desktop and prevent white hover */
  .open-exam,
  .manual-open {
    background: var(--access-blue) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 22px rgba(10,86,179,0.06), 0 12px 40px var(--bg-glow) !important;
  }
  .open-exam:hover,
  .manual-open:hover {
    background: var(--access-blue-hover) !important;
    color: #ffffff !important;
    filter: brightness(1.06) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 36px rgba(31,138,112,0.10) !important, 0 18px 60px var(--bg-glow-strong) !important;
  }
}
.redes a {
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), filter 180ms ease, box-shadow 220ms ease;
  will-change: transform, filter;
  transform: translate3d(0,0,0);
  box-shadow: 0 8px 18px rgba(12,60,80,0.06);
  /* ensure buttons keep the unified access color but allow glow to appear */
  position: relative;
  z-index: 0;
}
/* glow effect when hovered or when JS adds --hovered var */
.redes a::before{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 10px;
  z-index: -1;
  /* changed: use CSS vars so the radial gradient follows cursor position and opacity */
  background: radial-gradient(ellipse at var(--mx,50%) var(--my,50%), rgba(127,201,255,var(--gOpacity,0.30)) 0%, rgba(127,201,255,0.06) 40%, transparent 60%);
  opacity: var(--gOpacity, 0);
  transition: opacity 160ms ease, transform 160ms ease, background-position 120ms linear;
  transform: scale(0.92);
  pointer-events: none;
}
/* when hovered (mouse over each) show stronger glow */
.redes a:hover,
.redes a[data-active="true"] {
  filter: brightness(1.14);
  transform: translate3d(0,-6px,0) scale(1.02);
  box-shadow: 0 18px 40px rgba(31,138,112,0.14);
}
.redes a:hover::before,
.redes a[data-active="true"]::before {
  opacity: calc(var(--gOpacity,0) + 0.18);
  transform: scale(1);
}
/* when container is in interactive mode, slight deeper glow */
#contactos.interactive .redes a::before{
  background: radial-gradient(ellipse at center, rgba(127,201,255,0.36) 0%, rgba(127,201,255,0.08) 40%, transparent 70%);
}
@media (max-width:480px){
  /* Hide the top-nav link group on phones so "Centro de Aprendizagem / Doenças / Simuladores / Manuais" are removed from the header */
  .top-nav .top-nav-links { display: none !important; }
}
@media (max-width:480px){
  /* Hide the top-nav link group on phones so "Centro de Aprendizagem / Doenças / Simuladores / Manuais" are removed from the header */
  .top-nav .top-nav-links { display: none !important; }
}
#manual-search{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #e6eef8;
  max-width:520px;
  width:100%;
  font-size:0.95rem;
  background:#fff;
}

.hero-title{
  color: #ffffff;
  font-family: 'Algerian', 'Broadway', 'Poppins', sans-serif;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.35),
    0 6px 18px rgba(0,0,0,0.42),
    0 2px 6px rgba(0,0,0,0.32);
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.08));
  backdrop-filter: blur(4px) saturate(0.9);
  -webkit-backdrop-filter: blur(4px) saturate(0.9);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  /* new: glowing and shimmer */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 50%, rgba(0,0,0,1) 100%);
}

.hero-title::after{
  content: '';
  position: absolute;
  top: -20%;
  left: -40%;
  width: 40%;
  height: 140%;
  background: linear-gradient(100deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.28) 45%, rgba(255,255,255,0.00) 70%);
  transform: rotate(-18deg);
  filter: blur(10px);
  opacity: 0.9;
  animation: shine-slide 3.2s ease-in-out infinite;
  pointer-events: none;
}

.hero-sub{
  color: rgba(255,255,255,0.95);
  font-family: 'Algerian', 'Broadway', 'Poppins', sans-serif;
  text-shadow: 0 1px 0 rgba(0,0,0,0.28), 0 4px 10px rgba(0,0,0,0.22);
  display:inline-block;
  padding:4px 10px;
  border-radius:8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.04));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-size:0.95rem;
  position: relative;
  overflow: hidden;
}

.hero-sub::after{
  content:'';
  position:absolute;
  top:-10%;
  left:-30%;
  width:30%;
  height:120%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-12deg);
  filter: blur(6px);
  animation: shine-slide 3.2s ease-in-out 0.6s infinite;
  pointer-events:none;
}

/* keyframes for the shimmer/glow */
@keyframes shine-slide{
  0% { transform: translateX(-120%) rotate(-18deg); opacity: 0; }
  10% { opacity: 0.75; }
  50% { transform: translateX(220%) rotate(-18deg); opacity: 0.9; }
  90% { opacity: 0.3; }
  100% { transform: translateX(400%) rotate(-18deg); opacity: 0; }
}

/* subtle pulsing glow to make the titles "brilhar" */
.hero-title, .hero-sub{
  transition: box-shadow 260ms ease, transform 260ms ease;
}

.hero-title:hover, .hero-sub:hover{
  box-shadow: 0 14px 48px rgba(10,120,255,0.18), 0 24px 80px rgba(127,201,255,0.06);
  transform: translateY(-2px);
}

#manuals-screen .brand {
    color: #ffffff !important;
}
#manuals-screen::before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.22); /* slightly darker overlay to improve global contrast */
  pointer-events: none;
  z-index: 0;
}
#manuals-screen > * { position: relative; z-index: 1; }

#diseases-screen, #diseases-screen * {
  /* removed: color: #ffffff !important; */
}
/* Apply white color only to the header title and subtitle on the Doenças screen */
#diseases-screen .header-content h1,
#diseases-screen .header-content p {
  color: #ffffff !important;
}
/* Ensure disease article/card body keeps default readable color (override any previous broad rules) */
#diseases-screen .results-card,
#diseases-screen .results-card p {
  color: var(--text) !important;
}
/* keep select readable (white text on darker background) */
#diseases-screen select, #diseases-screen option {
  color: #003f8a !important;
  background: rgba(255,255,255,0.95) !important;
}
.back-btn {
  background: var(--access-blue) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  padding: 8px 10px !important;
  border-radius: 8px !important;
  z-index: 1300 !important;
}
#courses-screen .brand { color: #ffffff !important; }
#courses-screen header .brand,
#courses-screen .courses-header .brand {
    color: #ffffff !important;
}
/* hide the original global Exportar PDF button (we now expose export inside modules panel) */
#export-pdf-btn { display: none !important; }
/* style for the in-panel export button so it matches action buttons but sits nicely inside results panel */
.in-panel-export {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  margin-left: 8px;
}

#manuals-list .results-card {
  max-height: 220px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* target the description block (second child in manual card) and clamp lines with ellipsis */
#manuals-list .results-card > div:nth-of-type(2) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  line-height: 1.25rem;
  margin-top: 8px;
}
/* ensure action row stays visible at the bottom of the card */
#manuals-list .results-card > div:last-of-type {
  margin-top: auto;
  z-index: 1;
}

/* Titles / headings sizing (14–16pt range) */
h1 { font-size:21px; font-weight:700; line-height:1.25; } /* ~16pt */
h2 { font-size:20px; font-weight:700; line-height:1.3; }  /* ~15pt */
h3 { font-size:19px; font-weight:700; line-height:1.35; }  /* ~14pt */

/* Ensure paragraph and card text use 12pt (16px) and normal weight */
.results-card, .results-card p, p, li, .tutorial-section p, .manual-title + div {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size:16px; /* 12pt */
  line-height:1.5;
  font-weight:400; /* normal weight — bold reserved for headings/important terms */
}

#simulators-screen .brand { color: #ffffff !important; }
/* Ensure the main simulator title and descriptive paragraph are white for readability */
#simulators-screen h2,
#simulators-screen main p {
  color: #ffffff !important;
}

/* NEW: feedback popup small form tweaks reuse contact-robot-popup styles */
#feedback-robot-popup form input,
#feedback-robot-popup form textarea {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  background: #ffffff;
}
#feedback-robot-popup h3 { margin: 0 0 6px 0; color: var(--primary-color); font-size:1rem; }
#feedback-robot-popup .action-btn { padding:8px 10px; border-radius:8px; font-weight:700; }

/* Anniversary badge in header (professional blue & white with shine) */
#anniv-badge{display:flex;align-items:center;gap:8px;margin-right:6px}
.anniv-inner{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#ffffff,#f4f8ff);padding:6px 10px;border-radius:12px;box-shadow:0 6px 18px rgba(10,40,90,0.14);border:1px solid rgba(10,86,179,0.12);cursor:default}
.anniv-ring{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 25%, #ffffff 0%, #e6f0ff 20%, #0A66FF 55%);color:#fff;font-weight:800;font-size:1.05rem;box-shadow:0 6px 18px rgba(10,86,179,0.18), inset 0 -6px 18px rgba(255,255,255,0.08)}
.anniv-text{display:flex;flex-direction:column;font-size:12px;color:#00345c;line-height:1}
.anniv-text strong{font-size:11px;color:#0A66FF;letter-spacing:0.6px}
.anniv-text span{font-size:11px;color:#145;opacity:0.85}
/* subtle animated glint for celebration (reduced motion safe) */
@media (prefers-reduced-motion: no-preference){
  .anniv-ring::after{content:"";position:absolute;width:18px;height:8px;left:6px;top:6px;border-radius:50%;background:linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.15));transform:rotate(-18deg);opacity:0.9;animation:anniv-shine 3.2s linear infinite}
  .anniv-inner{position:relative;overflow:visible}
  @keyframes anniv-shine{0%{transform:translateX(-20px) rotate(-18deg)}50%{transform:translateX(32px) rotate(-18deg);opacity:0.85}100%{transform:translateX(80px) rotate(-18deg);opacity:0}}
}
/* ensure badge looks good on small screens and desktop */
@media (max-width:420px){ #anniv-badge{margin-right:4px} .anniv-ring{width:36px;height:36px;font-size:0.95rem} .anniv-inner{padding:5px 8px;border-radius:10px} }

/* Books icon for "Manuais de apoio" — visible, slightly larger and with subtle shine */
.books-icon{
  display:inline-block;
  font-size:1.25em;
  line-height:1;
  margin-right:8px;
  vertical-align:middle;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
  text-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transform: translateY(-1px);
  transition: transform 220ms ease, text-shadow 320ms ease, filter 320ms ease;
  will-change: transform, text-shadow, filter;
  animation: books-shimmer 3.6s infinite ease-in-out;
}

/* reduced motion fallback */
@media (prefers-reduced-motion: reduce){
  .books-icon { animation: none; transform: none; }
}

@keyframes books-shimmer{
  0%{ transform: translateY(-1px) rotate(-2deg); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12)); }
  40%{ transform: translateY(-3px) rotate(0deg); filter: drop-shadow(0 10px 20px rgba(0,0,0,0.18)); }
  80%{ transform: translateY(-1px) rotate(2deg); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12)); }
  100%{ transform: translateY(-1px) rotate(-2deg); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12)); }
}

/* Ensure icons and full button text are white on access buttons that include icons */
.main-nav .nav-link.with-icon,
.main-nav .nav-link.with-icon .icon,
.main-nav .nav-link.with-icon .books-icon,
.main-nav .nav-link.with-icon .grad-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* On desktop where .main-nav .nav-link is overridden to primary color, preserve white for icon-bearing buttons */
@media screen and (min-width:768px){
  .main-nav .nav-link.with-icon {
    background: rgba(0,0,0,0.18) !important; /* subtle contrast for white text */
    color: #ffffff !important;
    box-shadow: 0 6px 22px rgba(10,86,179,0.06);
  }
  .main-nav .nav-link.with-icon .books-icon,
  .main-nav .nav-link.with-icon .icon {
    color: #ffffff !important;
  }
}

/* Ensure icons inside blue action buttons are white for contrast */
.action-btn .icon,
.action-btn .books-icon,
.action-btn .grad-icon,
.open-exam .icon,
.manual-open .icon,
.card-share .icon,
.back-btn .icon,
.in-panel-export .icon,
.main-nav .nav-link.with-icon .icon,
.main-nav .nav-link.with-icon .books-icon,
.main-nav .nav-link.with-icon .grad-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  /* keep icon opacity and alignment intact */
  opacity: 1 !important;
}