/* ======================================================================
   login-botoes.css — Barra lateral de atalhos (AJAX)
   - Espaçamento vertical uniforme
   - Botões com mesma altura (min-height)
   - Layout horizontal (ícone + texto)
   - 5 itens (inclui Redes sociais)
   - Painel com gradiente delicado + hover glow
   - Animação em cascata
   ====================================================================== */

body.pagelayout-login .login-container.has-sidepanel {
  max-width: 980px;
  display: grid;
  grid-template-columns: minmax(480px, 600px) 300px;
  gap: 18px;
  align-items: stretch;
}

body.pagelayout-login .login-container.has-sidepanel > .loginform {
  height: 100%;
}

body.pagelayout-login .login-sidepanel {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;

  background:
    radial-gradient(900px 420px at 20% 10%, rgba(255, 255, 255, 0.10), transparent 55%),
    radial-gradient(700px 360px at 85% 25%, rgba(13, 110, 253, 0.12), transparent 55%),
    linear-gradient(180deg, #2f5b6f 0%, #2c5364 45%, #264a59 100%);

  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 22px 38px -14px;
  padding: 18px 16px;
}

body.pagelayout-login .login-sidepanel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

body.pagelayout-login .login-sidepanel__grid {
  display: flex;
  flex-direction: column;
  gap: 14px; /* espaçamento vertical igual */
}

/* =========================================================
   Botões horizontais (altura padronizada)
   ========================================================= */

@keyframes sideBtnIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.pagelayout-login .login-sidepanel__item {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;

  min-height: 72px; /* garante mesma “altura visual” para todos */
  width: 100%;

  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);

  box-shadow: rgba(0, 0, 0, 0.10) 0px 10px 18px -14px;

  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;

  opacity: 0;
  animation: sideBtnIn 0.45s ease-out forwards;
}

body.pagelayout-login .login-sidepanel__item:nth-child(1) { animation-delay: 0.10s; }
body.pagelayout-login .login-sidepanel__item:nth-child(2) { animation-delay: 0.18s; }
body.pagelayout-login .login-sidepanel__item:nth-child(3) { animation-delay: 0.26s; }
body.pagelayout-login .login-sidepanel__item:nth-child(4) { animation-delay: 0.34s; }
body.pagelayout-login .login-sidepanel__item:nth-child(5) { animation-delay: 0.42s; }
body.pagelayout-login .login-sidepanel__item:nth-child(6) { animation-delay: 0.50s; }

body.pagelayout-login .login-sidepanel__item:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.26);

  box-shadow:
    rgba(13, 110, 253, 0.30) 0px 10px 22px -14px,
    rgba(0, 0, 0, 0.12) 0px 16px 28px -18px;

  filter: brightness(1.02);
}

body.pagelayout-login .login-sidepanel__item:active {
  transform: translateY(0);
}

body.pagelayout-login .login-sidepanel__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

body.pagelayout-login .login-sidepanel__icon svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
  opacity: 0.95;
}

