/* ============================================================
   login.css — Estilos específicos de la página de login
   Depende de tema2026.css
   ============================================================ */

/* Fondo de página */
.login-body {
  margin:      0;
  min-height:  100vh;
  display:     flex;
  align-items: center;
  justify-content: center;
  background:  linear-gradient(135deg, #f0f4ff 0%, #e8eef7 50%, #eff6ff 100%);
}

/* Contenedor centrador */
.login-wrapper {
  width:   100%;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
}

/* Tarjeta principal */
.login-card {
  width:         100%;
  max-width:     420px;
  background:    #fff;
  border-radius: var(--t26-radius-xl);
  box-shadow:    var(--t26-shadow-lg);
  overflow:      hidden;
  animation:     loginFadeIn .4s ease;
}

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

/* Cabecera con gradiente */
.login-header {
  background: linear-gradient(135deg, var(--t26-primary) 0%, var(--t26-primary-dark) 100%);
  padding:    1.75rem 2rem 1.5rem;
}

/* Logos */
.login-logos {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.25rem;
}

.login-logo {
  max-height: 38px;
  max-width:  130px;
  width:      auto;
  object-fit: contain;  
  opacity:    .92;
}

.login-logo-dark {
	filter:     brightness(0) invert(1);
}

/* Título */
.login-title {
  color:       #fff;
  font-size:   1.1rem;
  font-weight: 600;
  margin:      0;
  text-align:  center;
  opacity:     .95;
  letter-spacing: .01em;
}

/* Cuerpo del formulario */
.login-body-inner {
  padding: 2rem 2rem 1.25rem;
}

/* Alert de error */
.login-alert {
  background:  #fdf0f3;
  border-left: 4px solid var(--t26-danger);
  border-radius: var(--t26-radius-md);
  color:       var(--t26-danger);
  font-size:   .88rem;
  font-weight: 500;
  padding:     .65rem .9rem;
  margin-bottom: 1.25rem;
  display:     flex;
  align-items: center;
  gap:         .5rem;
}

/* Campos */
.login-field {
  margin-bottom: 1.1rem;
}

.login-field label {
  font-size:   .85rem;
  font-weight: 600;
  color:       var(--t26-text);
  margin-bottom: .35rem;
  display:     block;
}

/* Input con icono */
.login-input-wrap {
  position: relative;
}

.login-input-icon {
  position:    absolute;
  left:        .85rem;
  top:         50%;
  transform:   translateY(-50%);
  color:       var(--t26-text-muted);
  font-size:   .9rem;
  pointer-events: none;
  z-index:     2;
}

.login-input {
  padding-left: 2.5rem !important;
  background:   var(--t26-input-bg) !important;
  border:       1px solid var(--t26-border-color) !important;
  border-radius: var(--t26-radius-md) !important;
  height:       42px;
  font-size:    .9rem;
  transition:   var(--t26-transition-fast);
}

.login-input:focus {
  background:   #fff !important;
  border-color: var(--t26-primary) !important;
  box-shadow:   0 0 0 3px rgba(1, 52, 117, 0.18) !important;
  outline:      none;
}

.login-input:focus + .login-input-icon,
.login-input-wrap:focus-within .login-input-icon {
  color: var(--t26-primary);
}

/* Botón */
.login-btn {
  background: linear-gradient(90deg, var(--t26-primary) 0%, var(--t26-primary-dark) 100%);
  border:     none;
  height:     44px;
  font-size:  .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: var(--t26-radius-md) !important;
  margin-top: .5rem;
  transition: var(--t26-transition-fast);
}

.login-btn:hover {
  background: linear-gradient(90deg, #012a60 0%, #004494 100%);
  transform:  translateY(-1px);
  box-shadow: var(--t26-shadow-md);
  color:      #fff;
}

.login-btn:active {
  transform:  translateY(0);
  box-shadow: none;
}

.login-btn .fa {
  margin-right: .4rem;
}

/* Footer */
.login-footer {
  text-align:  center;
  font-size:   .78rem;
  color:       var(--t26-text-muted);
  padding:     .85rem 2rem 1.1rem;
  border-top:  1px solid var(--t26-border-color);
}