/* ====== Variables ====== */
:root{
  --primary:#ff4b00;
  --primary-dark:#e63f00;
  --primary-soft:rgba(255,75,0,.10);
}

/* ====== Reset ====== */
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:
    radial-gradient(1000px 600px at 10% 10%, rgba(255,75,0,.08), transparent 60%),
    linear-gradient(135deg, #fafafa 0%, #f4f4f4 100%);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  line-height:1.6;
  position:relative
}

.login-container{
  width:100%;
  max-width:420px;
  position:relative;
  z-index:1
}

.login-card{
  background:#ffffff;
  border-radius:18px;
  padding:48px 40px;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
  border:1px solid #eee;
  position:relative;
  overflow:hidden
}

/* Barra superior admin */
.card-accent{
  position:absolute;
  top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
}

/* ===== Header ===== */
.login-header{
  text-align:center;
  margin-bottom:36px
}

.logo{
  margin-bottom:18px;
  display:flex;
  justify-content:center;
}

.logo img{
  width:72px;
  height:72px;
  border-radius:14px;
  object-fit:cover
}

.login-header h1{
  color:#1f2937;
  font-size:2rem;
  font-weight:800;
  margin-bottom:6px;
  letter-spacing:-.02em
}

.login-header p{
  color:#64748b;
  font-size:15px
}

/* ===== Alert ===== */
.alert{
  background:#FFF4F1;
  border:1px solid rgba(255,75,0,.25);
  color:var(--primary-dark);
  padding:10px 12px;
  border-radius:10px;
  font-size:.9rem;
  margin-bottom:18px
}

/* ===== Inputs ===== */
.form-field{
  position:relative;
  margin-bottom:28px
}

.form-field input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:2px solid #e2e8f0;
  padding:12px 0;
  color:#1f2937;
  font-size:16px;
  outline:none;
  transition:all .3s ease
}

.form-field input:focus{
  border-bottom-color:transparent
}

.form-field label{
  position:absolute;
  left:0;
  top:12px;
  color:#94a3b8;
  font-size:16px;
  pointer-events:none;
  transition:all .3s ease;
  transform-origin:left
}

.form-field input:focus+label,
.form-field input:not(:placeholder-shown)+label{
  top:-8px;
  font-size:12px;
  font-weight:700;
  color:var(--primary)
}

.field-line{
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  transition:width .3s ease
}

.form-field input:focus~.field-line{
  width:100%
}

/* ===== Password Toggle ===== */
.form-field:has(.password-reveal) input{
  padding-right:48px
}

.password-reveal{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  color:#94a3b8;
  padding:8px;
  border-radius:6px;
  transition:.2s;
  display:flex;
  align-items:center;
  justify-content:center
}

.password-reveal:hover{
  color:var(--primary);
  background:var(--primary-soft)
}

.eye-hide{display:none}
.password-reveal.reveal-active .eye-show{display:none}
.password-reveal.reveal-active .eye-hide{display:block}

/* ===== Actions ===== */
.form-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:28px;
  flex-wrap:wrap;
  gap:12px
}

.remember-checkbox{
  display:flex;
  align-items:center;
  cursor:pointer;
  font-size:14px;
  color:#334155;
  font-weight:600
}

.remember-checkbox input[type="checkbox"]{
  display:none
}

.checkbox-custom{
  width:20px;
  height:20px;
  border:2px solid #cbd5e0;
  border-radius:4px;
  margin-right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:transparent;
  transition:.2s
}

.remember-checkbox input[type="checkbox"]:checked + .checkbox-custom{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff
}

.forgot-password{
  color:#334155;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:.2s
}

.forgot-password:hover{
  color:var(--primary)
}

/* ===== Button ===== */
.signin-button{
  width:100%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
  border:none;
  border-radius:12px;
  padding:16px 24px;
  cursor:pointer;
  font-size:16px;
  font-weight:800;
  transition:all .3s ease;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing:.2px
}

.signin-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(255,75,0,.35)
}

.signin-button:active{
  transform:translateY(0)
}

.signin-button:disabled{
  background:#cbd5e0;
  cursor:not-allowed
}

/* Loader */
.button-text{transition:opacity .2s ease}
.button-loader{position:absolute;opacity:0;transition:opacity .2s ease}
.loader-circle{
  width:20px;height:20px;
  border:2px solid rgba(255,255,255,.35);
  border-top:2px solid #fff;
  border-radius:50%;
  animation:spin 1s linear infinite
}
@keyframes spin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
.signin-button.loading .button-text{opacity:0}
.signin-button.loading .button-loader{opacity:1}

/* Responsive */
@media (max-width:480px){
  body{padding:16px}
  .login-card{padding:36px 28px;border-radius:16px}
  .login-header h1{font-size:1.75rem}
  .form-actions{flex-direction:column;align-items:flex-start;gap:14px}
}