/* ============================================================
   BitInfor OAuth Modal — Estilos
   ============================================================ */

/* ── OVERLAY ───────────────────────────────────────────────── */
.bitinfor-oauth-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.45);
  z-index:         999999;
  align-items:     center;
  justify-content: center;
  padding:         16px;
  animation:       boFadeIn .25s ease;
}
.bitinfor-oauth-overlay.active { display: flex; }

/* ── MODAL ─────────────────────────────────────────────────── */
.bitinfor-oauth-modal {
  width:         100%;
  max-width:     480px;
  background:    #fff;
  border-radius: 12px;
  box-shadow:    0 8px 40px rgba(0,0,0,.22);
  overflow:      hidden;
  animation:     boSlideDown .28s ease;
  font-family:   -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ── HEADER ────────────────────────────────────────────────── */
.bitinfor-oauth-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 20px 16px;
  border-bottom:   1px solid #E5E7EB;
  gap:             12px;
}
.bitinfor-oauth-header h2 {
  flex:        1;
  margin:      0;
  font-size:   17px;
  font-weight: 600;
  color:       #111827;
  line-height: 1.3;
  text-align:  center;
}

.bitinfor-oauth-close,
.bitinfor-oauth-back {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       #6B7280;
  font-size:   22px;
  line-height: 1;
  padding:     4px 6px;
  border-radius: 4px;
  transition:  color .15s, background .15s;
  flex-shrink: 0;
}
.bitinfor-oauth-close:hover,
.bitinfor-oauth-back:hover  { color: #111827; background: #F3F4F6; }

/* ── METHODS (pantalla principal) ──────────────────────────── */
.bitinfor-methods { padding: 20px; display: flex; flex-direction: column; gap: 10px; }

.bitinfor-method-btn {
  display:         flex;
  align-items:     center;
  gap:             14px;
  width:           100%;
  padding:         15px 18px;
  background:      #fff;
  border:          1px solid #E5E7EB;
  border-radius:   8px;
  font-size:       14px;
  font-weight:     500;
  color:           #111827;
  cursor:          pointer;
  text-align:      left;
  transition:      background .15s, border-color .15s, box-shadow .15s;
}
.bitinfor-method-btn:hover {
  background:    #F9FAFB;
  border-color:  #D1D5DB;
  box-shadow:    0 2px 8px rgba(0,0,0,.07);
}

.bitinfor-method-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.bitinfor-method-arrow { margin-left: auto; color: #9CA3AF; font-size: 18px; }

/* ── SCREENS ───────────────────────────────────────────────── */
.bitinfor-screen { padding: 20px; }

.bitinfor-screen-title {
  font-size:   16px;
  font-weight: 600;
  color:       #111827;
  margin:      0 0 18px;
  text-align:  center;
}

.bitinfor-hint {
  font-size:    13px;
  color:        #6B7280;
  text-align:   center;
  margin:       -10px 0 16px;
}

/* ── FORM ELEMENTS ─────────────────────────────────────────── */
.bitinfor-form-group { margin-bottom: 14px; }
.bitinfor-form-group label {
  display:     block;
  font-size:   13px;
  font-weight: 500;
  color:       #374151;
  margin-bottom: 5px;
}
.bitinfor-input {
  width:         100%;
  padding:       10px 12px;
  border:        1px solid #D1D5DB;
  border-radius: 6px;
  font-size:     14px;
  color:         #111827;
  outline:       none;
  transition:    border-color .15s, box-shadow .15s;
  box-sizing:    border-box;
}
.bitinfor-input:focus {
  border-color: #0066CC;
  box-shadow:   0 0 0 3px rgba(0,102,204,.12);
}

/* Código de acceso — grande y centrado */
.bitinfor-code-input {
  text-align:    center;
  font-size:     28px;
  font-weight:   700;
  letter-spacing: 10px;
  padding:       12px;
}

/* Password wrapper */
.bitinfor-pass-wrap {
  position: relative;
}
.bitinfor-pass-wrap .bitinfor-input { padding-right: 44px; }
.bitinfor-toggle-pass {
  position:   absolute;
  right:      10px;
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  cursor:     pointer;
  font-size:  16px;
  color:      #9CA3AF;
  padding:    4px;
}

.bitinfor-forgot-link {
  display:     block;
  margin-top:  6px;
  font-size:   12px;
  color:       #0066CC;
  text-decoration: none;
}
.bitinfor-forgot-link:hover { text-decoration: underline; }

/* ── SUBMIT BUTTON ─────────────────────────────────────────── */
.bitinfor-submit-btn {
  width:         100%;
  padding:       13px;
  background:    #0066CC;
  color:         #fff;
  border:        none;
  border-radius: 6px;
  font-size:     14px;
  font-weight:   700;
  letter-spacing: .5px;
  cursor:        pointer;
  transition:    background .15s;
  margin-top:    4px;
}
.bitinfor-submit-btn:hover    { background: #0052A3; }
.bitinfor-submit-btn:disabled { background: #9CA3AF; cursor: not-allowed; }

/* ── LINK BUTTON ───────────────────────────────────────────── */
.bitinfor-link-btn {
  background:  none;
  border:      none;
  color:       #0066CC;
  font-size:   13px;
  cursor:      pointer;
  padding:     0;
  text-decoration: underline;
}
.bitinfor-link-btn:hover { color: #0052A3; }

.bitinfor-register-link {
  text-align: center;
  font-size:  13px;
  color:      #6B7280;
  margin-top: 14px;
}

/* ── MESSAGES ──────────────────────────────────────────────── */
.bitinfor-msg {
  padding:     10px 14px;
  border-radius: 6px;
  font-size:   13px;
  margin-bottom: 12px;
}
.bitinfor-msg.error   { background: #FEF2F2; color: #B91C1C; border-left: 3px solid #EF4444; }
.bitinfor-msg.success { background: #F0FDF4; color: #15803D; border-left: 3px solid #22C55E; }
.bitinfor-msg.info    { background: #EFF6FF; color: #1D4ED8; border-left: 3px solid #3B82F6; }

/* ── FOOTER ────────────────────────────────────────────────── */
.bitinfor-oauth-footer {
  padding:    12px 20px;
  background: #F9FAFB;
  border-top: 1px solid #F3F4F6;
  text-align: center;
  font-size:  11px;
  color:      #9CA3AF;
  min-height: 16px;
}
.bitinfor-oauth-footer a { color: #0066CC; text-decoration: none; }
.bitinfor-oauth-footer a:hover { text-decoration: underline; }

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes boFadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes boSlideDown {
  from { opacity: 0; transform: translateY(-18px) scale(.97) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 520px) {
  .bitinfor-oauth-overlay { padding: 0; align-items: flex-end; }
  .bitinfor-oauth-modal   { border-radius: 12px 12px 0 0; max-width: 100%; }
  @keyframes boSlideDown {
    from { transform: translateY(40px) }
    to   { transform: translateY(0) }
  }
}