/* ==========================================================
   Canvas FMUSP - Tela de login (card transl'ucido, a direita)
   Ambiente: Producao (canvas.fm.usp.br)
   Departamento de TI
   ----------------------------------------------------------
   Requer login-custom.js para o titulo, o divisor "ou" e o
   botao "Entrar com e-mail e senha".
   O JS so roda com o tema SALVO E APLICADO - o preview do
   Theme Editor nao executa JavaScript personalizado.
   ========================================================== */

/* ---------- 0. Fundo das telas de login (desktop + mobile) ----------
   Movido para o topo em 22/09/2026: o navegador so descobria a imagem de
   fundo (background-image) depois de baixar o login-custom.css inteiro.
   Colocando aqui em cima, a descoberta acontece assim que o parser de CSS
   chega neste trecho, sem esperar o restante do arquivo. Combinar com o
   preload adicionado no login-custom.js. Mesmo patch ja validado em
   homologacao. Diagnostico e decisao registrados no projeto (Obsidian /
   Claude Project) em 22/09/2026. */

body.ic-Login-Body {
  background-image: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.55)), url("https://canvas.fm.usp.br/accounts/1/files/192/download?verifier=g4wzWevuYTIRMMnoIIiWocWSSgTu9ZuT3uFwIYUD");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body:has(#f1_container),
#f1_container{
  background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.55)),url("https://canvas.fm.usp.br/accounts/1/files/192/download?verifier=g4wzWevuYTIRMMnoIIiWocWSSgTu9ZuT3uFwIYUD");
  background-size:cover;
  background-position:center;
  background-attachment:scroll;
  min-height:100vh;
}

/* ---------- 1. Card alinhado a direita ---------- */

.ic-Login__container {
  width: 100%;
  max-width: none;
  display: block;
}

.ic-Login__content {
  width: 100%;
  max-width: 420px;
  margin-left: auto !important;
  margin-right: 8vw !important;
  float: none !important;
}

@media (max-width: 900px) {
  .ic-Login__content {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------- 2. Efeito de vidro ---------- */

.ic-Login__innerContent {
  background: rgba(18, 32, 26, 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  padding: 36px 34px 30px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ---------- 3. Cabecalho: logo, titulo, subtitulo ---------- */

.ic-Login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Limita a altura do logo/banner do tema. Ajuste o valor
   conforme a imagem que estiver em uso.                    */
.ic-Login-header__logo {
  margin: 0 auto 16px;
  max-height: 90px;
  background-size: contain !important;
  background-position: center !important;
}

.ic-Login-header__logo img {
  max-height: 90px;
  height: auto;
  width: auto;
}

.ic-Login-header__links {
  display: none;
}

.fmusp-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  margin: 0 0 6px;
}

.fmusp-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  text-align: center;
  margin: 0 0 24px;
}

/* ---------- 4. Ordem dos blocos do formulario ---------- */

#login_form {
  display: flex;
  flex-direction: column;
}

/* Bloco do SSO sobe para o topo do card */
.ic-Login #login_form .ic-Login__sso {
  order: -1;
  margin: 0;
  padding: 0;
  border: 0 !important;
}

/* Estado recolhido: esconde campos, acoes e botao Login */
#login_form.fmusp-collapsed .ic-Form-control--login,
#login_form.fmusp-collapsed .ic-Login__actions {
  display: none;
}

/* ---------- 5. Botao do Google ---------- */
/* A especificidade precisa vencer .Button.Button--primary */

/* Remove a linha divisoria nativa e qualquer fundo herdado */
.ic-Login .ic-Login__sso,
.ic-Login .ic-Login__sso-list,
.ic-Login .ic-Login__sso-list__item {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.ic-Login .ic-Login__sso::before,
.ic-Login .ic-Login__sso::after,
.ic-Login .ic-Login__sso-list::before,
.ic-Login .ic-Login__sso-list::after {
  display: none !important;
  content: none !important;
}

/* A lista e os itens sao inline por padrao - por isso o botao
   nao ocupava a largura total do card                        */
.ic-Login .ic-Login__sso-list {
  list-style: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: initial;
}

.ic-Login .ic-Login__sso-list__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.ic-Login .ic-Login__sso .ic-Login__sso-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  line-height: 1.2;
  padding: 13px 16px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #1f2937 !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: 10px !important;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
  transition: background 0.15s ease;
}

