/* =========================================================
   BK Login CSS
   Estilo tarjeta con avatar superior
   ========================================================= */

:root{
  --bk-bg: #eef1f5;
  --bk-card: #ffffff;
  --bk-text: #374151;
  --bk-muted: #6b7280;
  --bk-line: #e5e7eb;

  --bk-primary: #2563eb;
  --bk-primary-dark: #1d4ed8;
  --bk-primary-soft: #bfdbfe;

  --bk-danger-bg: #fef2f2;
  --bk-danger-border: #fecaca;
  --bk-danger-text: #991b1b;

  --bk-success-bg: #f0fdf4;
  --bk-success-border: #bbf7d0;
  --bk-success-text: #166534;

  --bk-radius-card: 20px;
  --bk-radius-input: 10px;
  --bk-shadow:
    0 10px 30px rgba(0,0,0,.08),
    0 2px 8px rgba(0,0,0,.04);

  --bk-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* =========================================================
   Overlay SSO
   ========================================================= */
.bk-sso-overlay{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 20px;
}

.bk-sso-overlay.is-visible{
  display:flex;
}

.bk-sso-box{
  width: min(92vw, 360px);
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.12);
  padding:24px 22px;
  text-align:center;
  border:1px solid rgba(59,109,224,.08);
}

.bk-sso-spinner{
  width:44px;
  height:44px;
  margin:0 auto 14px auto;
  border-radius:50%;
  border:4px solid #dbe5ff;
  border-top-color:#3b6de0;
  animation: bkSpin .85s linear infinite;
}

.bk-sso-title{
  margin:0 0 6px 0;
  font-size:1rem;
  font-weight:700;
  color:#22304d;
}

.bk-sso-text{
  margin:0;
  font-size:.92rem;
  line-height:1.45;
  color:#5a6781;
}

@keyframes bkSpin{
  to{ transform: rotate(360deg); }
}

*{
  box-sizing:border-box;
}

html, body{
  height:100%;
  overflow-x:hidden;
}

body.bk-login{
  margin:0;
  min-height:100vh;
  font-family: var(--bk-font);
  background: var(--bk-bg);
  color: var(--bk-text);
}

/* =========================================================
   Layout principal
   ========================================================= */
.bk-login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
}

.bk-login-card{
  width:100%;
  max-width:460px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  border-radius: var(--bk-radius-card);
  box-shadow: var(--bk-shadow);
  position:relative;
  padding:72px 34px 30px;
  border: 1px solid rgba(0,0,0,.05);
}

/* =========================================================
   Avatar superior
   ========================================================= */