body.pagelayout-login .login-sidepanel__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body.pagelayout-login .login-sidepanel__label {
  color: rgba(255, 255, 255, 0.96);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.pagelayout-login .login-sidepanel__sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  body.pagelayout-login .login-sidepanel__item {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   Responsivo — painel vai para baixo
   ========================================================= */

@media (max-width: 992px) {
  body.pagelayout-login .login-container.has-sidepanel {
    grid-template-columns: 1fr;
    max-width: 680px;
  }

  body.pagelayout-login .login-sidepanel {
    justify-content: flex-start;
  }
}

@media (max-width: 420px) {
  body.pagelayout-login .login-sidepanel__item {
    min-height: 68px;
    padding: 11px 12px;
  }

  body.pagelayout-login .login-sidepanel__label {
    font-size: 12.5px;
  }

  body.pagelayout-login .login-sidepanel__sub {
    font-size: 12px;
  }
}

/* =========================================================
   Modal "Problemas de acesso" — tipografia e elegância
   ========================================================= */

.fm-help-content {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

.fm-help-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.fm-help-header p {
  font-size: 14.5px;
  color: rgba(31, 41, 55, 0.75);
  margin-bottom: 20px;
}

.fm-help-section {
  margin-bottom: 18px;
}

.fm-help-section h3 {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #111827;
}

.fm-help-section p {
  font-size: 14.5px;
  margin-bottom: 8px;
}

.fm-help-section ul {
  margin: 6px 0 10px 18px;
  padding: 0;
}

.fm-help-section li {
  font-size: 14.5px;
  margin-bottom: 4px;
}

.fm-help-details summary {
  cursor: pointer;
  font-weight: 600;
  margin-top: 6px;
}

.fm-help-details ul {
  margin: 8px 0 0 18px;
}

.fm-help-summary {
  margin-top: 20px;
  padding: 14px 16px;
  border-left: 4px solid #2c5364;
  background: #f0f6fa;
  border-radius: 8px;
}

.fm-help-summary h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 700;
}

.fm-help-summary ol {
  margin: 0 0 0 18px;
  padding: 0;
}

.fm-help-summary li {
  font-size: 14.5px;
  margin-bottom: 4px;
}

/* =========================================================
   Sidepanel — Ícones outline finos e curvilíneos (premium)
   ========================================================= */

/* Remove SVGs inline antigos */
.login-sidepanel__icon svg {
  display: none;
}

/* Base do ícone */
.login-sidepanel__icon {
  width: 28px;
  height: 28px;
  background-color: #ffffff;
  flex-shrink: 0;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* =========================
   Ícones por ação
   ========================= */

/* 1) Como acessar — ícone de play-circle */
.login-sidepanel__item[data-action="como-acessar"] .login-sidepanel__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 8.5L15 12L10 15.5V8.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 8.5L15 12L10 15.5V8.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 2) Problemas de acesso — help-circle */
.login-sidepanel__item[data-action="problemas-acesso"] .login-sidepanel__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 16h.01M10.8 9.5a1.7 1.7 0 1 1 2.4 1.6c-.7.3-1.2.8-1.2 1.7' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 16h.01M10.8 9.5a1.7 1.7 0 1 1 2.4 1.6c-.7.3-1.2.8-1.2 1.7' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 3) Site — globe */
.login-sidepanel__item[data-action="link-site"] .login-sidepanel__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 4) Portal do Aluno — user */
.login-sidepanel__item[data-action="link-portal"] .login-sidepanel__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0-4-4a4 4 0 0 0 4 4Z' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4 20c0-3.3 3.6-6 8-6s8 2.7 8 6' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0-4-4a4 4 0 0 0 4 4Z' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4 20c0-3.3 3.6-6 8-6s8 2.7 8 6' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 5) Redes sociais — share */
.login-sidepanel__item[data-action="redes-sociais"] .login-sidepanel__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8a2.5 2.5 0 1 0-2.3-3.4' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 14a2.5 2.5 0 1 0 2.3 3.4' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 12l4-2M10 12l4 2' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8a2.5 2.5 0 1 0-2.3-3.4' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 14a2.5 2.5 0 1 0 2.3 3.4' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 12l4-2M10 12l4 2' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 6) Laboratórios Virtuais — beaker */
.login-sidepanel__item[data-action="link-labs"] .login-sidepanel__icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 3h15M6 3v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3M6 14h12' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 3h15M6 3v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3M6 14h12' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =========================================================
   Modal Redes Sociais — Ícones outline finos e elegantes
   ========================================================= */

/* Remove texto interno antigo */
.fm-social-ico {
  font-size: 0;
}

/* Base do ícone */
.fm-social-ico {
  width: 36px;
  height: 36px;
  margin-bottom: 6px;

  background-color: #2563eb; /* azul institucional */
  border-radius: 50%;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 60%;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 60%;
}

/* =========================
   Ícones por rede
   ========================= */

/* Facebook */
.fm-social-card[href*="facebook"] .fm-social-ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8h2V5h-2c-2 0-3 1-3 3v2H9v3h2v6h3v-6h2.2l.8-3H14V8Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 8h2V5h-2c-2 0-3 1-3 3v2H9v3h2v6h3v-6h2.2l.8-3H14V8Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Instagram */
.fm-social-card[href*="instagram"] .fm-social-ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='16' height='16' rx='5' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='17' cy='7' r='1' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='16' height='16' rx='5' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='17' cy='7' r='1' fill='black'/%3E%3C/svg%3E");
}

/* YouTube */
.fm-social-card[href*="youtube"] .fm-social-ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='7' width='18' height='10' rx='3' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 9.5L14 12L10 14.5V9.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='7' width='18' height='10' rx='3' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 9.5L14 12L10 14.5V9.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}