/* Estilos específicos para la página de login (estudiante) - basado en profesor/css/login.css */
body.login-page {
  font-family: 'Poppins', sans-serif;
  background-color: var(--color-primary);
  background-size: cover;
  background-position: right bottom;
  min-height: 100vh;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reducir padding en móviles */
@media (max-width: 768px) {
  body.login-page {
    padding: 0.25rem;
  }
}

body.login-page .login-container { max-width: 600px; width: 100%; margin: 0 auto; }

.login-form, .login-card {
  padding: 2.5rem;
  border-radius: var(--border-radius-lg);
  background-color: var(--color-white-transparent-90);
  box-shadow: 0 10px 30px var(--color-shadow);
  border: 1px solid var(--color-gray-transparent);
  backdrop-filter: blur(10px);
}

.login-header { text-align: center; margin-bottom: 2rem; }
.login-logo { max-width: 150px; margin-bottom: 1rem; }
.login-title { font-weight: 700; font-size: 1.5rem; color: var(--color-primary-dark); margin-bottom: 1rem; text-align: center; text-transform: uppercase; }

.login-form label { color: var(--color-primary-dark); font-weight: 600; font-size: 0.9rem; }

.login-form .form-control { height: 3rem; font-size: 1rem; border-radius: var(--border-radius-md); border: 1px solid var(--color-border); transition: border-color 0.2s, box-shadow 0.2s; }
.login-form .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem var(--color-primary-opacity-10); }

.login-form .input-group-text { background-color: var(--color-light); color: var(--color-primary); border-color: var(--color-border); border-right: none; border-radius: var(--border-radius-md) 0 0 var(--border-radius-md); width: 3rem; justify-content: center; }
.login-form .input-group .form-control { border-left: none; padding-left: 0.5rem; }

.btn-login { background-color: var(--color-primary); border-color: var(--color-primary); border-radius: var(--border-radius-md); font-size: 1.1rem; font-weight: 600; padding: 0.75rem; transition: all 0.3s ease; }

/* Estilos específicos para registro */
.registro-form { margin-top: 1rem; }
.registro-form .form-label { font-weight: 600; color: var(--color-primary-dark); margin-bottom: 0.25rem; }
.registro-form .form-control, .registro-form .form-select { border-radius: var(--border-radius-md); border: 1px solid var(--color-border); padding: 0.75rem; }
.registro-form .form-control:focus, .registro-form .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem var(--color-primary-opacity-10); }

/* Campo de contraseña con toggle */
.password-field { position: relative; }
.password-field .form-control { padding-right: 3rem; }
.password-toggle { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--color-gray-dark); cursor: pointer; z-index: 10; }
.password-toggle:hover { color: var(--color-primary); }

/* Estilos para Select2 */
.select2-container--default .select2-selection--single {
    height: 3rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-md) !important;
    padding: 0.75rem !important;
    font-size: 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5rem !important;
    padding-left: 0 !important;
    color: var(--color-dark);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.8rem !important;
    right: 0.75rem !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--color-primary-opacity-10) !important;
}

.select2-dropdown {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: 0 4px 6px var(--color-shadow) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary) !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 0.5rem !important;
}

/* Responsive para registro */
@media (max-width: 768px) {
    .registro-form .row .col-md-6 { margin-bottom: 1rem; }
    body.login-page .login-container { max-width: 100%; padding: 0; }
    .login-form, .login-card { padding: 1.5rem; }
    /* Espaciado más compacto en móviles */
    .registro-form .form-label { margin-bottom: 0.2rem; }
}

/* Pantallas grandes - formulario más amplio */
@media (min-width: 1200px) {
    body.login-page .login-container { max-width: 700px; }
}

@media (min-width: 1400px) {
    body.login-page .login-container { max-width: 800px; }
}
.btn-login:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 4px 10px var(--color-shadow); }

.alert { border-radius: var(--border-radius-md); font-weight: 500; border: none; }
.alert-danger { background-color: rgba(184, 19, 42, 0.1); color: var(--color-danger); border-left: 4px solid var(--color-danger); }
.alert-success { background-color: rgba(27, 177, 87, 0.1); color: var(--color-success); border-left: 4px solid var(--color-success); }
.alert-info { background-color: rgba(59, 142, 201, 0.1); color: var(--color-info); border-left: 4px solid var(--color-info); }

@keyframes slideInUp { from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: translateY(0);} }
.login-form, .login-card { animation: slideInUp 0.5s ease-out; }

@media (max-width: 575.98px) { .login-form, .login-card { padding: 2rem 1.5rem; } .login-title { font-size: 1.3rem; } .login-logo { max-width: 120px; } .login-container { max-width: 350px; } }

/* Fondos disponibles: se generan clases segun nombres en img/fondo*.webp */
.bg-fondo { background-image: url('../img/fondo.webp'); }
.bg-fondo1 { background-image: url('../img/fondo1.webp'); }
.bg-fondo2 { background-image: url('../img/fondo2.webp'); }
.bg-fondo3 { background-image: url('../img/fondo3.webp'); }
.bg-fondo4 { background-image: url('../img/fondo4.webp'); }
.bg-fondo5 { background-image: url('../img/fondo5.webp'); }
.bg-fondo6 { background-image: url('../img/fondo6.webp'); }