/* ============================================================
   MASHI ÁNGEL YACHACHIK - Estilos SOLO para Login (responsive)
   - No afecta panel admin/docente/estudiante
   - Fase 1: ajustes visuales del acceso
   ============================================================ */

/* Variables locales (solo dentro de login-page) */
.login-page{
  --verde-selva:#2d6a4f;
  --verde-claro:#40916c;
  --tierra:#8b5e3c;
  --gris-claro:#f8f9fa;
  --gris-medio:#e9ecef;
  --gris-oscuro:#6c757d;
  --texto-oscuro:#212529;
  --radio:20px;
  --radio-sm:10px;
}

.cultural-bar{
  height:6px;
  background: linear-gradient(90deg, #184d34, #2d6a4f, #4ba178, #b9824e, #d96d4f);
}

.login-page{
  min-height: calc(100vh - 6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 34%),
    linear-gradient(140deg, #102d20 0%, #184d34 32%, #2d6a4f 68%, #4ba178 100%);
}

.login-page::before{
  content:"";
  position:absolute;
  inset:-60% -60% -60% -60%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
  animation: floatBg 24s linear infinite;
}

@keyframes floatBg{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.login-card{
  width: min(440px, 92vw);
  background:rgba(255,255,255,0.98);
  border-radius: var(--radio);
  padding: 34px;
  box-shadow: 0 24px 70px rgba(7, 24, 17, .34);
  position:relative;
  z-index:1;
}

.login-header{text-align:center;margin-bottom:22px}

.login-logo{
  width:78px;height:78px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin: 0 auto 14px;
  font-size:34px;
  background: linear-gradient(135deg, var(--verde-selva), var(--verde-claro));
  color:#fff;
}

.login-header h1{
  margin:0;
  color: var(--verde-selva);
  font-weight:800;
  letter-spacing:.2px;
  font-size: 1.55rem;
  line-height:1.2;
}

.login-header p{margin-top:6px;color:var(--gris-oscuro);font-size:.86rem}

.login-subtitle{
  background: linear-gradient(135deg, #1f6846, var(--tierra));
  color:#fff;
  text-align:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: .82rem;
  margin: 16px 0 22px;
  font-style: italic;
}

/* Inputs */
.login-card .form-group{margin-bottom:18px}
.login-card .form-group label{
  display:block;
  font-weight:700;
  color:var(--verde-selva);
  margin-bottom:8px;
  font-size:.92rem
}

/* ============================================================
   FIX ICONOS (muy importante)
   - En styles.css hay un selector global: .form-group input { padding: ... }
     que puede pisar el padding de estos inputs.
   - Aquí usamos mayor especificidad + !important SOLO dentro del login.
   ============================================================ */
.login-page .login-card .input-icon{position:relative}

.login-page .login-card .input-icon span{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:1.1rem;
  opacity:.9;
  width:22px;
  text-align:center;
  pointer-events:none; /* evita clicks raros sobre el icono */
}

.login-page .login-card .input-icon input{
  width:100%;
  padding: 12px 48px 12px 48px !important; /* <- clave: evita solape icono/texto */
  border:2px solid var(--gris-medio);
  border-radius: var(--radio-sm);
  font-size: 1rem;
}

.login-page .login-card .input-icon input:focus{
  outline:none;
  border-color: var(--verde-claro);
  box-shadow: 0 0 0 3px rgba(64,145,108,.15);
}

/* Botón de mostrar contraseña */
.password-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:none;
  border-radius:999px;
  background:rgba(45,106,79,.10);
  color:var(--verde-selva);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, transform .2s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible{
  background:rgba(45,106,79,.18);
  outline:none;
}

/* Botón login (sobrescribe el azul del panel sin tocar el resto del sitio) */
.login-page #btn-login.btn.btn-primary,
.login-submit-btn{
  width:100%;
  border-radius: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #1f6846, #49a176);
  color:#fff;
  border:0;
  font-weight:800;
  box-shadow:0 12px 28px rgba(24,77,52,.24);
}

.login-page #btn-login.btn.btn-primary:hover,
.login-submit-btn:hover{filter:brightness(1.04)}

.login-legal-notice{
  margin-top:16px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(45,106,79,.08), rgba(139,94,60,.10));
  border:1px solid rgba(45,106,79,.12);
  color:#4f5d52;
  font-size:.74rem;
  line-height:1.5;
  text-align:center;
}

.login-footer-note{
  text-align:center;
  margin-top:20px;
  font-size:.75rem;
  color:#8b949e;
}

/* Responsive */
@media (max-width: 480px){
  .login-page{padding:14px}
  .login-card{padding:22px;border-radius:18px}
  .login-header h1{font-size:1.25rem}
  .login-subtitle{border-radius:16px;font-size:.78rem}

  /* un poco más de margen para iconos en pantallas pequeñas */
  .login-page .login-card .input-icon input{
    padding-left: 50px !important;
  }

  .password-toggle{
    right:8px;
  }

  .login-legal-notice{
    font-size:.7rem;
    padding:10px 12px;
  }
}