/**
 * CSS para Login Educamais - Layout Flexbox com Sistema de Abas (Versão Limpa)
 *
 * @package    local_login_educamais
 * @copyright  2025 Breno Augusto <brenoaugusto@uems.br>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/* ==== VARIÁVEIS DE CORES ==== */
:root {
  /* Paleta GEPEM */
  --gepem-blue-dark: #1a3a7a; /* azul escuro — fundo esquerdo */
  --gepem-blue-light: #00b4d8; /* azul claro/ciano — curva superior */
  --gepem-orange: #f5930a; /* laranja — oval central */
  --gepem-red: #e53935; /* vermelho — fundo direito */
  --gepem-green: #00a878; /* verde — cor principal */

  /* Cores principais — Azul-Ciano como cor primária */
  --educamais-primary: #00b4d8; /* Azul-Ciano GEPEM */
  --educamais-primary-dark: #0099bb; /* Azul-Ciano escuro */
  --educamais-primary-darker: #007899; /* Azul-Ciano mais escuro */
  --educamais-success: #00a878; /* Verde GEPEM */
  --educamais-success-light: #33bf99; /* Verde claro */

  /* Gradiente de fundo — Azuis GEPEM */
  --educamais-bg-gradient-elegant: linear-gradient(
    135deg,
    #1a3a7a 0%,
    /* Azul escuro GEPEM */ #00b4d8 100% /* Azul ciano GEPEM */
  );
  --educamais-bg-gradient-complex: var(--educamais-bg-gradient-elegant);
  --educamais-bg-gradient-complex-soft: linear-gradient(
    135deg,
    rgba(26, 58, 122, 0.7) 0%,
    /* Azul escuro GEPEM suave */ rgba(0, 180, 216, 0.7) 100%
      /* Azul ciano suave */
  );

  /* Cores de fundo */
  --educamais-bg-white: #ffffff; /* Branco-Paz */
  --educamais-bg-light: #fafafa; /* Cinza muito claro */
  --educamais-bg-lighter: #f0f0f0; /* Cinza claro */

  /* Cores de texto */
  --educamais-text-primary: #000000; /* Preto-Ébano */
  --educamais-text-secondary: #3c3c3c; /* Cinza-Hárpia */
  --educamais-text-muted: #3c3c3c; /* Cinza-Hárpia */
  --educamais-text-dark: #000000; /* Preto-Ébano */

  /* Cores de borda */
  --educamais-border-light: #cccccc; /* Cinza claro para bordas */
  --educamais-border-lighter: #e0e0e0; /* Cinza mais claro para bordas */

  /* Cores com transparência */
  --educamais-white-alpha-95: rgba(255, 255, 255, 0.95); /* Branco-Paz 95% */
  --educamais-black-alpha-20: rgba(0, 0, 0, 0.2); /* Preto-Ébano 20% */
}

/* Reset e base */
* {
  box-sizing: border-box;
}

/* Corrige margens */
#page-login-index .login-container {
  margin-bottom: 0 !important;
}

/* Remove padding lateral do Bootstrap col-12 apenas na página de login */
#page-login-index #region-main-box.col-12,
#page-login-index #region-main.col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove height do maincontent na página de login */
#page-login-index #maincontent {
  height: 0px !important;
}

/* Aplica apenas na página de login */
#page-login-index body,
.pagelayout-login body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Previne scroll lateral em elementos do Moodle */
#page-login-index html,
#page-login-index body,
#page-login-index #page-wrapper,
#page-login-index #page,
#page-login-index #page-content,
#page-login-index #region-main-box,
#page-login-index #region-main {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100vw !important;
}

/* Garante que containers não excedam a largura da viewport */
#page-login-index .container-fluid,
#page-login-index .moove-container-fluid,
#page-login-index .row {
  max-width: 100vw !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Container principal */
.educamais-login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;
  background: var(--educamais-bg-gradient-complex);
}

/* Container principal flexbox */
.educamais-main-container {
  display: flex;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  height: 60vh;
  min-height: 500px;
  background: var(--educamais-bg-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px var(--educamais-black-alpha-20);
}

/* ==== SEÇÃO DE GUIA (COLUNA ESQUERDA) ==== */
.educamais-guide-section {
  flex: 0 0 50%;
  width: 50%;
  background: linear-gradient(
    145deg,
    var(--educamais-bg-light) 0%,
    var(--educamais-bg-lighter) 100%
  );
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Sistema de abas */
.educamais-tabs {
  display: flex;
  background: var(--educamais-bg-white);
  overflow: hidden;
}

.educamais-tab-button {
  flex: 1;
  padding: 15px 20px;
  border: none;
  background: transparent;
  color: var(--educamais-text-muted);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  backdrop-filter: blur(0px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.educamais-tab-button:hover {
  background: var(--educamais-bg-light);
  color: var(--educamais-text-secondary);
  backdrop-filter: blur(4px);
}

.educamais-tab-button.active {
  color: white;
  background: linear-gradient(
    135deg,
    var(--educamais-primary),
    var(--educamais-primary-dark)
  );
  box-shadow: 0 2px 12px -3px rgba(0, 180, 216, 0.5);
  backdrop-filter: blur(10px) saturate(180%);
  transform: translate3d(0, -1px, 0);
  border-radius: 8px 8px 0 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.educamais-tab-button[data-tab="suporte"].active {
  background: linear-gradient(
    135deg,
    var(--educamais-success),
    var(--educamais-success-light)
  );
  box-shadow: 0 2px 12px -3px rgba(0, 168, 120, 0.5);
}

.educamais-tab-button.active i {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Conteúdo das abas */
.educamais-tab-content {
  flex: 1;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.educamais-tab-panel {
  display: none;
  animation: slideInFromRight 0.4s ease-out;
  padding: 30px;
  min-height: 100%;
  position: relative;
  background: linear-gradient(
    145deg,
    var(--educamais-bg-light) 0%,
    var(--educamais-bg-lighter) 100%
  );
}

.educamais-tab-panel.active {
  display: flex;
  flex-direction: column;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Estilização específica da aba Primeiro Acesso */
#tab-primeiro-acesso h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--educamais-text-primary);
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#tab-primeiro-acesso h3 i {
  color: var(--educamais-primary);
  font-size: 22px;
}

.educamais-guide-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.educamais-guide-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px;
  background: var(--educamais-white-alpha-95);
  border-radius: 12px;
  border: 1px solid rgba(0, 180, 216, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.educamais-guide-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--educamais-primary),
    var(--educamais-primary-dark)
  );
}

.educamais-guide-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 180, 216, 0.2);
}

.educamais-guide-icon {
  min-width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--educamais-primary),
    var(--educamais-primary-dark)
  );
  color: white;
  border-radius: 10px;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3);
  flex-shrink: 0;
}