.bk-login-avatar-wrap{
  position:absolute;
  top:-28px;
  left:50%;
  transform:translateX(-50%);
  width:88px;
  height:88px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.bk-login-avatar-icon{
  width:100%;
  height:100%;
  border-radius:50%;
  background:#f8fafc;
  border:1px solid #d9dfe8;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  overflow:hidden;
}

.bk-login-avatar-svg{
  width:62px;
  height:62px;
  display:block;
}

/* =========================================================
   Encabezado
   ========================================================= */
.bk-login-head{
  text-align:center;
  margin-bottom:18px;
}

.bk-login-title{
  margin:0;
  font-size:1.25rem;
  font-weight:500;
  color:#5f6875;
  letter-spacing:.2px;
}

.bk-login-subtitle{
  margin:8px 0 0;
  font-size:.95rem;
  color:#9aa3af;
  font-weight:400;
}

/* =========================================================
   Alertas
   ========================================================= */
.bk-alert{
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:12px;
  font-size:.92rem;
  line-height:1.45;
  text-align:center;
}

.bk-alert-error{
  background: var(--bk-danger-bg);
  border:1px solid var(--bk-danger-border);
  color: var(--bk-danger-text);
}

.bk-alert-success{
  background: var(--bk-success-bg);
  border:1px solid var(--bk-success-border);
  color: var(--bk-success-text);
}

.bk-alert-title{
  font-weight:700;
  margin-bottom:6px;
}

.bk-alert ul{
  margin:0;
  padding:0;
  list-style:none;
}

/* =========================================================
   Formulario
   ========================================================= */
.bk-field{
  margin-bottom:16px;
}

.bk-label{
  display:block;
  margin-bottom:8px;
  font-size:.90rem;
  font-weight:700;
  color:#5b6470;
}

.bk-input-group{
  display:flex;
  gap:10px;
  align-items:center;
}

.bk-input-group .bk-input{
  flex:1 1 auto;
  min-width:0;
  position:relative;
  z-index:1;
}

.bk-input{
  width:100%;
  height:50px;
  border:1px solid transparent;
  border-radius: var(--bk-radius-input);
  background:#f3f4f6;
  color:#4b5563;
  font-size:16px;
  padding:0 14px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance:none;
  appearance:none;
}

.bk-input::placeholder{
  color:#9ca3af;
}

.bk-input:hover{
  background:#eef0f3;
}

.bk-input:focus{
  background:#fff;
  border-color:#bfdbfe;
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}

/* Ocultar ojo nativo solo donde aplica */
.bk-input[type="password"]::-ms-reveal,
.bk-input[type="password"]::-ms-clear{
  display:none;
}

/* =========================================================
   Botón ojo
   ========================================================= */
.bk-btn-toggle{
  flex:0 0 50px;
  width:50px;
  min-width:50px;
  height:50px;
  border:1px solid transparent;
  border-radius: var(--bk-radius-input);
  background:#f3f4f6;
  color:#6b7280;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  transition: background .15s ease, color .15s ease, transform .05s ease;
  padding:0;
  position:relative;
  z-index:2;
  -webkit-appearance:none;
  appearance:none;
}

.bk-btn-toggle:hover{
  background:#e5e7eb;
  color:#374151;
}

.bk-btn-toggle:active{
  transform:translateY(1px);
}

.bk-btn-toggle:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* =========================================================
   Botón principal
   ========================================================= */
.bk-actions{
  margin-top:20px;
}

.bk-btn-primary{
  width:100%;
  height:52px;
  border:0;
  border-radius:10px;
  background: linear-gradient(180deg, var(--bk-primary) 0%, var(--bk-primary-dark) 100%);
  color:#fff;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px rgba(37,99,235,.22);
  -webkit-appearance:none;
  appearance:none;
}

.bk-btn-primary:hover{
  box-shadow: 0 8px 18px rgba(37,99,235,.26);
}

.bk-btn-primary:active{
  transform:translateY(1px);
}

.bk-btn-primary:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* =========================================================
   Footer pequeño opcional
   ========================================================= */
.bk-login-foot{
  margin-top:22px;
  text-align:center;
}

.bk-login-muted{
  font-size:.82rem;
  color:#9ca3af;
}

/* =========================================================
   Modal cambio de contraseña
   ========================================================= */
.bk-modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:16px;
}

.bk-modal{
  width:100%;
  max-width:460px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 55px rgba(0,0,0,.25);
  overflow:hidden;
  transform:translateY(6px);
  opacity:0;
  transition: opacity 160ms ease, transform 160ms ease;
}

.bk-modal.is-open{
  transform:translateY(0);
  opacity:1;
}

.bk-modal-head{
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.bk-modal-title{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#374151;
}

.bk-modal-sub{
  margin-top:6px;
  font-size:13px;
  color:#6b7280;
}

.bk-modal-body{
  padding:18px 18px 10px;
}

.bk-modal-foot{
  padding:0 18px 18px;
  display:flex;
  justify-content:flex-end;
}

.bk-btn-disabled{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  color:#6b7280;
  padding:10px 14px;
  border-radius:10px;
  cursor:not-allowed;
}

.bk-note{
  margin-top:6px;
  font-size:.82rem;
  color:#6b7280;
}

body.bk-modal-lock{
  overflow:hidden;
}

/* =========================================================
   Errores
   ========================================================= */
label.error,
span.error,
.bk-error{
  display:block;
  margin-top:8px;
  font-size:.85rem;
  font-weight:700;
  color: var(--bk-danger-text);
}

.bk-input.is-invalid,
.bk-input.error,
input.error,
select.error,
textarea.error{
  border-color: rgba(153,27,27,.30);
  box-shadow:0 0 0 3px rgba(153,27,27,.10);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 480px){
  .bk-login-card{
    max-width:100%;
    padding:64px 20px 24px;
  }

  .bk-login-title{
    font-size:1.40rem;
  }

  .bk-login-subtitle{
    font-size:.90rem;
  }

  .bk-login-avatar-wrap{
    width:86px;
    height:86px;
    top:-30px;
  }

  .bk-login-avatar-svg{
    width:62px;
    height:62px;
  }

  .bk-input,
  .bk-btn-toggle,
  .bk-btn-primary{
    height:48px;
  }

  .bk-btn-toggle{
    flex:0 0 48px;
    width:48px;
    min-width:48px;
  }
}

.bk-login-head .bk-login-brand{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin:0 0 10px 0 !important;
  overflow:hidden !important;
}

.bk-login-head .bk-login-brand .bk-login-brand-logo{
  display:block !important;
  flex:0 0 auto !important;
  width:140px !important;
  max-width:140px !important;
  min-width:140px !important;
  height:auto !important;
  max-height:44px !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 auto !important;
}