.ic-Login .ic-Login__sso .ic-Login__sso-button:hover,
.ic-Login .ic-Login__sso .ic-Login__sso-button:focus,
.ic-Login .ic-Login__sso .ic-Login__sso-button:active {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}

/* Esconde o icone monocromatico nativo do Canvas */
.ic-Login .ic-Login__sso-button .ic-Login_icon-sso {
  display: none !important;
}

/* Logo oficial do Google (SVG colorido embutido) */
.ic-Login .ic-Login__sso-button--google::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
}

.ic-Login .ic-Login__sso-button__title,
.ic-Login .ic-Login__sso-button__title--google {
  color: #1f2937 !important;
  font-weight: 600;
  padding: 0;
  margin: 0;
}

/* ---------- 6. Divisor "ou" e botao secundario ---------- */

.fmusp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fmusp-divider::before,
.fmusp-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.fmusp-toggle {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.fmusp-toggle:hover,
.fmusp-toggle:focus {
  background: rgba(255, 255, 255, 0.16);
}

/* ---------- 7. Campos, rotulos e botao Login ---------- */

.ic-Login .ic-Label {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  margin-bottom: 6px;
}

.ic-Login .ic-Input {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 11px 12px;
}

.ic-Login .ic-Input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.ic-Login .Button--login {
  width: 100%;
  border-radius: 10px;
  background: #006747;
  border-color: #006747;
  color: #ffffff;
  font-weight: 600;
  padding: 12px 16px;
}

.ic-Login .Button--login:hover,
.ic-Login .Button--login:focus {
  background: #00553b;
  border-color: #00553b;
}

.ic-Login__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.ic-Login__link,
.ic-Login a {
  color: #ffffff;
}

.ic-Login__actions-timeout label {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- 8. Rodape ---------- */

.ic-Login-footer {
  display: none !important;
}

/* ---------- 9. Logo institucional (MEDICINA USP) ---------- */
/* Reativado em 10/09/2026: o banner antigo (attachment id 6) tinha
   um erro de digitacao ("CLASSSROOM") e duplicava o titulo que ja
   vem do JS. Agora aponta para o logo oficial MEDICINA USP
   (attachment id 1755, mesmo arquivo do menu mobile), mantendo
   titulo/subtitulo em JS abaixo dele. Decisao registrada na
   documentacao do projeto (Obsidian / Claude Project) em 10/09/2026. */
.ic-Login-header__logo {
  display: block !important;
  margin: 0 auto 12px !important;
  max-height: 70px;
}

.ic-Login-header__logo img {
  max-height: 70px;
  height: auto;
  width: auto;
}

.ic-Login-header {
  margin-bottom: 4px;
}

/* ---------- 10b. Fundo da tela de login DESKTOP ---------- */
/* Adicionado em 10/09/2026: ate entao so a tela mobile (#f1_container,
   secao 12) tinha a foto do predio historico da FMUSP como fundo; o
   desktop ficava so com a cor solida do glassmorphism. Usa o mesmo
   arquivo (attachment id 5, verifier legado/nao expira) ja usado no
   mobile. */


/* ---------- 10. Centralizacao vertical do card ---------- */
.ic-Login {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.ic-Login__container {
  display: flex;
  align-items: center;
  width: 100%;
}

.ic-Login__content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---------- 11. Layout MOBILE (#f1_card) ---------- */
#f1_card{border-radius:14px}
#f1_card .mobileLogin-Header{background-image:none!important;text-align:center;padding:24px 16px 8px;min-height:0!important;height:auto!important}
#f1_card .mobileLogin-Header img,#f1_card .mobileLogin-Header svg{display:none!important}
#f1_card .fmusp-title{color:#006747;font-size:1.35rem;font-weight:700;margin:0 0 4px;text-align:center}
#f1_card .fmusp-subtitle{color:#5b6b63;font-size:.92rem;margin:0;text-align:center}
#f1_card .fmusp-sso{padding:8px 16px 0}
#f1_card .fmusp-google-button{display:block;text-align:center;box-sizing:border-box;width:100%;padding:14px 16px;background:#fff;color:#1f2937!important;border:1px solid rgba(0,0,0,.15);border-radius:10px;font-weight:600;text-decoration:none!important}
#f1_card .fmusp-divider{display:flex;align-items:center;gap:12px;margin:18px 16px;color:#8a978f;font-size:.75rem;text-transform:uppercase}
#f1_card .fmusp-divider::before,#f1_card .fmusp-divider::after{content:"";flex:1;height:1px;background:rgba(0,0,0,.12)}
#f1_card .fmusp-toggle{display:block;box-sizing:border-box;width:calc(100% - 32px);margin:0 16px 16px;padding:14px 16px;border-radius:10px;background:#fff;color:#006747;border:1px solid #006747;font-weight:600}
#f1_card #login_form.fmusp-collapsed .ic-Form-control,#f1_card #login_form.fmusp-collapsed .forgotBlock{display:none!important}
#f1_card #login_form.fmusp-collapsed .Button,
#f1_card #login_form.fmusp-collapsed input[type="submit"],
#f1_card #login_form.fmusp-collapsed button[type="submit"]{display:none!important}

/* ---------- 12. Fundo da tela mobile ---------- */

#f1_card{
  background:rgba(255,255,255,.95);
  margin:32px 14px;
  padding-bottom:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}

/* ---------- 12. Fundo da tela mobile ---------- */
body:has(#f1_container),
#f1_container{
  background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.55)),url("https://canvas.fm.usp.br/accounts/1/files/192/download?verifier=g4wzWevuYTIRMMnoIIiWocWSSgTu9ZuT3uFwIYUD");
  background-size:cover;
  background-position:center;
  background-attachment:scroll;
  min-height:100vh;
}
#f1_card{
  background:rgba(255,255,255,.95);
  margin:32px 14px;
  padding-bottom:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
#f1_card{background:#ffffff;border:1px solid rgba(0,0,0,.06)}
#f1_card{background:rgba(18,32,26,.60);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(255,255,255,.18)}
#f1_card .fmusp-title{color:#fff}
#f1_card .fmusp-subtitle{color:rgba(255,255,255,.78)}
#f1_card .fmusp-toggle{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35)}
#f1_card .ic-Label{color:rgba(255,255,255,.9)}

/* ---------- 13. Respiro interno do card mobile ---------- */
#f1_card #login_form{padding:0 16px 12px}
#f1_card .fmusp-sso{padding:8px 0 0}
#f1_card .fmusp-divider{margin:18px 0}
#f1_card .fmusp-toggle{width:100%;margin:0 0 4px}
#f1_card #login_form .ic-Form-control{margin-bottom:12px}
#f1_card #login_form .ic-Input{border-radius:8px}
#f1_card #login_form .Button{border-radius:10px}
#f1_card .forgotBlock{padding:4px 0 0}

/* ---------- 14. Campos alinhados ao padrao desktop ---------- */
#f1_card .fmusp-sso{padding:8px 0 16px}
#f1_card #login_form .ic-Form-control{margin:0 0 14px}
#f1_card #login_form .ic-Input,
#f1_card #login_form input[type="text"],
#f1_card #login_form input[type="email"],
#f1_card #login_form input[type="password"]{
  border:1px solid rgba(255,255,255,.4);
  border-radius:8px;
  padding:12px;
  box-sizing:border-box;
  width:100%;
}
#f1_card #login_form .Button,
#f1_card #login_form input[type="submit"]{
  width:100%;
  background:#006747;
  border-color:#006747;
  color:#fff;
  border-radius:10px;
  padding:12px 16px;
  margin-top:2px;
}
#f1_card .forgotBlock{text-align:center;padding:12px 0 0}
#f1_card .forgotBlock a,
#f1_card .forgot-password{color:#fff!important;text-decoration:underline}

/* ---------- 15. Rodape interno (marca Instructure) ---------- */
.ic-app-footer,
.ic-app-footer__logo-link,
.ic-app-footer__link-list,
#footer .footer-logo{
  display:none!important;
}

/* ---------- 16. Rotulos do menu global ---------- */
.ic-app-header__menu-list-item .menu-item__text,
.ic-app-header .menu-item__text{
  font-size:.68rem;
  line-height:1.15;
  letter-spacing:-.01em;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}


/* ---------- 13. Ocultar link "LMS de Fonte Aberta" (rodape nativo do Canvas) ---------- */
/* Adicionado em 10/09/2026: o Canvas core injeta um link para instructure.com
   com o texto "LMS de Fonte Aberta" (open_source_learning_management_system,
   ver app/views/login/canvas/_new_login_content.html.erb) dentro de
   #footer-links. Esse bloco nao tem mais nenhum outro conteudo (epilogue
   vazio), entao ocultar #footer-links inteiro e seguro. Decisao registrada
   na documentacao do projeto (Obsidian / Claude Project) em 10/09/2026. */
#footer-links {
  display: none !important;
}