.educamais-guide-text {
  flex: 1;
}

.educamais-guide-text strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--educamais-text-primary);
  margin-bottom: 5px;
}

.educamais-guide-text br + text,
.educamais-guide-text:not(strong) {
  font-size: 14px;
  color: var(--educamais-text-muted);
  line-height: 1.5;
}

/* Estilização específica da aba Suporte */
#tab-suporte h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--educamais-text-primary);
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#tab-suporte h3 i {
  color: var(--educamais-success);
  font-size: 22px;
}

.educamais-support-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.educamais-support-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px;
  background: var(--educamais-white-alpha-95);
  border-radius: 12px;
  border: 1px solid rgba(0, 168, 120, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.educamais-support-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--educamais-success),
    var(--educamais-success-light)
  );
}

.educamais-support-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 168, 120, 0.2);
}

.educamais-support-icon {
  min-width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--educamais-success),
    var(--educamais-success-light)
  );
  color: white;
  border-radius: 10px;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 168, 120, 0.3);
  flex-shrink: 0;
}

.educamais-support-text {
  flex: 1;
}

.educamais-support-text strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--educamais-text-primary);
  margin-bottom: 5px;
}

.educamais-support-text br + text,
.educamais-support-text:not(strong) {
  font-size: 14px;
  color: var(--educamais-text-muted);
  line-height: 1.5;
}

/* ==== SEÇÃO DO FORMULÁRIO (COLUNA DIREITA) ==== */
.educamais-form-section {
  flex: 0 0 50%;
  width: 50%;
  background: var(--educamais-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.educamais-form-container {
  width: 100%;
  max-width: 400px;
}

/* Campos de input */
.educamais-input {
  padding: 15px;
  border: 2px solid var(--educamais-border-lighter);
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: var(--educamais-bg-light);
}

.educamais-input:focus {
  outline: none;
  border-color: var(--educamais-primary);
  background: var(--educamais-bg-white);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1);
}

/* Botão de login */
.educamais-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  background: linear-gradient(
    135deg,
    var(--educamais-primary) 0%,
    var(--educamais-primary-dark) 100%
  );
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.educamais-login-btn:hover {
  background: linear-gradient(
    135deg,
    var(--educamais-primary-dark) 0%,
    var(--educamais-primary-darker) 100%
  );
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 180, 216, 0.3);
}

.educamais-login-btn:active {
  transform: translateY(0);
}

/* ==== RESPONSIVIDADE ==== */

/* Tablet */
@media (max-width: 1024px) {
  .educamais-main-container {
    max-width: 900px;
  }

  .educamais-form-section {
    padding: 30px;
  }
}

/* Pequeno Tablet */
@media (max-width: 991.98px) {
  #page-login-index #page {
    padding: 0 !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  /* Remove qualquer padding/margin do Bootstrap no mobile */
  #page-login-index #page,
  #page-login-index #page-wrapper,
  #page-login-index .container-fluid,
  #page-login-index #region-main-box,
  #page-login-index #region-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .educamais-login-container {
    padding: 0;
    height: auto;
    min-height: 100vh;
    align-items: flex-start;
    background: var(--educamais-bg-gradient-complex-soft);
  }

  .educamais-main-container {
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    height: auto;
    min-height: fit-content;
    margin: 0;
    border-radius: 0;
  }

  .educamais-guide-section {
    order: 2;
    width: 100%;
  }

  .educamais-form-section {
    order: 1;
    padding: 30px 30px;
    width: 100%;
    box-sizing: border-box;
  }

  .educamais-form-container {
    margin: 0 auto;
    padding: 0;
  }

  /* Abas sempre visíveis no mobile */
  .educamais-tabs {
    position: relative;
  }

  .educamais-tab-button {
    font-size: 14px;
    padding: 12px 12px;
  }

  .educamais-tab-content {
    padding: 12px;
    height: auto;
  }
}

@media (max-width: 480px) {
  .educamais-form-section {
    padding: 20px 30px;
  }

  .educamais-tab-content {
    padding: 12px;
  }

  .educamais-support-item {
    padding: 12px;
  }
}